@abraca/nuxt 2.14.0 → 2.15.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "2.14.0",
+  "version": "2.15.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/AMedia.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    controls: boolean;
     total: boolean;
+    controls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    controls: boolean;
     total: boolean;
+    controls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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>

package/dist/runtime/components/editor/AMetaNumberStepper.vue.d.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/renderers/ACalendarRenderer.vue

@@ -80,7 +80,13 @@ function onCreateEvent(payload) {
   }
 }
 const dragPreviewTime = ref(null);
+const bodyRef = ref(null);
 const { dragId, dragOverContainer, handlePointerDown } = useTouchDrag({
+  edgeNav: {
+    el: bodyRef,
+    onPrev: () => cal.prevPeriod(),
+    onNext: () => cal.nextPeriod()
+  },
   onMoveToContainer: (eventId, dateStr) => {
     if (!props.editable) return;
     const entry = tree.entries.value.find((e) => e.id === eventId);
@@ -204,7 +210,7 @@ defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="flex-1 min-h-0 flex flex-col relative">
+  <div ref="bodyRef" class="flex-1 min-h-0 flex flex-col relative">
     <!-- Toolbar -->
     <ACalendarToolbar
       :view-mode="cal.viewMode.value"

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.d.vue.ts

@@ -20,16 +20,16 @@ type __VLS_Props = {
     };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
     next: () => any;
     "update:viewMode": (mode: CalendarViewMode) => any;
-    prev: () => any;
     today: () => any;
     "add-event": () => any;
     "navigate-to-month": (year: number, month: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
-    onPrev?: (() => any) | undefined;
     onToday?: (() => any) | undefined;
     "onAdd-event"?: (() => any) | undefined;
     "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.vue.d.ts

@@ -20,16 +20,16 @@ type __VLS_Props = {
     };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
     next: () => any;
     "update:viewMode": (mode: CalendarViewMode) => any;
-    prev: () => any;
     today: () => any;
     "add-event": () => any;
     "navigate-to-month": (year: number, month: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
-    onPrev?: (() => any) | undefined;
     onToday?: (() => any) | undefined;
     "onAdd-event"?: (() => any) | undefined;
     "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;

package/dist/runtime/components/renderers/media/MediaTransportBar.d.vue.ts

@@ -8,13 +8,13 @@ type __VLS_Props = {
     isLoading: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    next: () => any;
     prev: () => any;
+    next: () => any;
     togglePlay: () => any;
     seek: (position: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onNext?: (() => any) | undefined;
     onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
     onTogglePlay?: (() => any) | undefined;
     onSeek?: ((position: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/renderers/media/MediaTransportBar.vue.d.ts

@@ -8,13 +8,13 @@ type __VLS_Props = {
     isLoading: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    next: () => any;
     prev: () => any;
+    next: () => any;
     togglePlay: () => any;
     seek: (position: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onNext?: (() => any) | undefined;
     onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
     onTogglePlay?: (() => any) | undefined;
     onSeek?: ((position: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/composables/useTouchDrag.d.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'vue';
 /**
  * Mobile-compatible drag & drop using pointer events.
  * Works on both touch and mouse devices, replacing HTML5 DragEvent handlers.
@@ -26,11 +27,27 @@ export declare function useTouchDrag(opts: {
     idAttr?: string;
     /** Data attribute name for containers (default: 'data-drop-container') */
     containerAttr?: string;
+    /**
+     * Navigate by range (prev/next) when the drag ghost dwells near the
+     * horizontal edges of `el` — e.g. a calendar dragging an event to the left
+     * edge steps to the previous period. Fires on a repeating interval while held
+     * at the edge, so a quick pass-through (or a drop on an edge cell) doesn't
+     * trigger it; resets the moment the pointer leaves the edge zone.
+     */
+    edgeNav?: {
+        el: Ref<HTMLElement | null>;
+        onPrev: () => void;
+        onNext: () => void;
+        /** px from the edge that counts as "at the edge" (default 48) */
+        threshold?: number;
+        /** ms between repeated nav steps while held at an edge (default 700) */
+        intervalMs?: number;
+    };
 }): {
-    dragId: import("vue").Ref<string | null, string | null>;
-    dragOverId: import("vue").Ref<string | null, string | null>;
-    dragOverContainer: import("vue").Ref<string | null, string | null>;
-    isDragging: import("vue").Ref<boolean, boolean>;
+    dragId: Ref<string | null, string | null>;
+    dragOverId: Ref<string | null, string | null>;
+    dragOverContainer: Ref<string | null, string | null>;
+    isDragging: Ref<boolean, boolean>;
     handlePointerDown: (e: PointerEvent, id: string) => void;
     cancel: () => void;
 };

package/dist/runtime/composables/useTouchDrag.js

@@ -7,6 +7,33 @@ export function useTouchDrag(opts) {
   const dragOverId = ref(null);
   const dragOverContainer = ref(null);
   const isDragging = ref(false);
+  let edgeNavTimer = null;
+  let edgeNavDir = null;
+  function clearEdgeNav() {
+    if (edgeNavTimer) {
+      clearInterval(edgeNavTimer);
+      edgeNavTimer = null;
+    }
+    edgeNavDir = null;
+  }
+  function handleEdgeNav(clientX) {
+    const cfg = opts.edgeNav;
+    const el = cfg?.el.value;
+    if (!cfg || !el) return;
+    const rect = el.getBoundingClientRect();
+    const threshold = cfg.threshold ?? 48;
+    let dir = null;
+    if (clientX <= rect.left + threshold) dir = "prev";
+    else if (clientX >= rect.right - threshold) dir = "next";
+    if (dir === edgeNavDir) return;
+    clearEdgeNav();
+    if (!dir) return;
+    edgeNavDir = dir;
+    edgeNavTimer = setInterval(() => {
+      if (edgeNavDir === "prev") cfg.onPrev();
+      else if (edgeNavDir === "next") cfg.onNext();
+    }, cfg.intervalMs ?? 700);
+  }
   let startX = 0;
   let startY = 0;
   let delayTimer = null;
@@ -131,6 +158,7 @@ export function useTouchDrag(opts) {
       opts.onMoveOverContainer(dragId.value, container, e);
     }
     autoScroll(e.clientY);
+    handleEdgeNav(e.clientX);
   }
   function autoScroll(clientY) {
     const threshold = 60;
@@ -143,6 +171,7 @@ export function useTouchDrag(opts) {
   }
   function onDocPointerUp() {
     cancelPending();
+    clearEdgeNav();
     document.removeEventListener("pointermove", onDocPointerMove);
     document.removeEventListener("pointerup", onDocPointerUp);
     document.removeEventListener("pointercancel", onDocPointerUp);
@@ -175,6 +204,7 @@ export function useTouchDrag(opts) {
     dragOverContainer.value = null;
     isDragging.value = false;
     pendingId = null;
+    clearEdgeNav();
     if (delayTimer) {
       clearTimeout(delayTimer);
       delayTimer = null;

package/dist/runtime/extensions/views/MetaFieldView.vue

@@ -4,6 +4,7 @@ import { NodeViewWrapper } from "@tiptap/vue-3";
 import AColorPalettePopover from "../../components/editor/AColorPalettePopover.vue";
 import AIconPickerPopover from "../../components/editor/AIconPickerPopover.vue";
 import ALocationPickerPopover from "../../components/editor/ALocationPickerPopover.vue";
+import AMetaNumberStepper from "../../components/editor/AMetaNumberStepper.vue";
 import { useAbraLocale } from "../../composables/useAbraLocale";
 import {
   DateFormatter,
@@ -62,6 +63,8 @@ const sliderMin = computed(() => props.node.attrs.sliderMin ?? 0);
 const sliderMax = computed(() => props.node.attrs.sliderMax ?? 100);
 const sliderStep = computed(() => props.node.attrs.sliderStep ?? 1);
 const unit = computed(() => props.node.attrs.unit ?? "");
+const numMin = computed(() => props.node.attrs.sliderMin);
+const numMax = computed(() => props.node.attrs.sliderMax);
 function getStr(key) {
   return storage()?.pageMeta?.[key] ?? "";
 }
@@ -239,16 +242,6 @@ function onRatingWheel(e) {
   const next = Math.max(0, Math.min(max, current + delta));
   if (next !== current) patch({ [metaKey.value]: next });
 }
-function onNumberWheel(e) {
-  const delta = -Math.sign(e.deltaY);
-  if (!delta) return;
-  const step = (sliderStep.value || 1) * (e.shiftKey ? 10 : 1);
-  const current = getNum(metaKey.value);
-  const min = sliderMin.value;
-  const max = sliderMax.value;
-  const next = Math.max(min, Math.min(max, current + delta * step));
-  if (next !== current) patch({ [metaKey.value]: next });
-}
 function onSliderWheel(e) {
   const delta = -Math.sign(e.deltaY);
   if (!delta) return;
@@ -784,13 +777,20 @@ function removeOption(opt) {
 
     <!-- ── number ─────────────────────────────────────────────────────────── -->
     <template v-else-if="fieldType === 'number'">
-      <div
-        class="flex items-center gap-1.5 h-7 px-2.5 border border-(--ui-border) rounded-md text-sm"
-        @mousedown.stop
-        @touchstart.stop
-        @wheel.prevent="onNumberWheel"
+      <AMetaNumberStepper
+        class="min-w-40"
+        :model-value="getOptNum(metaKey)"
+        :min="numMin"
+        :max="numMax"
+        :step="sliderStep"
+        :unit="unit"
+        :disabled="!isEditable"
+        @update:model-value="onNumber"
       >
-        <template v-if="fieldLabel">
+        <template
+          v-if="fieldLabel"
+          #label
+        >
           <input
             v-if="editingLabel"
             ref="labelInputEl"
@@ -807,18 +807,7 @@ function removeOption(opt) {
             @click.stop="startEditLabel"
           >{{ fieldLabel }}</span>
         </template>
-        <UInputNumber
-          size="xs"
-          :model-value="getOptNum(metaKey)"
-          :step="sliderStep"
-          class="max-w-32"
-          @update:model-value="onNumber"
-        />
-        <span
-          v-if="unit"
-          class="text-(--ui-text-muted) shrink-0 text-xs"
-        >{{ unit }}</span>
-      </div>
+      </AMetaNumberStepper>
     </template>
 
     <!-- ── toggle ─────────────────────────────────────────────────────────── -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",