@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -1,13 +1,18 @@
 <script setup>
-import { ref, computed } from "vue";
+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 { DEFAULT_LOCALE } from "../../locale";
+import { getMetaColor } from "../../utils/getMetaColor";
 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 }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,165 +20,510 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.kanban ?? {},
   ...props.labels ?? {}
 }));
-const { tree, childDoc } = useRendererBase(props);
-const columns = computed(() => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
-function cardsOf(colId) {
-  return tree.childrenOf(colId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-}
-const CARD_MIME = "application/x-abracadabra-card";
-const COL_MIME = "application/x-abracadabra-col";
-const draggingCardId = ref(null);
-const draggingColId = ref(null);
-const dragOverColId = ref(null);
-const dragOverCardId = ref(null);
-function onColDragStart(e, colId) {
-  draggingColId.value = colId;
-  e.dataTransfer?.setData(COL_MIME, colId);
-}
-function onColDragOver(e, colId) {
-  if (!draggingColId.value) return;
-  e.preventDefault();
-  dragOverColId.value = colId;
-}
-function onColDrop(e, targetColId) {
-  e.preventDefault();
-  const srcId = e.dataTransfer?.getData(COL_MIME) || draggingColId.value;
-  draggingColId.value = null;
-  dragOverColId.value = null;
-  if (!srcId || srcId === targetColId) return;
-  const targetCol = columns.value.find((c) => c.id === targetColId);
-  if (!targetCol) return;
-  const srcEntry = tree.treeMap.get(srcId);
-  if (!srcEntry) return;
-  tree.treeMap.set(srcId, { ...srcEntry, order: (targetCol.order ?? 0) - 0.5, updatedAt: Date.now() });
-}
-function onCardDragStart(e, cardId) {
-  draggingCardId.value = cardId;
-  e.dataTransfer?.setData(CARD_MIME, cardId);
-  e.stopPropagation();
-}
-function onCardDragOver(e, cardId) {
-  if (!draggingCardId.value) return;
-  e.preventDefault();
-  e.stopPropagation();
-  dragOverCardId.value = cardId;
-}
-function onCardDropOnCard(e, targetCardId) {
-  e.preventDefault();
-  e.stopPropagation();
-  const srcId = e.dataTransfer?.getData(CARD_MIME) || draggingCardId.value;
-  draggingCardId.value = null;
-  dragOverCardId.value = null;
-  if (!srcId || srcId === targetCardId) return;
-  const targetEntry = tree.treeMap.get(targetCardId);
-  const srcEntry = tree.treeMap.get(srcId);
-  if (!targetEntry || !srcEntry) return;
-  tree.treeMap.set(srcId, {
-    ...srcEntry,
-    parentId: targetEntry.parentId,
-    order: (targetEntry.order ?? 0) - 0.5,
-    updatedAt: Date.now()
-  });
-}
-function onCardDropOnColumn(e, colId) {
-  e.preventDefault();
-  const srcId = e.dataTransfer?.getData(CARD_MIME) || draggingCardId.value;
-  draggingCardId.value = null;
-  dragOverCardId.value = null;
-  dragOverColId.value = null;
-  if (!srcId) return;
-  const srcEntry = tree.treeMap.get(srcId);
-  if (!srcEntry) return;
-  const existingCards = cardsOf(colId);
-  const maxOrder = existingCards.length ? Math.max(...existingCards.map((c) => c.order ?? 0)) : 0;
-  tree.treeMap.set(srcId, {
-    ...srcEntry,
-    parentId: colId,
-    order: maxOrder + 1,
-    updatedAt: Date.now()
-  });
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  isLoading: _nodePanelLoading,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const columns = computed(() => tree.childrenOf(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;
 }
 function addColumn() {
+  if (!props.editable) return;
   tree.createChild(null, `${locale.value.newColumn} ${columns.value.length + 1}`);
 }
 function addCard(colId) {
+  if (!props.editable) return;
   tree.createChild(colId, locale.value.newCard);
 }
+const {
+  dragId: colDragId,
+  dragOverId: colDragOver,
+  handlePointerDown: colPointerDown
+} = useTouchDrag({
+  onDrop: (draggedId, targetId) => {
+    if (!props.editable) return;
+    const targetIdx = columns.value.findIndex((c) => c.id === targetId);
+    if (targetIdx < 0) return;
+    const newOrder = orderBetween(columns.value, targetIdx);
+    tree.moveEntry(draggedId, null, newOrder);
+  },
+  onDragStart: () => {
+  },
+  onDragEnd: () => {
+  }
+});
+const {
+  dragId: dragCardId,
+  dragOverId: dragOverCardId,
+  dragOverContainer: dragOverColumnId,
+  handlePointerDown: cardPointerDown
+} = useTouchDrag({
+  onDrop: (draggedId, targetId) => {
+    if (!props.editable) return;
+    for (const col of columns.value) {
+      const cards = tree.childrenOf(col.id);
+      const hasSource = cards.some((c) => c.id === draggedId);
+      const targetIdx = cards.findIndex((c) => c.id === targetId);
+      if (hasSource && targetIdx >= 0) {
+        const newOrder = orderBetween(cards, targetIdx);
+        tree.moveEntry(draggedId, col.id, newOrder);
+        break;
+      }
+    }
+    setLocalState({ "kanban:dragging": null });
+  },
+  onMoveToContainer: (draggedId, containerId, targetId) => {
+    if (!props.editable) return;
+    const cards = tree.childrenOf(containerId);
+    if (targetId) {
+      const targetIdx = cards.findIndex((c) => c.id === targetId);
+      const newOrder = orderBetween(cards, targetIdx >= 0 ? targetIdx : cards.length);
+      tree.moveEntry(draggedId, containerId, newOrder);
+    } else {
+      const newOrder = orderBetween(cards, cards.length);
+      tree.moveEntry(draggedId, containerId, newOrder);
+    }
+    setLocalState({ "kanban:dragging": null });
+  },
+  onDragStart: (id) => {
+    for (const col of columns.value) {
+      if (tree.childrenOf(col.id).some((c) => c.id === id)) {
+        setLocalState({ "kanban:dragging": { cardId: id, toColumnId: col.id } });
+        break;
+      }
+    }
+  },
+  onDragEnd: () => {
+    setLocalState({ "kanban:dragging": null });
+  }
+});
+watch(dragOverColumnId, (colId) => {
+  if (dragCardId.value && colId) {
+    setLocalState({
+      "kanban:dragging": { cardId: dragCardId.value, toColumnId: colId }
+    });
+  }
+});
+function onCardPointerEnter(cardId) {
+  if (dragCardId.value) return;
+  setLocalState({ "kanban:hovering": cardId });
+}
+function onCardPointerLeave() {
+  if (dragCardId.value) return;
+  setLocalState({ "kanban:hovering": null });
+}
+const myClientId = computed(
+  () => props.childProvider?.awareness?.clientID ?? 0
+);
+function remoteDragColor(colId) {
+  for (const s of states.value) {
+    if (s.clientId === myClientId.value) continue;
+    if (s["kanban:dragging"]?.toColumnId === colId) {
+      return s.user?.color ?? null;
+    }
+  }
+  return null;
+}
+function remoteHovers(cardId) {
+  const result = [];
+  for (const s of states.value) {
+    if (s.clientId === myClientId.value) continue;
+    if (s["kanban:hovering"] === cardId && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+function cardBorderStyle(card) {
+  const hovers = remoteHovers(card.id);
+  if (hovers.length > 0) return `border-left: 3px solid ${hovers[0].color}`;
+  const metaColor = getMetaColor(card.meta);
+  if (metaColor) return `border-left: 3px solid ${metaColor}`;
+  return void 0;
+}
+function columnTopBorder(col) {
+  const c = getMetaColor(col.meta);
+  return c ? `border-top: 3px solid ${c}` : void 0;
+}
+onBeforeUnmount(() => {
+  setLocalState({ "kanban:dragging": null, "kanban:hovering": null });
+});
+function duplicateCard(cardId) {
+  tree.duplicateEntry(cardId);
+}
+function duplicateColumn(colId) {
+  const newColId = tree.duplicateEntry(colId);
+  for (const card of tree.childrenOf(colId)) {
+    const newCardId = tree.duplicateEntry(card.id);
+    tree.moveEntry(newCardId, newColId, card.order);
+  }
+}
+function moveColumnLeft(colId) {
+  const cols = columns.value;
+  const idx = cols.findIndex((c) => c.id === colId);
+  if (idx <= 0) return;
+  const prev = cols[idx - 1];
+  tree.moveEntry(colId, null, prev.order - 1);
+}
+function moveColumnRight(colId) {
+  const cols = columns.value;
+  const idx = cols.findIndex((c) => c.id === colId);
+  if (idx < 0 || idx >= cols.length - 1) return;
+  const next = cols[idx + 1];
+  tree.moveEntry(colId, null, next.order + 1);
+}
+function moveCardToColumn(cardId, targetColId) {
+  const cards = tree.childrenOf(targetColId);
+  tree.moveEntry(cardId, targetColId, Date.now() + cards.length);
+}
+function colMenuItems(col) {
+  const cols = columns.value;
+  const idx = cols.findIndex((c) => c.id === col.id);
+  return [
+    [
+      {
+        label: "Rename",
+        icon: "i-lucide-pencil",
+        onSelect: () => startRename(col.id, col.label)
+      },
+      {
+        label: "Add card",
+        icon: "i-lucide-plus",
+        onSelect: () => addCard(col.id)
+      },
+      {
+        label: "Duplicate column",
+        icon: "i-lucide-copy",
+        onSelect: () => duplicateColumn(col.id)
+      }
+    ],
+    [
+      {
+        label: "Move left",
+        icon: "i-lucide-arrow-left",
+        disabled: idx <= 0,
+        onSelect: () => moveColumnLeft(col.id)
+      },
+      {
+        label: "Move right",
+        icon: "i-lucide-arrow-right",
+        disabled: idx >= cols.length - 1,
+        onSelect: () => moveColumnRight(col.id)
+      }
+    ],
+    [
+      {
+        label: "Open as doc",
+        icon: "i-lucide-external-link",
+        onSelect: () => openNode(col.id, col.label)
+      }
+    ],
+    [
+      {
+        label: "Delete column",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: () => tree.deleteEntry(col.id)
+      }
+    ]
+  ];
+}
+function cardMenuItems(card, currentColId) {
+  return [
+    [
+      {
+        label: "Open",
+        icon: "i-lucide-external-link",
+        onSelect: () => openNode(card.id, card.label)
+      },
+      {
+        label: "Rename",
+        icon: "i-lucide-pencil",
+        onSelect: () => startRename(card.id, card.label)
+      },
+      {
+        label: "Duplicate",
+        icon: "i-lucide-copy",
+        onSelect: () => duplicateCard(card.id)
+      }
+    ],
+    [
+      {
+        label: "Move to column",
+        icon: "i-lucide-arrow-right",
+        children: columns.value.filter((c) => c.id !== currentColId).map((c) => ({
+          label: c.label,
+          onSelect: () => moveCardToColumn(card.id, c.id)
+        }))
+      }
+    ],
+    [
+      {
+        label: "Delete",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: () => tree.deleteEntry(card.id)
+      }
+    ]
+  ];
+}
+const renameId = ref(null);
+const renameValue = ref("");
+let renameCooldown = false;
+function startRename(id, label) {
+  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;
+}
+defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="flex gap-4 p-4 overflow-x-auto h-full items-start">
-    <!-- Columns -->
-    <div
-      v-for="col in columns"
-      :key="col.id"
-      class="flex-shrink-0 w-64 bg-muted/50 rounded-lg p-2 flex flex-col gap-2 min-h-[200px]"
-      :class="dragOverColId === col.id ? 'ring-2 ring-primary' : ''"
-      draggable="true"
-      @dragstart="onColDragStart($event, col.id)"
-      @dragover="onColDragOver($event, col.id)"
-      @drop="onCardDropOnColumn($event, col.id)"
-      @dragleave="dragOverColId = null"
-    >
-      <!-- Column header -->
-      <div class="flex items-center gap-2 px-1">
-        <span class="font-medium text-sm flex-1 truncate">{{ col.label }}</span>
-        <UBadge
-          variant="soft"
-          size="xs"
-        >{{ cardsOf(col.id).length }}</UBadge>
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0 bg-elevated/40">
+      <span class="text-xs text-(--ui-text-muted)">
+        {{ columns.length }} column{{ columns.length !== 1 ? "s" : "" }}
+      </span>
+      <UButton
+        v-if="editable"
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="locale.addColumn"
+        @click="addColumn"
+      />
+    </div>
+
+    <!-- Board -->
+    <div class="flex-1 overflow-x-auto p-4">
+      <!-- Empty state -->
+      <div
+        v-if="columns.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
+      >
+        <UIcon
+          name="i-lucide-kanban"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          No columns yet
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addColumn"
+          size="sm"
+          @click="addColumn"
+        />
       </div>
 
-      <!-- Cards -->
-      <div class="flex flex-col gap-1.5">
+      <TransitionGroup
+        v-else
+        name="kcol"
+        tag="div"
+        class="flex gap-3 h-full items-start min-w-max"
+      >
         <div
-          v-for="card in cardsOf(col.id)"
-          :key="card.id"
-          class="bg-elevated border border-muted rounded-md p-2.5 text-sm cursor-grab active:cursor-grabbing select-none"
-          :class="dragOverCardId === card.id ? 'ring-2 ring-primary' : ''"
-          :style="card.meta?.color ? { borderLeftColor: card.meta.color, borderLeftWidth: '3px' } : {}"
-          draggable="true"
-          @dragstart="onCardDragStart($event, card.id)"
-          @dragover="onCardDragOver($event, card.id)"
-          @drop="onCardDropOnCard($event, card.id)"
+          v-for="col in columns"
+          :key="col.id"
+          :data-drag-id="col.id"
+          class="flex-shrink-0 w-64 rounded-lg border transition-colors"
+          :class="[
+  dragOverColumnId === col.id ? 'border-(--ui-primary) bg-(--ui-primary)/5' : remoteDragColor(col.id) ? 'bg-(--ui-primary)/5' : 'border-(--ui-border) bg-(--ui-bg-elevated)',
+  colDragOver === col.id ? 'border-l-4 border-l-(--ui-primary)' : '',
+  colDragId === col.id ? 'opacity-40' : ''
+]"
+          :style="[
+  remoteDragColor(col.id) && dragOverColumnId !== col.id ? `border-color: ${remoteDragColor(col.id)}` : void 0,
+  columnTopBorder(col)
+]"
+          :data-drop-container="col.id"
         >
-          <p class="font-medium">{{ card.label }}</p>
+          <!-- Column header -->
+          <UContextMenu :items="editable ? colMenuItems(col) : []">
+            <div
+              class="flex items-center justify-between px-3 py-2 border-b border-(--ui-border)"
+              :class="editable ? 'cursor-grab' : ''"
+              :style="editable ? 'touch-action: none' : ''"
+              @pointerdown="editable ? colPointerDown($event, col.id) : void 0"
+            >
+              <UInput
+                v-if="renameId === col.id"
+                v-model="renameValue"
+                size="xs"
+                variant="none"
+                class="flex-1"
+                autofocus
+                @keydown.enter="commitRename"
+                @keydown.escape="renameId = null"
+                @blur="commitRename"
+              />
+              <span
+                v-else
+                class="text-sm font-medium truncate flex-1"
+                @dblclick.stop="editable ? startRename(col.id, col.label) : void 0"
+              >
+                {{ col.label }}
+              </span>
+              <div class="flex items-center gap-1 shrink-0">
+                <UBadge
+                  :label="String(tree.childrenOf(col.id).length)"
+                  color="neutral"
+                  variant="subtle"
+                  size="xs"
+                />
+                <UDropdownMenu
+                  v-if="editable"
+                  :items="colMenuItems(col)"
+                  :content="{ align: 'start' }"
+                >
+                  <UButton
+                    icon="i-lucide-ellipsis"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    @click.stop
+                  />
+                </UDropdownMenu>
+              </div>
+            </div>
+          </UContextMenu>
+
+          <!-- Cards -->
+          <TransitionGroup
+            name="kcard"
+            tag="div"
+            class="p-2 space-y-1.5 min-h-16"
+          >
+            <UContextMenu
+              v-for="card in tree.childrenOf(col.id)"
+              :key="card.id"
+              :items="editable ? cardMenuItems(card, col.id) : []"
+            >
+              <div
+                :data-drag-id="card.id"
+                class="group bg-(--ui-bg) rounded border px-3 py-2 text-sm cursor-pointer hover:border-(--ui-primary) transition-colors flex items-center justify-between gap-1 relative"
+                :class="{
+  'opacity-30': dragCardId === card.id,
+  'border-t-2 border-t-(--ui-primary)': dragOverCardId === card.id,
+  'border-(--ui-border)': !cardBorderStyle(card) && dragOverCardId !== card.id
+}"
+                :style="[
+  cardBorderStyle(card),
+  editable ? 'touch-action: none' : ''
+]"
+                @pointerdown="editable ? cardPointerDown($event, card.id) : void 0"
+                @pointerenter="onCardPointerEnter(card.id)"
+                @pointerleave="onCardPointerLeave"
+                @click="openNode(card.id, card.label)"
+              >
+                <UInput
+                  v-if="renameId === card.id"
+                  v-model="renameValue"
+                  size="xs"
+                  variant="none"
+                  class="flex-1"
+                  autofocus
+                  @keydown.enter.stop="commitRename"
+                  @keydown.escape.stop="renameId = null"
+                  @blur="commitRename"
+                  @click.stop
+                />
+                <span
+                  v-else
+                  class="truncate"
+                  @dblclick.stop="editable ? startRename(card.id, card.label) : void 0"
+                >
+                  {{ card.label }}
+                </span>
+                <!-- Remote hover name badge -->
+                <span
+                  v-if="remoteHovers(card.id).length > 0"
+                  class="absolute -top-2.5 left-2 text-[10px] px-1 rounded text-white leading-tight"
+                  :style="{ backgroundColor: remoteHovers(card.id)[0].color }"
+                >
+                  {{ remoteHovers(card.id)[0].name }}
+                </span>
+                <UDropdownMenu
+                  v-if="editable"
+                  :items="cardMenuItems(card, col.id)"
+                  :content="{ align: 'start' }"
+                >
+                  <UButton
+                    icon="i-lucide-ellipsis"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="md:opacity-0 md:group-hover:opacity-100"
+                    @click.stop
+                  />
+                </UDropdownMenu>
+              </div>
+            </UContextMenu>
+          </TransitionGroup>
+
+          <!-- Add card -->
           <div
-            v-if="card.meta?.tags?.length"
-            class="flex flex-wrap gap-1 mt-1"
+            v-if="editable"
+            class="p-2 border-t border-(--ui-border)"
           >
-            <UBadge
-              v-for="tag in card.meta.tags"
-              :key="tag"
-              variant="soft"
+            <UButton
+              icon="i-lucide-plus"
               size="xs"
-            >{{ tag }}</UBadge>
+              variant="ghost"
+              color="neutral"
+              block
+              :label="locale.newCard"
+              @click="addCard(col.id)"
+            />
           </div>
         </div>
-      </div>
 
-      <!-- Add card button -->
-      <UButton
-        icon="i-lucide-plus"
-        variant="ghost"
-        color="neutral"
-        size="xs"
-        :label="locale.newCard"
-        class="w-full justify-start mt-auto"
-        @click="addCard(col.id)"
-      />
+        <!-- Add column placeholder -->
+        <button
+          v-if="editable"
+          :key="'__add-col__'"
+          class="flex-shrink-0 w-64 h-10 rounded-lg border-2 border-dashed border-(--ui-border) hover:border-(--ui-primary) text-xs text-(--ui-text-muted) hover:text-(--ui-primary) transition-colors"
+          @click="addColumn"
+        >
+          + {{ locale.addColumn }}
+        </button>
+      </TransitionGroup>
     </div>
 
-    <!-- Add column button -->
-    <div class="flex-shrink-0">
-      <UButton
-        icon="i-lucide-plus"
-        variant="soft"
-        color="neutral"
-        size="sm"
-        :label="locale.addColumn"
-        @click="addColumn"
-      />
-    </div>
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </div>
 </template>
+
+<style scoped>
+.kcol-move{transition:transform .25s ease}.kcol-enter-active{transition:opacity .18s ease,transform .18s ease}.kcol-enter-from{opacity:0;transform:translateX(-8px) scale(.97)}.kcol-leave-active{transition:opacity .15s ease}.kcol-leave-to{opacity:0}.kcard-move{transition:transform .25s ease}.kcard-enter-active{transition:opacity .18s ease,transform .18s ease}.kcard-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.kcard-leave-active{transition:opacity .15s ease}.kcard-leave-to{opacity:0}
+</style>

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

@@ -2,7 +2,19 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['kanban']>;
+    /** Whether the board is editable. Default: true */
+    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<{}>, {}, {}, {}, {}, 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;