@abraca/nuxt 0.1.1 → 0.3.0

package/dist/runtime/components/renderers/ATimelineRenderer.vue

@@ -0,0 +1,446 @@
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { DEFAULT_LOCALE } from "../../locale";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.timeline,
+  ...config.public?.abracadabra?.locale?.renderers?.timeline ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childDoc, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const zoomLevel = ref("month");
+const ZOOM_CONFIG = {
+  week: { totalDays: 14, pixelsPerDay: 40, stepDays: 1 },
+  month: { totalDays: 60, pixelsPerDay: 14, stepDays: 7 },
+  quarter: { totalDays: 180, pixelsPerDay: 4, stepDays: 30 }
+};
+const cfg = computed(() => ZOOM_CONFIG[zoomLevel.value]);
+const epics = computed(() => tree.childrenOf(null));
+function addEpic() {
+  if (!props.editable) return;
+  const id = tree.createChild(null, locale.value.untitled);
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now);
+  end.setDate(end.getDate() + 14);
+  tree.updateMeta(id, {
+    dateStart: now.toISOString().slice(0, 10),
+    dateEnd: end.toISOString().slice(0, 10),
+    taskProgress: 0,
+    color: "#6366f1"
+  });
+}
+function addTask(epicId) {
+  if (!props.editable) return;
+  const id = tree.createChild(epicId, locale.value.untitled);
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now);
+  end.setDate(end.getDate() + 7);
+  tree.updateMeta(id, {
+    dateStart: now.toISOString().slice(0, 10),
+    dateEnd: end.toISOString().slice(0, 10),
+    taskProgress: 0,
+    color: "#818cf8"
+  });
+}
+const startOfAxis = computed(() => {
+  const d = /* @__PURE__ */ new Date();
+  d.setDate(1);
+  d.setMonth(d.getMonth() - 1);
+  return d;
+});
+const axisWidth = computed(() => cfg.value.totalDays * cfg.value.pixelsPerDay);
+function dateToOffset(dateStr) {
+  const d = new Date(dateStr);
+  const diff = Math.floor(
+    (d.getTime() - startOfAxis.value.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  return diff * cfg.value.pixelsPerDay;
+}
+function spanWidth(start, end) {
+  const s = new Date(start);
+  const e = new Date(end);
+  const days = Math.max(
+    1,
+    Math.ceil((e.getTime() - s.getTime()) / (1e3 * 60 * 60 * 24))
+  );
+  return days * cfg.value.pixelsPerDay;
+}
+const axisLabels = computed(() => {
+  const labels = [];
+  for (let i = 0; i < cfg.value.totalDays; i += cfg.value.stepDays) {
+    const d = new Date(startOfAxis.value);
+    d.setDate(d.getDate() + i);
+    const fmt = zoomLevel.value === "week" ? { weekday: "short", day: "numeric" } : { month: "short", day: "numeric" };
+    labels.push({
+      label: d.toLocaleDateString("en-US", fmt),
+      offset: i * cfg.value.pixelsPerDay
+    });
+  }
+  return labels;
+});
+const todayOffset = computed(() => dateToOffset((/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
+function orderBetween(list, targetIdx) {
+  const prev = list[targetIdx - 1];
+  const next = list[targetIdx];
+  if (!prev && !next) return Date.now();
+  if (!prev) return next.order - 1e3;
+  if (!next) return prev.order + 1e3;
+  return (prev.order + next.order) / 2;
+}
+const {
+  dragId: epicDragId,
+  dragOverId: epicDragOver,
+  handlePointerDown: handleEpicPointerDown
+} = useTouchDrag({
+  onDrop: (srcId, targetId) => {
+    if (!props.editable) return;
+    const targetIdx = epics.value.findIndex((ep) => ep.id === targetId);
+    const newOrder = orderBetween(epics.value, targetIdx);
+    tree.moveEntry(srcId, null, newOrder);
+  }
+});
+function taskFocusers(taskId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["timeline:focused"] === taskId
+  );
+}
+function focusTask(id) {
+  setLocalState({ "timeline:focused": id });
+}
+function clearFocus() {
+  setLocalState({ "timeline:focused": null });
+}
+const barDragId = ref(null);
+const barDragStart = ref({ clientX: 0, origStart: "", origEnd: "" });
+const barDidMove = ref(false);
+const barHoverEpicId = ref(null);
+let lastDaysShifted = 0;
+function onBarPointerDown(e, id) {
+  if (!props.editable) return;
+  if (e.button !== 0) return;
+  e.stopPropagation();
+  const entry = tree.entries.value.find((en) => en.id === id);
+  const meta = entry?.meta;
+  if (!meta?.dateStart || !meta?.dateEnd) return;
+  barDragId.value = id;
+  barDidMove.value = false;
+  barHoverEpicId.value = null;
+  lastDaysShifted = 0;
+  barDragStart.value = {
+    clientX: e.clientX,
+    origStart: meta.dateStart,
+    origEnd: meta.dateEnd
+  };
+  e.currentTarget.setPointerCapture(e.pointerId);
+}
+function onBarPointerMove(e, id) {
+  if (barDragId.value !== id) return;
+  const entry = tree.entries.value.find((en) => en.id === id);
+  if (!entry?.meta?.dateStart) return;
+  const dx = e.clientX - barDragStart.value.clientX;
+  if (Math.abs(dx) > 4) barDidMove.value = true;
+  const els = document.elementsFromPoint(e.clientX, e.clientY);
+  const epicEl = els.find((el) => el.dataset?.epicId);
+  barHoverEpicId.value = epicEl?.dataset.epicId ?? null;
+  const daysShifted = Math.round(dx / cfg.value.pixelsPerDay);
+  if (daysShifted === lastDaysShifted) return;
+  lastDaysShifted = daysShifted;
+  const MS = 24 * 60 * 60 * 1e3;
+  const s0 = new Date(barDragStart.value.origStart).getTime();
+  const e0 = new Date(barDragStart.value.origEnd).getTime();
+  tree.updateMeta(id, {
+    dateStart: new Date(s0 + daysShifted * MS).toISOString().slice(0, 10),
+    dateEnd: new Date(e0 + daysShifted * MS).toISOString().slice(0, 10)
+  });
+}
+function onBarPointerUp(id, epicId) {
+  if (barDragId.value !== id) return;
+  barDragId.value = null;
+  if (epicId && barHoverEpicId.value && barHoverEpicId.value !== epicId) {
+    tree.moveEntry(id, barHoverEpicId.value, Date.now());
+  }
+  barHoverEpicId.value = null;
+}
+function onBarClick(id, label) {
+  if (barDidMove.value) return;
+  openNode(id, label);
+}
+watch(childDoc, (doc) => {
+  if (!doc) return;
+  const legacyMap = doc.getMap("task-dates");
+  if (legacyMap.size === 0) return;
+  legacyMap.forEach((val, id) => {
+    if (!tree.treeMap.get(id)?.meta?.dateStart) {
+      tree.updateMeta(id, {
+        dateStart: val.start,
+        dateEnd: val.end,
+        taskProgress: val.progress ?? 0,
+        color: val.color
+      });
+    }
+  });
+  doc.transact(() => {
+    for (const key of [...legacyMap.keys()]) legacyMap.delete(key);
+  });
+}, { immediate: true });
+const containerRef = ref(null);
+function onPointerMove(e) {
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  setLocalState({
+    pos: {
+      x: (e.clientX - rect.left) / rect.width * 100,
+      y: (e.clientY - rect.top) / rect.height * 100
+    }
+  });
+}
+function clearCursor() {
+  setLocalState({ pos: null });
+}
+onBeforeUnmount(() => {
+  setLocalState({ "pos": null, "timeline:focused": null });
+});
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="flex-1 min-h-0 flex flex-col relative"
+    @pointermove="onPointerMove"
+    @pointerleave="clearCursor"
+  >
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <div class="flex gap-1">
+        <UButton
+          v-for="z in ['week', 'month', 'quarter']"
+          :key="z"
+          :label="locale[z]"
+          size="xs"
+          :variant="zoomLevel === z ? 'solid' : 'ghost'"
+          color="neutral"
+          @click="zoomLevel = z"
+        />
+      </div>
+      <UButton
+        v-if="editable"
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="locale.addEpic"
+        @click="addEpic"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-auto">
+      <!-- Empty state -->
+      <div
+        v-if="epics.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
+      >
+        <UIcon
+          name="i-lucide-gantt-chart"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ locale.empty }}
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addEpic"
+          size="sm"
+          @click="addEpic"
+        />
+      </div>
+
+      <div
+        v-else
+        class="flex h-full"
+      >
+        <!-- Label panel -->
+        <div class="w-48 flex-shrink-0 border-r border-(--ui-border) sticky left-0 bg-(--ui-bg) z-10">
+          <div class="h-8 border-b border-(--ui-border)" />
+          <TransitionGroup
+            name="tepic"
+            tag="div"
+          >
+            <div
+              v-for="epic in epics"
+              :key="epic.id"
+            >
+              <button
+                :data-drag-id="epic.id"
+                class="h-9 w-full flex items-center px-3 text-sm font-medium border-b border-(--ui-border) cursor-grab hover:bg-(--ui-bg-elevated) text-left transition-colors touch-none"
+                :class="{
+  'border-t-2 border-(--ui-primary)': epicDragOver === epic.id,
+  'opacity-40': epicDragId === epic.id
+}"
+                @pointerdown="editable && handleEpicPointerDown($event, epic.id)"
+                @click="openNode(epic.id, epic.label)"
+              >
+                <UIcon
+                  name="i-lucide-chevron-right"
+                  class="size-3 mr-1.5 text-(--ui-text-muted) shrink-0"
+                />
+                <span class="truncate">{{ epic.label }}</span>
+              </button>
+
+              <button
+                v-for="task in tree.childrenOf(epic.id)"
+                :key="task.id"
+                class="h-8 w-full flex items-center px-6 text-xs border-b border-(--ui-border) hover:bg-(--ui-bg-elevated) text-left"
+                @click="openNode(task.id, task.label)"
+              >
+                <span class="truncate text-(--ui-text-dimmed)">
+                  {{ task.label }}
+                </span>
+              </button>
+
+              <button
+                v-if="editable"
+                class="h-7 w-full flex items-center px-6 text-xs text-(--ui-text-dimmed) hover:text-(--ui-text) border-b border-(--ui-border) text-left"
+                @click="addTask(epic.id)"
+              >
+                + {{ locale.addTask.toLowerCase() }}
+              </button>
+            </div>
+          </TransitionGroup>
+        </div>
+
+        <!-- Timeline panel -->
+        <div class="flex-1 overflow-x-auto">
+          <div :style="{ width: `${axisWidth}px`, minWidth: '100%', position: 'relative' }">
+            <!-- Axis labels -->
+            <div class="h-8 relative border-b border-(--ui-border) sticky top-0 bg-(--ui-bg) z-10">
+              <div
+                v-for="lbl in axisLabels"
+                :key="lbl.offset"
+                class="absolute top-1.5 text-[10px] text-(--ui-text-muted) whitespace-nowrap px-0.5"
+                :style="{ left: `${lbl.offset}px` }"
+              >
+                {{ lbl.label }}
+              </div>
+              <!-- Today line -->
+              <div
+                class="absolute top-0 bottom-0 w-px bg-(--ui-primary) opacity-60"
+                :style="{ left: `${todayOffset}px` }"
+              />
+            </div>
+
+            <!-- Bars -->
+            <TransitionGroup
+              name="tepic"
+              tag="div"
+            >
+              <div
+                v-for="epic in epics"
+                :key="epic.id"
+                :data-epic-id="epic.id"
+                :class="barHoverEpicId === epic.id && barDragId ? 'bg-(--ui-primary)/5' : ''"
+              >
+                <!-- Epic bar row -->
+                <div class="h-9 relative border-b border-(--ui-border)">
+                  <div
+                    v-if="epic.meta?.dateStart && epic.meta?.dateEnd"
+                    class="absolute top-2 h-5 rounded text-white text-[10px] flex items-center px-2 font-medium select-none transition-opacity"
+                    :class="barDragId === epic.id ? 'opacity-60 cursor-grabbing' : 'cursor-grab hover:opacity-80'"
+                    :style="{
+  left: `${dateToOffset(epic.meta.dateStart)}px`,
+  width: `${spanWidth(epic.meta.dateStart, epic.meta.dateEnd)}px`,
+  background: epic.meta.color ?? '#6366f1',
+  maxWidth: '100%',
+  ...taskFocusers(epic.id).length ? { outline: `2px solid ${taskFocusers(epic.id)[0].user?.color}`, outlineOffset: '1px' } : {}
+}"
+                    @pointerdown="onBarPointerDown($event, epic.id)"
+                    @pointermove="onBarPointerMove($event, epic.id)"
+                    @pointerup="onBarPointerUp(epic.id)"
+                    @pointerenter="focusTask(epic.id)"
+                    @pointerleave="clearFocus"
+                    @click.stop="onBarClick(epic.id, epic.label)"
+                  >
+                    <span class="truncate">{{ epic.label }}</span>
+                  </div>
+                </div>
+
+                <!-- Task bar rows -->
+                <div
+                  v-for="task in tree.childrenOf(epic.id)"
+                  :key="task.id"
+                  class="h-8 relative border-b border-(--ui-border)"
+                >
+                  <div
+                    v-if="task.meta?.dateStart && task.meta?.dateEnd"
+                    class="absolute top-1.5 h-5 rounded text-white text-[10px] flex items-center px-2 select-none opacity-85 transition-opacity"
+                    :class="barDragId === task.id ? 'opacity-60 cursor-grabbing' : 'cursor-grab hover:opacity-80'"
+                    :style="{
+  left: `${dateToOffset(task.meta.dateStart)}px`,
+  width: `${spanWidth(task.meta.dateStart, task.meta.dateEnd)}px`,
+  background: task.meta.color ?? '#818cf8',
+  maxWidth: '100%',
+  ...taskFocusers(task.id).length ? { outline: `2px solid ${taskFocusers(task.id)[0].user?.color}`, outlineOffset: '1px' } : {}
+}"
+                    @pointerdown="onBarPointerDown($event, task.id)"
+                    @pointermove="onBarPointerMove($event, task.id)"
+                    @pointerup="onBarPointerUp(task.id, epic.id)"
+                    @pointerenter="focusTask(task.id)"
+                    @pointerleave="clearFocus"
+                    @click.stop="onBarClick(task.id, task.label)"
+                  >
+                    <span class="truncate">{{ task.label }}</span>
+                  </div>
+                </div>
+
+                <!-- Add task spacer -->
+                <div
+                  v-if="editable"
+                  class="h-7 border-b border-(--ui-border)"
+                />
+              </div>
+            </TransitionGroup>
+
+            <!-- Today vertical line across bars -->
+            <div
+              class="absolute top-8 bottom-0 w-px bg-(--ui-primary) opacity-20 pointer-events-none"
+              :style="{ left: `${todayOffset}px` }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.tepic-move{transition:transform .25s ease}.tepic-enter-active{transition:opacity .18s ease,transform .18s ease}.tepic-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.tepic-leave-active{transition:opacity .15s ease}.tepic-leave-to{opacity:0}
+</style>

package/dist/runtime/components/renderers/ATimelineRenderer.vue.d.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['timeline']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useAwareness.js

@@ -1,4 +1,5 @@
 import { shallowRef, computed, watch } from "vue";
+import { tryOnScopeDispose } from "@vueuse/core";
 export function useAwareness() {
   const { provider } = useAbracadabra();
   const states = shallowRef(/* @__PURE__ */ new Map());
@@ -22,6 +23,10 @@ export function useAwareness() {
     _unsub = () => awareness.off("change", handler);
   }
   watch(provider, () => _subscribe(), { immediate: true });
+  tryOnScopeDispose(() => {
+    _unsub?.();
+    _unsub = null;
+  });
   const localState = computed(() => {
     const awareness = provider.value?.awareness;
     if (!awareness) return {};

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

@@ -0,0 +1,18 @@
+/**
+ * useBroadcastSync
+ *
+ * Wraps BroadcastChannelSync from @abraca/dabra for cross-tab Y.js sync.
+ * Initialized by the main plugin after root provider syncs.
+ * No user action needed — automatically syncs across browser tabs on the same origin.
+ *
+ * Usage:
+ *   const { isActive } = useBroadcastSync()
+ */
+import type * as Y from 'yjs';
+import type { Awareness } from 'y-protocols/awareness';
+export declare function _initBroadcastSync(BroadcastChannelSync: any, doc: Y.Doc, docId: string, awareness?: Awareness | null): void;
+export declare function _destroyBroadcastSync(): void;
+export declare function useBroadcastSync(): {
+    /** Whether cross-tab BroadcastChannel sync is currently active. */
+    isActive: import("vue").Ref<boolean, boolean>;
+};

package/dist/runtime/composables/useBroadcastSync.js

@@ -0,0 +1,26 @@
+import { ref } from "vue";
+const isActive = ref(false);
+let _sync = null;
+export function _initBroadcastSync(BroadcastChannelSync, doc, docId, awareness) {
+  _destroyBroadcastSync();
+  try {
+    _sync = BroadcastChannelSync.forDoc(doc, docId, awareness ?? void 0);
+    _sync.connect();
+    isActive.value = true;
+  } catch (e) {
+    console.error("[abracadabra] BroadcastChannelSync init failed:", e);
+  }
+}
+export function _destroyBroadcastSync() {
+  if (_sync) {
+    _sync.destroy();
+    _sync = null;
+  }
+  isActive.value = false;
+}
+export function useBroadcastSync() {
+  return {
+    /** Whether cross-tab BroadcastChannel sync is currently active. */
+    isActive
+  };
+}

package/dist/runtime/composables/useChat.js

@@ -32,7 +32,8 @@ function resolveChannelLabel(channelId, senderName, senderId) {
     try {
       const entry = doc.value?.getMap("doc-tree")?.get(docId);
       if (entry?.label) return `${entry.label} Chat`;
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] chat: failed to resolve channel label:", e);
     }
     return "Group Chat";
   }
@@ -134,7 +135,8 @@ export function _handleStatelessChat(payload) {
         break;
       }
     }
-  } catch {
+  } catch (e) {
+    if (import.meta.dev) console.warn("[abracadabra] chat: failed to handle stateless message:", e);
   }
 }
 function sendMessage(channelId, content) {

package/dist/runtime/composables/useChatUsers.js

@@ -19,7 +19,8 @@ export function useChatUsers() {
           });
         }
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] chat-users: failed to read awareness states:", e);
     }
     return result;
   });

package/dist/runtime/composables/useCommandPalette.js

@@ -5,6 +5,7 @@ const searchTerm = ref("");
 export function useCommandPalette() {
   const { doc, isReady, provider } = useAbracadabra();
   const registry = usePluginRegistry();
+  const { getDocUrl } = useDocSlugs();
   const recentDocIds = useLocalStorage("abra_recent_docs", []);
   function open(term = "") {
     searchTerm.value = term;
@@ -43,7 +44,7 @@ export function useCommandPalette() {
             suffix: entry.type,
             onClick: () => {
               trackRecentDoc(id);
-              navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${id}`);
+              navigateTo(getDocUrl(id));
               close();
             }
           });
@@ -52,7 +53,64 @@ export function useCommandPalette() {
         if (sorted.length > 0) {
           result.push({ id: "docs", label: q ? "Documents" : "Recent", items: sorted });
         }
-      } catch {
+      } catch (e) {
+        if (import.meta.dev) console.warn("[abracadabra] command palette: failed to scan document tree:", e);
+      }
+    }
+    {
+      const actionItems = [
+        {
+          id: "action:new-doc",
+          label: "New Document",
+          icon: "i-lucide-file-plus",
+          shortcut: ["meta", "N"],
+          onClick: () => {
+            if (!doc.value || !isReady.value) return;
+            const id = crypto.randomUUID();
+            doc.value.getMap("doc-tree").set(id, { label: "Untitled", parentId: null, order: Date.now(), type: "doc" });
+            navigateTo(getDocUrl(id));
+            close();
+          }
+        },
+        {
+          id: "action:home",
+          label: "Go to Home",
+          icon: "i-lucide-home",
+          onClick: () => {
+            navigateTo("/app");
+            close();
+          }
+        },
+        {
+          id: "action:chat",
+          label: "Go to Chat",
+          icon: "i-lucide-message-circle",
+          onClick: () => {
+            navigateTo("/chat");
+            close();
+          }
+        },
+        {
+          id: "action:inbox",
+          label: "Go to Inbox",
+          icon: "i-lucide-inbox",
+          onClick: () => {
+            navigateTo("/inbox");
+            close();
+          }
+        },
+        {
+          id: "action:settings",
+          label: "Go to Settings",
+          icon: "i-lucide-settings",
+          onClick: () => {
+            navigateTo("/settings");
+            close();
+          }
+        }
+      ].filter((item) => !q || item.label.toLowerCase().includes(q));
+      if (actionItems.length > 0) {
+        result.push({ id: "actions", label: "Actions", items: actionItems });
       }
     }
     try {
@@ -75,7 +133,8 @@ export function useCommandPalette() {
           result.push({ id: group.id ?? "plugin", label: group.label, items: filtered });
         }
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] command palette: failed to load plugin commands:", e);
     }
     groups.value = result;
   }

package/dist/runtime/composables/useConnectionStatus.js

@@ -1,4 +1,5 @@
 import { computed, ref, toValue, watch } from "vue";
+import { tryOnScopeDispose } from "@vueuse/core";
 import { useAbraLocale } from "./useAbraLocale.js";
 import { useAbracadabra } from "./useAbracadabra.js";
 export function useConnectionStatus(status, synced) {
@@ -40,6 +41,12 @@ export function useConnectionStatus(status, synced) {
       stableStatus.value = next;
     }
   }, { immediate: true });
+  tryOnScopeDispose(() => {
+    if (offlineTimer) {
+      clearTimeout(offlineTimer);
+      offlineTimer = null;
+    }
+  });
   const label = computed(() => {
     const s = stableStatus.value;
     if (s === "connected") return locale.connected;