@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/primitives/menubar/src/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","names":[],"sources":["../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n/*\n * The typeahead. APG menubars match a prefix of the item's label, starting\n * after the focused row and wrapping; a character's repeated key re-cycles\n * to its own next match rather than extending the prefix to a non-match, so\n * the pending buffer is kept but the repeated final character is not\n * appended. The buffer is 500 ms, case-insensitive, and the timer is released\n * on unmount so a menubar torn down mid-typeahead leaves nothing pending —\n * the same contract the TreeView sibling keeps.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction typeaheadJump(items: MenubarItem[], from: number): void {\n  const query = typeaheadBuffer;\n  // The whole buffered prefix decides the match: repeated characters extend\n  // it, and a fresh character restarts it, so \"Co\" reaches \"Copy\" only when\n  // both keys follow each other within the timeout.\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (from + step) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {\n      goTo(items, i);\n      break;\n    }\n  }\n}\n\nfunction handleTypeahead(e: KeyboardEvent, items: MenubarItem[]): void {\n  if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n  if (e.key === \" \" || e.key === \"Enter\") return; // activation keys, handled above\n  const char = e.key.toLowerCase();\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  e.preventDefault();\n  typeaheadJump(items, activeIndex.value);\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonBeforeUnmount(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n    // Every other key is a printable character: APG typeahead moves focus to\n    // the next item whose label begins with it. `default` sees only these —\n    // Space/Enter/Escape each have their own case above.\n    default:\n      handleTypeahead(e, items);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/primitives/menubar/src/Menubar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,332 @@
+import { listStaggerDelay } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { Fragment, Transition, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region packages/primitives/menubar/src/Menubar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["dir"];
+var _hoisted_2 = [
+	"id",
+	"aria-expanded",
+	"onClick",
+	"onMouseenter",
+	"onFocus",
+	"onKeydown"
+];
+var _hoisted_3 = ["aria-label", "onKeydown"];
+var _hoisted_4 = {
+	key: 0,
+	role: "separator",
+	class: "my-1 h-px bg-border"
+};
+var _hoisted_5 = [
+	"disabled",
+	"data-highlighted",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+];
+var _hoisted_6 = {
+	key: 0,
+	class: "tabular text-micro text-muted-foreground"
+};
+var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Menubar",
+	props: {
+		menus: {},
+		dir: {}
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const horizontal = computed(() => props.dir === "rtl" ? -1 : 1);
+		const openId = ref(null);
+		const activeIndex = ref(-1);
+		const panelEls = /* @__PURE__ */ new Map();
+		const triggerEls = /* @__PURE__ */ new Map();
+		function bindPanel(id, el) {
+			if (el instanceof HTMLElement) panelEls.set(id, el);
+			else panelEls.delete(id);
+		}
+		function bindTrigger(id, el) {
+			if (el instanceof HTMLButtonElement) triggerEls.set(id, el);
+			else triggerEls.delete(id);
+		}
+		function boundPanel() {
+			return openId.value ? panelEls.get(openId.value) ?? null : null;
+		}
+		const openMenu = (menu) => menu?.items ?? [];
+		const firstEnabled = (items, from = 0, dir = 1) => {
+			for (let i = from; i >= 0 && i < items.length; i += dir) {
+				const item = items[i];
+				if (item && !item.separator && !item.disabled) return i;
+			}
+			return -1;
+		};
+		/** One arrow-step away from `from`, wrapping through every slot exactly once. */
+		function neighborEnabled(items, from, dir) {
+			const n = items.length;
+			for (let step = 1; step <= n; step++) {
+				const i = ((from + dir * step) % n + n) % n;
+				const item = items[i];
+				if (item && !item.separator && !item.disabled) return i;
+			}
+			return -1;
+		}
+		/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */
+		function rowOrdinal(items, index) {
+			let ordinal = -1;
+			for (let k = 0; k <= index && k < items.length; k++) if (!items[k]?.separator) ordinal++;
+			return ordinal;
+		}
+		function rowButtons() {
+			const panel = boundPanel();
+			return panel ? Array.from(panel.querySelectorAll("button[role=\"menuitem\"]")) : [];
+		}
+		function focusRow(items, index) {
+			rowButtons()[rowOrdinal(items, index)]?.focus();
+		}
+		function goTo(items, index) {
+			if (index < 0) return;
+			activeIndex.value = index;
+			focusRow(items, index);
+		}
+		async function openAndFocusFirst(id, items) {
+			await nextTick();
+			if (openId.value !== id) return;
+			goTo(items, firstEnabled(items));
+		}
+		async function toggle(id) {
+			if (openId.value === id) {
+				close(true);
+				return;
+			}
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = id;
+			activeIndex.value = -1;
+			await openAndFocusFirst(id, menu.items);
+		}
+		async function hover(id, via) {
+			if (openId.value === null || openId.value === id) return;
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = id;
+			activeIndex.value = -1;
+			if (via === "pointer") await openAndFocusFirst(id, menu.items);
+		}
+		function choose(item) {
+			if (item.separator || item.disabled) return;
+			close(true);
+			if (item.command) emit("select", item.command);
+		}
+		function close(restoreFocus = false) {
+			const id = openId.value;
+			openId.value = null;
+			activeIndex.value = -1;
+			if (restoreFocus && id) triggerEls.get(id)?.focus();
+		}
+		async function moveMenu(dir) {
+			const ids = props.menus.map((m) => m.id);
+			const id = ids[((openId.value ? ids.indexOf(openId.value) : 0) + dir + ids.length) % ids.length];
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = menu.id;
+			activeIndex.value = -1;
+			await openAndFocusFirst(menu.id, menu.items);
+		}
+		/**
+		* Pointer highlight of an enabled row moves focus with it — under the roving
+		* model the highlighted row IS the focused row, and screen readers announce
+		* focus changes, not CSS classes.
+		*/
+		function pointAtRow(items, item, index) {
+			if (item.disabled || item.separator || activeIndex.value === index) return;
+			activeIndex.value = index;
+			focusRow(items, index);
+		}
+		/** Native focus landing on a row keeps `activeIndex` truthful about it. */
+		function noteFocus(item, index) {
+			if (item.disabled || item.separator) return;
+			activeIndex.value = index;
+		}
+		const TYPEAHEAD_RESET_MS = 500;
+		let typeaheadBuffer = "";
+		let typeaheadTimer;
+		function typeaheadJump(items, from) {
+			const query = typeaheadBuffer;
+			const n = items.length;
+			for (let step = 1; step <= n; step++) {
+				const i = (from + step) % n;
+				const item = items[i];
+				if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {
+					goTo(items, i);
+					break;
+				}
+			}
+		}
+		function handleTypeahead(e, items) {
+			if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;
+			if (e.key === " " || e.key === "Enter") return;
+			const char = e.key.toLowerCase();
+			if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;
+			e.preventDefault();
+			typeaheadJump(items, activeIndex.value);
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+				typeaheadTimer = void 0;
+			}, TYPEAHEAD_RESET_MS);
+		}
+		onBeforeUnmount(() => {
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+		});
+		/**
+		* The APG's closed-state traversal: Left/Right across the strip land on the
+		* neighbouring trigger without opening anything — opening is ArrowDown,
+		* Enter or Space's job.
+		*/
+		function moveTriggerFocus(from, dir) {
+			const ids = props.menus.map((m) => m.id);
+			const cur = ids.indexOf(from);
+			if (cur === -1) return;
+			triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? "")?.focus();
+		}
+		async function onTriggerKeydown(e, menu) {
+			switch (e.key) {
+				case "ArrowDown":
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					openId.value = menu.id;
+					activeIndex.value = -1;
+					await openAndFocusFirst(menu.id, menu.items);
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					if (openId.value) moveMenu(horizontal.value);
+					else moveTriggerFocus(menu.id, horizontal.value);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					if (openId.value) moveMenu(-horizontal.value);
+					else moveTriggerFocus(menu.id, -horizontal.value);
+					break;
+				case "Escape":
+					e.preventDefault();
+					close(true);
+			}
+		}
+		function onMenuKeydown(e, menu) {
+			const items = menu.items;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					goTo(items, neighborEnabled(items, activeIndex.value, 1));
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					goTo(items, neighborEnabled(items, activeIndex.value, -1));
+					break;
+				case "Home":
+					e.preventDefault();
+					goTo(items, firstEnabled(items, 0, 1));
+					break;
+				case "End":
+					e.preventDefault();
+					goTo(items, firstEnabled(items, items.length - 1, -1));
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					moveMenu(horizontal.value);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					moveMenu(-horizontal.value);
+					break;
+				case "Enter":
+				case " ": {
+					e.preventDefault();
+					const item = items[activeIndex.value];
+					if (item) choose(item);
+					break;
+				}
+				case "Escape":
+					e.preventDefault();
+					close(true);
+					break;
+				default: handleTypeahead(e, items);
+			}
+		}
+		function onRootFocusout(e) {
+			if (!openId.value) return;
+			const root = e.currentTarget;
+			const next = e.relatedTarget;
+			if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();
+		}
+		const onWindowClick = () => close();
+		onMounted(() => window.addEventListener("click", onWindowClick));
+		onBeforeUnmount(() => window.removeEventListener("click", onWindowClick));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				dir: __props.dir,
+				role: "menubar",
+				class: "flex items-center gap-0.5",
+				style: { "-webkit-app-region": "no-drag" },
+				onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+				onFocusout: onRootFocusout
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (menu) => {
+				return openBlock(), createElementBlock("div", {
+					key: menu.id,
+					class: "relative"
+				}, [createElementVNode("button", {
+					id: `menubar-trigger-${menu.id}`,
+					ref_for: true,
+					ref: (el) => bindTrigger(menu.id, el),
+					type: "button",
+					role: "menuitem",
+					"aria-haspopup": "menu",
+					"aria-expanded": openId.value === menu.id,
+					class: normalizeClass(["min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", openId.value === menu.id && "bg-subtle text-foreground"]),
+					onClick: withModifiers(($event) => toggle(menu.id), ["stop"]),
+					onMouseenter: ($event) => hover(menu.id, "pointer"),
+					onFocus: ($event) => hover(menu.id, "trigger-focus"),
+					onKeydown: ($event) => onTriggerKeydown($event, menu)
+				}, toDisplayString(menu.label), 43, _hoisted_2), createVNode(Transition, {
+					"enter-active-class": "animate-scale-in",
+					"leave-active-class": "animate-scale-out"
+				}, {
+					default: withCtx(() => [openId.value === menu.id ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_for: true,
+						ref: (el) => bindPanel(menu.id, el),
+						role: "menu",
+						"aria-label": menu.label,
+						tabindex: "-1",
+						class: "absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+						onKeydown: ($event) => onMenuKeydown($event, menu)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(openMenu(menu), (item, i) => {
+						return openBlock(), createElementBlock(Fragment, { key: i }, [item.separator ? (openBlock(), createElementBlock("div", _hoisted_4)) : (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							role: "menuitem",
+							tabindex: "-1",
+							disabled: item.disabled,
+							"data-highlighted": activeIndex.value === i || void 0,
+							style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(i) }),
+							class: "flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise",
+							onClick: ($event) => choose(item),
+							onMouseenter: ($event) => pointAtRow(openMenu(menu), item, i),
+							onFocus: ($event) => noteFocus(item, i)
+						}, [createElementVNode("span", null, toDisplayString(item.label), 1), item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)], 44, _hoisted_5))], 64);
+					}), 128))], 40, _hoisted_3)) : createCommentVNode("", true)]),
+					_: 2
+				}, 1024)]);
+			}), 128))], 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Menubar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Menubar.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/menubar/src/Menubar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n/*\n * The typeahead. APG menubars match a prefix of the item's label, starting\n * after the focused row and wrapping; a character's repeated key re-cycles\n * to its own next match rather than extending the prefix to a non-match, so\n * the pending buffer is kept but the repeated final character is not\n * appended. The buffer is 500 ms, case-insensitive, and the timer is released\n * on unmount so a menubar torn down mid-typeahead leaves nothing pending —\n * the same contract the TreeView sibling keeps.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction typeaheadJump(items: MenubarItem[], from: number): void {\n  const query = typeaheadBuffer;\n  // The whole buffered prefix decides the match: repeated characters extend\n  // it, and a fresh character restarts it, so \"Co\" reaches \"Copy\" only when\n  // both keys follow each other within the timeout.\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (from + step) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {\n      goTo(items, i);\n      break;\n    }\n  }\n}\n\nfunction handleTypeahead(e: KeyboardEvent, items: MenubarItem[]): void {\n  if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n  if (e.key === \" \" || e.key === \"Enter\") return; // activation keys, handled above\n  const char = e.key.toLowerCase();\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  e.preventDefault();\n  typeaheadJump(items, activeIndex.value);\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonBeforeUnmount(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n    // Every other key is a printable character: APG typeahead moves focus to\n    // the next item whose label begins with it. `default` sees only these —\n    // Space/Enter/Escape each have their own case above.\n    default:\n      handleTypeahead(e, items);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/meter/src/Meter.js

@@ -0,0 +1,7 @@
+import Meter_vue_vue_type_script_setup_true_lang_default, { METER_LABELS, meterVariants } from "./Meter.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/meter/src/Meter.vue
+var Meter_default = Meter_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { METER_LABELS, Meter_default as default, meterVariants };
+
+//# sourceMappingURL=Meter.js.map

package/dist/primitives/meter/src/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","names":[],"sources":["../../../../packages/primitives/meter/src/Meter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MeterLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const METER_LABELS: MeterLabels = {\n  name: \"Meter\",\n  valueText: ({ value, max }) => `${value} of ${max}`,\n  optimal: \"Optimal\",\n  cautionary: \"Caution\",\n  critical: \"Critical\",\n};\n\n/**\n * The track's thickness, the same scale as Progress — a meter is a gauge, not a\n * form control, so it stays a stroke rather than aligning with input height.\n */\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport const meterVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<MeterSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { Check, CircleAlert, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Meter — a scalar capacity gauge on the WAI-ARIA meter role, visually a sibling\n * of Progress (same stroke scale, track/fill anatomy). Renders a measured\n * quantity against a known capacity — disk usage, budget consumption, seat\n * allocation — things that are not tasks and should never say \"loading.\"\n *\n * Built directly on `<div role=\"meter\">` rather than a headless component: the\n * ARIA meter role carries the same contract as the HTML meter element (min, max,\n * value, low, high, optimum) and a headless abstraction would add nothing but\n * an extra dependency — Progress uses Reka UI because progressbar's indeterminate\n * animation requires real DOM transitions Meter does not need.\n *\n * The accessible name is mandatory: a meter without a name is a number with no\n * referent. Four sources, resolved in order:\n * 1. `ariaLabelledby` (external element)\n * 2. `ariaLabel` (explicit string, no visible text)\n * 3. `label` (visible text, same string as the name)\n * 4. `text.name` (the labels-seam fallback — guaranteed non-empty)\n *\n * A `value` above `max` paints the bar full but `aria-valuenow` reports the\n * clamped value, because a spoken number outside the declared range is a lie\n * — the Progress lesson, carried forward.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The measured amount, clamped into [min, max] for both the fill and the announced value. */\n    value: number;\n    /** The value at which the gauge reads 0% full. */\n    min?: number;\n    /** The value at which the gauge reads 100% full. */\n    max?: number;\n    /** Low threshold — the boundary between the low and medium regions (HTML meter semantics). */\n    low?: number;\n    /** High threshold — the boundary between the medium and high regions (HTML meter semantics). */\n    high?: number;\n    /** The optimal value; decides which region is the good one. Defaults to the midpoint. */\n    optimum?: number;\n    /** Visible text that also supplies the accessible name when no ariaLabel/ariaLabelledby is set. */\n    label?: string;\n    /** Accessible name for the gauge, in place of a visible label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`/`label`. */\n    ariaLabelledby?: string;\n    /** Track thickness. Its own scale, not the control-height scale — a gauge is a stroke. */\n    size?: MeterSize;\n    /** Opt-in band recolouring (success/warning/destructive) with a redundant non-colour cue per band. */\n    threshold?: boolean;\n    /** Print the localised value text beside the track. Hidden from AT — the role already announces it. */\n    showValue?: boolean;\n    /**\n     * How the gauge speaks, as any subset of `MeterLabels` — the rest stay as\n     * the host's `provideLoomLabels` vocabulary left them, and then as Loom's\n     * English.\n     */\n    labels?: LabelOverrides<MeterLabels>;\n  }>(),\n  {\n    min: 0,\n    max: 100,\n    size: \"md\",\n    threshold: false,\n    showValue: false,\n  },\n);\n\nconst text = useLabels(\"meter\", METER_LABELS, () => props.labels);\n\n/** Track label text sizing, matching Progress's readout scale exactly. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<MeterSize, string>;\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\nconst labelElId = useId();\n\n// ---------------------------------------------------------------------------\n// Value clamping — the Progress lesson: a spoken value outside [min, max] is a lie.\n// ---------------------------------------------------------------------------\n\n/** Clamped value, for the fill AND the aria attributes — never out of range. */\nconst clamped = computed<number>(() => {\n  const v = props.value;\n  if (Number.isNaN(v)) return props.min;\n  return Math.min(Math.max(v, props.min), props.max);\n});\n\n/** Percentage 0–100, from the clamped value. */\nconst pct = computed<number>(() => {\n  const range = props.max - props.min;\n  if (range <= 0) return 100;\n  return ((clamped.value - props.min) / range) * 100;\n});\n\n// ---------------------------------------------------------------------------\n// Band logic — HTML meter element's three-quality model, exactly.\n//\n// Three regions: low [min, low), medium [low, high], high (high, max].\n// The optimum point selects which region is preferred, and how the others rank.\n//\n// Per HTML spec §4.10.16:\n//   optimum in low    → low=preferred, medium=suboptimal, high=even-less-good\n//   optimum in medium → medium=preferred, low=suboptimal, high=suboptimal\n//   optimum in high   → high=preferred, medium=suboptimal, low=even-less-good\n//\n// When a region is \"even less good\" it maps to critical; \"suboptimal\" maps\n// to cautionary. No critical band exists when optimum is in the medium region\n// (both extremes are equally suboptimal).\n// ---------------------------------------------------------------------------\n\ntype Band = \"optimal\" | \"cautionary\" | \"critical\";\n\nconst band = computed<Band | undefined>(() => {\n  if (!props.threshold) return undefined;\n\n  let lo = props.low ?? props.min;\n  let hi = props.high ?? props.max;\n\n  // Clamp both boundaries into [min, max], then reject an inverted pair the\n  // way the HTML meter element does: treat both as unset rather than build a\n  // region model out of crossed boundaries.\n  lo = Math.min(Math.max(lo, props.min), props.max);\n  hi = Math.min(Math.max(hi, props.min), props.max);\n  if (lo > hi) {\n    lo = props.min;\n    hi = props.max;\n  }\n\n  const o = Math.min(Math.max(props.optimum ?? (props.min + props.max) / 2, props.min), props.max);\n  const v = clamped.value;\n\n  // Determine which region contains the optimum.\n  // Boundaries: low < value < high belongs to medium; low ≤ optimum ≤ high is medium.\n  // Region 0: [min, lo)   Region 1: [lo, hi]   Region 2: (hi, max]\n  const optRegion = o < lo ? 0 : o <= hi ? 1 : 2;\n\n  // Map regions to qualities per the table.\n  const regionMap: { optimal: number; cautionary: number[]; critical: number | null } =\n    optRegion === 0\n      ? { optimal: 0, cautionary: [1], critical: 2 }\n      : optRegion === 1\n        ? { optimal: 1, cautionary: [0, 2], critical: null }\n        : { optimal: 2, cautionary: [1], critical: 0 };\n\n  // Determine which region the current value falls into.\n  const valueRegion = v < lo ? 0 : v <= hi ? 1 : 2;\n\n  if (valueRegion === regionMap.optimal) return \"optimal\";\n  if (regionMap.cautionary.includes(valueRegion)) return \"cautionary\";\n  if (regionMap.critical === valueRegion) return \"critical\";\n  return \"optimal\"; // fallback — should not be reached\n});\n\n/** The fill colour when threshold is on; stays primary otherwise. */\nconst fillClass = computed(() => {\n  if (!props.threshold) return \"bg-primary\";\n  const b = band.value;\n  if (b === \"optimal\") return \"bg-success\";\n  if (b === \"cautionary\") return \"bg-warning\";\n  return \"bg-destructive\";\n});\n\n/** The band cue word from labels. */\nconst cueWord = computed(() => {\n  if (!band.value) return \"\";\n  return text.value[band.value];\n});\n\n/** The band cue icon component. */\nconst cueIcon = computed(() => {\n  if (band.value === \"optimal\") return Check;\n  if (band.value === \"cautionary\") return CircleAlert;\n  return X;\n});\n\n/** The cue colour class — the `-text` token of the band, never the fill token:\n * `--color-success` in dark is a fill lightness and fails text contrast. */\nconst cueColorClass = computed(() => {\n  if (band.value === \"optimal\") return \"text-success-text\";\n  if (band.value === \"cautionary\") return \"text-warning-text\";\n  return \"text-destructive-text\";\n});\n\n/** The fill indicator style — translateX slides the fill from right to left. */\nconst indicatorStyle = computed(() => ({\n  transition:\n    \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n  transform: `translateX(${pct.value - 100}%)`,\n}));\n\n/** aria-valuetext — localisable; never absent because the role is meaningless without it. */\nconst valuetext = computed(() =>\n  text.value.valueText({ value: clamped.value, min: props.min, max: props.max }),\n);\n\n// ---------------------------------------------------------------------------\n// Accessible name resolution — four sources, in precedence order.\n// ---------------------------------------------------------------------------\n\n/**\n * `label` is a content prop and always renders; `ariaLabel`/`ariaLabelledby`\n * choose only where the NAME comes from. A caller passing both wants visible\n * text under one name and a different announced name — silencing the visible\n * text would make the pair unrepresentable. And because assistive tech reads\n * `aria-labelledby` ahead of `aria-label`, whichever source loses must not\n * emit its attribute at all: an `ariaLabel` beside a label-pointing\n * `aria-labelledby` would be read past, not preferred.\n */\nconst ariaLabelAttr = computed(() => {\n  if (props.ariaLabelledby) return undefined;\n  if (props.ariaLabel) return props.ariaLabel;\n  if (props.label) return undefined; // named through the span's id instead\n  return text.value.name; // the seam fallback — a name is never absent\n});\n\nconst ariaLabelledbyAttr = computed(() => {\n  if (props.ariaLabelledby) return props.ariaLabelledby;\n  if (props.ariaLabel) return undefined; // ariaLabel wins the name\n  if (props.label) return labelElId;\n  return undefined;\n});\n\n/** Whether the visible `label` text renders. */\nconst hasVisibleLabel = computed(() => !!props.label);\n\n/** Whether the gauge row needs extra content beside the track. */\nconst hasRow = computed(() => props.showValue || (props.threshold && band.value));\n</script>\n\n<template>\n  <!-- Visible label — only when `label` is set and no ariaLabel/ariaLabelledby overrides it.\n       Rendered as a <span> rather than <label> because a div[role=\"meter\"] is not a\n       labelable element; the association is through aria-labelledby pointing at the span's id. -->\n  <span\n    v-if=\"hasVisibleLabel\"\n    :id=\"labelElId\"\n    :class=\"cn('block text-sm font-medium text-foreground mb-1', VALUE_TEXT[size])\"\n  >\n    {{ label }}\n  </span>\n\n  <!-- Branch 1: bare track — nothing beside it, no wrapper. Mirrors Progress's\n       default branch: the component's box is the track itself, and it keeps\n       the exact sizing it had before `showValue`/`threshold` existed. -->\n  <div\n    v-if=\"!hasRow\"\n    role=\"meter\"\n    :aria-valuenow=\"clamped\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"valuetext\"\n    :aria-label=\"ariaLabelAttr\"\n    :aria-labelledby=\"ariaLabelledbyAttr\"\n    v-bind=\"rest\"\n    :class=\"cn(meterVariants({ size }), attrs.class as string)\"\n  >\n    <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n  </div>\n\n  <!-- Branch 2: gauge row with cue/readout — a flex row so the track and the\n       side content share a single box. `class` from the caller lands on this\n       row (the outermost box the caller sees), and everything else lands on the\n       meter element through `rest`. -->\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"clamped\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuetext=\"valuetext\"\n      :aria-label=\"ariaLabelAttr\"\n      :aria-labelledby=\"ariaLabelledbyAttr\"\n      v-bind=\"rest\"\n      :class=\"cn(meterVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n    </div>\n\n    <!-- Value readout + band cue, aria-hidden (the meter role already announces the\n         value via aria-valuetext, and the band is derivable from it). Fixed width so\n         the row does not resize as the digits change. -->\n    <div aria-hidden=\"true\" :class=\"cn('flex items-center gap-2 shrink-0')\">\n      <span\n        v-if=\"showValue\"\n        :class=\"cn('tabular w-10 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >\n        {{ valuetext }}\n      </span>\n      <span\n        v-if=\"threshold && band\"\n        :class=\"cn('flex items-center gap-1 whitespace-nowrap', cueColorClass, VALUE_TEXT[size])\"\n      >\n        <component :is=\"cueIcon\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n        <span>{{ cueWord }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}