@arcforgelabs/flow 2026.10.36 → 2026.10.38

package/server/ui/app.js

@@ -13,8 +13,10 @@ import { renderInvoice, renderInvoiceList } from '/assets/ui/invoicing.js';
 import { automationSection } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderPriceList } from '/assets/ui/price-list.js';
-import { renderCustomFields } from '/assets/ui/custom-fields.js';
+import { lucide, renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
+import { renderReconcile } from '/assets/ui/reconcile.js';
+import { renderXeroImport } from '/assets/ui/xero-import.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.js';
@@ -59,6 +61,7 @@ function mountClerk(kind, element, options = {}) {
   // The "Manage account" modal does not inherit the button's appearance.
   if (kind === 'userButton') props.userProfileProps = { ...options.userProfileProps, appearance: clerkAppearance('modal') };
   if (kind === 'signIn') Clerk.mountSignIn(element, props);
+  else if (kind === 'signUp') Clerk.mountSignUp(element, props);
   else if (kind === 'userButton') Clerk.mountUserButton(element, props);
   else if (kind === 'profile') Clerk.mountUserProfile(element, props);
   mounted.set(element, { kind, options });
@@ -69,6 +72,7 @@ function unmountClerk(element) {
   if (!entry) return;
   const Clerk = window.Clerk;
   if (entry.kind === 'signIn') Clerk.unmountSignIn(element);
+  else if (entry.kind === 'signUp') Clerk.unmountSignUp(element);
   else if (entry.kind === 'userButton') Clerk.unmountUserButton(element);
   else if (entry.kind === 'profile') Clerk.unmountUserProfile(element);
   mounted.delete(element);
@@ -181,12 +185,13 @@ function statusPill(person) {
   if (person.status === 'pending') return h('span', { class: 'fx-status', 'data-tone': 'warn' }, 'Waiting for approval');
   if (person.status === 'disabled') return h('span', { class: 'fx-status', 'data-tone': 'mute' }, 'Turned off');
   if (person.invited) return h('span', { class: 'fx-status', 'data-tone': 'info' }, 'Invited');
-  return h('span', { class: 'fx-status', 'data-tone': 'success' }, 'Active');
+  // Active is the usual state, so it shows nothing.
+  return null;
 }
 
 function roleSelect(value, attrs = {}) {
   return h('select', { class: 'fx-select', ...attrs },
-    ['owner', 'admin', 'staff'].map((role) => h('option', { value: role, selected: role === value }, ROLE_LABEL[role])));
+    ['owner', 'admin', 'staff'].map((role) => h('option', { value: role, selected: role === value, title: ROLE_HINT[role] }, ROLE_LABEL[role])));
 }
 
 // ── Views ──────────────────────────────────────────────────────────────────
@@ -197,6 +202,7 @@ let me = null;
 const VIEWS = {
   jobs: { label: 'Jobs', icon: 'jobs', group: 'Work', render: (main) => renderJobs(main, ui()) },
   invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
+  reconcile: { label: 'Reconcile', icon: 'reconcile', group: 'Work', render: (main, id) => renderReconcile(main, ui(), id) },
   'invoicing-settings': { label: 'Invoice rules', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
   'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main) => renderPriceList(main, ui()) },
   'custom-fields': { label: 'Custom fields', icon: 'fields', group: 'Settings', render: (main) => renderCustomFields(main, ui()) },
@@ -204,6 +210,8 @@ const VIEWS = {
   integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
   // Not in the sidebar: "Manage account" in the account menu opens the same
   // Clerk profile. The page stays for links and Search.
+  // Opened from the Xero integration page: Xero invoices against Flow's own.
+  'xero-import': { label: 'Xero import', icon: 'plug', group: 'Settings', sidebar: false, render: (main) => renderXeroImport(main, ui()) },
   account: { label: 'Account', icon: 'person', group: 'Settings', sidebar: false, render: renderAccount },
   appearance: { label: 'Appearance', icon: 'palette', group: 'Settings', render: renderAppearance },
 };
@@ -212,6 +220,7 @@ const VIEWS = {
 const ICON_PATHS = {
   jobs: '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="4" height="14" rx="1"/>',
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
+  reconcile: '<path d="M4 8h13M13 4l4 4-4 4M20 16H7M11 12l-4 4 4 4"/>',
   people: '<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6"/><path d="M16 5a3 3 0 010 6M21 20c0-3-1.6-5-4-5.7"/>',
   tag: '<path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="8.5" r="1.5"/>',
   fields: '<rect x="3" y="4" width="18" height="5" rx="1.5"/><rect x="3" y="13" width="18" height="5" rx="1.5"/><path d="M7 6.5h4M7 15.5h7"/>',
@@ -284,6 +293,13 @@ document.addEventListener('keydown', (event) => {
 document.addEventListener('click', (event) => {
   if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
 });
+// Folded, a click on the sidebar's empty space opens it out again, as in
+// Claude. A click on a page, the account photo or Search still does its job.
+document.addEventListener('click', (event) => {
+  if (NARROW.matches || !readFolded() || !event.target.closest?.('.fx-side')) return;
+  if (event.target.closest('a, button, input, select, textarea, [role="button"], [role="menuitem"], #user-button')) return;
+  toggleMenu();
+});
 
 // Search, from the sidebar foot or Ctrl+K (⌘K): the pages this person may
 // open, invoices and jobs (search.js).
@@ -363,6 +379,13 @@ function renderSignedOut() {
   document.body.dataset.state = 'signed-out';
   document.title = 'Sign in · Flow';
   const panel = $('sign-in');
+  // The link in an invitation email (POST /api/people) carries a Clerk
+  // ticket: the invitee makes their account here, on that address only.
+  if (new URLSearchParams(location.search).has('__clerk_ticket')) {
+    $('sign-in-note').textContent = 'Finish your invitation to Flow.';
+    mountClerk('signUp', panel, { forceRedirectUrl: '/sign-in', signInUrl: '/sign-in' });
+    return;
+  }
   $('sign-in-note').textContent = config.publicSignUp
     ? 'Sign in, or ask for access with your work email.'
     : 'Sign in with the account you were invited with.';
@@ -442,13 +465,12 @@ function renderNoAccess(error) {
 // removes. Managing people needs a verified owner sign-in (/api/me says).
 async function renderPeople(main) {
   const canManage = Boolean(me.ownerActions?.allowed);
-  const invite = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled: !canManage, onclick: () => invitePerson() }, 'Invite someone');
+  const invite = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled: !canManage, onclick: () => invitePerson() }, 'Invite');
   const tableHost = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   main.append(...[
-    pageHeader('People', { subtitle: 'Who can sign in to Flow, and what each person can do.', actions: [invite] }),
+    pageHeader('People', { actions: [invite] }),
     canManage ? null : notice('Managing people needs a verified owner sign-in: Google Workspace on the owner domain with no password, or a second factor.', 'warn', 'Read only.'),
     tableHost,
-    h('dl', { class: 'fx-roles' }, ['owner', 'admin', 'staff'].flatMap((role) => [h('dt', {}, ROLE_LABEL[role]), h('dd', {}, ROLE_HINT[role])])),
   ].filter(Boolean));
   if (!canManage) {
     tableHost.replaceChildren(h('p', { class: 'fx-empty' }, 'The people list opens after a verified owner sign-in.'));
@@ -469,12 +491,34 @@ async function refreshPeople(host) {
   const rows = people.map((person) => personRow(person, host));
   host.replaceChildren(...[
     waiting ? notice(`${waiting} ${waiting === 1 ? 'person is' : 'people are'} waiting for approval.`, 'info') : null,
-    h('table', { class: 'fx-table' },
-      h('thead', {}, h('tr', {}, h('th', {}, 'Person'), h('th', {}, 'Role'), h('th', {}, 'Access'), h('th', { class: 'fx-table__actions' }, h('span', { class: 'fx-sr' }, 'Actions')))),
+    h('table', { class: 'fx-table fx-people' },
+      h('thead', { class: 'fx-sr' }, h('tr', {}, h('th', {}, 'Person'), h('th', {}, 'Role'), h('th', {}, 'Access'), h('th', {}, 'Actions'))),
       h('tbody', {}, rows)),
   ].filter(Boolean));
 }
 
+let peopleMenus = 0;
+
+// A row's ⋯ menu, as on the Custom fields page.
+function rowMenu(label, items) {
+  const id = `fx-people-menu-${++peopleMenus}`;
+  const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, lucide(h, 'ellipsis'));
+  const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
+  panel.addEventListener('toggle', (event) => {
+    button.setAttribute('aria-expanded', String(event.newState === 'open'));
+    if (event.newState !== 'open') return;
+    const close = () => panel.hidePopover();
+    panel.replaceChildren(...items.map((entry) => (entry === '-'
+      ? h('div', { class: 'fx-pop__sep' })
+      : h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone, onclick: () => { close(); entry.run(); } },
+        h('span', { class: 'fx-pop__tick' }, lucide(h, entry.icon)), h('span', {}, entry.text)))));
+    const at = button.getBoundingClientRect();
+    panel.style.top = `${Math.round(at.bottom + 6)}px`;
+    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
+  });
+  return [button, panel];
+}
+
 function personRow(person, host) {
   const self = person.id === me.person.id;
   const act = async (fn, done) => {
@@ -493,24 +537,28 @@ function personRow(person, host) {
       h('span', { class: 'fx-person__name' }, person.name || person.email, self ? h('span', { class: 'fx-tag' }, 'You') : null),
       person.name ? h('span', { class: 'fx-person__email' }, person.email) : null));
   const role = self
-    ? h('span', {}, ROLE_LABEL[person.role])
+    ? h('span', { title: ROLE_HINT[person.role] }, ROLE_LABEL[person.role])
     : roleSelect(person.role, {
       'aria-label': `Role for ${person.email}`,
+      title: ROLE_HINT[person.role],
       onchange: (event) => act(() => patch({ role: event.target.value }), `${person.email} is now ${ROLE_LABEL[event.target.value].toLowerCase()}.`),
     });
   const actions = [];
   if (!self) {
     if (person.status === 'pending') {
       actions.push(h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'active' }), `${person.email} can sign in.`) }, 'Approve'));
-    } else if (person.status === 'active') {
-      actions.push(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'disabled' }), `${person.email} is turned off.`) }, 'Turn off'));
-    } else {
-      actions.push(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'active' }), `${person.email} is turned on.`) }, 'Turn on'));
     }
-    actions.push(h('button', {
-      class: 'fx-btn fx-btn--ghost fx-btn--danger fx-btn--sm',
-      type: 'button',
-      onclick: async () => {
+    const items = [];
+    if (person.invited && person.status === 'active') {
+      items.push({ icon: 'mail', text: 'Email invite again', run: () => act(() => flow(`/api/people/${person.id}/invite`, { method: 'POST' }), `Invite emailed to ${person.email}.`) });
+    }
+    if (person.status === 'active') items.push({ icon: 'circle-off', text: 'Turn off', run: () => act(() => patch({ status: 'disabled' }), `${person.email} is turned off.`) });
+    if (person.status === 'disabled') items.push({ icon: 'circle-check', text: 'Turn on', run: () => act(() => patch({ status: 'active' }), `${person.email} is turned on.`) });
+    items.push('-', {
+      icon: 'trash-2',
+      text: 'Remove',
+      tone: 'danger',
+      run: async () => {
         const ok = await dialog({
           title: `Remove ${person.email}?`,
           body: h('p', {}, 'They can no longer sign in to Flow. Records they made stay.'),
@@ -519,7 +567,8 @@ function personRow(person, host) {
         });
         if (ok) await act(() => flow(`/api/people/${person.id}`, { method: 'DELETE' }), `${person.email} is removed.`);
       },
-    }, 'Remove'));
+    });
+    actions.push(...rowMenu(`More for ${person.email}`, items));
   }
   return h('tr', {},
     h('td', {}, who),
@@ -782,6 +831,7 @@ async function renderIntegration(main, id) {
           current.id === 'xero' && current.state === 'ready' ? h('section', { class: 'fx-int-section' }, xeroConnection(body.organisations, canChange)) : null,
           current.id === 'seazona' ? h('section', { class: 'fx-int-section fx-card', style: { padding: '8px 20px 16px' } }, automationSection(ui(), 'seazona', 'Ready to invoice')) : null,
           on && current.state === 'ready' ? personSettingsSection(current) : null,
+          current.id === 'xero' && current.state === 'ready' ? xeroImportSection(body.organisations) : null,
           current.id === 'xero' ? h('section', { class: 'fx-int-section fx-card', style: { padding: '8px 20px 16px' } }, sendModeSection(ui())) : null,
           guide ? h('section', { class: 'fx-int-section' },
             h('h2', { class: 'fx-int-section__title' }, 'Set up'),
@@ -861,6 +911,53 @@ function connectProgress({ steps, started }) {
       step.label))));
 }
 
+// Xero › Import, in settings rows: how many Xero invoices to check (Review
+// opens them one at a time), the two import settings, and the history. The
+// counts come from Flow's copy of Xero; the pages are server/ui/xero-import.js.
+function xeroImportSection(organisations) {
+  const organisationId = organisations?.[0]?.id;
+  const canAct = ['owner', 'admin'].includes(me?.person?.role);
+  const count = h('span', { class: 'fx-num fx-xi-count' }, '…');
+  const copied = h('span', {}, 'Every Xero invoice Flow copied. Search it with no Xero call.');
+  const switchFor = (name, label) => {
+    const button = h('button', { class: 'fx-switch', type: 'button', role: 'switch', 'aria-label': label, 'aria-checked': 'false', disabled: true });
+    button.addEventListener('click', async () => {
+      const on = button.getAttribute('aria-checked') !== 'true';
+      button.disabled = true;
+      try {
+        const { settings } = await flow('/api/xero/import/settings', { method: 'PUT', body: JSON.stringify({ organisationId, [name]: on }) });
+        button.setAttribute('aria-checked', String(settings[name]));
+        toast('Saved.', 'success');
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+      button.disabled = !canAct;
+    });
+    return button;
+  };
+  const autoLink = switchFor('autoLink', 'Link sure matches');
+  const makeUnmatched = switchFor('makeUnmatched', 'Make Flow invoices for the rest');
+  const section = h('section', { class: 'fx-set fx-int-section fx-card', style: { padding: '8px 20px 16px' } },
+    h('h2', { class: 'fx-set__title' }, 'Import'),
+    settingRow({ label: 'To check', hint: 'Xero invoices that fit a Flow invoice or a Flow job.',
+      control: h('span', { class: 'fx-row' }, count, h('a', { class: 'fx-btn fx-btn--sm fx-btn--primary', href: '/xero-import', onclick: navigate }, 'Review')) }),
+    settingRow({ label: 'Link sure matches', hint: 'Same client, total and week, and only one fit. Flow links them.', control: autoLink }),
+    settingRow({ label: 'Make Flow invoices for the rest', hint: 'Off: they stay in the Xero history.', control: makeUnmatched }),
+    settingRow({ label: 'Xero history', hint: copied, control: h('a', { class: 'fx-btn fx-btn--sm', href: '/xero-import?show=all', onclick: navigate }, 'Search') }));
+  if (organisationId) {
+    flow(`/api/xero/import?organisationId=${organisationId}&show=check&limit=1`)
+      .then(({ counts: c, settings }) => {
+        count.replaceChildren(String(c.job_fits + c.invoice_fits));
+        copied.replaceChildren(`${Object.values(c).reduce((a, b) => a + b, 0)} Xero invoices copied, ${c.linked} in Flow. Search with no Xero call.`);
+        autoLink.setAttribute('aria-checked', String(settings.autoLink));
+        makeUnmatched.setAttribute('aria-checked', String(settings.makeUnmatched));
+        autoLink.disabled = makeUnmatched.disabled = !canAct;
+      })
+      .catch(() => count.replaceChildren('—'));
+  }
+  return section;
+}
+
 // Once Xero is on: each organisation's connection, the history copy, and
 // Connect, which goes to Xero and comes back.
 function xeroConnection(organisations, canChange) {
@@ -907,7 +1004,27 @@ function xeroConnection(organisations, canChange) {
   return h('div', {}, h('h2', { class: 'fx-int-section__title' }, 'Xero organisation'), host);
 }
 
+// When Clerk cannot email an invitation, the owner sends the invitee this
+// message instead. It names the sign-in address and the email to use.
+function inviteMessage(person) {
+  return [
+    'You have access to Flow.',
+    `Sign in at ${location.origin}/sign-in with ${person.email}.`,
+    'Use Continue with Google if that address is a Google account.',
+  ].join('\n');
+}
+
+async function copyInvite(person) {
+  try {
+    await navigator.clipboard.writeText(inviteMessage(person));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function invitePerson() {
+  const hint = h('p', { class: 'fx-dim' }, ROLE_HINT.staff);
   const data = await dialog({
     title: 'Invite someone',
     body: h('div', { class: 'fx-fields' },
@@ -916,14 +1033,16 @@ async function invitePerson() {
         h('input', { class: 'fx-input', name: 'email', type: 'email', required: true, autocomplete: 'off', placeholder: 'name@example.com' })),
       h('label', { class: 'fx-field' },
         h('span', { class: 'fx-label' }, 'Role'),
-        roleSelect('staff', { name: 'role' })),
-      h('p', { class: 'fx-dim' }, 'They sign in with this email. Flow prepares their sign-in account.')),
-    confirm: 'Send invitation',
+        roleSelect('staff', { name: 'role', onchange: (event) => { hint.textContent = ROLE_HINT[event.target.value]; } })),
+      hint),
+    confirm: 'Send invite',
   });
   if (!data) return;
   try {
-    await flow('/api/people', { method: 'POST', body: JSON.stringify({ email: data.get('email'), role: data.get('role') }) });
-    toast(`${data.get('email')} is invited.`, 'success');
+    const { person, invite } = await flow('/api/people', { method: 'POST', body: JSON.stringify({ email: data.get('email'), role: data.get('role') }) });
+    if (invite?.emailed) toast(`Invite emailed to ${person.email}.`, 'success');
+    else if (await copyInvite(person)) toast(`${person.email} is invited, but the email could not be sent. A sign-in message is copied: paste it into an email to them.`, 'info');
+    else toast(`${person.email} is invited, but the email could not be sent. Send them: ${inviteMessage(person)}`, 'info');
   } catch (error) {
     toast(error.message, 'danger');
   }

package/server/ui/bulk-bar.js

@@ -0,0 +1,100 @@
+// The bulk action bar: while a person has ticked rows in a list, it floats
+// at the foot of the page, like ClickUp's. It shows "N selected ×" (the ×
+// clears the ticks), then the actions in groups split by a thin line, then
+// More. An action has a Lucide icon and one word; an icon-only action gives
+// its name on hover and to a screen reader. More opens every action, with a
+// search box, grouped under small heads.
+//
+// bulkBar(ui, { label }) answers { element, draw(state) }. label names the
+// bar for a screen reader ("Ticked invoices", "Ticked jobs"). state = { count, onClear,
+// groups: [[action]], more: [{ head, actions: [action] }] }; an action is
+// { icon, label, title?, run, primary?, iconOnly?, tone? }. title is the
+// long name, for the hover tip and the More menu. A count of 0 hides the
+// bar; Esc clears the ticks while it shows.
+import { lucide } from '/assets/ui/custom-fields.js';
+
+let barCount = 0;
+
+export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
+  const { h } = ui;
+  const id = `fx-bulk-more-${++barCount}`;
+  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true });
+  const panel = h('div', { class: 'fx-pop fx-bulk__more', id, popover: 'auto', role: 'menu' });
+  let current = null;
+  let busy = false;
+
+  const run = async (action) => {
+    if (busy) return;
+    busy = true;
+    element.setAttribute('aria-busy', 'true');
+    try { await action.run(); } finally {
+      busy = false;
+      element.removeAttribute('aria-busy');
+    }
+  };
+
+  const button = (action) => h('button', {
+    type: 'button',
+    class: `fx-bulk__act${action.primary ? ' fx-bulk__act--primary' : ''}${action.iconOnly ? ' fx-bulk__act--icon' : ''}`,
+    ...(action.tone ? { 'data-tone': action.tone } : {}),
+    ...(action.iconOnly ? { 'aria-label': action.title ?? action.label, 'data-tip': action.title ?? action.label } : action.title ? { title: action.title } : {}),
+    onclick: () => run(action),
+  }, lucide(h, action.icon), action.iconOnly ? null : h('span', { class: 'fx-bulk__word' }, action.label));
+
+  // More: a search box over every action, under small heads.
+  const search = h('input', { class: 'fx-input fx-bulk__search', type: 'search', placeholder: 'Search…', 'aria-label': 'Search actions' });
+  const list = h('div', { class: 'fx-bulk__list' });
+  const drawMore = () => {
+    const q = search.value.trim().toLowerCase();
+    const parts = [];
+    for (const { head, actions } of current?.more ?? []) {
+      const found = actions.filter((a) => !q || `${a.label} ${a.title ?? ''}`.toLowerCase().includes(q));
+      if (!found.length) continue;
+      parts.push(h('p', { class: 'fx-pop__head' }, head), h('div', { class: 'fx-bulk__grid' }, found.map((action) => h('button', {
+        type: 'button', class: 'fx-pop__item', role: 'menuitem', ...(action.tone ? { 'data-tone': action.tone } : {}),
+        onclick: () => { panel.hidePopover?.(); run(action); },
+      }, h('span', { class: 'fx-pop__tick' }, lucide(h, action.icon)), h('span', {}, action.title ?? action.label)))));
+    }
+    list.replaceChildren(...(parts.length ? parts : [h('p', { class: 'fx-bulk__none' }, 'No action matches.')]));
+  };
+  search.addEventListener('input', drawMore);
+  const onKey = (event) => {
+    if (!element.isConnected) { document.removeEventListener('keydown', onKey); return; }
+    if (event.key === 'Escape' && !element.hidden && !panel.matches?.(':popover-open') && !document.querySelector('dialog[open]')) current?.onClear();
+  };
+  document.addEventListener?.('keydown', onKey);
+  panel.append(search, list);
+  const more = h('button', {
+    type: 'button', class: 'fx-bulk__act', popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false',
+  }, lucide(h, 'ellipsis'), h('span', { class: 'fx-bulk__word' }, 'More'));
+  // The menu opens above the bar, at its right edge.
+  panel.addEventListener('toggle', (event) => {
+    more.setAttribute('aria-expanded', String(event.newState === 'open'));
+    if (event.newState !== 'open') return;
+    search.value = '';
+    drawMore();
+    const at = more.getBoundingClientRect();
+    panel.style.top = `${Math.round(Math.max(8, at.top - panel.offsetHeight - 8))}px`;
+    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
+    search.focus();
+  });
+
+  function draw(state) {
+    current = state;
+    element.hidden = !state?.count;
+    if (element.hidden) { panel.hidePopover?.(); return; }
+    const count = h('span', { class: 'fx-bulk__count' },
+      h('span', {}, `${state.count} selected`),
+      h('button', { type: 'button', class: 'fx-bulk__clear', 'aria-label': 'Clear the ticks', 'data-tip': 'Clear', onclick: state.onClear }, lucide(h, 'x')));
+    const groups = state.groups.filter((g) => g.length);
+    const parts = [];
+    groups.forEach((group, i) => {
+      if (i) parts.push(h('span', { class: 'fx-bulk__sep', 'aria-hidden': 'true' }));
+      parts.push(...group.map(button));
+    });
+    if ((state.more ?? []).some((g) => g.actions.length)) parts.push(h('span', { class: 'fx-bulk__sep', 'aria-hidden': 'true' }), more, panel);
+    element.replaceChildren(count, h('span', { class: 'fx-bulk__acts' }, ...parts));
+  }
+
+  return { element, draw };
+}