foldkit-primitives 0.15.4 → 0.16.0

package/dist/interaction/roving-tabindex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-tabindex.js","names":[],"sources":["../../src/interaction/roving-tabindex.ts"],"sourcesContent":["/**\n * One tab stop for a set of items (a toolbar, a tab list, a listbox): arrows\n * move focus between them, the rest stay out of the tab order. The current\n * item's id is the Model slice, so a reorder keeps the same item current and a\n * resumed page knows where focus was. Which item comes next is a pure\n * function of the items and the key; the Behavior wires it to the slots.\n */\nimport { Option, Schema } from 'effect'\nimport type { Attribute, HtmlBuilder, KeyboardModifiers } from 'foldkit/html'\nimport { defineMessageUnion } from 'foldkit/message'\nimport { Bundle } from 'foldkit-bundle'\nimport { Behavior, Behaviors, Capability, type SlotItem } from 'foldkit-mixins'\nimport type { Declared } from 'foldkit-bundle'\nimport { perInput } from '../internal.js'\n\nexport const Orientation = Schema.Literals(['vertical', 'horizontal', 'both'])\nexport type Orientation = typeof Orientation.Type\n\nexport const Model = Schema.Struct({\n  /** The current item's id, or `null` before any item has been focused. */\n  current: Schema.NullOr(Schema.String),\n})\nexport type Model = typeof Model.Type\n\nexport const Message = defineMessageUnion({\n  /** An item became current: the user focused it, or a key moved there. */\n  Focused: { id: Schema.String },\n})\nexport type Message = typeof Message.Type\n\nexport const Args = Schema.Struct({\n  orientation: Orientation,\n  /** Wrap from the last enabled item to the first, and back. */\n  loop: Schema.Boolean,\n  /** Keep DOM focus on the container and point at the current item with\n   *  `aria-activedescendant` instead of moving focus. */\n  virtual: Schema.Boolean,\n})\nexport type Args = typeof Args.Type\n\nexport const bundle = Bundle.make('RovingTabindex', {\n  Model,\n  Message,\n  args: Args,\n  init: () => ({ model: { current: null } }),\n  // Moving focus by key dispatches `Focused`, and the item's `OnFocus` reports it again.\n  update: (model, message) =>\n    model.current === message.id ? { model } : { model: { current: message.id } },\n})\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport interface MoveOptions {\n  readonly orientation: Orientation\n  readonly loop: boolean\n  readonly direction: Direction\n  /** How many enabled items PageUp and PageDown move; absent, they are not handled. */\n  readonly page?: number\n}\n\nconst isPlain = (modifiers: KeyboardModifiers): boolean =>\n  !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey\n\n/**\n * The index the key moves to from `current`, over the enabled indices only, or\n * `undefined` when the key is not a navigation key here. `current` may be\n * `-1` (nothing current yet): arrows then land on the first or last enabled\n * item. Under `rtl`, left and right swap. PageUp and PageDown move by `page`\n * and clamp at the ends, never wrapping.\n */\nexport const move = (\n  enabled: ReadonlyArray<number>,\n  current: number,\n  key: string,\n  modifiers: KeyboardModifiers,\n  options: MoveOptions,\n): number | undefined => {\n  if (enabled.length === 0 || !isPlain(modifiers)) return undefined\n  const first = enabled[0]!\n  const last = enabled[enabled.length - 1]!\n  if (key === 'Home') return first\n  if (key === 'End') return last\n  if (options.page !== undefined && (key === 'PageUp' || key === 'PageDown')) {\n    const position = enabled.indexOf(current)\n    if (position === -1) return key === 'PageDown' ? first : last\n    const jumped = position + (key === 'PageDown' ? options.page : -options.page)\n    return enabled[Math.min(enabled.length - 1, Math.max(0, jumped))]\n  }\n  const vertical = options.orientation !== 'horizontal'\n  const horizontal = options.orientation !== 'vertical'\n  const forwardKey = options.direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const backwardKey = options.direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft'\n  const step =\n    (vertical && key === 'ArrowDown') || (horizontal && key === forwardKey)\n      ? 1\n      : (vertical && key === 'ArrowUp') || (horizontal && key === backwardKey)\n        ? -1\n        : 0\n  if (step === 0) return undefined\n  const position = enabled.indexOf(current)\n  if (position === -1) return step === 1 ? first : last\n  const next = position + step\n  if (next < 0) return options.loop ? last : first\n  if (next >= enabled.length) return options.loop ? first : last\n  return enabled[next]\n}\n\n/** The item that holds the tab stop: the current one, else the first enabled. */\nexport const tabStop = (\n  items: Behaviors.Collection.Items<unknown>,\n  current: string | null,\n): number => {\n  const index = current === null ? -1 : items.indexOf(current)\n  if (index !== -1 && !items.isDisabled(index)) return index\n  return items.enabled[0] ?? -1\n}\n\nexport interface BehaviorOptions<Input, Slots> {\n  /** The slot that receives the arrow keys. */\n  readonly container: keyof Slots & string\n  /** The slot rendered once per item; must carry the item's id (see `Behaviors.Collection`). */\n  readonly item: keyof Slots & string\n  readonly items: (input: Input) => Behaviors.Collection.Items<unknown>\n  /** Default `'ltr'`; return `'rtl'` to swap left and right. */\n  readonly direction?: (input: Input) => Direction\n}\n\n/** A selector for an element by id, safe for any id. */\nexport const idSelector = (id: string): string => `[id=\"${id.replace(/[\"\\\\]/g, '\\\\$&')}\"]`\n\n/**\n * The attributes one item gets: `tabindex` 0 when it holds the tab stop and\n * -1 otherwise (none under `virtual`), and `OnFocus` reporting it current.\n * Shared with `ListNavigation`.\n */\nexport const itemAttributes = <ParentMessage>(\n  h: HtmlBuilder<ParentMessage>,\n  items: Behaviors.Collection.Items<unknown>,\n  current: string | null,\n  item: SlotItem,\n  virtual: boolean,\n  focused: (id: string) => ParentMessage,\n): ReadonlyArray<Attribute<ParentMessage>> => {\n  const id = item.id ?? items.ids[item.index]\n  if (id === undefined) return []\n  const isStop = tabStop(items, current) === item.index\n  return [...(virtual ? [] : [h.Tabindex(isStop ? 0 : -1)]), h.OnFocus(focused(id))]\n}\n\n/**\n * Wires a placed `RovingTabindex` to the slots: the container's arrow, Home\n * and End keys focus the next item (synchronously, then dispatch), each item\n * gets `tabindex` 0 or -1 and reports `Focused` when focused. Under `virtual`\n * DOM focus never leaves the container: the key only dispatches, the\n * container carries `aria-activedescendant`, and items keep no `tabindex`.\n *\n * Every handled key is default-prevented. Nothing is written on dispose: the\n * attributes are data, so a view that no longer attaches this leaves no\n * `tabindex` behind.\n */\nexport const behavior =\n  <Field extends string>(declared: Declared<typeof bundle, Field>, args: Args) =>\n  <Slots>(slots: Slots) =>\n  <Input extends { readonly [K in Field]: Model }, ParentMessage>(\n    options: BehaviorOptions<Input, Slots>,\n  ): Behavior.NamedBehavior<Slots, Input, ParentMessage> => {\n    const wrap = (id: string): ParentMessage =>\n      declared.wrapper.make(Message.Focused({ id })) as unknown as ParentMessage\n    const slice = (input: Input): Model => input[declared.field]\n    const itemsOf = perInput(options.items)\n    return Behavior.forSlots(slots)<Input, ParentMessage>(\n      {\n        [options.container]: Behavior.slot({\n          requires: { capability: Capability.Interactive },\n          attributes: ({\n            input,\n            h,\n          }: {\n            readonly input: Input\n            readonly h: HtmlBuilder<ParentMessage>\n          }) => {\n            const items = itemsOf(input)\n            const current = slice(input).current\n            const from = current === null ? -1 : items.indexOf(current)\n            const direction = options.direction?.(input) ?? 'ltr'\n            const stop = tabStop(items, current)\n            const stopId = stop === -1 ? undefined : items.ids[stop]\n            const target = (key: string, modifiers: KeyboardModifiers): string | undefined => {\n              const next = move(items.enabled, from, key, modifiers, { ...args, direction })\n              return next === undefined ? undefined : items.ids[next]\n            }\n            // Virtual: DOM focus stays on the container, only the pointer moves.\n            if (args.virtual) {\n              return [\n                h.OnKeyDownPreventDefault((key, modifiers) =>\n                  Option.map(Option.fromNullishOr(target(key, modifiers)), wrap),\n                ),\n                ...(stopId === undefined ? [] : [h.AriaActiveDescendant(stopId)]),\n              ]\n            }\n            return [\n              h.OnKeyDownFocus((key, modifiers) =>\n                Option.map(Option.fromNullishOr(target(key, modifiers)), id => ({\n                  focusSelector: idSelector(id),\n                  message: wrap(id),\n                })),\n              ),\n            ]\n          },\n        }),\n        [options.item]: Behavior.slot({\n          requires: { capability: Capability.Focusable },\n          attributes: ({\n            input,\n            h,\n            item,\n          }: {\n            readonly input: Input\n            readonly h: HtmlBuilder<ParentMessage>\n            readonly item?: SlotItem\n          }) => {\n            if (item === undefined) return []\n            return itemAttributes(h, itemsOf(input), slice(input).current, item, args.virtual, wrap)\n          },\n        }),\n        // Keyed by values the caller chose; `forSlots` checks both keys exist.\n      } as unknown as Behavior.BehaviorSpec<Slots, Input, ParentMessage>,\n      { name: 'RovingTabindex' },\n    )\n  }\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,cAAc,OAAO,SAAS;CAAC;CAAY;CAAc;AAAM,CAAC;AAG7E,MAAa,QAAQ,OAAO,OAAO;;AAEjC,SAAS,OAAO,OAAO,OAAO,MAAM,EACtC,CAAC;AAGD,MAAa,UAAU,mBAAmB;;AAExC,SAAS,EAAE,IAAI,OAAO,OAAO,EAC/B,CAAC;AAGD,MAAa,OAAO,OAAO,OAAO;CAChC,aAAa;;CAEb,MAAM,OAAO;;;CAGb,SAAS,OAAO;AAClB,CAAC;AAGD,MAAa,SAAS,OAAO,KAAK,kBAAkB;CAClD;CACA;CACA,MAAM;CACN,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;CAExC,SAAS,OAAO,YACd,MAAM,YAAY,QAAQ,KAAK,EAAE,MAAM,IAAI,EAAE,OAAO,EAAE,SAAS,QAAQ,GAAG,EAAE;AAChF,CAAC;AAYD,MAAM,WAAW,cACf,CAAC,UAAU,WAAW,CAAC,UAAU,UAAU,CAAC,UAAU;;;;;;;;AASxD,MAAa,QACX,SACA,SACA,KACA,WACA,YACuB;CACvB,IAAI,QAAQ,WAAW,KAAK,CAAC,QAAQ,SAAS,GAAG,OAAO,KAAA;CACxD,MAAM,QAAQ,QAAQ;CACtB,MAAM,OAAO,QAAQ,QAAQ,SAAS;CACtC,IAAI,QAAQ,QAAQ,OAAO;CAC3B,IAAI,QAAQ,OAAO,OAAO;CAC1B,IAAI,QAAQ,SAAS,KAAA,MAAc,QAAQ,YAAY,QAAQ,aAAa;EAC1E,MAAM,WAAW,QAAQ,QAAQ,OAAO;EACxC,IAAI,aAAa,IAAI,OAAO,QAAQ,aAAa,QAAQ;EACzD,MAAM,SAAS,YAAY,QAAQ,aAAa,QAAQ,OAAO,CAAC,QAAQ;EACxE,OAAO,QAAQ,KAAK,IAAI,QAAQ,SAAS,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;CACjE;CACA,MAAM,WAAW,QAAQ,gBAAgB;CACzC,MAAM,aAAa,QAAQ,gBAAgB;CAC3C,MAAM,aAAa,QAAQ,cAAc,QAAQ,cAAc;CAC/D,MAAM,cAAc,QAAQ,cAAc,QAAQ,eAAe;CACjE,MAAM,OACH,YAAY,QAAQ,eAAiB,cAAc,QAAQ,aACxD,IACC,YAAY,QAAQ,aAAe,cAAc,QAAQ,cACxD,KACA;CACR,IAAI,SAAS,GAAG,OAAO,KAAA;CACvB,MAAM,WAAW,QAAQ,QAAQ,OAAO;CACxC,IAAI,aAAa,IAAI,OAAO,SAAS,IAAI,QAAQ;CACjD,MAAM,OAAO,WAAW;CACxB,IAAI,OAAO,GAAG,OAAO,QAAQ,OAAO,OAAO;CAC3C,IAAI,QAAQ,QAAQ,QAAQ,OAAO,QAAQ,OAAO,QAAQ;CAC1D,OAAO,QAAQ;AACjB;;AAGA,MAAa,WACX,OACA,YACW;CACX,MAAM,QAAQ,YAAY,OAAO,KAAK,MAAM,QAAQ,OAAO;CAC3D,IAAI,UAAU,MAAM,CAAC,MAAM,WAAW,KAAK,GAAG,OAAO;CACrD,OAAO,MAAM,QAAQ,MAAM;AAC7B;;AAaA,MAAa,cAAc,OAAuB,QAAQ,GAAG,QAAQ,UAAU,MAAM,EAAE;;;;;;AAOvF,MAAa,kBACX,GACA,OACA,SACA,MACA,SACA,YAC4C;CAC5C,MAAM,KAAK,KAAK,MAAM,MAAM,IAAI,KAAK;CACrC,IAAI,OAAO,KAAA,GAAW,OAAO,CAAC;CAC9B,MAAM,SAAS,QAAQ,OAAO,OAAO,MAAM,KAAK;CAChD,OAAO,CAAC,GAAI,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,SAAS,IAAI,EAAE,CAAC,GAAI,EAAE,QAAQ,QAAQ,EAAE,CAAC,CAAC;AACnF;;;;;;;;;;;;AAaA,MAAa,YACY,UAA0C,UACzD,WAEN,YACwD;CACxD,MAAM,QAAQ,OACZ,SAAS,QAAQ,KAAK,QAAQ,QAAQ,EAAE,GAAG,CAAC,CAAC;CAC/C,MAAM,SAAS,UAAwB,MAAM,SAAS;CACtD,MAAM,UAAU,SAAS,QAAQ,KAAK;CACtC,OAAO,SAAS,SAAS,KAAK,CAAC,CAC7B;GACG,QAAQ,YAAY,SAAS,KAAK;GACjC,UAAU,EAAE,YAAY,WAAW,YAAY;GAC/C,aAAa,EACX,OACA,QAII;IACJ,MAAM,QAAQ,QAAQ,KAAK;IAC3B,MAAM,UAAU,MAAM,KAAK,CAAC,CAAC;IAC7B,MAAM,OAAO,YAAY,OAAO,KAAK,MAAM,QAAQ,OAAO;IAC1D,MAAM,YAAY,QAAQ,YAAY,KAAK,KAAK;IAChD,MAAM,OAAO,QAAQ,OAAO,OAAO;IACnC,MAAM,SAAS,SAAS,KAAK,KAAA,IAAY,MAAM,IAAI;IACnD,MAAM,UAAU,KAAa,cAAqD;KAChF,MAAM,OAAO,KAAK,MAAM,SAAS,MAAM,KAAK,WAAW;MAAE,GAAG;MAAM;KAAU,CAAC;KAC7E,OAAO,SAAS,KAAA,IAAY,KAAA,IAAY,MAAM,IAAI;IACpD;IAEA,IAAI,KAAK,SACP,OAAO,CACL,EAAE,yBAAyB,KAAK,cAC9B,OAAO,IAAI,OAAO,cAAc,OAAO,KAAK,SAAS,CAAC,GAAG,IAAI,CAC/D,GACA,GAAI,WAAW,KAAA,IAAY,CAAC,IAAI,CAAC,EAAE,qBAAqB,MAAM,CAAC,CACjE;IAEF,OAAO,CACL,EAAE,gBAAgB,KAAK,cACrB,OAAO,IAAI,OAAO,cAAc,OAAO,KAAK,SAAS,CAAC,IAAG,QAAO;KAC9D,eAAe,WAAW,EAAE;KAC5B,SAAS,KAAK,EAAE;IAClB,EAAE,CACJ,CACF;GACF;EACF,CAAC;GACA,QAAQ,OAAO,SAAS,KAAK;GAC5B,UAAU,EAAE,YAAY,WAAW,UAAU;GAC7C,aAAa,EACX,OACA,GACA,WAKI;IACJ,IAAI,SAAS,KAAA,GAAW,OAAO,CAAC;IAChC,OAAO,eAAe,GAAG,QAAQ,KAAK,GAAG,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,KAAK,SAAS,IAAI;GACzF;EACF,CAAC;CAEH,GACA,EAAE,MAAM,iBAAiB,CAC3B;AACF"}

package/dist/interaction/selection.d.ts

@@ -0,0 +1,72 @@
+import { Schema } from "effect";
+import { Bundle, Declared } from "foldkit-bundle";
+import { Behavior, Behaviors } from "foldkit-mixins";
+export declare const Mode: Schema.Literals<readonly ["single", "multiple", "none"]>;
+export type Mode = typeof Mode.Type;
+export declare const Model: Schema.Struct<{
+  /** In selection order. */
+  readonly selected: Schema.$Array<Schema.String>;
+  /** Where the last plain selection happened; a range extends from it. */
+  readonly anchor: Schema.NullOr<Schema.String>;
+}>;
+export type Model = typeof Model.Type;
+export declare const Message: import("foldkit/message").MessageUnion<{
+  /** A plain activation: replaces in single mode, toggles in multiple mode. */
+  readonly Activated: {
+    id: Schema.String;
+  };
+  /** A Shift activation: selects everything between the anchor and `id` in `order`. */
+  readonly Ranged: {
+    id: Schema.String;
+    order: Schema.$Array<Schema.String>;
+  };
+  readonly Replaced: {
+    ids: Schema.$Array<Schema.String>;
+  };
+  readonly Cleared: {};
+}>;
+export type Message = typeof Message.Type;
+export declare const Args: Schema.Struct<{
+  readonly mode: Schema.Literals<readonly ["single", "multiple", "none"]>;
+  /** In single mode, whether activating the selected item deselects it. */
+  readonly allowEmpty: Schema.Boolean;
+}>;
+export type Args = typeof Args.Type;
+/** The ids between `from` and `to` in `order`, inclusive, in `order`'s order. */
+export declare const between: (order: ReadonlyArray<string>, from: string | null, to: string) => ReadonlyArray<string>;
+export declare const bundle: Bundle.Bundle<"Selection", {
+  readonly mode: "multiple" | "none" | "single";
+  readonly allowEmpty: boolean;
+}, {
+  readonly selected: readonly string[];
+  readonly anchor: string | null;
+}, {
+  readonly _tag: "Activated";
+  readonly id: string;
+} | {
+  readonly _tag: "Cleared";
+} | {
+  readonly _tag: "Ranged";
+  readonly id: string;
+  readonly order: readonly string[];
+} | {
+  readonly _tag: "Replaced";
+  readonly ids: readonly string[];
+}, never, never, never, void, {}, {}>;
+export interface BehaviorOptions<Input, Slots> {
+  /** The slot holding the items, for `aria-multiselectable`. */
+  readonly container?: keyof Slots & string;
+  /** The slot rendered once per item; must carry the item's id. */
+  readonly item: keyof Slots & string;
+  readonly items: (input: Input) => Behaviors.Collection.Items<unknown>;
+  /** Wire a plain click on each item to `Activated`. Default `true`; turn off
+   *  when `Press` or the view owns the click. */
+  readonly click?: boolean;
+}
+/**
+ * Writes `aria-selected` on each item from the placed slice, and
+ * `aria-multiselectable` on the container in multiple mode; wires `OnClick`
+ * to `Activated` unless told not to. A disabled item gets no click.
+ */
+export declare const behavior: <Field extends string>(declared: Declared<typeof bundle, Field>, args: Args) => <Slots>(slots: Slots) => <Input extends { readonly [K in Field]: Model; }, ParentMessage>(options: BehaviorOptions<Input, Slots>) => Behavior.NamedBehavior<Slots, Input, ParentMessage>;
+//# sourceMappingURL=selection.d.ts.map

package/dist/interaction/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","names":[],"sources":["../../src/interaction/selection.ts"],"mappings":";;;qBAgBa,MAAI,OAAA;YACL,cAAc,KAAK;qBAElB,OAAK,OAAA;;;;;;YAMN,eAAe,MAAM;qBAEpB,mCAAO;;;IAEL,IAAE,OAAA;;;;IAEL,IAAE,OAAA;IAAiB,OAAK,OAAA,OAAA,OAAA;;;IACtB,KAAG,OAAA,OAAA,OAAA;;;;YAGL,iBAAiB,QAAQ;qBAExB,MAAI,OAAA;;;;;YAKL,cAAc,KAAK;;qBAKlB,UAAO,OACX,uBAAqB,qBACT,eAElB;qBAQU,QAAM,OAAA;;;;;;;;;;;;;;;;;;;iBA8CF,gBAAgB,OAAO;;WAE7B,kBAAkB;;WAElB,YAAY;WACZ,QAAQ,OAAO,UAAU,UAAU,WAAW;;;WAG9C;;;;;;;qBAQE,WACV,sBAAoB,UAAY,gBAAgB,QAAQ,QAAM,MAAQ,UACtE,OAAK,OAAS,WACd,0BAA0B,KAAK,QAAQ,UAAS,eAAa,SACnD,gBAAgB,OAAO,WAC/B,SAAS,cAAc,OAAO,OAAO"}

package/dist/interaction/selection.js

@@ -0,0 +1,129 @@
+import { Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { Bundle } from "foldkit-bundle";
+import { perInput, sameIds } from "../internal.js";
+import { Capability } from "foldkit-mixins";
+import { BundleBehavior } from "./bundle-behavior.js";
+// src/interaction/selection.ts
+/**
+* Selection over a set of items: which ids are selected, and the anchor a
+* range extends from. `mode` is `'single'` (a click replaces), `'multiple'`
+* (a click toggles), or `'none'`. Single mode keeps one item selected unless
+* `allowEmpty`. A range needs the items' order, which the view knows and the
+* Bundle does not, so `Ranged` carries it. The Behavior says the state in
+* ARIA and wires a plain click; a Shift range comes from `Press`, whose
+* `Pressed` carries `shiftKey`.
+*/
+const Mode = Schema.Literals([
+	"single",
+	"multiple",
+	"none"
+]);
+const Model = Schema.Struct({
+	/** In selection order. */
+	selected: Schema.Array(Schema.String),
+	/** Where the last plain selection happened; a range extends from it. */
+	anchor: Schema.NullOr(Schema.String)
+});
+const Message = defineMessageUnion({
+	/** A plain activation: replaces in single mode, toggles in multiple mode. */
+	Activated: { id: Schema.String },
+	/** A Shift activation: selects everything between the anchor and `id` in `order`. */
+	Ranged: {
+		id: Schema.String,
+		order: Schema.Array(Schema.String)
+	},
+	Replaced: { ids: Schema.Array(Schema.String) },
+	Cleared: {}
+});
+const Args = Schema.Struct({
+	mode: Mode,
+	/** In single mode, whether activating the selected item deselects it. */
+	allowEmpty: Schema.Boolean
+});
+const without = (ids, id) => ids.filter((other) => other !== id);
+/** The ids between `from` and `to` in `order`, inclusive, in `order`'s order. */
+const between = (order, from, to) => {
+	const end = order.indexOf(to);
+	if (end === -1) return [];
+	const start = from === null ? -1 : order.indexOf(from);
+	if (start === -1) return [to];
+	return order.slice(Math.min(start, end), Math.max(start, end) + 1);
+};
+const bundle = Bundle.make("Selection", {
+	Model,
+	Message,
+	args: Args,
+	init: () => ({ model: {
+		selected: [],
+		anchor: null
+	} }),
+	update: (model, message, args) => Message.match(message, {
+		Activated: ({ id }) => {
+			if (args.mode === "none") return { model };
+			const isSelected = model.selected.includes(id);
+			if (args.mode === "single") return isSelected ? args.allowEmpty ? { model: {
+				selected: [],
+				anchor: id
+			} } : { model } : { model: {
+				selected: [id],
+				anchor: id
+			} };
+			return { model: {
+				selected: isSelected ? without(model.selected, id) : [...model.selected, id],
+				anchor: id
+			} };
+		},
+		Ranged: ({ id, order }) => {
+			if (args.mode !== "multiple") return { model };
+			const range = between(order, model.anchor, id);
+			const inRange = new Set(range);
+			const selected = [...model.selected.filter((other) => !inRange.has(other)), ...range];
+			const anchor = model.anchor ?? id;
+			return sameIds(selected, model.selected) && anchor === model.anchor ? { model } : { model: {
+				selected,
+				anchor
+			} };
+		},
+		Replaced: ({ ids }) => {
+			const selected = args.mode === "none" ? [] : [...new Set(ids)];
+			return sameIds(selected, model.selected) ? { model } : { model: {
+				selected,
+				anchor: model.anchor
+			} };
+		},
+		Cleared: () => model.selected.length === 0 ? { model } : { model: {
+			selected: [],
+			anchor: model.anchor
+		} }
+	})
+});
+/**
+* Writes `aria-selected` on each item from the placed slice, and
+* `aria-multiselectable` on the container in multiple mode; wires `OnClick`
+* to `Activated` unless told not to. A disabled item gets no click.
+*/
+const behavior = (declared, args) => (slots) => (options) => {
+	const itemsOf = perInput(options.items);
+	const selectedOf = perInput((input) => new Set(input[declared.field].selected));
+	return BundleBehavior.fromBundle(declared)(slots)({
+		...options.container === void 0 ? {} : { [options.container]: {
+			requires: { capability: Capability.Container },
+			attributes: ({ h }) => [h.AriaMultiSelectable(args.mode === "multiple")]
+		} },
+		[options.item]: {
+			requires: { capability: Capability.Interactive },
+			attributes: ({ input, h, item, send }) => {
+				if (item === void 0) return [];
+				const items = itemsOf(input);
+				const id = item.id ?? items.ids[item.index];
+				if (id === void 0) return [];
+				const clickable = options.click !== false && args.mode !== "none" && !items.isDisabled(item.index);
+				return [h.AriaSelected(selectedOf(input).has(id)), ...clickable ? [h.OnClick(send(Message.Activated({ id })))] : []];
+			}
+		}
+	}, { name: "Selection" });
+};
+export { Args, Message, Mode, Model, behavior, between, bundle };
+
+//# sourceMappingURL=selection.js.map

package/dist/interaction/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","names":[],"sources":["../../src/interaction/selection.ts"],"sourcesContent":["/**\n * Selection over a set of items: which ids are selected, and the anchor a\n * range extends from. `mode` is `'single'` (a click replaces), `'multiple'`\n * (a click toggles), or `'none'`. Single mode keeps one item selected unless\n * `allowEmpty`. A range needs the items' order, which the view knows and the\n * Bundle does not, so `Ranged` carries it. The Behavior says the state in\n * ARIA and wires a plain click; a Shift range comes from `Press`, whose\n * `Pressed` carries `shiftKey`.\n */\nimport { Schema } from 'effect'\nimport { defineMessageUnion } from 'foldkit/message'\nimport { Bundle, type Declared } from 'foldkit-bundle'\nimport { Behavior, Behaviors, Capability } from 'foldkit-mixins'\nimport { perInput, sameIds } from '../internal.js'\nimport { BundleBehavior } from './bundle-behavior.js'\n\nexport const Mode = Schema.Literals(['single', 'multiple', 'none'])\nexport type Mode = typeof Mode.Type\n\nexport const Model = Schema.Struct({\n  /** In selection order. */\n  selected: Schema.Array(Schema.String),\n  /** Where the last plain selection happened; a range extends from it. */\n  anchor: Schema.NullOr(Schema.String),\n})\nexport type Model = typeof Model.Type\n\nexport const Message = defineMessageUnion({\n  /** A plain activation: replaces in single mode, toggles in multiple mode. */\n  Activated: { id: Schema.String },\n  /** A Shift activation: selects everything between the anchor and `id` in `order`. */\n  Ranged: { id: Schema.String, order: Schema.Array(Schema.String) },\n  Replaced: { ids: Schema.Array(Schema.String) },\n  Cleared: {},\n})\nexport type Message = typeof Message.Type\n\nexport const Args = Schema.Struct({\n  mode: Mode,\n  /** In single mode, whether activating the selected item deselects it. */\n  allowEmpty: Schema.Boolean,\n})\nexport type Args = typeof Args.Type\n\nconst without = (ids: ReadonlyArray<string>, id: string) => ids.filter(other => other !== id)\n\n/** The ids between `from` and `to` in `order`, inclusive, in `order`'s order. */\nexport const between = (\n  order: ReadonlyArray<string>,\n  from: string | null,\n  to: string,\n): ReadonlyArray<string> => {\n  const end = order.indexOf(to)\n  if (end === -1) return []\n  const start = from === null ? -1 : order.indexOf(from)\n  if (start === -1) return [to]\n  return order.slice(Math.min(start, end), Math.max(start, end) + 1)\n}\n\nexport const bundle = Bundle.make('Selection', {\n  Model,\n  Message,\n  args: Args,\n  init: () => ({ model: { selected: [], anchor: null } }),\n  update: (model, message, args) =>\n    Message.match(message, {\n      Activated: ({ id }) => {\n        if (args.mode === 'none') return { model }\n        const isSelected = model.selected.includes(id)\n        if (args.mode === 'single') {\n          return isSelected\n            ? args.allowEmpty\n              ? { model: { selected: [], anchor: id } }\n              : { model }\n            : { model: { selected: [id], anchor: id } }\n        }\n        return {\n          model: {\n            selected: isSelected ? without(model.selected, id) : [...model.selected, id],\n            anchor: id,\n          },\n        }\n      },\n      Ranged: ({ id, order }) => {\n        if (args.mode !== 'multiple') return { model }\n        const range = between(order, model.anchor, id)\n        const inRange = new Set(range)\n        const selected = [...model.selected.filter(other => !inRange.has(other)), ...range]\n        const anchor = model.anchor ?? id\n        // Shift-clicking the same item twice ranges over what is selected already.\n        return sameIds(selected, model.selected) && anchor === model.anchor\n          ? { model }\n          : { model: { selected, anchor } }\n      },\n      Replaced: ({ ids }) => {\n        const selected = args.mode === 'none' ? [] : [...new Set(ids)]\n        return sameIds(selected, model.selected)\n          ? { model }\n          : { model: { selected, anchor: model.anchor } }\n      },\n      Cleared: () =>\n        model.selected.length === 0 ? { model } : { model: { selected: [], anchor: model.anchor } },\n    }),\n})\n\nexport interface BehaviorOptions<Input, Slots> {\n  /** The slot holding the items, for `aria-multiselectable`. */\n  readonly container?: keyof Slots & string\n  /** The slot rendered once per item; must carry the item's id. */\n  readonly item: keyof Slots & string\n  readonly items: (input: Input) => Behaviors.Collection.Items<unknown>\n  /** Wire a plain click on each item to `Activated`. Default `true`; turn off\n   *  when `Press` or the view owns the click. */\n  readonly click?: boolean\n}\n\n/**\n * Writes `aria-selected` on each item from the placed slice, and\n * `aria-multiselectable` on the container in multiple mode; wires `OnClick`\n * to `Activated` unless told not to. A disabled item gets no click.\n */\nexport const behavior =\n  <Field extends string>(declared: Declared<typeof bundle, Field>, args: Args) =>\n  <Slots>(slots: Slots) =>\n  <Input extends { readonly [K in Field]: Model }, ParentMessage>(\n    options: BehaviorOptions<Input, Slots>,\n  ): Behavior.NamedBehavior<Slots, Input, ParentMessage> => {\n    const itemsOf = perInput(options.items)\n    const selectedOf = perInput((input: Input) => new Set(input[declared.field].selected))\n    return BundleBehavior.fromBundle(declared)(slots)<Input, ParentMessage>(\n      {\n        ...(options.container === undefined\n          ? {}\n          : {\n              [options.container]: {\n                requires: { capability: Capability.Container },\n                attributes: ({ h }) => [h.AriaMultiSelectable(args.mode === 'multiple')],\n              },\n            }),\n        [options.item]: {\n          requires: { capability: Capability.Interactive },\n          attributes: ({ input, h, item, send }) => {\n            if (item === undefined) return []\n            const items = itemsOf(input)\n            const id = item.id ?? items.ids[item.index]\n            if (id === undefined) return []\n            const clickable =\n              options.click !== false && args.mode !== 'none' && !items.isDisabled(item.index)\n            return [\n              h.AriaSelected(selectedOf(input).has(id)),\n              ...(clickable ? [h.OnClick(send(Message.Activated({ id })))] : []),\n            ]\n          },\n        },\n      },\n      { name: 'Selection' },\n    )\n  }\n"],"mappings":"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"}

package/dist/interaction/targets.d.ts

@@ -0,0 +1,15 @@
+import { TargetFact, TargetFact as TargetFact$1, TargetHovered, TargetPressed, Targets as mount, targetOf } from "../dom/targets.js";
+import { Behavior } from "foldkit-mixins";
+export interface BehaviorOptions<Slots, ParentMessage> {
+  /** The slot holding the marked descendants. */
+  readonly container: keyof Slots & string;
+  /** The attribute that marks a descendant, holding its id. */
+  readonly attribute: string;
+  /** Prevent a press's default, such as a link navigating. Default `false`. */
+  readonly preventDefault?: boolean;
+  /** Turns each fact into the view's Message. */
+  readonly toMessage: (fact: TargetFact$1) => ParentMessage;
+}
+export declare const behavior: <Slots>(slots: Slots) => <Input, ParentMessage>(options: BehaviorOptions<Slots, ParentMessage>) => Behavior.NamedBehavior<Slots, Input, ParentMessage>;
+export { type TargetFact, TargetHovered, TargetPressed, mount, targetOf };
+//# sourceMappingURL=targets.d.ts.map

package/dist/interaction/targets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.d.ts","names":["TargetFact"],"sources":["../../src/interaction/targets.ts"],"mappings":";;iBAkBiB,gBAAgB,OAAO;;WAE7B,iBAAiB;;WAEjB;;WAEA;;WAEA,YAAY,MAAMA,iBAAe;;qBAG/B,WACV,OAAK,OAAS,WACd,OAAO,eAAa,SACV,gBAAgB,OAAO,mBAC/B,SAAS,cAAc,OAAO,OAAO"}

package/dist/interaction/targets.js

@@ -0,0 +1,20 @@
+import * as Mount from "foldkit/mount";
+import { TargetHovered, TargetPressed, Targets, Targets as mount, targetOf } from "../dom/targets.js";
+import { Behavior, Capability } from "foldkit-mixins";
+// src/interaction/targets.ts
+/**
+* `Targets` as a Behavior: attaches the `foldkit-primitives/dom` Mount to a
+* container slot and maps what it reports into the view's Messages. No Bundle:
+* which descendant is under the pointer, or was pressed, is already a fact, and
+* what it means is the parent's `update`.
+*/
+const behavior = (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount: () => Mount.mapMessage(Targets({
+		attribute: options.attribute,
+		preventDefault: options.preventDefault ?? false
+	}), options.toMessage)
+}) }, { name: "Targets" });
+export { TargetHovered, TargetPressed, behavior, mount, targetOf };
+
+//# sourceMappingURL=targets.js.map

package/dist/interaction/targets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.js","names":["TargetsMount"],"sources":["../../src/interaction/targets.ts"],"sourcesContent":["/**\n * `Targets` as a Behavior: attaches the `foldkit-primitives/dom` Mount to a\n * container slot and maps what it reports into the view's Messages. No Bundle:\n * which descendant is under the pointer, or was pressed, is already a fact, and\n * what it means is the parent's `update`.\n */\nimport * as Mount from 'foldkit/mount'\nimport { Behavior, Capability } from 'foldkit-mixins'\nimport { Targets as TargetsMount, type TargetFact } from '../dom/targets.js'\n\nexport {\n  TargetHovered,\n  TargetPressed,\n  Targets as mount,\n  targetOf,\n  type TargetFact,\n} from '../dom/targets.js'\n\nexport interface BehaviorOptions<Slots, ParentMessage> {\n  /** The slot holding the marked descendants. */\n  readonly container: keyof Slots & string\n  /** The attribute that marks a descendant, holding its id. */\n  readonly attribute: string\n  /** Prevent a press's default, such as a link navigating. Default `false`. */\n  readonly preventDefault?: boolean\n  /** Turns each fact into the view's Message. */\n  readonly toMessage: (fact: TargetFact) => ParentMessage\n}\n\nexport const behavior =\n  <Slots>(slots: Slots) =>\n  <Input, ParentMessage>(\n    options: BehaviorOptions<Slots, ParentMessage>,\n  ): Behavior.NamedBehavior<Slots, Input, ParentMessage> =>\n    Behavior.forSlots(slots)<Input, ParentMessage>(\n      {\n        [options.container]: Behavior.slot({\n          requires: { capability: Capability.Container },\n          mount: () =>\n            Mount.mapMessage(\n              TargetsMount({\n                attribute: options.attribute,\n                preventDefault: options.preventDefault ?? false,\n              }),\n              options.toMessage,\n            ),\n        }),\n        // Keyed by a value the caller chose; `forSlots` checks the key exists.\n      } as unknown as Behavior.BehaviorSpec<Slots, Input, ParentMessage>,\n      { name: 'Targets' },\n    )\n"],"mappings":";;;;;;;;;;AA6BA,MAAa,YACH,WAEN,YAEA,SAAS,SAAS,KAAK,CAAC,CACtB,GACG,QAAQ,YAAY,SAAS,KAAK;CACjC,UAAU,EAAE,YAAY,WAAW,UAAU;CAC7C,aACE,MAAM,WACJA,QAAa;EACX,WAAW,QAAQ;EACnB,gBAAgB,QAAQ,kBAAkB;CAC5C,CAAC,GACD,QAAQ,SACV;AACJ,CAAC,EAEH,GACA,EAAE,MAAM,UAAU,CACpB"}

package/dist/interaction/tree-navigation.d.ts

@@ -0,0 +1,111 @@
+import { Schema } from "effect";
+import { Bundle, Declared } from "foldkit-bundle";
+import { Behavior } from "foldkit-mixins";
+import { KeyboardModifiers } from "foldkit/html";
+export declare const Model: Schema.Struct<{
+  /** The current row's id, or `null` before any row has been focused. */
+  readonly current: Schema.NullOr<Schema.String>;
+  /** The rows whose open state differs from `openByDefault`. */
+  readonly toggled: Schema.$Array<Schema.String>;
+}>;
+export type Model = typeof Model.Type;
+export declare const Message: import("foldkit/message").MessageUnion<{
+  /** A row became current: the user focused it, or a key moved there. */
+  readonly Focused: {
+    id: Schema.String;
+  };
+  readonly Opened: {
+    id: Schema.String;
+  };
+  readonly Closed: {
+    id: Schema.String;
+  };
+}>;
+export type Message = typeof Message.Type;
+export declare const Args: Schema.Struct<{
+  /** Whether a row with children starts open. */
+  readonly openByDefault: Schema.Boolean;
+}>;
+export type Args = typeof Args.Type;
+/** Whether a row is open, given the default and what was toggled. */
+export declare const isOpen: (model: Model, args: Args, id: string) => boolean;
+export declare const bundle: Bundle.Bundle<"TreeNavigation", {
+  readonly openByDefault: boolean;
+}, {
+  readonly current: string | null;
+  readonly toggled: readonly string[];
+}, {
+  readonly _tag: "Closed";
+  readonly id: string;
+} | {
+  readonly _tag: "Focused";
+  readonly id: string;
+} | {
+  readonly _tag: "Opened";
+  readonly id: string;
+}, never, never, never, void, {}, {}>;
+/** One row of the tree, in tree order: a parent comes before its children. */
+export interface Row {
+  readonly id: string;
+  /** The parent's id, or `null` for a top-level row. */
+  readonly parent: string | null;
+  /** Whether it has children, so it can be opened and closed. */
+  readonly branch: boolean;
+  readonly disabled?: boolean;
+}
+/** A row as it is showing: where it sits, for its ARIA attributes. */
+export interface Shown extends Row {
+  /** 1 for a top-level row. */
+  readonly level: number;
+  /** Its place among its siblings, from 1, and how many there are. */
+  readonly position: number;
+  readonly siblings: number;
+}
+/**
+ * The rows that are showing: every row whose ancestors are all open, with its
+ * level and its place among its siblings. A row whose parent is not a row is
+ * treated as top-level.
+ */
+export declare const shown: (rows: ReadonlyArray<Row>, model: Model, args: Args) => ReadonlyArray<Shown>;
+/** What a key does: move to a row, or open or close one. */
+export type Action = {
+  readonly _tag: 'Focus';
+  readonly id: string;
+} | {
+  readonly _tag: 'Open';
+  readonly id: string;
+} | {
+  readonly _tag: 'Close';
+  readonly id: string;
+};
+/**
+ * What a key does from the current row, over the rows that are showing, or
+ * `undefined` when it is not a key the tree handles. Disabled rows are stepped
+ * over. With nothing current, Down and Home land on the first row, Up and End
+ * on the last. Right and Left swap under `rtl`.
+ */
+export declare const move: (rows: ReadonlyArray<Shown>, current: string | null, key: string, modifiers: KeyboardModifiers, model: Model, args: Args, direction?: 'ltr' | 'rtl') => Action | undefined;
+/** The row that holds the tab stop: the current one while it is showing, else the first. */
+export declare const tabStop: (rows: ReadonlyArray<Shown>, current: string | null) => string | undefined;
+export interface BehaviorOptions<Input, Slots> {
+  /** The slot that receives the keys: the element with `role="tree"`. */
+  readonly container: keyof Slots & string;
+  /** The slot rendered once per showing row, with `item.id` or `item.index` into `shown`. */
+  readonly item: keyof Slots & string;
+  /** Every row, open or not, in tree order. */
+  readonly rows: (input: Input) => ReadonlyArray<Row>;
+  /** The DOM id a row's element carries. Default: the row's own id. */
+  readonly domId?: (id: string) => string;
+  readonly direction?: (input: Input) => 'ltr' | 'rtl';
+}
+/**
+ * Wires a placed `TreeNavigation` to the slots. The container's keys move focus
+ * to the row they pick, or open or close the current row with focus left where
+ * it is. Each showing row gets its id, `role="treeitem"`, `aria-level` (and
+ * the same level as `--fk-tree-level`, so one `calc` indents any depth),
+ * `aria-posinset`, `aria-setsize`, `aria-expanded` when it has children,
+ * `aria-disabled` when disabled, a roving `tabindex`, and `OnFocus` reporting
+ * it current. Every handled key is default-prevented.
+ */
+export declare const behavior: <Field extends string>(declared: Declared<typeof bundle, Field>, args: Args) => <Slots>(slots: Slots) => <Input extends { readonly [K in Field]: Model; }, ParentMessage>(options: BehaviorOptions<Input, Slots>) => Behavior.NamedBehavior<Slots, Input, ParentMessage>;
+//# sourceMappingURL=tree-navigation.d.ts.map

package/dist/interaction/tree-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-navigation.d.ts","names":[],"sources":["../../src/interaction/tree-navigation.ts"],"mappings":";;;;qBAyBa,OAAK,OAAA;;;;;;YAMN,eAAe,MAAM;qBAEpB,mCAAO;;;IAEP,IAAE,OAAA;;;IACH,IAAE,OAAA;;;IACF,IAAE,OAAA;;;YAEF,iBAAiB,QAAQ;qBAExB,MAAI,OAAA;;;;YAIL,cAAc,KAAK;;qBAGlB,SAAM,OAAW,OAAK,MAAQ,MAAI;qBAalC,QAAM,OAAA;;;;;;;;;;;;;;;;iBAqBF;WACN;;WAEA;;WAEA;WACA;;;iBAIM,cAAc;;WAEpB;;WAEA;WACA;;;;;;;qBAQE,QAAK,MAAU,cAAc,MAAI,OAAS,OAAK,MAAQ,SAAO,cAAc;;YAiC7E;WACG;WAAwB;;WACxB;WAAuB;;WACvB;WAAwB;;;;;;;;qBAW1B,OAAI,MACT,cAAc,QAAM,wBACJ,aACX,WACA,mBAAiB,OACrB,OAAK,MACN,MAAI,8BAET;;qBA6BU,UAAO,MAAU,cAAc,QAAM;iBAKjC,gBAAgB,OAAO;;WAE7B,iBAAiB;;WAEjB,YAAY;;WAEZ,OAAO,OAAO,UAAU,cAAc;;WAEtC,SAAS;WACT,aAAa,OAAO;;;;;;;;;;;qBAqBlB,WACV,sBAAoB,UAAY,gBAAgB,QAAQ,QAAM,MAAQ,UACtE,OAAK,OAAS,WACd,0BAA0B,KAAK,QAAQ,UAAS,eAAa,SACnD,gBAAgB,OAAO,WAC/B,SAAS,cAAc,OAAO,OAAO"}

package/dist/interaction/tree-navigation.js

@@ -0,0 +1,207 @@
+import { Option, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { Bundle } from "foldkit-bundle";
+import { perInput } from "../internal.js";
+import { FollowTabStop } from "../dom/follow-tab-stop.js";
+import { Behavior, Capability } from "foldkit-mixins";
+import { idSelector } from "./roving-tabindex.js";
+// src/interaction/tree-navigation.ts
+/**
+* Keyboard navigation of a tree (a file explorer, a page's layers, a nested
+* menu), after the WAI-ARIA tree pattern: one tab stop, Up and Down through the
+* rows that are showing, Right to open a row or step into it, Left to close it
+* or step out to its parent, Home and End to the first and last row.
+*
+* The Model slice is the current row's id and which rows are open. Openness is
+* stored as the rows `toggled` away from a default, so a layers panel that
+* starts with everything open and a file tree that starts closed are the same
+* bundle with a different `openByDefault`, and neither stores every row.
+*
+* Which rows exist is the view's to say, each with its parent, in tree order.
+* What a key does is a pure function of those rows and the Model; the Behavior
+* wires it to the slots and writes the tree's ARIA attributes.
+*/
+const Model = Schema.Struct({
+	/** The current row's id, or `null` before any row has been focused. */
+	current: Schema.NullOr(Schema.String),
+	/** The rows whose open state differs from `openByDefault`. */
+	toggled: Schema.Array(Schema.String)
+});
+const Message = defineMessageUnion({
+	/** A row became current: the user focused it, or a key moved there. */
+	Focused: { id: Schema.String },
+	Opened: { id: Schema.String },
+	Closed: { id: Schema.String }
+});
+const Args = Schema.Struct({ 
+/** Whether a row with children starts open. */
+openByDefault: Schema.Boolean });
+/** Whether a row is open, given the default and what was toggled. */
+const isOpen = (model, args, id) => args.openByDefault !== model.toggled.includes(id);
+const setOpen = (model, args, id, open) => isOpen(model, args, id) === open ? model : {
+	...model,
+	toggled: model.toggled.includes(id) ? model.toggled.filter((toggled) => toggled !== id) : [...model.toggled, id]
+};
+const bundle = Bundle.make("TreeNavigation", {
+	Model,
+	Message,
+	args: Args,
+	init: () => ({ model: {
+		current: null,
+		toggled: []
+	} }),
+	update: (model, message, args) => {
+		switch (message._tag) {
+			case "Focused": return model.current === message.id ? { model } : { model: {
+				...model,
+				current: message.id
+			} };
+			case "Opened": return { model: setOpen(model, args, message.id, true) };
+			case "Closed": return { model: setOpen(model, args, message.id, false) };
+		}
+	}
+});
+/**
+* The rows that are showing: every row whose ancestors are all open, with its
+* level and its place among its siblings. A row whose parent is not a row is
+* treated as top-level.
+*/
+const shown = (rows, model, args) => {
+	const byId = new Map(rows.map((row) => [row.id, row]));
+	const siblingsOf = /* @__PURE__ */ new Map();
+	const positionOf = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const parent = row.parent !== null && byId.has(row.parent) ? row.parent : null;
+		const count = (siblingsOf.get(parent) ?? 0) + 1;
+		siblingsOf.set(parent, count);
+		positionOf.set(row.id, count);
+	}
+	const levels = /* @__PURE__ */ new Map();
+	const showing = /* @__PURE__ */ new Map();
+	const result = [];
+	for (const row of rows) {
+		const parent = row.parent !== null && byId.has(row.parent) ? row.parent : null;
+		const level = parent === null ? 1 : (levels.get(parent) ?? 0) + 1;
+		levels.set(row.id, level);
+		const visible = parent === null || showing.get(parent) === true && isOpen(model, args, parent);
+		showing.set(row.id, visible);
+		if (!visible) continue;
+		result.push({
+			...row,
+			level,
+			position: positionOf.get(row.id) ?? 1,
+			siblings: siblingsOf.get(parent) ?? 1
+		});
+	}
+	return result;
+};
+const isPlain = (modifiers) => !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+/**
+* What a key does from the current row, over the rows that are showing, or
+* `undefined` when it is not a key the tree handles. Disabled rows are stepped
+* over. With nothing current, Down and Home land on the first row, Up and End
+* on the last. Right and Left swap under `rtl`.
+*/
+const move = (rows, current, key, modifiers, model, args, direction = "ltr") => {
+	const enabled = rows.filter((row) => row.disabled !== true);
+	if (enabled.length === 0 || !isPlain(modifiers)) return void 0;
+	const focus = (row) => row === void 0 ? void 0 : {
+		_tag: "Focus",
+		id: row.id
+	};
+	const at = enabled.findIndex((row) => row.id === current);
+	const inward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const outward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (key === "Home") return focus(enabled[0]);
+	if (key === "End") return focus(enabled[enabled.length - 1]);
+	if (key === "ArrowDown") return focus(at === -1 ? enabled[0] : enabled[Math.min(at + 1, enabled.length - 1)]);
+	if (key === "ArrowUp") return focus(at === -1 ? enabled[enabled.length - 1] : enabled[Math.max(at - 1, 0)]);
+	const row = enabled[at];
+	if (row === void 0) return key === inward || key === outward ? focus(enabled[0]) : void 0;
+	if (key === inward) {
+		if (!row.branch) return void 0;
+		if (!isOpen(model, args, row.id)) return {
+			_tag: "Open",
+			id: row.id
+		};
+		return focus(enabled.find((child) => child.parent === row.id));
+	}
+	if (key === outward) {
+		if (row.branch && isOpen(model, args, row.id)) return {
+			_tag: "Close",
+			id: row.id
+		};
+		return focus(enabled.find((parent) => parent.id === row.parent));
+	}
+};
+/** The row that holds the tab stop: the current one while it is showing, else the first. */
+const tabStop = (rows, current) => {
+	return (rows.find((row) => row.id === current && row.disabled !== true) ?? rows.find((row) => row.disabled !== true))?.id;
+};
+/**
+* Wires a placed `TreeNavigation` to the slots. The container's keys move focus
+* to the row they pick, or open or close the current row with focus left where
+* it is. Each showing row gets its id, `role="treeitem"`, `aria-level` (and
+* the same level as `--fk-tree-level`, so one `calc` indents any depth),
+* `aria-posinset`, `aria-setsize`, `aria-expanded` when it has children,
+* `aria-disabled` when disabled, a roving `tabindex`, and `OnFocus` reporting
+* it current. Every handled key is default-prevented.
+*/
+const behavior = (declared, args) => (slots) => (options) => {
+	const wrap = (message) => declared.wrapper.make(message);
+	const slice = (input) => input[declared.field];
+	const domId = options.domId ?? ((id) => id);
+	const prepare = perInput((input) => {
+		const model = slice(input);
+		const rows = shown(options.rows(input), model, args);
+		return {
+			model,
+			rows,
+			byId: new Map(rows.map((row) => [row.id, row])),
+			stop: tabStop(rows, model.current)
+		};
+	});
+	return Behavior.forSlots(slots)({
+		[options.container]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			mount: () => FollowTabStop(),
+			attributes: ({ input, h }) => {
+				const { model, rows } = prepare(input);
+				const direction = options.direction?.(input) ?? "ltr";
+				return [h.OnKeyDownFocus((key, modifiers) => {
+					const action = move(rows, model.current, key, modifiers, model, args, direction);
+					if (action === void 0) return Option.none();
+					const message = action._tag === "Focus" ? Message.Focused({ id: action.id }) : action._tag === "Open" ? Message.Opened({ id: action.id }) : Message.Closed({ id: action.id });
+					return Option.some({
+						focusSelector: idSelector(domId(action.id)),
+						message: wrap(message)
+					});
+				})];
+			}
+		}),
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Focusable },
+			attributes: ({ input, h, item }) => {
+				if (item === void 0) return [];
+				const { model, rows, byId, stop } = prepare(input);
+				const row = item.id === void 0 ? rows[item.index] : byId.get(item.id);
+				if (row === void 0) return [];
+				return [
+					h.Id(domId(row.id)),
+					h.Role("treeitem"),
+					h.AriaLevel(row.level),
+					h.Style({ "--fk-tree-level": String(row.level) }),
+					h.AriaPosinset(row.position),
+					h.AriaSetsize(row.siblings),
+					...row.branch ? [h.AriaExpanded(isOpen(model, args, row.id))] : [],
+					...row.disabled === true ? [h.AriaDisabled(true)] : [],
+					h.Tabindex(stop === row.id ? 0 : -1),
+					h.OnFocus(wrap(Message.Focused({ id: row.id })))
+				];
+			}
+		})
+	}, { name: "TreeNavigation" });
+};
+export { Args, Message, Model, behavior, bundle, isOpen, move, shown, tabStop };
+
+//# sourceMappingURL=tree-navigation.js.map