Bulk action bar

export const Default = () => (
  <Stack>
    <Frame text="3 rows selected — Lidé: actions inline, × clears (Esc)">
      <Bar count={3} inline={PEOPLE} />
    </Frame>
  </Stack>
);

export const States = () => (
  <Stack>
    <Frame text="Page fully selected, filter has more → „Vybrat všech N“">
      <Bar count={50} inline={PEOPLE} selectAll={160} />
    </Frame>
    <Frame text="Whole filter selected">
      <Bar count={160} inline={PEOPLE} allMatching />
    </Frame>
    <Frame text="Action unavailable for this selection (disabled, hint in title)">
      <Bar
        count={3}
        noun="členů · 0 nových"
        inline={[{ key: 'take', label: 'Převzít vybrané (0)', icon: 'download', disabled: true }]}
      />
    </Frame>
    <Frame text="Less frequent actions in „⋮“ (Komunikace)">
      <Bar
        count={3}
        noun="zprávy"
        selectAll={50}
        inline={[
          { key: 'done', label: 'Hotovo', icon: 'archive' },
          { key: 'snooze', label: 'Odložit', icon: 'clock' },
          { key: 'read', label: 'Přečteno', icon: 'mail-opened' },
          { key: 'delegate', label: 'Delegovat…', icon: 'user-share' },
        ]}
        overflow={[
          { key: 'star', label: 'Hvězda', icon: 'star' },
          { key: 'trash', label: 'Koš', icon: 'trash', danger: true },
        ]}
      />
    </Frame>
  </Stack>
);

export const Composition = () => (
  <Stack>
    <Frame
      text="Phone 390 px — one inline action, the rest in „⋮“, × always visible"
      width={390}
      height={160}
    >
      <Bar count={3} inline={PEOPLE.slice(0, 1)} overflow={PEOPLE.slice(1)} />
    </Frame>
    <Frame
      text="Phone 390 px — Komunikace keeps Delegovat… inline (primary); „Vybrat všech N“ moves to „⋮“ (it did not fit, × overflowed the edge)"
      width={390}
      height={160}
    >
      <Bar
        phone
        count={3}
        noun="zprávy"
        selectAll={50}
        inline={[{ key: 'delegate', label: 'Delegovat…', icon: 'user-share' }]}
        overflow={COMMS_MORE}
      />
    </Frame>
    <div style={{ display: 'grid', gap: 'var(--sp-2)' }}>
      {/* Statická replika otevřeného „⋮" na telefonu (živé menu je v portálu / šuplíku). */}
      <StaticPopover width={300}>
        <MenuItems
          onDone={() => {}}
          items={[
            { key: 'select-all', icon: 'checks', label: 'Vybrat všech 50', onClick: () => {} },
            { key: 'sep-select-all', sep: true },
            ...COMMS_MORE.map((a) => ({
              key: a.key,
              icon: a.icon,
              label: a.label,
              danger: a.danger,
              onClick: () => {},
            })),
          ]}
        />
      </StaticPopover>
      <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
        Phone „⋮“ open — Vybrat všech N first · hairline · actions · hairline · Koš last; after „all
        selected“ the item disappears. While this sheet or a confirm dialog is open the bar hides,
        so it never covers their CTA.
      </span>
    </div>
    <Frame text="Pipeline table — a single destructive action stays a quiet ghost; red only in confirm">
      <Bar count={3} inline={[PEOPLE[3]!]} />
    </Frame>
  </Stack>
);