@aihu/primitives 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fellwork
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @aihu/primitives
+
+> **Aihu** — agentic discovery and interaction, for human purpose.
+
+aihu headless behavior primitives — WAI-ARIA APG patterns as vanilla custom elements, zero CSS.
+
+<!-- BEGIN_HANDWRITTEN: prose -->
+The **headless behavior layer** on top of the aihu CSS engine. Every primitive is a
+vanilla custom element that manages focus, keyboard interaction, ARIA wiring, and
+controlled/uncontrolled state — the WAI-ARIA APG patterns — while emitting **NO CSS**.
+Consumers style via the CSS engine's `cn()` + style packs.
+
+State lives on `@aihu/signals`; DOM structure comes from `@aihu/arbor`; focus/ARIA use
+native DOM APIs; cross-component coordination uses a self-contained DOM-walk context
+(`@aihu/primitives/context`).
+
+### Surface
+
+| Entry | What it is |
+|---|---|
+| `@aihu/primitives/context` | `createDomContext` / `provideContext` / `injectContext` — live DOM-walk ancestor traversal, Symbol-keyed, signal-backed |
+| `@aihu/primitives/presence-gate` | mount/unmount with exit-animation hold |
+| `@aihu/primitives/form-control` | disabled/required/invalid + ARIA association |
+| `@aihu/primitives/config-provider` | colorScheme/density/dir via reactive DOM context |
+| `@aihu/primitives/roving-focus` | arrow-key roving tabindex (orientation/loop/RTL) |
+| `@aihu/primitives/collection` | DOM-ordered descendant registration |
+| `@aihu/primitives/dialog` | dialog-root + pieces (focus-trap, return-focus, escape) — APG Dialog Modal |
+| `@aihu/primitives/tooltip` | tooltip-root + pieces (reuses css-engine `position()` shim) — APG Tooltip |
+| `@aihu/primitives/button` | headless button base (ARIA/keyboard/toggle/disabled) — APG Button |
+
+### Local development
+
+```bash
+bun run build    # rolldown multi-entry → dist/<entry>.js
+bun run test     # vitest (keyboard + APG conformance)
+bun run typecheck
+```
+<!-- END_HANDWRITTEN: prose -->
+
+## Install
+
+<!-- BEGIN_AUTOGEN: install -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+```bash
+npm install @aihu/primitives
+# or
+bun add @aihu/primitives
+```
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: install -->
+
+## Package facts
+
+<!-- BEGIN_AUTOGEN: stats -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+| | |
+|---|---|
+| **Version** | `0.0.1` |
+| **Tier** | E — Held private (unmapped tier) |
+| **Published files** | 3 entries |
+| **License** | MIT |
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: stats -->
+
+## Exports
+
+<!-- BEGIN_AUTOGEN: exports -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+| Subpath | ESM | CJS |
+|---|---|---|
+| `.` | `./dist/index.js` | `—` |
+| `./context` | `./dist/dom-context.js` | `—` |
+| `./presence-gate` | `./dist/presence-gate.js` | `—` |
+| `./form-control` | `./dist/form-control.js` | `—` |
+| `./config-provider` | `./dist/config-provider.js` | `—` |
+| `./roving-focus` | `./dist/roving-focus.js` | `—` |
+| `./collection` | `./dist/collection.js` | `—` |
+| `./dialog` | `./dist/dialog.js` | `—` |
+| `./tooltip` | `./dist/tooltip.js` | `—` |
+| `./button` | `./dist/button.js` | `—` |
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: exports -->
+
+## Dependencies
+
+<!-- BEGIN_AUTOGEN: deps -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+**Dependencies:**
+
+- `@aihu/signals` — `workspace:*`
+- `@aihu/arbor` — `workspace:*`
+- `@aihu/css-engine` — `workspace:*`
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: deps -->
+
+## See also
+
+<!-- BEGIN_AUTOGEN: see-also -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+- [Aihu framework root](../../README.md)
+- [v1.1 roadmap](../../docs/roadmap/SUMMARY.md)
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: see-also -->
+
+## License
+
+<!-- BEGIN_AUTOGEN: license -->
+<!-- regenerate: bun scripts/sync-readme.ts (also runs in pre-commit + CI) -->
+
+MIT — see [LICENSE](../../LICENSE).
+
+<sub><i>Auto-generated against `@aihu/primitives@0.0.1`.</i></sub>
+
+<!-- END_AUTOGEN: license -->

package/dist/button-C-8c-A17.js

@@ -0,0 +1,126 @@
+import { injectValue } from "./dom-context.js";
+import { formControlContext } from "./form-control.js";
+import { effect, signal } from "@aihu/signals";
+//#region src/button/button.ts
+/**
+* `AihuButton` — headless button base class (WAI-ARIA APG Button). Consumers
+* (or Plan 5 recipes) extend it; it is NOT a registered tag in this package.
+* Use `defineButton(tag)` to register a concrete element for tests/consumers.
+*
+* Behavior:
+* - If the host is NOT a native `<button>`, sets `role="button"` +
+*   `tabindex="0"` and handles Enter / Space to fire a synthetic `click`
+*   (the APG Button keyboard contract). A native `<button>` defers to native
+*   semantics.
+* - `aria-pressed` reflects the `pressed` toggle state.
+* - `aria-disabled` + suppressed activation when `disabled`.
+* - Inherits `disabled` from a `FormControlContext` ancestor (Task 5) so a
+*   button inside a disabled `form-control` is disabled too.
+* - `data-state` reflects `pressed` / `disabled`. Emits NO CSS.
+*/
+var AihuButton = class extends HTMLElement {
+	static observedAttributes = [
+		"disabled",
+		"pressed",
+		"type"
+	];
+	_disabled = signal(false);
+	_pressed = signal(null);
+	_inheritedDisabled = null;
+	_disposers = [];
+	/** True when this is a toggle button (the `pressed` attribute is present). */
+	_isToggle = false;
+	get disabled() {
+		return this._disabled[0];
+	}
+	get pressed() {
+		return this._pressed[0];
+	}
+	get _isNativeButton() {
+		return this.tagName === "BUTTON";
+	}
+	connectedCallback() {
+		this._isToggle = this.hasAttribute("pressed");
+		this._syncFromAttrs();
+		if (!this._isNativeButton) {
+			if (!this.hasAttribute("role")) this.setAttribute("role", "button");
+			if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+			this.addEventListener("keydown", this._onKeydown);
+		}
+		this.addEventListener("click", this._onClickCapture, true);
+		try {
+			this._inheritedDisabled = injectValue(this, formControlContext).disabled;
+		} catch {
+			this._inheritedDisabled = null;
+		}
+		this._disposers.push(effect(() => {
+			const disabled = this._effectiveDisabled();
+			if (disabled) this.setAttribute("aria-disabled", "true");
+			else this.removeAttribute("aria-disabled");
+			if (this._isToggle) this.setAttribute("aria-pressed", String(this._pressed[0]() === true));
+			this.setAttribute("data-state", this._stateString(disabled));
+		}));
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this._onKeydown);
+		this.removeEventListener("click", this._onClickCapture, true);
+		for (const d of this._disposers) d();
+		this._disposers = [];
+	}
+	attributeChangedCallback(name, _old, value) {
+		switch (name) {
+			case "disabled":
+				this._disabled[1](value !== null);
+				break;
+			case "pressed":
+				this._isToggle = value !== null ? true : this._isToggle;
+				this._pressed[1](value !== null);
+				break;
+		}
+	}
+	/** Toggle a toggle-button's pressed state. */
+	toggle() {
+		if (!this._isToggle) return;
+		this._pressed[1](!(this._pressed[0]() === true));
+	}
+	_effectiveDisabled() {
+		if (this._disabled[0]()) return true;
+		return this._inheritedDisabled ? this._inheritedDisabled() : false;
+	}
+	_stateString(disabled) {
+		if (disabled) return "disabled";
+		if (this._isToggle) return this._pressed[0]() === true ? "on" : "off";
+		return "idle";
+	}
+	_onKeydown = (ev) => {
+		if (this._effectiveDisabled()) return;
+		if (ev.key === "Enter" || ev.key === " " || ev.key === "Spacebar") {
+			ev.preventDefault();
+			this.click();
+		}
+	};
+	_onClickCapture = (ev) => {
+		if (this._effectiveDisabled()) {
+			ev.preventDefault();
+			ev.stopImmediatePropagation();
+			return;
+		}
+		if (this._isToggle) this.toggle();
+	};
+	_syncFromAttrs() {
+		this._disabled[1](this.hasAttribute("disabled"));
+		if (this._isToggle) this._pressed[1](this.getAttribute("pressed") !== "false");
+	}
+};
+/** Register a concrete button tag backed by `AihuButton` (idempotent). */
+function defineButton(tag) {
+	if (!customElements.get(tag)) {
+		class TaggedButton extends AihuButton {}
+		customElements.define(tag, TaggedButton);
+	}
+	return AihuButton;
+}
+//#endregion
+export { defineButton as n, AihuButton as t };
+
+//# sourceMappingURL=button-C-8c-A17.js.map

package/dist/button-C-8c-A17.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-C-8c-A17.js","names":[],"sources":["../src/button/button.ts"],"sourcesContent":["/**\n * `AihuButton` — headless button base class (WAI-ARIA APG Button). Consumers\n * (or Plan 5 recipes) extend it; it is NOT a registered tag in this package.\n * Use `defineButton(tag)` to register a concrete element for tests/consumers.\n *\n * Behavior:\n * - If the host is NOT a native `<button>`, sets `role=\"button\"` +\n *   `tabindex=\"0\"` and handles Enter / Space to fire a synthetic `click`\n *   (the APG Button keyboard contract). A native `<button>` defers to native\n *   semantics.\n * - `aria-pressed` reflects the `pressed` toggle state.\n * - `aria-disabled` + suppressed activation when `disabled`.\n * - Inherits `disabled` from a `FormControlContext` ancestor (Task 5) so a\n *   button inside a disabled `form-control` is disabled too.\n * - `data-state` reflects `pressed` / `disabled`. Emits NO CSS.\n */\n\nimport { effect, type Read, signal } from '@aihu/signals'\nimport { injectValue } from '../dom-context.ts'\nimport { formControlContext } from '../form-control/index.ts'\n\nexport type ButtonType = 'button' | 'submit' | 'reset'\n\nexport class AihuButton extends HTMLElement {\n  static readonly observedAttributes = ['disabled', 'pressed', 'type']\n\n  private readonly _disabled = signal(false)\n  private readonly _pressed = signal<boolean | null>(null)\n  private _inheritedDisabled: Read<boolean> | null = null\n  private _disposers: Array<() => void> = []\n\n  /** True when this is a toggle button (the `pressed` attribute is present). */\n  private _isToggle = false\n\n  get disabled(): Read<boolean> {\n    return this._disabled[0]\n  }\n  get pressed(): Read<boolean | null> {\n    return this._pressed[0]\n  }\n\n  private get _isNativeButton(): boolean {\n    return this.tagName === 'BUTTON'\n  }\n\n  connectedCallback(): void {\n    this._isToggle = this.hasAttribute('pressed')\n    this._syncFromAttrs()\n\n    if (!this._isNativeButton) {\n      if (!this.hasAttribute('role')) this.setAttribute('role', 'button')\n      if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0')\n      this.addEventListener('keydown', this._onKeydown)\n    }\n    // Suppress activation when disabled (capture so it beats consumer handlers).\n    this.addEventListener('click', this._onClickCapture, true)\n\n    // Inherit disabled from a FormControlContext ancestor, if any.\n    try {\n      this._inheritedDisabled = injectValue(this, formControlContext).disabled\n    } catch {\n      this._inheritedDisabled = null\n    }\n\n    this._disposers.push(\n      effect(() => {\n        const disabled = this._effectiveDisabled()\n        if (disabled) this.setAttribute('aria-disabled', 'true')\n        else this.removeAttribute('aria-disabled')\n\n        if (this._isToggle) {\n          this.setAttribute('aria-pressed', String(this._pressed[0]() === true))\n        }\n        this.setAttribute('data-state', this._stateString(disabled))\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('click', this._onClickCapture, true)\n    for (const d of this._disposers) d()\n    this._disposers = []\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    switch (name) {\n      case 'disabled':\n        this._disabled[1](value !== null)\n        break\n      case 'pressed':\n        this._isToggle = value !== null ? true : this._isToggle\n        this._pressed[1](value !== null)\n        break\n    }\n  }\n\n  /** Toggle a toggle-button's pressed state. */\n  toggle(): void {\n    if (!this._isToggle) return\n    this._pressed[1](!(this._pressed[0]() === true))\n  }\n\n  private _effectiveDisabled(): boolean {\n    if (this._disabled[0]()) return true\n    return this._inheritedDisabled ? this._inheritedDisabled() : false\n  }\n\n  private _stateString(disabled: boolean): string {\n    if (disabled) return 'disabled'\n    if (this._isToggle) return this._pressed[0]() === true ? 'on' : 'off'\n    return 'idle'\n  }\n\n  private readonly _onKeydown = (ev: KeyboardEvent): void => {\n    if (this._effectiveDisabled()) return\n    if (ev.key === 'Enter' || ev.key === ' ' || ev.key === 'Spacebar') {\n      ev.preventDefault()\n      this.click()\n    }\n  }\n\n  private readonly _onClickCapture = (ev: Event): void => {\n    if (this._effectiveDisabled()) {\n      ev.preventDefault()\n      ev.stopImmediatePropagation()\n      return\n    }\n    if (this._isToggle) this.toggle()\n  }\n\n  private _syncFromAttrs(): void {\n    this._disabled[1](this.hasAttribute('disabled'))\n    if (this._isToggle) this._pressed[1](this.getAttribute('pressed') !== 'false')\n  }\n}\n\n/** Register a concrete button tag backed by `AihuButton` (idempotent). */\nexport function defineButton(tag: string): typeof AihuButton {\n  if (!customElements.get(tag)) {\n    // A fresh subclass per tag so multiple tags can be registered.\n    class TaggedButton extends AihuButton {}\n    customElements.define(tag, TaggedButton)\n  }\n  return AihuButton\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,aAAb,cAAgC,YAAY;CAC1C,OAAgB,qBAAqB;EAAC;EAAY;EAAW;EAAO;CAEpE,YAA6B,OAAO,MAAM;CAC1C,WAA4B,OAAuB,KAAK;CACxD,qBAAmD;CACnD,aAAwC,EAAE;;CAG1C,YAAoB;CAEpB,IAAI,WAA0B;EAC5B,OAAO,KAAK,UAAU;;CAExB,IAAI,UAAgC;EAClC,OAAO,KAAK,SAAS;;CAGvB,IAAY,kBAA2B;EACrC,OAAO,KAAK,YAAY;;CAG1B,oBAA0B;EACxB,KAAK,YAAY,KAAK,aAAa,UAAU;EAC7C,KAAK,gBAAgB;EAErB,IAAI,CAAC,KAAK,iBAAiB;GACzB,IAAI,CAAC,KAAK,aAAa,OAAO,EAAE,KAAK,aAAa,QAAQ,SAAS;GACnE,IAAI,CAAC,KAAK,aAAa,WAAW,EAAE,KAAK,aAAa,YAAY,IAAI;GACtE,KAAK,iBAAiB,WAAW,KAAK,WAAW;;EAGnD,KAAK,iBAAiB,SAAS,KAAK,iBAAiB,KAAK;EAG1D,IAAI;GACF,KAAK,qBAAqB,YAAY,MAAM,mBAAmB,CAAC;UAC1D;GACN,KAAK,qBAAqB;;EAG5B,KAAK,WAAW,KACd,aAAa;GACX,MAAM,WAAW,KAAK,oBAAoB;GAC1C,IAAI,UAAU,KAAK,aAAa,iBAAiB,OAAO;QACnD,KAAK,gBAAgB,gBAAgB;GAE1C,IAAI,KAAK,WACP,KAAK,aAAa,gBAAgB,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,CAAC;GAExE,KAAK,aAAa,cAAc,KAAK,aAAa,SAAS,CAAC;IAC5D,CACH;;CAGH,uBAA6B;EAC3B,KAAK,oBAAoB,WAAW,KAAK,WAAW;EACpD,KAAK,oBAAoB,SAAS,KAAK,iBAAiB,KAAK;EAC7D,KAAK,MAAM,KAAK,KAAK,YAAY,GAAG;EACpC,KAAK,aAAa,EAAE;;CAGtB,yBAAyB,MAAc,MAAqB,OAA4B;EACtF,QAAQ,MAAR;GACE,KAAK;IACH,KAAK,UAAU,GAAG,UAAU,KAAK;IACjC;GACF,KAAK;IACH,KAAK,YAAY,UAAU,OAAO,OAAO,KAAK;IAC9C,KAAK,SAAS,GAAG,UAAU,KAAK;IAChC;;;;CAKN,SAAe;EACb,IAAI,CAAC,KAAK,WAAW;EACrB,KAAK,SAAS,GAAG,EAAE,KAAK,SAAS,IAAI,KAAK,MAAM;;CAGlD,qBAAsC;EACpC,IAAI,KAAK,UAAU,IAAI,EAAE,OAAO;EAChC,OAAO,KAAK,qBAAqB,KAAK,oBAAoB,GAAG;;CAG/D,aAAqB,UAA2B;EAC9C,IAAI,UAAU,OAAO;EACrB,IAAI,KAAK,WAAW,OAAO,KAAK,SAAS,IAAI,KAAK,OAAO,OAAO;EAChE,OAAO;;CAGT,cAA+B,OAA4B;EACzD,IAAI,KAAK,oBAAoB,EAAE;EAC/B,IAAI,GAAG,QAAQ,WAAW,GAAG,QAAQ,OAAO,GAAG,QAAQ,YAAY;GACjE,GAAG,gBAAgB;GACnB,KAAK,OAAO;;;CAIhB,mBAAoC,OAAoB;EACtD,IAAI,KAAK,oBAAoB,EAAE;GAC7B,GAAG,gBAAgB;GACnB,GAAG,0BAA0B;GAC7B;;EAEF,IAAI,KAAK,WAAW,KAAK,QAAQ;;CAGnC,iBAA+B;EAC7B,KAAK,UAAU,GAAG,KAAK,aAAa,WAAW,CAAC;EAChD,IAAI,KAAK,WAAW,KAAK,SAAS,GAAG,KAAK,aAAa,UAAU,KAAK,QAAQ;;;;AAKlF,SAAgB,aAAa,KAAgC;CAC3D,IAAI,CAAC,eAAe,IAAI,IAAI,EAAE;EAE5B,MAAM,qBAAqB,WAAW;EACtC,eAAe,OAAO,KAAK,aAAa;;CAE1C,OAAO"}

package/dist/button.d.ts

@@ -0,0 +1,2 @@
+import { n as ButtonType, r as defineButton, t as AihuButton } from "./index-DPD4L6Nj.js";
+export { AihuButton, ButtonType, defineButton };

package/dist/button.js

@@ -0,0 +1,2 @@
+import { n as defineButton, t as AihuButton } from "./button-C-8c-A17.js";
+export { AihuButton, defineButton };

package/dist/collection.d.ts

@@ -0,0 +1,26 @@
+import { DomContext } from "./dom-context.js";
+import { Read } from "@aihu/signals";
+
+//#region src/collection/index.d.ts
+interface CollectionContextValue {
+  /** Register `el`; returns a disposer that unregisters it. */
+  register(el: Element): () => void;
+  /** Registered descendants, kept in DOM order. */
+  readonly items: Read<Element[]>;
+}
+declare const collectionContext: DomContext<CollectionContextValue>;
+/** The registration mechanism, usable standalone (roving-focus reuses it). */
+declare function createCollection(): CollectionContextValue;
+declare class AihuCollection extends HTMLElement {
+  private readonly _collection;
+  /** Registered descendants in DOM order. */
+  get items(): Read<Element[]>;
+  /** Register `el` into this collection; returns an unregister disposer. */
+  register(el: Element): () => void;
+  constructor();
+}
+/** Register `<aihu-collection>` (idempotent). */
+declare function defineCollection(tag?: string): void;
+//#endregion
+export { AihuCollection, CollectionContextValue, collectionContext, createCollection, defineCollection };
+//# sourceMappingURL=collection.d.ts.map

package/dist/collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.d.ts","names":[],"sources":["../src/collection/index.ts"],"mappings":";;;;UAeiB,sBAAA;EAEF;EAAb,QAAA,CAAS,EAAA,EAAI,OAAA;EAEJ;EAAA,SAAA,KAAA,EAAO,IAAA,CAAK,OAAA;AAAA;AAAA,cAGV,iBAAA,EAAiB,UAAA,CAAA,sBAAA;;iBAad,gBAAA,CAAA,GAAoB,sBAAA;AAAA,cAmBvB,cAAA,SAAuB,WAAA;EAAA,iBACjB,WAAA;EAjCW;EAAA,IAoCxB,KAAA,CAAA,GAAS,IAAA,CAAK,OAAA;EAvBJ;EA4Bd,QAAA,CAAS,EAAA,EAAI,OAAA;;;;iBAYC,gBAAA,CAAiB,GAAA"}

package/dist/collection.js

@@ -0,0 +1,72 @@
+import { createDomContext, provideContext } from "./dom-context.js";
+import { signal } from "@aihu/signals";
+//#region src/collection/index.ts
+/**
+* `<aihu-collection>` — descendant-registration substrate (the Radix
+* `Collection` pattern) implemented over the DOM-walk context. Descendants call
+* `register(el)` on connect (getting back an unregister disposer for
+* disconnect); the collection keeps its `items` signal in DOM order. The
+* substrate `roving-focus`, menu-style, and future list primitives build on.
+* Structural — no ARIA, no CSS.
+*
+* Owned signals: `items` — ordered signal array of registered descendants.
+* Context: provides `collectionContext` exposing `{ register, items }`.
+*/
+const collectionContext = createDomContext("collection");
+/** Sort a set of elements into DOM (document) order. */
+function sortDomOrder(els) {
+	return [...els].sort((a, b) => {
+		const rel = a.compareDocumentPosition(b);
+		if (rel & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+		if (rel & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+		return 0;
+	});
+}
+/** The registration mechanism, usable standalone (roving-focus reuses it). */
+function createCollection() {
+	const members = /* @__PURE__ */ new Set();
+	const [items, setItems] = signal([]);
+	const resync = () => {
+		setItems(sortDomOrder(members));
+	};
+	return {
+		items,
+		register(el) {
+			members.add(el);
+			resync();
+			return () => {
+				members.delete(el);
+				resync();
+			};
+		}
+	};
+}
+var AihuCollection = class extends HTMLElement {
+	_collection = createCollection();
+	/** Registered descendants in DOM order. */
+	get items() {
+		return this._collection.items;
+	}
+	/** Register `el` into this collection; returns an unregister disposer. */
+	register(el) {
+		return this._collection.register(el);
+	}
+	constructor() {
+		super();
+		provideContext(this, collectionContext, this._collection);
+	}
+};
+let _defined = false;
+/** Register `<aihu-collection>` (idempotent). */
+function defineCollection(tag = "aihu-collection") {
+	if (_defined || customElements.get(tag)) {
+		_defined = true;
+		return;
+	}
+	customElements.define(tag, AihuCollection);
+	_defined = true;
+}
+//#endregion
+export { AihuCollection, collectionContext, createCollection, defineCollection };
+
+//# sourceMappingURL=collection.js.map

package/dist/collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.js","names":[],"sources":["../src/collection/index.ts"],"sourcesContent":["/**\n * `<aihu-collection>` — descendant-registration substrate (the Radix\n * `Collection` pattern) implemented over the DOM-walk context. Descendants call\n * `register(el)` on connect (getting back an unregister disposer for\n * disconnect); the collection keeps its `items` signal in DOM order. The\n * substrate `roving-focus`, menu-style, and future list primitives build on.\n * Structural — no ARIA, no CSS.\n *\n * Owned signals: `items` — ordered signal array of registered descendants.\n * Context: provides `collectionContext` exposing `{ register, items }`.\n */\n\nimport { type Read, signal } from '@aihu/signals'\nimport { createDomContext, provideContext } from '../dom-context.ts'\n\nexport interface CollectionContextValue {\n  /** Register `el`; returns a disposer that unregisters it. */\n  register(el: Element): () => void\n  /** Registered descendants, kept in DOM order. */\n  readonly items: Read<Element[]>\n}\n\nexport const collectionContext = createDomContext<CollectionContextValue>('collection')\n\n/** Sort a set of elements into DOM (document) order. */\nfunction sortDomOrder(els: Set<Element>): Element[] {\n  return [...els].sort((a, b) => {\n    const rel = a.compareDocumentPosition(b)\n    if (rel & Node.DOCUMENT_POSITION_FOLLOWING) return -1\n    if (rel & Node.DOCUMENT_POSITION_PRECEDING) return 1\n    return 0\n  })\n}\n\n/** The registration mechanism, usable standalone (roving-focus reuses it). */\nexport function createCollection(): CollectionContextValue {\n  const members = new Set<Element>()\n  const [items, setItems] = signal<Element[]>([])\n  const resync = (): void => {\n    setItems(sortDomOrder(members))\n  }\n  return {\n    items,\n    register(el: Element): () => void {\n      members.add(el)\n      resync()\n      return () => {\n        members.delete(el)\n        resync()\n      }\n    },\n  }\n}\n\nexport class AihuCollection extends HTMLElement {\n  private readonly _collection = createCollection()\n\n  /** Registered descendants in DOM order. */\n  get items(): Read<Element[]> {\n    return this._collection.items\n  }\n\n  /** Register `el` into this collection; returns an unregister disposer. */\n  register(el: Element): () => void {\n    return this._collection.register(el)\n  }\n\n  constructor() {\n    super()\n    provideContext(this, collectionContext, this._collection)\n  }\n}\n\nlet _defined = false\n/** Register `<aihu-collection>` (idempotent). */\nexport function defineCollection(tag = 'aihu-collection'): void {\n  if (_defined || customElements.get(tag)) {\n    _defined = true\n    return\n  }\n  customElements.define(tag, AihuCollection)\n  _defined = true\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAa,oBAAoB,iBAAyC,aAAa;;AAGvF,SAAS,aAAa,KAA8B;CAClD,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM;EAC7B,MAAM,MAAM,EAAE,wBAAwB,EAAE;EACxC,IAAI,MAAM,KAAK,6BAA6B,OAAO;EACnD,IAAI,MAAM,KAAK,6BAA6B,OAAO;EACnD,OAAO;GACP;;;AAIJ,SAAgB,mBAA2C;CACzD,MAAM,0BAAU,IAAI,KAAc;CAClC,MAAM,CAAC,OAAO,YAAY,OAAkB,EAAE,CAAC;CAC/C,MAAM,eAAqB;EACzB,SAAS,aAAa,QAAQ,CAAC;;CAEjC,OAAO;EACL;EACA,SAAS,IAAyB;GAChC,QAAQ,IAAI,GAAG;GACf,QAAQ;GACR,aAAa;IACX,QAAQ,OAAO,GAAG;IAClB,QAAQ;;;EAGb;;AAGH,IAAa,iBAAb,cAAoC,YAAY;CAC9C,cAA+B,kBAAkB;;CAGjD,IAAI,QAAyB;EAC3B,OAAO,KAAK,YAAY;;;CAI1B,SAAS,IAAyB;EAChC,OAAO,KAAK,YAAY,SAAS,GAAG;;CAGtC,cAAc;EACZ,OAAO;EACP,eAAe,MAAM,mBAAmB,KAAK,YAAY;;;AAI7D,IAAI,WAAW;;AAEf,SAAgB,iBAAiB,MAAM,mBAAyB;CAC9D,IAAI,YAAY,eAAe,IAAI,IAAI,EAAE;EACvC,WAAW;EACX;;CAEF,eAAe,OAAO,KAAK,eAAe;CAC1C,WAAW"}

package/dist/config-provider.d.ts

@@ -0,0 +1,39 @@
+import { DomContext } from "./dom-context.js";
+import { Read } from "@aihu/signals";
+
+//#region src/config-provider/index.d.ts
+type ColorScheme = 'light' | 'dark' | 'system';
+type Density = 'comfortable' | 'compact';
+type Direction = 'ltr' | 'rtl';
+interface ConfigContextValue {
+  readonly colorScheme: Read<ColorScheme>;
+  readonly density: Read<Density>;
+  readonly dir: Read<Direction>;
+}
+declare const configContext: DomContext<ConfigContextValue>;
+declare class AihuConfigProvider extends HTMLElement {
+  static readonly observedAttributes: string[];
+  private readonly _colorScheme;
+  private readonly _density;
+  private readonly _dir;
+  private _disposers;
+  get colorScheme(): Read<ColorScheme>;
+  get density(): Read<Density>;
+  /** The direction signal. Named `dirSignal` to avoid clobbering the native
+   * `HTMLElement.dir` string property (which this element still reflects). */
+  get dirSignal(): Read<Direction>;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+  /** Imperative setters (consumers may drive config from JS, not just attrs). */
+  setColorScheme(v: ColorScheme): void;
+  setDensity(v: Density): void;
+  setDir(v: Direction): void;
+  private _syncFromAttrs;
+}
+/** Register `<aihu-config-provider>` (idempotent). */
+declare function defineConfigProvider(tag?: string): void;
+//#endregion
+export { AihuConfigProvider, ColorScheme, ConfigContextValue, Density, Direction, configContext, defineConfigProvider };
+//# sourceMappingURL=config-provider.d.ts.map

package/dist/config-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.d.ts","names":[],"sources":["../src/config-provider/index.ts"],"mappings":";;;;KAmBY,WAAA;AAAA,KACA,OAAA;AAAA,KACA,SAAA;AAAA,UAEK,kBAAA;EAAA,SACN,WAAA,EAAa,IAAA,CAAK,WAAA;EAAA,SAClB,OAAA,EAAS,IAAA,CAAK,OAAA;EAAA,SACd,GAAA,EAAK,IAAA,CAAK,SAAA;AAAA;AAAA,cAGR,aAAA,EAAa,UAAA,CAAA,kBAAA;AAAA,cAEb,kBAAA,SAA2B,WAAA;EAAA,gBACtB,kBAAA;EAAA,iBAEC,YAAA;EAAA,iBACA,QAAA;EAAA,iBACA,IAAA;EAAA,QAET,UAAA;EAAA,IAEJ,WAAA,CAAA,GAAe,IAAA,CAAK,WAAA;EAAA,IAGpB,OAAA,CAAA,GAAW,IAAA,CAAK,OAAA;EAlBX;;EAAA,IAuBL,SAAA,CAAA,GAAa,IAAA,CAAK,SAAA;;EAatB,iBAAA,CAAA;EAYA,oBAAA,CAAA;EAKA,wBAAA,CAAyB,IAAA,UAAc,IAAA,iBAAqB,KAAA;EApDhC;EAmE5B,cAAA,CAAe,CAAA,EAAG,WAAA;EAGlB,UAAA,CAAW,CAAA,EAAG,OAAA;EAGd,MAAA,CAAO,CAAA,EAAG,SAAA;EAAA,QAIF,cAAA;AAAA;AAxEV;AAAA,iBA2FgB,oBAAA,CAAqB,GAAA"}

package/dist/config-provider.js

@@ -0,0 +1,112 @@
+import { createDomContext, provideContext } from "./dom-context.js";
+import { effect, signal } from "@aihu/signals";
+//#region src/config-provider/index.ts
+/**
+* `<aihu-config-provider>` — app-level config propagated via reactive DOM
+* context. The canonical signal-composition demonstrator: descendants inject
+* `configContext` and read the signals inside an `effect()` so they react to
+* config changes (e.g. a tooltip reading `dir` to flip placement). Emits NO CSS
+* — it only sets host attributes the CSS engine's variants resolve against.
+*
+* Reflected attributes: `color-scheme` (`"light" | "dark" | "system"`),
+* `density` (`"comfortable" | "compact"`), `dir` (`"ltr" | "rtl"`).
+* Owned signals: `colorScheme`, `density`, `dir`.
+* Context: provides `configContext` carrying the three signals; nearest-wins
+* for nested providers.
+* DOM: reflects `dir`, `data-density`, `data-color-scheme` onto the host so the
+* engine's `host-context-dark:` variant + density tokens resolve.
+*/
+const configContext = createDomContext("config");
+var AihuConfigProvider = class extends HTMLElement {
+	static observedAttributes = [
+		"color-scheme",
+		"density",
+		"dir"
+	];
+	_colorScheme = signal("system");
+	_density = signal("comfortable");
+	_dir = signal("ltr");
+	_disposers = [];
+	get colorScheme() {
+		return this._colorScheme[0];
+	}
+	get density() {
+		return this._density[0];
+	}
+	/** The direction signal. Named `dirSignal` to avoid clobbering the native
+	* `HTMLElement.dir` string property (which this element still reflects). */
+	get dirSignal() {
+		return this._dir[0];
+	}
+	constructor() {
+		super();
+		provideContext(this, configContext, {
+			colorScheme: this._colorScheme[0],
+			density: this._density[0],
+			dir: this._dir[0]
+		});
+	}
+	connectedCallback() {
+		this._syncFromAttrs();
+		this._disposers.push(effect(() => {
+			this.setAttribute("data-color-scheme", this._colorScheme[0]());
+			this.setAttribute("data-density", this._density[0]());
+			this.setAttribute("dir", this._dir[0]());
+		}));
+	}
+	disconnectedCallback() {
+		for (const d of this._disposers) d();
+		this._disposers = [];
+	}
+	attributeChangedCallback(name, _old, value) {
+		switch (name) {
+			case "color-scheme":
+				if (isColorScheme(value)) this._colorScheme[1](value);
+				break;
+			case "density":
+				if (isDensity(value)) this._density[1](value);
+				break;
+			case "dir":
+				if (value === "ltr" || value === "rtl") this._dir[1](value);
+				break;
+		}
+	}
+	/** Imperative setters (consumers may drive config from JS, not just attrs). */
+	setColorScheme(v) {
+		this._colorScheme[1](v);
+	}
+	setDensity(v) {
+		this._density[1](v);
+	}
+	setDir(v) {
+		this._dir[1](v);
+	}
+	_syncFromAttrs() {
+		const cs = this.getAttribute("color-scheme");
+		if (isColorScheme(cs)) this._colorScheme[1](cs);
+		const d = this.getAttribute("density");
+		if (isDensity(d)) this._density[1](d);
+		const dir = this.getAttribute("dir");
+		if (dir === "ltr" || dir === "rtl") this._dir[1](dir);
+	}
+};
+function isColorScheme(v) {
+	return v === "light" || v === "dark" || v === "system";
+}
+function isDensity(v) {
+	return v === "comfortable" || v === "compact";
+}
+let _defined = false;
+/** Register `<aihu-config-provider>` (idempotent). */
+function defineConfigProvider(tag = "aihu-config-provider") {
+	if (_defined || customElements.get(tag)) {
+		_defined = true;
+		return;
+	}
+	customElements.define(tag, AihuConfigProvider);
+	_defined = true;
+}
+//#endregion
+export { AihuConfigProvider, configContext, defineConfigProvider };
+
+//# sourceMappingURL=config-provider.js.map

package/dist/config-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.js","names":[],"sources":["../src/config-provider/index.ts"],"sourcesContent":["/**\n * `<aihu-config-provider>` — app-level config propagated via reactive DOM\n * context. The canonical signal-composition demonstrator: descendants inject\n * `configContext` and read the signals inside an `effect()` so they react to\n * config changes (e.g. a tooltip reading `dir` to flip placement). Emits NO CSS\n * — it only sets host attributes the CSS engine's variants resolve against.\n *\n * Reflected attributes: `color-scheme` (`\"light\" | \"dark\" | \"system\"`),\n * `density` (`\"comfortable\" | \"compact\"`), `dir` (`\"ltr\" | \"rtl\"`).\n * Owned signals: `colorScheme`, `density`, `dir`.\n * Context: provides `configContext` carrying the three signals; nearest-wins\n * for nested providers.\n * DOM: reflects `dir`, `data-density`, `data-color-scheme` onto the host so the\n * engine's `host-context-dark:` variant + density tokens resolve.\n */\n\nimport { effect, type Read, signal } from '@aihu/signals'\nimport { createDomContext, provideContext } from '../dom-context.ts'\n\nexport type ColorScheme = 'light' | 'dark' | 'system'\nexport type Density = 'comfortable' | 'compact'\nexport type Direction = 'ltr' | 'rtl'\n\nexport interface ConfigContextValue {\n  readonly colorScheme: Read<ColorScheme>\n  readonly density: Read<Density>\n  readonly dir: Read<Direction>\n}\n\nexport const configContext = createDomContext<ConfigContextValue>('config')\n\nexport class AihuConfigProvider extends HTMLElement {\n  static readonly observedAttributes = ['color-scheme', 'density', 'dir']\n\n  private readonly _colorScheme = signal<ColorScheme>('system')\n  private readonly _density = signal<Density>('comfortable')\n  private readonly _dir = signal<Direction>('ltr')\n\n  private _disposers: Array<() => void> = []\n\n  get colorScheme(): Read<ColorScheme> {\n    return this._colorScheme[0]\n  }\n  get density(): Read<Density> {\n    return this._density[0]\n  }\n  /** The direction signal. Named `dirSignal` to avoid clobbering the native\n   * `HTMLElement.dir` string property (which this element still reflects). */\n  get dirSignal(): Read<Direction> {\n    return this._dir[0]\n  }\n\n  constructor() {\n    super()\n    provideContext(this, configContext, {\n      colorScheme: this._colorScheme[0],\n      density: this._density[0],\n      dir: this._dir[0],\n    })\n  }\n\n  connectedCallback(): void {\n    this._syncFromAttrs()\n    // Reflect config onto host attributes the CSS engine targets.\n    this._disposers.push(\n      effect(() => {\n        this.setAttribute('data-color-scheme', this._colorScheme[0]())\n        this.setAttribute('data-density', this._density[0]())\n        this.setAttribute('dir', this._dir[0]())\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    for (const d of this._disposers) d()\n    this._disposers = []\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    switch (name) {\n      case 'color-scheme':\n        if (isColorScheme(value)) this._colorScheme[1](value)\n        break\n      case 'density':\n        if (isDensity(value)) this._density[1](value)\n        break\n      case 'dir':\n        if (value === 'ltr' || value === 'rtl') this._dir[1](value)\n        break\n    }\n  }\n\n  /** Imperative setters (consumers may drive config from JS, not just attrs). */\n  setColorScheme(v: ColorScheme): void {\n    this._colorScheme[1](v)\n  }\n  setDensity(v: Density): void {\n    this._density[1](v)\n  }\n  setDir(v: Direction): void {\n    this._dir[1](v)\n  }\n\n  private _syncFromAttrs(): void {\n    const cs = this.getAttribute('color-scheme')\n    if (isColorScheme(cs)) this._colorScheme[1](cs)\n    const d = this.getAttribute('density')\n    if (isDensity(d)) this._density[1](d)\n    const dir = this.getAttribute('dir')\n    if (dir === 'ltr' || dir === 'rtl') this._dir[1](dir)\n  }\n}\n\nfunction isColorScheme(v: string | null): v is ColorScheme {\n  return v === 'light' || v === 'dark' || v === 'system'\n}\nfunction isDensity(v: string | null): v is Density {\n  return v === 'comfortable' || v === 'compact'\n}\n\nlet _defined = false\n/** Register `<aihu-config-provider>` (idempotent). */\nexport function defineConfigProvider(tag = 'aihu-config-provider'): void {\n  if (_defined || customElements.get(tag)) {\n    _defined = true\n    return\n  }\n  customElements.define(tag, AihuConfigProvider)\n  _defined = true\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,gBAAgB,iBAAqC,SAAS;AAE3E,IAAa,qBAAb,cAAwC,YAAY;CAClD,OAAgB,qBAAqB;EAAC;EAAgB;EAAW;EAAM;CAEvE,eAAgC,OAAoB,SAAS;CAC7D,WAA4B,OAAgB,cAAc;CAC1D,OAAwB,OAAkB,MAAM;CAEhD,aAAwC,EAAE;CAE1C,IAAI,cAAiC;EACnC,OAAO,KAAK,aAAa;;CAE3B,IAAI,UAAyB;EAC3B,OAAO,KAAK,SAAS;;;;CAIvB,IAAI,YAA6B;EAC/B,OAAO,KAAK,KAAK;;CAGnB,cAAc;EACZ,OAAO;EACP,eAAe,MAAM,eAAe;GAClC,aAAa,KAAK,aAAa;GAC/B,SAAS,KAAK,SAAS;GACvB,KAAK,KAAK,KAAK;GAChB,CAAC;;CAGJ,oBAA0B;EACxB,KAAK,gBAAgB;EAErB,KAAK,WAAW,KACd,aAAa;GACX,KAAK,aAAa,qBAAqB,KAAK,aAAa,IAAI,CAAC;GAC9D,KAAK,aAAa,gBAAgB,KAAK,SAAS,IAAI,CAAC;GACrD,KAAK,aAAa,OAAO,KAAK,KAAK,IAAI,CAAC;IACxC,CACH;;CAGH,uBAA6B;EAC3B,KAAK,MAAM,KAAK,KAAK,YAAY,GAAG;EACpC,KAAK,aAAa,EAAE;;CAGtB,yBAAyB,MAAc,MAAqB,OAA4B;EACtF,QAAQ,MAAR;GACE,KAAK;IACH,IAAI,cAAc,MAAM,EAAE,KAAK,aAAa,GAAG,MAAM;IACrD;GACF,KAAK;IACH,IAAI,UAAU,MAAM,EAAE,KAAK,SAAS,GAAG,MAAM;IAC7C;GACF,KAAK;IACH,IAAI,UAAU,SAAS,UAAU,OAAO,KAAK,KAAK,GAAG,MAAM;IAC3D;;;;CAKN,eAAe,GAAsB;EACnC,KAAK,aAAa,GAAG,EAAE;;CAEzB,WAAW,GAAkB;EAC3B,KAAK,SAAS,GAAG,EAAE;;CAErB,OAAO,GAAoB;EACzB,KAAK,KAAK,GAAG,EAAE;;CAGjB,iBAA+B;EAC7B,MAAM,KAAK,KAAK,aAAa,eAAe;EAC5C,IAAI,cAAc,GAAG,EAAE,KAAK,aAAa,GAAG,GAAG;EAC/C,MAAM,IAAI,KAAK,aAAa,UAAU;EACtC,IAAI,UAAU,EAAE,EAAE,KAAK,SAAS,GAAG,EAAE;EACrC,MAAM,MAAM,KAAK,aAAa,MAAM;EACpC,IAAI,QAAQ,SAAS,QAAQ,OAAO,KAAK,KAAK,GAAG,IAAI;;;AAIzD,SAAS,cAAc,GAAoC;CACzD,OAAO,MAAM,WAAW,MAAM,UAAU,MAAM;;AAEhD,SAAS,UAAU,GAAgC;CACjD,OAAO,MAAM,iBAAiB,MAAM;;AAGtC,IAAI,WAAW;;AAEf,SAAgB,qBAAqB,MAAM,wBAA8B;CACvE,IAAI,YAAY,eAAe,IAAI,IAAI,EAAE;EACvC,WAAW;EACX;;CAEF,eAAe,OAAO,KAAK,mBAAmB;CAC9C,WAAW"}