zidane-ui 9.1.1 → 9.1.3

package/src/chat/composer/attachment-ingest.ts

@@ -1,413 +0,0 @@
-/**
- * Attachment-ingest helpers, shared by the kit's `Composer` and the desktop
- * app's own composers: reading a file in through the shared rule
- * (`planAttachment`), the paste-folding rule and text previews, unit-tested
- * in isolation.
- *
- * Touches no React APIs. DOM use is limited to `FileReader` / `crypto`, and
- * to an image element and a canvas when an image needs converting.
- */
-import {
-  ATTACHMENT_SNIFF_BYTES,
-  type AttachmentRefusal,
-  formatBytes,
-  MAX_IMAGE_ATTACHMENT_BYTES,
-  planAttachment,
-} from 'zidane/chat/pure';
-
-import type { ComposerAttachment } from '../headless/composer/host';
-import type { ChatAttachment } from '../headless/host';
-import type { ChatLabels } from '../headless/labels';
-
-export type { ComposerAttachment };
-
-export { formatBytes, MAX_FILE_ATTACHMENT_BYTES, MAX_IMAGE_ATTACHMENT_BYTES } from 'zidane/chat/pure';
-
-/** A file {@link readAttachment} did not attach, and why. */
-export class AttachmentRefusedError extends Error {
-  constructor(
-    /** The file's name, for the notice. */
-    readonly fileName: string,
-    /** Why it was refused (`empty`, `too-large` with the size and limit, …). */
-    readonly refusal: AttachmentRefusal,
-  ) {
-    super(`Attachment refused (${refusal.reason}): ${fileName}`);
-  }
-}
-
-/**
- * The sentence a composer shows for a file it did not attach.
- *
- * @param fileName - The file's name.
- * @param error - What {@link readAttachment} rejected with.
- * @param labels - The chat labels to word it with.
- */
-export function attachmentErrorText(fileName: string, error: unknown, labels: ChatLabels): string {
-  if (!(error instanceof AttachmentRefusedError)) return labels.attachmentReadFailed(fileName);
-  const { refusal } = error;
-  switch (refusal.reason) {
-    case 'empty':
-      return labels.attachmentEmpty(fileName);
-    case 'too-large':
-      return labels.attachmentTooLarge(fileName, formatBytes(refusal.size), formatBytes(refusal.limit));
-    case 'export-pdf':
-      return labels.attachmentExportPdf(fileName);
-    case 'unreadable-image':
-      return labels.attachmentUnreadableImage(fileName);
-    case 'unsupported':
-      return labels.attachmentUnsupported(fileName);
-  }
-}
-
-/**
- * A PDF attachment: previewed in the browser's own PDF viewer.
- *
- * @param att - The attachment; only its media type is read.
- */
-export function isPdfAttachment(att: Pick<ChatAttachment, 'mediaType'>): boolean {
-  return att.mediaType.toLowerCase() === 'application/pdf';
-}
-
-/**
- * Line threshold above which a multiline paste folds into a `.txt`
- * attachment. It matches the TUI (`planTextPaste` in src/tui/prompt/paste.ts
- * uses `lines.length > 10` after trimming leading and trailing blank lines).
- * Short multiline pastes (stack traces, paragraphs) stay inline so the
- * user can edit them; anything longer arrives at the model as a
- * discrete document part instead of a wall of prompt text.
- */
-export const PASTE_FOLD_LINE_THRESHOLD = 10;
-
-/**
- * Character ceiling for SINGLE-line (or few-line) pastes. In the GUI a
- * 50 KB one-liner soft-wraps into a screenful of editor, so a paste of
- * this many characters folds too. The TUI's own ceiling is higher
- * (`PASTE_INLINE_MAX_CHARS` in src/tui/prompt/paste.ts, 10,000).
- */
-export const PASTE_FOLD_CHAR_THRESHOLD = 4092;
-
-/**
- * Should a plain-text paste become a `.txt` attachment chip instead of
- * inline editor text? Mirrors the TUI's rule (line count after CRLF
- * normalisation + trim) with a lower character ceiling on top.
- *
- * @param text - The pasted plain text.
- */
-export function shouldFoldPasteToAttachment(text: string): boolean {
-  if (text.length >= PASTE_FOLD_CHAR_THRESHOLD) {
-    return true;
-  }
-
-  return text.replace(/\r\n?/g, '\n').trim().split('\n').length > PASTE_FOLD_LINE_THRESHOLD;
-}
-
-/**
- * Reads a file into a {@link ComposerAttachment} with a `data:` URL, as the
- * shared rule says (`planAttachment`): images, PDFs and text attach; an image
- * in another format, or over the image cap, is re-encoded to fit. Rejects with
- * an {@link AttachmentRefusedError} for a file the rule refuses (or an image
- * that cannot be decoded), and with the read error when the file cannot be read.
- *
- * @param file - The file the user pasted, dropped, or picked.
- */
-export async function readAttachment(file: File): Promise<ComposerAttachment> {
-  const name = file.name || 'pasted-image.png';
-  const head = new TextDecoder().decode(await file.slice(0, ATTACHMENT_SNIFF_BYTES).arrayBuffer());
-  const plan = planAttachment({ name, mediaType: file.type, size: file.size, head });
-  if (plan.kind === 'refuse') throw new AttachmentRefusedError(name, plan);
-  if (plan.kind === 'convert-image') {
-    const converted = await convertImage(file, plan.mediaType).catch(() => null);
-    if (!converted) throw new AttachmentRefusedError(name, { reason: 'unreadable-image' });
-    return toComposerAttachment(converted, renameForType(name, converted.type), converted.type);
-  }
-  return toComposerAttachment(file, name, plan.mediaType);
-}
-
-/** The data URL's header carries `mediaType`: the send path reads the type from there. */
-async function toComposerAttachment(blob: Blob, name: string, mediaType: string): Promise<ComposerAttachment> {
-  const typed = blob.type === mediaType ? blob : new Blob([blob], { type: mediaType });
-  const dataUrl = await new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = () => reject(reader.error);
-    reader.readAsDataURL(typed);
-  });
-  return { id: crypto.randomUUID(), name, mediaType, dataUrl, size: typed.size };
-}
-
-/** Largest edge a converted image keeps (Anthropic's ceiling). */
-const MAX_IMAGE_EDGE = 8000;
-
-/**
- * Decode an image and encode it again, as PNG (JPEG for a JPEG: a photo grows
- * as PNG), scaled down until it fits the image cap. An animated GIF or WebP
- * keeps its first frame. Rejects when the image cannot be decoded (HEIC and
- * TIFF in Chromium) or there is no DOM to draw it in.
- */
-async function convertImage(file: Blob, sourceType: string): Promise<Blob> {
-  const url = URL.createObjectURL(file);
-  try {
-    const image = new Image();
-    image.src = url;
-    await image.decode();
-    // An SVG without a size of its own has none.
-    const width = image.naturalWidth || 1024;
-    const height = image.naturalHeight || 1024;
-    const type = sourceType === 'image/jpeg' ? 'image/jpeg' : 'image/png';
-    let scale = Math.min(1, MAX_IMAGE_EDGE / Math.max(width, height));
-    for (let attempt = 0; attempt < 6; attempt += 1) {
-      const canvas = document.createElement('canvas');
-      canvas.width = Math.max(1, Math.round(width * scale));
-      canvas.height = Math.max(1, Math.round(height * scale));
-      const context = canvas.getContext('2d');
-      if (!context) throw new Error('No 2D canvas');
-      context.drawImage(image, 0, 0, canvas.width, canvas.height);
-      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, type, 0.9));
-      if (!blob) throw new Error('Image encoding failed');
-      if (blob.size <= MAX_IMAGE_ATTACHMENT_BYTES) return blob;
-      // Bytes grow with the area: shrink both edges by the square root of the overshoot, and a bit more.
-      scale *= Math.min(0.9, Math.sqrt(MAX_IMAGE_ATTACHMENT_BYTES / blob.size) * 0.95);
-    }
-    throw new Error('Image does not fit the cap');
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-/** `scan.heic` re-encoded as PNG is `scan.png`. */
-function renameForType(name: string, type: string): string {
-  const ext = type === 'image/jpeg' ? 'jpg' : 'png';
-  const dot = name.lastIndexOf('.');
-  const current = dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
-  if (current === ext || (ext === 'jpg' && current === 'jpeg')) return name;
-  return `${dot > 0 ? name.slice(0, dot) : name}.${ext}`;
-}
-
-/**
- * Map an attachment to a Shiki language id. Extension wins; falls back
- * to MIME hints (`+json`, `+xml`, `text/markdown`); unknown →
- * `plaintext` so the preview still renders, just without colour.
- *
- * @param att - The attachment's `name` and `mediaType`.
- */
-export function detectLanguage(att: Pick<ChatAttachment, 'mediaType' | 'name'>): string {
-  const name = att.name.toLowerCase();
-  const dot = name.lastIndexOf('.');
-  const ext = dot >= 0 ? name.slice(dot + 1) : name;
-
-  const byExt: Record<string, string> = {
-    ts: 'ts',
-    tsx: 'tsx',
-    js: 'js',
-    jsx: 'jsx',
-    mjs: 'js',
-    cjs: 'js',
-    json: 'json',
-    jsonc: 'jsonc',
-    md: 'md',
-    markdown: 'md',
-    yaml: 'yaml',
-    yml: 'yaml',
-    toml: 'toml',
-    xml: 'xml',
-    html: 'html',
-    htm: 'html',
-    css: 'css',
-    scss: 'scss',
-    sass: 'sass',
-    less: 'less',
-    py: 'python',
-    rb: 'ruby',
-    go: 'go',
-    rs: 'rust',
-    java: 'java',
-    c: 'c',
-    h: 'c',
-    cc: 'cpp',
-    cpp: 'cpp',
-    hpp: 'cpp',
-    cs: 'csharp',
-    swift: 'swift',
-    kt: 'kotlin',
-    kts: 'kotlin',
-    sh: 'bash',
-    bash: 'bash',
-    zsh: 'bash',
-    fish: 'fish',
-    sql: 'sql',
-    vue: 'vue',
-    svelte: 'svelte',
-    dockerfile: 'docker',
-    ini: 'ini',
-    cfg: 'ini',
-    conf: 'ini',
-    env: 'bash',
-    csv: 'csv',
-  };
-
-  if (name === 'dockerfile' || name.endsWith('/dockerfile')) {
-    return 'docker';
-  }
-
-  if (byExt[ext]) {
-    return byExt[ext];
-  }
-
-  const mime = att.mediaType.toLowerCase();
-
-  if (mime === 'application/json' || mime.endsWith('+json')) {
-    return 'json';
-  }
-
-  if (mime === 'application/xml' || mime.endsWith('+xml')) {
-    return 'xml';
-  }
-
-  if (mime === 'text/markdown') {
-    return 'md';
-  }
-
-  if (mime === 'text/html') {
-    return 'html';
-  }
-
-  if (mime === 'text/css') {
-    return 'css';
-  }
-
-  if (mime === 'application/javascript' || mime === 'text/javascript') {
-    return 'js';
-  }
-
-  return 'plaintext';
-}
-
-/**
- * Treat as text any attachment whose MIME is in the `text/*` family,
- * or one of the structured-text types we routinely encounter (JSON,
- * XML, common script languages that browsers tag as `application/*`).
- * Falls back to an extension allowlist for files the OS picker
- * presents without a MIME — extensionless dotfiles and a handful of
- * common code extensions land here so the preview is useful.
- *
- * @param att - The attachment's `name` and `mediaType`.
- */
-export function isTextLike(att: Pick<ChatAttachment, 'mediaType' | 'name'>): boolean {
-  const mime = att.mediaType.toLowerCase();
-
-  if (mime.startsWith('text/')) {
-    return true;
-  }
-
-  if (
-    mime === 'application/json' ||
-    mime === 'application/xml' ||
-    mime === 'application/javascript' ||
-    mime === 'application/typescript' ||
-    mime.endsWith('+json') ||
-    mime.endsWith('+xml')
-  ) {
-    return true;
-  }
-
-  const name = att.name.toLowerCase();
-  const dot = name.lastIndexOf('.');
-  const ext = dot >= 0 ? name.slice(dot + 1) : '';
-  const TEXT_EXTS = new Set([
-    'txt',
-    'md',
-    'markdown',
-    'json',
-    'jsonc',
-    'yaml',
-    'yml',
-    'toml',
-    'xml',
-    'csv',
-    'tsv',
-    'log',
-    'ini',
-    'cfg',
-    'conf',
-    'env',
-    'js',
-    'jsx',
-    'ts',
-    'tsx',
-    'mjs',
-    'cjs',
-    'py',
-    'rb',
-    'go',
-    'rs',
-    'java',
-    'c',
-    'h',
-    'cc',
-    'cpp',
-    'hpp',
-    'cs',
-    'swift',
-    'kt',
-    'kts',
-    'sh',
-    'bash',
-    'zsh',
-    'fish',
-    'sql',
-    'html',
-    'htm',
-    'css',
-    'scss',
-    'sass',
-    'less',
-    'vue',
-    'svelte',
-    'gitignore',
-    'gitattributes',
-    'dockerfile',
-    'editorconfig',
-    'lock',
-  ]);
-
-  return TEXT_EXTS.has(ext) || (ext === '' && name.startsWith('.'));
-}
-
-/**
- * Decodes a `data:` URL's payload as UTF-8 text. Returns an empty string when the URL has no payload and a placeholder message when decoding fails.
- *
- * @param dataUrl - The `data:` URL to decode.
- */
-export function decodeDataUrlAsText(dataUrl: string): string {
-  try {
-    const commaIndex = dataUrl.indexOf(',');
-
-    if (commaIndex === -1) {
-      return '';
-    }
-
-    const header = dataUrl.slice(0, commaIndex);
-    const payload = dataUrl.slice(commaIndex + 1);
-
-    if (header.includes(';base64')) {
-      const binary = atob(payload);
-      const bytes = new Uint8Array(binary.length);
-
-      for (let i = 0; i < binary.length; i += 1) {
-        bytes[i] = binary.charCodeAt(i);
-      }
-
-      return new TextDecoder('utf-8', { fatal: false }).decode(bytes);
-    }
-
-    return decodeURIComponent(payload);
-  } catch {
-    return '[Unable to decode file as text]';
-  }
-}
-
-/** ISO-stamped filename for a paste-as-attachment write. */
-export function pastedTextFilename(): string {
-  const stamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
-  return `pasted-${stamp}.txt`;
-}

package/src/chat/composer/attachments.tsx

@@ -1,176 +0,0 @@
-/**
- * The composer's staged attachments: one 80px tile each (an image thumbnail,
- * or a file's icon over its name), a remove button on hover or focus, and the gallery the kit's Lightbox opens from a tile.
- * The desktop app's tiles, in look; its Shiki previews stay in the app (text
- * previews here are plain). Also the notice about files the composer refused.
- */
-import type { ComponentType, CSSProperties, ReactNode } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import type { LightboxItem } from '../../components/Lightbox';
-import { PdfPreview } from '../PdfPreview';
-import { TextPreview } from '../TextPreview';
-import { type TextPreviewSlotProps, useTranscriptRenderers } from '../transcript/renderers';
-import { AttachmentIcon } from '../transcript/prompt';
-import { useChatLabels } from '../useChatLabels';
-import { type ComposerAttachment, formatBytes, isPdfAttachment, isTextLike } from './attachment-ingest';
-
-// Images and files share one box, so a mixed row stays even.
-const TILE = 'zg-tray border-0 rounded-zg-md w-20 h-20';
-const FILE_TILE = `${TILE} flex flex-col items-center justify-center gap-1.5 px-1.5 py-2 overflow-hidden`;
-
-const isImage = (att: ComposerAttachment) => att.mediaType.startsWith('image/');
-
-/** A file tile that opens a preview: text, or a PDF. */
-const isPreviewableFile = (att: ComposerAttachment) => isTextLike(att) || isPdfAttachment(att);
-
-/**
- * Every previewable attachment as one gallery: images, PDFs in the browser's viewer, and text as its decoded preview.
- *
- * @param attachments - The composer's attachments. Images, PDFs and text-like files are included; other files are skipped.
- * @param Preview - What a text file opens as (default: the kit's `TextPreview`).
- */
-export function attachmentLightboxItems(
-  attachments: readonly ComposerAttachment[],
-  Preview: ComponentType<TextPreviewSlotProps> = TextPreview,
-): LightboxItem[] {
-  return attachments
-    .filter((att) => isImage(att) || isPreviewableFile(att))
-    .map<LightboxItem>((att) =>
-      isImage(att)
-        ? { key: att.id, name: att.name, src: att.dataUrl }
-        : isPdfAttachment(att)
-          ? { key: att.id, name: att.name, body: () => <PdfPreview src={att.dataUrl} name={att.name} /> }
-          : {
-              key: att.id,
-              name: att.name,
-              body: () => <Preview name={att.name} mediaType={att.mediaType} size={att.size} src={att.dataUrl} />,
-            },
-    );
-}
-
-/** Props for {@link AttachmentNotices}. */
-export interface AttachmentNoticesProps {
-  /** One sentence per refused file. */
-  notices: readonly string[];
-  /** Called when the user closes the notice. */
-  onDismiss(): void;
-  /** Where it sits. Default: inset in the composer card, above the tiles. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The files the composer just refused, one line each, until dismissed. Nothing renders without any.
- *
- * @param props - The `notices` to show, `onDismiss`, called by the close button, and an optional `className`.
- */
-export function AttachmentNotices({ notices, onDismiss, className = 'mx-2 mb-2', style }: AttachmentNoticesProps) {
-  const labels = useChatLabels();
-  if (notices.length === 0) return null;
-  return (
-    <div
-      role="status"
-      aria-label={labels.attachmentNotices}
-      className={`zg-tray flex items-start gap-2 pl-2.5 pr-1 py-1 rounded-zg-md text-zg-label text-[var(--zg-text)] ${className}`}
-      style={style}
-      data-testid="attachment-notices"
-    >
-      <span aria-hidden className="i-ph-warning-circle shrink-0 mt-[5px] text-zg-danger" />
-      <div className="flex-1 min-w-0 flex flex-col py-[3px]">
-        {notices.map((notice) => (
-          <span key={notice} className="break-words">
-            {notice}
-          </span>
-        ))}
-      </div>
-      <IconButton icon="i-ph-x" label={labels.dismiss} size="sm" onClick={onDismiss} />
-    </div>
-  );
-}
-
-/** Props for {@link AttachmentTiles}. */
-export interface AttachmentTilesProps {
-  /** The attachments to show. With none, nothing renders. */
-  attachments: readonly ComposerAttachment[];
-  /** Called with the attachment id when the user removes a tile. */
-  onRemove(id: string): void;
-  /** Called with the attachment id and the clicked element when the user opens a preview. Only images, PDFs and text-like files can be opened. */
-  onOpen(id: string, origin: HTMLElement): void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the composer's attachments as a row of tiles: image thumbnails and file tiles, each with a remove button.
- *
- * @param props - Tiles props: `attachments`, `onRemove`, and `onOpen`.
- */
-export function AttachmentTiles({ attachments, onRemove, onOpen, className, style }: AttachmentTilesProps) {
-  const labels = useChatLabels();
-  const { attachmentLabel } = useTranscriptRenderers();
-  if (attachments.length === 0) return null;
-  return (
-    <ul
-      className={['zg-composer-attachments list-none p-0', className].filter(Boolean).join(' ')}
-      style={style}
-      aria-label={labels.attachments}
-    >
-      {attachments.map((att) => {
-        const parts = attachmentLabel(att.name);
-        return (
-          <li key={att.id} className="zg-composer-attachment" data-testid="composer-attachment">
-            {isImage(att) ? (
-              <button
-                type="button"
-                onClick={(e) => onOpen(att.id, e.currentTarget)}
-                aria-label={labels.viewAttachment(att.name)}
-                className={`${TILE} zg-focus-ring block p-0 overflow-hidden cursor-zoom-in`}
-              >
-                <img src={att.dataUrl} alt="" className="w-full h-full object-cover" />
-              </button>
-            ) : isPreviewableFile(att) ? (
-              <button
-                type="button"
-                onClick={(e) => onOpen(att.id, e.currentTarget)}
-                aria-label={labels.viewAttachment(att.name)}
-                title={labels.attachmentTitle(att.name, formatBytes(att.size))}
-                className={`${FILE_TILE} zg-focus-ring cursor-zoom-in`}
-              >
-                <FileFace name={parts.name} icon={<AttachmentIcon parts={parts} className="text-lg" />} />
-              </button>
-            ) : (
-              // Nothing to preview: a plain tile, not a button that would offer a view it cannot give.
-              <div title={labels.attachmentTitle(att.name, formatBytes(att.size))} className={FILE_TILE}>
-                <FileFace name={parts.name} icon={<AttachmentIcon parts={parts} className="text-lg" />} />
-              </div>
-            )}
-            <button
-              type="button"
-              onClick={() => onRemove(att.id)}
-              aria-label={labels.removeAttachment(att.name)}
-              className="zg-composer-attachment-remove zg-raised border absolute -top-1.5 -right-1.5 w-5 h-5 p-0 rounded-full flex items-center justify-center text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] cursor-pointer"
-            >
-              <span aria-hidden className="i-ph-x text-xs" />
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-/** A file tile's face: the icon, then the name on up to two lines (a long name breaks anywhere). */
-function FileFace({ name, icon }: { name: string; icon: ReactNode }) {
-  return (
-    <>
-      {icon}
-      <span className="zg-line-clamp-2 max-w-full text-center text-zg-meta leading-tight break-all text-[var(--zg-text)]">
-        {name}
-      </span>
-    </>
-  );
-}

package/src/chat/composer/badge-order.ts

@@ -1,65 +0,0 @@
-/**
- * The order of the composer's badges (`ComposerBadges`): each badge's
- * default slot (`order`, lower first), and the order the user dragged,
- * stored by the app as a list of ids. React-free.
- *
- * The saved list only permutes the badges it names: a badge it does not
- * name (new since the user last moved one) shows at its default slot, so a
- * request that just arrived is never sent to the end of the strip.
- */
-
-/** What ordering needs of a badge: its id and its default slot. */
-export interface OrderedBadge {
-  /** Stable id of the badge. */
-  id: string;
-  /** Default left-to-right slot, lower first. Default 100. */
-  order?: number;
-}
-
-/** The default slot of a badge without an `order`. */
-export const DEFAULT_BADGE_ORDER = 100;
-
-/**
- * Badges in the order to show them: sorted by `order` (stable for ties),
- * then the saved order applied over the slots of the badges it names.
- *
- * @param badges - The badges to show, in any order.
- * @param saved - The user's order, as ids (stale and unknown ids are ignored).
- * @returns A new array, in display order.
- */
-export function orderComposerBadges<T extends OrderedBadge>(badges: readonly T[], saved: readonly string[] = []): T[] {
-  const sorted = badges
-    .map((badge, index) => ({ badge, index }))
-    .sort(
-      (a, b) => (a.badge.order ?? DEFAULT_BADGE_ORDER) - (b.badge.order ?? DEFAULT_BADGE_ORDER) || a.index - b.index,
-    )
-    .map(({ badge }) => badge);
-  if (saved.length === 0) return sorted;
-  const rank = new Map(saved.map((id, i) => [id, i] as const));
-  const named = sorted.filter((b) => rank.has(b.id)).sort((a, b) => rank.get(a.id)! - rank.get(b.id)!);
-  let next = 0;
-  return sorted.map((badge) => (rank.has(badge.id) ? named[next++]! : badge));
-}
-
-/**
- * The order to save after the user moved badges: the order shown now, with
- * each saved id that is not shown kept right after the shown badge it
- * followed, so it comes back in its place.
- *
- * @param saved - The order saved so far.
- * @param shown - Every badge shown, in the new order.
- * @returns The order to save.
- */
-export function mergeBadgeOrder(saved: readonly string[], shown: readonly string[]): string[] {
-  const visible = new Set(shown);
-  // Hidden ids, grouped under the shown id they followed (`null`: before any).
-  const after = new Map<string | null, string[]>();
-  let anchor: string | null = null;
-  for (const id of saved) {
-    if (visible.has(id)) anchor = id;
-    else after.set(anchor, [...(after.get(anchor) ?? []), id]);
-  }
-  const out = [...(after.get(null) ?? [])];
-  for (const id of new Set(shown)) out.push(id, ...(after.get(id) ?? []));
-  return out;
-}