@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/components/ListToolbar.tsx

@@ -0,0 +1,177 @@
+import { LayoutGrid, List as ListIcon, Search, X } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Input } from './Input';
+import { Select, type SelectOption } from './Select';
+
+export type ListView = 'cards' | 'list';
+export type SearchScope = 'deep' | 'folder';
+
+export type ListFilter = { id: string; label: string; active?: boolean | undefined };
+
+export type ListToolbarLabels = {
+  /** The toolbar's accessible name. */
+  toolbar: string;
+  search: string;
+  sort: string;
+  view: string;
+  cards: string;
+  list: string;
+  removeFilter: (label: string) => string;
+  /** "Searching this folder and its subfolders" */
+  scopeDeep: string;
+  /** "Searching this folder only" */
+  scopeFolder: string;
+  /** The switch to folder only: "This folder only" */
+  switchToFolder: string;
+  /** The switch back: "Include subfolders" */
+  switchToDeep: string;
+};
+
+const EN: ListToolbarLabels = {
+  toolbar: 'List tools',
+  search: 'Search this folder',
+  sort: 'Sort',
+  view: 'View',
+  cards: 'Cards',
+  list: 'List',
+  removeFilter: (l) => `Remove filter ${l}`,
+  scopeDeep: 'Searching this folder and its subfolders',
+  scopeFolder: 'Searching this folder only',
+  switchToFolder: 'This folder only',
+  switchToDeep: 'Include subfolders',
+};
+
+export type ListToolbarProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+  query?: string | undefined;
+  onQueryChange?: ((query: string) => void) | undefined;
+  /** Where the search looks; the line under the toolbar says so and switches it. */
+  scope?: SearchScope | undefined;
+  onScopeChange?: ((scope: SearchScope) => void) | undefined;
+  sortOptions?: Array<string | SelectOption> | undefined;
+  sort?: string | undefined;
+  onSortChange?: ((value: string) => void) | undefined;
+  /** Active filters show as chips on the brand field with a remove button. */
+  filters?: ListFilter[] | undefined;
+  onFilterRemove?: ((id: string) => void) | undefined;
+  view?: ListView | undefined;
+  onViewChange?: ((view: ListView) => void) | undefined;
+  /** "2 folders · 14 documents · more below" */
+  counts?: ReactNode;
+  labels?: Partial<ListToolbarLabels> | undefined;
+};
+
+/**
+ * ListToolbar — search in the folder (with its scope said out loud), sort,
+ * active filters, the cards / list switch and the counts. Shared by every
+ * list.
+ */
+export function ListToolbar({
+  query,
+  onQueryChange,
+  scope = 'deep',
+  onScopeChange,
+  sortOptions,
+  sort,
+  onSortChange,
+  filters,
+  onFilterRemove,
+  view,
+  onViewChange,
+  counts,
+  labels,
+  className,
+  ...rest
+}: ListToolbarProps) {
+  const t = { ...EN, ...labels };
+  const active = (filters ?? []).filter((f) => f.active !== false);
+  const searching = Boolean(query);
+  return (
+    <div className={cn('flex flex-col gap-2', className)} {...rest}>
+      <div role="toolbar" aria-label={t.toolbar} className="flex flex-wrap items-center gap-2">
+        {onQueryChange && (
+          <Input
+            type="search"
+            aria-label={t.search}
+            placeholder={t.search}
+            value={query ?? ''}
+            onChange={(e) => onQueryChange(e.target.value)}
+            prefix={<Search size={15} strokeWidth={1.75} aria-hidden />}
+            frameClassName="min-w-[200px] flex-1"
+          />
+        )}
+        {sortOptions && (
+          <div className="w-[160px]">
+            <Select options={sortOptions} value={sort} onChange={onSortChange} aria-label={t.sort} />
+          </div>
+        )}
+        {active.map((f) => (
+          <span key={f.id} className="inline-flex h-[38px] items-center gap-1.5 rounded-md bg-brand-field px-3 text-ui font-medium text-ink">
+            {f.label}
+            {onFilterRemove && (
+              <button
+                type="button"
+                aria-label={t.removeFilter(f.label)}
+                onClick={() => onFilterRemove(f.id)}
+                className="grid cursor-pointer place-items-center rounded-xs outline-none focus-visible:shadow-(--focus-ring)"
+              >
+                <X size={14} strokeWidth={2} aria-hidden />
+              </button>
+            )}
+          </span>
+        ))}
+        {onViewChange && (
+          <div role="radiogroup" aria-label={t.view} className="inline-flex h-[38px] items-center gap-0.5 rounded-md bg-sunk p-1">
+            {(
+              [
+                ['cards', LayoutGrid, t.cards],
+                ['list', ListIcon, t.list],
+              ] as const
+            ).map(([v, Glyph, label]) => (
+              <button
+                key={v}
+                type="button"
+                role="radio"
+                aria-checked={view === v}
+                aria-label={label}
+                title={label}
+                onClick={() => onViewChange(v)}
+                className={cn(
+                  'grid size-[30px] cursor-pointer place-items-center rounded-sm text-fg outline-none focus-visible:shadow-(--focus-ring)',
+                  view === v ? 'bg-brand-field text-ink' : 'hover:bg-hover',
+                )}
+              >
+                <Glyph size={15} strokeWidth={1.75} aria-hidden />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      {(searching || counts) && (
+        <div className="flex flex-wrap items-center justify-between gap-2 text-meta text-fg-secondary">
+          <span>
+            {searching && (
+              <>
+                {scope === 'deep' ? t.scopeDeep : t.scopeFolder}
+                {onScopeChange && (
+                  <>
+                    {' · '}
+                    <button
+                      type="button"
+                      onClick={() => onScopeChange(scope === 'deep' ? 'folder' : 'deep')}
+                      className="cursor-pointer text-fg underline underline-offset-2 outline-none focus-visible:shadow-(--focus-ring)"
+                    >
+                      {scope === 'deep' ? t.switchToFolder : t.switchToDeep}
+                    </button>
+                  </>
+                )}
+              </>
+            )}
+          </span>
+          {counts && <span aria-live="polite">{counts}</span>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Logo.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { LOOP, WORDMARK } from './logo-art';
+
+export type LogoProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** wordmark · icon (the loop) · tile (the loop on the yellow square). @default "wordmark" */
+  variant?: 'wordmark' | 'icon' | 'tile' | undefined;
+  /** ink on paper, linen and the yellow; white on ink. Never recoloured beyond these. Unset: ink, white in ink mode. */
+  tone?: 'ink' | 'white' | undefined;
+  /** The standard lockup: a 4px accent-yellow rule beneath the wordmark. */
+  rule?: boolean | undefined;
+  /** px height. @default 28 */
+  height?: number | undefined;
+  /** Accessible name. @default "COSX" */
+  alt?: string | undefined;
+};
+
+function Art({ art, height, title }: { art: typeof WORDMARK | typeof LOOP; height: number; title: string }) {
+  const [, , w, h] = art.viewBox.split(' ').map(Number) as [number, number, number, number];
+  return (
+    <svg viewBox={art.viewBox} height={height} width={Math.round((height * w) / h)} role="img" aria-label={title} fill="currentColor" className="block shrink-0">
+      {art.paths.map((d) => (
+        <path key={d.slice(0, 24)} d={d} />
+      ))}
+    </svg>
+  );
+}
+
+/**
+ * Logo — the COSX wordmark, the CO loop, or the yellow tile (app icon,
+ * avatar, favicon). Colour comes from the ground, never from the mark: the
+ * mark is ink or white, never yellow, never two-tone.
+ */
+export function Logo({ variant = 'wordmark', tone, rule = false, height = 28, alt = 'COSX', className, ...rest }: LogoProps) {
+  if (variant === 'tile') {
+    return (
+      <span
+        className={cn('inline-grid shrink-0 place-items-center bg-yellow text-ink', className)}
+        style={{ width: height, height, borderRadius: Math.round(height * 0.22) }}
+        {...rest}
+      >
+        <Art art={LOOP} height={height} title={alt} />
+      </span>
+    );
+  }
+  const colour = tone === 'white' ? 'text-white' : tone === 'ink' ? 'text-ink' : 'text-ink ink:text-white';
+  const art = <Art art={variant === 'icon' ? LOOP : WORDMARK} height={height} title={alt} />;
+  if (!rule || variant === 'icon') {
+    return (
+      <span className={cn('inline-flex', colour, className)} {...rest}>
+        {art}
+      </span>
+    );
+  }
+  return (
+    <span className={cn('inline-flex flex-col items-start', colour, className)} style={{ gap: Math.round(height * 0.45) }} {...rest}>
+      {art}
+      <span aria-hidden className="h-1 w-full rounded-[2px] bg-yellow-accent" />
+    </span>
+  );
+}

package/src/components/Marker.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type MarkerProps = Omit<ComponentProps<'span'>, 'children'> & {
+  children: ReactNode;
+  /** On an ink ground there is no band: the phrase is set in accent yellow. */
+  onInk?: boolean | undefined;
+  /** Draw the band in after the headline lands (motion.css; still with reduced motion). */
+  draw?: boolean | undefined;
+  as?: ElementType | undefined;
+};
+
+/**
+ * Marker — the highlighter behind the phrase that carries the finding.
+ * One per headline. The band sits in the lower part of the line and is
+ * cloned across line breaks; Chinese starts it lower (typography-cjk.css).
+ * Styling comes from the design system's own .marker rules.
+ */
+export function Marker({ children, onInk = false, draw = false, as: Tag = 'span', className, ...rest }: MarkerProps) {
+  return (
+    <Tag className={cn('marker', onInk && 'on-ink', draw && !onInk && 'draw', className)} {...rest}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/MentionInput.tsx

@@ -0,0 +1,233 @@
+import * as Popover from '@radix-ui/react-popover';
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Button } from './Button';
+import { useField } from './Field';
+import { DEFAULT_LABELS, ListboxBody, type ListboxLabels, type ListItem } from './inputs-listbox';
+import type { SearchStatus } from './inputs-search';
+
+export type Mention = { value: string; label: string };
+
+export type MentionInputProps = {
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  /** The text and the people mentioned in it (those whose @Name is still there). */
+  onChange?: ((text: string, mentions: Mention[]) => void) | undefined;
+  /** ⌘Enter / Ctrl+Enter, or the send button. */
+  onSubmit?: ((text: string, mentions: Mention[]) => void) | undefined;
+  /** People who can be mentioned; meta is their role (Member, Customer). */
+  people: ListItem[];
+  placeholder?: string | undefined;
+  /** @default "Send" — null hides the button (⌘Enter still sends). */
+  submitLabel?: ReactNode;
+  /** @default "⌘Enter to send" (Ctrl+Enter off the Mac) */
+  submitHint?: ReactNode;
+  labels?: Partial<ListboxLabels> | undefined;
+  disabled?: boolean | undefined;
+  /** Rows before it scrolls. @default 3 */
+  rows?: number | undefined;
+  /** Focus on mount, caret at the end (an @ being typed there opens the list). */
+  autoFocus?: boolean | undefined;
+  id?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+const isMac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+
+/** The @query being typed at the caret: "@" at a word start, no spaces since. */
+export function mentionAt(text: string, caret: number): { start: number; query: string } | null {
+  const before = text.slice(0, caret);
+  const at = before.lastIndexOf('@');
+  if (at < 0) return null;
+  if (at > 0 && !/\s/.test(before[at - 1]!)) return null;
+  const query = before.slice(at + 1);
+  if (/\s/.test(query) || query.length > 30) return null;
+  return { start: at, query };
+}
+
+/**
+ * MentionInput — the comment box: @ opens the people who can be mentioned
+ * (arrows, Enter or Tab to insert, Esc to close); the mention goes in as
+ * @Name. ⌘Enter sends. Mentions are reported with the text, and only while
+ * their @Name is still in it.
+ */
+export function MentionInput({
+  value,
+  defaultValue = '',
+  onChange,
+  onSubmit,
+  people,
+  placeholder,
+  submitLabel = 'Send',
+  submitHint,
+  labels: labelsIn,
+  disabled,
+  rows = 3,
+  autoFocus = false,
+  id,
+  className,
+  ...aria
+}: MentionInputProps) {
+  const field = useField();
+  const auto = useId();
+  const listId = `mi${auto}-list`;
+  const optionId = (i: number) => `mi${auto}-o${i}`;
+  const labels = { ...DEFAULT_LABELS, ...labelsIn, empty: labelsIn?.empty ?? ((q: string) => `No one matches “${q}”.`) };
+  const [own, setOwn] = useState(defaultValue);
+  const text = value ?? own;
+  const [picked, setPicked] = useState<Mention[]>([]);
+  const [at, setAt] = useState<{ start: number; query: string } | null>(null);
+  const [active, setActive] = useState(0);
+  const area = useRef<HTMLTextAreaElement | null>(null);
+  // After a token goes in, put the caret after it once the new text is on screen.
+  const caretTo = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    const pos = caretTo.current;
+    if (pos === null || !area.current) return;
+    caretTo.current = null;
+    area.current.focus();
+    area.current.setSelectionRange(pos, pos);
+  }, [text]);
+  const off = Boolean(disabled || field?.disabled);
+
+  const matches = useMemo(() => {
+    if (!at) return [];
+    const q = at.query.toLowerCase();
+    return people.filter((p) => p.label.toLowerCase().includes(q) || (p.meta ?? '').toLowerCase().startsWith(q)).slice(0, 8);
+  }, [at, people]);
+  const status: SearchStatus = 'done';
+  const open = at !== null && !off;
+
+  const live = (t: string) => picked.filter((m, i, all) => t.includes(`@${m.label}`) && all.findIndex((x) => x.value === m.value) === i);
+  const set = (t: string, list = picked) => {
+    if (value === undefined) setOwn(t);
+    onChange?.(t, list.filter((m) => t.includes(`@${m.label}`)));
+  };
+  const track = (t: string, caret: number) => {
+    const next = mentionAt(t, caret);
+    setAt(next);
+    if (next && (!at || next.query !== at.query)) setActive(0);
+  };
+  // autoFocus: caret at the end, and an @ being typed there opens the list.
+  useEffect(() => {
+    const el = area.current;
+    if (!autoFocus || !el) return;
+    el.focus();
+    el.setSelectionRange(el.value.length, el.value.length);
+    track(el.value, el.value.length);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount only
+  }, []);
+  const insert = (i: number) => {
+    const p = matches[i];
+    if (!p || !at) return;
+    const token = `@${p.label} `;
+    const caret = at.start + 1 + at.query.length;
+    const next = text.slice(0, at.start) + token + text.slice(caret);
+    const list = [...picked, { value: p.value, label: p.label }];
+    setPicked(list);
+    set(next, list);
+    setAt(null);
+    const pos = at.start + token.length;
+    caretTo.current = pos;
+  };
+  const submit = () => {
+    if (!text.trim()) return;
+    onSubmit?.(text, live(text));
+  };
+
+  const onKey = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (open && matches.length) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActive((a) => (e.key === 'ArrowDown' ? (a + 1) % matches.length : (a - 1 + matches.length) % matches.length));
+        return;
+      }
+      if ((e.key === 'Enter' && !e.metaKey && !e.ctrlKey) || e.key === 'Tab') {
+        e.preventDefault();
+        insert(active);
+        return;
+      }
+    }
+    if (open && e.key === 'Escape') {
+      e.preventDefault();
+      setAt(null);
+      return;
+    }
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col rounded-md border border-rule bg-sunk font-sans text-fg',
+        'transition-[border-color] duration-[120ms] ease-standard focus-within:border-fg focus-within:shadow-(--focus-ring)',
+        field?.invalid && 'border-error focus-within:border-error',
+        off && 'cursor-not-allowed bg-well text-fg-secondary',
+        className,
+      )}
+    >
+      <Popover.Root open={open} onOpenChange={(o) => !o && setAt(null)}>
+        <Popover.Anchor asChild>
+          <textarea
+            ref={area}
+            id={id ?? field?.id}
+            rows={rows}
+            value={text}
+            placeholder={placeholder}
+            disabled={off}
+            aria-controls={open ? listId : undefined}
+            aria-autocomplete="list"
+            aria-activedescendant={open && matches.length ? optionId(active) : undefined}
+            aria-label={aria['aria-label']}
+            aria-describedby={field?.describedBy}
+            onChange={(e) => {
+              set(e.target.value);
+              track(e.target.value, e.target.selectionStart ?? e.target.value.length);
+            }}
+            onSelect={(e) => track(e.currentTarget.value, e.currentTarget.selectionStart ?? 0)}
+            onKeyDown={onKey}
+            onBlur={() => setAt(null)}
+            className="min-h-0 w-full resize-none border-none bg-transparent px-2.5 pt-2 pb-1 font-sans text-[13px] leading-normal text-inherit outline-none placeholder:text-fg-secondary"
+          />
+        </Popover.Anchor>
+        <Popover.Portal>
+          <Popover.Content
+            align="start"
+            side="bottom"
+            sideOffset={4}
+            collisionPadding={12}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            className="rise z-60 w-[260px] rounded-lg border border-rule bg-page p-1 font-sans [--motion-reveal:200ms]"
+          >
+            <ListboxBody
+              id={listId}
+              optionId={optionId}
+              items={matches}
+              active={active}
+              status={status}
+              query={at?.query ?? ''}
+              canCreate={false}
+              labels={labels}
+              onActive={setActive}
+              onChoose={insert}
+              onRetry={() => {}}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+      <div className="flex items-center justify-end gap-3 px-2 pb-2">
+        <span className="text-meta text-fg-secondary">{submitHint ?? (isMac() ? '⌘Enter to send' : 'Ctrl+Enter to send')}</span>
+        {submitLabel !== null && (
+          <Button size="sm" disabled={off || !text.trim()} onClick={submit}>
+            {submitLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Menu.tsx

@@ -0,0 +1,109 @@
+import * as MenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+/** Menu root: open / onOpenChange, or uncontrolled with MenuTrigger. */
+export const Menu = MenuPrimitive.Root;
+/** The element that opens it (asChild onto a Button or IconButton). */
+export const MenuTrigger = MenuPrimitive.Trigger;
+export const MenuSub = MenuPrimitive.Sub;
+
+const surface = cn(
+  'z-[60] min-w-[200px] overflow-hidden rounded-lg border border-rule bg-page p-1.5 font-sans text-ui text-fg outline-none',
+  'max-h-(--radix-dropdown-menu-content-available-height)',
+);
+
+export type MenuContentProps = ComponentProps<typeof MenuPrimitive.Content>;
+
+/** MenuContent — renders in a portal (never clipped), flips to fit. No shadow: a hairline on the page colour. */
+export function MenuContent({ className, sideOffset = 6, collisionPadding = 8, align = 'start', ...rest }: MenuContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content sideOffset={sideOffset} collisionPadding={collisionPadding} align={align} className={cn(surface, className)} {...rest} />
+    </MenuPrimitive.Portal>
+  );
+}
+
+const itemBase = cn(
+  'relative flex min-h-8 cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 outline-none select-none',
+  'data-highlighted:bg-hover data-disabled:cursor-not-allowed data-disabled:opacity-40',
+);
+
+export type MenuItemProps = Omit<ComponentProps<typeof MenuPrimitive.Item>, 'children'> & {
+  children: ReactNode;
+  icon?: ReactNode;
+  /** Shortcut hint, right-aligned (⌘,). */
+  shortcut?: string | undefined;
+  /** Red text: sign out, delete. Place it last, after a separator. */
+  destructive?: boolean | undefined;
+  /** Why it is unavailable: shown under the label (disables the item). */
+  disabledReason?: ReactNode;
+  /** A second line (a workspace's role). */
+  description?: ReactNode;
+};
+
+/** MenuItem — one action. Keyboard: arrows, Home/End, typeahead, Enter (Radix). */
+export function MenuItem({ children, icon, shortcut, destructive, disabledReason, description, disabled, className, ...rest }: MenuItemProps) {
+  return (
+    <MenuPrimitive.Item disabled={disabled || Boolean(disabledReason)} className={cn(itemBase, destructive && 'text-error-text', className)} {...rest}>
+      {icon && <span className="grid size-4 shrink-0 place-items-center text-fg-secondary">{icon}</span>}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate">{children}</span>
+        {(disabledReason || description) && <span className="text-meta text-fg-secondary">{disabledReason ?? description}</span>}
+      </span>
+      {shortcut && <kbd className="ml-4 font-sans text-meta font-medium text-fg-secondary">{shortcut}</kbd>}
+    </MenuPrimitive.Item>
+  );
+}
+
+export type MenuCheckboxItemProps = Omit<ComponentProps<typeof MenuPrimitive.CheckboxItem>, 'children'> & { children: ReactNode; shortcut?: string | undefined };
+
+/** A toggle in a menu; checked shows a tick. */
+export function MenuCheckboxItem({ children, shortcut, className, ...rest }: MenuCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem className={cn(itemBase, 'pl-8', className)} {...rest}>
+      <MenuPrimitive.ItemIndicator className="absolute left-2.5 grid size-4 place-items-center">
+        <Check size={14} strokeWidth={2} aria-hidden />
+      </MenuPrimitive.ItemIndicator>
+      <span className="flex-1 truncate">{children}</span>
+      {shortcut && <kbd className="ml-4 font-sans text-meta font-medium text-fg-secondary">{shortcut}</kbd>}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+/** A labelled group of items (Customer / Member when switching workspaces). */
+export function MenuGroup({ label, children }: { label?: ReactNode; children: ReactNode }) {
+  return (
+    <MenuPrimitive.Group>
+      {label && <MenuPrimitive.Label className="px-2.5 pt-2 pb-1 text-meta font-medium text-fg-secondary">{label}</MenuPrimitive.Label>}
+      {children}
+    </MenuPrimitive.Group>
+  );
+}
+
+export function MenuSeparator({ className }: { className?: string | undefined }) {
+  return <MenuPrimitive.Separator className={cn('mx-1 my-1.5 h-px bg-rule', className)} />;
+}
+
+export type MenuSubTriggerProps = Omit<ComponentProps<typeof MenuPrimitive.SubTrigger>, 'children'> & { children: ReactNode; icon?: ReactNode };
+
+/** Opens a nested menu (right arrow / Enter; left arrow closes). */
+export function MenuSubTrigger({ children, icon, className, ...rest }: MenuSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubTrigger className={cn(itemBase, 'data-[state=open]:bg-hover', className)} {...rest}>
+      {icon && <span className="grid size-4 shrink-0 place-items-center text-fg-secondary">{icon}</span>}
+      <span className="flex-1 truncate">{children}</span>
+      <ChevronRight size={14} aria-hidden className="text-fg-secondary" />
+    </MenuPrimitive.SubTrigger>
+  );
+}
+
+export function MenuSubContent({ className, sideOffset = 4, ...rest }: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent sideOffset={sideOffset} collisionPadding={8} className={cn(surface, className)} {...rest} />
+    </MenuPrimitive.Portal>
+  );
+}

package/src/components/MetaLabel.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type MetaLabelProps = Omit<ComponentProps<'div'>, 'children'> & {
+  children: ReactNode;
+  /** grey (default) · ink · inverse (grey on ink) · linen · yellow (legal only on an ink ground). */
+  tone?: 'grey' | 'ink' | 'inverse' | 'linen' | 'yellow' | undefined;
+  /** 11.5 · 12 · 13.5px. @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** A rule beneath: hair (1px) or yellow (4px). */
+  rule?: 'hair' | 'yellow' | undefined;
+  as?: ElementType | undefined;
+};
+
+const TONE = { grey: 'text-fg-secondary', ink: 'text-fg', inverse: 'text-grey-inverse', linen: 'text-linen', yellow: 'text-yellow-accent' };
+const SIZE = { sm: 'text-[11.5px]', md: 'text-meta', lg: 'text-small' };
+
+/** MetaLabel — eyebrows, metadata, page numbers: 12px 500 grey, sentence
+ *  case, no caps, no tracking. */
+export function MetaLabel({ children, tone = 'grey', size = 'md', rule, as: Tag = 'div', className, ...rest }: MetaLabelProps) {
+  return (
+    <Tag
+      className={cn(
+        'font-sans leading-[1.4] font-medium',
+        TONE[tone],
+        SIZE[size],
+        rule && 'pb-2.5',
+        rule === 'hair' && 'border-b border-rule',
+        rule === 'yellow' && 'border-b-4 border-yellow-accent',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}