@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/primitives/command/src/Command.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,333 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, watch } from "vue";
+//#region packages/primitives/command/src/Command.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-state"];
+var _hoisted_2 = { class: "flex items-center border-b border-border" };
+var _hoisted_3 = [
+	"id",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-labelledby",
+	"aria-label",
+	"placeholder",
+	"value"
+];
+var _hoisted_4 = ["id", "aria-labelledby"];
+var _hoisted_5 = ["id"];
+var _hoisted_6 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"data-active",
+	"onMouseenter",
+	"onClick"
+];
+var _hoisted_7 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_8 = {
+	key: 0,
+	role: "option",
+	"aria-selected": "false",
+	"aria-disabled": "true",
+	class: "px-2 py-6 text-center text-sm text-muted-foreground"
+};
+var _hoisted_9 = ["id"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* Every string a Command actually says is the chrome around the host's items,
+* so the whole slot is here and none of it hides in the template.
+*/
+var COMMAND_LABELS = {
+	placeholder: "Type to search…",
+	emptyMessage: "No results found.",
+	searchLabel: "Search",
+	resultSingular: "{count} result available",
+	resultPlural: "{count} results available"
+};
+var Command_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Command",
+	props: {
+		items: {},
+		groups: {},
+		query: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: { default: void 0 },
+		ariaLabelledby: {}
+	},
+	emits: [
+		"select",
+		"update:query",
+		"update:open"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const resolvedLabels = useLabels("command", COMMAND_LABELS, () => props.labels);
+		const inputId = useId();
+		const listboxId = useId();
+		const liveRegionId = useId();
+		/**
+		* The controlled/uncontrolled query. When `query` is bound from outside, the
+		* prop wins; otherwise the component owns its own state.
+		*/
+		const internalQuery = ref("");
+		const queryValue = computed(() => props.query ?? internalQuery.value);
+		function setQuery(value) {
+			internalQuery.value = value;
+			emit("update:query", value);
+		}
+		/**
+		* The controlled/uncontrolled open state. `true` when the listbox is visible.
+		*/
+		const internalOpen = ref(true);
+		const isOpen = computed(() => props.open ?? internalOpen.value);
+		function setOpen(value) {
+			if (props.open !== void 0) emit("update:open", value);
+			else internalOpen.value = value;
+		}
+		/**
+		* Bring the listbox back after Escape closed it. Focus never leaves the
+		* search input, so without this a closed Command is a dead end — the only
+		* escape, before this fix, was unmounting the component. Controlled mode is
+		* untouched: the emit the host chose stays with the host, and this rewrites
+		* only the fallback state a host never bound.
+		*/
+		function restoreOpen() {
+			if (props.open === void 0) internalOpen.value = true;
+		}
+		/**
+		* The index of the highlighted item within the filtered list. Reset to `0`
+		* whenever the query changes so the first match is always ready to select.
+		*/
+		const highlightedIndex = ref(0);
+		const listboxRef = ref(null);
+		watch([highlightedIndex, isOpen], async () => {
+			if (!isOpen.value) return;
+			await nextTick();
+			listboxRef.value?.querySelector("[data-active]")?.scrollIntoView?.({ block: "nearest" });
+		});
+		/**
+		* Items filtered by the current query. Case-insensitive substring match
+		* across `label`, `description` and `value`.
+		*/
+		const filteredItems = computed(() => {
+			const needle = queryValue.value.trim().toLowerCase();
+			if (!needle) return props.items;
+			return props.items.filter((item) => {
+				return [
+					item.label,
+					item.description ?? "",
+					item.value
+				].join(" ").toLowerCase().includes(needle);
+			});
+		});
+		/**
+		* Items grouped for rendering. Each entry is either a group heading or a flat
+		* item. Groups with no matching items are omitted entirely.
+		*/
+		const renderEntries = computed(() => {
+			if (filteredItems.value.length === 0) return [];
+			const groupDefs = props.groups;
+			if (!groupDefs || groupDefs.length === 0) return filteredItems.value.map((item, i) => ({
+				kind: "item",
+				item,
+				globalIndex: i
+			}));
+			const ungrouped = [];
+			const grouped = /* @__PURE__ */ new Map();
+			for (const item of filteredItems.value) if (item.group) {
+				const list = grouped.get(item.group) ?? [];
+				list.push(item);
+				grouped.set(item.group, list);
+			} else ungrouped.push(item);
+			const entries = [];
+			let globalIndex = 0;
+			for (const def of groupDefs) {
+				const items = grouped.get(def.heading);
+				if (!items || items.length === 0) continue;
+				entries.push({
+					kind: "heading",
+					heading: def.heading,
+					groupId: `${inputId}-group-${def.heading}`
+				});
+				for (const item of items) {
+					entries.push({
+						kind: "item",
+						item,
+						globalIndex
+					});
+					globalIndex++;
+				}
+			}
+			for (const item of ungrouped) {
+				entries.push({
+					kind: "item",
+					item,
+					globalIndex
+				});
+				globalIndex++;
+			}
+			return entries;
+		});
+		/**
+		* The item list for the non-grouped case, used by keyboard navigation. Derived
+		* from `renderEntries` so the two are always in sync.
+		*/
+		const flatItems = computed(() => renderEntries.value.filter((e) => e.kind === "item"));
+		/**
+		* Keep the highlight within bounds. A filter that removes items can strand the
+		* index past the end.
+		*/
+		watch(flatItems, (items) => {
+			if (highlightedIndex.value >= items.length) highlightedIndex.value = Math.max(0, items.length - 1);
+		});
+		/**
+		* The documented reset: the highlight returns to the first match whenever the
+		* query changes — whether the query came from typing or from a parent updating
+		* the controlled `query` prop. Typing reaches this watcher through `setQuery`,
+		* which is why onInput no longer resets the highlight itself.
+		*/
+		watch(queryValue, () => {
+			highlightedIndex.value = 0;
+		});
+		/**
+		* The total number of results, announced to assistive technology through a live
+		* region. Changes only when the filtered set changes, not on every keystroke.
+		*/
+		const resultCount = computed(() => filteredItems.value.length);
+		const announcement = ref("");
+		watch(resultCount, (count) => {
+			const template = count === 1 ? resolvedLabels.value.resultSingular : resolvedLabels.value.resultPlural;
+			announcement.value = template.replace("{count}", String(count));
+		});
+		/**
+		* The currently highlighted item, or `undefined` when the list is empty.
+		*/
+		const highlightedItem = computed(() => flatItems.value[highlightedIndex.value]?.item);
+		function highlightUp() {
+			if (flatItems.value.length === 0) return;
+			highlightedIndex.value = highlightedIndex.value <= 0 ? flatItems.value.length - 1 : highlightedIndex.value - 1;
+		}
+		function highlightDown() {
+			if (flatItems.value.length === 0) return;
+			highlightedIndex.value = highlightedIndex.value >= flatItems.value.length - 1 ? 0 : highlightedIndex.value + 1;
+		}
+		function selectHighlighted() {
+			const item = highlightedItem.value;
+			if (!item || item.disabled) return;
+			emit("select", item.value);
+		}
+		function onKeydown(event) {
+			if (!isOpen.value && event.key !== "Escape" && event.key !== "Tab") restoreOpen();
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					highlightDown();
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					highlightUp();
+					break;
+				case "Enter":
+					event.preventDefault();
+					selectHighlighted();
+					break;
+				case "Escape":
+					event.preventDefault();
+					if (queryValue.value.length > 0) setQuery("");
+					else setOpen(false);
+					break;
+				case "Home":
+					event.preventDefault();
+					if (flatItems.value.length > 0) highlightedIndex.value = 0;
+					break;
+				case "End":
+					event.preventDefault();
+					if (flatItems.value.length > 0) highlightedIndex.value = flatItems.value.length - 1;
+			}
+		}
+		function onInput(event) {
+			const value = event.target.value;
+			setQuery(value);
+		}
+		function selectItem(item) {
+			if (item.disabled) return;
+			emit("select", item.value);
+		}
+		function itemId(index) {
+			return `${inputId}-option-${String(index)}`;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-state": isOpen.value ? "open" : "closed",
+				class: normalizeClass(unref(cn)("rounded-md border border-border bg-popover text-popover-foreground shadow-md overflow-hidden", "outline-none"))
+			}, [
+				createElementVNode("div", _hoisted_2, [createElementVNode("input", {
+					id: unref(inputId),
+					type: "text",
+					role: "searchbox",
+					autocomplete: "off",
+					autocorrect: "off",
+					spellcheck: "false",
+					"aria-autocomplete": "list",
+					"aria-controls": unref(listboxId),
+					"aria-activedescendant": highlightedItem.value ? itemId(highlightedIndex.value) : void 0,
+					"aria-labelledby": __props.ariaLabelledby,
+					"aria-label": __props.ariaLabelledby ? void 0 : unref(resolvedLabels).searchLabel,
+					placeholder: unref(resolvedLabels).placeholder,
+					value: queryValue.value,
+					class: "w-full px-3 py-2 text-sm bg-transparent text-foreground border-none outline-none placeholder:text-muted-foreground",
+					onInput,
+					onKeydown,
+					onFocus: restoreOpen,
+					onClick: restoreOpen
+				}, null, 40, _hoisted_3)]),
+				isOpen.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(listboxId),
+					ref_key: "listboxRef",
+					ref: listboxRef,
+					role: "listbox",
+					tabindex: "0",
+					"aria-labelledby": unref(inputId),
+					class: "max-h-[300px] overflow-y-auto p-1"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderEntries.value, (entry) => {
+					return openBlock(), createElementBlock(Fragment, { key: entry.kind === "heading" ? entry.groupId : entry.item.value }, [entry.kind === "heading" ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: entry.groupId,
+						role: "presentation",
+						class: "px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground"
+					}, toDisplayString(entry.heading), 9, _hoisted_5)) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						id: itemId(entry.globalIndex),
+						role: "option",
+						"aria-selected": highlightedIndex.value === entry.globalIndex,
+						"aria-disabled": entry.item.disabled || void 0,
+						"data-active": highlightedIndex.value === entry.globalIndex || void 0,
+						class: "flex flex-col gap-0.5 rounded-sm px-2 py-1.5 text-sm cursor-pointer outline-none transition-colors duration-fast ease-out data-[active]:bg-primary-muted data-[active]:text-primary-text",
+						onMouseenter: ($event) => highlightedIndex.value = entry.globalIndex,
+						onClick: ($event) => selectItem(entry.item)
+					}, [createElementVNode("span", null, toDisplayString(entry.item.label), 1), entry.item.description ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(entry.item.description), 1)) : createCommentVNode("", true)], 40, _hoisted_6))], 64);
+				}), 128)), filteredItems.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(unref(resolvedLabels).emptyMessage), 1)) : createCommentVNode("", true)], 8, _hoisted_4)) : createCommentVNode("", true),
+				createElementVNode("span", {
+					id: unref(liveRegionId),
+					role: "status",
+					"aria-live": "polite",
+					class: "sr-only"
+				}, toDisplayString(announcement.value), 9, _hoisted_9)
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { COMMAND_LABELS, Command_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Command.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/command/src/Command.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/command/src/Command.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CommandLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n/**\n * One searchable item in the command list. `value` is what the host receives on\n * select; `label` is what the reader sees and what the filter matches against.\n *\n * Deliberately not `ComboboxOption` or `DropdownMenuEntry`: those shapes carry\n * `modelValue` and `separator` fields respectively, and either would be\n * dead weight here — a command is an action, not a value or a menu row.\n */\nexport interface CommandItem {\n  /** Unique key. */\n  value: string;\n  /** Visible label. */\n  label: string;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Group heading this item belongs to. */\n  group?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * A named section heading above a run of items. Only rendered when the group\n * contains at least one item that survived the current filter.\n */\nexport interface CommandGroup {\n  /** Group heading text. */\n  heading: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Every string a Command actually says is the chrome around the host's items,\n * so the whole slot is here and none of it hides in the template.\n */\nexport const COMMAND_LABELS: CommandLabels = {\n  placeholder: \"Type to search…\",\n  emptyMessage: \"No results found.\",\n  searchLabel: \"Search\",\n  resultSingular: \"{count} result available\",\n  resultPlural: \"{count} results available\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useId, watch } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Command — a keyboard-driven command search, the universal \"Cmd+K\" pattern.\n *\n * A text input that narrows a grouped list as you type, for executing actions\n * rather than selecting values. Its neighbour is `Combobox`, which selects a\n * value for a form field; this control runs an action and has no `modelValue`.\n *\n * The two are one family in the same way a Combobox and a Select are: the same\n * surface vocabulary, the same tokens, the same keyboard model. What differs is\n * intent — \"open settings\" is not a value you could submit in a form — and that\n * intent shapes the API: `onSelect` rather than `v-model`.\n *\n * Built from native ARIA roles rather than Reka UI, because Reka ships no\n * Command primitive. The semantics follow the WAI-ARIA combobox pattern with\n * `aria-activedescendant` navigation: focus stays in the input while the\n * highlighted item moves, which is the only model that keeps typing fluid.\n *\n * `aria-expanded` is deliberately absent. The input is a fixed searchbox, not\n * a popover trigger, so it has no collapsed state to announce: the listbox is\n * visible on mount and returns on any interaction after Escape closes it.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The items to search through. */\n    items: CommandItem[];\n    /** Optional group definitions for section headers. */\n    groups?: CommandGroup[];\n    /** Controlled search query. */\n    query?: string | undefined;\n    /** Whether the command menu is open. */\n    open?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<CommandLabels> | undefined;\n    /** Accessible label by reference for the search input. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    query: undefined,\n    open: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Fired when an item is selected. */\n  select: [value: string];\n  /** Fired when the query changes. */\n  \"update:query\": [value: string];\n  /** Fired when open state changes. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst resolvedLabels = useLabels(\"command\", COMMAND_LABELS, () => props.labels);\n\nconst inputId = useId();\nconst listboxId = useId();\nconst liveRegionId = useId();\n\n/**\n * The controlled/uncontrolled query. When `query` is bound from outside, the\n * prop wins; otherwise the component owns its own state.\n */\nconst internalQuery = ref(\"\");\nconst queryValue = computed(() => props.query ?? internalQuery.value);\n\nfunction setQuery(value: string): void {\n  internalQuery.value = value;\n  emit(\"update:query\", value);\n}\n\n/**\n * The controlled/uncontrolled open state. `true` when the listbox is visible.\n */\nconst internalOpen = ref(true);\nconst isOpen = computed(() => props.open ?? internalOpen.value);\n\nfunction setOpen(value: boolean): void {\n  if (props.open !== undefined) {\n    emit(\"update:open\", value);\n  } else {\n    internalOpen.value = value;\n  }\n}\n\n/**\n * Bring the listbox back after Escape closed it. Focus never leaves the\n * search input, so without this a closed Command is a dead end — the only\n * escape, before this fix, was unmounting the component. Controlled mode is\n * untouched: the emit the host chose stays with the host, and this rewrites\n * only the fallback state a host never bound.\n */\nfunction restoreOpen(): void {\n  if (props.open === undefined) internalOpen.value = true;\n}\n\n/**\n * The index of the highlighted item within the filtered list. Reset to `0`\n * whenever the query changes so the first match is always ready to select.\n */\nconst highlightedIndex = ref(0);\n\nconst listboxRef = ref<HTMLElement | null>(null);\n\n// Arrow-key focus never leaves the input (aria-activedescendant), so the\n// scrollable listbox must be tab-reachable itself — an overflow container no\n// keyboard can reach is the scrollable-region-focusable violation the harness\n// axe gate exists to catch. Scrolling the highlighted option into view is the\n// other half: an active item moved off-screen is navigation the user cannot\n// see. jsdom has no scrollIntoView, hence the optional call.\nwatch([highlightedIndex, isOpen], async () => {\n  if (!isOpen.value) return;\n  await nextTick();\n  listboxRef.value?.querySelector(\"[data-active]\")?.scrollIntoView?.({ block: \"nearest\" });\n});\n\n/**\n * Items filtered by the current query. Case-insensitive substring match\n * across `label`, `description` and `value`.\n */\nconst filteredItems = computed(() => {\n  const needle = queryValue.value.trim().toLowerCase();\n  if (!needle) return props.items;\n  return props.items.filter((item) => {\n    const haystack = [item.label, item.description ?? \"\", item.value].join(\" \").toLowerCase();\n    return haystack.includes(needle);\n  });\n});\n\n/**\n * Items grouped for rendering. Each entry is either a group heading or a flat\n * item. Groups with no matching items are omitted entirely.\n */\ninterface GroupedEntry {\n  kind: \"heading\";\n  heading: string;\n  groupId: string;\n}\n\ninterface GroupedItem {\n  kind: \"item\";\n  item: CommandItem;\n  globalIndex: number;\n}\n\ntype RenderEntry = GroupedEntry | GroupedItem;\n\nconst renderEntries = computed<RenderEntry[]>(() => {\n  if (filteredItems.value.length === 0) return [];\n\n  const groupDefs = props.groups;\n  if (!groupDefs || groupDefs.length === 0) {\n    return filteredItems.value.map((item, i) => ({ kind: \"item\", item, globalIndex: i }));\n  }\n\n  const ungrouped: CommandItem[] = [];\n  const grouped = new Map<string, CommandItem[]>();\n\n  for (const item of filteredItems.value) {\n    if (item.group) {\n      const list = grouped.get(item.group) ?? [];\n      list.push(item);\n      grouped.set(item.group, list);\n    } else {\n      ungrouped.push(item);\n    }\n  }\n\n  const entries: RenderEntry[] = [];\n  let globalIndex = 0;\n\n  for (const def of groupDefs) {\n    const items = grouped.get(def.heading);\n    if (!items || items.length === 0) continue;\n    entries.push({\n      kind: \"heading\",\n      heading: def.heading,\n      groupId: `${inputId}-group-${def.heading}`,\n    });\n    for (const item of items) {\n      entries.push({ kind: \"item\", item, globalIndex });\n      globalIndex++;\n    }\n  }\n\n  for (const item of ungrouped) {\n    entries.push({ kind: \"item\", item, globalIndex });\n    globalIndex++;\n  }\n\n  return entries;\n});\n\n/**\n * The item list for the non-grouped case, used by keyboard navigation. Derived\n * from `renderEntries` so the two are always in sync.\n */\nconst flatItems = computed(() =>\n  renderEntries.value.filter((e): e is GroupedItem => e.kind === \"item\"),\n);\n\n/**\n * Keep the highlight within bounds. A filter that removes items can strand the\n * index past the end.\n */\nwatch(flatItems, (items) => {\n  if (highlightedIndex.value >= items.length) {\n    highlightedIndex.value = Math.max(0, items.length - 1);\n  }\n});\n\n/**\n * The documented reset: the highlight returns to the first match whenever the\n * query changes — whether the query came from typing or from a parent updating\n * the controlled `query` prop. Typing reaches this watcher through `setQuery`,\n * which is why onInput no longer resets the highlight itself.\n */\nwatch(queryValue, () => {\n  highlightedIndex.value = 0;\n});\n\n/**\n * The total number of results, announced to assistive technology through a live\n * region. Changes only when the filtered set changes, not on every keystroke.\n */\nconst resultCount = computed(() => filteredItems.value.length);\nconst announcement = ref(\"\");\nwatch(resultCount, (count) => {\n  const template =\n    count === 1 ? resolvedLabels.value.resultSingular : resolvedLabels.value.resultPlural;\n  announcement.value = template.replace(\"{count}\", String(count));\n});\n\n/**\n * The currently highlighted item, or `undefined` when the list is empty.\n */\nconst highlightedItem = computed(() => flatItems.value[highlightedIndex.value]?.item);\n\nfunction highlightUp(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value <= 0 ? flatItems.value.length - 1 : highlightedIndex.value - 1;\n}\n\nfunction highlightDown(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value >= flatItems.value.length - 1 ? 0 : highlightedIndex.value + 1;\n}\n\nfunction selectHighlighted(): void {\n  const item = highlightedItem.value;\n  if (!item || item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // A closed Command returns on any interaction except the two that leave it —\n  // Escape (the key that closed it, still under the same finger) and Tab\n  // (which moves focus elsewhere). Keydown fires before the input event, so\n  // typing also lands on an open list.\n  if (!isOpen.value && event.key !== \"Escape\" && event.key !== \"Tab\") restoreOpen();\n  switch (event.key) {\n    case \"ArrowDown\": {\n      event.preventDefault();\n      highlightDown();\n      break;\n    }\n    case \"ArrowUp\": {\n      event.preventDefault();\n      highlightUp();\n      break;\n    }\n    case \"Enter\": {\n      event.preventDefault();\n      selectHighlighted();\n      break;\n    }\n    case \"Escape\": {\n      event.preventDefault();\n      if (queryValue.value.length > 0) {\n        setQuery(\"\");\n      } else {\n        setOpen(false);\n      }\n      break;\n    }\n    case \"Home\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = 0;\n      break;\n    }\n    case \"End\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = flatItems.value.length - 1;\n      break;\n    }\n  }\n}\n\nfunction onInput(event: Event): void {\n  const value = (event.target as HTMLInputElement).value;\n  setQuery(value);\n}\n\nfunction selectItem(item: CommandItem): void {\n  if (item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction itemId(index: number): string {\n  return `${inputId}-option-${String(index)}`;\n}\n</script>\n\n<template>\n  <div\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    :class=\"\n      cn(\n        'rounded-md border border-border bg-popover text-popover-foreground shadow-md overflow-hidden',\n        'outline-none',\n      )\n    \"\n  >\n    <div class=\"flex items-center border-b border-border\">\n      <input\n        :id=\"inputId\"\n        type=\"text\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-activedescendant=\"highlightedItem ? itemId(highlightedIndex) : undefined\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :aria-label=\"ariaLabelledby ? undefined : resolvedLabels.searchLabel\"\n        :placeholder=\"resolvedLabels.placeholder\"\n        :value=\"queryValue\"\n        class=\"w-full px-3 py-2 text-sm bg-transparent text-foreground border-none outline-none placeholder:text-muted-foreground\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"restoreOpen\"\n        @click=\"restoreOpen\"\n      />\n    </div>\n    <div\n      v-if=\"isOpen\"\n      :id=\"listboxId\"\n      ref=\"listboxRef\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      :aria-labelledby=\"inputId\"\n      class=\"max-h-[300px] overflow-y-auto p-1\"\n    >\n      <template\n        v-for=\"entry in renderEntries\"\n        :key=\"entry.kind === 'heading' ? entry.groupId : entry.item.value\"\n      >\n        <div\n          v-if=\"entry.kind === 'heading'\"\n          :id=\"entry.groupId\"\n          role=\"presentation\"\n          class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n        >\n          {{ entry.heading }}\n        </div>\n        <!-- eslint-disable vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus, vuejs-accessibility/mouse-events-have-key-events -->\n        <div\n          v-else\n          :id=\"itemId(entry.globalIndex)\"\n          role=\"option\"\n          :aria-selected=\"highlightedIndex === entry.globalIndex\"\n          :aria-disabled=\"entry.item.disabled || undefined\"\n          :data-active=\"highlightedIndex === entry.globalIndex || undefined\"\n          class=\"flex flex-col gap-0.5 rounded-sm px-2 py-1.5 text-sm cursor-pointer outline-none transition-colors duration-fast ease-out data-[active]:bg-primary-muted data-[active]:text-primary-text\"\n          @mouseenter=\"highlightedIndex = entry.globalIndex\"\n          @click=\"selectItem(entry.item)\"\n        >\n          <span>{{ entry.item.label }}</span>\n          <span v-if=\"entry.item.description\" class=\"text-xs text-muted-foreground\">\n            {{ entry.item.description }}\n          </span>\n        </div>\n      </template>\n\n      <div\n        v-if=\"filteredItems.length === 0\"\n        role=\"option\"\n        aria-selected=\"false\"\n        aria-disabled=\"true\"\n        class=\"px-2 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ resolvedLabels.emptyMessage }}\n      </div>\n    </div>\n\n    <span :id=\"liveRegionId\" role=\"status\" aria-live=\"polite\" class=\"sr-only\">\n      {{ announcement }}\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/command/src/index.js

@@ -0,0 +1,3 @@
+import { COMMAND_LABELS } from "./Command.vue_vue_type_script_setup_true_lang.js";
+import Command_default from "./Command.js";
+export { COMMAND_LABELS, Command_default as default };

package/dist/primitives/context-menu/src/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../../packages/primitives/context-menu/src/ContextMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * One row of the menu, and the three kinds a menu is built from are told apart\n * by which fields are set rather than by a `kind` discriminator: a `separator`\n * is a rule, a `heading` is a non-interactive group label, and anything else\n * is a command.\n *\n * The list is data rather than markup because the primitive stays free of app\n * logic — selecting a row emits its `value` and the host decides what that\n * command means.\n */\nexport interface ContextMenuEntry {\n  /** The visible text of a command or a heading. */\n  label?: string;\n  /** The command id emitted on select. An entry without one is not selectable. */\n  value?: string;\n  /** Accelerator hint shown at the trailing edge, e.g. `⌘S`. Display only — the primitive binds no keys. */\n  shortcut?: string;\n  /** Render a divider. Every other field is ignored. */\n  separator?: boolean;\n  /** Render a non-interactive section heading rather than a command. */\n  heading?: boolean;\n  /** A destructive command — painted in the destructive token so it is not one indistinguishable row. */\n  danger?: boolean;\n  /** Visible but inert: announced as disabled, and selecting it emits nothing. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ContextMenuRoot,\n  ContextMenuTrigger,\n  ContextMenuPortal,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * ContextMenu — a right-click command list, with roving focus, typeahead and\n * arrow-key navigation.\n *\n * The escape contract mirrors DropdownMenu: opening moves focus into the menu\n * and onto the first command; Esc and an outside click both close it; closing\n * returns focus to the trigger's element. The menu is modal, so while it is\n * open the page behind does not scroll and the rest of the page is hidden from\n * assistive technology.\n *\n * Selecting an entry emits `select` with its `value`; the host maps that id to\n * an action, which is what keeps the primitive free of app logic.\n *\n * Reach for `DropdownMenu` when the trigger should be a visible button rather\n * than a right-click, and for a select control when the list *is* a field's\n * value.\n */\nwithDefaults(\n  defineProps<{\n    /** The rows, in order. Three kinds, told apart by which fields are set. */\n    items: ContextMenuEntry[];\n    /** Drive the menu from the host with `v-model:open`; omit it and the menu owns its own state. */\n    open?: boolean | undefined;\n    /**\n     * Reading direction for the menu and its arrow-key navigation. Reka\n     * mirrors traversal from this; without forwarding it a right-to-left\n     * host gets left-to-right menus no matter what the page declares.\n     */\n    dir?: \"ltr\" | \"rtl\";\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined },\n);\nconst emit = defineEmits<{ select: [value: string]; \"update:open\": [value: boolean] }>();\n\n/**\n * A disabled entry, and an entry with no command id, select nothing. Reka\n * already blocks pointer events on the disabled row; this is the second half,\n * for the keyboard path that reaches it anyway.\n */\nfunction choose(item: ContextMenuEntry): void {\n  if (item.disabled || item.value === undefined) return;\n  emit(\"select\", item.value);\n}\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"optional({ open, dir })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The element that receives the right-click. Rendered `as-child`,\n         so the caller's own element *is* the trigger. -->\n    <ContextMenuTrigger as-child>\n      <slot name=\"trigger\" />\n    </ContextMenuTrigger>\n\n    <ContextMenuPortal>\n      <ContextMenuContent\n        :side-offset=\"6\"\n        align=\"start\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible menu over the\n            // page, catching clicks meant for what is behind it. Scoped, the\n            // closed element computes `animation-name: none` and Presence\n            // unmounts it at once; the paired exit is precisely what Presence\n            // is waiting to hold it for. The origin below makes the menu grow\n            // out of the click point rather than out of its own centre — on\n            // the way out as well as in.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <ContextMenuSeparator v-if=\"item.separator\" class=\"my-1 h-px bg-border\" />\n          <ContextMenuLabel\n            v-else-if=\"item.heading\"\n            class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n          >\n            {{ item.label }}\n          </ContextMenuLabel>\n          <!-- The reveal delay comes from the shared stagger vocabulary, capped\n               there so a long menu does not tail off, rather than from a\n               per-menu number written by hand.\n\n               `disabled` is coerced rather than forwarded raw: an entry that\n               simply omits the field is not disabled, and Reka's own prop does\n               not accept `undefined` as a way of saying so. -->\n          <ContextMenuItem\n            v-else\n            :disabled=\"item.disabled ?? false\"\n            :class=\"\n              cn(\n                'flex cursor-pointer items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                // The rows reveal in sequence as the menu opens, which reads as\n                // a list arriving rather than a block appearing. The hover\n                // colour transition above is a separate channel, so a row\n                // highlighted mid-reveal still responds at once.\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                // The row's colour, not its alpha. A menu row is nothing but\n                // its label, and `data-[disabled]:opacity-40` composited that\n                // label to 2.40:1 on the popover and its shortcut to 1.79:1 —\n                // a disabled row a reader cannot make out tells them nothing\n                // about what is unavailable, which is the only thing it is\n                // there to say. Muted instead: 5.76:1, and a clear drop from\n                // the 15.46:1 an available row wears.\n                //\n                // It takes the danger colour with it, deliberately. An\n                // attribute selector outranks the plain `text-destructive-text`\n                // below whatever order Tailwind emits them in, and that is the\n                // right way round: red is a warning about an action, and there\n                // is no action here to warn about.\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                item.danger &&\n                  'text-destructive-text data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-text',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(i) }\"\n            @select=\"choose(item)\"\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          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/context-menu/src/ContextMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/context-menu/src/ContextMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * One row of the menu, and the three kinds a menu is built from are told apart\n * by which fields are set rather than by a `kind` discriminator: a `separator`\n * is a rule, a `heading` is a non-interactive group label, and anything else\n * is a command.\n *\n * The list is data rather than markup because the primitive stays free of app\n * logic — selecting a row emits its `value` and the host decides what that\n * command means.\n */\nexport interface ContextMenuEntry {\n  /** The visible text of a command or a heading. */\n  label?: string;\n  /** The command id emitted on select. An entry without one is not selectable. */\n  value?: string;\n  /** Accelerator hint shown at the trailing edge, e.g. `⌘S`. Display only — the primitive binds no keys. */\n  shortcut?: string;\n  /** Render a divider. Every other field is ignored. */\n  separator?: boolean;\n  /** Render a non-interactive section heading rather than a command. */\n  heading?: boolean;\n  /** A destructive command — painted in the destructive token so it is not one indistinguishable row. */\n  danger?: boolean;\n  /** Visible but inert: announced as disabled, and selecting it emits nothing. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ContextMenuRoot,\n  ContextMenuTrigger,\n  ContextMenuPortal,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * ContextMenu — a right-click command list, with roving focus, typeahead and\n * arrow-key navigation.\n *\n * The escape contract mirrors DropdownMenu: opening moves focus into the menu\n * and onto the first command; Esc and an outside click both close it; closing\n * returns focus to the trigger's element. The menu is modal, so while it is\n * open the page behind does not scroll and the rest of the page is hidden from\n * assistive technology.\n *\n * Selecting an entry emits `select` with its `value`; the host maps that id to\n * an action, which is what keeps the primitive free of app logic.\n *\n * Reach for `DropdownMenu` when the trigger should be a visible button rather\n * than a right-click, and for a select control when the list *is* a field's\n * value.\n */\nwithDefaults(\n  defineProps<{\n    /** The rows, in order. Three kinds, told apart by which fields are set. */\n    items: ContextMenuEntry[];\n    /** Drive the menu from the host with `v-model:open`; omit it and the menu owns its own state. */\n    open?: boolean | undefined;\n    /**\n     * Reading direction for the menu and its arrow-key navigation. Reka\n     * mirrors traversal from this; without forwarding it a right-to-left\n     * host gets left-to-right menus no matter what the page declares.\n     */\n    dir?: \"ltr\" | \"rtl\";\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined },\n);\nconst emit = defineEmits<{ select: [value: string]; \"update:open\": [value: boolean] }>();\n\n/**\n * A disabled entry, and an entry with no command id, select nothing. Reka\n * already blocks pointer events on the disabled row; this is the second half,\n * for the keyboard path that reaches it anyway.\n */\nfunction choose(item: ContextMenuEntry): void {\n  if (item.disabled || item.value === undefined) return;\n  emit(\"select\", item.value);\n}\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"optional({ open, dir })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The element that receives the right-click. Rendered `as-child`,\n         so the caller's own element *is* the trigger. -->\n    <ContextMenuTrigger as-child>\n      <slot name=\"trigger\" />\n    </ContextMenuTrigger>\n\n    <ContextMenuPortal>\n      <ContextMenuContent\n        :side-offset=\"6\"\n        align=\"start\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible menu over the\n            // page, catching clicks meant for what is behind it. Scoped, the\n            // closed element computes `animation-name: none` and Presence\n            // unmounts it at once; the paired exit is precisely what Presence\n            // is waiting to hold it for. The origin below makes the menu grow\n            // out of the click point rather than out of its own centre — on\n            // the way out as well as in.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <ContextMenuSeparator v-if=\"item.separator\" class=\"my-1 h-px bg-border\" />\n          <ContextMenuLabel\n            v-else-if=\"item.heading\"\n            class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n          >\n            {{ item.label }}\n          </ContextMenuLabel>\n          <!-- The reveal delay comes from the shared stagger vocabulary, capped\n               there so a long menu does not tail off, rather than from a\n               per-menu number written by hand.\n\n               `disabled` is coerced rather than forwarded raw: an entry that\n               simply omits the field is not disabled, and Reka's own prop does\n               not accept `undefined` as a way of saying so. -->\n          <ContextMenuItem\n            v-else\n            :disabled=\"item.disabled ?? false\"\n            :class=\"\n              cn(\n                'flex cursor-pointer items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                // The rows reveal in sequence as the menu opens, which reads as\n                // a list arriving rather than a block appearing. The hover\n                // colour transition above is a separate channel, so a row\n                // highlighted mid-reveal still responds at once.\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                // The row's colour, not its alpha. A menu row is nothing but\n                // its label, and `data-[disabled]:opacity-40` composited that\n                // label to 2.40:1 on the popover and its shortcut to 1.79:1 —\n                // a disabled row a reader cannot make out tells them nothing\n                // about what is unavailable, which is the only thing it is\n                // there to say. Muted instead: 5.76:1, and a clear drop from\n                // the 15.46:1 an available row wears.\n                //\n                // It takes the danger colour with it, deliberately. An\n                // attribute selector outranks the plain `text-destructive-text`\n                // below whatever order Tailwind emits them in, and that is the\n                // right way round: red is a warning about an action, and there\n                // is no action here to warn about.\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                item.danger &&\n                  'text-destructive-text data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-text',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(i) }\"\n            @select=\"choose(item)\"\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          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA+EA,MAAM,OAAO;;;;;;EAOb,SAAS,OAAO,MAA8B;GAC5C,IAAI,KAAK,YAAY,KAAK,UAAU,KAAA,GAAW;GAC/C,KAAK,UAAU,KAAK,KAAK;EAC3B;;GAIE,OAAA,UAAA,GAAA,YAsFkB,MAAA,eAAA,GAtFlB,WAAyB,MAsFP,QAAA,CAtFe,CAAA;IAAA,MAAG,QAAA;IAAI,KAAE,QAAA;GAAG,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAGzF,SAAA,cAEqB,CAFrB,YAEqB,MAAA,kBAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;KAC1B,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,GAAA,YA8EoB,MAAA,iBAAA,GAAA,MAAA;KA7ElB,SAAA,cA4EqB,CA5ErB,YA4EqB,MAAA,kBAAA,GAAA;MA3ElB,eAAa;MACd,OAAM;MACL,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,yHAAA,0EAAA,CAAA;MAgBrB,OAAA,EAAA,oBAAA,sCAAA;;MAEU,SAAA,cAA0B,EAApC,UAAA,IAAA,GAAA,mBAsDW,UAAA,MAAA,WAtDmB,QAAA,QAAZ,MAAM,MAAC;OAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,EAAC,GAAA,CACd,KAAK,aAAjC,UAAA,GAAA,YAA0E,MAAA,oBAAA,GAAA;;QAA9B,OAAM;OAErC,CAAA,KAAA,KAAK,WADlB,UAAA,GAAA,YAKmB,MAAA,gBAAA,GAAA;;QAHjB,OAAM;;QAEN,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;OASf,GAAA,IAAA,MAAA,UAAA,GAAA,YAsCkB,MAAA,eAAA,GAAA;;QApCf,UAAU,KAAK,YAAQ;QACvB,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,sHAAA,4CAAA,qBAAA,gCAAA,6EAA2jD,KAAK,UAAA,qGAAA,CAAA;QA4BxlD,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,CAAC,EAAA,CAAA;QAC3C,WAAM,WAAE,OAAO,IAAI;;QAEpB,SAAA,cAA6B,CAA7B,mBAA6B,QAAA,MAAA,gBAApB,KAAK,KAAK,GAAA,CAAA,GACP,KAAK,YAAjB,UAAA,GAAA,mBAEO,QAFP,YAEO,gBADF,KAAK,QAAQ,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/primitives/copy-button/src/CopyButton.js

@@ -0,0 +1,7 @@
+import CopyButton_vue_vue_type_script_setup_true_lang_default, { COPY_BUTTON_LABELS, COPY_REVERT_MS } from "./CopyButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/copy-button/src/CopyButton.vue
+var CopyButton_default = CopyButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { COPY_BUTTON_LABELS, COPY_REVERT_MS, CopyButton_default as default };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/primitives/copy-button/src/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../../../packages/primitives/copy-button/src/CopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CopyButtonLabels } from \"@ecoma-io/loom-labels\";\nimport type { IconButtonSize, IconButtonVariant } from \"@ecoma-io/loom-icon-button\";\n\n/**\n * The visual weights and hit areas are IconButton's, verbatim — a copy button\n * is an icon button that happens to own a clipboard contract, and there is no\n * second press language to maintain.\n */\nexport type CopyButtonVariant = IconButtonVariant;\nexport type CopyButtonSize = IconButtonSize;\n\nexport const COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy to clipboard\",\n  copied: \"Copied to clipboard\",\n  failed: \"Could not copy to clipboard\",\n};\n\n/** How long the copied/failed feedback holds before the button returns to its resting glyph. */\nexport const COPY_REVERT_MS = 2000;\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref } from \"vue\";\nimport { Check, Copy, X } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useAnnounce } from \"@ecoma-io/loom-live-region\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */\n    value?: string;\n    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */\n    getText?: () => string | Promise<string>;\n    /**\n     * Names for what the button says, as any subset of `CopyButtonLabels` —\n     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same\n     * shape every component's `labels` prop takes. `copy` is the button's\n     * accessible name and never changes with the state; `copied` and\n     * `failed` are what assistive technology hears.\n     */\n    labels?: LabelOverrides<CopyButtonLabels>;\n    /** Visual weight, shared with IconButton. */\n    variant?: CopyButtonVariant;\n    /** Square hit area, shared with IconButton. */\n    size?: CopyButtonSize;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n\n/**\n * The outcome is announced through the shared LiveRegion seam, not a\n * region of this component's own: a region must pre-exist the messages it\n * announces, and the seam's standalone pair on `document.body` guarantees\n * that without every copy button mounting its own.\n */\nconst announce = useAnnounce();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"copyButton\", COPY_BUTTON_LABELS, () => props.labels);\n\n/**\n * idle → copied | failed → idle, on a two-second revert timer. The guard\n * covers only the await window: a click during the feedback window is a\n * legitimate \"copy again\", not a duplicate — the announcement seam re-adds\n * the message, so a repeat is heard.\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\nconst state = ref<CopyState>(\"idle\");\nlet pending = false;\nlet revertTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction scheduleRevert(): void {\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = setTimeout(() => {\n    state.value = \"idle\";\n    revertTimer = null;\n  }, COPY_REVERT_MS);\n}\n\nonBeforeUnmount(() => {\n  // The timer holds the only writer into `state`; firing after unmount\n  // would write into a dead component. Cleared, not waited out.\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = null;\n});\n\nasync function copy(): Promise<void> {\n  if (props.disabled || pending) return;\n  pending = true;\n  try {\n    // A throwing `getText` and a refusing clipboard take the same road:\n    // the failed state is announced, the glyph says so, and the button\n    // stays operable so the very next click retries the whole attempt.\n    const value = props.getText ? await props.getText() : (props.value ?? \"\");\n    await navigator.clipboard.writeText(value);\n    state.value = \"copied\";\n    announce(text.value.copied);\n  } catch {\n    state.value = \"failed\";\n    announce(text.value.failed);\n  } finally {\n    pending = false;\n    scheduleRevert();\n  }\n}\n</script>\n\n<template>\n  <IconButton\n    :label=\"text.copy\"\n    :variant=\"variant\"\n    :size=\"size\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n    @click=\"copy\"\n  >\n    <!-- The glyph swap is the feedback's visual half only — never its only\n         carrier. The announcement carries the state to assistive technology,\n         and the accessible name stays `copy` throughout: a button whose name\n         changes under a screen reader's cursor is its own confusion. -->\n    <Check v-if=\"state === 'copied'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <X v-else-if=\"state === 'failed'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <Copy v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </IconButton>\n</template>\n"],"mappings":""}

package/dist/primitives/copy-button/src/CopyButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import IconButton_default from "../../icon-button/src/IconButton.js";
+import "../../icon-button/src/index.js";
+import { useAnnounce } from "../../live-region/src/useAnnounce.js";
+import "../../live-region/src/index.js";
+import { createBlock, defineComponent, onBeforeUnmount, openBlock, ref, unref, withCtx } from "vue";
+import { Check, Copy, X } from "@lucide/vue";
+//#region packages/primitives/copy-button/src/CopyButton.vue?vue&type=script&setup=true&lang.ts
+var COPY_BUTTON_LABELS = {
+	copy: "Copy to clipboard",
+	copied: "Copied to clipboard",
+	failed: "Could not copy to clipboard"
+};
+/** How long the copied/failed feedback holds before the button returns to its resting glyph. */
+var COPY_REVERT_MS = 2e3;
+var CopyButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "CopyButton",
+	props: {
+		value: {},
+		getText: {},
+		labels: {},
+		variant: { default: "default" },
+		size: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		/**
+		* The outcome is announced through the shared LiveRegion seam, not a
+		* region of this component's own: a region must pre-exist the messages it
+		* announces, and the seam's standalone pair on `document.body` guarantees
+		* that without every copy button mounting its own.
+		*/
+		const announce = useAnnounce();
+		const text = useLabels("copyButton", COPY_BUTTON_LABELS, () => props.labels);
+		/**
+		* idle → copied | failed → idle, on a two-second revert timer. The guard
+		* covers only the await window: a click during the feedback window is a
+		* legitimate "copy again", not a duplicate — the announcement seam re-adds
+		* the message, so a repeat is heard.
+		*/
+		const state = ref("idle");
+		let pending = false;
+		let revertTimer = null;
+		function scheduleRevert() {
+			if (revertTimer !== null) clearTimeout(revertTimer);
+			revertTimer = setTimeout(() => {
+				state.value = "idle";
+				revertTimer = null;
+			}, COPY_REVERT_MS);
+		}
+		onBeforeUnmount(() => {
+			if (revertTimer !== null) clearTimeout(revertTimer);
+			revertTimer = null;
+		});
+		async function copy() {
+			if (props.disabled || pending) return;
+			pending = true;
+			try {
+				const value = props.getText ? await props.getText() : props.value ?? "";
+				await navigator.clipboard.writeText(value);
+				state.value = "copied";
+				announce(text.value.copied);
+			} catch {
+				state.value = "failed";
+				announce(text.value.failed);
+			} finally {
+				pending = false;
+				scheduleRevert();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(IconButton_default), {
+				label: unref(text).copy,
+				variant: __props.variant,
+				size: __props.size,
+				disabled: __props.disabled,
+				type: __props.type,
+				onClick: copy
+			}, {
+				default: withCtx(() => [state.value === "copied" ? (openBlock(), createBlock(unref(Check), {
+					key: 0,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})) : state.value === "failed" ? (openBlock(), createBlock(unref(X), {
+					key: 1,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})) : (openBlock(), createBlock(unref(Copy), {
+					key: 2,
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				}))]),
+				_: 1
+			}, 8, [
+				"label",
+				"variant",
+				"size",
+				"disabled",
+				"type"
+			]);
+		};
+	}
+});
+//#endregion
+export { COPY_BUTTON_LABELS, COPY_REVERT_MS, CopyButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CopyButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/copy-button/src/CopyButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/copy-button/src/CopyButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CopyButtonLabels } from \"@ecoma-io/loom-labels\";\nimport type { IconButtonSize, IconButtonVariant } from \"@ecoma-io/loom-icon-button\";\n\n/**\n * The visual weights and hit areas are IconButton's, verbatim — a copy button\n * is an icon button that happens to own a clipboard contract, and there is no\n * second press language to maintain.\n */\nexport type CopyButtonVariant = IconButtonVariant;\nexport type CopyButtonSize = IconButtonSize;\n\nexport const COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy to clipboard\",\n  copied: \"Copied to clipboard\",\n  failed: \"Could not copy to clipboard\",\n};\n\n/** How long the copied/failed feedback holds before the button returns to its resting glyph. */\nexport const COPY_REVERT_MS = 2000;\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref } from \"vue\";\nimport { Check, Copy, X } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useAnnounce } from \"@ecoma-io/loom-live-region\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The text to copy. Provide `value` or `getText` — a `CopyButton` with neither has nothing to do. */\n    value?: string;\n    /** Resolved at click time instead of a static `value` — for text the host computes on demand, possibly asynchronously. */\n    getText?: () => string | Promise<string>;\n    /**\n     * Names for what the button says, as any subset of `CopyButtonLabels` —\n     * the per-instance correction over `COPY_BUTTON_LABELS`, in the same\n     * shape every component's `labels` prop takes. `copy` is the button's\n     * accessible name and never changes with the state; `copied` and\n     * `failed` are what assistive technology hears.\n     */\n    labels?: LabelOverrides<CopyButtonLabels>;\n    /** Visual weight, shared with IconButton. */\n    variant?: CopyButtonVariant;\n    /** Square hit area, shared with IconButton. */\n    size?: CopyButtonSize;\n    /** Unavailable rather than dimmed — drains to the neutral well and blocks pointer events. */\n    disabled?: boolean;\n    /** The native button type. Defaults to `button`, never an accidental submit. */\n    type?: \"button\" | \"submit\" | \"reset\";\n  }>(),\n  { variant: \"default\", size: \"md\", disabled: false, type: \"button\" },\n);\n\n/**\n * The outcome is announced through the shared LiveRegion seam, not a\n * region of this component's own: a region must pre-exist the messages it\n * announces, and the seam's standalone pair on `document.body` guarantees\n * that without every copy button mounting its own.\n */\nconst announce = useAnnounce();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"copyButton\", COPY_BUTTON_LABELS, () => props.labels);\n\n/**\n * idle → copied | failed → idle, on a two-second revert timer. The guard\n * covers only the await window: a click during the feedback window is a\n * legitimate \"copy again\", not a duplicate — the announcement seam re-adds\n * the message, so a repeat is heard.\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\nconst state = ref<CopyState>(\"idle\");\nlet pending = false;\nlet revertTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction scheduleRevert(): void {\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = setTimeout(() => {\n    state.value = \"idle\";\n    revertTimer = null;\n  }, COPY_REVERT_MS);\n}\n\nonBeforeUnmount(() => {\n  // The timer holds the only writer into `state`; firing after unmount\n  // would write into a dead component. Cleared, not waited out.\n  if (revertTimer !== null) clearTimeout(revertTimer);\n  revertTimer = null;\n});\n\nasync function copy(): Promise<void> {\n  if (props.disabled || pending) return;\n  pending = true;\n  try {\n    // A throwing `getText` and a refusing clipboard take the same road:\n    // the failed state is announced, the glyph says so, and the button\n    // stays operable so the very next click retries the whole attempt.\n    const value = props.getText ? await props.getText() : (props.value ?? \"\");\n    await navigator.clipboard.writeText(value);\n    state.value = \"copied\";\n    announce(text.value.copied);\n  } catch {\n    state.value = \"failed\";\n    announce(text.value.failed);\n  } finally {\n    pending = false;\n    scheduleRevert();\n  }\n}\n</script>\n\n<template>\n  <IconButton\n    :label=\"text.copy\"\n    :variant=\"variant\"\n    :size=\"size\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n    @click=\"copy\"\n  >\n    <!-- The glyph swap is the feedback's visual half only — never its only\n         carrier. The announcement carries the state to assistive technology,\n         and the accessible name stays `copy` throughout: a button whose name\n         changes under a screen reader's cursor is its own confusion. -->\n    <Check v-if=\"state === 'copied'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <X v-else-if=\"state === 'failed'\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n    <Copy v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </IconButton>\n</template>\n"],"mappings":";;;;;;;;;AAYA,IAAa,qBAAuC;CAClD,MAAM;CACN,QAAQ;CACR,QAAQ;AACV;;AAGA,IAAa,iBAAiB;;;;;;;;;;;;;;;;EAU9B,MAAM,QAAQ;;;;;;;EAgCd,MAAM,WAAW,YAAY;EAM7B,MAAM,OAAO,UAAU,cAAc,0BAA0B,MAAM,MAAM;;;;;;;EAS3E,MAAM,QAAQ,IAAe,MAAM;EACnC,IAAI,UAAU;EACd,IAAI,cAAoD;EAExD,SAAS,iBAAuB;GAC9B,IAAI,gBAAgB,MAAM,aAAa,WAAW;GAClD,cAAc,iBAAiB;IAC7B,MAAM,QAAQ;IACd,cAAc;GAChB,GAAG,cAAc;EACnB;EAEA,sBAAsB;GAGpB,IAAI,gBAAgB,MAAM,aAAa,WAAW;GAClD,cAAc;EAChB,CAAC;EAED,eAAe,OAAsB;GACnC,IAAI,MAAM,YAAY,SAAS;GAC/B,UAAU;GACV,IAAI;IAIF,MAAM,QAAQ,MAAM,UAAU,MAAM,MAAM,QAAQ,IAAK,MAAM,SAAS;IACtE,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,MAAM,QAAQ;IACd,SAAS,KAAK,MAAM,MAAM;GAC5B,QAAQ;IACN,MAAM,QAAQ;IACd,SAAS,KAAK,MAAM,MAAM;GAC5B,UAAU;IACR,UAAU;IACV,eAAe;GACjB;EACF;;GAIE,OAAA,UAAA,GAAA,YAea,MAAA,kBAAA,GAAA;IAdV,OAAO,MAAA,IAAA,CAAI,CAAC;IACZ,SAAS,QAAA;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,MAAM,QAAA;IACN,SAAO;;IAMK,SAAA,cAAA,CAAA,MAAA,UAAK,YAAlB,UAAA,GAAA,YAAsE,MAAA,KAAA,GAAA;;KAArC,OAAM;KAAU,eAAY;IAC/C,CAAA,KAAA,MAAA,UAAK,YAAnB,UAAA,GAAA,YAAuE,MAAA,CAAA,GAAA;;KAArC,OAAM;KAAU,eAAY;IAC9D,CAAA,MAAA,UAAA,GAAA,YAAkD,MAAA,IAAA,GAAA;;KAArC,OAAM;KAAU,eAAY"}

package/dist/primitives/copy-button/src/index.js

@@ -0,0 +1,3 @@
+import { COPY_BUTTON_LABELS } from "./CopyButton.vue_vue_type_script_setup_true_lang.js";
+import CopyButton_default from "./CopyButton.js";
+export { COPY_BUTTON_LABELS, CopyButton_default as default };

package/dist/primitives/data-grid/src/DataGrid.js

@@ -0,0 +1,7 @@
+import DataGrid_vue_vue_type_script_setup_true_lang_default, { DATA_GRID_LABELS } from "./DataGrid.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/data-grid/src/DataGrid.vue
+var DataGrid_default = DataGrid_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DATA_GRID_LABELS, DataGrid_default as default };
+
+//# sourceMappingURL=DataGrid.js.map