@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/components/renderers/table/cells/ATableCellColor.vue

@@ -1,26 +1,22 @@
 <script setup>
 import { ref, computed, watch } from "vue";
+import AColorPalettePopover from "../../../editor/AColorPalettePopover.vue";
 const props = defineProps({
-  value: { type: null, required: true }
+  value: { type: null, required: true },
+  metaType: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
-const inputRef = ref();
 const popoverOpen = ref(false);
-const editValue = ref("");
 const colorStr = computed(() => {
   if (typeof props.value === "string" && props.value) return props.value;
   return "";
 });
 watch(popoverOpen, (v) => {
-  if (v) {
-    editValue.value = colorStr.value || "#6366f1";
-    emit("startEdit");
-  } else {
-    emit("stopEdit");
-  }
+  if (v) emit("startEdit");
+  else emit("stopEdit");
 });
-function commit() {
-  emit("update:modelValue", editValue.value);
+function onColor(c) {
+  emit("update:modelValue", c);
   popoverOpen.value = false;
   emit("stopEdit");
 }
@@ -31,9 +27,11 @@ function commit() {
     class="min-h-5 flex items-center"
     @click.stop
   >
-    <UPopover
-      v-model:open="popoverOpen"
-      :content="{ align: 'start' }"
+    <AColorPalettePopover
+      :model-value="colorStr"
+      :open="popoverOpen"
+      @update:model-value="onColor"
+      @update:open="popoverOpen = $event"
     >
       <button class="flex items-center gap-1.5 cursor-pointer">
         <span
@@ -45,23 +43,6 @@ function commit() {
           class="text-xs text-(--ui-text-muted) font-mono"
         >{{ colorStr }}</span>
       </button>
-      <template #content>
-        <div class="p-3">
-          <input
-            ref="inputRef"
-            v-model="editValue"
-            type="color"
-            class="w-32 h-8 cursor-pointer"
-          >
-          <div class="flex justify-end mt-2">
-            <UButton
-              size="xs"
-              label="Apply"
-              @click="commit"
-            />
-          </div>
-        </div>
-      </template>
-    </UPopover>
+    </AColorPalettePopover>
   </div>
 </template>

package/dist/runtime/components/renderers/table/cells/ATableCellColor.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     value: unknown;
+    metaType?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: unknown) => any;

package/dist/runtime/components/renderers/timeline/ATimelineBar.d.vue.ts

@@ -10,14 +10,20 @@ type __VLS_Props = {
         name: string;
         color: string;
     }>;
+    viewers?: Array<{
+        name: string;
+        color: string;
+    }>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (id: string, label: string) => any;
+    "resize-start": (e: PointerEvent, id: string) => any;
     "pointer-enter": (id: string) => any;
     "pointer-leave": () => any;
     "pointer-down": (e: PointerEvent, id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((id: string, label: string) => any) | undefined;
+    "onResize-start"?: ((e: PointerEvent, id: string) => any) | undefined;
     "onPointer-enter"?: ((id: string) => any) | undefined;
     "onPointer-leave"?: (() => any) | undefined;
     "onPointer-down"?: ((e: PointerEvent, id: string) => any) | undefined;

package/dist/runtime/components/renderers/timeline/ATimelineBar.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { avatarBorderStyle } from "../../../utils/avatarStyle";
 const props = defineProps({
   entry: { type: Object, required: true },
   left: { type: Number, required: true },
@@ -7,10 +8,17 @@ const props = defineProps({
   color: { type: String, required: true },
   isTask: { type: Boolean, required: false },
   isDragging: { type: Boolean, required: false },
-  focusers: { type: Array, required: false }
+  focusers: { type: Array, required: false },
+  viewers: { type: Array, required: false }
 });
-const emit = defineEmits(["pointer-down", "pointer-enter", "pointer-leave", "click"]);
+const emit = defineEmits(["pointer-down", "resize-start", "pointer-enter", "pointer-leave", "click"]);
 const focusBorder = computed(() => {
+  if (props.viewers?.length) {
+    return {
+      outline: `4px solid ${props.viewers[0].color}`,
+      outlineOffset: "1px"
+    };
+  }
   if (!props.focusers?.length) return {};
   return {
     outline: `2px solid ${props.focusers[0].color}`,
@@ -38,9 +46,24 @@ const focusBorder = computed(() => {
     @pointerleave="emit('pointer-leave')"
     @click.stop="emit('click', entry.id, entry.label)"
   >
-    <!-- Remote hover badge -->
+    <!-- Remote viewer cluster (slideover/full open) — wins over hover badge -->
+    <div
+      v-if="viewers?.length"
+      class="absolute -top-2.5 right-1 flex -space-x-1 z-20 pointer-events-none"
+    >
+      <UAvatar
+        v-for="(u, i) in viewers.slice(0, 3)"
+        :key="`v-${i}`"
+        size="3xs"
+        :alt="u.name"
+        :title="u.name"
+        :style="avatarBorderStyle(u.color, 'zinc')"
+      />
+    </div>
+
+    <!-- Remote hover badge (only when no viewer is shown) -->
     <span
-      v-if="focusers?.length"
+      v-else-if="focusers?.length"
       class="absolute -top-3 left-1 text-[10px] px-1 rounded text-white leading-tight z-10 pointer-events-none"
       :style="{ backgroundColor: focusers[0].color }"
     >
@@ -55,5 +78,12 @@ const focusBorder = computed(() => {
       class="absolute bottom-0 left-0 h-0.5 rounded-b bg-white/30"
       :style="{ width: `${Number(entry.meta.taskProgress)}%` }"
     />
+
+    <!-- Right-edge resize handle -->
+    <div
+      class="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-white/30 rounded-r"
+      style="touch-action: none"
+      @pointerdown.stop="emit('resize-start', $event, entry.id)"
+    />
   </div>
 </template>

package/dist/runtime/components/renderers/timeline/ATimelineBar.vue.d.ts

@@ -10,14 +10,20 @@ type __VLS_Props = {
         name: string;
         color: string;
     }>;
+    viewers?: Array<{
+        name: string;
+        color: string;
+    }>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (id: string, label: string) => any;
+    "resize-start": (e: PointerEvent, id: string) => any;
     "pointer-enter": (id: string) => any;
     "pointer-leave": () => any;
     "pointer-down": (e: PointerEvent, id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((id: string, label: string) => any) | undefined;
+    "onResize-start"?: ((e: PointerEvent, id: string) => any) | undefined;
     "onPointer-enter"?: ((id: string) => any) | undefined;
     "onPointer-leave"?: (() => any) | undefined;
     "onPointer-down"?: ((e: PointerEvent, id: string) => any) | undefined;

package/dist/runtime/components/renderers/timeline/ATimelineBarArea.d.vue.ts

@@ -2,27 +2,43 @@ import type { TreeEntry } from '../../../composables/useChildTree.js';
 type __VLS_Props = {
     epics: TreeEntry[];
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    /** Pixel offset for a date string */
     dateToX: (dateStr: string) => number;
+    /** Width between two dates */
     spanWidth: (start: string, end: string) => number;
+    /** Today line offset */
     todayOffset: number;
+    /** Whether bar is being dragged */
     barDragId?: string | null;
+    /** Epic row hovered during drag */
     barHoverEpicId?: string | null;
+    /** Item focusers */
     itemFocusers: (id: string) => Array<{
         name: string;
         color: string;
     }>;
+    /** Item viewers (slideover/full open) — heavier than focusers */
+    itemViewers?: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    /** Whether the user has write permission */
     editable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "bar-pointer-down": (e: PointerEvent, id: string) => any;
+    "bar-resize-start": (e: PointerEvent, id: string) => any;
     "bar-click": (id: string, label: string) => any;
     "focus-item": (id: string) => any;
     "unfocus-item": () => any;
+    "context-menu": (e: MouseEvent, id: string, label: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onBar-pointer-down"?: ((e: PointerEvent, id: string) => any) | undefined;
+    "onBar-resize-start"?: ((e: PointerEvent, id: string) => any) | undefined;
     "onBar-click"?: ((id: string, label: string) => any) | undefined;
     "onFocus-item"?: ((id: string) => any) | undefined;
     "onUnfocus-item"?: (() => any) | undefined;
+    "onContext-menu"?: ((e: MouseEvent, id: string, label: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/timeline/ATimelineBarArea.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ATimelineBar from "./ATimelineBar.vue";
 import ATimelineMilestone from "./ATimelineMilestone.vue";
-const _props = defineProps({
+defineProps({
   epics: { type: Array, required: true },
   tree: { type: null, required: true },
   dateToX: { type: Function, required: true },
@@ -10,9 +10,10 @@ const _props = defineProps({
   barDragId: { type: [String, null], required: false },
   barHoverEpicId: { type: [String, null], required: false },
   itemFocusers: { type: Function, required: true },
+  itemViewers: { type: Function, required: false },
   editable: { type: Boolean, required: false }
 });
-const emit = defineEmits(["bar-pointer-down", "bar-click", "focus-item", "unfocus-item"]);
+const emit = defineEmits(["bar-pointer-down", "bar-resize-start", "bar-click", "focus-item", "unfocus-item", "context-menu"]);
 function isMilestone(entry) {
   return !entry.meta?.dateEnd || entry.meta.dateEnd === entry.meta.dateStart;
 }
@@ -30,7 +31,10 @@ function isMilestone(entry) {
       :class="barHoverEpicId === epic.id && barDragId ? 'bg-(--ui-primary)/5' : ''"
     >
       <!-- Epic bar row -->
-      <div class="h-10 relative border-b border-(--ui-border)">
+      <div
+        class="h-10 relative border-b border-(--ui-border)"
+        @contextmenu.prevent="editable !== false && emit('context-menu', $event, epic.id, epic.label)"
+      >
         <template v-if="epic.meta?.dateStart">
           <ATimelineMilestone
             v-if="isMilestone(epic)"
@@ -39,6 +43,7 @@ function isMilestone(entry) {
             :color="epic.meta?.color ?? '#6366f1'"
             :is-dragging="barDragId === epic.id"
             :focusers="itemFocusers(epic.id)"
+            :viewers="itemViewers ? itemViewers(epic.id) : void 0"
             @pointer-down="emit('bar-pointer-down', $event, epic.id)"
             @pointer-enter="emit('focus-item', epic.id)"
             @pointer-leave="emit('unfocus-item')"
@@ -52,7 +57,9 @@ function isMilestone(entry) {
             :color="epic.meta?.color ?? '#6366f1'"
             :is-dragging="barDragId === epic.id"
             :focusers="itemFocusers(epic.id)"
+            :viewers="itemViewers ? itemViewers(epic.id) : void 0"
             @pointer-down="emit('bar-pointer-down', $event, epic.id)"
+            @resize-start="emit('bar-resize-start', $event, epic.id)"
             @pointer-enter="emit('focus-item', epic.id)"
             @pointer-leave="emit('unfocus-item')"
             @click="emit('bar-click', epic.id, epic.label)"
@@ -65,6 +72,7 @@ function isMilestone(entry) {
         v-for="task in tree.childrenOf(epic.id)"
         :key="task.id"
         class="h-9 relative border-b border-(--ui-border)"
+        @contextmenu.prevent="editable !== false && emit('context-menu', $event, task.id, task.label)"
       >
         <template v-if="task.meta?.dateStart">
           <ATimelineMilestone
@@ -74,6 +82,7 @@ function isMilestone(entry) {
             :color="task.meta?.color ?? '#818cf8'"
             :is-dragging="barDragId === task.id"
             :focusers="itemFocusers(task.id)"
+            :viewers="itemViewers ? itemViewers(task.id) : void 0"
             @pointer-down="emit('bar-pointer-down', $event, task.id)"
             @pointer-enter="emit('focus-item', task.id)"
             @pointer-leave="emit('unfocus-item')"
@@ -88,7 +97,9 @@ function isMilestone(entry) {
             is-task
             :is-dragging="barDragId === task.id"
             :focusers="itemFocusers(task.id)"
+            :viewers="itemViewers ? itemViewers(task.id) : void 0"
             @pointer-down="emit('bar-pointer-down', $event, task.id)"
+            @resize-start="emit('bar-resize-start', $event, task.id)"
             @pointer-enter="emit('focus-item', task.id)"
             @pointer-leave="emit('unfocus-item')"
             @click="emit('bar-click', task.id, task.label)"

package/dist/runtime/components/renderers/timeline/ATimelineBarArea.vue.d.ts

@@ -2,27 +2,43 @@ import type { TreeEntry } from '../../../composables/useChildTree.js';
 type __VLS_Props = {
     epics: TreeEntry[];
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    /** Pixel offset for a date string */
     dateToX: (dateStr: string) => number;
+    /** Width between two dates */
     spanWidth: (start: string, end: string) => number;
+    /** Today line offset */
     todayOffset: number;
+    /** Whether bar is being dragged */
     barDragId?: string | null;
+    /** Epic row hovered during drag */
     barHoverEpicId?: string | null;
+    /** Item focusers */
     itemFocusers: (id: string) => Array<{
         name: string;
         color: string;
     }>;
+    /** Item viewers (slideover/full open) — heavier than focusers */
+    itemViewers?: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    /** Whether the user has write permission */
     editable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "bar-pointer-down": (e: PointerEvent, id: string) => any;
+    "bar-resize-start": (e: PointerEvent, id: string) => any;
     "bar-click": (id: string, label: string) => any;
     "focus-item": (id: string) => any;
     "unfocus-item": () => any;
+    "context-menu": (e: MouseEvent, id: string, label: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onBar-pointer-down"?: ((e: PointerEvent, id: string) => any) | undefined;
+    "onBar-resize-start"?: ((e: PointerEvent, id: string) => any) | undefined;
     "onBar-click"?: ((id: string, label: string) => any) | undefined;
     "onFocus-item"?: ((id: string) => any) | undefined;
     "onUnfocus-item"?: (() => any) | undefined;
+    "onContext-menu"?: ((e: MouseEvent, id: string, label: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/timeline/ATimelineLabelPanel.d.vue.ts

@@ -1,19 +1,31 @@
 import type { TreeEntry } from '../../../composables/useChildTree.js';
-import type { AbracadabraLocale } from '../../../locale.js';
+import { type AbracadabraLocale } from '../../../locale.js';
 type __VLS_Props = {
     epics: TreeEntry[];
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    /** Currently dragged epic id */
     epicDragId?: string | null;
     epicDragOver?: string | null;
+    /** Inline rename state */
     renameId?: string | null;
     renameValue?: string;
+    /** Whether to show panel (for mobile toggle) */
     visible?: boolean;
+    /** Panel width in px (controlled by parent resize handle) */
     labelWidth?: number;
+    /** Remote focusers for items */
     itemFocusers: (id: string) => Array<{
         name: string;
         color: string;
     }>;
+    /** Remote viewers (slideover/full open) */
+    itemViewers?: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    /** Whether the user has write permission */
     editable?: boolean;
+    /** Locale overrides */
     labels?: Partial<AbracadabraLocale['renderers']['timeline']>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/renderers/timeline/ATimelineLabelPanel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig } from "#imports";
+import { avatarBorderStyle } from "../../../utils/avatarStyle";
 import { DEFAULT_LOCALE } from "../../../locale";
 const props = defineProps({
   epics: { type: Array, required: true },
@@ -12,40 +13,70 @@ const props = defineProps({
   visible: { type: Boolean, required: false },
   labelWidth: { type: Number, required: false },
   itemFocusers: { type: Function, required: true },
+  itemViewers: { type: Function, required: false },
   editable: { type: Boolean, required: false },
   labels: { type: Object, required: false }
 });
 const emit = defineEmits(["open-node", "add-task", "add-milestone", "epic-pointer-down", "start-rename", "rename-input", "rename-commit", "rename-cancel", "delete-entry", "duplicate-entry"]);
 const config = useRuntimeConfig();
-const locale = computed(() => ({
+const tt = computed(() => ({
   ...DEFAULT_LOCALE.renderers.timeline,
   ...config.public?.abracadabra?.locale?.renderers?.timeline ?? {},
   ...props.labels ?? {}
 }));
-function isMilestone(entry) {
-  return !entry.meta?.dateEnd || entry.meta.dateEnd === entry.meta.dateStart;
-}
 function epicMenuItems(epic) {
+  const t = tt.value;
   const items = [
     [
-      { label: "Open", icon: "i-lucide-external-link", onSelect: () => emit("open-node", epic.id, epic.label) },
+      { label: t.open, icon: "i-lucide-external-link", onSelect: () => emit("open-node", epic.id, epic.label) },
       ...props.editable !== false ? [
-        { label: "Rename", icon: "i-lucide-pencil", onSelect: () => emit("start-rename", epic.id, epic.label) },
-        { label: "Duplicate", icon: "i-lucide-copy", onSelect: () => emit("duplicate-entry", epic.id) }
+        { label: t.rename, icon: "i-lucide-pencil", onSelect: () => emit("start-rename", epic.id, epic.label) },
+        { label: t.duplicate, icon: "i-lucide-copy", onSelect: () => emit("duplicate-entry", epic.id) }
       ] : []
     ]
   ];
   if (props.editable !== false) {
     items.push([
-      { label: locale.value.addTask, icon: "i-lucide-plus", onSelect: () => emit("add-task", epic.id) },
-      { label: locale.value.addMilestone, icon: "i-lucide-diamond", onSelect: () => emit("add-milestone", epic.id) }
+      { label: t.addTask, icon: "i-lucide-plus", onSelect: () => emit("add-task", epic.id) },
+      { label: t.addMilestone, icon: "i-lucide-diamond", onSelect: () => emit("add-milestone", epic.id) }
     ]);
     items.push([
-      { label: "Delete", icon: "i-lucide-trash-2", color: "error", onSelect: () => emit("delete-entry", epic.id) }
+      { label: t.delete, icon: "i-lucide-trash-2", color: "error", onSelect: () => emit("delete-entry", epic.id) }
     ]);
   }
   return items;
 }
+function taskMenuItems(task) {
+  const t = tt.value;
+  const items = [
+    [
+      { label: t.open, icon: "i-lucide-external-link", onSelect: () => emit("open-node", task.id, task.label) },
+      ...props.editable !== false ? [
+        { label: t.rename, icon: "i-lucide-pencil", onSelect: () => emit("start-rename", task.id, task.label) },
+        { label: t.duplicate, icon: "i-lucide-copy", onSelect: () => emit("duplicate-entry", task.id) }
+      ] : []
+    ]
+  ];
+  if (props.editable !== false) {
+    items.push([
+      {
+        label: t.moveToEpic,
+        icon: "i-lucide-arrow-right",
+        children: props.epics.filter((e) => e.id !== task.parentId).map((e) => ({
+          label: e.label,
+          onSelect: () => props.tree.moveEntry(task.id, e.id, Date.now())
+        }))
+      }
+    ]);
+    items.push([
+      { label: t.delete, icon: "i-lucide-trash-2", color: "error", onSelect: () => emit("delete-entry", task.id) }
+    ]);
+  }
+  return items;
+}
+function isMilestone(entry) {
+  return !entry.meta?.dateEnd || entry.meta.dateEnd === entry.meta.dateStart;
+}
 </script>
 
 <template>
@@ -63,10 +94,7 @@ function epicMenuItems(epic) {
         :key="epic.id"
       >
         <!-- Epic row -->
-        <UDropdownMenu
-          :items="epicMenuItems(epic)"
-          :content="{ align: 'start' }"
-        >
+        <ANodeContextMenu :items="epicMenuItems(epic)">
           <button
             :data-drag-id="epic.id"
             class="h-10 w-full flex items-center px-3 text-sm font-medium border-b border-(--ui-border) hover:bg-(--ui-bg-elevated) text-left transition-colors relative"
@@ -77,14 +105,32 @@ function epicMenuItems(epic) {
     'opacity-40': epicDragId === epic.id
   }
 ]"
+            :style="itemViewers && itemViewers(epic.id).length > 0 ? {
+  borderLeft: `5px solid ${itemViewers(epic.id)[0].color}`,
+  backgroundColor: itemViewers(epic.id)[0].color + '14'
+} : void 0"
             style="touch-action: pan-y"
             @pointerdown="editable !== false && emit('epic-pointer-down', $event, epic.id)"
             @click="emit('open-node', epic.id, epic.label)"
-            @contextmenu.prevent
           >
-            <!-- Remote hover badge -->
+            <!-- Remote viewer cluster (slideover/full open) — heavier than hover -->
+            <div
+              v-if="itemViewers && itemViewers(epic.id).length > 0"
+              class="absolute right-1 top-1/2 -translate-y-1/2 flex -space-x-1 z-10 pointer-events-none"
+            >
+              <UAvatar
+                v-for="(u, i) in itemViewers(epic.id).slice(0, 3)"
+                :key="`v-${i}`"
+                size="3xs"
+                :alt="u.name"
+                :title="u.name"
+                :style="avatarBorderStyle(u.color, 'zinc')"
+              />
+            </div>
+
+            <!-- Remote hover badge (only when no viewer is shown) -->
             <span
-              v-if="itemFocusers(epic.id).length > 0"
+              v-else-if="itemFocusers(epic.id).length > 0"
               class="absolute -top-2 left-2 text-[10px] px-1 rounded text-white leading-tight z-10 pointer-events-none"
               :style="{ backgroundColor: itemFocusers(epic.id)[0].color }"
             >
@@ -115,40 +161,61 @@ function epicMenuItems(epic) {
               class="truncate flex-1"
             >{{ epic.label }}</span>
           </button>
-        </UDropdownMenu>
+        </ANodeContextMenu>
 
         <!-- Task rows -->
-        <button
+        <ANodeContextMenu
           v-for="task in tree.childrenOf(epic.id)"
           :key="task.id"
-          class="h-9 w-full flex items-center px-6 text-xs border-b border-(--ui-border) hover:bg-(--ui-bg-elevated) text-left relative"
-          :style="itemFocusers(task.id).length > 0 ? { borderLeft: `3px solid ${itemFocusers(task.id)[0].color}` } : void 0"
-          @click="emit('open-node', task.id, task.label)"
+          :items="taskMenuItems(task)"
         >
-          <UIcon
-            v-if="isMilestone(task)"
-            name="i-lucide-diamond"
-            class="size-3 mr-1.5 text-(--ui-text-dimmed) shrink-0"
-          />
-          <!-- Inline rename -->
-          <UInput
-            v-if="renameId === task.id"
-            :model-value="renameValue"
-            size="xs"
-            variant="none"
-            class="flex-1"
-            autofocus
-            @update:model-value="emit('rename-input', $event)"
-            @keydown.enter="emit('rename-commit')"
-            @keydown.escape="emit('rename-cancel')"
-            @blur="emit('rename-commit')"
-            @click.stop
-          />
-          <span
-            v-else
-            class="truncate text-(--ui-text-dimmed)"
-          >{{ task.label }}</span>
-        </button>
+          <button
+            class="h-9 w-full flex items-center px-6 text-xs border-b border-(--ui-border) hover:bg-(--ui-bg-elevated) text-left relative"
+            :style="itemViewers && itemViewers(task.id).length > 0 ? {
+  borderLeft: `5px solid ${itemViewers(task.id)[0].color}`,
+  backgroundColor: itemViewers(task.id)[0].color + '14'
+} : itemFocusers(task.id).length > 0 ? { borderLeft: `3px solid ${itemFocusers(task.id)[0].color}` } : void 0"
+            @click="emit('open-node', task.id, task.label)"
+          >
+            <!-- Remote viewer cluster on task row -->
+            <div
+              v-if="itemViewers && itemViewers(task.id).length > 0"
+              class="absolute right-1 top-1/2 -translate-y-1/2 flex -space-x-1 z-10 pointer-events-none"
+            >
+              <UAvatar
+                v-for="(u, i) in itemViewers(task.id).slice(0, 3)"
+                :key="`v-${i}`"
+                size="3xs"
+                :alt="u.name"
+                :title="u.name"
+                :style="avatarBorderStyle(u.color, 'zinc')"
+              />
+            </div>
+            <UIcon
+              v-if="isMilestone(task)"
+              name="i-lucide-diamond"
+              class="size-3 mr-1.5 text-(--ui-text-dimmed) shrink-0"
+            />
+            <!-- Inline rename -->
+            <UInput
+              v-if="renameId === task.id"
+              :model-value="renameValue"
+              size="xs"
+              variant="none"
+              class="flex-1"
+              autofocus
+              @update:model-value="emit('rename-input', $event)"
+              @keydown.enter="emit('rename-commit')"
+              @keydown.escape="emit('rename-cancel')"
+              @blur="emit('rename-commit')"
+              @click.stop
+            />
+            <span
+              v-else
+              class="truncate text-(--ui-text-dimmed)"
+            >{{ task.label }}</span>
+          </button>
+        </ANodeContextMenu>
 
         <!-- Add task row -->
         <button
@@ -156,7 +223,7 @@ function epicMenuItems(epic) {
           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="emit('add-task', epic.id)"
         >
-          + {{ locale.task }}
+          + {{ tt.task }}
         </button>
         <div
           v-else

package/dist/runtime/components/renderers/timeline/ATimelineLabelPanel.vue.d.ts

@@ -1,19 +1,31 @@
 import type { TreeEntry } from '../../../composables/useChildTree.js';
-import type { AbracadabraLocale } from '../../../locale.js';
+import { type AbracadabraLocale } from '../../../locale.js';
 type __VLS_Props = {
     epics: TreeEntry[];
     tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    /** Currently dragged epic id */
     epicDragId?: string | null;
     epicDragOver?: string | null;
+    /** Inline rename state */
     renameId?: string | null;
     renameValue?: string;
+    /** Whether to show panel (for mobile toggle) */
     visible?: boolean;
+    /** Panel width in px (controlled by parent resize handle) */
     labelWidth?: number;
+    /** Remote focusers for items */
     itemFocusers: (id: string) => Array<{
         name: string;
         color: string;
     }>;
+    /** Remote viewers (slideover/full open) */
+    itemViewers?: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    /** Whether the user has write permission */
     editable?: boolean;
+    /** Locale overrides */
     labels?: Partial<AbracadabraLocale['renderers']['timeline']>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {