@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -1,13 +1,25 @@
 <script setup>
-import { ref, computed } from "vue";
+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 }
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  weekStartDay: { type: String, required: false },
+  showWeekNumbers: { type: Boolean, required: false }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,140 +27,282 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.calendar ?? {},
   ...props.labels ?? {}
 }));
-const { tree } = useRendererBase(props);
-const today = /* @__PURE__ */ new Date();
-const viewYear = ref(today.getFullYear());
-const viewMonth = ref(today.getMonth());
-const monthName = computed(
-  () => new Date(viewYear.value, viewMonth.value, 1).toLocaleString("default", { month: "long", year: "numeric" })
-);
-function prevMonth() {
-  if (viewMonth.value === 0) {
-    viewMonth.value = 11;
-    viewYear.value--;
-  } else viewMonth.value--;
+const { tree, childProviderRef, childDoc, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const weekStartDayRef = computed(() => props.weekStartDay ?? "sun");
+const showWeekNumbersRef = computed(() => props.showWeekNumbers ?? false);
+const cal = useCalendarView({
+  tree,
+  weekStartDay: weekStartDayRef,
+  showWeekNumbers: showWeekNumbersRef
+});
+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);
+  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 nextMonth() {
-  if (viewMonth.value === 11) {
-    viewMonth.value = 0;
-    viewYear.value++;
-  } else viewMonth.value++;
+function onCreateEvent(payload) {
+  if (payload instanceof Date) {
+    createEvent(payload);
+  } else {
+    createEvent(payload.date, payload.hour);
+  }
 }
-const events = computed(() => tree.childrenOf(null));
-function eventsOnDay(year, month, day) {
-  const dayStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-  return events.value.filter((e) => {
-    const start = e.meta?.datetimeStart ?? e.meta?.dateStart;
-    if (!start) return false;
-    return start.startsWith(dayStr);
-  });
+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);
+    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"
+      });
+    }
+    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 calendarDays = computed(
-  () => {
-    const firstDay = new Date(viewYear.value, viewMonth.value, 1).getDay();
-    const daysInMonth = new Date(viewYear.value, viewMonth.value + 1, 0).getDate();
-    const days = [];
-    for (let i = 0; i < firstDay; i++) days.push({ day: null });
-    for (let d = 1; d <= daysInMonth; d++) days.push({ day: d });
-    return days;
-  }
-);
-function isToday(day) {
-  return day === today.getDate() && viewMonth.value === today.getMonth() && viewYear.value === today.getFullYear();
+const renameId = ref(null);
+const renameValue = ref("");
+function _startRename(id, _label) {
+  renameId.value = id;
+  renameValue.value = _label;
 }
-function addEvent(day) {
-  const dateStr = `${viewYear.value}-${String(viewMonth.value + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}T09:00`;
-  const id = tree.createChild(null, locale.value.newEvent);
-  const entry = tree.treeMap.get(id);
-  if (entry) {
-    tree.treeMap.set(id, {
-      ...entry,
-      meta: { datetimeStart: dateStr, datetimeEnd: dateStr },
-      updatedAt: Date.now()
-    });
+function commitRename() {
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
   }
+  renameId.value = null;
 }
-const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+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 });
+}
+function eventFocusers(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) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "",
+    color: s.user?.color ?? "#888",
+    viewing: s["calendar:viewing"]
+  }))
+);
+watch(childDoc, (doc) => {
+  if (!doc) return;
+  const legacyMap = doc.getMap("event-dates");
+  if (legacyMap.size === 0) return;
+  legacyMap.forEach((val, id) => {
+    if (!tree.treeMap.get(id)?.meta?.datetimeStart) {
+      tree.updateMeta(id, {
+        datetimeStart: val.start,
+        datetimeEnd: val.end,
+        allDay: val.allDay,
+        color: val.color
+      });
+    }
+  });
+  doc.transact(() => {
+    for (const key of [...legacyMap.keys()]) legacyMap.delete(key);
+  });
+}, { immediate: true });
+defineShortcuts({
+  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="p-4 max-w-3xl">
-    <!-- Navigation -->
-    <div class="flex items-center gap-4 mb-4">
-      <UButton
-        icon="i-lucide-chevron-left"
-        variant="ghost"
-        color="neutral"
-        @click="prevMonth"
-      />
-      <h2 class="text-lg font-semibold flex-1 text-center">{{ monthName }}</h2>
-      <UButton
-        icon="i-lucide-chevron-right"
-        variant="ghost"
-        color="neutral"
-        @click="nextMonth"
-      />
-      <UButton
-        icon="i-lucide-today"
-        variant="soft"
-        color="neutral"
-        size="sm"
-        :label="locale.today"
-        @click="() => {
-  viewYear = today.getFullYear();
-  viewMonth = today.getMonth();
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- 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
 }"
-      />
-    </div>
+      @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)"
+    />
+
+    <!-- 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"
+    />
+
+    <!-- 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"
+    />
+
+    <!-- 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"
+    />
 
-    <!-- Day headers -->
-    <div class="grid grid-cols-7 gap-px mb-1">
-      <div
-        v-for="name in dayNames"
-        :key="name"
-        class="text-center text-xs font-medium text-muted py-1"
-      >
-        {{ name }}
-      </div>
-    </div>
+    <!-- Unscheduled events -->
+    <ACalendarUnscheduled
+      :entries="cal.unscheduledEntries.value"
+      :drag-id="dragId"
+      :editable="editable"
+      @open-entry="openNode($event.id, $event.label)"
+      @drag-start="onDragStart"
+    />
 
-    <!-- Calendar grid -->
-    <div class="grid grid-cols-7 gap-px bg-muted rounded-lg overflow-hidden">
-      <div
-        v-for="(cell, idx) in calendarDays"
-        :key="idx"
-        class="bg-elevated min-h-[80px] p-1 text-sm"
-        :class="cell.day && isToday(cell.day) ? 'bg-primary/5' : ''"
-      >
-        <template v-if="cell.day !== null">
-          <div
-            class="flex items-center justify-between"
-          >
-            <span
-              class="text-xs font-medium"
-              :class="isToday(cell.day) ? 'text-primary font-bold' : 'text-muted'"
-            >{{ cell.day }}</span>
-            <UButton
-              icon="i-lucide-plus"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              class="opacity-0 hover:opacity-100 h-4 w-4"
-              @click="addEvent(cell.day)"
-            />
-          </div>
-          <div class="space-y-0.5 mt-0.5">
-            <div
-              v-for="ev in eventsOnDay(viewYear, viewMonth, cell.day)"
-              :key="ev.id"
-              class="text-xs px-1 py-0.5 rounded truncate"
-              :style="ev.meta?.color ? { backgroundColor: ev.meta.color + '33', color: ev.meta.color } : { backgroundColor: 'var(--color-primary-100)', color: 'var(--color-primary-700)' }"
-            >
-              {{ ev.label }}
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </div>
 </template>

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

@@ -2,7 +2,20 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 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, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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/components/renderers/ACallRenderer.d.vue.ts

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = {
+    docId: string;
+    childProvider?: any;
+    docLabel: string;
+    labels?: Partial<AbracadabraLocale['renderers']['call']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/components/renderers/ACallRenderer.vue

@@ -0,0 +1,172 @@
+<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 },
+  childProvider: { type: null, required: false },
+  docLabel: { type: String, required: true },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.call,
+  ...config.public?.abracadabra?.locale?.renderers?.call ?? {},
+  ...props.labels ?? {}
+}));
+const { userName, userColor } = useAbracadabra();
+const {
+  voiceStatus,
+  isMuted,
+  isVideoEnabled,
+  isScreenEnabled,
+  canScreenShare,
+  localVideoStream,
+  localScreenStream,
+  peerVideoStreams,
+  peerList,
+  joinRoom,
+  leaveRoom,
+  toggleMute,
+  toggleVideo,
+  toggleScreen
+} = useVoice();
+const isConnected = computed(() => voiceStatus.value === "connected");
+onMounted(async () => {
+  if (!props.editable) return;
+  if (voiceStatus.value !== "connected" && voiceStatus.value !== "connecting") {
+    await joinRoom(props.docId);
+  }
+});
+const streams = computed(() => {
+  const result = [];
+  if (localVideoStream.value) {
+    result.push({
+      key: "self-camera",
+      stream: localVideoStream.value,
+      name: `${userName.value} (You)`,
+      color: userColor.value,
+      kind: "camera"
+    });
+  }
+  if (localScreenStream.value) {
+    result.push({
+      key: "self-screen",
+      stream: localScreenStream.value,
+      name: `${userName.value} (You)`,
+      color: userColor.value,
+      kind: "screen"
+    });
+  }
+  for (const peer of peerList.value) {
+    const vs = peerVideoStreams.value.get(peer.id);
+    if (vs?.camera) {
+      result.push({
+        key: `${peer.id}-camera`,
+        stream: vs.camera,
+        name: peer.displayName || peer.userId.slice(0, 6),
+        color: peer.color,
+        kind: "camera"
+      });
+    }
+    if (vs?.screen) {
+      result.push({
+        key: `${peer.id}-screen`,
+        stream: vs.screen,
+        name: peer.displayName || peer.userId.slice(0, 6),
+        color: peer.color,
+        kind: "screen"
+      });
+    }
+  }
+  return result;
+});
+const gridCols = computed(() => {
+  const n = streams.value.length;
+  if (n <= 1) return "grid-cols-1";
+  if (n <= 4) return "grid-cols-2";
+  return "grid-cols-3";
+});
+</script>
+
+<template>
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Stream grid -->
+    <div class="flex-1 p-4 overflow-auto">
+      <div
+        v-if="streams.length"
+        class="grid gap-4 h-full auto-rows-fr"
+        :class="gridCols"
+      >
+        <AVoiceTile
+          v-for="entry in streams"
+          :key="entry.key"
+          :stream="entry.stream"
+          :name="entry.name"
+          :color="entry.color"
+          :kind="entry.kind"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center h-full"
+      >
+        <div class="text-center">
+          <UIcon
+            name="i-lucide-video-off"
+            class="size-12 mb-3 text-(--ui-text-dimmed)"
+          />
+          <p class="text-sm text-(--ui-text-muted)">
+            {{ locale.noStreams }}
+          </p>
+          <p class="text-xs mt-1 text-(--ui-text-dimmed)">
+            {{ locale.turnOnCamera }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom controls bar -->
+    <div
+      v-if="isConnected && editable"
+      class="flex items-center justify-center gap-3 p-4 border-t border-(--ui-border) bg-(--ui-bg-elevated)/50"
+    >
+      <UButton
+        :icon="isMuted ? 'i-lucide-mic-off' : 'i-lucide-mic'"
+        size="lg"
+        :color="isMuted ? 'error' : 'neutral'"
+        :variant="isMuted ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleMute"
+      />
+      <UButton
+        :icon="isVideoEnabled ? 'i-lucide-video' : 'i-lucide-video-off'"
+        size="lg"
+        :color="isVideoEnabled ? 'primary' : 'neutral'"
+        :variant="isVideoEnabled ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleVideo"
+      />
+      <UButton
+        v-if="canScreenShare"
+        :icon="isScreenEnabled ? 'i-lucide-monitor-up' : 'i-lucide-monitor'"
+        size="lg"
+        :color="isScreenEnabled ? 'primary' : 'neutral'"
+        :variant="isScreenEnabled ? 'subtle' : 'outline'"
+        class="rounded-full"
+        @click="toggleScreen"
+      />
+      <UButton
+        icon="i-lucide-phone-off"
+        size="lg"
+        color="error"
+        variant="solid"
+        class="rounded-full"
+        @click="leaveRoom"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = {
+    docId: string;
+    childProvider?: any;
+    docLabel: string;
+    labels?: Partial<AbracadabraLocale['renderers']['call']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/components/renderers/AChecklistRenderer.d.vue.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']['checklist']>;
+    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;