@ecoma-io/loom 0.3.0 → 0.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.vue_vue_type_script_setup_true_lang.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":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport type { TreeNode } from \"./TreeView.vue\";\nimport { TREE_VIEW_CONTEXT } from \"./context\";\n\nconst props = defineProps<{\n  /** The node this row renders, with its subtree beneath it. */\n  node: TreeNode;\n  /** One-based depth — what `aria-level` says. */\n  level: number;\n  /** How many siblings this row has — what `aria-setsize` says. */\n  setsize: number;\n  /** This row's one-based position among those siblings — what `aria-posinset` says. */\n  posinset: number;\n}>();\n\nconst ctx = inject(TREE_VIEW_CONTEXT);\nif (!ctx) throw new Error(\"TreeViewNode must be rendered inside a TreeView.\");\n\nconst state = computed(() => ctx.stateFor(props.node));\nconst children = computed(() => ctx.childrenOf(props.node));\n// `aria-expanded` and `aria-selected` want the literal strings \"true\"/\"false\";\n// `String()` widens to `string`, which the ARIA types refuse.\nconst ariaExpanded = computed(() =>\n  state.value.expandable ? (state.value.expanded ? \"true\" : \"false\") : undefined,\n);\nconst ariaSelected = computed(() => (state.value.selected ? \"true\" : \"false\"));\n</script>\n\n<template>\n  <!--\n    The role carrier and the focus carrier are different elements on purpose.\n    ARIA attributes belong on the `li` the tree grammar expects; the tab stop,\n    the focus ring and the highlight sit on the inner row `div`, so the ring\n    wraps the row the reader is on and not the whole open branch beneath it.\n  -->\n  <li\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-setsize=\"setsize\"\n    :aria-posinset=\"posinset\"\n    :aria-expanded=\"ariaExpanded\"\n    :aria-selected=\"ariaSelected\"\n    :aria-disabled=\"state.disabled ? 'true' : undefined\"\n    :aria-busy=\"state.busy ? 'true' : undefined\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- the row answers the keyboard through the one keydown on the root `<ul>` every keydown bubbles to; a per-row listener would duplicate it. -->\n    <div\n      :data-tree-value=\"String(node.value)\"\n      :tabindex=\"state.focusable ? 0 : -1\"\n      :class=\"\n        cn(\n          'flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none',\n          'transition-colors duration-fast ease-out',\n          'hover:bg-subtle',\n          'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',\n          state.selected && 'bg-primary-muted text-primary-text',\n          state.disabled && 'cursor-not-allowed',\n        )\n      \"\n      @focusin=\"ctx.onRowFocus(node)\"\n      @click=\"ctx.onRowActivate(node)\"\n    >\n      <!--\n        The disclosure control is a glyph, not a button: a real `<button>`\n        would be a second tab stop inside every openable row, which is the one\n        thing the roving-tabindex contract cannot afford. Pointer users click\n        it; keyboard users reach the same behaviour with ArrowRight and\n        ArrowLeft, so nothing is keyboard-only because of this.\n      -->\n      <span\n        v-if=\"state.expandable\"\n        class=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\"\n        aria-hidden=\"true\"\n        @click.stop=\"ctx.onChevronActivate(node)\"\n      >\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'h-3.5 w-3.5 transition-transform duration-fast ease-out',\n              state.expanded && 'rotate-90',\n            )\n          \"\n        >\n          <path\n            d=\"m6 4 4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n      <!-- The same slot, left empty on a leaf, keeps every label on one axis. -->\n      <span v-else class=\"h-4 w-4 shrink-0\" aria-hidden=\"true\"></span>\n\n      <span class=\"truncate\" :class=\"state.disabled && 'text-muted-foreground'\">{{\n        node.label\n      }}</span>\n      <span v-if=\"state.busy\" class=\"shrink-0 text-small text-muted-foreground\">{{\n        ctx.loadingText.value\n      }}</span>\n    </div>\n\n    <ul v-if=\"state.expanded\" role=\"group\" class=\"m-0 list-none p-0 pl-4\">\n      <TreeViewNode\n        v-for=\"(child, index) in children\"\n        :key=\"child.value\"\n        :node=\"child\"\n        :level=\"level + 1\"\n        :setsize=\"children.length\"\n        :posinset=\"index + 1\"\n      />\n    </ul>\n  </li>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,15 @@
+import type { TreeNode } from "./TreeView.vue";
+type __VLS_Props = {
+    /** The node this row renders, with its subtree beneath it. */
+    node: TreeNode;
+    /** One-based depth — what `aria-level` says. */
+    level: number;
+    /** How many siblings this row has — what `aria-setsize` says. */
+    setsize: number;
+    /** This row's one-based position among those siblings — what `aria-posinset` says. */
+    posinset: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=TreeViewNode.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,KAAK,WAAW,GAAG;IACjB,8DAA8D;IAC9D,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AA4KF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,103 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { TREE_VIEW_CONTEXT } from "./context.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderList, resolveComponent, toDisplayString, unref, withModifiers } from "vue";
+//#region packages/primitives/tree-view/src/TreeViewNode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset",
+	"aria-expanded",
+	"aria-selected",
+	"aria-disabled",
+	"aria-busy"
+];
+var _hoisted_2 = ["data-tree-value", "tabindex"];
+var _hoisted_3 = {
+	key: 1,
+	class: "h-4 w-4 shrink-0",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "shrink-0 text-small text-muted-foreground"
+};
+var _hoisted_5 = {
+	key: 0,
+	role: "group",
+	class: "m-0 list-none p-0 pl-4"
+};
+var TreeViewNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TreeViewNode",
+	props: {
+		node: {},
+		level: {},
+		setsize: {},
+		posinset: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ctx = inject(TREE_VIEW_CONTEXT);
+		if (!ctx) throw new Error("TreeViewNode must be rendered inside a TreeView.");
+		const state = computed(() => ctx.stateFor(props.node));
+		const children = computed(() => ctx.childrenOf(props.node));
+		const ariaExpanded = computed(() => state.value.expandable ? state.value.expanded ? "true" : "false" : void 0);
+		const ariaSelected = computed(() => state.value.selected ? "true" : "false");
+		return (_ctx, _cache) => {
+			const _component_TreeViewNode = resolveComponent("TreeViewNode", true);
+			return openBlock(), createElementBlock("li", {
+				role: "treeitem",
+				"aria-level": __props.level,
+				"aria-setsize": __props.setsize,
+				"aria-posinset": __props.posinset,
+				"aria-expanded": ariaExpanded.value,
+				"aria-selected": ariaSelected.value,
+				"aria-disabled": state.value.disabled ? "true" : void 0,
+				"aria-busy": state.value.busy ? "true" : void 0
+			}, [createElementVNode("div", {
+				"data-tree-value": String(__props.node.value),
+				tabindex: state.value.focusable ? 0 : -1,
+				class: normalizeClass(unref(cn)("flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none", "transition-colors duration-fast ease-out", "hover:bg-subtle", "focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", state.value.selected && "bg-primary-muted text-primary-text", state.value.disabled && "cursor-not-allowed")),
+				onFocusin: _cache[1] || (_cache[1] = ($event) => unref(ctx).onRowFocus(__props.node)),
+				onClick: _cache[2] || (_cache[2] = ($event) => unref(ctx).onRowActivate(__props.node))
+			}, [
+				state.value.expandable ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground",
+					"aria-hidden": "true",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(ctx).onChevronActivate(__props.node), ["stop"]))
+				}, [(openBlock(), createElementBlock("svg", {
+					viewBox: "0 0 16 16",
+					fill: "none",
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("h-3.5 w-3.5 transition-transform duration-fast ease-out", state.value.expanded && "rotate-90"))
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
+					d: "m6 4 4 4-4 4",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, -1)])], 2))])) : (openBlock(), createElementBlock("span", _hoisted_3)),
+				createElementVNode("span", { class: normalizeClass(["truncate", state.value.disabled && "text-muted-foreground"]) }, toDisplayString(__props.node.label), 3),
+				state.value.busy ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(ctx).loadingText.value), 1)) : createCommentVNode("", true)
+			], 42, _hoisted_2), state.value.expanded ? (openBlock(), createElementBlock("ul", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, index) => {
+				return openBlock(), createBlock(_component_TreeViewNode, {
+					key: child.value,
+					node: child,
+					level: __props.level + 1,
+					setsize: children.value.length,
+					posinset: index + 1
+				}, null, 8, [
+					"node",
+					"level",
+					"setsize",
+					"posinset"
+				]);
+			}), 128))])) : createCommentVNode("", true)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TreeViewNode_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TreeViewNode.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewNode.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/TreeViewNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport type { TreeNode } from \"./TreeView.vue\";\nimport { TREE_VIEW_CONTEXT } from \"./context\";\n\nconst props = defineProps<{\n  /** The node this row renders, with its subtree beneath it. */\n  node: TreeNode;\n  /** One-based depth — what `aria-level` says. */\n  level: number;\n  /** How many siblings this row has — what `aria-setsize` says. */\n  setsize: number;\n  /** This row's one-based position among those siblings — what `aria-posinset` says. */\n  posinset: number;\n}>();\n\nconst ctx = inject(TREE_VIEW_CONTEXT);\nif (!ctx) throw new Error(\"TreeViewNode must be rendered inside a TreeView.\");\n\nconst state = computed(() => ctx.stateFor(props.node));\nconst children = computed(() => ctx.childrenOf(props.node));\n// `aria-expanded` and `aria-selected` want the literal strings \"true\"/\"false\";\n// `String()` widens to `string`, which the ARIA types refuse.\nconst ariaExpanded = computed(() =>\n  state.value.expandable ? (state.value.expanded ? \"true\" : \"false\") : undefined,\n);\nconst ariaSelected = computed(() => (state.value.selected ? \"true\" : \"false\"));\n</script>\n\n<template>\n  <!--\n    The role carrier and the focus carrier are different elements on purpose.\n    ARIA attributes belong on the `li` the tree grammar expects; the tab stop,\n    the focus ring and the highlight sit on the inner row `div`, so the ring\n    wraps the row the reader is on and not the whole open branch beneath it.\n  -->\n  <li\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-setsize=\"setsize\"\n    :aria-posinset=\"posinset\"\n    :aria-expanded=\"ariaExpanded\"\n    :aria-selected=\"ariaSelected\"\n    :aria-disabled=\"state.disabled ? 'true' : undefined\"\n    :aria-busy=\"state.busy ? 'true' : undefined\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- the row answers the keyboard through the one keydown on the root `<ul>` every keydown bubbles to; a per-row listener would duplicate it. -->\n    <div\n      :data-tree-value=\"String(node.value)\"\n      :tabindex=\"state.focusable ? 0 : -1\"\n      :class=\"\n        cn(\n          'flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none',\n          'transition-colors duration-fast ease-out',\n          'hover:bg-subtle',\n          'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',\n          state.selected && 'bg-primary-muted text-primary-text',\n          state.disabled && 'cursor-not-allowed',\n        )\n      \"\n      @focusin=\"ctx.onRowFocus(node)\"\n      @click=\"ctx.onRowActivate(node)\"\n    >\n      <!--\n        The disclosure control is a glyph, not a button: a real `<button>`\n        would be a second tab stop inside every openable row, which is the one\n        thing the roving-tabindex contract cannot afford. Pointer users click\n        it; keyboard users reach the same behaviour with ArrowRight and\n        ArrowLeft, so nothing is keyboard-only because of this.\n      -->\n      <span\n        v-if=\"state.expandable\"\n        class=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\"\n        aria-hidden=\"true\"\n        @click.stop=\"ctx.onChevronActivate(node)\"\n      >\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'h-3.5 w-3.5 transition-transform duration-fast ease-out',\n              state.expanded && 'rotate-90',\n            )\n          \"\n        >\n          <path\n            d=\"m6 4 4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n      <!-- The same slot, left empty on a leaf, keeps every label on one axis. -->\n      <span v-else class=\"h-4 w-4 shrink-0\" aria-hidden=\"true\"></span>\n\n      <span class=\"truncate\" :class=\"state.disabled && 'text-muted-foreground'\">{{\n        node.label\n      }}</span>\n      <span v-if=\"state.busy\" class=\"shrink-0 text-small text-muted-foreground\">{{\n        ctx.loadingText.value\n      }}</span>\n    </div>\n\n    <ul v-if=\"state.expanded\" role=\"group\" class=\"m-0 list-none p-0 pl-4\">\n      <TreeViewNode\n        v-for=\"(child, index) in children\"\n        :key=\"child.value\"\n        :node=\"child\"\n        :level=\"level + 1\"\n        :setsize=\"children.length\"\n        :posinset=\"index + 1\"\n      />\n    </ul>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAWd,MAAM,MAAM,OAAO,iBAAiB;EACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kDAAkD;EAE5E,MAAM,QAAQ,eAAe,IAAI,SAAS,MAAM,IAAI,CAAC;EACrD,MAAM,WAAW,eAAe,IAAI,WAAW,MAAM,IAAI,CAAC;EAG1D,MAAM,eAAe,eACnB,MAAM,MAAM,aAAc,MAAM,MAAM,WAAW,SAAS,UAAW,KAAA,CACvE;EACA,MAAM,eAAe,eAAgB,MAAM,MAAM,WAAW,SAAS,OAAQ;;;GAU3E,OAAA,UAAA,GAAA,mBAiFK,MAAA;IAhFH,MAAK;IACJ,cAAY,QAAA;IACZ,gBAAc,QAAA;IACd,iBAAe,QAAA;IACf,iBAAe,aAAA;IACf,iBAAe,aAAA;IACf,iBAAe,MAAA,MAAM,WAAQ,SAAY,KAAA;IACzC,aAAW,MAAA,MAAM,OAAI,SAAY,KAAA;GAGlC,GAAA,CAAA,mBA0DM,OAAA;IAzDH,mBAAiB,OAAO,QAAA,KAAK,KAAK;IAClC,UAAU,MAAA,MAAM,YAAS,IAAA;IACzB,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,oGAAA,4CAAA,mBAAA,8GAAqU,MAAA,MAAM,YAAQ,sCAAoD,MAAA,MAAM,YAAQ,oBAAA,CAAA;IAUva,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,GAAA,CAAG,CAAC,WAAW,QAAA,IAAI;IAC5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,GAAA,CAAG,CAAC,cAAc,QAAA,IAAI;;IAUtB,MAAA,MAAM,cADd,UAAA,GAAA,mBAyBO,QAAA;;KAvBL,OAAM;KACN,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,GAAA,CAAG,CAAC,kBAAkB,QAAA,IAAI,GAAA,CAAA,MAAA,CAAA;IAEvC,GAAA,EAAA,UAAA,GAAA,mBAkBM,OAAA;KAjBJ,SAAQ;KACR,MAAK;KACL,eAAY;KACX,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,2DAAyF,MAAA,MAAM,YAAQ,WAAA,CAAA;IAO9H,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAME,QAAA;KALA,GAAE;KACF,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;IAKtB,GAAA,MAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA,MAAA,UAAA,GAAA,mBAAgE,QAAhE,UAAgE;IAEhE,mBAES,QAAA,EAFH,OAAK,eAAA,CAAC,YAAmB,MAAA,MAAM,YAAQ,uBAAA,CAAA,EAC3C,GAAA,gBAAA,QAAA,KAAK,KAAK,GAAA,CAAA;IAEA,MAAA,MAAM,QAAlB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,MAAA,GAAA,CAAG,CAAC,YAAY,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAIf,GAAA,IAAA,UAAA,GAAA,MAAA,MAAM,YAAhB,UAAA,GAAA,mBASK,MATL,YASK,EARH,UAAA,IAAA,GAAA,mBAOE,UAAA,MAAA,WANyB,SAAA,QAAjB,OAAO,UAAK;IADtB,OAAA,UAAA,GAAA,YAOE,yBAAA;KALC,KAAK,MAAM;KACX,MAAM;KACN,OAAO,QAAA,QAAK;KACZ,SAAS,SAAA,MAAS;KAClB,UAAU,QAAK"}

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

@@ -0,0 +1,39 @@
+import type { ComputedRef, InjectionKey } from "vue";
+import type { TreeNode } from "./TreeView.vue";
+/**
+ * What a row needs to know about itself, resolved by the tree that owns the
+ * state. The node component stays presentational: it computes nothing about
+ * expandability, selection or focus and renders what it is handed.
+ */
+export interface TreeViewNodeState {
+    /** The row can open and close — it has children to show. */
+    expandable: boolean;
+    /** The row is open, so its subtree is in the DOM beneath it. */
+    expanded: boolean;
+    /** The row is one of the chosen ones. */
+    selected: boolean;
+    /** The row's children are being fetched by `loadChildren` right now. */
+    busy: boolean;
+    /** The row, or the whole tree it stands in, is unavailable. */
+    disabled: boolean;
+    /** The row holds the roving tab stop — the one row Tab reaches. */
+    focusable: boolean;
+}
+/**
+ * The seam between the tree (which owns every bit of state and the keyboard)
+ * and its rows. Provided once by the tree and injected at every depth, which
+ * is what lets the recursion be a plain SFC: events go up through these
+ * handlers, state comes down through these getters, and neither side carries
+ * the other's props through N levels of re-emission.
+ */
+export interface TreeViewContext {
+    stateFor(node: TreeNode): TreeViewNodeState;
+    childrenOf(node: TreeNode): TreeNode[];
+    /** The localised string shown while a row's children are being fetched. */
+    loadingText: ComputedRef<string>;
+    onRowFocus(node: TreeNode): void;
+    onRowActivate(node: TreeNode): void;
+    onChevronActivate(node: TreeNode): void;
+}
+export declare const TREE_VIEW_CONTEXT: InjectionKey<TreeViewContext>;
+//# sourceMappingURL=context.d.ts.map

package/dist/packages/primitives/tree-view/src/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/tree-view/src/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,UAAU,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,IAAI,EAAE,OAAO,CAAC;IACd,+DAA+D;IAC/D,QAAQ,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,iBAAiB,CAAC;IAC5C,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACvC,2EAA2E;IAC3E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,eAAe,CAA4B,CAAC"}

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

@@ -0,0 +1,6 @@
+//#region packages/primitives/tree-view/src/context.ts
+var TREE_VIEW_CONTEXT = Symbol("loom.tree-view");
+//#endregion
+export { TREE_VIEW_CONTEXT };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../../packages/primitives/tree-view/src/context.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from \"vue\";\nimport type { TreeNode } from \"./TreeView.vue\";\n\n/**\n * What a row needs to know about itself, resolved by the tree that owns the\n * state. The node component stays presentational: it computes nothing about\n * expandability, selection or focus and renders what it is handed.\n */\nexport interface TreeViewNodeState {\n  /** The row can open and close — it has children to show. */\n  expandable: boolean;\n  /** The row is open, so its subtree is in the DOM beneath it. */\n  expanded: boolean;\n  /** The row is one of the chosen ones. */\n  selected: boolean;\n  /** The row's children are being fetched by `loadChildren` right now. */\n  busy: boolean;\n  /** The row, or the whole tree it stands in, is unavailable. */\n  disabled: boolean;\n  /** The row holds the roving tab stop — the one row Tab reaches. */\n  focusable: boolean;\n}\n\n/**\n * The seam between the tree (which owns every bit of state and the keyboard)\n * and its rows. Provided once by the tree and injected at every depth, which\n * is what lets the recursion be a plain SFC: events go up through these\n * handlers, state comes down through these getters, and neither side carries\n * the other's props through N levels of re-emission.\n */\nexport interface TreeViewContext {\n  stateFor(node: TreeNode): TreeViewNodeState;\n  childrenOf(node: TreeNode): TreeNode[];\n  /** The localised string shown while a row's children are being fetched. */\n  loadingText: ComputedRef<string>;\n  onRowFocus(node: TreeNode): void;\n  onRowActivate(node: TreeNode): void;\n  onChevronActivate(node: TreeNode): void;\n}\n\nexport const TREE_VIEW_CONTEXT: InjectionKey<TreeViewContext> = Symbol(\"loom.tree-view\");\n"],"mappings":";AAwCA,IAAa,oBAAmD,OAAO,gBAAgB"}

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

@@ -0,0 +1,4 @@
+export { default, TREE_VIEW_LABELS } from "./TreeView.vue";
+export type { TreeNode, TreeViewSelectionMode } from "./TreeView.vue";
+export type { TreeViewLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { TREE_VIEW_LABELS } from "./TreeView.vue_vue_type_script_setup_true_lang.js";
+import TreeView_default from "./TreeView.js";
+export { TREE_VIEW_LABELS, TreeView_default as default };

package/dist/packages/primitives/visually-hidden/src/VisuallyHidden.js

@@ -0,0 +1,7 @@
+import VisuallyHidden_vue_vue_type_script_setup_true_lang_default from "./VisuallyHidden.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/visually-hidden/src/VisuallyHidden.vue
+var VisuallyHidden_default = VisuallyHidden_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { VisuallyHidden_default as default };
+
+//# sourceMappingURL=VisuallyHidden.js.map

package/dist/packages/primitives/visually-hidden/src/VisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","names":[],"sources":["../../../../../packages/primitives/visually-hidden/src/VisuallyHidden.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which element tag carries the visually-hidden content. */\nexport type VisuallyHiddenElement = \"span\" | \"div\";\n</script>\n\n<script setup lang=\"ts\">\n/**\n * VisuallyHidden — content assistive technology reads that the page never\n * paints. The clip technique: a 1×1 box pulled out of flow and clipped to\n * nothing, which keeps the content in the accessibility tree and reachable\n * by in-page find. Deliberately not `display: none`, which would remove it\n * from screen readers too, and never focusable in its own right — if the\n * content should take focus, the caller puts a focusable element in the\n * slot and this wrapper stays inert.\n */\nwithDefaults(\n  defineProps<{\n    /** `span` keeps the markup valid inside phrasing content — labels, buttons, paragraphs. `div` when the hidden content is a block of its own. */\n    as?: VisuallyHiddenElement;\n  }>(),\n  { as: \"span\" },\n);\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)]\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/visually-hidden/src/VisuallyHidden.vue.d.ts

@@ -0,0 +1,21 @@
+/** Which element tag carries the visually-hidden content. */
+export type VisuallyHiddenElement = "span" | "div";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** `span` keeps the markup valid inside phrasing content — labels, buttons, paragraphs. `div` when the hidden content is a block of its own. */
+    as?: VisuallyHiddenElement;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** `span` keeps the markup valid inside phrasing content — labels, buttons, paragraphs. `div` when the hidden content is a block of its own. */
+    as?: VisuallyHiddenElement;
+}> & Readonly<{}>, {
+    as: VisuallyHiddenElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=VisuallyHidden.vue.d.ts.map

package/dist/packages/primitives/visually-hidden/src/VisuallyHidden.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/visually-hidden/src/VisuallyHidden.vue"],"names":[],"mappings":"AAoCA,6DAA6D;AAC7D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,KAAK,CAAC;wBAC9B,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAWd,gJAAgJ;SAC3I,qBAAqB;;IAD1B,gJAAgJ;SAC3I,qBAAqB;;QAArB,qBAAqB;;cAiDhB,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,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/visually-hidden/src/VisuallyHidden.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { createBlock, defineComponent, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#region packages/primitives/visually-hidden/src/VisuallyHidden.vue?vue&type=script&setup=true&lang.ts
+var VisuallyHidden_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "VisuallyHidden",
+	props: { as: { default: "span" } },
+	setup(__props) {
+		/**
+		* VisuallyHidden — content assistive technology reads that the page never
+		* paints. The clip technique: a 1×1 box pulled out of flow and clipped to
+		* nothing, which keeps the content in the accessibility tree and reachable
+		* by in-page find. Deliberately not `display: none`, which would remove it
+		* from screen readers too, and never focusable in its own right — if the
+		* content should take focus, the caller puts a focusable element in the
+		* slot and this wrapper stays inert.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), { class: "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)]" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { VisuallyHidden_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=VisuallyHidden.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/visually-hidden/src/VisuallyHidden.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/visually-hidden/src/VisuallyHidden.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which element tag carries the visually-hidden content. */\nexport type VisuallyHiddenElement = \"span\" | \"div\";\n</script>\n\n<script setup lang=\"ts\">\n/**\n * VisuallyHidden — content assistive technology reads that the page never\n * paints. The clip technique: a 1×1 box pulled out of flow and clipped to\n * nothing, which keeps the content in the accessibility tree and reachable\n * by in-page find. Deliberately not `display: none`, which would remove it\n * from screen readers too, and never focusable in its own right — if the\n * content should take focus, the caller puts a focusable element in the\n * slot and this wrapper stays inert.\n */\nwithDefaults(\n  defineProps<{\n    /** `span` keeps the markup valid inside phrasing content — labels, buttons, paragraphs. `div` when the hidden content is a block of its own. */\n    as?: VisuallyHiddenElement;\n  }>(),\n  { as: \"span\" },\n);\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)]\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;GAyBE,OAAA,UAAA,GAAA,YAKY,wBAJL,QAAA,EAAE,GAAA,EACP,OAAM,sHAAqH,GAAA;IAE3H,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/packages/primitives/visually-hidden/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./VisuallyHidden.vue";
+export type { VisuallyHiddenElement } from "./VisuallyHidden.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/visually-hidden/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/visually-hidden/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/packages/primitives/visually-hidden/src/index.js

@@ -0,0 +1,2 @@
+import VisuallyHidden_default from "./VisuallyHidden.js";
+export { VisuallyHidden_default as default };

package/dist/packages/primitives/window-controls/src/WindowControls.vue.d.ts

@@ -1,5 +1,5 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import type { WindowControlsLabels } from "@ecoma-io/loom-labels";
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { WindowControlsLabels } from "../../../labels/src/index";
 /**
  * WindowControls — the minimize / maximize / close cluster for a frameless
  * (custom-chrome) window. Presentational only: it emits intents; the host wires

package/dist/packages/primitives/window-controls/src/index.d.ts

@@ -1,4 +1,4 @@
 export { default, WINDOW_CONTROLS_LABELS } from "./WindowControls.vue";
 export type { WindowPlatform } from "./WindowControls.vue";
-export type { WindowControlsLabels } from "@ecoma-io/loom-labels";
+export type { WindowControlsLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/styles/global.css

@@ -111,6 +111,21 @@
  * layout. When the overlay is active, the brand cluster's left padding expands
  * to clear the native controls on the left edge (same corner as macOS), and
  * the drag region continues to work over the full bar width. */
+/* ---- AppHeader safe areas --------------------------------------------------
+ * The shell's own strip sits at the very top of the viewport, which is exactly
+ * where a phone's notch and a PWA's title-bar overlay reserve space. The base
+ * padding stays the component's; this only adds what the platform takes back,
+ * on the same attribute-hook pattern as `[data-loom-titlebar]` above. */
+[data-loom-app-header] {
+  padding-block-start: calc(0.5rem + var(--safe-area-top, 0px));
+}
+
+@media (min-width: 640px) {
+  [data-loom-app-header] {
+    padding-block-start: var(--safe-area-top, 0px);
+  }
+}
+
 @supports (window-controls-overlay: visible) {
   [data-loom-titlebar] {
     /* Narrow the drag spacer so the title text is not pushed too far right.
@@ -197,6 +212,35 @@
   }
 }
 
+/* ---- Expansion. The disclosure pair: a panel growing into and out of its
+ * own height, keyed to Reka's `--reka-collapsible-content-height` (the px
+ * value Reka measures onto every Collapsible content element). This is the
+ * height animation the Accordion docblock once deferred to this file rather
+ * than hand-rolling per component; Collapse plays it, and Accordion can
+ * adopt it whenever its own look is next revisited.
+ *
+ * Height animates layout, which is why the pair exists as keyframes on one
+ * property with `overflow-hidden` supplied by the component — nothing here
+ * fights a live measurement, and under reduced motion the collapse to
+ * 0.01ms turns both into the instant toggle those readers asked for. */
+@keyframes expand {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapse {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 /* An edge-anchored panel leaving along its own axis.
  *
  * These animate `translate`, not `transform`, and the distinction is the whole
@@ -267,6 +311,21 @@
   }
 }
 
+/* The exit answering `toast-in`, leaving along the same axis it arrived and
+ * was swiped away on. It rides the toast root — Reka's Presence holds that
+ * element for `animationend`; an animation on an inner card would never play
+ * a frame. */
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(0.75rem);
+  }
+}
+
 /* Respect the reader. Motion is meaning, but it is never a barrier. */
 @media (prefers-reduced-motion: reduce) {
   *,

package/dist/styles/theme.css

@@ -300,6 +300,19 @@
   --animate-slide-out-to-right: slide-out-to-right var(--duration-normal) var(--ease-in) both; /* a panel leaving past the right edge */
   --animate-slide-out-to-top: slide-out-to-top var(--duration-normal) var(--ease-in) both; /* a panel leaving past the top edge */
   --animate-slide-out-to-bottom: slide-out-to-bottom var(--duration-normal) var(--ease-in) both; /* a panel leaving past the bottom edge */
+
+  /* The exit answering `--animate-toast-in`: the card leaves along the axis it
+   * arrived on, on the accelerate curve, shorter than its entrance — the same
+   * relationship every exit here keeps with the entrance it mirrors. */
+  --animate-toast-out: toast-out var(--duration-fast) var(--ease-in) both;
+
+  /* The disclosure pair, keyed to Reka's measured content height — see
+   * `global.css` for why these are height keyframes at all. Arriving is the
+   * emphasized direction (decelerating into place over `--duration-normal`);
+   * leaving clears the eye faster on the accelerate curve, like every exit
+   * above. */
+  --animate-expand: expand var(--duration-normal) var(--ease-out) both;
+  --animate-collapse: collapse var(--duration-fast) var(--ease-in) both;
 }
 
 /* Tailwind has no `--duration-*` theme namespace — `duration-*` takes a bare

package/dist/theme.js

@@ -0,0 +1,3 @@
+import { themeScript, useTheme } from "./packages/core/src/theme.js";
+import "./packages/core/src/index.js";
+export { themeScript, useTheme };