@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/toolbar/src/ToolbarSeparator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { TOOLBAR_CONTEXT } from "./Toolbar.vue_vue_type_script_setup_true_lang.js";
+import "./Toolbar.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, openBlock } from "vue";
+//#region packages/primitives/toolbar/src/ToolbarSeparator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+/**
+* ToolbarSeparator — the divider between groups of controls inside a
+* Toolbar. It reads the toolbar's own orientation through the context the
+* toolbar provides and draws along the perpendicular axis, so a horizontal
+* toolbar gets vertical hairlines and a vertical one gets horizontal. Its
+* `role="separator"` is the one an APG toolbar wants between its groups —
+* which is why `decorative` is not offered here: inside a toolbar the line
+* is never merely visual, it IS the group boundary.
+*
+* Composing the `Separator` primitive instead of drawing the hairline here
+* was considered and rejected: the primitive binds `h-full w-px` for its
+* vertical axis, and the short, centered divider a toolbar wants would fight
+* that on Tailwind's emitted order — a coin flip, not a decision. Four lines
+* of divider here beat a class-order lottery.
+*/
+var ToolbarSeparator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ToolbarSeparator",
+	props: { orientation: {} },
+	setup(__props) {
+		const props = __props;
+		const inherited = inject(TOOLBAR_CONTEXT, null);
+		const axis = computed(() => props.orientation ?? (inherited ? inherited.orientation : "horizontal"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "separator",
+				"aria-orientation": axis.value === "vertical" ? "horizontal" : "vertical",
+				class: normalizeClass([axis.value === "vertical" ? "mx-2 h-px w-4 self-center" : "h-4 w-px self-center", "shrink-0 bg-border"])
+			}, null, 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ToolbarSeparator_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ToolbarSeparator.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/toolbar/src/ToolbarSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/toolbar/src/ToolbarSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport type { ToolbarContext, ToolbarOrientation } from \"./Toolbar.vue\";\nimport { TOOLBAR_CONTEXT } from \"./Toolbar.vue\";\n\n/**\n * ToolbarSeparator — the divider between groups of controls inside a\n * Toolbar. It reads the toolbar's own orientation through the context the\n * toolbar provides and draws along the perpendicular axis, so a horizontal\n * toolbar gets vertical hairlines and a vertical one gets horizontal. Its\n * `role=\"separator\"` is the one an APG toolbar wants between its groups —\n * which is why `decorative` is not offered here: inside a toolbar the line\n * is never merely visual, it IS the group boundary.\n *\n * Composing the `Separator` primitive instead of drawing the hairline here\n * was considered and rejected: the primitive binds `h-full w-px` for its\n * vertical axis, and the short, centered divider a toolbar wants would fight\n * that on Tailwind's emitted order — a coin flip, not a decision. Four lines\n * of divider here beat a class-order lottery.\n */\nconst props = defineProps<{\n  /** Only for standalone use — inside a Toolbar the axis is inherited. */\n  orientation?: ToolbarOrientation;\n}>();\n\nconst inherited = inject<ToolbarContext | null>(TOOLBAR_CONTEXT, null);\nconst axis = computed(\n  () => props.orientation ?? (inherited ? inherited.orientation : \"horizontal\"),\n);\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :aria-orientation=\"axis === 'vertical' ? 'horizontal' : 'vertical'\"\n    :class=\"axis === 'vertical' ? 'mx-2 h-px w-4 self-center' : 'h-4 w-px self-center'\"\n    class=\"shrink-0 bg-border\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAKd,MAAM,YAAY,OAA8B,iBAAiB,IAAI;EACrE,MAAM,OAAO,eACL,MAAM,gBAAgB,YAAY,UAAU,cAAc,aAClE;;GAIE,OAAA,UAAA,GAAA,mBAKE,OAAA;IAJA,MAAK;IACJ,oBAAkB,KAAA,UAAI,aAAA,eAAA;IACtB,OAAK,eAAA,CAAE,KAAA,UAAI,aAAA,8BAAA,wBACN,oBAAoB,CAAA"}

package/dist/packages/primitives/toolbar/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Toolbar.vue";
+export { default as ToolbarSeparator } from "./ToolbarSeparator.vue";
+export type { ToolbarContext, ToolbarOrientation } from "./Toolbar.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/toolbar/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/toolbar/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/packages/primitives/toolbar/src/index.js

@@ -0,0 +1,3 @@
+import Toolbar_default from "./Toolbar.js";
+import ToolbarSeparator_default from "./ToolbarSeparator.js";
+export { ToolbarSeparator_default as ToolbarSeparator, Toolbar_default as default };

package/dist/packages/primitives/tooltip/src/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-50 max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through.\n              'data-[state=delayed-open]:animate-scale-in',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-overlay max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once; the paired exit is precisely what\n              // Presence is waiting to hold it for.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through. The exit needs no\n              // such split — Reka reports both open flavours as plain `closed`\n              // on the way out, so one class answers them both.\n              'data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/tooltip/src/Tooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"names":[],"mappings":"AA8HA;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;wBACzC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAuBd,gFAAgF;cACtE,MAAM;IAChB,4EAA4E;WACrE,WAAW;IAClB,qDAAqD;iBACxC,MAAM;IACnB,wFAAwF;YAChF,MAAM;IACd,oHAAoH;WAC7G,OAAO,GAAG,SAAS;;;;IAT1B,gFAAgF;cACtE,MAAM;IAChB,4EAA4E;WACrE,WAAW;IAClB,qDAAqD;iBACxC,MAAM;IACnB,wFAAwF;YAChF,MAAM;IACd,oHAAoH;WAC7G,OAAO,GAAG,SAAS;;;;WAFlB,MAAM;UAJP,WAAW;gBAEL,MAAM;UAIZ,OAAO,GAAG,SAAS;;cAwLhB,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"names":[],"mappings":"AAiIA;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;wBACzC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAuBd,gFAAgF;cACtE,MAAM;IAChB,4EAA4E;WACrE,WAAW;IAClB,qDAAqD;iBACxC,MAAM;IACnB,wFAAwF;YAChF,MAAM;IACd,oHAAoH;WAC7G,OAAO,GAAG,SAAS;;;;IAT1B,gFAAgF;cACtE,MAAM;IAChB,4EAA4E;WACrE,WAAW;IAClB,qDAAqD;iBACxC,MAAM;IACnB,wFAAwF;YAChF,MAAM;IACd,oHAAoH;WAC7G,OAAO,GAAG,SAAS;;;;WAFlB,MAAM;UAJP,WAAW;gBAEL,MAAM;UAIZ,OAAO,GAAG,SAAS;;cA8LhB,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/tooltip/src/Tooltip.vue_vue_type_script_setup_true_lang.js

@@ -28,7 +28,7 @@ var Tooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						default: withCtx(() => [createVNode(unref(TooltipContent), {
 							side: __props.side,
 							"side-offset": __props.sideOffset,
-							class: normalizeClass(unref(cn)("z-50 max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md", "data-[state=delayed-open]:animate-scale-in")),
+							class: normalizeClass(unref(cn)("z-overlay max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md", "data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out")),
 							style: { "transform-origin": "var(--reka-popper-transform-origin)" }
 						}, {
 							default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.content), 1)]), createVNode(unref(TooltipArrow), {

package/dist/packages/primitives/tooltip/src/Tooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-50 max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through.\n              'data-[state=delayed-open]:animate-scale-in',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAqEE,OAAA,UAAA,GAAA,YAwCkB,MAAA,eAAA,GAAA,EAxCA,kBAAgB,QAAA,MAAK,GAAA;IACrC,SAAA,cAsCc,CAtCd,YAsCc,MAAA,WAAA,GAtCd,WAAqB,MAsCP,QAAA,CAtCe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;KAIhF,SAAA,cAEiB,CAFjB,YAEiB,MAAA,cAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;MACtB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;KAGzB,CAAA,GAAA,YA6BgB,MAAA,aAAA,GAAA,MAAA;MA5Bd,SAAA,cA2BiB,CA3BjB,YA2BiB,MAAA,cAAA,GAAA;OA1Bd,MAAM,QAAA;OACN,eAAa,QAAA;OACb,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,uGAAA,4CAAA,CAAA;OAiBvB,OAAA,EAAA,oBAAA,sCAAA;;OAKA,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAA,WAAA,CAAA,SAAA,CAAjB,gBAAA,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,GAChB,YAAgE,MAAA,YAAA,GAAA;QAAlD,OAAM;QAAmB,OAAO;QAAK,QAAQ"}
+{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/tooltip/src/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the tip prefers, before collision flipping. The\n * members mirror Reka's own `Side`, and the template binding is what enforces\n * that: a member Reka does not accept stops `:side=\"side\"` type-checking.\n * Declared here rather than aliased so the generated props table prints the\n * four values instead of a name that tells the reader nothing.\n */\nexport type TooltipSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tooltip — a short, non-interactive hint on hover or keyboard focus of its\n * trigger: the label for an icon-only button, or one terse explanation.\n *\n * A tooltip is not a small dialog, and the difference is the whole contract.\n * It never takes focus — focus stays on the trigger the entire time it is\n * shown, which is what lets a keyboard user read it and keep going. Hovering\n * the trigger or focusing it opens the tip; Esc, blur and moving the pointer\n * away close it; the page behind never stops scrolling. Nothing inside it can\n * be reached, so nothing interactive belongs inside it. The moment a hint\n * needs a link or a button, it is a `Popover`.\n *\n * It is wired as `aria-describedby`, never `aria-labelledby`: it *supplements*\n * an accessible name and must never be the only source of one. An icon-only\n * button still carries its own `aria-label` — a screen reader user who never\n * hovers would otherwise meet an unnamed button.\n *\n * The provider is bundled in so a single tooltip works with no setup. An\n * application with many can hoist one Reka `TooltipProvider` higher later,\n * which is what shares the hover delay across them.\n */\nwithDefaults(\n  defineProps<{\n    /** The hint text. The default slot overrides it where the hint needs markup. */\n    content?: string;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: TooltipSide;\n    /** Gap in pixels between the trigger and the tip. */\n    sideOffset?: number;\n    /** Milliseconds of hover before the tip appears. Keyboard focus is always immediate. */\n    delay?: number;\n    /** Drive the tip from the host with `v-model:open` — an onboarding hint, say. Omit it for hover and focus alone. */\n    open?: boolean | undefined;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `content` needs no such entry: a string\n  // prop is already `undefined` when absent.\n  { open: undefined, side: \"top\", sideOffset: 6, delay: 300 },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"delay\">\n    <TooltipRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n      <!-- @slot The element the hint describes. Rendered `as-child`, so the\n           caller's own element *is* the trigger and keeps its own accessible\n           name. -->\n      <TooltipTrigger as-child>\n        <slot name=\"trigger\" />\n      </TooltipTrigger>\n\n      <TooltipPortal>\n        <TooltipContent\n          :side=\"side\"\n          :side-offset=\"sideOffset\"\n          :class=\"\n            cn(\n              'z-overlay max-w-[16rem] rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md',\n              // Scoped to the open state, never unconditional. Reka's Presence\n              // keeps closed content mounted until an animationend arrives, and\n              // a mount-only animation never fires a second one — so an\n              // unconditional animation class leaves a stray tip in the page.\n              // Scoped, the closed element computes `animation-name: none` and\n              // Presence unmounts it at once; the paired exit is precisely what\n              // Presence is waiting to hold it for.\n              //\n              // `delayed-open` rather than `open`: the animation belongs to the\n              // hover path, which the user waited for. A tip opened by keyboard\n              // focus appears instantly, because a keyboard user asked for it\n              // deliberately and has nothing to wait through. The exit needs no\n              // such split — Reka reports both open flavours as plain `closed`\n              // on the way out, so one class answers them both.\n              'data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            )\n          \"\n          style=\"transform-origin: var(--reka-popper-transform-origin)\"\n        >\n          <!-- @slot The hint, where markup is needed. Takes precedence over\n               `content`. Nothing interactive belongs here — a tooltip cannot be\n               reached by keyboard or pointer. -->\n          <slot>{{ content }}</slot>\n          <TooltipArrow class=\"fill-foreground\" :width=\"10\" :height=\"5\" />\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAqEE,OAAA,UAAA,GAAA,YA2CkB,MAAA,eAAA,GAAA,EA3CA,kBAAgB,QAAA,MAAK,GAAA;IACrC,SAAA,cAyCc,CAzCd,YAyCc,MAAA,WAAA,GAzCd,WAAqB,MAyCP,QAAA,CAzCe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;KAIhF,SAAA,cAEiB,CAFjB,YAEiB,MAAA,cAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;MACtB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;KAGzB,CAAA,GAAA,YAgCgB,MAAA,aAAA,GAAA,MAAA;MA/Bd,SAAA,cA8BiB,CA9BjB,YA8BiB,MAAA,cAAA,GAAA;OA7Bd,MAAM,QAAA;OACN,eAAa,QAAA;OACb,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,4GAAA,kFAAA,CAAA;OAoBvB,OAAA,EAAA,oBAAA,sCAAA;;OAKA,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAA,WAAA,CAAA,SAAA,CAAjB,gBAAA,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,GAChB,YAAgE,MAAA,YAAA,GAAA;QAAlD,OAAM;QAAmB,OAAO;QAAK,QAAQ"}

package/dist/packages/primitives/tree-view/src/TreeView.js

@@ -0,0 +1,7 @@
+import TreeView_vue_vue_type_script_setup_true_lang_default, { TREE_VIEW_LABELS } from "./TreeView.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/tree-view/src/TreeView.vue
+var TreeView_default = TreeView_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TREE_VIEW_LABELS, TreeView_default as default };
+
+//# sourceMappingURL=TreeView.js.map

package/dist/packages/primitives/tree-view/src/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeView.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOverrides, TreeViewLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Everything else a tree renders is a node's own label, so the bag is one\n * string — but it is a string a reader waits on.\n */\nexport const TREE_VIEW_LABELS: TreeViewLabels = {\n  loading: \"Loading…\",\n};\n\n/**\n * One node of the tree. `children`'s shape is the contract for expansion: an\n * array of any length (including empty — a known leaf) is static data the\n * tree renders directly, while a node *without* one under a `loadChildren`\n * tree is treated as a branch still to fetch.\n */\nexport interface TreeNode {\n  /** The value bound to `v-model` when this node is chosen. Unique within the tree. */\n  value: string | number;\n  /** The text shown on the row and matched by the typeahead. */\n  label: string;\n  /** This node's children. Their presence is what makes the row expandable. */\n  children?: TreeNode[];\n  /** Present but unchoosable: visible, arrow-reachable, refuses selection and expansion. */\n  disabled?: boolean;\n}\n\n/** Whether one node or several can be chosen at once. */\nexport type TreeViewSelectionMode = \"single\" | \"multiple\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onScopeDispose, provide, ref, watch } from \"vue\";\nimport { useAncestorDisabled, useLabels } from \"@ecoma-io/loom-labels\";\nimport { TREE_VIEW_CONTEXT, type TreeViewContext, type TreeViewNodeState } from \"./context\";\nimport TreeViewNode from \"./TreeViewNode.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The nodes, in the order they are shown, parents before children. */\n    nodes: TreeNode[];\n    /**\n     * The chosen node's `value` — or every chosen value, when `selectionMode`\n     * is \"multiple\". The union, not two generic shapes, for the same reason\n     * Combobox is: `v-model` needs one binding whose type does not depend on\n     * another prop's value, and a scalar/array mismatch is caught the same\n     * place the tree catches it — at the render.\n     */\n    modelValue?: string | number | Array<string | number> | undefined;\n    /** Whether one node or several can be chosen at once. */\n    selectionMode?: TreeViewSelectionMode;\n    /**\n     * Fetch a branch's children the first time it is expanded. A node with no\n     * `children` of its own is treated as lazily loadable; one that resolves\n     * to an empty array becomes a leaf, and a rejected fetch leaves the node\n     * collapsed so the next activation retries rather than caching failure.\n     */\n    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;\n    /** Node values expanded on mount. After mount the tree owns the state. */\n    defaultExpanded?: Array<string | number>;\n    /**\n     * Unavailable: the rows dim, refuse selection and expansion, and drop out\n     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`\n     * read straight off the DOM.\n     */\n    disabled?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<TreeViewLabels> | undefined;\n  }>(),\n  {\n    modelValue: undefined,\n    selectionMode: \"single\",\n    defaultExpanded: () => [],\n    disabled: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen node's `value` — or the whole chosen list, when `selectionMode` is \"multiple\". */\n  \"update:modelValue\": [value: string | number | Array<string | number>];\n}>();\n\n/**\n * A row as the keyboard sees it: one step of the depth-first walk of the\n * visible tree, with everything the key map needs resolved once per change\n * instead of per keystroke.\n */\ninterface FlatRow {\n  value: string | number;\n  node: TreeNode;\n  level: number;\n  setsize: number;\n  posinset: number;\n  parentId: string | number | null;\n  expandable: boolean;\n  expanded: boolean;\n  selected: boolean;\n  busy: boolean;\n  disabled: boolean;\n}\n\nconst rootEl = ref<HTMLUListElement | null>(null);\n\nconst ancestorDisabled = useAncestorDisabled(() => rootEl.value);\nconst controlDisabled = computed(() => (props.disabled ?? false) || ancestorDisabled.value);\n\nconst text = useLabels(\"treeView\", TREE_VIEW_LABELS, () => props.labels);\n\n// Seeded once from `defaultExpanded`, then the tree owns it — a prop the user\n// edits after mount silently losing their edits is worse than a seed.\nconst expandedKeys = ref(new Set<string | number>(props.defaultExpanded));\nconst loadingKeys = ref(new Set<string | number>());\nconst lazyChildren = ref(new Map<string | number, TreeNode[]>());\nconst focusValue = ref<string | number | null>(null);\n\nfunction toKeySet(\n  model: string | number | Array<string | number> | undefined,\n): Set<string | number> {\n  if (model == null) return new Set();\n  return new Set(Array.isArray(model) ? model : [model]);\n}\n\n// A mirror rather than a read-through, so the tree works uncontrolled (`v-model`\n// absent, `modelValue` never supplied) exactly as it does controlled — the same\n// contract Combobox keeps.\nconst selectedKeys = ref(toKeySet(props.modelValue));\nwatch(\n  () => props.modelValue,\n  (next) => {\n    selectedKeys.value = toKeySet(next);\n  },\n);\n\nfunction childrenOf(node: TreeNode): TreeNode[] {\n  if (Array.isArray(node.children)) return node.children;\n  return lazyChildren.value.get(node.value) ?? [];\n}\n\n/**\n * A row can open when it has children to show: a non-empty `children` array,\n * or a fetch already resolved beneath it — an empty resolution *is* the\n * answer, and the row collapses back to a leaf rather than offering a branch\n * that opens onto nothing.\n */\nfunction isExpandable(node: TreeNode): boolean {\n  if (Array.isArray(node.children)) return node.children.length > 0;\n  const loaded = lazyChildren.value.get(node.value);\n  if (loaded) return loaded.length > 0;\n  return props.loadChildren != null;\n}\n\nconst flatRows = computed<FlatRow[]>(() => {\n  const rows: FlatRow[] = [];\n  const walk = (nodes: TreeNode[], level: number, parentId: string | number | null): void => {\n    for (let index = 0; index < nodes.length; index++) {\n      const node = nodes[index];\n      if (!node) continue;\n      const expandable = isExpandable(node);\n      const expanded = expandable && expandedKeys.value.has(node.value);\n      rows.push({\n        value: node.value,\n        node,\n        level,\n        setsize: nodes.length,\n        posinset: index + 1,\n        parentId,\n        expandable,\n        expanded,\n        selected: selectedKeys.value.has(node.value),\n        busy: loadingKeys.value.has(node.value),\n        disabled: (node.disabled ?? false) || controlDisabled.value,\n      });\n      if (expanded) walk(childrenOf(node), level + 1, node.value);\n    }\n  };\n  walk(props.nodes, 1, null);\n  return rows;\n});\n\nconst rowByValue = computed(() => new Map(flatRows.value.map((row) => [row.value, row])));\n\n// The roving tab stop: wherever the reader last was, or — before the first\n// arrow key — the first row a Tab is allowed to land on. A disabled row is\n// reachable from inside the tree but never *entered* from outside it.\nconst tabStopValue = computed<string | number | null>(() => {\n  // The stop answers \"where Tab would land\", not \"where the reader is\": the\n  // arrows deliberately rest on disabled rows, but entering the tree from\n  // outside must land on the first enabled one.\n  const focused = focusValue.value != null ? rowByValue.value.get(focusValue.value) : undefined;\n  if (focused && !focused.disabled) return focusValue.value;\n  const firstEnabled = flatRows.value.find((row) => !row.disabled);\n  return firstEnabled?.value ?? null;\n});\n\nfunction stateFor(node: TreeNode): TreeViewNodeState {\n  const row = rowByValue.value.get(node.value);\n  return {\n    expandable: row?.expandable ?? false,\n    expanded: row?.expanded ?? false,\n    selected: row?.selected ?? false,\n    busy: row?.busy ?? false,\n    disabled: row?.disabled ?? false,\n    focusable: !controlDisabled.value && row?.value === tabStopValue.value,\n  };\n}\n\nasync function expandRow(row: FlatRow): Promise<void> {\n  const value = row.node.value;\n  if (\n    row.disabled ||\n    !row.expandable ||\n    expandedKeys.value.has(value) ||\n    loadingKeys.value.has(value)\n  ) {\n    return;\n  }\n  const isLazy =\n    !Array.isArray(row.node.children) &&\n    props.loadChildren != null &&\n    !lazyChildren.value.has(value);\n  if (isLazy && props.loadChildren) {\n    loadingKeys.value = new Set(loadingKeys.value).add(value);\n    try {\n      const children = await props.loadChildren(row.node);\n      const next = new Map(lazyChildren.value);\n      next.set(value, children);\n      lazyChildren.value = next;\n    } catch {\n      // The fetch failed: leave the row collapsed and still expandable, so\n      // the next activation retries rather than caching a broken branch.\n      return;\n    } finally {\n      const settled = new Set(loadingKeys.value);\n      settled.delete(value);\n      loadingKeys.value = settled;\n    }\n  }\n  expandedKeys.value = new Set(expandedKeys.value).add(value);\n}\n\nfunction collapseRow(value: string | number): void {\n  const next = new Set(expandedKeys.value);\n  next.delete(value);\n  expandedKeys.value = next;\n}\n\nfunction selectRow(node: TreeNode): void {\n  if (controlDisabled.value || node.disabled) return;\n  if (props.selectionMode === \"multiple\") {\n    const next = new Set(selectedKeys.value);\n    if (next.has(node.value)) next.delete(node.value);\n    else next.add(node.value);\n    selectedKeys.value = next;\n    emit(\"update:modelValue\", [...next]);\n    return;\n  }\n  selectedKeys.value = new Set([node.value]);\n  emit(\"update:modelValue\", node.value);\n}\n\nfunction rowElement(value: string | number): HTMLElement | null {\n  const root = rootEl.value;\n  if (!root) return null;\n  return root.querySelector<HTMLElement>(`[data-tree-value=\"${CSS.escape(String(value))}\"]`);\n}\n\nfunction focusRow(row: FlatRow | undefined): void {\n  if (!row) return;\n  focusValue.value = row.node.value;\n  void nextTick(() => {\n    rowElement(row.value)?.focus();\n  });\n}\n\nfunction onRowFocus(node: TreeNode): void {\n  focusValue.value = node.value;\n}\n\nfunction onRowActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value) return;\n  focusRow(row);\n  selectRow(node);\n}\n\nfunction onChevronActivate(node: TreeNode): void {\n  const row = rowByValue.value.get(node.value);\n  if (!row || controlDisabled.value || row.disabled) return;\n  focusRow(row);\n  if (row.expanded) collapseRow(node.value);\n  else void expandRow(row);\n}\n\nfunction currentRowIndex(): number {\n  if (focusValue.value == null) return -1;\n  return flatRows.value.findIndex((row) => row.value === focusValue.value);\n}\n\n/*\n * The typeahead. APG trees match a prefix of the row's label, starting after\n * the current row and wrapping; the same character typed again cycles to that\n * character's next match rather than extending a prefix to itself. The buffer\n * is 500 ms, and the timer is released with the scope so a tree torn down\n * mid-typeahead leaves nothing pending.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction handleTypeahead(event: KeyboardEvent): void {\n  if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return;\n  if (flatRows.value.length === 0) return;\n  const char = event.key.toLowerCase();\n  // Repeat detection reads the buffer's LAST character: a multi-character\n  // prefix must survive a repeated final character so the walk cycles to\n  // the next match instead of extending the prefix to a non-match.\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  const query = typeaheadBuffer;\n  const start = currentRowIndex() + 1;\n  for (let step = 0; step < flatRows.value.length; step++) {\n    const row = flatRows.value[(start + step) % flatRows.value.length];\n    // Typeahead is a jump made from outside the walk, like the entry tab\n    // stop: it lands on a row the reader can act on. The arrows remain the\n    // way to deliberately rest on a disabled row.\n    if (row && !row.disabled && row.node.label.toLowerCase().startsWith(query)) {\n      focusRow(row);\n      break;\n    }\n  }\n  event.preventDefault();\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonScopeDispose(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * One keydown on the root, reached from every row by bubbling: the key map is\n * written once against the flat visible walk instead of duplicated per row.\n * Disabled rows stay in the arrow walk — present and reachable, per the APG —\n * but Enter, Space and the disclosure keys refuse them.\n */\nfunction onKeydown(event: KeyboardEvent): void {\n  if (controlDisabled.value) return;\n  const rows = flatRows.value;\n  if (rows.length === 0) return;\n  const index = currentRowIndex();\n  const row = index >= 0 ? rows[index] : undefined;\n\n  switch (event.key) {\n    case \"ArrowDown\": {\n      const next = rows[index + 1];\n      if (next) focusRow(next);\n      break;\n    }\n    case \"ArrowUp\": {\n      const previous = index > 0 ? rows[index - 1] : undefined;\n      if (previous) focusRow(previous);\n      break;\n    }\n    case \"Home\":\n      focusRow(rows[0]);\n      break;\n    case \"End\":\n      focusRow(rows[rows.length - 1]);\n      break;\n    case \"ArrowRight\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && !row.expanded) {\n        void expandRow(row);\n        break;\n      }\n      if (row.expanded) {\n        const child = rows[index + 1];\n        if (child && child.level === row.level + 1) focusRow(child);\n      }\n      break;\n    }\n    case \"ArrowLeft\": {\n      if (!row) break;\n      if (row.disabled) break;\n      if (row.expandable && row.expanded) {\n        collapseRow(row.value);\n        break;\n      }\n      if (row.parentId != null) {\n        const parent = rowByValue.value.get(row.parentId);\n        if (parent) focusRow(parent);\n      }\n      break;\n    }\n    case \"Enter\":\n    case \" \":\n      if (row) selectRow(row.node);\n      break;\n    default:\n      handleTypeahead(event);\n      return;\n  }\n  event.preventDefault();\n}\n\nprovide(TREE_VIEW_CONTEXT, {\n  stateFor,\n  childrenOf,\n  loadingText: computed(() => text.value.loading),\n  onRowFocus,\n  onRowActivate,\n  onChevronActivate,\n} satisfies TreeViewContext);\n</script>\n\n<!--\n  The tree is a plain `<ul>`, so the caller's `aria-label`, `aria-labelledby`\n  and `id` fall through to it untouched — naming the tree is naming the\n  element, exactly as the APG example does. Rows render one tab stop at a\n  time (roving tabindex); the keydown above is the only keyboard listener.\n-->\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -- the container is deliberately not focusable: focus roves across the rows (APG tree view), so exactly one row holds the tab stop and the `<ul>` itself never takes one. -->\n  <ul\n    ref=\"rootEl\"\n    role=\"tree\"\n    :aria-multiselectable=\"selectionMode === 'multiple' ? 'true' : undefined\"\n    :aria-disabled=\"controlDisabled ? 'true' : undefined\"\n    class=\"m-0 list-none select-none p-0 text-sm text-foreground\"\n    @keydown=\"onKeydown\"\n  >\n    <TreeViewNode\n      v-for=\"(node, index) in nodes\"\n      :key=\"node.value\"\n      :node=\"node\"\n      :level=\"1\"\n      :setsize=\"nodes.length\"\n      :posinset=\"index + 1\"\n    />\n  </ul>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/tree-view/src/TreeView.vue.d.ts

@@ -0,0 +1,99 @@
+import type { LabelOverrides, TreeViewLabels } from "../../../labels/src/index";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it.
+ * Everything else a tree renders is a node's own label, so the bag is one
+ * string — but it is a string a reader waits on.
+ */
+export declare const TREE_VIEW_LABELS: TreeViewLabels;
+/**
+ * One node of the tree. `children`'s shape is the contract for expansion: an
+ * array of any length (including empty — a known leaf) is static data the
+ * tree renders directly, while a node *without* one under a `loadChildren`
+ * tree is treated as a branch still to fetch.
+ */
+export interface TreeNode {
+    /** The value bound to `v-model` when this node is chosen. Unique within the tree. */
+    value: string | number;
+    /** The text shown on the row and matched by the typeahead. */
+    label: string;
+    /** This node's children. Their presence is what makes the row expandable. */
+    children?: TreeNode[];
+    /** Present but unchoosable: visible, arrow-reachable, refuses selection and expansion. */
+    disabled?: boolean;
+}
+/** Whether one node or several can be chosen at once. */
+export type TreeViewSelectionMode = "single" | "multiple";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The nodes, in the order they are shown, parents before children. */
+    nodes: TreeNode[];
+    /**
+     * The chosen node's `value` — or every chosen value, when `selectionMode`
+     * is "multiple". The union, not two generic shapes, for the same reason
+     * Combobox is: `v-model` needs one binding whose type does not depend on
+     * another prop's value, and a scalar/array mismatch is caught the same
+     * place the tree catches it — at the render.
+     */
+    modelValue?: string | number | Array<string | number> | undefined;
+    /** Whether one node or several can be chosen at once. */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * Fetch a branch's children the first time it is expanded. A node with no
+     * `children` of its own is treated as lazily loadable; one that resolves
+     * to an empty array becomes a leaf, and a rejected fetch leaves the node
+     * collapsed so the next activation retries rather than caching failure.
+     */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    /** Node values expanded on mount. After mount the tree owns the state. */
+    defaultExpanded?: Array<string | number>;
+    /**
+     * Unavailable: the rows dim, refuse selection and expansion, and drop out
+     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`
+     * read straight off the DOM.
+     */
+    disabled?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<TreeViewLabels> | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The nodes, in the order they are shown, parents before children. */
+    nodes: TreeNode[];
+    /**
+     * The chosen node's `value` — or every chosen value, when `selectionMode`
+     * is "multiple". The union, not two generic shapes, for the same reason
+     * Combobox is: `v-model` needs one binding whose type does not depend on
+     * another prop's value, and a scalar/array mismatch is caught the same
+     * place the tree catches it — at the render.
+     */
+    modelValue?: string | number | Array<string | number> | undefined;
+    /** Whether one node or several can be chosen at once. */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * Fetch a branch's children the first time it is expanded. A node with no
+     * `children` of its own is treated as lazily loadable; one that resolves
+     * to an empty array becomes a leaf, and a rejected fetch leaves the node
+     * collapsed so the next activation retries rather than caching failure.
+     */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    /** Node values expanded on mount. After mount the tree owns the state. */
+    defaultExpanded?: Array<string | number>;
+    /**
+     * Unavailable: the rows dim, refuse selection and expansion, and drop out
+     * of the tab order. Unset defers to an enclosing `<fieldset disabled>`
+     * read straight off the DOM.
+     */
+    disabled?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<TreeViewLabels> | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | number | (string | number)[]) => any;
+}>, {
+    disabled: boolean | undefined;
+    modelValue: string | number | Array<string | number> | undefined;
+    labels: LabelOverrides<TreeViewLabels> | undefined;
+    selectionMode: TreeViewSelectionMode;
+    defaultExpanded: Array<string | number>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=TreeView.vue.d.ts.map

package/dist/packages/primitives/tree-view/src/TreeView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,310 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { TREE_VIEW_CONTEXT } from "./context.js";
+import TreeViewNode_default from "./TreeViewNode.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, nextTick, onScopeDispose, openBlock, provide, ref, renderList, watch } from "vue";
+//#region packages/primitives/tree-view/src/TreeView.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-multiselectable", "aria-disabled"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* Everything else a tree renders is a node's own label, so the bag is one
+* string — but it is a string a reader waits on.
+*/
+var TREE_VIEW_LABELS = { loading: "Loading…" };
+var TreeView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TreeView",
+	props: {
+		nodes: {},
+		modelValue: { default: void 0 },
+		selectionMode: { default: "single" },
+		loadChildren: {},
+		defaultExpanded: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/**
+		* A row as the keyboard sees it: one step of the depth-first walk of the
+		* visible tree, with everything the key map needs resolved once per change
+		* instead of per keystroke.
+		*/
+		const rootEl = ref(null);
+		const ancestorDisabled = useAncestorDisabled(() => rootEl.value);
+		const controlDisabled = computed(() => (props.disabled ?? false) || ancestorDisabled.value);
+		const text = useLabels("treeView", TREE_VIEW_LABELS, () => props.labels);
+		const expandedKeys = ref(new Set(props.defaultExpanded));
+		const loadingKeys = ref(/* @__PURE__ */ new Set());
+		const lazyChildren = ref(/* @__PURE__ */ new Map());
+		const focusValue = ref(null);
+		function toKeySet(model) {
+			if (model == null) return /* @__PURE__ */ new Set();
+			return new Set(Array.isArray(model) ? model : [model]);
+		}
+		const selectedKeys = ref(toKeySet(props.modelValue));
+		watch(() => props.modelValue, (next) => {
+			selectedKeys.value = toKeySet(next);
+		});
+		function childrenOf(node) {
+			if (Array.isArray(node.children)) return node.children;
+			return lazyChildren.value.get(node.value) ?? [];
+		}
+		/**
+		* A row can open when it has children to show: a non-empty `children` array,
+		* or a fetch already resolved beneath it — an empty resolution *is* the
+		* answer, and the row collapses back to a leaf rather than offering a branch
+		* that opens onto nothing.
+		*/
+		function isExpandable(node) {
+			if (Array.isArray(node.children)) return node.children.length > 0;
+			const loaded = lazyChildren.value.get(node.value);
+			if (loaded) return loaded.length > 0;
+			return props.loadChildren != null;
+		}
+		const flatRows = computed(() => {
+			const rows = [];
+			const walk = (nodes, level, parentId) => {
+				for (let index = 0; index < nodes.length; index++) {
+					const node = nodes[index];
+					if (!node) continue;
+					const expandable = isExpandable(node);
+					const expanded = expandable && expandedKeys.value.has(node.value);
+					rows.push({
+						value: node.value,
+						node,
+						level,
+						setsize: nodes.length,
+						posinset: index + 1,
+						parentId,
+						expandable,
+						expanded,
+						selected: selectedKeys.value.has(node.value),
+						busy: loadingKeys.value.has(node.value),
+						disabled: (node.disabled ?? false) || controlDisabled.value
+					});
+					if (expanded) walk(childrenOf(node), level + 1, node.value);
+				}
+			};
+			walk(props.nodes, 1, null);
+			return rows;
+		});
+		const rowByValue = computed(() => new Map(flatRows.value.map((row) => [row.value, row])));
+		const tabStopValue = computed(() => {
+			const focused = focusValue.value != null ? rowByValue.value.get(focusValue.value) : void 0;
+			if (focused && !focused.disabled) return focusValue.value;
+			return flatRows.value.find((row) => !row.disabled)?.value ?? null;
+		});
+		function stateFor(node) {
+			const row = rowByValue.value.get(node.value);
+			return {
+				expandable: row?.expandable ?? false,
+				expanded: row?.expanded ?? false,
+				selected: row?.selected ?? false,
+				busy: row?.busy ?? false,
+				disabled: row?.disabled ?? false,
+				focusable: !controlDisabled.value && row?.value === tabStopValue.value
+			};
+		}
+		async function expandRow(row) {
+			const value = row.node.value;
+			if (row.disabled || !row.expandable || expandedKeys.value.has(value) || loadingKeys.value.has(value)) return;
+			if (!Array.isArray(row.node.children) && props.loadChildren != null && !lazyChildren.value.has(value) && props.loadChildren) {
+				loadingKeys.value = new Set(loadingKeys.value).add(value);
+				try {
+					const children = await props.loadChildren(row.node);
+					const next = new Map(lazyChildren.value);
+					next.set(value, children);
+					lazyChildren.value = next;
+				} catch {
+					return;
+				} finally {
+					const settled = new Set(loadingKeys.value);
+					settled.delete(value);
+					loadingKeys.value = settled;
+				}
+			}
+			expandedKeys.value = new Set(expandedKeys.value).add(value);
+		}
+		function collapseRow(value) {
+			const next = new Set(expandedKeys.value);
+			next.delete(value);
+			expandedKeys.value = next;
+		}
+		function selectRow(node) {
+			if (controlDisabled.value || node.disabled) return;
+			if (props.selectionMode === "multiple") {
+				const next = new Set(selectedKeys.value);
+				if (next.has(node.value)) next.delete(node.value);
+				else next.add(node.value);
+				selectedKeys.value = next;
+				emit("update:modelValue", [...next]);
+				return;
+			}
+			selectedKeys.value = /* @__PURE__ */ new Set([node.value]);
+			emit("update:modelValue", node.value);
+		}
+		function rowElement(value) {
+			const root = rootEl.value;
+			if (!root) return null;
+			return root.querySelector(`[data-tree-value="${CSS.escape(String(value))}"]`);
+		}
+		function focusRow(row) {
+			if (!row) return;
+			focusValue.value = row.node.value;
+			nextTick(() => {
+				rowElement(row.value)?.focus();
+			});
+		}
+		function onRowFocus(node) {
+			focusValue.value = node.value;
+		}
+		function onRowActivate(node) {
+			const row = rowByValue.value.get(node.value);
+			if (!row || controlDisabled.value) return;
+			focusRow(row);
+			selectRow(node);
+		}
+		function onChevronActivate(node) {
+			const row = rowByValue.value.get(node.value);
+			if (!row || controlDisabled.value || row.disabled) return;
+			focusRow(row);
+			if (row.expanded) collapseRow(node.value);
+			else expandRow(row);
+		}
+		function currentRowIndex() {
+			if (focusValue.value == null) return -1;
+			return flatRows.value.findIndex((row) => row.value === focusValue.value);
+		}
+		const TYPEAHEAD_RESET_MS = 500;
+		let typeaheadBuffer = "";
+		let typeaheadTimer;
+		function handleTypeahead(event) {
+			if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (flatRows.value.length === 0) return;
+			const char = event.key.toLowerCase();
+			if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;
+			const query = typeaheadBuffer;
+			const start = currentRowIndex() + 1;
+			for (let step = 0; step < flatRows.value.length; step++) {
+				const row = flatRows.value[(start + step) % flatRows.value.length];
+				if (row && !row.disabled && row.node.label.toLowerCase().startsWith(query)) {
+					focusRow(row);
+					break;
+				}
+			}
+			event.preventDefault();
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+				typeaheadTimer = void 0;
+			}, TYPEAHEAD_RESET_MS);
+		}
+		onScopeDispose(() => {
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+		});
+		/**
+		* One keydown on the root, reached from every row by bubbling: the key map is
+		* written once against the flat visible walk instead of duplicated per row.
+		* Disabled rows stay in the arrow walk — present and reachable, per the APG —
+		* but Enter, Space and the disclosure keys refuse them.
+		*/
+		function onKeydown(event) {
+			if (controlDisabled.value) return;
+			const rows = flatRows.value;
+			if (rows.length === 0) return;
+			const index = currentRowIndex();
+			const row = index >= 0 ? rows[index] : void 0;
+			switch (event.key) {
+				case "ArrowDown": {
+					const next = rows[index + 1];
+					if (next) focusRow(next);
+					break;
+				}
+				case "ArrowUp": {
+					const previous = index > 0 ? rows[index - 1] : void 0;
+					if (previous) focusRow(previous);
+					break;
+				}
+				case "Home":
+					focusRow(rows[0]);
+					break;
+				case "End":
+					focusRow(rows[rows.length - 1]);
+					break;
+				case "ArrowRight":
+					if (!row) break;
+					if (row.disabled) break;
+					if (row.expandable && !row.expanded) {
+						expandRow(row);
+						break;
+					}
+					if (row.expanded) {
+						const child = rows[index + 1];
+						if (child && child.level === row.level + 1) focusRow(child);
+					}
+					break;
+				case "ArrowLeft":
+					if (!row) break;
+					if (row.disabled) break;
+					if (row.expandable && row.expanded) {
+						collapseRow(row.value);
+						break;
+					}
+					if (row.parentId != null) {
+						const parent = rowByValue.value.get(row.parentId);
+						if (parent) focusRow(parent);
+					}
+					break;
+				case "Enter":
+				case " ":
+					if (row) selectRow(row.node);
+					break;
+				default:
+					handleTypeahead(event);
+					return;
+			}
+			event.preventDefault();
+		}
+		provide(TREE_VIEW_CONTEXT, {
+			stateFor,
+			childrenOf,
+			loadingText: computed(() => text.value.loading),
+			onRowFocus,
+			onRowActivate,
+			onChevronActivate
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				role: "tree",
+				"aria-multiselectable": __props.selectionMode === "multiple" ? "true" : void 0,
+				"aria-disabled": controlDisabled.value ? "true" : void 0,
+				class: "m-0 list-none select-none p-0 text-sm text-foreground",
+				onKeydown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes, (node, index) => {
+				return openBlock(), createBlock(TreeViewNode_default, {
+					key: node.value,
+					node,
+					level: 1,
+					setsize: __props.nodes.length,
+					posinset: index + 1
+				}, null, 8, [
+					"node",
+					"setsize",
+					"posinset"
+				]);
+			}), 128))], 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TREE_VIEW_LABELS, TreeView_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TreeView.vue_vue_type_script_setup_true_lang.js.map