@ecoma-io/loom 0.1.0

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

@@ -0,0 +1,56 @@
+/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */
+export interface SelectOption {
+    /** The value bound to `v-model` when this row is chosen. Unique within the list. */
+    value: string;
+    /** The text shown on the row, and on the trigger once it is chosen. */
+    label: string;
+    /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */
+    disabled?: boolean;
+}
+/**
+ * The trigger's height scale. It matches the text input scale exactly, so a
+ * form row mixing a Select beside a text field never comes out uneven — which
+ * is why reaching past `size` for an `h-*` class is always the wrong fix.
+ */
+export type SelectSize = "sm" | "md" | "lg";
+export declare const selectVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The chosen option's `value`. Leave it unset to show the placeholder. */
+    modelValue?: string;
+    /** The rows, in the order they are shown. */
+    options: SelectOption[];
+    /** Shown on the trigger while nothing is chosen. It is not an option. */
+    placeholder?: string;
+    /** Unavailable: dims the trigger and refuses to open. */
+    disabled?: boolean;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
+    size?: SelectSize;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The chosen option's `value`. Leave it unset to show the placeholder. */
+    modelValue?: string;
+    /** The rows, in the order they are shown. */
+    options: SelectOption[];
+    /** Shown on the trigger while nothing is chosen. It is not an option. */
+    placeholder?: string;
+    /** Unavailable: dims the trigger and refuses to open. */
+    disabled?: boolean;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
+    size?: SelectSize;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    size: SelectSize;
+    disabled: boolean;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Select.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Select/Select.vue"],"names":[],"mappings":"AAkNA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAqB1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkBd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO;aAER,OAAO;6EAyUjB,CAAC"}

package/dist/primitives/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,122 @@
+import { cn } from "../../lib/cn.js";
+import { listStaggerDelay } from "../../lib/motion.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { Check, ChevronDown } from "@lucide/vue";
+import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Select/Select.vue?vue&type=script&setup=true&lang.ts
+/**
+* Select — pick one value out of a closed list, through a compact trigger and
+* a popover listbox. It suits roughly three to fifteen rows where one value is
+* always chosen: a language, a resolution, a quality preset.
+*
+* Below that, two to five options a reader should see all of at once are
+* better shown than hidden. Above it, a list long enough to need searching
+* wants a combobox, which is a different control rather than a longer version
+* of this one.
+*
+* Built on Reka UI's Select, which supplies the listbox semantics: arrow-key
+* navigation, first-character typeahead, Escape and outside-click to close, and
+* the `role="combobox"` trigger wired to the listbox by `aria-expanded` and
+* `aria-controls`. The active row is tracked by moving real focus onto it, not
+* by `aria-activedescendant`.
+*/
+var selectVariants = cva([
+	"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground",
+	"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle",
+	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+	"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground"
+], {
+	variants: { size: {
+		sm: "h-8 px-2.5 text-xs",
+		md: "h-9 px-3 text-sm",
+		lg: "h-11 px-4 text-base"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Select",
+	props: {
+		modelValue: {},
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const { attrs, rest: triggerAttrs } = useSplitAttrs();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectRoot), {
+				"model-value": __props.modelValue ?? "",
+				disabled: __props.disabled,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
+			}, {
+				default: withCtx(() => [createVNode(unref(SelectTrigger), mergeProps(unref(triggerAttrs), {
+					"aria-invalid": __props.invalid || void 0,
+					"data-invalid": __props.invalid || void 0,
+					class: unref(cn)(unref(selectVariants)({ size: __props.size }), !__props.invalid && "focus-visible:shadow-halo", __props.invalid && "border-destructive focus-visible:outline-destructive", unref(attrs).class)
+				}), {
+					default: withCtx(() => [createVNode(unref(SelectValue), { placeholder: __props.placeholder ?? "" }, null, 8, ["placeholder"]), createVNode(unref(SelectIcon), { class: "shrink-0 text-muted-foreground" }, {
+						default: withCtx(() => [createVNode(unref(ChevronDown), { class: "h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180" })]),
+						_: 1
+					})]),
+					_: 1
+				}, 16, [
+					"aria-invalid",
+					"data-invalid",
+					"class"
+				]), createVNode(unref(SelectPortal), null, {
+					default: withCtx(() => [createVNode(unref(SelectContent), {
+						position: "popper",
+						"side-offset": 6,
+						class: normalizeClass(unref(cn)("z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise"))
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectViewport), { class: "p-1" }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+								return openBlock(), createBlock(unref(SelectItem), {
+									key: option.value,
+									value: option.value,
+									disabled: option.disabled ?? false,
+									style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
+									class: normalizeClass(unref(cn)("relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none", "transition-colors duration-fast ease-out", "animate-fade-rise", "data-[highlighted]:bg-subtle", "data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"))
+								}, {
+									default: withCtx(() => [createVNode(unref(SelectItemText), null, {
+										default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+										_: 2
+									}, 1024), createVNode(unref(SelectItemIndicator), { class: "absolute right-2 inline-flex items-center" }, {
+										default: withCtx(() => [createVNode(unref(Check), { class: "h-4 w-4" })]),
+										_: 1
+									})]),
+									_: 2
+								}, 1032, [
+									"value",
+									"disabled",
+									"style",
+									"class"
+								]);
+							}), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"]);
+		};
+	}
+});
+//#endregion
+export { Select_vue_vue_type_script_setup_true_lang_default as default, selectVariants };
+
+//# sourceMappingURL=Select.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n */\nwithDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  { disabled: false, invalid: false, size: \"md\" },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead.\n// Spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"disabled\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"triggerAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :data-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !invalid && 'focus-visible:shadow-halo',\n          invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary',\n                'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              )\n            \"\n          >\n            <SelectItemText>{{ option.label }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CACA;AACF,GACA;CAIE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;;GAIlD,OAAA,UAAA,GAAA,YAsEa,MAAA,UAAA,GAAA;IArEV,eAAa,QAAA,cAAU;IACvB,UAAU,QAAA;IACV,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAmBgB,CAnBhB,YAmBgB,MAAA,aAAA,GAnBhB,WACU,MAkBM,YAAA,GAlBM;KACnB,gBAAc,QAAA,WAAW,KAAA;KACzB,gBAAc,QAAA,WAAW,KAAA;KACzB,OAAgB,MAAA,EAAA,CAAE,CAAY,MAAA,cAAA,CAAc,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAgB,CAAA,QAAA,WAAO,6BAA2C,QAAA,WAAO,wDAAsE,MAAA,KAAA,CAAK,CAAC,KAAA;;KASzM,SAAA,cAAgD,CAAhD,YAAgD,MAAA,WAAA,GAAA,EAAlC,aAAa,QAAA,eAAW,GAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,GACtC,YAIa,MAAA,UAAA,GAAA,EAJD,OAAM,iCAAgC,GAAA;MAChD,SAAA,cAEE,CAFF,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,yFAAwF,CAAA,CAAA,CAAA;;;;;;;;IAKpG,CAAA,GAAA,YA2Ce,MAAA,YAAA,GAAA,MAAA;KA1Cb,SAAA,cAyCgB,CAzChB,YAyCgB,MAAA,aAAA,GAAA;MAxCd,UAAS;MACR,eAAa;MACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,8IAAA,qCAAA,CAAA;;MAYrB,SAAA,cAyBiB,CAzBjB,YAyBiB,MAAA,cAAA,GAAA,EAzBD,OAAM,MAAK,GAAA;OAIvB,SAAA,cAAkC,EADpC,UAAA,IAAA,GAAA,mBAqBa,UAAA,MAAA,WApBe,QAAA,UAAlB,QAAQ,UAAK;QADvB,OAAA,UAAA,GAAA,YAqBa,MAAA,UAAA,GAAA;SAnBV,KAAK,OAAO;SACZ,OAAO,OAAO;SACd,UAAU,OAAO,YAAQ;SACzB,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;SAC/C,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gIAAA,4CAAA,qBAAA,gCAAA,2EAAA,gEAAA,CAAA;;SAWzB,SAAA,cAAmD,CAAnD,YAAmD,MAAA,cAAA,GAAA,MAAA;UAAnC,SAAA,cAAkB,CAAf,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;SAC/B,GAAA,IAAA,GAAA,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;UACpE,SAAA,cAAyB,CAAzB,YAAyB,MAAA,KAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA"}

package/dist/primitives/Separator/Separator.js

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

package/dist/primitives/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,19 @@
+/** Which axis the hairline draws along. */
+export type SeparatorOrientation = "horizontal" | "vertical";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** Which axis the hairline draws along. */
+    orientation?: SeparatorOrientation;
+    /** Purely visual, with no `role="separator"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */
+    decorative?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Which axis the hairline draws along. */
+    orientation?: SeparatorOrientation;
+    /** Purely visual, with no `role="separator"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */
+    decorative?: boolean;
+}> & Readonly<{}>, {
+    orientation: SeparatorOrientation;
+    decorative: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Separator.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Separator/Separator.vue"],"names":[],"mappings":"AA8CA,2CAA2C;AAC3C,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;wBACxC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IASd,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;IAHpB,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;iBAFN,oBAAoB;gBAErB,OAAO;6EA4DpB,CAAC"}

package/dist/primitives/Separator/Separator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/cn.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { Separator } from "reka-ui";
+//#region src/primitives/Separator/Separator.vue?vue&type=script&setup=true&lang.ts
+var Separator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Separator",
+	props: {
+		orientation: { default: "horizontal" },
+		decorative: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Separator), {
+				orientation: __props.orientation,
+				decorative: __props.decorative,
+				class: normalizeClass(unref(cn)("shrink-0 bg-border", __props.orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch"))
+			}, null, 8, [
+				"orientation",
+				"decorative",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Separator_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Separator.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,YASE,MAAA,SAAA,GAAA;IARC,aAAa,QAAA;IACb,YAAY,QAAA;IACZ,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,sBAAwC,QAAA,gBAAW,eAAA,gBAAA,0BAAA,CAAA"}

package/dist/primitives/Skeleton/Skeleton.js

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

package/dist/primitives/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SkeletonVariant = \"text\" | \"circle\" | \"rect\";\n\n// A faint light band sweeps a muted base (background-color muted + a moving\n// transparent→light→transparent gradient image) — the shimmer language,\n// kept neutral and low-contrast so a loading page reads as \"coming\", not busy.\n// Under prefers-reduced-motion the sweep simply stops on a flat muted block.\n//\n// The band's colour goes through `--alpha()` rather than `hsl(var(…)/…)`.\n// Loom's tokens are whole colours (`--color-foreground: hsl(213 29% 15%)`),\n// not the bare channel triplets that idiom expects, so wrapping one in `hsl()`\n// produces a value the browser cannot compute — and a single invalid stop\n// takes the entire gradient with it, leaving a flat block that still animates\n// its own absence. `--alpha()` is Tailwind's own function for this and takes\n// the token as it is actually written.\nexport const skeletonVariants = cva(\n  \"bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer\",\n  {\n    variants: {\n      variant: {\n        text: \"h-4 rounded\",\n        circle: \"rounded-full\",\n        rect: \"rounded-md\",\n      } satisfies Record<SkeletonVariant, string>,\n    },\n    defaultVariants: { variant: \"text\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Skeleton — content-loading placeholder for a KNOWN layout (a card, a list\n * row, an avatar) so the page's shape reads as \"coming\" instead of jumping\n * once real content lands. For an indeterminate wait with no layout shape\n * yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading\n * state itself is announced elsewhere (e.g. a Spinner or a live region), not\n * by the placeholder shapes. Width/height are the caller's concern via a\n * passthrough `class` (e.g. `class=\"h-10 w-10\"`).\n */\nwithDefaults(\n  defineProps<{\n    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */\n    variant?: SkeletonVariant;\n  }>(),\n  { variant: \"text\" },\n);\n</script>\n\n<template>\n  <div aria-hidden=\"true\" :class=\"cn(skeletonVariants({ variant }))\" />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+export type SkeletonVariant = "text" | "circle" | "rect";
+export declare const skeletonVariants: (props?: ({
+    variant?: "circle" | "rect" | "text" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */
+    variant?: SkeletonVariant;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */
+    variant?: SkeletonVariant;
+}> & Readonly<{}>, {
+    variant: SkeletonVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Skeleton.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"names":[],"mappings":"AAgEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAczD,eAAO,MAAM,gBAAgB;;8EAY5B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAWd,uGAAuG;cAC7F,eAAe;;IADzB,uGAAuG;cAC7F,eAAe;;aAAf,eAAe;6EAsCzB,CAAC"}

package/dist/primitives/Skeleton/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Skeleton/Skeleton.vue?vue&type=script&setup=true&lang.ts
+/**
+* Skeleton — content-loading placeholder for a KNOWN layout (a card, a list
+* row, an avatar) so the page's shape reads as "coming" instead of jumping
+* once real content lands. For an indeterminate wait with no layout shape
+* yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading
+* state itself is announced elsewhere (e.g. a Spinner or a live region), not
+* by the placeholder shapes. Width/height are the caller's concern via a
+* passthrough `class` (e.g. `class="h-10 w-10"`).
+*/
+var skeletonVariants = cva("bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer", {
+	variants: { variant: {
+		text: "h-4 rounded",
+		circle: "rounded-full",
+		rect: "rounded-md"
+	} },
+	defaultVariants: { variant: "text" }
+});
+var Skeleton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Skeleton",
+	props: { variant: { default: "text" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(cn)(unref(skeletonVariants)({ variant: __props.variant })))
+			}, null, 2);
+		};
+	}
+});
+//#endregion
+export { Skeleton_vue_vue_type_script_setup_true_lang_default as default, skeletonVariants };
+
+//# sourceMappingURL=Skeleton.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SkeletonVariant = \"text\" | \"circle\" | \"rect\";\n\n// A faint light band sweeps a muted base (background-color muted + a moving\n// transparent→light→transparent gradient image) — the shimmer language,\n// kept neutral and low-contrast so a loading page reads as \"coming\", not busy.\n// Under prefers-reduced-motion the sweep simply stops on a flat muted block.\n//\n// The band's colour goes through `--alpha()` rather than `hsl(var(…)/…)`.\n// Loom's tokens are whole colours (`--color-foreground: hsl(213 29% 15%)`),\n// not the bare channel triplets that idiom expects, so wrapping one in `hsl()`\n// produces a value the browser cannot compute — and a single invalid stop\n// takes the entire gradient with it, leaving a flat block that still animates\n// its own absence. `--alpha()` is Tailwind's own function for this and takes\n// the token as it is actually written.\nexport const skeletonVariants = cva(\n  \"bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer\",\n  {\n    variants: {\n      variant: {\n        text: \"h-4 rounded\",\n        circle: \"rounded-full\",\n        rect: \"rounded-md\",\n      } satisfies Record<SkeletonVariant, string>,\n    },\n    defaultVariants: { variant: \"text\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Skeleton — content-loading placeholder for a KNOWN layout (a card, a list\n * row, an avatar) so the page's shape reads as \"coming\" instead of jumping\n * once real content lands. For an indeterminate wait with no layout shape\n * yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading\n * state itself is announced elsewhere (e.g. a Spinner or a live region), not\n * by the placeholder shapes. Width/height are the caller's concern via a\n * passthrough `class` (e.g. `class=\"h-10 w-10\"`).\n */\nwithDefaults(\n  defineProps<{\n    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */\n    variant?: SkeletonVariant;\n  }>(),\n  { variant: \"text\" },\n);\n</script>\n\n<template>\n  <div aria-hidden=\"true\" :class=\"cn(skeletonVariants({ variant }))\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAa,mBAAmB,IAC9B,sJACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CACF;;;;;;GAyBE,OAAA,UAAA,GAAA,mBAAqE,OAAA;IAAhE,eAAY;IAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA"}

package/dist/primitives/Slider/Slider.js

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

package/dist/primitives/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/primitives/Slider/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Slider — one continuous value inside a bounded range. Reach for it when the\n * range itself is the information: a volume, a ratio, a share of something\n * whole. A number that happens to be numeric but has no meaningful ceiling —\n * a coordinate, an angle — belongs in a NumberField instead.\n *\n * Built on Reka UI's Slider for the `role=\"slider\"` semantics, the pointer\n * drag and the arrow / Home / End stepping. Single-thumb only: Reka models the\n * value as an array, and this exposes a scalar.\n *\n * Two things are added here.\n *\n * The first is the drag buffer, and without it the component silently drops\n * changes. Given a defined model value Reka runs fully controlled, and its\n * release-time \"did this change?\" check compares against whatever it was last\n * fed — not against what it emitted. A host that correctly withholds transient\n * values until commit therefore leaves that check reading the pre-drag value\n * for the whole gesture, so it always answers no and the commit never fires.\n * `lastValue` below feeds Reka's own transient ticks back into its model, which\n * is exactly the fix NumberField applies for the same reason. Keyboard steps\n * need no buffer: Reka updates and commits inside one synchronous call, so it\n * compares against a value that is still old either way.\n *\n * The second is the abort path. Reka has no drag cancellation of its own — it\n * handles pointerdown, move and up, and commits whenever the release value\n * differs from the one it snapshotted — so Escape or a browser-issued\n * `pointercancel` mid-drag would still write one checkpoint on release. The\n * bail-out mirrors NumberField's: reset `lastValue` to the committed value, so\n * Reka's own comparison sees no change and never commits, and swallow the\n * still-captured pointer's remaining ticks until it releases.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient drag positions are reported before it changes. */\n    modelValue?: number;\n    /** The floor of the range, and where Home lands. */\n    min?: number;\n    /** The ceiling of the range, and where End lands. */\n    max?: number;\n    /** The granularity of one arrow-key step and of the drag's own snapping. */\n    step?: number;\n    /** Unavailable: dims the track and refuses both the pointer and the keyboard. */\n    disabled?: boolean;\n  }>(),\n  { min: 0, max: 1, step: 0.01, disabled: false },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every position the thumb passes through during a drag. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once at the end of a gesture — drag release, or a keyboard step. */\n  commit: [value: number];\n}>();\n\n// The root renders a real element, and it is the one a caller's `class` has to\n// land on — sizing and layout (`flex-1` to grow in a toolbar) are dead weight\n// on the thumb, which is a 16px absolutely-positioned circle no flex rule\n// reaches. Every other fallthrough attribute goes the other way, onto the\n// thumb: `aria-labelledby` describes the `role=\"slider\"` element, not the box\n// around it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: thumbAttrs } = useSplitAttrs();\n\n// What the Reka root is fed as its own model value: seeded from the prop, then\n// advanced on every tick Reka emits, so its release-time check sees the drag's\n// real end position rather than the frozen prop.\nconst lastValue = ref(props.modelValue);\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n  },\n);\n\nconst values = computed(() => (lastValue.value === undefined ? [] : [lastValue.value]));\n\nfunction onUpdate(next: number[] | undefined) {\n  const value = next?.[0];\n  if (value === undefined || aborted) return;\n  lastValue.value = value;\n  emit(\"update:modelValue\", value);\n}\n\nfunction onCommit(next: number[]) {\n  if (next[0] !== undefined && !aborted) emit(\"commit\", next[0]);\n}\n\n// The abort path. Its window listeners live for the duration of one pointer\n// gesture and no longer.\nlet aborted = false;\nlet teardownDrag: (() => void) | undefined;\n\nfunction resetToCommitted() {\n  if (lastValue.value === props.modelValue) return;\n  lastValue.value = props.modelValue;\n  // One transient tick carrying the committed value, so the host can restore\n  // its pre-drag preview. Still never a checkpoint.\n  if (props.modelValue !== undefined) emit(\"update:modelValue\", props.modelValue);\n}\n\nfunction onRootPointerDown() {\n  if (props.disabled) return;\n  aborted = false;\n  const onDragKeydown = (keyEvent: KeyboardEvent) => {\n    if (keyEvent.key !== \"Escape\" || aborted) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    // Reka keeps the pointer captured until release, so `aborted` is what\n    // stops the remaining move ticks from resurrecting the gesture.\n    aborted = true;\n    resetToCommitted();\n  };\n  const onPointerUp = () => {\n    // This runs after Reka's own element-level release handling, so a\n    // swallowed gesture has already settled by the time the abort re-arms.\n    teardownDrag?.();\n    aborted = false;\n  };\n  const onPointerCancel = () => {\n    teardownDrag?.();\n    aborted = false; // a cancelled pointer emits no further ticks\n    resetToCommitted();\n  };\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", onPointerCancel);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  teardownDrag = () => {\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", onPointerCancel);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    teardownDrag = undefined;\n  };\n}\n\nonBeforeUnmount(() => teardownDrag?.());\n</script>\n\n<template>\n  <SliderRoot\n    :model-value=\"values\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :disabled=\"disabled\"\n    :class=\"\n      cn(\n        'relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @pointerdown=\"onRootPointerDown\"\n    @update:model-value=\"onUpdate\"\n    @value-commit=\"onCommit\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full grow rounded-full bg-muted\">\n      <!-- The filled range is a value a person set, so it is painted flat in\n           the human force's colour rather than in a gradient. -->\n      <SliderRange class=\"absolute h-full rounded-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-bind=\"thumbAttrs\"\n      class=\"block h-4 w-4 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none\"\n    />\n  </SliderRoot>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,58 @@
+/**
+ * Slider — one continuous value inside a bounded range. Reach for it when the
+ * range itself is the information: a volume, a ratio, a share of something
+ * whole. A number that happens to be numeric but has no meaningful ceiling —
+ * a coordinate, an angle — belongs in a NumberField instead.
+ *
+ * Built on Reka UI's Slider for the `role="slider"` semantics, the pointer
+ * drag and the arrow / Home / End stepping. Single-thumb only: Reka models the
+ * value as an array, and this exposes a scalar.
+ *
+ * Two things are added here.
+ *
+ * The first is the drag buffer, and without it the component silently drops
+ * changes. Given a defined model value Reka runs fully controlled, and its
+ * release-time "did this change?" check compares against whatever it was last
+ * fed — not against what it emitted. A host that correctly withholds transient
+ * values until commit therefore leaves that check reading the pre-drag value
+ * for the whole gesture, so it always answers no and the commit never fires.
+ * `lastValue` below feeds Reka's own transient ticks back into its model, which
+ * is exactly the fix NumberField applies for the same reason. Keyboard steps
+ * need no buffer: Reka updates and commits inside one synchronous call, so it
+ * compares against a value that is still old either way.
+ *
+ * The second is the abort path. Reka has no drag cancellation of its own — it
+ * handles pointerdown, move and up, and commits whenever the release value
+ * differs from the one it snapshotted — so Escape or a browser-issued
+ * `pointercancel` mid-drag would still write one checkpoint on release. The
+ * bail-out mirrors NumberField's: reset `lastValue` to the committed value, so
+ * Reka's own comparison sees no change and never commits, and swallow the
+ * still-captured pointer's remaining ticks until it releases.
+ */
+type __VLS_Props = {
+    /** The current value. Transient drag positions are reported before it changes. */
+    modelValue?: number;
+    /** The floor of the range, and where Home lands. */
+    min?: number;
+    /** The ceiling of the range, and where End lands. */
+    max?: number;
+    /** The granularity of one arrow-key step and of the drag's own snapping. */
+    step?: number;
+    /** Unavailable: dims the track and refuses both the pointer and the keyboard. */
+    disabled?: 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;
+    max: number;
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Slider.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Slider/Slider.vue"],"names":[],"mappings":"AAmLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,WAAW,GAAG;IACf,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAyPJ,QAAA,MAAM,YAAY;;;;;;;cA1PH,OAAO;SAJZ,MAAM;SAFN,MAAM;UAIL,MAAM;6EAgQf,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/primitives/Slider/Slider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,137 @@
+import { cn } from "../../lib/cn.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { computed, createBlock, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, openBlock, ref, unref, watch, withCtx } from "vue";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
+//#region src/primitives/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
+/**
+* Slider — one continuous value inside a bounded range. Reach for it when the
+* range itself is the information: a volume, a ratio, a share of something
+* whole. A number that happens to be numeric but has no meaningful ceiling —
+* a coordinate, an angle — belongs in a NumberField instead.
+*
+* Built on Reka UI's Slider for the `role="slider"` semantics, the pointer
+* drag and the arrow / Home / End stepping. Single-thumb only: Reka models the
+* value as an array, and this exposes a scalar.
+*
+* Two things are added here.
+*
+* The first is the drag buffer, and without it the component silently drops
+* changes. Given a defined model value Reka runs fully controlled, and its
+* release-time "did this change?" check compares against whatever it was last
+* fed — not against what it emitted. A host that correctly withholds transient
+* values until commit therefore leaves that check reading the pre-drag value
+* for the whole gesture, so it always answers no and the commit never fires.
+* `lastValue` below feeds Reka's own transient ticks back into its model, which
+* is exactly the fix NumberField applies for the same reason. Keyboard steps
+* need no buffer: Reka updates and commits inside one synchronous call, so it
+* compares against a value that is still old either way.
+*
+* The second is the abort path. Reka has no drag cancellation of its own — it
+* handles pointerdown, move and up, and commits whenever the release value
+* differs from the one it snapshotted — so Escape or a browser-issued
+* `pointercancel` mid-drag would still write one checkpoint on release. The
+* bail-out mirrors NumberField's: reset `lastValue` to the committed value, so
+* Reka's own comparison sees no change and never commits, and swallow the
+* still-captured pointer's remaining ticks until it releases.
+*/
+var Slider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Slider",
+	props: {
+		modelValue: {},
+		min: { default: 0 },
+		max: { default: 1 },
+		step: { default: .01 },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "commit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { attrs, rest: thumbAttrs } = useSplitAttrs();
+		const lastValue = ref(props.modelValue);
+		watch(() => props.modelValue, (value) => {
+			lastValue.value = value;
+		});
+		const values = computed(() => lastValue.value === void 0 ? [] : [lastValue.value]);
+		function onUpdate(next) {
+			const value = next?.[0];
+			if (value === void 0 || aborted) return;
+			lastValue.value = value;
+			emit("update:modelValue", value);
+		}
+		function onCommit(next) {
+			if (next[0] !== void 0 && !aborted) emit("commit", next[0]);
+		}
+		let aborted = false;
+		let teardownDrag;
+		function resetToCommitted() {
+			if (lastValue.value === props.modelValue) return;
+			lastValue.value = props.modelValue;
+			if (props.modelValue !== void 0) emit("update:modelValue", props.modelValue);
+		}
+		function onRootPointerDown() {
+			if (props.disabled) return;
+			aborted = false;
+			const onDragKeydown = (keyEvent) => {
+				if (keyEvent.key !== "Escape" || aborted) return;
+				keyEvent.preventDefault();
+				keyEvent.stopPropagation();
+				aborted = true;
+				resetToCommitted();
+			};
+			const onPointerUp = () => {
+				teardownDrag?.();
+				aborted = false;
+			};
+			const onPointerCancel = () => {
+				teardownDrag?.();
+				aborted = false;
+				resetToCommitted();
+			};
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", onPointerCancel);
+			window.addEventListener("keydown", onDragKeydown, true);
+			teardownDrag = () => {
+				window.removeEventListener("pointerup", onPointerUp);
+				window.removeEventListener("pointercancel", onPointerCancel);
+				window.removeEventListener("keydown", onDragKeydown, true);
+				teardownDrag = void 0;
+			};
+		}
+		onBeforeUnmount(() => teardownDrag?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderRoot), {
+				"model-value": values.value,
+				min: __props.min,
+				max: __props.max,
+				step: __props.step,
+				disabled: __props.disabled,
+				class: normalizeClass(unref(cn)("relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", unref(attrs).class)),
+				onPointerdown: onRootPointerDown,
+				"onUpdate:modelValue": onUpdate,
+				onValueCommit: onCommit
+			}, {
+				default: withCtx(() => [createVNode(unref(SliderTrack), { class: "relative h-1.5 w-full grow rounded-full bg-muted" }, {
+					default: withCtx(() => [createVNode(unref(SliderRange), { class: "absolute h-full rounded-full bg-primary" })]),
+					_: 1
+				}), createVNode(unref(SliderThumb), mergeProps(unref(thumbAttrs), { class: "block h-4 w-4 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none" }), null, 16)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"min",
+				"max",
+				"step",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Slider_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Slider.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Slider/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Slider — one continuous value inside a bounded range. Reach for it when the\n * range itself is the information: a volume, a ratio, a share of something\n * whole. A number that happens to be numeric but has no meaningful ceiling —\n * a coordinate, an angle — belongs in a NumberField instead.\n *\n * Built on Reka UI's Slider for the `role=\"slider\"` semantics, the pointer\n * drag and the arrow / Home / End stepping. Single-thumb only: Reka models the\n * value as an array, and this exposes a scalar.\n *\n * Two things are added here.\n *\n * The first is the drag buffer, and without it the component silently drops\n * changes. Given a defined model value Reka runs fully controlled, and its\n * release-time \"did this change?\" check compares against whatever it was last\n * fed — not against what it emitted. A host that correctly withholds transient\n * values until commit therefore leaves that check reading the pre-drag value\n * for the whole gesture, so it always answers no and the commit never fires.\n * `lastValue` below feeds Reka's own transient ticks back into its model, which\n * is exactly the fix NumberField applies for the same reason. Keyboard steps\n * need no buffer: Reka updates and commits inside one synchronous call, so it\n * compares against a value that is still old either way.\n *\n * The second is the abort path. Reka has no drag cancellation of its own — it\n * handles pointerdown, move and up, and commits whenever the release value\n * differs from the one it snapshotted — so Escape or a browser-issued\n * `pointercancel` mid-drag would still write one checkpoint on release. The\n * bail-out mirrors NumberField's: reset `lastValue` to the committed value, so\n * Reka's own comparison sees no change and never commits, and swallow the\n * still-captured pointer's remaining ticks until it releases.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient drag positions are reported before it changes. */\n    modelValue?: number;\n    /** The floor of the range, and where Home lands. */\n    min?: number;\n    /** The ceiling of the range, and where End lands. */\n    max?: number;\n    /** The granularity of one arrow-key step and of the drag's own snapping. */\n    step?: number;\n    /** Unavailable: dims the track and refuses both the pointer and the keyboard. */\n    disabled?: boolean;\n  }>(),\n  { min: 0, max: 1, step: 0.01, disabled: false },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every position the thumb passes through during a drag. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once at the end of a gesture — drag release, or a keyboard step. */\n  commit: [value: number];\n}>();\n\n// The root renders a real element, and it is the one a caller's `class` has to\n// land on — sizing and layout (`flex-1` to grow in a toolbar) are dead weight\n// on the thumb, which is a 16px absolutely-positioned circle no flex rule\n// reaches. Every other fallthrough attribute goes the other way, onto the\n// thumb: `aria-labelledby` describes the `role=\"slider\"` element, not the box\n// around it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: thumbAttrs } = useSplitAttrs();\n\n// What the Reka root is fed as its own model value: seeded from the prop, then\n// advanced on every tick Reka emits, so its release-time check sees the drag's\n// real end position rather than the frozen prop.\nconst lastValue = ref(props.modelValue);\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n  },\n);\n\nconst values = computed(() => (lastValue.value === undefined ? [] : [lastValue.value]));\n\nfunction onUpdate(next: number[] | undefined) {\n  const value = next?.[0];\n  if (value === undefined || aborted) return;\n  lastValue.value = value;\n  emit(\"update:modelValue\", value);\n}\n\nfunction onCommit(next: number[]) {\n  if (next[0] !== undefined && !aborted) emit(\"commit\", next[0]);\n}\n\n// The abort path. Its window listeners live for the duration of one pointer\n// gesture and no longer.\nlet aborted = false;\nlet teardownDrag: (() => void) | undefined;\n\nfunction resetToCommitted() {\n  if (lastValue.value === props.modelValue) return;\n  lastValue.value = props.modelValue;\n  // One transient tick carrying the committed value, so the host can restore\n  // its pre-drag preview. Still never a checkpoint.\n  if (props.modelValue !== undefined) emit(\"update:modelValue\", props.modelValue);\n}\n\nfunction onRootPointerDown() {\n  if (props.disabled) return;\n  aborted = false;\n  const onDragKeydown = (keyEvent: KeyboardEvent) => {\n    if (keyEvent.key !== \"Escape\" || aborted) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    // Reka keeps the pointer captured until release, so `aborted` is what\n    // stops the remaining move ticks from resurrecting the gesture.\n    aborted = true;\n    resetToCommitted();\n  };\n  const onPointerUp = () => {\n    // This runs after Reka's own element-level release handling, so a\n    // swallowed gesture has already settled by the time the abort re-arms.\n    teardownDrag?.();\n    aborted = false;\n  };\n  const onPointerCancel = () => {\n    teardownDrag?.();\n    aborted = false; // a cancelled pointer emits no further ticks\n    resetToCommitted();\n  };\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", onPointerCancel);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  teardownDrag = () => {\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", onPointerCancel);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    teardownDrag = undefined;\n  };\n}\n\nonBeforeUnmount(() => teardownDrag?.());\n</script>\n\n<template>\n  <SliderRoot\n    :model-value=\"values\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :disabled=\"disabled\"\n    :class=\"\n      cn(\n        'relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        attrs.class as string,\n      )\n    \"\n    @pointerdown=\"onRootPointerDown\"\n    @update:model-value=\"onUpdate\"\n    @value-commit=\"onCommit\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full grow rounded-full bg-muted\">\n      <!-- The filled range is a value a person set, so it is painted flat in\n           the human force's colour rather than in a gradient. -->\n      <SliderRange class=\"absolute h-full rounded-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-bind=\"thumbAttrs\"\n      class=\"block h-4 w-4 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none\"\n    />\n  </SliderRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,QAAQ;EAgBd,MAAM,OAAO;EAcb,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAKlD,MAAM,YAAY,IAAI,MAAM,UAAU;EACtC,YACQ,MAAM,aACX,UAAU;GACT,UAAU,QAAQ;EACpB,CACF;EAEA,MAAM,SAAS,eAAgB,UAAU,UAAU,KAAA,IAAY,CAAC,IAAI,CAAC,UAAU,KAAK,CAAE;EAEtF,SAAS,SAAS,MAA4B;GAC5C,MAAM,QAAQ,OAAO;GACrB,IAAI,UAAU,KAAA,KAAa,SAAS;GACpC,UAAU,QAAQ;GAClB,KAAK,qBAAqB,KAAK;EACjC;EAEA,SAAS,SAAS,MAAgB;GAChC,IAAI,KAAK,OAAO,KAAA,KAAa,CAAC,SAAS,KAAK,UAAU,KAAK,EAAE;EAC/D;EAIA,IAAI,UAAU;EACd,IAAI;EAEJ,SAAS,mBAAmB;GAC1B,IAAI,UAAU,UAAU,MAAM,YAAY;GAC1C,UAAU,QAAQ,MAAM;GAGxB,IAAI,MAAM,eAAe,KAAA,GAAW,KAAK,qBAAqB,MAAM,UAAU;EAChF;EAEA,SAAS,oBAAoB;GAC3B,IAAI,MAAM,UAAU;GACpB,UAAU;GACV,MAAM,iBAAiB,aAA4B;IACjD,IAAI,SAAS,QAAQ,YAAY,SAAS;IAC1C,SAAS,eAAe;IACxB,SAAS,gBAAgB;IAGzB,UAAU;IACV,iBAAiB;GACnB;GACA,MAAM,oBAAoB;IAGxB,eAAe;IACf,UAAU;GACZ;GACA,MAAM,wBAAwB;IAC5B,eAAe;IACf,UAAU;IACV,iBAAiB;GACnB;GACA,OAAO,iBAAiB,aAAa,WAAW;GAChD,OAAO,iBAAiB,iBAAiB,eAAe;GACxD,OAAO,iBAAiB,WAAW,eAAe,IAAI;GACtD,qBAAqB;IACnB,OAAO,oBAAoB,aAAa,WAAW;IACnD,OAAO,oBAAoB,iBAAiB,eAAe;IAC3D,OAAO,oBAAoB,WAAW,eAAe,IAAI;IACzD,eAAe,KAAA;GACjB;EACF;EAEA,sBAAsB,eAAe,CAAC;;GAIpC,OAAA,UAAA,GAAA,YAyBa,MAAA,UAAA,GAAA;IAxBV,eAAa,OAAA;IACb,KAAK,QAAA;IACL,KAAK,QAAA;IACL,MAAM,QAAA;IACN,UAAU,QAAA;IACV,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,mHAAqI,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;IAM3J,eAAa;IACb,uBAAoB;IACpB,eAAc;;IAEf,SAAA,cAIc,CAJd,YAIc,MAAA,WAAA,GAAA,EAJD,OAAM,mDAAkD,GAAA;KAGnE,SAAA,cAA+D,CAA/D,YAA+D,MAAA,WAAA,GAAA,EAAlD,OAAM,0CAAyC,CAAA,CAAA,CAAA;;IAE9D,CAAA,GAAA,YAGE,MAAA,WAAA,GAHF,WACU,MAER,UAAA,GAFkB,EAClB,OAAM,4SAA2S,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA"}