Mention input

export const Default = () => (
  <div style={{ width: 360 }}>
    <Editor placeholder="Task — type @ to mention a record">
      Call <Chip type="person" name="Jane Doe" /> about the renewal
    </Editor>
  </div>
);

export const Sizes = () => (
  <div style={grid}>
    <Labeled label="single-line (min-height 32px)">
      <Editor placeholder="Task">
        Call <Chip type="person" name="Jane Doe" />
      </Editor>
    </Labeled>
    <Labeled label="multiline (.mi-multiline, min-height 88px)">
      <Editor multiline placeholder="Description">
        Follow up with <Chip type="person" name="Jane Doe" /> at{' '}
        <Chip type="company" name="Acme Robotics" /> — send the price list and book a second call.
      </Editor>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={grid}>
    <Labeled label="empty (placeholder)">
      <Editor placeholder="Type @ to mention a record" />
    </Labeled>
    <Labeled label="with mentions">
      <Editor placeholder="Task">
        Prepare the offer for <Chip type="deal" name="Acme — renewal 2026" /> with{' '}
        <Chip type="user" name="Petr Novák" />
      </Editor>
    </Labeled>
    <Labeled label="lost entity (.mi-lost — rendered as plain text)">
      <Editor placeholder="Task">
        Call <span className="mi-lost">Jane Doe</span> about the renewal
      </Editor>
    </Labeled>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: border turns --accent with a 3px translucent ring (15 %) — mirrors the input box.
    </span>
  </div>
);

export const Composition = () => (
  <div style={{ position: 'relative', transform: 'translate(0)', width: 420, height: 264 }}>
    <Editor placeholder="Task — type @ to mention a record">
      Call <Chip type="person" name="Jane Doe" /> and @ac
    </Editor>
    <div
      className="mi-menu"
      role="listbox"
      aria-label="Mentions"
      style={{ top: 'var(--sp-7)', left: 0 }}
    >
      {ROWS.map((r, i) => (
        <button
          type="button"
          key={r.label}
          role="option"
          aria-selected={i === 0}
          className={`acrm-recordselect-opt${i === 0 ? ' is-active' : ''}`}
        >
          <span className={`mi-opt-ic ic-tone-${r.tone}`}>
            <Icon name={r.icon} />
          </span>
          <span className="acrm-recordselect-tx">
            <span className="nm">{r.label}</span>
          </span>
        </button>
      ))}
    </div>
  </div>
);