@ecoma-io/loom 0.1.0

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

@@ -0,0 +1,184 @@
+import { listStaggerDelay } from "../../lib/motion.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, withModifiers } from "vue";
+//#region src/primitives/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-expanded",
+	"onClick",
+	"onMouseenter",
+	"onFocus",
+	"onKeydown"
+];
+var _hoisted_2 = ["aria-label", "onKeydown"];
+var _hoisted_3 = {
+	key: 0,
+	role: "separator",
+	class: "my-1 h-px bg-border"
+};
+var _hoisted_4 = [
+	"disabled",
+	"data-highlighted",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+];
+var _hoisted_5 = {
+	key: 0,
+	class: "tabular text-[0.6875rem] text-muted-foreground"
+};
+var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Menubar",
+	props: { menus: {} },
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const openId = ref(null);
+		const activeIndex = ref(-1);
+		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;
+		};
+		function toggle(id) {
+			openId.value = openId.value === id ? null : id;
+			activeIndex.value = -1;
+		}
+		function hover(id) {
+			if (openId.value !== null && openId.value !== id) {
+				openId.value = id;
+				activeIndex.value = -1;
+			}
+		}
+		function choose(item) {
+			if (item.separator || item.disabled) return;
+			close();
+			if (item.command) emit("select", item.command);
+		}
+		function close() {
+			openId.value = null;
+			activeIndex.value = -1;
+		}
+		function moveMenu(dir) {
+			const ids = props.menus.map((m) => m.id);
+			const next = ((openId.value ? ids.indexOf(openId.value) : 0) + dir + ids.length) % ids.length;
+			openId.value = ids[next] ?? null;
+			activeIndex.value = -1;
+		}
+		async function onTriggerKeydown(e, menu) {
+			switch (e.key) {
+				case "ArrowDown":
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					openId.value = menu.id;
+					await nextTick();
+					activeIndex.value = firstEnabled(menu.items);
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					if (openId.value) moveMenu(1);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					if (openId.value) moveMenu(-1);
+					break;
+				case "Escape": close();
+			}
+		}
+		function onMenuKeydown(e, menu) {
+			const items = menu.items;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					activeIndex.value = firstEnabled(items, Math.max(activeIndex.value, -1) + 1, 1);
+					if (activeIndex.value === -1) activeIndex.value = firstEnabled(items, 0, 1);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					activeIndex.value = activeIndex.value <= 0 ? firstEnabled(items, items.length - 1, -1) : firstEnabled(items, activeIndex.value - 1, -1);
+					break;
+				case "Home":
+					e.preventDefault();
+					activeIndex.value = firstEnabled(items, 0, 1);
+					break;
+				case "End":
+					e.preventDefault();
+					activeIndex.value = firstEnabled(items, items.length - 1, -1);
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					moveMenu(1);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					moveMenu(-1);
+					break;
+				case "Enter":
+				case " ": {
+					e.preventDefault();
+					const item = activeIndex.value >= 0 ? items[activeIndex.value] : void 0;
+					if (item) choose(item);
+					break;
+				}
+				case "Escape":
+					e.preventDefault();
+					close();
+			}
+		}
+		onMounted(() => window.addEventListener("click", close));
+		onBeforeUnmount(() => window.removeEventListener("click", close));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "menubar",
+				class: "flex items-center gap-0.5",
+				style: { "-webkit-app-region": "no-drag" },
+				onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+			}, [(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}`,
+					type: "button",
+					role: "menuitem",
+					"aria-haspopup": true,
+					"aria-expanded": openId.value === menu.id,
+					class: normalizeClass(["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", openId.value === menu.id && "bg-subtle text-foreground"]),
+					onClick: withModifiers(($event) => toggle(menu.id), ["stop"]),
+					onMouseenter: ($event) => hover(menu.id),
+					onFocus: ($event) => hover(menu.id),
+					onKeydown: ($event) => onTriggerKeydown($event, menu)
+				}, toDisplayString(menu.label), 43, _hoisted_1), openId.value === menu.id ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					role: "menu",
+					"aria-label": menu.label,
+					tabindex: "-1",
+					class: "absolute left-0 top-full z-50 mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-scale-in",
+					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_3)) : (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						role: "menuitem",
+						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-xs text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:opacity-40 data-[highlighted]:bg-subtle animate-fade-rise",
+						onClick: ($event) => choose(item),
+						onMouseenter: ($event) => activeIndex.value = i,
+						onFocus: ($event) => activeIndex.value = i
+					}, [createElementVNode("span", null, toDisplayString(item.label), 1), item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)], 44, _hoisted_4))], 64);
+				}), 128))], 40, _hoisted_2)) : createCommentVNode("", true)]);
+			}), 128))]);
+		};
+	}
+});
+//#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/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":["../../../src/primitives/Menubar/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 (roles + aria-expanded/haspopup) with Escape,\n * Arrow, Home/End and Enter/Space handling. When richer focus-trapping is needed we\n * can later delegate to Reka UI without changing this call-site contract.\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 { onMounted, onBeforeUnmount, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"../../lib/motion\";\n\nconst props = defineProps<{\n  /** The top-level menus, left to right, each carrying its own item list. */\n  menus: MenubarMenu[];\n}>();\nconst emit = defineEmits<{ (e: \"select\", command: string): void }>();\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // highlighted item within the open menu\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\nfunction toggle(id: string): void {\n  openId.value = openId.value === id ? null : id;\n  activeIndex.value = -1;\n}\nfunction hover(id: string): void {\n  if (openId.value !== null && openId.value !== id) {\n    openId.value = id;\n    activeIndex.value = -1;\n  }\n}\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close();\n  if (item.command) emit(\"select\", item.command);\n}\nfunction close(): void {\n  openId.value = null;\n  activeIndex.value = -1;\n}\n\nfunction moveMenu(dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const next = (cur + dir + ids.length) % ids.length;\n  openId.value = ids[next] ?? null;\n  activeIndex.value = -1;\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();\n      openId.value = menu.id;\n      await nextTick();\n      activeIndex.value = firstEnabled(menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) moveMenu(1);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) moveMenu(-1);\n      break;\n    case \"Escape\":\n      close();\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      activeIndex.value = firstEnabled(items, Math.max(activeIndex.value, -1) + 1, 1);\n      if (activeIndex.value === -1) activeIndex.value = firstEnabled(items, 0, 1);\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      activeIndex.value =\n        activeIndex.value <= 0\n          ? firstEnabled(items, items.length - 1, -1)\n          : firstEnabled(items, activeIndex.value - 1, -1);\n      break;\n    case \"Home\":\n      e.preventDefault();\n      activeIndex.value = firstEnabled(items, 0, 1);\n      break;\n    case \"End\":\n      e.preventDefault();\n      activeIndex.value = firstEnabled(items, items.length - 1, -1);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      moveMenu(1);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      moveMenu(-1);\n      break;\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = activeIndex.value >= 0 ? items[activeIndex.value] : undefined;\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close();\n      break;\n  }\n}\n\nonMounted(() => window.addEventListener(\"click\", close));\nonBeforeUnmount(() => window.removeEventListener(\"click\", close));\n</script>\n\n<template>\n  <div\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"true\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"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\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id)\"\n        @focus=\"hover(menu.id)\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <div\n        v-if=\"openId === menu.id\"\n        role=\"menu\"\n        :aria-label=\"menu.label\"\n        tabindex=\"-1\"\n        class=\"absolute left-0 top-full z-50 mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-scale-in\"\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          <button\n            v-else\n            type=\"button\"\n            role=\"menuitem\"\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-xs text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:opacity-40 data-[highlighted]:bg-subtle animate-fade-rise\"\n            @click=\"choose(item)\"\n            @mouseenter=\"activeIndex = i\"\n            @focus=\"activeIndex = i\"\n          >\n            <span>{{ item.label }}</span>\n            <span v-if=\"item.shortcut\" class=\"tabular text-[0.6875rem] text-muted-foreground\">\n              {{ item.shortcut }}\n            </span>\n          </button>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/NumberField/NumberField.js

@@ -0,0 +1,7 @@
+import NumberField_vue_vue_type_script_setup_true_lang_default from "./NumberField.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/NumberField/NumberField.vue
+var NumberField_default = NumberField_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { NumberField_default as default };
+
+//# sourceMappingURL=NumberField.js.map

package/dist/primitives/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/primitives/NumberField/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, watch } from \"vue\";\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from \"reka-ui\";\nimport { ChevronUp, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * NumberField — a constrained number input you can also *scrub*: drag\n * horizontally anywhere on the field and the value runs with the pointer, the\n * gesture professional editors trained everyone to expect on a numeric row.\n *\n * Built on Reka UI's NumberField, which supplies the spinbutton semantics and\n * the typed-value parsing. Two things are added here because Reka has no\n * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow\n * keys.\n *\n * The event contract is what makes it usable behind an undo stack.\n * `update:modelValue` is transient — it fires on every drag tick, every arrow\n * tick and every applied edit, so a host can paint a live preview. `commit`\n * fires once per gesture boundary — drag release, Enter, or focus leaving the\n * field. One long drag is therefore one undo checkpoint rather than one per\n * pixel, and a gesture that ends where it started produces none at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient edits are reported before it changes. */\n    modelValue?: number;\n    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */\n    min?: number;\n    /** Upper bound, clamped the same way. It wins over step alignment. */\n    max?: number;\n    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */\n    step?: number;\n    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */\n    unit?: string;\n    /** Unavailable: dims the field and refuses every edit path. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n  }>(),\n  { step: 1, disabled: false, invalid: false },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every drag tick, arrow tick, or applied edit. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once per gesture boundary — drag release, Enter, or focus leaving. */\n  commit: [value: number];\n}>();\n\n// The rendered root is a non-focusable `role=\"group\"` wrapper, so fallthrough\n// attributes that describe the *control* — `aria-labelledby`, `data-testid` —\n// belong on the spinbutton inside it, not on the group. `class` is the one\n// exception and goes the other way: a caller's sizing or layout class has to\n// land on the element that participates in the parent's layout, merged through\n// `cn()` so a caller's `w-24` actually beats the root's own `w-full` instead of\n// losing to whichever utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n// `optional()` drops the absent bounds rather than forwarding `undefined`,\n// which Reka would read as \"a bound that is undefined\" rather than \"no bound\".\nconst rootBounds = computed(() =>\n  optional({ modelValue: lastValue.value, min: props.min, max: props.max }),\n);\n\nfunction clampValue(value: number): number {\n  const step = props.step || 1;\n  const stepped = Math.round(value / step) * step;\n  const withMin = props.min !== undefined ? Math.max(props.min, stepped) : stepped;\n  return props.max !== undefined ? Math.min(props.max, withMin) : withMin;\n}\n\n// The single source of truth for \"the last value we know about\", updated the\n// moment it changes — never re-derived from `props.modelValue` at commit time,\n// because that prop only reflects a new value after the host's v-model\n// round-trip re-renders us, which is a tick later than the blur or keydown\n// being handled.\n//\n// It is also what the Reka root binds as its own `model-value`, rather than\n// `props.modelValue`. Given a defined model value Reka runs fully controlled:\n// its increment reads back through that prop, so a host that correctly\n// withholds transient echoes until commit would freeze every arrow tick at\n// start + 1 and freeze the readout at the gesture's start value. Feeding it\n// `lastValue` keeps the ticks accumulating and the readout live inside a\n// gesture, while the host still sees nothing but transient emits until the\n// boundary.\nconst lastValue = ref(props.modelValue);\n\n// The value the host last acknowledged. `commit` only fires when `lastValue`\n// differs from it, so overlapping boundaries (Enter then blur, drag release\n// then blur) and no-edit focus passes (Tab in, Tab out) produce no extra\n// checkpoints.\nconst lastCommittedValue = ref(props.modelValue);\n\n// True while an uncommitted edit is in flight. An external prop change\n// re-baselines `lastCommittedValue` only when nothing is pending — otherwise\n// the host echoing our own transient emits back down would make the pending\n// edit look already committed and swallow its `commit`.\nlet editPending = false;\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n    if (!editPending) lastCommittedValue.value = value;\n  },\n);\n\nfunction onUpdate(value: number | undefined) {\n  // Reka clears its model to `undefined` when the text in the field does not\n  // parse — an emptied field, most reachably. The contract here is a number,\n  // so the field falls back to its own floor instead of forwarding a hole,\n  // which is also what Reka itself does when a stepper is pressed on\n  // unparseable text.\n  const next = value ?? props.min ?? 0;\n  editPending = true;\n  lastValue.value = next;\n  emit(\"update:modelValue\", next);\n}\n\nfunction commitLastValue() {\n  // The boundary ends the edit session even when the value ended up back where\n  // it started — a drag that returned to its origin still ends the gesture.\n  editPending = false;\n  if (lastValue.value === lastCommittedValue.value) return;\n  lastCommittedValue.value = lastValue.value;\n  emit(\"commit\", lastValue.value ?? props.min ?? 0);\n}\n\n// Shift = ×10. Reka's own arrow handling is bound on the input and ignores\n// `shiftKey`, so this intercepts in the capture phase — strictly before the\n// event reaches the input — and fully replaces the default ×1 tick for this\n// one case. Letting both run would double-step.\nfunction onKeydownCapture(event: KeyboardEvent) {\n  if (props.disabled) return;\n  if (!event.shiftKey || (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\")) return;\n  event.preventDefault();\n  event.stopPropagation();\n  const tick = (props.step || 1) * 10;\n  const current = lastValue.value ?? props.min ?? 0;\n  onUpdate(clampValue(event.key === \"ArrowUp\" ? current + tick : current - tick));\n}\n\n// Bubble phase, not capture: by the time this fires, the input's own Enter\n// handling has already applied the typed text, because bubbling visits the\n// target before its ancestors.\nfunction onKeydownCommit(event: KeyboardEvent) {\n  if (event.key !== \"Enter\") return;\n  commitLastValue();\n}\n\n// A held arrow key is one gesture, exactly like a pointer drag: every keydown,\n// including the operating system's auto-repeats, only ticks the transient\n// value, and the keyup ends the gesture and commits the summed delta once. A\n// single tap is a keydown plus a keyup, so it still commits once.\nfunction onKeyupCommit(event: KeyboardEvent) {\n  if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n  commitLastValue();\n}\n\n// `focusout` bubbles where `blur` does not, so this reliably runs after the\n// input's own blur handling — but it only commits once focus has actually left\n// the field, not when it shifts internally to the hover-revealed stepper.\nfunction onFocusOut(event: FocusEvent) {\n  const root = event.currentTarget as HTMLElement;\n  if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;\n  commitLastValue();\n}\n\n// Horizontal scrub. A plain click must still place the caret for typing, so\n// the gesture does not take over until the pointer has moved past a small\n// threshold.\nconst DRAG_THRESHOLD_PX = 3;\nconst PIXELS_PER_STEP = 4;\n\n// Set while a drag's window listeners are attached, so unmounting mid-drag\n// detaches them instead of leaking handlers onto `window`.\nlet removeDragListeners: (() => void) | undefined;\nonUnmounted(() => removeDragListeners?.());\n\nfunction onPointerDown(event: PointerEvent) {\n  if (props.disabled || event.button !== 0) return;\n  const startX = event.clientX;\n  const startValue = lastValue.value ?? props.min ?? 0;\n  const step = props.step || 1;\n  let dragging = false;\n\n  function onPointerMove(moveEvent: PointerEvent) {\n    const deltaX = moveEvent.clientX - startX;\n    if (!dragging) {\n      if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;\n      dragging = true;\n      window.getSelection()?.removeAllRanges();\n    }\n    moveEvent.preventDefault();\n    const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);\n    const next = clampValue(startValue + deltaSteps * step);\n    if (next !== lastValue.value) onUpdate(next);\n  }\n\n  function onPointerUp() {\n    removeDragListeners?.();\n    if (dragging) commitLastValue();\n  }\n\n  // Bail-out (Escape mid-scrub, or a browser-issued pointercancel): the\n  // gesture is discarded. Nothing commits, and one last transient update\n  // carrying the start value lets the host restore the pre-drag preview.\n  function abortDrag() {\n    removeDragListeners?.();\n    if (!dragging) return;\n    if (lastValue.value !== startValue) onUpdate(startValue);\n    editPending = false;\n  }\n\n  function onDragKeydown(keyEvent: KeyboardEvent) {\n    if (keyEvent.key !== \"Escape\" || !dragging) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    abortDrag();\n  }\n\n  window.addEventListener(\"pointermove\", onPointerMove);\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", abortDrag);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  removeDragListeners = () => {\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", abortDrag);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    removeDragListeners = undefined;\n  };\n}\n</script>\n\n<template>\n  <NumberFieldRoot\n    v-bind=\"rootBounds\"\n    :step=\"step\"\n    :disabled=\"disabled\"\n    :aria-disabled=\"disabled || undefined\"\n    :data-invalid=\"invalid || undefined\"\n    :class=\"\n      cn(\n        'group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background',\n        'transition-[color,background-color,box-shadow] duration-fast ease-out',\n        // Rim-lit at rest; the ring blooms on focus.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !invalid && 'focus-within:shadow-halo',\n        invalid && 'border-destructive focus-within:outline-destructive',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n    @keydown.capture=\"onKeydownCapture\"\n    @keydown=\"onKeydownCommit\"\n    @keyup=\"onKeyupCommit\"\n    @focusout=\"onFocusOut\"\n    @pointerdown=\"onPointerDown\"\n  >\n    <NumberFieldInput\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          'tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none',\n          unit ? 'pr-9' : 'pr-3',\n          disabled ? 'cursor-not-allowed' : 'cursor-ew-resize',\n        )\n      \"\n    />\n    <!-- The unit is presentation, so it is hidden from assistive technology\n         and it clears out on hover to make room for the stepper. -->\n    <span\n      v-if=\"unit\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0\"\n    >\n      {{ unit }}\n    </span>\n    <!-- The stepper is hidden until hover: a column of these is read as a\n         column of numbers, and a permanent pair of chevrons on every row turns\n         that into a column of controls. -->\n    <div\n      class=\"absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100\"\n    >\n      <NumberFieldIncrement\n        class=\"flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <!-- Stroke lives on the 24 grid and scales with size, so the inherited\n             1.5 would render 0.75 device pixels at this 12px box and all but\n             disappear. 2.5 restores the optical weight. -->\n        <ChevronUp class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldIncrement>\n      <NumberFieldDecrement\n        class=\"flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronDown class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldDecrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/NumberField/NumberField.vue.d.ts

@@ -0,0 +1,47 @@
+/**
+ * NumberField — a constrained number input you can also *scrub*: drag
+ * horizontally anywhere on the field and the value runs with the pointer, the
+ * gesture professional editors trained everyone to expect on a numeric row.
+ *
+ * Built on Reka UI's NumberField, which supplies the spinbutton semantics and
+ * the typed-value parsing. Two things are added here because Reka has no
+ * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow
+ * keys.
+ *
+ * The event contract is what makes it usable behind an undo stack.
+ * `update:modelValue` is transient — it fires on every drag tick, every arrow
+ * tick and every applied edit, so a host can paint a live preview. `commit`
+ * fires once per gesture boundary — drag release, Enter, or focus leaving the
+ * field. One long drag is therefore one undo checkpoint rather than one per
+ * pixel, and a gesture that ends where it started produces none at all.
+ */
+type __VLS_Props = {
+    /** The current value. Transient edits are reported before it changes. */
+    modelValue?: number;
+    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */
+    min?: number;
+    /** Upper bound, clamped the same way. It wins over step alignment. */
+    max?: number;
+    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */
+    step?: number;
+    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */
+    unit?: string;
+    /** Unavailable: dims the field and refuses every edit path. */
+    disabled?: boolean;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
+    invalid?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+    commit: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+    onCommit?: (value: number) => any;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=NumberField.vue.d.ts.map

package/dist/primitives/NumberField/NumberField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/NumberField/NumberField.vue"],"names":[],"mappings":"AAuUA;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,WAAW,GAAG;IACf,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgdJ,QAAA,MAAM,YAAY;;;;;;;cAndH,OAAO;aAER,OAAO;UANV,MAAM;6EA2df,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/primitives/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,204 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { ChevronDown, ChevronUp } from "@lucide/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, onUnmounted, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from "reka-ui";
+//#region src/primitives/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0"
+};
+var _hoisted_2 = { class: "absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100" };
+/**
+* NumberField — a constrained number input you can also *scrub*: drag
+* horizontally anywhere on the field and the value runs with the pointer, the
+* gesture professional editors trained everyone to expect on a numeric row.
+*
+* Built on Reka UI's NumberField, which supplies the spinbutton semantics and
+* the typed-value parsing. Two things are added here because Reka has no
+* equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow
+* keys.
+*
+* The event contract is what makes it usable behind an undo stack.
+* `update:modelValue` is transient — it fires on every drag tick, every arrow
+* tick and every applied edit, so a host can paint a live preview. `commit`
+* fires once per gesture boundary — drag release, Enter, or focus leaving the
+* field. One long drag is therefore one undo checkpoint rather than one per
+* pixel, and a gesture that ends where it started produces none at all.
+*/
+var DRAG_THRESHOLD_PX = 3;
+var PIXELS_PER_STEP = 4;
+var NumberField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "NumberField",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		unit: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "commit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { attrs, rest: inputAttrs } = useSplitAttrs();
+		const rootBounds = computed(() => optional({
+			modelValue: lastValue.value,
+			min: props.min,
+			max: props.max
+		}));
+		function clampValue(value) {
+			const step = props.step || 1;
+			const stepped = Math.round(value / step) * step;
+			const withMin = props.min !== void 0 ? Math.max(props.min, stepped) : stepped;
+			return props.max !== void 0 ? Math.min(props.max, withMin) : withMin;
+		}
+		const lastValue = ref(props.modelValue);
+		const lastCommittedValue = ref(props.modelValue);
+		let editPending = false;
+		watch(() => props.modelValue, (value) => {
+			lastValue.value = value;
+			if (!editPending) lastCommittedValue.value = value;
+		});
+		function onUpdate(value) {
+			const next = value ?? props.min ?? 0;
+			editPending = true;
+			lastValue.value = next;
+			emit("update:modelValue", next);
+		}
+		function commitLastValue() {
+			editPending = false;
+			if (lastValue.value === lastCommittedValue.value) return;
+			lastCommittedValue.value = lastValue.value;
+			emit("commit", lastValue.value ?? props.min ?? 0);
+		}
+		function onKeydownCapture(event) {
+			if (props.disabled) return;
+			if (!event.shiftKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			event.stopPropagation();
+			const tick = (props.step || 1) * 10;
+			const current = lastValue.value ?? props.min ?? 0;
+			onUpdate(clampValue(event.key === "ArrowUp" ? current + tick : current - tick));
+		}
+		function onKeydownCommit(event) {
+			if (event.key !== "Enter") return;
+			commitLastValue();
+		}
+		function onKeyupCommit(event) {
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			commitLastValue();
+		}
+		function onFocusOut(event) {
+			const root = event.currentTarget;
+			if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+			commitLastValue();
+		}
+		let removeDragListeners;
+		onUnmounted(() => removeDragListeners?.());
+		function onPointerDown(event) {
+			if (props.disabled || event.button !== 0) return;
+			const startX = event.clientX;
+			const startValue = lastValue.value ?? props.min ?? 0;
+			const step = props.step || 1;
+			let dragging = false;
+			function onPointerMove(moveEvent) {
+				const deltaX = moveEvent.clientX - startX;
+				if (!dragging) {
+					if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;
+					dragging = true;
+					window.getSelection()?.removeAllRanges();
+				}
+				moveEvent.preventDefault();
+				const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);
+				const next = clampValue(startValue + deltaSteps * step);
+				if (next !== lastValue.value) onUpdate(next);
+			}
+			function onPointerUp() {
+				removeDragListeners?.();
+				if (dragging) commitLastValue();
+			}
+			function abortDrag() {
+				removeDragListeners?.();
+				if (!dragging) return;
+				if (lastValue.value !== startValue) onUpdate(startValue);
+				editPending = false;
+			}
+			function onDragKeydown(keyEvent) {
+				if (keyEvent.key !== "Escape" || !dragging) return;
+				keyEvent.preventDefault();
+				keyEvent.stopPropagation();
+				abortDrag();
+			}
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", abortDrag);
+			window.addEventListener("keydown", onDragKeydown, true);
+			removeDragListeners = () => {
+				window.removeEventListener("pointermove", onPointerMove);
+				window.removeEventListener("pointerup", onPointerUp);
+				window.removeEventListener("pointercancel", abortDrag);
+				window.removeEventListener("keydown", onDragKeydown, true);
+				removeDragListeners = void 0;
+			};
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NumberFieldRoot), mergeProps(rootBounds.value, {
+				step: __props.step,
+				disabled: __props.disabled,
+				"aria-disabled": __props.disabled || void 0,
+				"data-invalid": __props.invalid || void 0,
+				class: unref(cn)("group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background", "transition-[color,background-color,box-shadow] duration-fast ease-out", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring", !__props.invalid && "focus-within:shadow-halo", __props.invalid && "border-destructive focus-within:outline-destructive", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", unref(attrs).class),
+				"onUpdate:modelValue": onUpdate,
+				onKeydownCapture,
+				onKeydown: onKeydownCommit,
+				onKeyup: onKeyupCommit,
+				onFocusout: onFocusOut,
+				onPointerdown: onPointerDown
+			}), {
+				default: withCtx(() => [
+					createVNode(unref(NumberFieldInput), mergeProps(unref(inputAttrs), {
+						"aria-invalid": __props.invalid || void 0,
+						class: unref(cn)("tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none", __props.unit ? "pr-9" : "pr-3", __props.disabled ? "cursor-not-allowed" : "cursor-ew-resize")
+					}), null, 16, ["aria-invalid", "class"]),
+					__props.unit ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.unit), 1)) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_2, [createVNode(unref(NumberFieldIncrement), { class: "flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50" }, {
+						default: withCtx(() => [createVNode(unref(ChevronUp), {
+							class: "h-3 w-3",
+							"stroke-width": 2.5
+						})]),
+						_: 1
+					}), createVNode(unref(NumberFieldDecrement), { class: "flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50" }, {
+						default: withCtx(() => [createVNode(unref(ChevronDown), {
+							class: "h-3 w-3",
+							"stroke-width": 2.5
+						})]),
+						_: 1
+					})])
+				]),
+				_: 1
+			}, 16, [
+				"step",
+				"disabled",
+				"aria-disabled",
+				"data-invalid",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { NumberField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=NumberField.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/NumberField/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, watch } from \"vue\";\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from \"reka-ui\";\nimport { ChevronUp, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * NumberField — a constrained number input you can also *scrub*: drag\n * horizontally anywhere on the field and the value runs with the pointer, the\n * gesture professional editors trained everyone to expect on a numeric row.\n *\n * Built on Reka UI's NumberField, which supplies the spinbutton semantics and\n * the typed-value parsing. Two things are added here because Reka has no\n * equivalent: the scrub-drag gesture, and a Shift multiplier on the arrow\n * keys.\n *\n * The event contract is what makes it usable behind an undo stack.\n * `update:modelValue` is transient — it fires on every drag tick, every arrow\n * tick and every applied edit, so a host can paint a live preview. `commit`\n * fires once per gesture boundary — drag release, Enter, or focus leaving the\n * field. One long drag is therefore one undo checkpoint rather than one per\n * pixel, and a gesture that ends where it started produces none at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient edits are reported before it changes. */\n    modelValue?: number;\n    /** Lower bound. Every path — typing, arrows, scrub — is clamped to it. */\n    min?: number;\n    /** Upper bound, clamped the same way. It wins over step alignment. */\n    max?: number;\n    /** The granularity of one arrow tick or one scrub step. Shift multiplies it by ten. */\n    step?: number;\n    /** A presentational suffix such as `px` or `deg`. It is never part of the value. */\n    unit?: string;\n    /** Unavailable: dims the field and refuses every edit path. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n  }>(),\n  { step: 1, disabled: false, invalid: false },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every drag tick, arrow tick, or applied edit. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once per gesture boundary — drag release, Enter, or focus leaving. */\n  commit: [value: number];\n}>();\n\n// The rendered root is a non-focusable `role=\"group\"` wrapper, so fallthrough\n// attributes that describe the *control* — `aria-labelledby`, `data-testid` —\n// belong on the spinbutton inside it, not on the group. `class` is the one\n// exception and goes the other way: a caller's sizing or layout class has to\n// land on the element that participates in the parent's layout, merged through\n// `cn()` so a caller's `w-24` actually beats the root's own `w-full` instead of\n// losing to whichever utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n// `optional()` drops the absent bounds rather than forwarding `undefined`,\n// which Reka would read as \"a bound that is undefined\" rather than \"no bound\".\nconst rootBounds = computed(() =>\n  optional({ modelValue: lastValue.value, min: props.min, max: props.max }),\n);\n\nfunction clampValue(value: number): number {\n  const step = props.step || 1;\n  const stepped = Math.round(value / step) * step;\n  const withMin = props.min !== undefined ? Math.max(props.min, stepped) : stepped;\n  return props.max !== undefined ? Math.min(props.max, withMin) : withMin;\n}\n\n// The single source of truth for \"the last value we know about\", updated the\n// moment it changes — never re-derived from `props.modelValue` at commit time,\n// because that prop only reflects a new value after the host's v-model\n// round-trip re-renders us, which is a tick later than the blur or keydown\n// being handled.\n//\n// It is also what the Reka root binds as its own `model-value`, rather than\n// `props.modelValue`. Given a defined model value Reka runs fully controlled:\n// its increment reads back through that prop, so a host that correctly\n// withholds transient echoes until commit would freeze every arrow tick at\n// start + 1 and freeze the readout at the gesture's start value. Feeding it\n// `lastValue` keeps the ticks accumulating and the readout live inside a\n// gesture, while the host still sees nothing but transient emits until the\n// boundary.\nconst lastValue = ref(props.modelValue);\n\n// The value the host last acknowledged. `commit` only fires when `lastValue`\n// differs from it, so overlapping boundaries (Enter then blur, drag release\n// then blur) and no-edit focus passes (Tab in, Tab out) produce no extra\n// checkpoints.\nconst lastCommittedValue = ref(props.modelValue);\n\n// True while an uncommitted edit is in flight. An external prop change\n// re-baselines `lastCommittedValue` only when nothing is pending — otherwise\n// the host echoing our own transient emits back down would make the pending\n// edit look already committed and swallow its `commit`.\nlet editPending = false;\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n    if (!editPending) lastCommittedValue.value = value;\n  },\n);\n\nfunction onUpdate(value: number | undefined) {\n  // Reka clears its model to `undefined` when the text in the field does not\n  // parse — an emptied field, most reachably. The contract here is a number,\n  // so the field falls back to its own floor instead of forwarding a hole,\n  // which is also what Reka itself does when a stepper is pressed on\n  // unparseable text.\n  const next = value ?? props.min ?? 0;\n  editPending = true;\n  lastValue.value = next;\n  emit(\"update:modelValue\", next);\n}\n\nfunction commitLastValue() {\n  // The boundary ends the edit session even when the value ended up back where\n  // it started — a drag that returned to its origin still ends the gesture.\n  editPending = false;\n  if (lastValue.value === lastCommittedValue.value) return;\n  lastCommittedValue.value = lastValue.value;\n  emit(\"commit\", lastValue.value ?? props.min ?? 0);\n}\n\n// Shift = ×10. Reka's own arrow handling is bound on the input and ignores\n// `shiftKey`, so this intercepts in the capture phase — strictly before the\n// event reaches the input — and fully replaces the default ×1 tick for this\n// one case. Letting both run would double-step.\nfunction onKeydownCapture(event: KeyboardEvent) {\n  if (props.disabled) return;\n  if (!event.shiftKey || (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\")) return;\n  event.preventDefault();\n  event.stopPropagation();\n  const tick = (props.step || 1) * 10;\n  const current = lastValue.value ?? props.min ?? 0;\n  onUpdate(clampValue(event.key === \"ArrowUp\" ? current + tick : current - tick));\n}\n\n// Bubble phase, not capture: by the time this fires, the input's own Enter\n// handling has already applied the typed text, because bubbling visits the\n// target before its ancestors.\nfunction onKeydownCommit(event: KeyboardEvent) {\n  if (event.key !== \"Enter\") return;\n  commitLastValue();\n}\n\n// A held arrow key is one gesture, exactly like a pointer drag: every keydown,\n// including the operating system's auto-repeats, only ticks the transient\n// value, and the keyup ends the gesture and commits the summed delta once. A\n// single tap is a keydown plus a keyup, so it still commits once.\nfunction onKeyupCommit(event: KeyboardEvent) {\n  if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n  commitLastValue();\n}\n\n// `focusout` bubbles where `blur` does not, so this reliably runs after the\n// input's own blur handling — but it only commits once focus has actually left\n// the field, not when it shifts internally to the hover-revealed stepper.\nfunction onFocusOut(event: FocusEvent) {\n  const root = event.currentTarget as HTMLElement;\n  if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;\n  commitLastValue();\n}\n\n// Horizontal scrub. A plain click must still place the caret for typing, so\n// the gesture does not take over until the pointer has moved past a small\n// threshold.\nconst DRAG_THRESHOLD_PX = 3;\nconst PIXELS_PER_STEP = 4;\n\n// Set while a drag's window listeners are attached, so unmounting mid-drag\n// detaches them instead of leaking handlers onto `window`.\nlet removeDragListeners: (() => void) | undefined;\nonUnmounted(() => removeDragListeners?.());\n\nfunction onPointerDown(event: PointerEvent) {\n  if (props.disabled || event.button !== 0) return;\n  const startX = event.clientX;\n  const startValue = lastValue.value ?? props.min ?? 0;\n  const step = props.step || 1;\n  let dragging = false;\n\n  function onPointerMove(moveEvent: PointerEvent) {\n    const deltaX = moveEvent.clientX - startX;\n    if (!dragging) {\n      if (Math.abs(deltaX) < DRAG_THRESHOLD_PX) return;\n      dragging = true;\n      window.getSelection()?.removeAllRanges();\n    }\n    moveEvent.preventDefault();\n    const deltaSteps = Math.round(deltaX / PIXELS_PER_STEP);\n    const next = clampValue(startValue + deltaSteps * step);\n    if (next !== lastValue.value) onUpdate(next);\n  }\n\n  function onPointerUp() {\n    removeDragListeners?.();\n    if (dragging) commitLastValue();\n  }\n\n  // Bail-out (Escape mid-scrub, or a browser-issued pointercancel): the\n  // gesture is discarded. Nothing commits, and one last transient update\n  // carrying the start value lets the host restore the pre-drag preview.\n  function abortDrag() {\n    removeDragListeners?.();\n    if (!dragging) return;\n    if (lastValue.value !== startValue) onUpdate(startValue);\n    editPending = false;\n  }\n\n  function onDragKeydown(keyEvent: KeyboardEvent) {\n    if (keyEvent.key !== \"Escape\" || !dragging) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    abortDrag();\n  }\n\n  window.addEventListener(\"pointermove\", onPointerMove);\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", abortDrag);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  removeDragListeners = () => {\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", abortDrag);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    removeDragListeners = undefined;\n  };\n}\n</script>\n\n<template>\n  <NumberFieldRoot\n    v-bind=\"rootBounds\"\n    :step=\"step\"\n    :disabled=\"disabled\"\n    :aria-disabled=\"disabled || undefined\"\n    :data-invalid=\"invalid || undefined\"\n    :class=\"\n      cn(\n        'group relative inline-flex h-9 w-full items-center rounded-md border border-input bg-background',\n        'transition-[color,background-color,box-shadow] duration-fast ease-out',\n        // Rim-lit at rest; the ring blooms on focus.\n        'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n        !invalid && 'focus-within:shadow-halo',\n        invalid && 'border-destructive focus-within:outline-destructive',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onUpdate\"\n    @keydown.capture=\"onKeydownCapture\"\n    @keydown=\"onKeydownCommit\"\n    @keyup=\"onKeyupCommit\"\n    @focusout=\"onFocusOut\"\n    @pointerdown=\"onPointerDown\"\n  >\n    <NumberFieldInput\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          'tabular h-full w-full flex-1 rounded-md bg-transparent px-3 text-sm text-foreground outline-none',\n          unit ? 'pr-9' : 'pr-3',\n          disabled ? 'cursor-not-allowed' : 'cursor-ew-resize',\n        )\n      \"\n    />\n    <!-- The unit is presentation, so it is hidden from assistive technology\n         and it clears out on hover to make room for the stepper. -->\n    <span\n      v-if=\"unit\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute right-2 text-xs text-muted-foreground transition-opacity duration-fast group-hover:opacity-0\"\n    >\n      {{ unit }}\n    </span>\n    <!-- The stepper is hidden until hover: a column of these is read as a\n         column of numbers, and a permanent pair of chevrons on every row turns\n         that into a column of controls. -->\n    <div\n      class=\"absolute right-1 flex flex-col opacity-0 transition-opacity duration-fast group-hover:opacity-100\"\n    >\n      <NumberFieldIncrement\n        class=\"flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <!-- Stroke lives on the 24 grid and scales with size, so the inherited\n             1.5 would render 0.75 device pixels at this 12px box and all but\n             disappear. 2.5 restores the optical weight. -->\n        <ChevronUp class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldIncrement>\n      <NumberFieldDecrement\n        class=\"flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)] hover:bg-subtle hover:text-foreground active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronDown class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n      </NumberFieldDecrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":"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"}

package/dist/primitives/Popover/Popover.js

@@ -0,0 +1,7 @@
+import Popover_vue_vue_type_script_setup_true_lang_default from "./Popover.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/Popover/Popover.vue
+var Popover_default = Popover_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Popover_default as default };
+
+//# sourceMappingURL=Popover.js.map

package/dist/primitives/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/primitives/Popover/Popover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the panel prefers. It is a preference and not a\n * guarantee: Reka flips the panel to the opposite edge when it would collide\n * with the viewport, which is why a caller sets the side it *wants* rather\n * than the side it will get.\n *\n * The members mirror Reka's own `Side`. Nothing enforces that in this\n * declaration — the template binding does: give this union a member Reka does\n * not accept and `:side=\"side\"` stops type-checking. Declaring it here rather\n * than aliasing `PopoverContentProps[\"side\"]` is what puts the four values in\n * the generated props table, because the documentation reads syntax and an\n * indexed access type has none to read.\n */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** Where the panel sits along that edge. */\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Popover — a floating panel anchored to a trigger, carrying secondary content\n * the user opts into: a filter set, a colour picker, a details card.\n *\n * The escape contract, which is the whole reason to reach for an overlay\n * primitive rather than an absolutely positioned div: opening moves focus into\n * the panel, Esc and an outside click both close it, closing returns focus to\n * the trigger, and the page behind keeps scrolling because a popover is not\n * modal. Focus is *not* trapped — Tab leaves the panel, which is correct for\n * content the user can walk past. `Dialog` is the one that traps.\n *\n * Reach for `DropdownMenu` when the panel is a list of commands, `Tooltip` for\n * a hint that must not take focus at all, and `Dialog` when the task has to\n * block the rest of the UI.\n */\nwithDefaults(\n  defineProps<{\n    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */\n    open?: boolean | undefined;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: PopoverSide;\n    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */\n    align?: PopoverAlign;\n    /** Gap in pixels between the trigger and the panel. */\n    sideOffset?: number;\n    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */\n    arrow?: boolean;\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, side: \"bottom\", align: \"center\", sideOffset: 6, arrow: true },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the panel. Rendered `as-child`, so the\n         caller's own element *is* the trigger and no wrapper swallows its\n         accessible name. -->\n    <PopoverTrigger as-child>\n      <slot name=\"trigger\" />\n    </PopoverTrigger>\n\n    <PopoverPortal>\n      <PopoverContent\n        :side=\"side\"\n        :align=\"align\"\n        :side-offset=\"sideOffset\"\n        :class=\"\n          cn(\n            'z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none',\n            // Scoped to the open state, 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 panel over the\n            // page, swallowing clicks. Scoped, the closed element computes\n            // `animation-name: none` and Presence takes its immediate-unmount\n            // branch instead. The origin below is what makes that scale grow\n            // out of the trigger rather than out of the panel's own centre.\n            'data-[state=open]:animate-scale-in',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <!-- @slot The panel body. -->\n        <slot />\n        <PopoverArrow v-if=\"arrow\" class=\"fill-popover\" :width=\"12\" :height=\"6\" />\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Popover/Popover.vue.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Which edge of the trigger the panel prefers. It is a preference and not a
+ * guarantee: Reka flips the panel to the opposite edge when it would collide
+ * with the viewport, which is why a caller sets the side it *wants* rather
+ * than the side it will get.
+ *
+ * The members mirror Reka's own `Side`. Nothing enforces that in this
+ * declaration — the template binding does: give this union a member Reka does
+ * not accept and `:side="side"` stops type-checking. Declaring it here rather
+ * than aliasing `PopoverContentProps["side"]` is what puts the four values in
+ * the generated props table, because the documentation reads syntax and an
+ * indexed access type has none to read.
+ */
+export type PopoverSide = "top" | "right" | "bottom" | "left";
+/** Where the panel sits along that edge. */
+export type PopoverAlign = "start" | "center" | "end";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */
+    open?: boolean | undefined;
+    /** The edge of the trigger to anchor against, before collision flipping. */
+    side?: PopoverSide;
+    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */
+    align?: PopoverAlign;
+    /** Gap in pixels between the trigger and the panel. */
+    sideOffset?: number;
+    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */
+    arrow?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */
+    open?: boolean | undefined;
+    /** The edge of the trigger to anchor against, before collision flipping. */
+    side?: PopoverSide;
+    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */
+    align?: PopoverAlign;
+    /** Gap in pixels between the trigger and the panel. */
+    sideOffset?: number;
+    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */
+    arrow?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: (value: boolean) => any;
+}>, {
+    open: boolean | undefined;
+    side: PopoverSide;
+    sideOffset: number;
+    align: PopoverAlign;
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    trigger?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Popover.vue.d.ts.map