@abraca/nuxt 0.3.0 → 1.5.0

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

@@ -1,16 +1,25 @@
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { useRuntimeConfig, defineShortcuts } from "#imports";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useTouchDrag } from "../../composables/useTouchDrag";
 import { useNodePanel } from "../../composables/useNodePanel";
+import { useCalendarView } from "../../composables/useCalendarView";
 import { DEFAULT_LOCALE } from "../../locale";
+import ACalendarToolbar from "./calendar/ACalendarToolbar.vue";
+import ACalendarMonthView from "./calendar/ACalendarMonthView.vue";
+import ACalendarWeekView from "./calendar/ACalendarWeekView.vue";
+import ACalendarDayView from "./calendar/ACalendarDayView.vue";
+import ACalendarUnscheduled from "./calendar/ACalendarUnscheduled.vue";
 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 }
+  editable: { type: Boolean, required: false, default: true },
+  weekStartDay: { type: String, required: false },
+  showWeekNumbers: { type: Boolean, required: false }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -27,158 +36,134 @@ const {
   closePanel
 } = useNodePanel(childProviderRef);
 const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
-const currentDate = ref(/* @__PURE__ */ new Date());
-const year = computed(() => currentDate.value.getFullYear());
-const month = computed(() => currentDate.value.getMonth());
-const monthLabel = computed(
-  () => currentDate.value.toLocaleDateString("en-US", { month: "long", year: "numeric" })
-);
-const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-function prevMonth() {
-  currentDate.value = new Date(year.value, month.value - 1, 1);
-}
-function nextMonth() {
-  currentDate.value = new Date(year.value, month.value + 1, 1);
-}
-function goToday() {
-  currentDate.value = /* @__PURE__ */ new Date();
-}
-const todayStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-const weeks = computed(() => {
-  const y = year.value;
-  const m = month.value;
-  const firstDay = new Date(y, m, 1).getDay();
-  const daysInMonth = new Date(y, m + 1, 0).getDate();
-  const raw = [];
-  for (let i = 0; i < firstDay; i++) raw.push({ date: null, dateStr: null, isToday: false });
-  for (let d = 1; d <= daysInMonth; d++) {
-    const date = new Date(y, m, d);
-    const dateStr = date.toISOString().slice(0, 10);
-    raw.push({ date, dateStr, isToday: dateStr === todayStr });
-  }
-  while (raw.length % 7 !== 0) raw.push({ date: null, dateStr: null, isToday: false });
-  const entries = tree.childrenOf(null);
-  const result = [];
-  for (let wi = 0; wi < raw.length; wi += 7) {
-    const weekRaw = raw.slice(wi, wi + 7);
-    const weekDates = weekRaw.map((c) => c.dateStr);
-    const seenIds = /* @__PURE__ */ new Set();
-    const multiDay = [];
-    const singleDay = [];
-    for (const entry of entries) {
-      const start = entry.meta?.datetimeStart?.slice(0, 10);
-      if (!start) continue;
-      const end = entry.meta?.datetimeEnd?.slice(0, 10) ?? start;
-      const isMulti = start !== end;
-      let startCol = -1;
-      let endCol = -1;
-      for (let col = 0; col < 7; col++) {
-        const d = weekDates[col];
-        if (!d) continue;
-        if (d >= start && d <= end) {
-          if (startCol === -1) startCol = col;
-          endCol = col;
-        }
-      }
-      if (startCol === -1 || seenIds.has(entry.id)) continue;
-      seenIds.add(entry.id);
-      const info = {
-        id: entry.id,
-        label: entry.label,
-        color: entry.meta?.color ?? "#6366f1"
-      };
-      if (isMulti) {
-        multiDay.push({ ...info, startCol, endCol, globalStart: start });
-      } else {
-        singleDay.push({ ...info, col: startCol });
-      }
-    }
-    multiDay.sort(
-      (a, b) => a.startCol - b.startCol || b.endCol - b.startCol - (a.endCol - a.startCol) || a.globalStart.localeCompare(b.globalStart)
-    );
-    const lanes = [];
-    const assigned = [];
-    for (const evt of multiDay) {
-      let lane = lanes.findIndex((lastEnd) => lastEnd < evt.startCol);
-      if (lane === -1) {
-        lane = lanes.length;
-        lanes.push(-1);
-      }
-      lanes[lane] = evt.endCol;
-      assigned.push({ ...evt, lane });
-    }
-    const laneCount = lanes.length;
-    const cells = weekRaw.map((r, col) => {
-      const laneSlots = [];
-      for (let l = 0; l < laneCount; l++) {
-        const span = assigned.find((s) => s.lane === l && col >= s.startCol && col <= s.endCol);
-        if (span) {
-          laneSlots.push({
-            type: "span",
-            id: span.id,
-            label: span.label,
-            color: span.color,
-            isStart: col === span.startCol,
-            isEnd: col === span.endCol
-          });
-        } else {
-          laneSlots.push({ type: "empty" });
-        }
-      }
-      const events = singleDay.filter((e) => e.col === col).map((e) => ({ id: e.id, label: e.label, color: e.color }));
-      return { ...r, laneSlots, events };
-    });
-    result.push({ cells, laneCount });
-  }
-  return result;
+const weekStartDayRef = computed(() => props.weekStartDay ?? "sun");
+const showWeekNumbersRef = computed(() => props.showWeekNumbers ?? false);
+const cal = useCalendarView({
+  tree,
+  weekStartDay: weekStartDayRef,
+  showWeekNumbers: showWeekNumbersRef
 });
-const unscheduledEvents = computed(
-  () => tree.childrenOf(null).filter((e) => !e.meta?.datetimeStart)
-);
-function createEvent(date) {
+watch(cal.viewMode, (mode) => {
+  setLocalState({ "calendar:viewMode": mode });
+});
+watch(cal.periodLabel, (label) => {
+  setLocalState({ "calendar:viewing": label });
+}, { immediate: true });
+function createEvent(date, hour) {
   if (!props.editable) return;
   const d = date ?? /* @__PURE__ */ new Date();
   const dateStr = d.toISOString().slice(0, 10);
   const id = tree.createChild(null, locale.value.newEvent);
-  tree.updateMeta(id, {
-    datetimeStart: `${dateStr}T00:00:00.000Z`,
-    datetimeEnd: `${dateStr}T01:00:00.000Z`,
-    allDay: true,
-    color: "#6366f1"
-  });
+  if (hour !== void 0) {
+    const startHour = String(hour).padStart(2, "0");
+    const endHour = String(Math.min(hour + 1, 23)).padStart(2, "0");
+    tree.updateMeta(id, {
+      datetimeStart: `${dateStr}T${startHour}:00:00.000Z`,
+      datetimeEnd: `${dateStr}T${endHour}:00:00.000Z`,
+      color: "#6366f1"
+    });
+  } else {
+    tree.updateMeta(id, {
+      datetimeStart: `${dateStr}T00:00:00.000Z`,
+      datetimeEnd: `${dateStr}T01:00:00.000Z`,
+      allDay: true,
+      color: "#6366f1"
+    });
+  }
   openNode(id, locale.value.newEvent);
 }
+function onCreateEvent(payload) {
+  if (payload instanceof Date) {
+    createEvent(payload);
+  } else {
+    createEvent(payload.date, payload.hour);
+  }
+}
+const dragPreviewTime = ref(null);
 const { dragId, dragOverContainer, handlePointerDown } = useTouchDrag({
   onMoveToContainer: (eventId, dateStr) => {
     if (!props.editable) return;
     const entry = tree.entries.value.find((e) => e.id === eventId);
-    let newEnd = `${dateStr}T01:00:00.000Z`;
-    if (entry?.meta?.datetimeStart && entry?.meta?.datetimeEnd) {
-      const duration = new Date(entry.meta.datetimeEnd).getTime() - new Date(entry.meta.datetimeStart).getTime();
-      newEnd = new Date((/* @__PURE__ */ new Date(`${dateStr}T00:00:00.000Z`)).getTime() + duration).toISOString();
+    if (cal.viewMode.value !== "month" && dragPreviewTime.value) {
+      const minutes = dragPreviewTime.value.minutes;
+      const snapped = Math.round(minutes / 10) * 10;
+      const h = String(dragPreviewTime.value.hours).padStart(2, "0");
+      const m = String(snapped % 60).padStart(2, "0");
+      let duration = 36e5;
+      if (entry?.meta?.datetimeStart && entry?.meta?.datetimeEnd) {
+        duration = new Date(entry.meta.datetimeEnd).getTime() - new Date(entry.meta.datetimeStart).getTime();
+      }
+      const startTime = (/* @__PURE__ */ new Date(`${dateStr}T${h}:${m}:00.000Z`)).getTime();
+      tree.updateMeta(eventId, {
+        datetimeStart: new Date(startTime).toISOString(),
+        datetimeEnd: new Date(startTime + duration).toISOString(),
+        allDay: false,
+        color: entry?.meta?.color ?? "#6366f1"
+      });
+    } else {
+      let newEnd = `${dateStr}T01:00:00.000Z`;
+      if (entry?.meta?.datetimeStart && entry?.meta?.datetimeEnd) {
+        const duration = new Date(entry.meta.datetimeEnd).getTime() - new Date(entry.meta.datetimeStart).getTime();
+        newEnd = new Date((/* @__PURE__ */ new Date(`${dateStr}T00:00:00.000Z`)).getTime() + duration).toISOString();
+      }
+      tree.updateMeta(eventId, {
+        datetimeStart: `${dateStr}T00:00:00.000Z`,
+        datetimeEnd: newEnd,
+        allDay: entry?.meta?.allDay ?? true,
+        color: entry?.meta?.color ?? "#6366f1"
+      });
     }
-    tree.updateMeta(eventId, {
-      datetimeStart: `${dateStr}T00:00:00.000Z`,
-      datetimeEnd: newEnd,
-      allDay: entry?.meta?.allDay ?? true,
-      color: entry?.meta?.color ?? "#6366f1"
-    });
+    dragPreviewTime.value = null;
+  },
+  onMoveOverContainer: (_eventId, _containerId, pointerEvent) => {
+    if (cal.viewMode.value === "month") return;
+    const target = pointerEvent.target?.closest("[data-hour-grid]");
+    if (!target) return;
+    const gridHeight = Number(target.getAttribute("data-hour-grid")) || 48;
+    const rect = target.getBoundingClientRect();
+    const y = pointerEvent.clientY - rect.top + target.scrollTop;
+    const totalMinutes = Math.max(0, Math.min(1439, y / gridHeight * 60));
+    const snapped = Math.round(totalMinutes / 10) * 10;
+    dragPreviewTime.value = {
+      hours: Math.floor(snapped / 60),
+      minutes: snapped % 60
+    };
   },
   containerAttr: "data-drop-container"
 });
+function onDragStart(payload) {
+  if (!props.editable) return;
+  handlePointerDown(payload.event, payload.id);
+}
+const renameId = ref(null);
+const renameValue = ref("");
+function _startRename(id, _label) {
+  renameId.value = id;
+  renameValue.value = _label;
+}
+function commitRename() {
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
+  }
+  renameId.value = null;
+}
+function cancelRename() {
+  renameId.value = null;
+}
+function onOpenEvent(event) {
+  openNode(event.id, event.label);
+}
 function focusEvent(eventId) {
   setLocalState({ "calendar:focused": eventId });
 }
 function unfocusEvent() {
   setLocalState({ "calendar:focused": null });
 }
-watch(currentDate, () => {
-  setLocalState({ "calendar:viewing": monthLabel.value });
-}, { immediate: true });
 function eventFocusers(eventId) {
-  return states.value.filter(
-    (s) => s.clientId !== myClientId.value && s["calendar:focused"] === eventId
-  );
+  return states.value.filter((s) => s.clientId !== myClientId.value && s["calendar:focused"] === eventId).map((s) => ({
+    name: s.user?.name ?? "",
+    color: s.user?.color ?? "#888"
+  }));
 }
 const remoteViewers = computed(
   () => states.value.filter((s) => s.clientId !== myClientId.value && s["calendar:viewing"]).map((s) => ({
@@ -207,215 +192,110 @@ watch(childDoc, (doc) => {
   });
 }, { immediate: true });
 defineShortcuts({
-  arrowleft: prevMonth,
-  arrowright: nextMonth,
-  t: goToday
+  arrowleft: () => cal.prevPeriod(),
+  arrowright: () => cal.nextPeriod(),
+  t: () => cal.goToday()
 });
 onBeforeUnmount(() => {
   setLocalState({ "calendar:focused": null, "calendar:viewing": null });
+  cal.cleanup();
 });
 defineExpose({ connectedUsers });
 </script>
 
 <template>
   <div class="flex-1 min-h-0 flex flex-col relative">
-    <!-- Header -->
-    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
-      <div class="flex items-center gap-1">
-        <UTooltip
-          text="Previous month"
-          :kbds="['\u2190']"
-          :content="{ side: 'bottom' }"
-        >
-          <UButton
-            icon="i-lucide-chevron-left"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            @click="prevMonth"
-          />
-        </UTooltip>
-        <button
-          class="text-sm font-medium w-44 text-center hover:text-(--ui-primary) transition-colors"
-          @click="goToday"
-        >
-          {{ monthLabel }}
-        </button>
-        <UTooltip
-          text="Next month"
-          :kbds="['\u2192']"
-          :content="{ side: 'bottom' }"
-        >
-          <UButton
-            icon="i-lucide-chevron-right"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            @click="nextMonth"
-          />
-        </UTooltip>
-      </div>
-
-      <!-- Remote viewers + new event -->
-      <div class="flex items-center gap-1.5">
-        <span
-          v-for="rv in remoteViewers"
-          :key="rv.clientId"
-          class="text-[10px] px-1.5 py-0.5 rounded-full border"
-          :style="{ borderColor: rv.color, color: rv.color }"
-          :title="`${rv.name} is viewing ${rv.viewing}`"
-        >
-          {{ rv.name?.split(" ")[0] || "?" }} &middot; {{ rv.viewing }}
-        </span>
-        <UButton
-          v-if="editable"
-          icon="i-lucide-plus"
-          size="xs"
-          variant="ghost"
-          color="neutral"
-          :label="locale.newEvent"
-          @click="createEvent()"
-        />
-      </div>
-    </div>
-
-    <!-- Calendar body -->
-    <div class="flex-1 min-h-0 flex flex-col p-4">
-      <!-- Day headers -->
-      <div class="grid grid-cols-7 shrink-0">
-        <div
-          v-for="day in WEEK_DAYS"
-          :key="day"
-          class="text-center text-xs font-medium text-(--ui-text-muted) py-1"
-        >
-          {{ day }}
-        </div>
-      </div>
-
-      <!-- Week rows -->
-      <div class="flex-1 min-h-0 flex flex-col">
-        <div
-          v-for="(week, wi) in weeks"
-          :key="wi"
-          class="flex-1 min-h-0 grid grid-cols-7"
-        >
-          <div
-            v-for="(cell, ci) in week.cells"
-            :key="ci"
-            class="min-h-0 overflow-hidden bg-(--ui-bg-elevated) border-b border-r border-(--ui-border)/30 p-1 transition-colors"
-            :class="{
-  'invisible pointer-events-none': !cell.date,
-  'ring-2 ring-(--ui-primary)/40 bg-(--ui-primary)/5': cell.dateStr && dragOverContainer === cell.dateStr,
-  'border-l': ci === 0,
-  'border-t': wi === 0,
-  'rounded-tl-md': wi === 0 && ci === 0,
-  'rounded-tr-md': wi === 0 && ci === 6,
-  'rounded-bl-md': wi === weeks.length - 1 && ci === 0,
-  'rounded-br-md': wi === weeks.length - 1 && ci === 6
+    <!-- Toolbar -->
+    <ACalendarToolbar
+      :view-mode="cal.viewMode.value"
+      :period-label="cal.periodLabel.value"
+      :current-year="cal.year.value"
+      :current-month="cal.month.value"
+      :remote-viewers="remoteViewers"
+      :editable="editable"
+      :labels="{
+  newEvent: locale.newEvent
 }"
-            :data-drop-container="cell.dateStr ?? void 0"
-          >
-            <template v-if="cell.date">
-              <!-- Date number -->
-              <button
-                class="text-xs font-medium w-6 h-6 rounded-full flex items-center justify-center mb-0.5 transition-colors"
-                :class="cell.isToday ? 'bg-(--ui-primary) text-white' : editable ? 'text-(--ui-text) hover:bg-(--ui-bg)' : 'text-(--ui-text) cursor-default'"
-                @click="editable ? createEvent(cell.date) : void 0"
-              >
-                {{ cell.date.getDate() }}
-              </button>
+      @update:view-mode="cal.viewMode.value = $event"
+      @prev="cal.prevPeriod()"
+      @next="cal.nextPeriod()"
+      @today="cal.goToday()"
+      @add-event="createEvent()"
+      @navigate-to-month="(year, month) => cal.goToMonth(year, month)"
+    />
 
-              <!-- Multi-day span bar slots -->
-              <div
-                v-for="(slot, li) in cell.laneSlots"
-                :key="'lane-' + li"
-                class="h-[22px] flex items-center -mx-1"
-              >
-                <button
-                  v-if="slot.type === 'span'"
-                  class="w-full h-[18px] text-[10px] text-white truncate flex items-center leading-none cursor-pointer hover:brightness-110 transition-[filter]"
-                  :class="[
-  slot.isStart ? 'rounded-l-sm ml-1 pl-1.5' : 'pl-0.5',
-  slot.isEnd ? 'rounded-r-sm mr-1' : '',
-  { 'opacity-40': dragId === slot.id }
-]"
-                  :style="{
-  background: slot.color,
-  ...eventFocusers(slot.id).length > 0 ? { outline: `2px solid ${eventFocusers(slot.id)[0].user?.color ?? '#888'}`, outlineOffset: '1px' } : {},
-  ...editable ? { touchAction: 'none' } : {}
-}"
-                  :data-drag-id="editable ? slot.id : void 0"
-                  @pointerdown="editable ? handlePointerDown($event, slot.id) : void 0"
-                  @pointerenter="focusEvent(slot.id)"
-                  @pointerleave="unfocusEvent"
-                  @click.stop="openNode(slot.id, slot.label)"
-                >
-                  <span
-                    v-if="slot.isStart"
-                    class="truncate"
-                  >{{ slot.label }}</span>
-                </button>
-              </div>
+    <!-- Month view -->
+    <ACalendarMonthView
+      v-if="cal.viewMode.value === 'month'"
+      :weeks="cal.weeks.value"
+      :week-day-headers="cal.weekDayHeaders.value"
+      :week-numbers="cal.weekNumbers.value"
+      :show-week-numbers="showWeekNumbers"
+      :drag-id="dragId"
+      :drag-over-container="dragOverContainer"
+      :event-focusers="eventFocusers"
+      :rename-id="renameId"
+      :rename-value="renameValue"
+      :editable="editable"
+      @create-event="onCreateEvent"
+      @open-event="onOpenEvent"
+      @drag-start="onDragStart"
+      @focus-event="focusEvent"
+      @unfocus-event="unfocusEvent"
+      @rename-input="renameValue = $event"
+      @rename-commit="commitRename"
+      @rename-cancel="cancelRename"
+    />
 
-              <!-- Single-day events -->
-              <div
-                class="space-y-0.5"
-                :class="{ 'mt-0.5': cell.laneSlots.length > 0 }"
-              >
-                <button
-                  v-for="evt in cell.events.slice(0, 3)"
-                  :key="evt.id"
-                  class="w-full text-left text-[10px] px-1.5 py-0.5 rounded truncate text-white leading-tight"
-                  :class="{ 'opacity-40': dragId === evt.id }"
-                  :style="{
-  background: evt.color,
-  ...eventFocusers(evt.id).length > 0 ? { outline: `2px solid ${eventFocusers(evt.id)[0].user?.color ?? '#888'}`, outlineOffset: '1px' } : {},
-  ...editable ? { touchAction: 'none' } : {}
-}"
-                  :data-drag-id="editable ? evt.id : void 0"
-                  @pointerdown="editable ? handlePointerDown($event, evt.id) : void 0"
-                  @pointerenter="focusEvent(evt.id)"
-                  @pointerleave="unfocusEvent"
-                  @click.stop="openNode(evt.id, evt.label)"
-                >
-                  {{ evt.label }}
-                </button>
-                <span
-                  v-if="cell.events.length > 3"
-                  class="block text-[10px] text-(--ui-text-dimmed) px-1"
-                >
-                  +{{ cell.events.length - 3 }} more
-                </span>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
+    <!-- Week view -->
+    <ACalendarWeekView
+      v-else-if="cal.viewMode.value === 'week'"
+      :columns="cal.weekColumns.value"
+      :event-focusers="eventFocusers"
+      :drag-id="dragId"
+      :drag-over-container="dragOverContainer"
+      :drag-preview-time="dragPreviewTime"
+      :rename-id="renameId"
+      :rename-value="renameValue"
+      :editable="editable"
+      @create-event="onCreateEvent"
+      @open-event="onOpenEvent"
+      @drag-start="onDragStart"
+      @focus-event="focusEvent"
+      @unfocus-event="unfocusEvent"
+      @rename-input="renameValue = $event"
+      @rename-commit="commitRename"
+      @rename-cancel="cancelRename"
+    />
 
-      <!-- Unscheduled events -->
-      <div
-        v-if="unscheduledEvents.length > 0"
-        class="mt-4 shrink-0"
-      >
-        <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide mb-2">
-          Unscheduled
-        </p>
-        <div class="flex flex-wrap gap-1.5">
-          <button
-            v-for="evt in unscheduledEvents"
-            :key="evt.id"
-            class="text-xs px-2 py-1 rounded border border-(--ui-border) hover:border-(--ui-primary) transition-colors"
-            :class="{ 'opacity-40': dragId === evt.id }"
-            :style="editable ? { touchAction: 'none' } : {}"
-            :data-drag-id="editable ? evt.id : void 0"
-            @pointerdown="editable ? handlePointerDown($event, evt.id) : void 0"
-            @click="openNode(evt.id, evt.label)"
-          >
-            {{ evt.label }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <!-- Day view -->
+    <ACalendarDayView
+      v-else
+      :column="cal.dayColumn.value"
+      :event-focusers="eventFocusers"
+      :drag-id="dragId"
+      :drag-preview-time="dragPreviewTime"
+      :rename-id="renameId"
+      :rename-value="renameValue"
+      :editable="editable"
+      @create-event="onCreateEvent"
+      @open-event="onOpenEvent"
+      @drag-start="onDragStart"
+      @focus-event="focusEvent"
+      @unfocus-event="unfocusEvent"
+      @rename-input="renameValue = $event"
+      @rename-commit="commitRename"
+      @rename-cancel="cancelRename"
+    />
+
+    <!-- Unscheduled events -->
+    <ACalendarUnscheduled
+      :entries="cal.unscheduledEntries.value"
+      :drag-id="dragId"
+      :editable="editable"
+      @open-entry="openNode($event.id, $event.label)"
+      @drag-start="onDragStart"
+    />
 
     <!-- Node panel -->
     <ANodePanel

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

@@ -3,6 +3,8 @@ import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['calendar']>;
     editable?: boolean;
+    weekStartDay?: string;
+    showWeekNumbers?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     connectedUsers: import("vue").ComputedRef<{

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

@@ -1,5 +1,8 @@
 <script setup>
 import { computed, onMounted } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useVoice } from "../../composables/useVoice";
 import { DEFAULT_LOCALE } from "../../locale";
 const props = defineProps({
   docId: { type: String, required: true },

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

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, nextTick, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useTouchDrag } from "../../composables/useTouchDrag";
 import { useNodePanel } from "../../composables/useNodePanel";