@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/renderers/ATimelineRenderer.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']['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/components/renderers/ATimelineRenderer.vue

@@ -0,0 +1,468 @@
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useTimelineView } from "../../composables/useTimelineView";
+import { DEFAULT_LOCALE } from "../../locale";
+import ATimelineToolbar from "./timeline/ATimelineToolbar.vue";
+import ATimelineLabelPanel from "./timeline/ATimelineLabelPanel.vue";
+import ATimelineAxis from "./timeline/ATimelineAxis.vue";
+import ATimelineBarArea from "./timeline/ATimelineBarArea.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 }
+});
+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 timelineContainerRef = ref(null);
+const scrollBodyRef = ref(null);
+const storedPpd = computed(() => {
+  const entry = tree.treeMap.get(props.docId);
+  const val = entry?.meta?.timelinePixelsPerDay;
+  return val ? Number(val) : void 0;
+});
+const storedZoom = computed(
+  () => tree.treeMap.get(props.docId)?.meta?.timelineZoom
+);
+const storedCenter = computed(
+  () => tree.treeMap.get(props.docId)?.meta?.timelineCenterDate
+);
+const timelineEntries = computed(() => {
+  const directChildren = tree.childrenOf(null);
+  const result = [...directChildren];
+  for (const epic of directChildren) {
+    result.push(...tree.childrenOf(epic.id));
+  }
+  return result;
+});
+const tl = useTimelineView({
+  containerRef: timelineContainerRef,
+  scrollContainerRef: scrollBodyRef,
+  storedPixelsPerDay: storedPpd,
+  storedZoomLevel: storedZoom,
+  storedCenterDate: storedCenter,
+  entries: timelineEntries,
+  onViewChange: (ppd, centerDate) => {
+    if (!props.editable) return;
+    tree.updateMeta(props.docId, {
+      timelinePixelsPerDay: ppd,
+      timelineCenterDate: centerDate
+    });
+  }
+});
+const epics = computed(() => tree.childrenOf(null));
+let viewportBroadcastTimer = null;
+watch([tl.pixelsPerDay, tl.centerDate], () => {
+  if (viewportBroadcastTimer) clearTimeout(viewportBroadcastTimer);
+  viewportBroadcastTimer = setTimeout(() => {
+    viewportBroadcastTimer = null;
+    setLocalState({
+      "timeline:camera": {
+        pixelsPerDay: tl.pixelsPerDay.value,
+        centerMs: tl.centerDate.value.getTime(),
+        t: Date.now()
+      }
+    });
+  }, 150);
+});
+const showLabels = ref(true);
+const LABEL_MIN = 80;
+const LABEL_MAX = 480;
+const labelWidth = ref(192);
+let resizing = false;
+let resizeStartX = 0;
+let resizeStartWidth = 0;
+function onResizePointerDown(e) {
+  e.preventDefault();
+  resizing = true;
+  resizeStartX = e.clientX;
+  resizeStartWidth = labelWidth.value;
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+  document.addEventListener("pointermove", onResizePointerMove);
+  document.addEventListener("pointerup", onResizePointerUp);
+}
+function onResizePointerMove(e) {
+  if (!resizing) return;
+  labelWidth.value = Math.max(LABEL_MIN, Math.min(LABEL_MAX, resizeStartWidth + (e.clientX - resizeStartX)));
+}
+function onResizePointerUp() {
+  resizing = false;
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+  document.removeEventListener("pointermove", onResizePointerMove);
+  document.removeEventListener("pointerup", onResizePointerUp);
+}
+function addEpic() {
+  if (!props.editable) return;
+  const id = tree.createChild(null, locale.value.newEpic);
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now);
+  end.setDate(end.getDate() + 14);
+  tree.updateMeta(id, {
+    dateStart: tl.toDateStr(now),
+    dateEnd: tl.toDateStr(end),
+    taskProgress: 0,
+    color: "#6366f1"
+  });
+}
+function addMilestone(epicId) {
+  if (!props.editable) return;
+  const id = tree.createChild(epicId ?? null, locale.value.newMilestone);
+  const now = tl.toDateStr(/* @__PURE__ */ new Date());
+  tree.updateMeta(id, {
+    dateStart: now,
+    color: "#f59e0b"
+  });
+}
+function addTask(epicId) {
+  if (!props.editable) return;
+  const id = tree.createChild(epicId, locale.value.newTask);
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now);
+  end.setDate(end.getDate() + 7);
+  tree.updateMeta(id, {
+    dateStart: tl.toDateStr(now),
+    dateEnd: tl.toDateStr(end),
+    taskProgress: 0,
+    color: "#818cf8"
+  });
+}
+const renameId = ref(null);
+const renameValue = ref("");
+let renameCooldown = false;
+function startRename(id, label) {
+  if (!props.editable) return;
+  renameId.value = id;
+  renameValue.value = label;
+  renameCooldown = true;
+  setTimeout(() => {
+    renameCooldown = false;
+  }, 200);
+}
+function commitRename() {
+  if (renameCooldown) return;
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
+  }
+  renameId.value = null;
+}
+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);
+  }
+});
+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) return;
+  barDragId.value = id;
+  barDidMove.value = false;
+  barHoverEpicId.value = null;
+  lastDaysShifted = 0;
+  barDragStart.value = {
+    clientX: e.clientX,
+    origStart: meta.dateStart,
+    origEnd: meta.dateEnd ?? meta.dateStart
+  };
+  document.addEventListener("pointermove", onDocBarPointerMove);
+  document.addEventListener("pointerup", onDocBarPointerUp);
+}
+function onDocBarPointerMove(e) {
+  if (!barDragId.value) return;
+  const id = barDragId.value;
+  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 / tl.pixelsPerDay.value);
+  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();
+  const isMilestone = barDragStart.value.origStart === barDragStart.value.origEnd;
+  const newMeta = {
+    dateStart: new Date(s0 + daysShifted * MS).toISOString().slice(0, 10)
+  };
+  if (!isMilestone) {
+    newMeta.dateEnd = new Date(e0 + daysShifted * MS).toISOString().slice(0, 10);
+  }
+  tree.updateMeta(id, newMeta);
+}
+function onDocBarPointerUp() {
+  document.removeEventListener("pointermove", onDocBarPointerMove);
+  document.removeEventListener("pointerup", onDocBarPointerUp);
+  if (!barDragId.value) return;
+  const id = barDragId.value;
+  const entry = tree.entries.value.find((en) => en.id === id);
+  const currentParent = entry?.parentId;
+  if (currentParent && barHoverEpicId.value && barHoverEpicId.value !== currentParent) {
+    tree.moveEntry(id, barHoverEpicId.value, Date.now());
+  }
+  barDragId.value = null;
+  barHoverEpicId.value = null;
+}
+function onBarClick(id, label) {
+  if (barDidMove.value) return;
+  openNode(id, label);
+}
+function focusItem(id) {
+  setLocalState({ "timeline:focused": id });
+}
+function unfocusItem() {
+  setLocalState({ "timeline:focused": null });
+}
+function itemFocusers(itemId) {
+  const result = [];
+  for (const s of states.value) {
+    if (s.clientId === myClientId.value) continue;
+    if (s["timeline:focused"] === itemId && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+const remoteViewers = computed(
+  () => states.value.filter((s) => s.clientId !== myClientId.value && s.user).map((s) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "",
+    color: s.user?.color ?? "#888"
+  }))
+);
+function goToDate(dateStr) {
+  const d = new Date(dateStr);
+  if (!Number.isNaN(d.getTime())) tl.navigateTo(d);
+}
+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 });
+onBeforeUnmount(() => {
+  setLocalState({ "timeline:focused": null });
+  document.removeEventListener("pointermove", onDocBarPointerMove);
+  document.removeEventListener("pointerup", onDocBarPointerUp);
+  document.removeEventListener("pointermove", onResizePointerMove);
+  document.removeEventListener("pointerup", onResizePointerUp);
+});
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Toolbar -->
+    <ATimelineToolbar
+      :pixels-per-day="tl.pixelsPerDay.value"
+      :is-mobile="tl.isMobile.value"
+      :show-labels="showLabels"
+      :remote-viewers="remoteViewers"
+      :editable="editable"
+      :labels="labels"
+      @zoom-in="tl.zoomIn()"
+      @zoom-out="tl.zoomOut()"
+      @today="tl.goToday()"
+      @go-to-date="goToDate"
+      @add-epic="addEpic"
+      @add-milestone="addMilestone()"
+      @toggle-labels="showLabels = !showLabels"
+      @fit="tl.fitToContent()"
+    />
+
+    <!-- Content -->
+    <div class="flex-1 min-h-0 overflow-hidden">
+      <!-- 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 flex-col h-full"
+      >
+        <!-- Fixed axis header row -->
+        <div class="flex flex-shrink-0 bg-(--ui-bg) z-20">
+          <!-- Label panel header spacer -->
+          <div
+            class="flex-shrink-0 border-r border-(--ui-border) h-10 transition-[width] overflow-hidden"
+            :style="showLabels ? { width: labelWidth + 'px' } : { width: '0px' }"
+          />
+          <!-- Resize handle (header) -->
+          <div
+            v-if="showLabels"
+            class="flex-shrink-0 w-1 -ml-0.5 h-10 cursor-col-resize z-30 hover:bg-(--ui-primary)/30"
+            @pointerdown="onResizePointerDown"
+          />
+          <!-- Axis (wheel + pointer for zoom/pan) -->
+          <div
+            ref="timelineContainerRef"
+            class="flex-1 overflow-hidden cursor-grab select-none h-10 touch-none"
+            @wheel.prevent="tl.onWheel"
+            @pointerdown="tl.onPanPointerDown"
+            @pointermove="tl.onPanPointerMove"
+            @pointerup="tl.onPanPointerUp"
+            @touchstart.passive="tl.onTouchStart"
+            @touchmove="tl.onTouchMove"
+            @touchend.passive="tl.onTouchEnd"
+          >
+            <ATimelineAxis
+              :labels="tl.axisLabels.value"
+              :today-offset="tl.todayOffset.value"
+              :container-width="tl.containerWidth.value"
+            />
+          </div>
+        </div>
+
+        <!-- Shared scrollable body -->
+        <div
+          ref="scrollBodyRef"
+          class="flex flex-1 min-h-0 overflow-y-auto overflow-x-hidden items-start"
+        >
+          <!-- Label panel -->
+          <ATimelineLabelPanel
+            :epics="epics"
+            :tree="tree"
+            :epic-drag-id="epicDragId"
+            :epic-drag-over="epicDragOver"
+            :rename-id="renameId"
+            :rename-value="renameValue"
+            :visible="showLabels"
+            :label-width="labelWidth"
+            :item-focusers="itemFocusers"
+            :editable="editable"
+            :labels="labels"
+            @open-node="openNode"
+            @add-task="addTask"
+            @add-milestone="addMilestone"
+            @epic-pointer-down="handleEpicPointerDown"
+            @start-rename="startRename"
+            @rename-input="renameValue = $event"
+            @rename-commit="commitRename"
+            @rename-cancel="renameId = null"
+            @delete-entry="tree.deleteEntry($event)"
+            @duplicate-entry="tree.duplicateEntry($event)"
+          />
+
+          <!-- Resize handle (body) -->
+          <div
+            v-if="showLabels"
+            class="flex-shrink-0 w-1 -ml-0.5 cursor-col-resize z-30 hover:bg-(--ui-primary)/30"
+            @pointerdown="onResizePointerDown"
+          />
+
+          <!-- Bar area (wheel intercepted for zoom, pointer for pan) -->
+          <div
+            class="flex-1 relative cursor-grab select-none min-w-0 touch-none"
+            @wheel.prevent="tl.onWheel"
+            @pointerdown="tl.onPanPointerDown"
+            @pointermove="tl.onPanPointerMove"
+            @pointerup="tl.onPanPointerUp"
+            @touchstart.passive="tl.onTouchStart"
+            @touchmove="tl.onTouchMove"
+            @touchend.passive="tl.onTouchEnd"
+          >
+            <ATimelineBarArea
+              :epics="epics"
+              :tree="tree"
+              :date-to-x="tl.dateToX"
+              :span-width="tl.spanWidth"
+              :today-offset="tl.todayOffset.value"
+              :bar-drag-id="barDragId"
+              :bar-hover-epic-id="barHoverEpicId"
+              :item-focusers="itemFocusers"
+              :editable="editable"
+              @bar-pointer-down="onBarPointerDown"
+              @bar-click="onBarClick"
+              @focus-item="focusItem"
+              @unfocus-item="unfocusItem"
+            />
+          </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/components/renderers/calendar/ACalendarDayCell.d.vue.ts

@@ -0,0 +1,41 @@
+import type { CalendarCell, CalendarEvent } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    cell: CalendarCell;
+    dragOverContainer?: string | null;
+    dragId?: string | null;
+    eventFocusers: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    renameId?: string | null;
+    renameValue?: string;
+    isCurrentMonth?: boolean;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "rename-input": (value: string) => any;
+    "rename-commit": () => any;
+    "rename-cancel": () => any;
+    "create-event": (date: Date) => any;
+    "open-event": (event: CalendarEvent) => any;
+    "focus-event": (id: string) => any;
+    "unfocus-event": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onRename-input"?: ((value: string) => any) | undefined;
+    "onRename-commit"?: (() => any) | undefined;
+    "onRename-cancel"?: (() => any) | undefined;
+    "onCreate-event"?: ((date: Date) => any) | undefined;
+    "onOpen-event"?: ((event: CalendarEvent) => any) | undefined;
+    "onFocus-event"?: ((id: string) => any) | undefined;
+    "onUnfocus-event"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/calendar/ACalendarDayCell.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from "vue";
+import ACalendarEventChip from "./ACalendarEventChip.vue";
+const props = defineProps({
+  cell: { type: Object, required: true },
+  dragOverContainer: { type: [String, null], required: false },
+  dragId: { type: [String, null], required: false },
+  eventFocusers: { type: Function, required: true },
+  renameId: { type: [String, null], required: false },
+  renameValue: { type: String, required: false },
+  isCurrentMonth: { type: Boolean, required: false },
+  editable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["create-event", "open-event", "drag-start", "focus-event", "unfocus-event", "rename-input", "rename-commit", "rename-cancel"]);
+const isDropTarget = computed(
+  () => props.cell.dateStr && props.dragOverContainer === props.cell.dateStr
+);
+</script>
+
+<template>
+  <div
+    class="min-h-0 overflow-hidden bg-(--ui-bg-elevated) border-b border-r border-(--ui-border)/30 p-1 transition-colors relative group/cell"
+    :class="{
+  'ring-2 ring-(--ui-primary)/40 bg-(--ui-primary)/5': isDropTarget,
+  'opacity-50': !isCurrentMonth
+}"
+    :data-drop-container="cell.dateStr ?? void 0"
+  >
+    <template v-if="cell.date">
+      <!-- Date number + hover add button -->
+      <div class="flex items-center justify-between mb-0.5">
+        <button
+          class="text-xs font-medium w-6 h-6 rounded-full flex items-center justify-center transition-colors shrink-0"
+          :class="
+  cell.isToday ? 'bg-(--ui-primary) text-white' : 'text-(--ui-text) hover:bg-(--ui-bg)'
+"
+          @click="editable !== false && emit('create-event', cell.date)"
+        >
+          {{ cell.date.getDate() }}
+        </button>
+        <button
+          v-if="editable !== false"
+          class="w-5 h-5 rounded-full flex items-center justify-center text-(--ui-text-dimmed) hover:text-(--ui-primary) hover:bg-(--ui-bg) opacity-0 group-hover/cell:opacity-100 transition-opacity text-xs shrink-0"
+          @click="emit('create-event', cell.date)"
+        >
+          <UIcon
+            name="i-lucide-plus"
+            class="size-3"
+          />
+        </button>
+      </div>
+
+      <!-- Multi-day span bar slots -->
+      <div
+        v-for="(slot, li) in cell.laneSlots"
+        :key="'lane-' + li"
+        class="h-[22px] flex items-center -mx-1"
+      >
+        <ACalendarEventChip
+          v-if="slot.type === 'span'"
+          :event="{ id: slot.id, label: slot.label, color: slot.color, icon: slot.icon, datetimeStart: '', datetimeEnd: '', allDay: true, entry: {} }"
+          span
+          :is-start="slot.isStart"
+          :is-end="slot.isEnd"
+          :is-dragging="dragId === slot.id"
+          :focusers="eventFocusers(slot.id)"
+          :rename-id="renameId"
+          :rename-value="renameValue"
+          @click="emit('open-event', $event)"
+          @drag-start="emit('drag-start', $event)"
+          @pointer-enter="emit('focus-event', slot.id)"
+          @pointer-leave="emit('unfocus-event')"
+          @rename-input="emit('rename-input', $event)"
+          @rename-commit="emit('rename-commit')"
+          @rename-cancel="emit('rename-cancel')"
+        />
+      </div>
+
+      <!-- Single-day events -->
+      <div
+        class="space-y-0.5"
+        :class="{ 'mt-0.5': cell.laneSlots.length > 0 }"
+      >
+        <ACalendarEventChip
+          v-for="evt in cell.events.slice(0, 3)"
+          :key="evt.id"
+          :event="evt"
+          :is-dragging="dragId === evt.id"
+          :focusers="eventFocusers(evt.id)"
+          :rename-id="renameId"
+          :rename-value="renameValue"
+          @click="emit('open-event', $event)"
+          @drag-start="emit('drag-start', $event)"
+          @pointer-enter="emit('focus-event', evt.id)"
+          @pointer-leave="emit('unfocus-event')"
+          @rename-input="emit('rename-input', $event)"
+          @rename-commit="emit('rename-commit')"
+          @rename-cancel="emit('rename-cancel')"
+        />
+        <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>
+</template>