@abraca/nuxt 2.14.0 → 2.16.0

package/dist/runtime/components/settings/APluginsTabPending.vue.d.ts

@@ -0,0 +1,24 @@
+import type { PluginManifest } from '@abraca/plugin';
+export interface PendingSpacePluginEntry {
+    /** Plugin id from the manifest. */
+    id: string;
+    /** Resolved bundle URL. */
+    url: string;
+    /** Version, when the space-plugins map records one. */
+    version?: string;
+    /** Resolved manifest, when the URL exposed a sibling JSON. */
+    manifest?: PluginManifest;
+}
+type __VLS_Props = {
+    /**
+     * Space-declared plugins that did NOT auto-load (not in registry).
+     * Pre-filtered by the host's space-plugins watcher. When omitted, the
+     * tab shows the empty-state explainer.
+     */
+    declared?: readonly PendingSpacePluginEntry[];
+    /** Active space id. Required for decline persistence to be per-space. */
+    spaceId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsPluginsPanel.d.vue.ts

@@ -1,3 +1,16 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface BuiltinPluginEntry {
+    name: string;
+    label?: string;
+    version?: string;
+    description?: string;
+    icon?: string;
+}
+type __VLS_Props = {
+    /** Host-registered first-party plugins; toggle state lives in localStorage. */
+    builtins?: readonly BuiltinPluginEntry[];
+    /** Initial tab. */
+    initialTab?: 'browse' | 'installed' | 'pending';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/settings/ASettingsPluginsPanel.vue

@@ -1,96 +1,50 @@
 <script setup>
-import { computed } from "vue";
-import { usePluginRegistry } from "../../composables/usePluginRegistry";
-const registry = usePluginRegistry();
-const pluginList = computed(
-  () => registry.getPlugins().map((p) => ({
-    name: p.name,
-    description: p.description ?? "",
-    icon: p.icon ?? "i-lucide-plug",
-    hasExtensions: !!p.extensions?.length,
-    hasPageTypes: !!p.pageTypes?.length,
-    hasToolbar: !!p.toolbarItems?.length,
-    hasSuggestions: !!p.suggestionItems?.length
-  }))
+import { computed, ref } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+const props = defineProps({
+  builtins: { type: Array, required: false },
+  initialTab: { type: String, required: false }
+});
+const tab = ref(props.initialTab ?? "installed");
+const builtins = computed(() => props.builtins ?? []);
+const abra = useAbracadabra();
+const serverUrl = computed(
+  () => abra.currentServerUrl?.value || void 0
 );
+const tabItems = computed(() => [
+  { label: "Browse", value: "browse", icon: "i-lucide-store" },
+  { label: "Installed", value: "installed", icon: "i-lucide-package" },
+  { label: "Pending", value: "pending", icon: "i-lucide-hourglass" }
+]);
 </script>
 
 <template>
-  <div>
-    <div class="mb-4">
+  <div class="flex flex-col gap-4 max-w-3xl">
+    <div>
       <h3 class="text-base font-semibold">
         Plugins
       </h3>
       <p class="text-sm text-(--ui-text-muted) mt-1">
-        Installed plugins extending the editor and platform.
+        Browse the registry, manage installed plugins, and review what the active space is asking to load.
       </p>
     </div>
 
-    <div class="flex flex-col gap-2">
-      <div
-        v-for="plugin in pluginList"
-        :key="plugin.name"
-        class="flex items-center gap-3 p-3 rounded-lg border border-(--ui-border)"
-      >
-        <UIcon
-          :name="plugin.icon"
-          class="size-5 text-(--ui-text-muted) shrink-0"
-        />
-        <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium">
-            {{ plugin.name }}
-          </p>
-          <p
-            v-if="plugin.description"
-            class="text-xs text-(--ui-text-muted) mt-0.5"
-          >
-            {{ plugin.description }}
-          </p>
-          <div class="flex flex-wrap gap-1 mt-1">
-            <UBadge
-              v-if="plugin.hasExtensions"
-              color="info"
-              variant="subtle"
-              label="Extensions"
-              size="xs"
-            />
-            <UBadge
-              v-if="plugin.hasPageTypes"
-              color="success"
-              variant="subtle"
-              label="Page Types"
-              size="xs"
-            />
-            <UBadge
-              v-if="plugin.hasToolbar"
-              color="warning"
-              variant="subtle"
-              label="Toolbar"
-              size="xs"
-            />
-            <UBadge
-              v-if="plugin.hasSuggestions"
-              color="neutral"
-              variant="subtle"
-              label="Suggestions"
-              size="xs"
-            />
-          </div>
-        </div>
-      </div>
+    <UTabs
+      v-model="tab"
+      :items="tabItems"
+      :ui="{ list: 'w-fit' }"
+    />
 
-      <div
-        v-if="pluginList.length === 0"
-        class="flex flex-col items-center justify-center py-12"
-      >
-        <UIcon
-          name="i-lucide-plug"
-          class="size-10 text-(--ui-text-dimmed) mb-3"
-        />
-        <p class="text-sm text-(--ui-text-muted)">
-          No plugins installed.
-        </p>
-      </div>
+    <div v-if="tab === 'browse'" class="min-h-[24rem]">
+      <APluginBrowser :server-url="serverUrl" />
+    </div>
+
+    <div v-else-if="tab === 'installed'">
+      <APluginsTabInstalled :builtins="builtins" />
+    </div>
+
+    <div v-else-if="tab === 'pending'">
+      <APluginsTabPending />
     </div>
   </div>
 </template>

package/dist/runtime/components/settings/ASettingsPluginsPanel.vue.d.ts

@@ -1,3 +1,16 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface BuiltinPluginEntry {
+    name: string;
+    label?: string;
+    version?: string;
+    description?: string;
+    icon?: string;
+}
+type __VLS_Props = {
+    /** Host-registered first-party plugins; toggle state lives in localStorage. */
+    builtins?: readonly BuiltinPluginEntry[];
+    /** Initial tab. */
+    initialTab?: 'browse' | 'installed' | 'pending';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,7 @@
+export declare function useDeclinedSpacePlugins(): {
+    declined: import("@vueuse/shared").RemovableRef<Record<string, string[]>>;
+    isDeclined: (spaceId: string, pluginId: string) => boolean;
+    decline: (spaceId: string, pluginId: string) => void;
+    reset: (spaceId: string, pluginId: string) => void;
+    clearSpace: (spaceId: string) => void;
+};

package/dist/runtime/composables/useDeclinedSpacePlugins.js

@@ -0,0 +1,24 @@
+import { useLocalStorage } from "@vueuse/core";
+const STORAGE_KEY = "abracadabra_declined_space_plugins";
+export function useDeclinedSpacePlugins() {
+  const declined = useLocalStorage(STORAGE_KEY, {});
+  function isDeclined(spaceId, pluginId) {
+    return (declined.value[spaceId] ?? []).includes(pluginId);
+  }
+  function decline(spaceId, pluginId) {
+    const cur = declined.value[spaceId] ?? [];
+    if (cur.includes(pluginId)) return;
+    declined.value = { ...declined.value, [spaceId]: [...cur, pluginId] };
+  }
+  function reset(spaceId, pluginId) {
+    const cur = declined.value[spaceId] ?? [];
+    if (!cur.includes(pluginId)) return;
+    declined.value = { ...declined.value, [spaceId]: cur.filter((id) => id !== pluginId) };
+  }
+  function clearSpace(spaceId) {
+    if (!declined.value[spaceId]) return;
+    const { [spaceId]: _, ...rest } = declined.value;
+    declined.value = rest;
+  }
+  return { declined, isDeclined, decline, reset, clearSpace };
+}

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

@@ -0,0 +1,29 @@
+import type { PluginCapability } from '@abraca/plugin';
+export interface LoadTimePendingEntry {
+    /** Installed-entry URL (also the join key against `useInstalledPlugins`). */
+    url: string;
+    /** Plugin id from the freshly-fetched manifest. */
+    id: string;
+    /** Version we just observed upstream — DIFFERS from `acknowledgedVersion`. */
+    observedVersion: string;
+    /** Required capabilities currently declared upstream. */
+    observedRequired: PluginCapability[];
+    /**
+     * Why we queued — `"version-changed"`, `"capabilities-grew"`, or
+     * `"never-acknowledged"`. Drives the dialog header copy on review.
+     */
+    reason: 'version-changed' | 'capabilities-grew' | 'never-acknowledged';
+    /** Wall-clock when the loader queued this entry. */
+    queuedAt: number;
+}
+/** Loader-side: enqueue or replace an entry. Idempotent on `url`. */
+export declare function _enqueueLoadTimePending(entry: LoadTimePendingEntry): void;
+/** Loader / tab-side: drop an entry once the user re-acks or removes it. */
+export declare function _clearLoadTimePending(url: string): void;
+/** Loader-side: read once at boot to know what was previously queued. */
+export declare function _readLoadTimePending(): LoadTimePendingEntry[];
+export declare function useLoadTimePending(): {
+    entries: import("@vueuse/shared").RemovableRef<LoadTimePendingEntry[]>;
+    clear: (url: string) => void;
+    clearAll: () => void;
+};

package/dist/runtime/composables/useLoadTimePending.js

@@ -0,0 +1,37 @@
+import { useLocalStorage } from "@vueuse/core";
+const STORAGE_KEY = "abracadabra_load_time_pending";
+function read() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");
+  } catch {
+    return [];
+  }
+}
+function write(list) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+  } catch {
+  }
+}
+export function _enqueueLoadTimePending(entry) {
+  const list = read().filter((e) => e.url !== entry.url);
+  list.push(entry);
+  write(list);
+}
+export function _clearLoadTimePending(url) {
+  const list = read().filter((e) => e.url !== url);
+  write(list);
+}
+export function _readLoadTimePending() {
+  return read();
+}
+export function useLoadTimePending() {
+  const entries = useLocalStorage(STORAGE_KEY, []);
+  function clear(url) {
+    entries.value = entries.value.filter((e) => e.url !== url);
+  }
+  function clearAll() {
+    entries.value = [];
+  }
+  return { entries, clear, clearAll };
+}

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

@@ -1,4 +1,4 @@
-import type { PluginManifest, PluginCapability } from '@abraca/plugin';
+import type { PluginManifest, PluginCapability, ExternalPluginEntry } from '@abraca/plugin';
 export interface CatalogPlugin {
     id: string;
     name: string | null;
@@ -138,6 +138,10 @@ export declare function usePluginCatalog(): {
         required: PluginCapability[];
         optional: PluginCapability[];
     };
+    capabilitiesGrew: (prevAcked: readonly PluginCapability[] | undefined, currentRequired: readonly PluginCapability[]) => PluginCapability[];
+    needsTrustReprompt: (entry: Pick<ExternalPluginEntry, "trustAcknowledgedAt" | "acknowledgedVersion" | "acknowledgedCapabilities">, manifest: Pick<PluginManifest, "version" | "capabilities">) => boolean;
+    resolveExternalManifest: (bundleUrl: string) => Promise<PluginManifest | null>;
+    synthesizeUnknownManifest: (idOrUrl: string, version?: string) => PluginManifest;
     /** Current server policy. `null` until `loadPolicy()` resolves. */
     policy: import("vue").Ref<{
         registry_url: string;

package/dist/runtime/composables/usePluginCatalog.js

@@ -163,6 +163,36 @@ export function usePluginCatalog() {
       optional: [...m.capabilities.optional ?? []]
     };
   }
+  function capabilitiesGrew(prevAcked, currentRequired) {
+    const acked = new Set(prevAcked ?? []);
+    return currentRequired.filter((c) => !acked.has(c));
+  }
+  async function resolveExternalManifest(bundleUrl) {
+    try {
+      const manifestUrl = bundleUrl.replace(/\/[^/]+$/, (m2) => `${m2.replace(/\.[^.]+$/, "")}.manifest.json`);
+      const m = await $fetch(manifestUrl);
+      if (m && typeof m === "object" && typeof m.id === "string") return m;
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  function synthesizeUnknownManifest(idOrUrl, version = "0.0.0") {
+    const m = {
+      manifestVersion: 1,
+      id: idOrUrl,
+      version,
+      capabilities: { required: [], optional: [] },
+      contributes: {}
+    };
+    return m;
+  }
+  function needsTrustReprompt(entry, manifest) {
+    if (!entry.trustAcknowledgedAt) return true;
+    if (entry.acknowledgedVersion !== manifest.version) return true;
+    const required = manifest.capabilities.required ?? [];
+    return capabilitiesGrew(entry.acknowledgedCapabilities, required).length > 0;
+  }
   async function loadPolicy(serverUrl) {
     const url = `${serverUrl.replace(/\/$/, "")}/plugins/policy`;
     const fetched = await $fetch(url);
@@ -200,6 +230,10 @@ export function usePluginCatalog() {
     installFromUrl,
     isInstalled,
     capabilitiesFor,
+    capabilitiesGrew,
+    needsTrustReprompt,
+    resolveExternalManifest,
+    synthesizeUnknownManifest,
     /** Current server policy. `null` until `loadPolicy()` resolves. */
     policy,
     loadPolicy,

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/composables/useUploadedPluginStore.d.ts

@@ -0,0 +1,43 @@
+/**
+ * `useUploadedPluginStore()` — IndexedDB-backed storage for plugin bundles
+ * the user uploaded directly (Upload button on the Installed tab). Keys
+ * are the SHA-256 of the bundle bytes; values are the bytes + MIME.
+ *
+ * The plugin loader (`plugin-abracadabra.client.ts`) recognises URLs of
+ * the form `idb-plugin:<sha256>` and resolves them by reading bytes from
+ * here, wrapping in a fresh `Blob`, and creating a `blob:` URL for
+ * `import()`. Blob URLs are session-scoped, so the bytes have to live in
+ * IDB to survive reload.
+ *
+ * Internal helpers (`_*`) are used by the loader. Public API is the
+ * composable for components.
+ */
+interface StoredBundle {
+    sha256: string;
+    bytes: Uint8Array;
+    mime: string;
+    uploadedAt: number;
+}
+/** Store an uploaded bundle by its SHA-256 hex. Idempotent. */
+export declare function _putUploadedPluginBlob(sha256: string, bytes: Uint8Array, mime?: string): Promise<void>;
+/** Read an uploaded bundle. Returns `null` when the key is unknown. */
+export declare function _getUploadedPluginBlob(sha256: string): Promise<StoredBundle | null>;
+/** Delete an uploaded bundle. Used by `uninstall()` for upload-origin entries. */
+export declare function _deleteUploadedPluginBlob(sha256: string): Promise<void>;
+/**
+ * Resolve an `idb-plugin:<sha256>` URL to a session-scoped `blob:` URL
+ * suitable for dynamic `import()`. Returns `null` when the sha256 isn't
+ * found — the loader treats that as a missing-bundle error.
+ */
+export declare function _resolveIdbPluginUrl(idbUrl: string): Promise<string | null>;
+/**
+ * Composable surface — read-only for components. Components write via
+ * `<APluginsTabInstalled>`'s upload handler which calls
+ * `_putUploadedPluginBlob` directly.
+ */
+export declare function useUploadedPluginStore(): {
+    get: typeof _getUploadedPluginBlob;
+    delete: typeof _deleteUploadedPluginBlob;
+    resolveUrl: typeof _resolveIdbPluginUrl;
+};
+export {};

package/dist/runtime/composables/useUploadedPluginStore.js

@@ -0,0 +1,66 @@
+const DB_NAME = "abracadabra_uploaded_plugins";
+const STORE_NAME = "bundles";
+const DB_VERSION = 1;
+let _dbPromise = null;
+function getDb() {
+  if (_dbPromise) return _dbPromise;
+  _dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "sha256" });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+  return _dbPromise;
+}
+export async function _putUploadedPluginBlob(sha256, bytes, mime = "text/javascript") {
+  const db = await getDb();
+  await new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    const record = { sha256, bytes, mime, uploadedAt: Date.now() };
+    const req = store.put(record);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+export async function _getUploadedPluginBlob(sha256) {
+  const db = await getDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.get(sha256);
+    req.onsuccess = () => resolve(req.result ?? null);
+    req.onerror = () => reject(req.error);
+  });
+}
+export async function _deleteUploadedPluginBlob(sha256) {
+  const db = await getDb();
+  await new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.delete(sha256);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+export async function _resolveIdbPluginUrl(idbUrl) {
+  const prefix = "idb-plugin:";
+  if (!idbUrl.startsWith(prefix)) return null;
+  const sha = idbUrl.slice(prefix.length);
+  const record = await _getUploadedPluginBlob(sha);
+  if (!record) return null;
+  const blob = new Blob([new Uint8Array(record.bytes)], { type: record.mime });
+  return URL.createObjectURL(blob);
+}
+export function useUploadedPluginStore() {
+  return {
+    get: _getUploadedPluginBlob,
+    delete: _deleteUploadedPluginBlob,
+    resolveUrl: _resolveIdbPluginUrl
+  };
+}

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 ─────────────────────────────────────────────────────────── -->