Product picker

export const Default = () => <Live label="Účastníci" initial={['c1', 'o1']} />;

export const States = () => (
  <div style={grid}>
    <Labeled label="empty — only “Přidat”, no visible input (references float)">
      <div style={field}>
        <Live label="Účastníci" />
      </div>
    </Labeled>
    <Labeled label="filled — tokens wrap, “Přidat” stays last">
      <div style={field}>
        <Live label="Účastníci" initial={['c1', 'c2', 'o1', 'd1']} />
      </div>
    </Labeled>
    {/* port: apps/web/src/components/person/NewContactDialog.tsx (Firma, max={1}) */}
    <Labeled label="max reached (max={1}) — “Přidat” is gone, × gives the slot back">
      <div style={field}>
        <Live label="Firma" initial={['o1']} max={1} />
      </div>
    </Labeled>
    {/* port: EntityPicker statusOf — meeting invitations (dot after the name) */}
    <Labeled label="token state — dot after the name, title + aria-label carry the meaning">
      <Static>
        <span className="eref-wstate">
          <EntityRef type="person" name="Jana Nováková" removable onRemove={() => {}} />
          <span className="eref-dot green" title="Přijato" aria-label="Přijato" />
        </span>
        <span className="eref-wstate">
          <EntityRef type="person" name="Petr Svoboda" removable onRemove={() => {}} />
          <span className="eref-dot amber" title="Bez odpovědi" aria-label="Bez odpovědi" />
          <span className="eref-meta">Neodesláno</span>
        </span>
      </Static>
    </Labeled>
    <Labeled label="open — below the minimum query (state, not an explanation)">
      <RecordPanel width={320} searchPlaceholder="Hledat osobu nebo firmu…">
        <div className="acrm-recordselect-empty">Napište alespoň 3 znaky</div>
      </RecordPanel>
    </Labeled>
    <Labeled label="open — results (adding mode: nothing checked, picked records are tokens)">
      <RecordPanel width={320} query="nov" searchPlaceholder="Hledat osobu nebo firmu…">
        <RecordRow
          name="Jana Nováková"
          sub="[email protected] · Kontakt"
          entityType="contact"
          mode="single"
        />
        <RecordRow
          name="Novák a syn"
          sub="11223344 · Firma"
          entityType="organization"
          mode="single"
        />
      </RecordPanel>
    </Labeled>
    {/* port: EntityPicker emails — New meeting, typed address first */}
    <Labeled label="open — invite by e-mail: the typed address is the first row">
      <RecordPanel width={320} query="[email protected]" searchPlaceholder="Hledat osobu nebo firmu…">
        <button
          type="button"
          className="acrm-recordselect-opt acrm-recordselect-create"
          role="option"
          aria-selected={false}
        >
          <Icon name="mail" />
          <span className="acrm-recordselect-tx">
            <span className="nm">Nový kontakt: [email protected]</span>
          </span>
        </button>
      </RecordPanel>
    </Labeled>
    {/* port: apps/web/src/components/ProductPicker.tsx (free text, P7) */}
    <Labeled label="open — products: free text in the footer when nothing matches by name (no empty sentence — the answer is the action)">
      <RecordPanel
        width={340}
        query="Poradenství"
        searchPlaceholder="Hledat produkt…"
        footer={
          <button
            type="button"
            className="acrm-recordselect-opt acrm-recordselect-create"
            role="option"
            aria-selected={false}
          >
            <Icon name="writing" />
            <span className="acrm-recordselect-tx">
              <span className="nm">Použít text „Poradenství“</span>
            </span>
          </button>
        }
      >
        {null}
      </RecordPanel>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div style={grid}>
    <Note>
      Entity picker = this field + records from /mentions/search (recent, e-mail invites). Product
      picker = this field + the product catalog (top by usage, free text). One value in a form row
      is a plain Record select, not this field.
    </Note>
    {/* port: apps/web/src/components/calendar/EditMeetingForm.tsx (Obchody — DEAL_TYPES) */}
    <Labeled label="form row — deals of a meeting">
      <div style={field}>
        <Live label="Obchody" initial={['d1']} />
      </div>
    </Labeled>
    {/* port: apps/web/src/components/deal/DealRail.tsx (hideLabel — the rail draws its key) */}
    <Labeled label="rail editor — hideLabel, the rail row draws the key on the left">
      <div className="rr-row" style={{ width: 340 }}>
        <span className="k">Kontakty</span>
        <span className="v">
          <Live label="Kontakty" initial={['c1']} hideLabel />
        </span>
      </div>
    </Labeled>
  </div>
);