@abraca/nuxt 2.14.0 → 2.16.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "2.14.0",
+  "version": "2.16.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/editor.css

@@ -1 +1,3 @@
-html.dark .tiptap .shiki,html.dark .tiptap .shiki span{background-color:var(--ui-bg-muted)!important;color:var(--shiki-dark)!important}.collaboration-carets__caret{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d;margin-left:-1px;margin-right:-1px;opacity:0;pointer-events:none;position:relative;transition:opacity .3s ease;word-break:normal}.collaboration-carets__caret.is-hidden{display:none}.collaboration-carets__caret.is-active{opacity:1}.collaboration-carets__label{border-radius:3px 3px 3px 0;color:#0d0d0d;font-size:12px;font-style:normal;font-weight:600;left:-1px;line-height:normal;padding:.1rem .3rem;position:absolute;top:-1.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ProseMirror-yjs-selection,.collaboration-carets__selection{background-color:var(--collaboration-selection-color)!important;pointer-events:none}.search-highlight{background-color:color-mix(in srgb,var(--color-primary-400) 35%,transparent);border-radius:2px;padding:0 1px}.doc-passage-highlight{background-color:color-mix(in srgb,var(--color-success-400) 35%,transparent);border-radius:2px;padding:0 1px}.tiptap{min-height:100%;padding-bottom:8rem}.tiptap.file-drop-active{border-radius:4px;outline:2px dashed var(--ui-primary);outline-offset:4px}.tiptap .document-header{font-size:2.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem}.tiptap [data-type=document-meta]{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.375rem;line-height:1.75rem;margin-bottom:1.5rem;min-height:1.75rem}.tiptap [data-type=document-meta][data-cursor-in-meta=true][data-empty=true]:after{color:var(--ui-text-dimmed);content:"Type '/' to add a property…";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.prose-variant .tiptap [data-type=document-meta]{display:none}
+html .cm-editor,html .cm-editor .cm-content,html .cm-editor .cm-gutters,html .cm-editor .cm-scroller,html .cm-editor .cm-tooltip{font-family:var(
+    --font-code,ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace
+  )!important}html.dark .tiptap .shiki,html.dark .tiptap .shiki span{background-color:var(--ui-bg-muted)!important;color:var(--shiki-dark)!important}.collaboration-carets__caret{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d;margin-left:-1px;margin-right:-1px;opacity:0;pointer-events:none;position:relative;transition:opacity .3s ease;word-break:normal}.collaboration-carets__caret.is-hidden{display:none}.collaboration-carets__caret.is-active{opacity:1}.collaboration-carets__label{border-radius:3px 3px 3px 0;color:#0d0d0d;font-size:12px;font-style:normal;font-weight:600;left:-1px;line-height:normal;padding:.1rem .3rem;position:absolute;top:-1.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ProseMirror-yjs-selection,.collaboration-carets__selection{background-color:var(--collaboration-selection-color)!important;pointer-events:none}.search-highlight{background-color:color-mix(in srgb,var(--color-primary-400) 35%,transparent);border-radius:2px;padding:0 1px}.doc-passage-highlight{background-color:color-mix(in srgb,var(--color-success-400) 35%,transparent);border-radius:2px;padding:0 1px}.tiptap{min-height:100%;padding-bottom:8rem}.tiptap.file-drop-active{border-radius:4px;outline:2px dashed var(--ui-primary);outline-offset:4px}.tiptap .document-header{font-size:2.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem}.tiptap [data-type=document-meta]{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.375rem;line-height:1.75rem;margin-bottom:1.5rem;min-height:1.75rem}.tiptap [data-type=document-meta][data-cursor-in-meta=true][data-empty=true]:after{color:var(--ui-text-dimmed);content:"Type '/' to add a property…";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.prose-variant .tiptap [data-type=document-meta]{display:none}

package/dist/runtime/components/ACodeEditor.vue

@@ -57,7 +57,10 @@ function buildTheme(bundle) {
     ".cm-content": {
       fontFamily: 'var(--font-code, ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace) !important',
       caretColor: "var(--ui-text-highlighted)",
-      padding: "8px 0"
+      // Top padding leaves room for a remote caret's name badge on the FIRST
+      // line — y-codemirror positions it at `top: -1.4em`, so without headroom
+      // it renders above the content box and is clipped by the toolbar above.
+      padding: "1.6em 0 8px"
     },
     // Local caret — `drawSelection()` hides the native caret and draws this
     // bar, so style it to read like the native caret used elsewhere in the
@@ -145,7 +148,18 @@ function buildTheme(bundle) {
     // `user.color`); we restyle shape only. The caret already matches TipTap
     // (1px border bars, -1px margins); we only fix the label badge + hide the
     // caret dot.
-    ".cm-ySelection": { borderRadius: "1px" },
+    ".cm-ySelection": {
+      borderRadius: "1px",
+      // Fallback selection fill. y-codemirror paints the band via an inline
+      // `background-color: <user.colorLight>`; a valid inline value wins by
+      // specificity and keeps the per-user colour. But peers that broadcast
+      // only `user.color` (older builds, native gpui/apertura/aperio clients)
+      // leave colorLight as y-codemirror's invalid `color + '33'` default,
+      // which the browser drops — making the band invisible while the caret
+      // (which uses `color` directly) still shows. This neutral tint then
+      // applies, so a remote selection is always visible.
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 30%, transparent)"
+    },
     ".cm-ySelectionCaretDot": { display: "none" },
     ".cm-ySelectionInfo": {
       opacity: "1",

package/dist/runtime/components/ANodePanel.vue

@@ -646,11 +646,13 @@ const addFieldMenuItems = computed(
 
                 <!-- Number -->
                 <template v-else-if="field.type === 'number'">
-                  <UInput
-                    type="number"
-                    :model-value="String(getCustomFieldValue(field) ?? '')"
-                    size="sm"
-                    @update:model-value="setCustomFieldValue(field, $event ? Number($event) : void 0)"
+                  <AMetaNumberStepper
+                    :model-value="getCustomFieldValue(field) != null ? Number(getCustomFieldValue(field)) : void 0"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="field.step ?? 1"
+                    :unit="field.unit"
+                    @update:model-value="setCustomFieldValue(field, $event)"
                   />
                 </template>
 

package/dist/runtime/components/aware/ASlider.d.vue.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     sync: boolean;
     peers: boolean;
     awareness: boolean;
-    max: number;
     min: number;
+    max: number;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/aware/ASlider.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     sync: boolean;
     peers: boolean;
     awareness: boolean;
-    max: number;
     min: number;
+    max: number;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/docs/ADocsSearchButton.d.vue.ts

@@ -237,9 +237,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>> & Readonly<{}>, {
     color: any;
     disabled: boolean;
+    block: boolean;
     square: boolean;
     viewTransition: boolean;
-    block: boolean;
     loading: boolean;
     collapsed: boolean;
     tooltip: boolean | Record<string, any>;

package/dist/runtime/components/docs/ADocsSearchButton.vue.d.ts

@@ -237,9 +237,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>> & Readonly<{}>, {
     color: any;
     disabled: boolean;
+    block: boolean;
     square: boolean;
     viewTransition: boolean;
-    block: boolean;
     loading: boolean;
     collapsed: boolean;
     tooltip: boolean | Record<string, any>;

package/dist/runtime/components/editor/AColorPalettePopover.vue

@@ -1,24 +1,106 @@
 <script setup>
 import { ref, computed, watch, nextTick } from "vue";
 import { COLOR_PALETTES } from "../../utils/colorPalettes";
+const COLS = 11;
 const props = defineProps({
   modelValue: { type: String, required: true },
   open: { type: Boolean, required: true }
 });
 const emit = defineEmits(["update:modelValue", "update:open"]);
 const search = ref("");
+const highlighted = ref(-1);
+const scrollContainer = ref(null);
 const filteredPalettes = computed(() => {
   if (!search.value) return COLOR_PALETTES;
   const q = search.value.toLowerCase();
   return COLOR_PALETTES.filter((p) => p.name.toLowerCase().includes(q));
 });
+const paletteGroups = computed(() => {
+  let start = 0;
+  return filteredPalettes.value.map((p) => {
+    const group = { name: p.name, shades: p.shades, start };
+    start += p.shades.length;
+    return group;
+  });
+});
+const flatShades = computed(
+  () => filteredPalettes.value.flatMap(
+    (p) => p.shades.map((s) => ({ hex: s.hex, key: `${p.name}-${s.shade}` }))
+  )
+);
+watch(search, () => {
+  highlighted.value = -1;
+});
 function selectHex(hex) {
   emit("update:modelValue", hex);
   emit("update:open", false);
 }
+function scrollHighlightedIntoView() {
+  nextTick(() => {
+    scrollContainer.value?.querySelector(`[data-idx="${highlighted.value}"]`)?.scrollIntoView({ block: "nearest" });
+  });
+}
+function setHighlight(i) {
+  const max = flatShades.value.length - 1;
+  if (max < 0) return;
+  highlighted.value = Math.max(0, Math.min(max, i));
+  scrollHighlightedIntoView();
+}
+function onKeydown(e) {
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      setHighlight(highlighted.value < 0 ? 0 : highlighted.value + COLS);
+      break;
+    case "ArrowUp":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      if (highlighted.value < COLS) {
+        highlighted.value = -1;
+        searchInput.value?.$el?.querySelector("input")?.focus();
+      } else {
+        setHighlight(highlighted.value - COLS);
+      }
+      break;
+    case "ArrowRight":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value + 1);
+      break;
+    case "ArrowLeft":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value - 1);
+      break;
+    case "Home":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(0);
+      break;
+    case "End":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(flatShades.value.length - 1);
+      break;
+    case "Enter": {
+      const idx = highlighted.value >= 0 ? highlighted.value : 0;
+      const shade = flatShades.value[idx];
+      if (shade) {
+        e.preventDefault();
+        selectHex(shade.hex);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      emit("update:open", false);
+      break;
+  }
+}
 const searchInput = ref(null);
 watch(() => props.open, async (open) => {
   if (open) {
+    highlighted.value = -1;
     await nextTick();
     searchInput.value?.$el?.querySelector("input")?.focus();
   }
@@ -33,7 +115,10 @@ watch(() => props.open, async (open) => {
   >
     <slot />
     <template #content>
-      <div class="w-80 p-2 flex flex-col gap-2">
+      <div
+        class="w-80 p-2 flex flex-col gap-2"
+        @keydown="onKeydown"
+      >
         <UInput
           ref="searchInput"
           v-model="search"
@@ -41,9 +126,12 @@ watch(() => props.open, async (open) => {
           placeholder="Search colors..."
           icon="i-lucide-search"
         />
-        <div class="max-h-64 overflow-y-auto flex flex-col gap-1.5">
+        <div
+          ref="scrollContainer"
+          class="max-h-64 overflow-y-auto flex flex-col gap-1.5"
+        >
           <div
-            v-for="palette in filteredPalettes"
+            v-for="palette in paletteGroups"
             :key="palette.name"
           >
             <p class="text-xs text-(--ui-text-muted) mb-0.5 capitalize">
@@ -51,13 +139,17 @@ watch(() => props.open, async (open) => {
             </p>
             <div class="grid grid-cols-11 gap-0.5">
               <UTooltip
-                v-for="shade in palette.shades"
+                v-for="(shade, shadeIdx) in palette.shades"
                 :key="shade.shade"
                 :text="`${palette.name}-${shade.shade}`"
               >
                 <button
+                  :data-idx="palette.start + shadeIdx"
                   class="size-5 rounded-sm cursor-pointer transition-transform hover:scale-110"
-                  :class="modelValue === shade.hex ? 'ring-2 ring-offset-1 ring-(--ui-color-neutral-900) dark:ring-(--ui-color-neutral-100) scale-110' : ''"
+                  :class="[
+  modelValue === shade.hex ? 'ring-2 ring-offset-1 ring-(--ui-color-neutral-900) dark:ring-(--ui-color-neutral-100) scale-110' : '',
+  highlighted === palette.start + shadeIdx ? 'ring-2 ring-(--ui-primary) scale-110' : ''
+]"
                   :style="{ background: shade.hex }"
                   @click="selectHex(shade.hex)"
                 />

package/dist/runtime/components/editor/AIconPickerPopover.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 import { LUCIDE_ICON_NAMES } from "../../utils/lucideIcons";
 const BATCH_SIZE = 80;
+const COLS = 8;
 const props = defineProps({
   modelValue: { type: String, required: true },
   open: { type: Boolean, required: true },
@@ -12,6 +13,7 @@ const search = ref("");
 const loadedCount = ref(BATCH_SIZE);
 const sentinel = ref(null);
 const scrollContainer = ref(null);
+const highlighted = ref(-1);
 const sourceIcons = computed(
   () => props.options?.length ? props.options : LUCIDE_ICON_NAMES
 );
@@ -26,6 +28,7 @@ const visibleIcons = computed(
 const hasMore = computed(() => loadedCount.value < filteredIcons.value.length);
 watch(search, () => {
   loadedCount.value = BATCH_SIZE;
+  highlighted.value = -1;
   scrollContainer.value?.scrollTo(0, 0);
 });
 let observer = null;
@@ -47,6 +50,7 @@ watch(() => props.open, async (open) => {
   if (open) {
     loadedCount.value = BATCH_SIZE;
     search.value = "";
+    highlighted.value = -1;
     await nextTick();
     searchInput.value?.$el?.querySelector("input")?.focus();
     await nextTick();
@@ -60,6 +64,73 @@ function selectIcon(name) {
   emit("update:modelValue", name);
   emit("update:open", false);
 }
+function scrollHighlightedIntoView() {
+  nextTick(() => {
+    scrollContainer.value?.querySelector(`[data-idx="${highlighted.value}"]`)?.scrollIntoView({ block: "nearest" });
+  });
+}
+function setHighlight(i) {
+  const max = visibleIcons.value.length - 1;
+  if (max < 0) return;
+  if (i > max && hasMore.value) {
+    loadedCount.value += BATCH_SIZE;
+    nextTick(() => setHighlight(i));
+    return;
+  }
+  highlighted.value = Math.max(0, Math.min(max, i));
+  scrollHighlightedIntoView();
+}
+function onKeydown(e) {
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      setHighlight(highlighted.value < 0 ? 0 : highlighted.value + COLS);
+      break;
+    case "ArrowUp":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      if (highlighted.value < COLS) {
+        highlighted.value = -1;
+        searchInput.value?.$el?.querySelector("input")?.focus();
+      } else {
+        setHighlight(highlighted.value - COLS);
+      }
+      break;
+    case "ArrowRight":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value + 1);
+      break;
+    case "ArrowLeft":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(highlighted.value - 1);
+      break;
+    case "Home":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(0);
+      break;
+    case "End":
+      if (highlighted.value < 0) return;
+      e.preventDefault();
+      setHighlight(visibleIcons.value.length - 1);
+      break;
+    case "Enter": {
+      const idx = highlighted.value >= 0 ? highlighted.value : 0;
+      const name = visibleIcons.value[idx];
+      if (name) {
+        e.preventDefault();
+        selectIcon(name);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      emit("update:open", false);
+      break;
+  }
+}
 const searchInput = ref(null);
 </script>
 
@@ -71,7 +142,10 @@ const searchInput = ref(null);
   >
     <slot />
     <template #content>
-      <div class="w-72 p-2 flex flex-col gap-2">
+      <div
+        class="w-72 p-2 flex flex-col gap-2"
+        @keydown="onKeydown"
+      >
         <UInput
           ref="searchInput"
           v-model="search"
@@ -85,13 +159,17 @@ const searchInput = ref(null);
         >
           <div class="grid grid-cols-8 gap-0.5">
             <UTooltip
-              v-for="name in visibleIcons"
+              v-for="(name, idx) in visibleIcons"
               :key="name"
               :text="name"
             >
               <button
+                :data-idx="idx"
                 class="size-8 flex items-center justify-center rounded cursor-pointer hover:bg-(--ui-bg-elevated)"
-                :class="modelValue === name ? 'bg-(--ui-bg-accented)' : ''"
+                :class="[
+  modelValue === name ? 'bg-(--ui-bg-accented)' : '',
+  highlighted === idx ? 'ring-2 ring-(--ui-primary)' : ''
+]"
                 @click="selectIcon(name)"
               >
                 <UIcon

package/dist/runtime/components/editor/AMetaNumberStepper.d.vue.ts

@@ -0,0 +1,40 @@
+/**
+ * Edge-flush number stepper. The whole pill IS the control:
+ *  [ label ]  −  ‹value›  +  [ unit ]
+ *  • − / + flush ghost buttons (accent glyphs), press-and-hold to repeat
+ *  • centre value: type to edit, vertical drag (mouse + touch) to scrub
+ *  • scroll wheel to step (Shift = ×10), arrow keys to step (Shift = ×10)
+ *  • value flashes on programmatic change (step / drag / wheel) for feedback
+ */
+type __VLS_Props = {
+    modelValue?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    unit: string;
+    disabled: boolean;
+    modelValue: number | null;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/editor/AMetaNumberStepper.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { computed, ref, onBeforeUnmount } from "vue";
+const props = defineProps({
+  modelValue: { type: [Number, null], required: false, default: void 0 },
+  min: { type: Number, required: false, default: Number.NEGATIVE_INFINITY },
+  max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
+  step: { type: Number, required: false, default: 1 },
+  unit: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const PX_PER_STEP = 8;
+const valueEl = ref(null);
+const focused = ref(false);
+const dragging = ref(false);
+const flash = ref(false);
+const draft = ref("");
+const current = computed(() => typeof props.modelValue === "number" && Number.isFinite(props.modelValue) ? props.modelValue : 0);
+const atMin = computed(() => current.value <= props.min);
+const atMax = computed(() => current.value >= props.max);
+const displayValue = computed(
+  () => focused.value ? draft.value : typeof props.modelValue === "number" ? String(props.modelValue) : ""
+);
+function clamp(n) {
+  return Math.max(props.min, Math.min(props.max, n));
+}
+function pulse() {
+  flash.value = false;
+  requestAnimationFrame(() => {
+    flash.value = true;
+  });
+}
+function commit(n, withFlash = true) {
+  const next = clamp(n);
+  if (next === props.modelValue) return;
+  emit("update:modelValue", next);
+  if (withFlash) pulse();
+}
+function stepBy(dir, multiplier = 1) {
+  if (props.disabled) return;
+  commit(current.value + dir * props.step * multiplier);
+}
+let holdTimer = null;
+let repeatTimer = null;
+function clearHold() {
+  if (holdTimer) {
+    clearTimeout(holdTimer);
+    holdTimer = null;
+  }
+  if (repeatTimer) {
+    clearInterval(repeatTimer);
+    repeatTimer = null;
+  }
+  window.removeEventListener("pointerup", clearHold);
+}
+function onStepPress(dir) {
+  if (props.disabled) return;
+  stepBy(dir);
+  holdTimer = setTimeout(() => {
+    repeatTimer = setInterval(() => stepBy(dir), 60);
+  }, 400);
+  window.addEventListener("pointerup", clearHold, { once: true });
+}
+function onWheel(e) {
+  if (props.disabled) return;
+  const dir = -Math.sign(e.deltaY);
+  if (!dir) return;
+  stepBy(dir, e.shiftKey ? 10 : 1);
+}
+let dragStartY = 0;
+let dragStartVal = 0;
+let moved = false;
+function onValuePointerDown(e) {
+  if (props.disabled) return;
+  dragStartY = e.clientY;
+  dragStartVal = current.value;
+  moved = false;
+  window.addEventListener("pointermove", onValuePointerMove);
+  window.addEventListener("pointerup", onValuePointerUp, { once: true });
+}
+function onValuePointerMove(e) {
+  const dy = dragStartY - e.clientY;
+  if (!moved && Math.abs(dy) < 4) return;
+  if (!moved) {
+    moved = true;
+    dragging.value = true;
+    valueEl.value?.blur();
+  }
+  e.preventDefault();
+  const steps = Math.round(dy / PX_PER_STEP);
+  commit(dragStartVal + steps * props.step);
+}
+function onValuePointerUp() {
+  window.removeEventListener("pointermove", onValuePointerMove);
+  dragging.value = false;
+  if (!moved) {
+    valueEl.value?.focus();
+    valueEl.value?.select();
+  }
+}
+function onFocus() {
+  focused.value = true;
+  draft.value = typeof props.modelValue === "number" ? String(props.modelValue) : "";
+}
+function onInput(e) {
+  draft.value = e.target.value;
+  const trimmed = draft.value.trim();
+  if (trimmed === "") return;
+  const n = Number(trimmed);
+  if (Number.isFinite(n)) commit(n, false);
+}
+function onBlur() {
+  focused.value = false;
+  const trimmed = draft.value.trim();
+  if (trimmed === "") {
+    if (props.modelValue !== void 0) emit("update:modelValue", void 0);
+    return;
+  }
+  const n = Number(trimmed);
+  if (Number.isFinite(n)) commit(n, false);
+}
+function onKeydown(e) {
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    stepBy(1, e.shiftKey ? 10 : 1);
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    stepBy(-1, e.shiftKey ? 10 : 1);
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    valueEl.value?.blur();
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    draft.value = typeof props.modelValue === "number" ? String(props.modelValue) : "";
+    valueEl.value?.blur();
+  }
+}
+onBeforeUnmount(() => {
+  clearHold();
+  window.removeEventListener("pointermove", onValuePointerMove);
+});
+</script>
+
+<template>
+  <div
+    class="meta-number-stepper flex items-center h-7 rounded-md border border-(--ui-border) text-sm overflow-hidden select-none transition-shadow"
+    :class="{
+  'opacity-60 pointer-events-none': disabled,
+  'ring-1 ring-(--ui-primary) ring-inset': dragging || focused
+}"
+    @mousedown.stop
+    @touchstart.stop
+    @wheel.prevent="onWheel"
+  >
+    <span
+      v-if="$slots.label"
+      class="pl-2.5 pr-1 shrink-0 flex items-center"
+    >
+      <slot name="label" />
+    </span>
+
+    <button
+      type="button"
+      tabindex="-1"
+      class="h-full px-2 flex items-center justify-center text-(--ui-primary) hover:bg-(--ui-bg-elevated) active:scale-90 transition-transform disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
+      :disabled="disabled || atMin"
+      aria-label="Decrease"
+      @pointerdown.stop.prevent="onStepPress(-1)"
+    >
+      <UIcon
+        name="i-lucide-minus"
+        class="size-3.5"
+      />
+    </button>
+
+    <input
+      ref="valueEl"
+      type="text"
+      inputmode="decimal"
+      class="meta-number-value flex-1 min-w-0 w-10 bg-transparent text-center outline-none tabular-nums cursor-ns-resize"
+      :class="{ 'meta-number-value--flash': flash }"
+      :value="displayValue"
+      :disabled="disabled"
+      @pointerdown="onValuePointerDown"
+      @focus="onFocus"
+      @blur="onBlur"
+      @input="onInput"
+      @keydown="onKeydown"
+    >
+
+    <button
+      type="button"
+      tabindex="-1"
+      class="h-full px-2 flex items-center justify-center text-(--ui-primary) hover:bg-(--ui-bg-elevated) active:scale-90 transition-transform disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
+      :disabled="disabled || atMax"
+      aria-label="Increase"
+      @pointerdown.stop.prevent="onStepPress(1)"
+    >
+      <UIcon
+        name="i-lucide-plus"
+        class="size-3.5"
+      />
+    </button>
+
+    <span
+      v-if="unit"
+      class="pr-2.5 pl-0.5 shrink-0 text-(--ui-text-muted) text-xs"
+    >{{ unit }}</span>
+  </div>
+</template>
+
+<style scoped>
+.meta-number-value{touch-action:none}.meta-number-value::-webkit-inner-spin-button,.meta-number-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.meta-number-value--flash{animation:meta-number-flash .22s ease-out}@keyframes meta-number-flash{0%{color:var(--ui-primary);transform:scale(1.22)}to{color:inherit;transform:scale(1)}}
+</style>