@lyeve-labs/ui-kit 0.39.1 → 0.41.0

package/dist/components/SplitPane.svelte

@@ -0,0 +1,428 @@
+<script lang="ts">
+  import {
+    Lock,
+    LockOpen,
+    PanelLeftClose,
+    PanelLeftOpen,
+    PanelRightClose,
+    PanelRightOpen,
+  } from '@lucide/svelte';
+  import { tick, untrack, type Snippet } from 'svelte';
+  import Button from './Button.svelte';
+  import SectionHeading from './SectionHeading.svelte';
+  import { clampWidth, readAside, viewerStorage, writeAside } from '../internal/aside.js';
+
+  /**
+   * A column docked to one side of a page, with one width discipline for every
+   * page that has one. Above the breakpoint its inner edge drags, a lock fixes
+   * the width, the keyboard moves the edge, and the width and the lock are
+   * remembered per viewer. A collapsible one folds to a strip carrying its
+   * name. Below the breakpoint none of that applies: it stacks in the page's
+   * own flow, hides, or becomes the overlay a toolbar opens, as the page
+   * decides. The drag overlays the width while the pointer moves and writes
+   * once on release.
+   */
+  type Breakpoint = 'md' | 'lg' | 'xl';
+
+  interface Props {
+    /** The localStorage key the width and lock are kept under. */
+    storageKey: string;
+    /** The word on the strip and the header. */
+    label: string;
+    /** Which edge of the page it docks to. The handle sits on the other edge. */
+    side: 'start' | 'end';
+    /** The width it opens at until somebody drags it. */
+    width?: number;
+    min?: number;
+    max?: number;
+    /** Where the desktop controls start. */
+    breakpoint?: Breakpoint;
+    /**
+     * What it does under the breakpoint: stays in the page's flow across the
+     * full width, disappears, or floats over the page while `overlay` is set.
+     */
+    below?: 'stack' | 'overlay' | 'hidden';
+    /** Shown as an overlay below the breakpoint. Only read with `below="overlay"`. */
+    overlay?: boolean;
+    /** Offers a collapse to a strip. */
+    collapsible?: boolean;
+    /** Expanded above the breakpoint. Bindable so a page can open it from an offer. */
+    open?: boolean;
+    /** Keeps the header's count or status beside the label. */
+    meta?: Snippet;
+    /** Classes for the aside element itself, for the stacked layout's share of the height. */
+    class?: string;
+    testId?: string;
+    children: Snippet;
+  }
+
+  let {
+    storageKey,
+    label,
+    side,
+    width: defaultWidth = 280,
+    min = 200,
+    max = 560,
+    breakpoint = 'xl',
+    below = 'stack',
+    overlay = false,
+    collapsible = false,
+    open = $bindable(true),
+    meta,
+    class: klass = '',
+    testId,
+    children,
+  }: Props = $props();
+
+  // Tailwind reads class names from source, so each breakpoint spells its
+  // variants out rather than building them from the prop. The dock entry hands
+  // an overlay back to the page at the breakpoint, and nothing moves or
+  // transitions there. It resets the offset with translate-none rather than a
+  // zero offset, because any translate makes the aside the containing block
+  // for a fixed popover inside it. The overlay's layer applies only under the
+  // breakpoint: a docked pane is a flex item, and a stacking layer on it would
+  // lift it, and every popover inside it, over the main column's popovers. The
+  // room entry keeps the main column at least the pane's minimum wide, so a
+  // width stored on a wider screen never pushes it off this one.
+  type Variant =
+    | 'dock'
+    | 'w8'
+    | 'flex'
+    | 'block'
+    | 'hidden'
+    | 'width'
+    | 'room'
+    | 'noBorderB'
+    | 'borderE'
+    | 'borderS'
+    | 'flexNone'
+    | 'maxHNone';
+  const AT: Record<Breakpoint, Record<Variant, string>> = {
+    md: {
+      dock: 'max-md:z-dropdown md:static md:visible md:translate-none md:opacity-100 md:transition-none',
+      w8: 'md:w-8',
+      flex: 'md:flex',
+      block: 'md:block',
+      hidden: 'md:hidden',
+      width: 'md:w-(--panel-w)',
+      room: 'md:max-w-[calc(100%_-_var(--panel-min))]',
+      noBorderB: 'md:border-b-0',
+      borderE: 'md:border-e',
+      borderS: 'md:border-s',
+      flexNone: 'md:flex-none',
+      maxHNone: 'md:max-h-none',
+    },
+    lg: {
+      dock: 'max-lg:z-dropdown lg:static lg:visible lg:translate-none lg:opacity-100 lg:transition-none',
+      w8: 'lg:w-8',
+      flex: 'lg:flex',
+      block: 'lg:block',
+      hidden: 'lg:hidden',
+      width: 'lg:w-(--panel-w)',
+      room: 'lg:max-w-[calc(100%_-_var(--panel-min))]',
+      noBorderB: 'lg:border-b-0',
+      borderE: 'lg:border-e',
+      borderS: 'lg:border-s',
+      flexNone: 'lg:flex-none',
+      maxHNone: 'lg:max-h-none',
+    },
+    xl: {
+      dock: 'max-xl:z-dropdown xl:static xl:visible xl:translate-none xl:opacity-100 xl:transition-none',
+      w8: 'xl:w-8',
+      flex: 'xl:flex',
+      block: 'xl:block',
+      hidden: 'xl:hidden',
+      width: 'xl:w-(--panel-w)',
+      room: 'xl:max-w-[calc(100%_-_var(--panel-min))]',
+      noBorderB: 'xl:border-b-0',
+      borderE: 'xl:border-e',
+      borderS: 'xl:border-s',
+      flexNone: 'xl:flex-none',
+      maxHNone: 'xl:max-h-none',
+    },
+  };
+  const at = $derived(AT[breakpoint]);
+  const id = $derived(testId ?? `aside-${storageKey}`);
+
+  // Each breakpoint as the stylesheet compiles it, in rem, so the script and
+  // the variants above change over at the same width.
+  const WIDE: Record<Breakpoint, string> = {
+    md: '(min-width: 48rem)',
+    lg: '(min-width: 64rem)',
+    xl: '(min-width: 80rem)',
+  };
+
+  /**
+   * Whether the page is under the breakpoint, once the browser has said. Only
+   * an overlay asks, and only to set inert. Every other part of the overlay is
+   * a class, and its breakpoint variant hands the docked column back. Inert is
+   * an attribute, which no variant can scope, and the docked column has to take
+   * focus and clicks whatever the overlay flag says. Until the browser answers,
+   * invisible keeps a closed overlay out of focus and out of reach.
+   */
+  let narrow = $state(false);
+
+  $effect(() => {
+    if (below !== 'overlay' || typeof window.matchMedia !== 'function') return;
+    const wide = window.matchMedia(WIDE[breakpoint]);
+    const sync = () => {
+      narrow = !wide.matches;
+    };
+    sync();
+    wide.addEventListener('change', sync);
+    return () => wide.removeEventListener('change', sync);
+  });
+
+  const bounds = $derived({ width: defaultWidth, min, max });
+
+  // The key never changes for the life of the pane, so the read happens once,
+  // at mount. The server has no storage, so it renders the default width.
+  const initial = readAside(
+    viewerStorage(),
+    untrack(() => storageKey),
+    untrack(() => bounds),
+  );
+  let width = $state(initial.width);
+  let locked = $state(initial.locked);
+
+  let aside: HTMLElement | undefined = $state();
+  let drag = $state<{ startX: number; startWidth: number; grows: number } | null>(null);
+
+  /**
+   * Which way a pointer or an arrow moving right changes the width. The inner
+   * edge is on the right of a start pane and on the left of an end pane, and a
+   * right-to-left page swaps both, so the edge always follows the key the way
+   * it looks.
+   */
+  function growsRight(): number {
+    const rtl = aside ? getComputedStyle(aside).direction === 'rtl' : false;
+    return (side === 'start' ? 1 : -1) * (rtl ? -1 : 1);
+  }
+
+  /**
+   * The bounds as this screen allows them. The upper bound also leaves the
+   * main column the pane's minimum, the same cap the stylesheet draws. A
+   * parent with no measured width (before layout, or in a test) leaves the
+   * bounds as given.
+   */
+  function room() {
+    const total = aside?.parentElement?.clientWidth ?? 0;
+    const upper = total > 0 ? Math.max(min, Math.min(max, total - min)) : max;
+    return { min, max: upper };
+  }
+
+  /**
+   * The upper bound the room allows, kept current as the page resizes, so the
+   * handle announces the width drawn and a maximum the keys can reach. The
+   * server has no layout and renders the bounds as given.
+   */
+  let roomMax = $state(untrack(() => max));
+
+  $effect(() => {
+    const parent = aside?.parentElement;
+    const sync = () => {
+      roomMax = room().max;
+    };
+    sync();
+    if (!parent || typeof ResizeObserver !== 'function') return;
+    const watch = new ResizeObserver(sync);
+    watch.observe(parent);
+    return () => watch.disconnect();
+  });
+
+  /** The width on screen, which the room cap can hold below the stored one. */
+  function shown(): number {
+    const drawn = aside?.getBoundingClientRect().width ?? 0;
+    return drawn > 0 ? Math.min(width, Math.round(drawn)) : width;
+  }
+
+  function remember() {
+    writeAside(viewerStorage(), storageKey, bounds, { width, locked });
+  }
+
+  function startResize(e: PointerEvent) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    drag = { startX: e.clientX, startWidth: shown(), grows: growsRight() };
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+  }
+
+  function resizeMove(e: PointerEvent) {
+    if (!drag) return;
+    width = clampWidth(room(), drag.startWidth + (e.clientX - drag.startX) * drag.grows);
+  }
+
+  function endResize(e: PointerEvent) {
+    if (!drag) return;
+    drag = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+    remember();
+  }
+
+  function resizeKey(e: KeyboardEvent) {
+    const step = e.shiftKey ? 80 : 24;
+    const limits = room();
+    let next: number | null = null;
+    if (e.key === 'ArrowRight') next = shown() + step * growsRight();
+    else if (e.key === 'ArrowLeft') next = shown() - step * growsRight();
+    else if (e.key === 'Home') next = limits.min;
+    else if (e.key === 'End') next = limits.max;
+    if (next === null) return;
+    e.preventDefault();
+    width = clampWidth(limits, next);
+    remember();
+  }
+
+  function toggleLock() {
+    locked = !locked;
+    remember();
+  }
+
+  let strip: HTMLElement | undefined = $state();
+  let controls: HTMLElement | undefined = $state();
+
+  /**
+   * Folds or opens the pane from its own control. The fold hides the control
+   * that was pressed, so once the markup carries the new state focus moves to
+   * the control that undoes it. Left where it was, a keyboard reader lands on
+   * the body or on a button nobody can see.
+   */
+  async function fold(next: boolean) {
+    open = next;
+    await tick();
+    (next ? controls : strip)?.querySelector<HTMLElement>('[aria-expanded]')?.focus();
+  }
+
+  // The panel glyphs are drawn for a left-to-right page, so a right-to-left
+  // one mirrors them with the rest of the layout.
+  const Collapse = $derived(side === 'start' ? PanelLeftClose : PanelRightClose);
+  const Expand = $derived(side === 'start' ? PanelLeftOpen : PanelRightOpen);
+
+  /** The strip is the only thing a collapsed pane shows, and only above the breakpoint. */
+  const folded = $derived(collapsible && !open);
+
+  const edge = $derived(side === 'start' ? at.borderE : at.borderS);
+
+  /**
+   * The overlay's motion under the breakpoint. It is CSS because the overlay
+   * stays mounted at every width, so what the reader typed in it survives a
+   * close and a resize. Closed, it sits off its own edge, transparent and
+   * invisible. It slides and fades in on the slow rung and out one rung
+   * faster. Visibility is in the exit's list only. Leaving, the panel turns
+   * invisible once the slide has finished. Arriving, it is visible at once, so
+   * a field inside can take focus on the first frame.
+   */
+  const slide = $derived(
+    overlay
+      ? 'transition-[translate,opacity] duration-slow ease-enter'
+      : `invisible opacity-0 ${side === 'start' ? '-translate-x-full rtl:translate-x-full' : 'translate-x-full rtl:-translate-x-full'} transition-[translate,opacity,visibility] duration-base ease-exit`,
+  );
+
+  const frame = $derived.by(() => {
+    if (below === 'overlay') {
+      // Floating under the breakpoint at the panel's own width. Only the
+      // docked variant folds to the strip.
+      return `absolute inset-y-0 w-(--panel-w) max-w-full shrink-0 border-line bg-surface ${slide} ${at.dock} ${folded ? at.w8 : at.room} ${side === 'start' ? 'start-0 border-e' : 'end-0 border-s'}`;
+    }
+    const shownBelow =
+      below === 'hidden'
+        ? `hidden ${at.flex}`
+        : `flex border-b ${at.noBorderB} ${at.flexNone} ${at.maxHNone}`;
+    return `${shownBelow} min-h-0 flex-col border-line bg-surface ${folded ? at.w8 : `${at.width} ${at.room}`} ${edge} ${klass}`;
+  });
+</script>
+
+<aside
+  bind:this={aside}
+  class={frame}
+  style="--panel-w:{width}px;--panel-min:{min}px"
+  aria-label={label}
+  data-testid={id}
+  data-open={open}
+  data-locked={locked}
+  inert={below === 'overlay' && narrow && !overlay}
+>
+  {#if collapsible}
+    <!-- The strip: the name read down the edge and the one control that brings the pane back. -->
+    <div
+      bind:this={strip}
+      class="h-full flex-col items-center gap-2 py-1 {folded ? `hidden ${at.flex}` : 'hidden'}"
+      data-testid="{id}-strip"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        aria-label="Expand {label}"
+        aria-expanded={false}
+        hint={false}
+        onclick={() => fold(true)}
+      >
+        <Expand size={14} class="rtl:-scale-x-100" />
+      </Button>
+      <span
+        class="text-xs font-medium tracking-wide text-faint uppercase [writing-mode:vertical-rl]"
+        >{label}</span
+      >
+    </div>
+  {/if}
+
+  <div class="relative flex h-full min-h-0 flex-1 flex-col {folded ? at.hidden : ''}">
+    <div
+      class="flex h-control shrink-0 items-center justify-between border-b border-line ps-3 pe-1"
+    >
+      <SectionHeading level={2} variant="eyebrow" actions={meta}>{label}</SectionHeading>
+      <div bind:this={controls} class="hidden items-center {at.flex}">
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-label={locked ? `Unlock ${label} width` : `Lock ${label} width`}
+          aria-pressed={locked}
+          hint={false}
+          onclick={toggleLock}
+        >
+          {#if locked}<Lock size={14} />{:else}<LockOpen size={14} />{/if}
+        </Button>
+        {#if collapsible}
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Collapse {label}"
+            aria-expanded={true}
+            hint={false}
+            onclick={() => fold(false)}
+          >
+            <Collapse size={14} class="rtl:-scale-x-100" />
+          </Button>
+        {/if}
+      </div>
+    </div>
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      {@render children()}
+    </div>
+    {#if !locked}
+      <!-- A separator that takes focus is the pattern for a splitter, and the
+           a11y rules read every separator as static. -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <div
+        class="absolute inset-y-0 hidden w-2 cursor-col-resize hover:bg-brand/40 focus-visible:bg-brand/40 {at.block} {side ===
+        'start'
+          ? '-end-1'
+          : '-start-1'} {drag ? 'bg-brand/40' : ''}"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize {label}"
+        aria-valuenow={clampWidth({ min, max: roomMax }, width)}
+        aria-valuemin={min}
+        aria-valuemax={roomMax}
+        tabindex="0"
+        data-testid="{id}-handle"
+        onpointerdown={startResize}
+        onpointermove={resizeMove}
+        onpointerup={endResize}
+        onpointercancel={endResize}
+        onkeydown={resizeKey}
+      ></div>
+    {/if}
+  </div>
+</aside>

package/dist/components/SplitPane.svelte.d.ts

@@ -0,0 +1,46 @@
+import { type Snippet } from 'svelte';
+/**
+ * A column docked to one side of a page, with one width discipline for every
+ * page that has one. Above the breakpoint its inner edge drags, a lock fixes
+ * the width, the keyboard moves the edge, and the width and the lock are
+ * remembered per viewer. A collapsible one folds to a strip carrying its
+ * name. Below the breakpoint none of that applies: it stacks in the page's
+ * own flow, hides, or becomes the overlay a toolbar opens, as the page
+ * decides. The drag overlays the width while the pointer moves and writes
+ * once on release.
+ */
+type Breakpoint = 'md' | 'lg' | 'xl';
+interface Props {
+    /** The localStorage key the width and lock are kept under. */
+    storageKey: string;
+    /** The word on the strip and the header. */
+    label: string;
+    /** Which edge of the page it docks to. The handle sits on the other edge. */
+    side: 'start' | 'end';
+    /** The width it opens at until somebody drags it. */
+    width?: number;
+    min?: number;
+    max?: number;
+    /** Where the desktop controls start. */
+    breakpoint?: Breakpoint;
+    /**
+     * What it does under the breakpoint: stays in the page's flow across the
+     * full width, disappears, or floats over the page while `overlay` is set.
+     */
+    below?: 'stack' | 'overlay' | 'hidden';
+    /** Shown as an overlay below the breakpoint. Only read with `below="overlay"`. */
+    overlay?: boolean;
+    /** Offers a collapse to a strip. */
+    collapsible?: boolean;
+    /** Expanded above the breakpoint. Bindable so a page can open it from an offer. */
+    open?: boolean;
+    /** Keeps the header's count or status beside the label. */
+    meta?: Snippet;
+    /** Classes for the aside element itself, for the stacked layout's share of the height. */
+    class?: string;
+    testId?: string;
+    children: Snippet;
+}
+declare const SplitPane: import("svelte").Component<Props, {}, "open">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
+export { default as SplitPane } from './components/SplitPane.svelte';
 export type { CellFit } from './components/Table.svelte';
 export type { SidebarState } from './components/AppShell.svelte';
 export type { PageWidth, SectionVariant } from './internal/layout.js';
@@ -77,6 +78,9 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as CheckoutSteps } from './components/CheckoutSteps.svelte';
+export { default as RefusalNotice } from './components/RefusalNotice.svelte';
+export { default as GateNotice } from './components/GateNotice.svelte';
+export type { Gate, GateText, GateWords } from './internal/gate.js';
 export { default as PluginCart } from './components/PluginCart.svelte';
 export type { QuickPick } from './components/PluginCart.svelte';
 export { billedCount, formatCents, ladderRows, ladderState, type BillingPeriod, type CartCatalog, type CartPlugin, type CartQuote, type CartQuoteItem, type DiscountBracket, type LadderState, } from './internal/pricing.js';
@@ -103,4 +107,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.39.1";
+export declare const VERSION = "0.41.0";

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
+export { default as SplitPane } from './components/SplitPane.svelte';
 // Stated once in an app's root layout, the format turns every PageShell's
 // title into the browser tab's. An app that never states one gets no title
 // element from the kit.
@@ -77,6 +78,8 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as CheckoutSteps } from './components/CheckoutSteps.svelte';
+export { default as RefusalNotice } from './components/RefusalNotice.svelte';
+export { default as GateNotice } from './components/GateNotice.svelte';
 export { default as PluginCart } from './components/PluginCart.svelte';
 export { billedCount, formatCents, ladderRows, ladderState, } from './internal/pricing.js';
 export { default as Stat } from './components/Stat.svelte';
@@ -116,4 +119,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.39.1';
+export const VERSION = '0.41.0';

package/dist/internal/accept.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A file input's `accept` list, read out as the names a person scans for.
+ *
+ * The attribute is written for the browser: extensions and MIME types side by
+ * side, often naming one format twice (`.json,application/json`) and sometimes
+ * as a vendor type longer than the drop zone is wide. Printed as it stands it
+ * runs as one unbroken line. Each entry folds to the short name a reader knows
+ * the format by, duplicates collapse, and the list joins as an English "or".
+ *
+ * Not exported from the package entry point: this is an implementation detail.
+ */
+/** The `accept` list as a short line, or an empty string when it names nothing. */
+export declare function describeAccept(accept: string): string;

package/dist/internal/accept.js

@@ -0,0 +1,76 @@
+/**
+ * A file input's `accept` list, read out as the names a person scans for.
+ *
+ * The attribute is written for the browser: extensions and MIME types side by
+ * side, often naming one format twice (`.json,application/json`) and sometimes
+ * as a vendor type longer than the drop zone is wide. Printed as it stands it
+ * runs as one unbroken line. Each entry folds to the short name a reader knows
+ * the format by, duplicates collapse, and the list joins as an English "or".
+ *
+ * Not exported from the package entry point: this is an implementation detail.
+ */
+/**
+ * Names a reader knows a format by, keyed by an extension or a MIME subtype.
+ * Both spellings go through one table, so `.yml` and `application/yaml` fold
+ * into one entry.
+ */
+const ALIASES = {
+    plain: 'txt',
+    jpeg: 'jpg',
+    yml: 'yaml',
+    htm: 'html',
+    tif: 'tiff',
+    'ld+json': 'JSON-LD',
+    msword: 'DOC',
+    'vnd.ms-excel': 'XLS',
+    'vnd.ms-powerpoint': 'PPT',
+    'vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',
+    'vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',
+    'vnd.openxmlformats-officedocument.presentationml.presentation': 'PPTX',
+    'vnd.oasis.opendocument.text': 'ODT',
+    'vnd.oasis.opendocument.spreadsheet': 'ODS',
+};
+/** Whole types whose subtype alone names the wrong format. */
+const TYPES = {
+    'audio/mpeg': 'MP3',
+};
+/** What `type/*` accepts, said as a kind of file rather than a format. */
+const WILDCARDS = {
+    image: 'images',
+    video: 'videos',
+    audio: 'audio',
+    text: 'text files',
+};
+/** Fixed to en-US for the reason `number.ts` gives: server and browser must agree. */
+const OR_LIST = new Intl.ListFormat('en-US', { type: 'disjunction' });
+function alias(format) {
+    return (ALIASES[format] ?? format).toUpperCase();
+}
+function name(entry) {
+    const token = entry.toLowerCase();
+    if (token.startsWith('.'))
+        return alias(token.slice(1));
+    const [type, sub] = token.split('/');
+    if (!sub)
+        return entry;
+    if (sub === '*')
+        return WILDCARDS[type] ?? entry;
+    if (TYPES[token])
+        return TYPES[token];
+    if (ALIASES[sub])
+        return alias(sub);
+    // A vendor type has no short form to derive, so an unknown one stays as
+    // written rather than turning into a guess.
+    if (sub.startsWith('vnd.'))
+        return entry;
+    return alias(sub.replace(/^x-/, '').split('+')[0]);
+}
+/** The `accept` list as a short line, or an empty string when it names nothing. */
+export function describeAccept(accept) {
+    const names = accept
+        .split(',')
+        .map((entry) => entry.trim())
+        .filter(Boolean)
+        .map(name);
+    return OR_LIST.format([...new Set(names)]);
+}

package/dist/internal/aside.d.ts

@@ -0,0 +1,36 @@
+/**
+ * What a split pane remembers per viewer: its width and whether the width is
+ * locked. Browser storage can be absent or throw (a private window, cleared or
+ * blocked site data, a thumbnail capture), so every read and write is guarded
+ * and the pane falls back to its default. A convenience, not state a server
+ * holds.
+ *
+ * The stored value is `{"width": <px>, "locked": <bool>}` under the key the
+ * consumer names, so a reader keeps the width an earlier copy of this pane
+ * wrote under the same key.
+ *
+ * Not exported from the package entry point: this is an implementation detail.
+ */
+export interface AsideBounds {
+    /** The width the pane opens at until somebody drags it. */
+    width: number;
+    min: number;
+    max: number;
+}
+export interface AsidePrefs {
+    width: number;
+    locked: boolean;
+}
+type Reader = Pick<Storage, 'getItem'> | null | undefined;
+type Writer = Pick<Storage, 'setItem'> | null | undefined;
+/**
+ * The page's local storage, or nothing. Reading the global can itself throw
+ * when site data is blocked. Outside a browser it is never read: a server
+ * runtime may define a localStorage of its own, warning on first access or
+ * holding one store that every request would share.
+ */
+export declare function viewerStorage(): Storage | null;
+export declare function clampWidth(bounds: Pick<AsideBounds, 'min' | 'max'>, width: number): number;
+export declare function readAside(storage: Reader, key: string, bounds: AsideBounds): AsidePrefs;
+export declare function writeAside(storage: Writer, key: string, bounds: AsideBounds, prefs: AsidePrefs): void;
+export {};