@cssints/headless 0.5.2 → 0.6.1

package/README.md

@@ -65,7 +65,7 @@ A primitive that has a seam honours an optional `prefs` entry (a `Partial<Prefs>
 - **menu / menubar** — `typeaheadDelayMs` (the typeahead buffer timeout).
 - **tooltip** — `tooltipShowDelayMs` / `tooltipHideDelayMs`, exposed as `showDelayMs()` / `hideDelayMs()` for the host to wire its `setTimeout` from (the spec keeps timers as events).
 
-Everything else **ignores** prefs: accordion, alert, alertdialog, breadcrumb, button, carousel, checkbox, checkbox-group, combobox, dialog-modal, disclosure, feed, grid, link, listbox, meter, player, radio, slider, slider-multithumb, spinbutton, switch, tabs, timeline, toolbar, treegrid, treeview, windowsplitter — they expose no timing / motion / live-region / camera seam. `listbox` / `treeview` / `timeline` typeahead timeouts are host-driven via their reset methods, so they take no delay here either.
+Everything else **ignores** prefs: accordion, alert, alertdialog, breadcrumb, button, carousel, checkbox, checkbox-group, combobox, dialog-modal, disclosure, feed, grid, link, listbox, meter, player, radio, resizable-panels, slider, slider-multithumb, spinbutton, switch, tabs, timeline, toolbar, treegrid, treeview, windowsplitter — they expose no timing / motion / live-region / camera seam. `listbox` / `treeview` / `timeline` typeahead timeouts are host-driven via their reset methods, so they take no delay here either.
 
 `motionDurationMs` is **not consumed**: canvas tweens are tick-driven, not millisecond-driven, and the look layer owns durations. It stays in `Prefs` only so a host's preference record fits the type.
 
@@ -89,12 +89,46 @@ Membership, sizes and z-order are **not modelled** in `pointer.qnt` (its node se
 
 **Nested canvases** are two instances the host composes: a `#canvas` node holds a second `createCanvas`, and the inner viewport stops propagation of its own pointer, wheel and key events. The innermost canvas under the pointer owns the event, so a press or zoom inside it never starts an outer gesture or moves the outer camera. A nested canvas is a single tab stop in its parent.
 
+## Resizable panels
+
+`createResizablePanels` is a group of N panes and N-1 separators: react-resizable-panels' layout on the APG window splitter's keyboard. Its behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt` — not an APG pattern, so it lives under `patterns/` — and the DOM is checked against it by the differential walk. The spec is the three-pane instance (10/80 bounds, 10% steps, pane 0 collapsible at 0); the primitive takes N panes and any bounds.
+
+**The contract.** Sizes are percentages of the group and always sum to 100. Each pane has `min` / `max`; a `collapsible` pane sits at `collapsedSize` (0) while collapsed. A move — an arrow, Home/End, a drag — changes only the two panes around the separator, clamped by both bounds. Collapsing hands the pane's space to the nearest pane that can take it and cascades outward; restoring takes it back in the same order, so a restore always returns the remembered size.
+
+**The separator is the widget**: `role=separator`, `tabindex=0`, `aria-orientation`, `aria-valuenow` = the size of the pane it resizes, `aria-valuemin` / `-max` that pane's bounds, `aria-controls` it. Arrows move by `step` (10%), Home/End jump the pair to its bounds, Enter collapses and restores. A separator next to a collapsed pane is inert (only Enter restores).
+
+**The drag is snapshot + delta**: pointerdown remembers the layout, every move re-solves from it, so dragging back past a clamp recovers exactly. It uses pointer capture and ends on pointerup / pointercancel; a host write of `sizes` ends it too. Keyboard input is a no-op while a drag runs.
+
+```tsx
+const panels = createResizablePanels({
+  panes: [{ label: "Sidebar", collapsible: true }, { label: "Content" }, { label: "Inspector" }],
+  defaultSizes: [20, 40, 40],
+  storageKey: "app-layout",
+  onSizesChange: (sizes) => save(sizes), // ignored while uncontrolled
+});
+
+<div {...panels.groupProps} style={{ display: "flex" }}>
+  {[0, 1, 2].map((index) => (
+    <>
+      <div {...panels.paneProps(index)} style={{ flex: `${panels.sizes()[index]}%` }}>
+        …
+      </div>
+      {index < 2 && <div {...panels.separatorProps(index)} />}
+    </>
+  ))}
+</div>;
+```
+
+Controlled is `sizes` + `onSizesChange` (the request), like every other primitive. `storageKey` persists the layout in localStorage — host storage, so the key belongs to the host's namespace.
+
+Left to the host: pane bounds in pixels (percent only), nested groups, and F6 (with three panes a Tab is enough). Not modelled: react-resizable-panels' collapse-on-drag threshold (a pane collapses on Enter or a host write, never by dragging through MIN) and restoring a pane that was mounted already collapsed (it returns to its own `min`).
+
 ## Commands
 
 ```sh
 cd packages/headless
 bun run test       # vp test run: vitest browser mode, real Chromium (playwright; needs the browser installed: bunx playwright install chromium)
-bun run typecheck  # tsc-rs
+bun run typecheck  # effect-tsrs
 bun run build      # vp pack: dist/ (ESM and declarations; solid-js is a peer)
 ```
 
@@ -104,7 +138,7 @@ The specs, bridges and scenarios the tests replay are [`@cssints/apg-specs`](../
 
 ## Status
 
-Not on npm yet: the package is in the Changesets `ignore` list until it joins the `fixed` group (RELEASING.md). Its manifest follows the other packages (`development` condition on `src`, `dist` for consumers, `publishConfig.directory`).
+Published with the Changesets `fixed` group (one version with the other packages, RELEASING.md). Its manifest follows the other packages (`development` condition on `src`, `dist` for consumers, `publishConfig.directory`).
 
 Solid 2 reminders: setters apply on the microtask flush (the DOM driver waits a frame after each step); pass props objects/getters, never destructure options.
 

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import { Accessor } from "solid-js";
-//#region src/canvas-math.d.ts
 /**
  * The fixed-point math of the canvas, copied from the Quint specs. Integers only, power-of-two
  * denominators, every intermediate below 2^53, so doubles are exact and the DOM implementation can
@@ -49,8 +48,6 @@ interface SnapContext extends SnapNode {
 type SnapCandidates = (context: SnapContext) => readonly number[];
 /** The default policy and the one `specs/canvas/pointer.qnt` models: every `GRID` units. */
 export declare const gridCandidates: SnapCandidates;
-//#endregion
-//#region src/prefs.d.ts
 /**
  * The user preferences a primitive honours. The host resolves them from
  * wherever it keeps them and injects a `Partial<Prefs>` per primitive;
@@ -74,8 +71,6 @@ export interface Prefs {
 export declare const DEFAULT_PREFS: Prefs;
 /** Merge an injected partial with the defaults; never mutates the input. */
 export declare const withPrefs: (partial?: Partial<Prefs>) => Prefs;
-//#endregion
-//#region src/canvas.d.ts
 /**
  * Headless infinite canvas: camera, selection and node-move state plus attribute / prop objects
  * for a viewport, a camera layer, the nodes and a live region. No elements, no styling beyond the
@@ -376,8 +371,6 @@ interface Canvas {
   readonly removeNodes: (ids: readonly string[]) => void;
 }
 export declare const createCanvas: (options: CanvasOptions) => Canvas;
-//#endregion
-//#region src/disclosure.d.ts
 /**
  * Options are read lazily: pass a component's `props` (or an object with
  * getters), never destructured values, so `disabled` stays reactive.
@@ -431,8 +424,6 @@ interface Disclosure {
  * pass `value` + `onValueChange` to own the state.
  */
 export declare const createDisclosure: (options?: DisclosureOptions) => Disclosure;
-//#endregion
-//#region src/player.d.ts
 /**
  * A playback engine the primitive drives. Mediabunny is one; the primitive
  * never imports a media library (`@cssints/headless` stays `solid-js`-only).
@@ -556,8 +547,6 @@ interface Player {
  * no elements live here.
  */
 export declare const createPlayer: (options: PlayerOptions) => Player;
-//#endregion
-//#region src/accordion.d.ts
 /**
  * Options are read lazily (getters) so `multiple` / `disabled` stay reactive;
  * pass a component's `props`, never destructured values.
@@ -641,8 +630,6 @@ export interface Accordion {
  * while uncontrolled.
  */
 export declare const createAccordion: (options?: AccordionOptions) => Accordion;
-//#endregion
-//#region src/alert.d.ts
 export interface AlertOptions {
   /** Rendered at mount; `undefined` starts with no live region. */
   readonly message?: string | undefined;
@@ -675,8 +662,6 @@ export interface Alert {
  * region is live; the primitive keeps the region mounted and unhides it.
  */
 export declare const createAlert: (options?: AlertOptions) => Alert;
-//#endregion
-//#region src/alertdialog.d.ts
 export interface AlertDialogOptions {
   /** Controlled: the host owns the open state and this is the only thing that changes it. */
   readonly value?: boolean | undefined;
@@ -765,8 +750,6 @@ declare const YES_POS = 2;
  * open state through an effect, so a rejected request leaves them untouched.
  */
 export declare const createAlertDialog: (options?: AlertDialogOptions) => AlertDialog;
-//#endregion
-//#region src/breadcrumb.d.ts
 export interface BreadcrumbItem {
   readonly label: string;
   readonly href?: string | undefined;
@@ -813,8 +796,6 @@ export interface Breadcrumb {
  * markup; the navigation landmark is a UA/AT concern).
  */
 export declare const createBreadcrumb: (options: BreadcrumbOptions) => Breadcrumb;
-//#endregion
-//#region src/button.d.ts
 export interface ButtonOptions {
   /** A toggle button carries `aria-pressed`; a command button does not. */
   readonly isToggle?: boolean;
@@ -862,8 +843,6 @@ export interface Button {
  * uncontrolled. A command button's activation never carries a value.
  */
 export declare const createButton: (options?: ButtonOptions) => Button;
-//#endregion
-//#region src/carousel.d.ts
 export type CarouselRole = "region" | "group";
 /**
  * Options are read lazily (getters); pass a component's `props`.
@@ -995,8 +974,6 @@ export interface Carousel {
  * (and `prefers-reduced-motion`) in the consumer.
  */
 export declare const createCarousel: (options?: CarouselOptions) => Carousel;
-//#endregion
-//#region src/checkbox.d.ts
 export type CheckboxState = "true" | "false" | "mixed";
 export interface CheckboxOptions {
   /** Controlled: the host owns the value and this is the only thing that changes it. */
@@ -1053,8 +1030,6 @@ export interface Checkbox {
  * pass `value` + `onValueChange` to own the state.
  */
 export declare const createCheckbox: (options?: CheckboxOptions) => Checkbox;
-//#endregion
-//#region src/checkbox-group.d.ts
 export type CheckboxGroupFocus = "none" | "parent" | "c0" | "c1" | "c2";
 export type ParentChecked = "true" | "false" | "mixed";
 export interface CheckboxGroupOptions<T = unknown> {
@@ -1131,8 +1106,6 @@ export interface CheckboxGroup<T = unknown> {
  * Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge.
  */
 export declare const createCheckboxGroup: <T = unknown>(options: CheckboxGroupOptions<T>) => CheckboxGroup<T>;
-//#endregion
-//#region src/combobox.d.ts
 /**
  * APG combobox (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/): state plus
  * getter-backed attribute objects for a listbox popup. No elements, no styling.
@@ -1253,8 +1226,6 @@ export interface ComboboxOptions {
   readonly onFocusRelease?: () => void;
 }
 export declare const createCombobox: (options: ComboboxOptions) => Combobox;
-//#endregion
-//#region src/dialog-modal.d.ts
 export type DialogRole = "dialog" | "alertdialog";
 export interface DialogModalOptions {
   /** Controlled: the host owns the open state and this is the only thing that changes it. */
@@ -1323,8 +1294,6 @@ export interface DialogModal {
  * are requests the host may ignore.
  */
 export declare const createDialogModal: (options?: DialogModalOptions) => DialogModal;
-//#endregion
-//#region src/feed.d.ts
 /**
  * Options are read lazily (getters); pass a component's `props`.
  */
@@ -1412,8 +1381,6 @@ export interface Feed {
  * request; `loadStart` / `loadFail` are adapter lifecycle events.
  */
 export declare const createFeed: (options?: FeedOptions) => Feed;
-//#endregion
-//#region src/grid.d.ts
 /**
  * APG grid primitive on Solid 2: roving focus, 2-D navigation, edit mode, a
  * cell/row/column selection rectangle and sortable column headers. State plus
@@ -1584,8 +1551,6 @@ export declare const packSort: (column: number, dir: GridSortDirection) => numbe
  * snapshot); `rows`/`cols`/`page` are captured once.
  */
 export declare const createGrid: (options?: GridOptions) => Grid;
-//#endregion
-//#region src/link.d.ts
 export interface LinkOptions {
   readonly href?: string | undefined;
   /** Render a native `<a href>` (the default when `href` is set). */
@@ -1622,8 +1587,6 @@ export interface Link {
  * cause browsers to enhance the element". Platform: native.
  */
 export declare const createLink: (options?: LinkOptions) => Link;
-//#endregion
-//#region src/listbox.d.ts
 export type ListboxSelectionMode = "single" | "multiple" | "none";
 export interface ListboxItem {
   readonly id: string;
@@ -1729,8 +1692,6 @@ export interface Listbox {
  * move is a request the host may ignore.
  */
 export declare const createListbox: (options: ListboxOptions) => Listbox;
-//#endregion
-//#region src/menu.d.ts
 /**
  * APG menu family on Solid 2: `createMenu` (menu button + the checkable /
  * menuitemcheckbox / menuitemradio capability) and `createMenubar` (roving
@@ -1953,8 +1914,6 @@ export interface Menubar {
   };
 }
 export declare const createMenubar: (options: MenubarOptions) => Menubar;
-//#endregion
-//#region src/meter.d.ts
 /**
  * A controlled numeric display; the consumer feeds `value`/`min`/`max`.
  * `valueText` overrides the default percentage `aria-valuetext`.
@@ -1992,8 +1951,6 @@ export interface Meter {
  * this primitive only derives the ARIA contract; no state machine runs here.
  */
 export declare const createMeter: (options?: MeterOptions) => Meter;
-//#endregion
-//#region src/radio.d.ts
 export type RadioFlavor = "roving" | "activedescendant";
 export interface RadioGroupOptions<T = unknown> {
   /** Radio values, one per radio; the observable `value` is the checked one. */
@@ -2075,8 +2032,99 @@ export interface RadioGroup<T = unknown> {
  * callback, which `createControllable` does not expose.
  */
 export declare const createRadioGroup: <T = unknown>(options: RadioGroupOptions<T>) => RadioGroup<T>;
-//#endregion
-//#region src/slider.d.ts
+export type PanelsOrientation = "vertical" | "horizontal";
+/** One pane of the group. Sizes are percentages of the group (0..100). */
+export interface ResizablePaneOptions {
+  readonly id?: string;
+  /** Smallest expanded size, in percent. */
+  readonly min?: number;
+  /** Largest size, in percent. */
+  readonly max?: number;
+  /** The uncontrolled start; defaults to an equal split. */
+  readonly defaultSize?: number;
+  /** Collapses to `collapsedSize` on Enter and restores the remembered size. */
+  readonly collapsible?: boolean;
+  readonly collapsedSize?: number;
+  /** Accessible name fragment: the separator becomes "Resize <label>". */
+  readonly label?: string;
+}
+/** Options are read lazily: pass an object with getters, never destructured values. */
+export interface ResizablePanelsOptions {
+  readonly panes: ReadonlyArray<ResizablePaneOptions>;
+  readonly orientation?: PanelsOrientation;
+  /** Controlled: the host owns the layout. A new array per change. */
+  readonly sizes?: ReadonlyArray<number> | undefined;
+  /** The uncontrolled start; ignored while `sizes` is set. */
+  readonly defaultSizes?: ReadonlyArray<number>;
+  /** Keyboard step, in percent. */
+  readonly step?: number;
+  /** Base for the generated group / pane / separator ids. */
+  readonly id?: string;
+  /** Accessible name of the group. */
+  readonly label?: string | undefined;
+  /** Persist the layout in localStorage under this key (host storage, not modelled). */
+  readonly storageKey?: string | undefined;
+  /** A request to change the layout the host may ignore. */
+  readonly onSizesChange?: (sizes: ReadonlyArray<number>) => void;
+}
+export interface ResizablePanelsGroupProps {
+  readonly role: "group";
+  readonly "aria-label": string | undefined;
+}
+export interface ResizablePaneProps {
+  readonly id: string;
+}
+/** Spread onto the focusable `role=separator` bar between pane `index` and `index + 1`. */
+export interface ResizableSeparatorProps {
+  readonly id: string;
+  readonly role: "separator";
+  readonly "aria-orientation": PanelsOrientation;
+  readonly "aria-valuenow": number;
+  readonly "aria-valuemin": number;
+  readonly "aria-valuemax": number;
+  /** The pane this separator resizes (the one on its left). */
+  readonly "aria-controls": string;
+  readonly "aria-label": string;
+  readonly tabindex: 0;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
+  readonly onFocus: () => void;
+  readonly onBlur: () => void;
+  readonly onPointerDown: (event: PointerEvent) => void;
+  readonly onPointerMove: (event: PointerEvent) => void;
+  readonly onPointerUp: (event: PointerEvent) => void;
+  readonly onPointerCancel: (event: PointerEvent) => void;
+}
+export interface ResizablePanels {
+  /** The committed layout, in percent; always sums to 100. */
+  readonly sizes: Accessor<ReadonlyArray<number>>;
+  readonly collapsed: (index: number) => boolean;
+  /** The separator being dragged, or `null`. */
+  readonly resizing: Accessor<number | null>;
+  readonly focusSeparator: Accessor<number | null>;
+  readonly setFocusSeparator: (index: number | null) => void;
+  readonly keyDown: (index: number, key: string) => void;
+  readonly groupProps: ResizablePanelsGroupProps;
+  readonly paneProps: (index: number) => ResizablePaneProps;
+  readonly separatorProps: (index: number) => ResizableSeparatorProps;
+}
+/**
+ * A group of N panes and N-1 separators, react-resizable-panels' model on the
+ * APG window splitter's keyboard: sizes in percent of the group, always summing
+ * to 100, each pane within `min..max`, a collapsible pane landing on
+ * `collapsedSize`. The separator is the focusable widget (`role=separator`,
+ * its `aria-valuenow` is the pane on its left); arrows/Home/End move the pair
+ * around a separator and Enter collapses / restores, all as requests.
+ *
+ * A move only ever changes the separator's two neighbours, clamped by both
+ * bounds. Collapsing hands the pane's space to the nearest pane that can take
+ * it and cascades outward; restoring takes it back in the same order. The drag
+ * is snapshot + delta: pointerdown remembers the layout, every move re-solves
+ * from it, so dragging back past a clamp recovers exactly.
+ *
+ * Behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt`; the
+ * DOM is checked against it by the differential walk.
+ */
+export declare const createResizablePanels: (options: ResizablePanelsOptions) => ResizablePanels;
 export type SliderOrientation = "horizontal" | "vertical";
 export type SliderDirection = "ltr" | "rtl";
 export interface SliderOptions {
@@ -2148,8 +2196,6 @@ export interface Slider {
  * deliberately only fixes a discrete rail press.
  */
 export declare const createSlider: (options?: SliderOptions) => Slider;
-//#endregion
-//#region src/slider-multithumb.d.ts
 export type SliderMultiThumbIndex = 0 | 1;
 export interface SliderMultiThumbOptions {
   readonly min?: number;
@@ -2217,8 +2263,6 @@ export interface SliderMultiThumb {
  * omits them (the event names the thumb).
  */
 export declare const createSliderMultiThumb: (options?: SliderMultiThumbOptions) => SliderMultiThumb;
-//#endregion
-//#region src/spinbutton.d.ts
 export interface SpinbuttonOptions {
   readonly min?: number;
   readonly max?: number;
@@ -2307,8 +2351,6 @@ export interface Spinbutton {
  * APG text.
  */
 export declare const createSpinbutton: (options?: SpinbuttonOptions) => Spinbutton;
-//#endregion
-//#region src/switch.d.ts
 export interface SwitchOptions {
   /** Controlled: the host owns the state and this is the only thing that changes it. */
   readonly value?: boolean | undefined;
@@ -2363,8 +2405,6 @@ export interface Switch {
  * pass `value` + `onValueChange` to own the state.
  */
 export declare const createSwitch: (options?: SwitchOptions) => Switch;
-//#endregion
-//#region src/tabs.d.ts
 export type TabsOrientation = "horizontal" | "vertical";
 export type TabsActivation = "automatic" | "manual";
 /**
@@ -2449,8 +2489,6 @@ export interface Tabs {
  * Programmatic methods (`select`, `setSelected`, `keyDown`) are requests too.
  */
 export declare const createTabs: (options?: TabsOptions) => Tabs;
-//#endregion
-//#region src/timeline.d.ts
 /**
  * APG has no waterfall pattern. This is the span timeline the o11y dashboard
  * needs: spans laid out on a shared tick axis with nesting/indentation, a
@@ -2558,8 +2596,6 @@ export interface Timeline {
  * reactive.
  */
 export declare const createTimeline: (options?: TimelineOptions) => Timeline;
-//#endregion
-//#region src/toolbar.d.ts
 /**
  * APG Toolbar on Solid 2: state plus attribute objects, no elements, no
  * styling. A faithful transcription of `specs/apg/toolbar.qnt`.
@@ -2631,8 +2667,6 @@ export interface Toolbar {
   readonly itemProps: (index: number) => ToolbarItemProps;
 }
 export declare const createToolbar: (options: ToolbarOptions) => Toolbar;
-//#endregion
-//#region src/tooltip.d.ts
 export interface TooltipTriggerInput {
   readonly id?: string;
   /** Id of this trigger's tooltip element (needed for `aria-describedby`). */
@@ -2731,8 +2765,6 @@ export interface TooltipGroup {
  * gated, so a rejected request leaves the visible tooltip untouched.
  */
 export declare const createTooltipGroup: (options: TooltipGroupOptions) => TooltipGroup;
-//#endregion
-//#region src/treegrid.d.ts
 /**
  * APG treegrid primitive on Solid 2: a fixed tree of rows, row/cell roving focus
  * across the three APG navigation models, expansion and row selection. State plus
@@ -2824,8 +2856,6 @@ export declare const treegridCellPart: (row: number, col: number) => string;
 export declare const createTreegrid: (options?: TreegridOptions) => Treegrid;
 /** The `data-part` target the treegrid roving tab stop should focus. */
 export declare const treegridFocusTargetPart: (grid: Treegrid) => string | null;
-//#endregion
-//#region src/treeview.d.ts
 /** A tree node: `parent` is 0 for a root; order in `nodes` is document order. */
 export interface TreeviewNode {
   readonly id: number;
@@ -2920,8 +2950,6 @@ export interface Treeview {
  * explicit `resetTypeahead` method; add a timer when a consumer wants one.
  */
 export declare const createTreeview: (options?: TreeviewOptions) => Treeview;
-//#endregion
-//#region src/windowsplitter.d.ts
 export type SplitterOrientation = "vertical" | "horizontal";
 export type SplitterFocus = "none" | "splitter" | "primary" | "secondary";
 /** Options are read lazily: pass an object with getters, never destructured values. */
@@ -2999,8 +3027,6 @@ export interface WindowSplitter {
  * `collapsed` is derived from the controlled value plus the last request.
  */
 export declare const createWindowSplitter: (options?: WindowSplitterOptions) => WindowSplitter;
-//#endregion
-//#region src/listbox-rearrangeable.d.ts
 export type RearrangeableList = "a" | "b";
 export interface RearrangeableListboxOptions {
   /** Option labels; the option id is the index, and every option starts in list A. */
@@ -3064,5 +3090,4 @@ export interface RearrangeableListbox {
  * host that holds the value moves nothing.
  */
 export declare const createRearrangeableListbox: (options: RearrangeableListboxOptions) => RearrangeableListbox;
-//#endregion
 export { type Canvas, type CanvasGoal, type CanvasLayerProps, type CanvasLiveRegionProps, type CanvasMessages, type CanvasMode, type CanvasMove, type CanvasNodeGeometry, type CanvasNodeInput, type CanvasNodeProps, type CanvasNodeRole, type CanvasOptions, type CanvasSnapshot, type CanvasViewportProps, type Disclosure, type DisclosureOptions, type DisclosurePanelProps, type DisclosureTriggerProps, type MarqueeMode, NO_POS, type PlaybackAdapter, type PlaybackAdapterEvent, type Player, type PlayerButtonProps, type PlayerOptions, type PlayerPlayProps, type PlayerSeekProps, type PlayerStage, type PlayerSurfaceProps, type PlayerToggleProps, type PointerInput, type SnapAxis, type SnapCandidates, type SnapContext, YES_POS };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createEffect, createMemo, createRoot, createSignal, createUniqueId, getOwner, onCleanup, onSettled, runWithOwner, untrack } from "solid-js";
-//#region src/canvas-math.ts
+// src/canvas-math.ts
 /**
 * The fixed-point math of the canvas, copied from the Quint specs. Integers only, power-of-two
 * denominators, every intermediate below 2^53, so doubles are exact and the DOM implementation can
@@ -108,8 +108,7 @@ const snapNudge = (v, on, zf, nearest) => (snapTarget(v, on, zf, nearest) ?? v)
 /** Live drag delta on one axis; `base` is the dragged node's committed position on it. */
 const liveDD = (w, g, base, on, zf, nearest) => rawD(w, g) + snapNudge(base + rawD(w, g), on, zf, nearest);
 const clampPos = (value, extent) => clampI(value, -1e6, WORLD_BOUND - extent);
-//#endregion
-//#region src/prefs.ts
+// src/prefs.ts
 /** Today's behaviour, used for every pref the host does not inject. */
 const DEFAULT_PREFS = {
 	motion: "full",
@@ -125,13 +124,12 @@ const withPrefs = (partial) => ({
 	...DEFAULT_PREFS,
 	...partial
 });
-//#endregion
-//#region src/canvas.ts
+// src/canvas.ts
 const DEFAULT_VIEWPORT = {
 	width: 800,
 	height: 600
 };
-const DEFAULT_STEP = 10;
+const DEFAULT_STEP$1 = 10;
 const DEFAULT_SHIFT_MULTIPLIER = 5;
 const PRIMARY_BUTTON = 0;
 const DEFAULT_MESSAGES = {
@@ -761,7 +759,7 @@ const createCanvas = (options) => {
 		const arrow = ARROWS.get(event.key);
 		if (arrow !== void 0) {
 			event.preventDefault();
-			const step = (options.keyboardStep ?? DEFAULT_STEP) * (event.shiftKey ? options.keyboardShiftMultiplier ?? DEFAULT_SHIFT_MULTIPLIER : 1);
+			const step = (options.keyboardStep ?? DEFAULT_STEP$1) * (event.shiftKey ? options.keyboardShiftMultiplier ?? DEFAULT_SHIFT_MULTIPLIER : 1);
 			moveFrom(index, arrow[0] * step, arrow[1] * step, arrow[2]);
 		} else if (event.key === "Enter") {
 			event.preventDefault();
@@ -967,8 +965,7 @@ const createCanvas = (options) => {
 		removeNodes
 	};
 };
-//#endregion
-//#region src/controllable.ts
+// src/controllable.ts
 /**
 * The request/commit split (map ticket `rt1p`): `request` is what a user
 * event does. A change of intent calls `onChange`; uncontrolled it also
@@ -982,8 +979,9 @@ const createControllable = (options) => {
 		version();
 		return options.value() ?? local;
 	};
+	const same = options.same ?? Object.is;
 	const request = (next) => {
-		if (next === current()) return;
+		if (same(next, current())) return;
 		if (options.value() === void 0) {
 			local = next;
 			setVersion((count) => count + 1);
@@ -992,8 +990,7 @@ const createControllable = (options) => {
 	};
 	return [current, request];
 };
-//#endregion
-//#region src/disclosure.ts
+// src/disclosure.ts
 /**
 * APG Disclosure (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/):
 * state plus attribute objects for a trigger and a panel. No styling, no
@@ -1041,8 +1038,7 @@ const createDisclosure = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/player.ts
+// src/player.ts
 const RATE_PERCENTS = [
 	50,
 	100,
@@ -1052,7 +1048,7 @@ const RATE_PERCENTS = [
 const SURFACE_SEEK_SECONDS = 5;
 const SEEK_STEP_SECONDS = 1;
 const SEEK_PAGE_SECONDS = 15;
-const clamp$1 = (value, max) => value < 0 ? 0 : value > max ? max : value;
+const clamp$2 = (value, max) => value < 0 ? 0 : value > max ? max : value;
 const mss = (seconds) => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds) % 60).padStart(2, "0")}`;
 /**
 * APG media player primitive on Solid 2: playback state + attribute objects.
@@ -1089,7 +1085,7 @@ const createPlayer = (options) => {
 	const isActive = () => stage() === "playing" || stage() === "buffering";
 	const canPlay = () => stage() === "ready" || stage() === "paused" || stage() === "ended" || stage() === "buffering";
 	const moveTo = (seconds) => {
-		setPosition(clamp$1(seconds, duration()));
+		setPosition(clamp$2(seconds, duration()));
 	};
 	const play = () => {
 		if (!canPlay()) return;
@@ -1110,14 +1106,14 @@ const createPlayer = (options) => {
 	};
 	const commit = (seconds) => {
 		if (!known()) return;
-		const target = clamp$1(seconds, duration());
+		const target = clamp$2(seconds, duration());
 		if (stage() === "ended") setStage("paused");
 		moveTo(target);
 		options.onSeek?.(target);
 		options.adapter.seek(target);
 	};
 	const setVolume = (value) => {
-		requestVolume(clamp$1(value, 100));
+		requestVolume(clamp$2(value, 100));
 	};
 	const toggleMute = () => {
 		requestMuted(!muted());
@@ -1296,8 +1292,7 @@ const createPlayer = (options) => {
 		}
 	};
 };
-//#endregion
-//#region src/accordion.ts
+// src/accordion.ts
 const HEADING_LEVELS = 6;
 const count = (expanded) => expanded.filter(Boolean).length;
 /** Re-establish the mode's constraints, exactly as the spec's `normExpanded`. */
@@ -1408,8 +1403,7 @@ const createAccordion = (options = {}) => {
 		})
 	};
 };
-//#endregion
-//#region src/alert.ts
+// src/alert.ts
 /**
 * APG Alert (https://www.w3.org/WAI/ARIA/apg/patterns/alert/): a brief message
 * in a `role=alert` live region. Platform: native live-region markup
@@ -1449,8 +1443,7 @@ const createAlert = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/alertdialog.ts
+// src/alertdialog.ts
 const NO_POS = 1;
 const YES_POS = 2;
 /**
@@ -1683,8 +1676,7 @@ const createAlertDialog = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/breadcrumb.ts
+// src/breadcrumb.ts
 /**
 * APG Breadcrumb (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): a trail
 * of links in hierarchical order, the current page LAST and marked
@@ -1730,8 +1722,7 @@ const createBreadcrumb = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/button.ts
+// src/button.ts
 /**
 * APG Button (https://www.w3.org/WAI/ARIA/apg/patterns/button/): a command
 * button and (with `isToggle`) a toggle button exposing `aria-pressed`.
@@ -1775,8 +1766,7 @@ const createButton = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/carousel.ts
+// src/carousel.ts
 /**
 * APG Carousel (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/): state plus
 * prop objects for the rotation/prev/next controls, slides and the optional
@@ -1966,8 +1956,7 @@ const createCarousel = (options = {}) => {
 		})
 	};
 };
-//#endregion
-//#region src/checkbox.ts
+// src/checkbox.ts
 /**
 * APG Checkbox (https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/): one
 * dual-state, optionally tri-state, checkbox. Platform choice (packages/headless/docs/
@@ -2062,8 +2051,7 @@ const createCheckbox = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/checkbox-group.ts
+// src/checkbox-group.ts
 const CHILDREN = [
 	"c0",
 	"c1",
@@ -2231,8 +2219,7 @@ const createCheckboxGroup = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/combobox.ts
+// src/combobox.ts
 const PAGE_SIZE = 4;
 const toOption = (input) => typeof input === "string" ? {
 	value: input,
@@ -2520,8 +2507,7 @@ const createCombobox = (options) => {
 		}
 	};
 };
-//#endregion
-//#region src/dialog-modal.ts
+// src/dialog-modal.ts
 /**
 * APG Dialog (Modal) on Solid 2. `modal` adds `aria-modal`. Focus moves into
 * the dialog on open and is the host's to restore on close (the fixture does,
@@ -2598,8 +2584,7 @@ const createDialogModal = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/feed.ts
+// src/feed.ts
 /**
 * APG Feed (https://www.w3.org/WAI/ARIA/apg/patterns/feed/): state plus prop
 * objects for the feed container, its articles and the two outside focus
@@ -2734,8 +2719,7 @@ const createFeed = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/grid.ts
+// src/grid.ts
 const GRID_KEYS = /* @__PURE__ */ new Set([
 	"ArrowRight",
 	"ArrowLeft",
@@ -3144,8 +3128,7 @@ const createGrid = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/link.ts
+// src/link.ts
 /**
 * APG Link (https://www.w3.org/WAI/ARIA/apg/patterns/link/): a native `<a href>`
 * brings focus and activation for free; a custom element takes `role=link` and
@@ -3194,8 +3177,7 @@ const createLink = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/listbox.ts
+// src/listbox.ts
 const normalizeSelected = (indices, count) => [...new Set(indices)].filter((index) => index >= 0 && index < count).sort((a, b) => a - b);
 const sameSelection = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
 /**
@@ -3542,8 +3524,7 @@ const createListbox = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/menu.ts
+// src/menu.ts
 const toItem = (input, index, base) => {
 	if (typeof input === "string") return {
 		label: input,
@@ -4247,9 +4228,8 @@ const createMenubar = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/meter.ts
-const clamp = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
+// src/meter.ts
+const clamp$1 = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
 /**
 * APG Meter (https://www.w3.org/WAI/ARIA/apg/patterns/meter/): a graphical
 * display of a numeric value within a range. Platform: native (`<meter>`), so
@@ -4262,7 +4242,7 @@ const createMeter = (options = {}) => {
 	const value = () => {
 		const lo = min();
 		const hi = max();
-		return hi <= lo ? lo : clamp(options.value ?? 0, lo, hi);
+		return hi <= lo ? lo : clamp$1(options.value ?? 0, lo, hi);
 	};
 	const percent = () => {
 		const width = span();
@@ -4296,8 +4276,7 @@ const createMeter = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/radio.ts
+// src/radio.ts
 /**
 * APG Radio Group (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): a
 * `radiogroup` with `role=radio` items. Platform choice (packages/headless/docs/
@@ -4483,8 +4462,289 @@ const createRadioGroup = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/slider.ts
+// src/resizable-panels.ts
+const DEFAULT_MIN = 10;
+const DEFAULT_MAX = 80;
+const DEFAULT_STEP = 10;
+const FULL = 100;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** Percentages are reported at a hundredth: a pointer delta is never exact. */
+const round2 = (value) => Math.round(value * 100) / 100;
+const sameSizes = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+const KEY_TAGS$1 = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"Enter"
+]);
+const capture = (element, pointerId) => {
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+};
+const release = (element, pointerId) => {
+	try {
+		element.releasePointerCapture(pointerId);
+	} catch {}
+};
+const readStored = (key, count) => {
+	if (typeof localStorage === "undefined") return;
+	try {
+		const raw = localStorage.getItem(key);
+		if (raw === null) return;
+		const parsed = JSON.parse(raw);
+		if (Array.isArray(parsed) && parsed.length === count && parsed.every((value) => typeof value === "number" && Number.isFinite(value))) return parsed;
+	} catch {}
+};
+const writeStored = (key, sizes) => {
+	if (typeof localStorage === "undefined") return;
+	try {
+		localStorage.setItem(key, JSON.stringify(sizes));
+	} catch {}
+};
+/**
+* A group of N panes and N-1 separators, react-resizable-panels' model on the
+* APG window splitter's keyboard: sizes in percent of the group, always summing
+* to 100, each pane within `min..max`, a collapsible pane landing on
+* `collapsedSize`. The separator is the focusable widget (`role=separator`,
+* its `aria-valuenow` is the pane on its left); arrows/Home/End move the pair
+* around a separator and Enter collapses / restores, all as requests.
+*
+* A move only ever changes the separator's two neighbours, clamped by both
+* bounds. Collapsing hands the pane's space to the nearest pane that can take
+* it and cascades outward; restoring takes it back in the same order. The drag
+* is snapshot + delta: pointerdown remembers the layout, every move re-solves
+* from it, so dragging back past a clamp recovers exactly.
+*
+* Behaviour is `packages/apg-specs/specs/patterns/resizable-panels.qnt`; the
+* DOM is checked against it by the differential walk.
+*/
+const createResizablePanels = (options) => {
+	const panes = () => options.panes;
+	const count = () => panes().length;
+	const orientation = () => options.orientation ?? "vertical";
+	const step = () => options.step ?? DEFAULT_STEP;
+	const base = options.id ?? createUniqueId();
+	const paneId = (index) => panes()[index]?.id ?? `${base}-pane-${index}`;
+	const collapsedSize = (index) => panes()[index]?.collapsible === true ? panes()[index]?.collapsedSize ?? 0 : 0;
+	/** The smallest expanded size (a move never collapses through it). */
+	const minOf = (index) => panes()[index]?.min ?? DEFAULT_MIN;
+	/** The smallest committed size (a collapsible pane may sit at collapsedSize). */
+	const lowOf = (index) => panes()[index]?.collapsible === true ? collapsedSize(index) : minOf(index);
+	const highOf = (index) => panes()[index]?.max ?? DEFAULT_MAX;
+	/** Clamp every pane, then push the residual into the panes in order. */
+	const fit = (raw) => {
+		const next = panes().map((_, index) => clamp(round2(raw[index] ?? FULL / Math.max(count(), 1)), lowOf(index), highOf(index)));
+		let residual = round2(FULL - next.reduce((sum, value) => sum + value, 0));
+		for (let index = 0; index < next.length && residual !== 0; index += 1) {
+			const room = residual > 0 ? highOf(index) - (next[index] ?? 0) : (next[index] ?? 0) - lowOf(index);
+			const move = residual > 0 ? Math.min(residual, room) : Math.max(residual, -room);
+			next[index] = round2((next[index] ?? 0) + move);
+			residual = round2(residual - move);
+		}
+		return next;
+	};
+	/** Move `amount` percent into pane `index` (negative: out of it), taking from or
+	* giving to its neighbours nearest-first (right, then left), each within bounds. */
+	const shift = (sizes, index, amount) => {
+		const next = [...sizes];
+		let left = round2(amount);
+		const order = [];
+		for (let other = index + 1; other < next.length; other += 1) order.push(other);
+		for (let other = index - 1; other >= 0; other -= 1) order.push(other);
+		for (const other of order) {
+			if (left === 0) break;
+			const value = next[other] ?? 0;
+			const room = left > 0 ? Math.max(0, value - minOf(other)) : Math.max(0, highOf(other) - value);
+			const move = left > 0 ? Math.min(left, room) : Math.max(left, -room);
+			next[other] = round2(value - move);
+			left = round2(left - move);
+		}
+		next[index] = round2((next[index] ?? 0) + (round2(amount) - left));
+		return next;
+	};
+	/** Move the boundary between pane `index` and `index + 1` by `delta`. */
+	const movePair = (sizes, index, delta) => {
+		const a = sizes[index] ?? 0;
+		const b = sizes[index + 1] ?? 0;
+		const low = Math.max(minOf(index), round2(a + b - highOf(index + 1)));
+		const high = Math.min(highOf(index), round2(a + b - minOf(index + 1)));
+		const nextA = round2(clamp(a + delta, low, high));
+		const next = [...sizes];
+		next[index] = nextA;
+		next[index + 1] = round2(a + b - nextA);
+		return next;
+	};
+	const initialSizes = () => {
+		const stored = options.storageKey === void 0 ? void 0 : readStored(options.storageKey, count());
+		return fit(stored ?? options.defaultSizes ?? panes().map((pane) => pane.defaultSize ?? round2(FULL / Math.max(count(), 1))));
+	};
+	const start = initialSizes();
+	const [sizes, request] = createControllable({
+		value: () => options.sizes,
+		initial: start,
+		onChange: () => options.onSizesChange,
+		same: sameSizes
+	});
+	const [focusSeparator, setFocusSeparator] = createSignal(null);
+	const [resizing, setResizing] = createSignal(null);
+	const lastExpanded = start.map((value, index) => Math.max(value, minOf(index)));
+	createEffect(() => sizes(), (now) => {
+		now.forEach((value, index) => {
+			if (value > collapsedSize(index)) lastExpanded[index] = value;
+		});
+	});
+	const collapsed = (index) => panes()[index]?.collapsible === true && (sizes()[index] ?? 0) <= collapsedSize(index);
+	const movable = (index) => index >= 0 && index + 1 < count() && !collapsed(index) && !collapsed(index + 1);
+	let asked;
+	const commit = (next) => {
+		const fitted = fit(next);
+		asked = fitted;
+		request(fitted);
+	};
+	const move = (index, delta) => {
+		if (drag !== void 0 || !movable(index)) return;
+		commit(movePair(sizes(), index, delta));
+	};
+	const toggle = (index) => {
+		const pane = panes()[index];
+		if (drag !== void 0 || pane?.collapsible !== true) return;
+		if (collapsed(index)) commit(shift(sizes(), index, (lastExpanded[index] ?? lowOf(index)) - (sizes()[index] ?? 0)));
+		else commit(shift(sizes(), index, collapsedSize(index) - (sizes()[index] ?? 0)));
+	};
+	const keyDown = (index, key) => {
+		if (!KEY_TAGS$1.has(key)) return;
+		const vertical = orientation() === "vertical";
+		switch (key) {
+			case "ArrowLeft":
+				if (vertical) move(index, 0 - step());
+				break;
+			case "ArrowRight":
+				if (vertical) move(index, step());
+				break;
+			case "ArrowUp":
+				if (!vertical) move(index, 0 - step());
+				break;
+			case "ArrowDown":
+				if (!vertical) move(index, step());
+				break;
+			case "Home":
+				move(index, -100);
+				break;
+			case "End":
+				move(index, FULL);
+				break;
+			default: toggle(index);
+		}
+	};
+	let drag;
+	const axisOf = (event, axis) => axis === "x" ? event.clientX : event.clientY;
+	const lengthOf = (element) => {
+		const group = element.parentElement;
+		if (group === null) return 0;
+		const rect = group.getBoundingClientRect();
+		return orientation() === "vertical" ? rect.width : rect.height;
+	};
+	const onPointerDown = (index, event) => {
+		if (event.button !== 0) return;
+		if (drag !== void 0) {
+			release(drag.element, drag.pointerId);
+			drag = void 0;
+			setResizing(null);
+		}
+		setFocusSeparator(index);
+		if (!movable(index)) return;
+		const length = lengthOf(event.currentTarget);
+		if (length <= 0) return;
+		const axis = orientation() === "vertical" ? "x" : "y";
+		drag = {
+			separator: index,
+			element: event.currentTarget,
+			pointerId: event.pointerId,
+			start: axisOf(event, axis),
+			axis,
+			from: sizes(),
+			length
+		};
+		setResizing(index);
+		capture(event.currentTarget, event.pointerId);
+		event.preventDefault();
+	};
+	const onPointerMove = (event) => {
+		if (drag === void 0 || drag.pointerId !== event.pointerId) return;
+		const delta = (axisOf(event, drag.axis) - drag.start) / drag.length * FULL;
+		commit(movePair(drag.from, drag.separator, delta));
+	};
+	const onPointerEnd = (event) => {
+		if (drag === void 0 || drag.pointerId !== event.pointerId) return;
+		drag = void 0;
+		setResizing(null);
+		release(event.currentTarget, event.pointerId);
+	};
+	createEffect(() => options.sizes, (now) => {
+		if (now === void 0 || asked !== void 0 && sameSizes(now, asked)) return;
+		drag = void 0;
+		setResizing(null);
+	});
+	if (options.storageKey !== void 0) {
+		const storageKey = options.storageKey;
+		createEffect(() => sizes(), (now) => writeStored(storageKey, now));
+	}
+	const separatorProps = (index) => ({
+		id: `${base}-separator-${index}`,
+		role: "separator",
+		get "aria-orientation"() {
+			return orientation();
+		},
+		get "aria-valuenow"() {
+			return round2(sizes()[index] ?? 0);
+		},
+		get "aria-valuemin"() {
+			return panes()[index]?.min ?? DEFAULT_MIN;
+		},
+		get "aria-valuemax"() {
+			return highOf(index);
+		},
+		get "aria-controls"() {
+			return paneId(index);
+		},
+		get "aria-label"() {
+			const label = panes()[index]?.label;
+			return label === void 0 ? "Resize" : `Resize ${label}`;
+		},
+		tabindex: 0,
+		onKeyDown: (event) => {
+			if (KEY_TAGS$1.has(event.key)) event.preventDefault();
+			keyDown(index, event.key);
+		},
+		onFocus: () => setFocusSeparator(index),
+		onBlur: () => setFocusSeparator(null),
+		onPointerDown: (event) => onPointerDown(index, event),
+		onPointerMove,
+		onPointerUp: onPointerEnd,
+		onPointerCancel: onPointerEnd
+	});
+	return {
+		sizes,
+		collapsed,
+		resizing,
+		focusSeparator,
+		setFocusSeparator,
+		keyDown,
+		groupProps: {
+			role: "group",
+			get "aria-label"() {
+				return options.label;
+			}
+		},
+		paneProps: (index) => ({ id: paneId(index) }),
+		separatorProps
+	};
+};
+// src/slider.ts
 const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
 /**
 * APG Slider (https://www.w3.org/WAI/ARIA/apg/patterns/slider/): a single
@@ -4590,8 +4850,7 @@ const createSlider = (options = {}) => {
 		} }
 	};
 };
-//#endregion
-//#region src/slider-multithumb.ts
+// src/slider-multithumb.ts
 const valueTextFor = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
 const keyOf = (pair) => `${pair[0]},${pair[1]}`;
 const pairOf = (key) => {
@@ -4721,8 +4980,7 @@ const createSliderMultiThumb = (options = {}) => {
 		})
 	};
 };
-//#endregion
-//#region src/spinbutton.ts
+// src/spinbutton.ts
 /**
 * APG Spinbutton (https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/): a text
 * field plus increase / decrease buttons. Plain Solid signals, no elements, no
@@ -4926,8 +5184,7 @@ const createSpinbutton = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/switch.ts
+// src/switch.ts
 /**
 * APG Switch (https://www.w3.org/WAI/ARIA/apg/patterns/switch/): a binary on/off
 * input. Platform choice (packages/headless/docs/apg-platform-features.md): **native
@@ -5016,8 +5273,7 @@ const createSwitch = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/tabs.ts
+// src/tabs.ts
 /**
 * APG Tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): state plus prop
 * objects for a tablist, tabs and panels. Roving tabindex, wrapping arrows,
@@ -5154,8 +5410,7 @@ const createTabs = (options = {}) => {
 		})
 	};
 };
-//#endregion
-//#region src/timeline.ts
+// src/timeline.ts
 const LAST_NODE = 5;
 const DOMAIN_MIN = 0;
 const DOMAIN_MAX = 100;
@@ -5391,8 +5646,7 @@ const createTimeline = (options = {}) => {
 		}
 	};
 };
-//#endregion
-//#region src/toolbar.ts
+// src/toolbar.ts
 const AXIS = (o) => o === "horizontal" ? "inline" : "block";
 const delta = (axis, key) => {
 	if (axis === "inline") {
@@ -5572,8 +5826,7 @@ const createToolbar = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/tooltip.ts
+// src/tooltip.ts
 const letters = ["a", "b"];
 const letterOf = (index) => letters[index] ?? "a";
 const shownOf = (vis) => [vis === 1, vis === 2];
@@ -5861,8 +6114,7 @@ const createTooltipGroup = (options) => {
 		})
 	};
 };
-//#endregion
-//#region src/treegrid.ts
+// src/treegrid.ts
 const PARENTS = [
 	-1,
 	0,
@@ -6241,8 +6493,7 @@ const createTreegrid = (options = {}) => {
 };
 /** The `data-part` target the treegrid roving tab stop should focus. */
 const treegridFocusTargetPart = (grid) => grid.focusTargetPart();
-//#endregion
-//#region src/treeview.ts
+// src/treeview.ts
 /**
 * The fixed tree of `specs/apg/treeview.qnt` (ids are pre-order = document
 * order): 1 Projects > {2 Reports > {3 Roadmap, 4 Summary}, 5 Notes}, 6 Photos
@@ -6578,8 +6829,7 @@ const createTreeview = (options = {}) => {
 		})
 	};
 };
-//#endregion
-//#region src/windowsplitter.ts
+// src/windowsplitter.ts
 const KEY_TAGS = /* @__PURE__ */ new Set([
 	"ArrowLeft",
 	"ArrowRight",
@@ -6740,8 +6990,7 @@ const createWindowSplitter = (options = {}) => {
 		secondaryProps: paneProps("secondary")
 	};
 };
-//#endregion
-//#region src/listbox-rearrangeable.ts
+// src/listbox-rearrangeable.ts
 const other = (list) => list === "a" ? "b" : "a";
 const normalize = (indices, count) => [...new Set(indices)].filter((index) => index >= 0 && index < count).sort((x, y) => x - y);
 const same = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
@@ -6990,5 +7239,4 @@ const createRearrangeableListbox = (options) => {
 		})
 	};
 };
-//#endregion
-export { DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createDialogModal, createDisclosure, createFeed, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPlayer, createRadioGroup, createRearrangeableListbox, createSlider, createSliderMultiThumb, createSpinbutton, createSwitch, createTabs, createTimeline, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
+export { DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createDialogModal, createDisclosure, createFeed, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPlayer, createRadioGroup, createRearrangeableListbox, createResizablePanels, createSlider, createSliderMultiThumb, createSpinbutton, createSwitch, createTabs, createTimeline, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssints/headless",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Headless APG widgets on Solid 2: state plus attribute objects, no elements, no styling, each conformance-checked against its Quint spec",
   "license": "MIT",
   "repository": {