@abraca/nuxt 1.6.0 → 1.8.0

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

@@ -229,10 +229,86 @@ const labelScale = computed(() => {
   return vb.value.w / w;
 });
 const labelOpacity = computed(() => {
+  if (!showLabels.value) return 0;
   const pxPerUnit = (svgRef.value?.clientWidth ?? 1e3) / vb.value.w;
   const apparentR = 16 * pxPerUnit;
   return Math.max(0, Math.min(1, (apparentR - 8) / 8));
 });
+const SPACING_PRESETS = {
+  compact: { charge: -70, linkDist: 50, centerStrength: 0.1, collideExtra: 2 },
+  default: { charge: -350, linkDist: 180, centerStrength: 0.03, collideExtra: 15 },
+  spacious: { charge: -700, linkDist: 320, centerStrength: 0.01, collideExtra: 30 }
+};
+const SPACING_CYCLE = ["compact", "default", "spacious"];
+const EDGE_THICKNESS_SCALE = { thin: 0.6, normal: 1, thick: 1.8 };
+const savedDocMeta = computed(() => tree.treeMap.data?.[props.docId]?.meta);
+const spacingLevel = ref(savedDocMeta.value?.graphSpacing ?? "default");
+watch(() => savedDocMeta.value?.graphSpacing, (v) => {
+  if (v && v !== spacingLevel.value) spacingLevel.value = v;
+});
+const showLabels = ref(savedDocMeta.value?.graphShowLabels ?? true);
+watch(() => savedDocMeta.value?.graphShowLabels, (v) => {
+  if (typeof v === "boolean" && v !== showLabels.value) showLabels.value = v;
+});
+const showRefEdges = ref(savedDocMeta.value?.showRefEdges ?? true);
+watch(() => savedDocMeta.value?.showRefEdges, (v) => {
+  if (typeof v === "boolean" && v !== showRefEdges.value) showRefEdges.value = v;
+});
+const edgeThickness = ref(savedDocMeta.value?.graphEdgeThickness ?? "normal");
+watch(() => savedDocMeta.value?.graphEdgeThickness, (v) => {
+  if (v && v !== edgeThickness.value) edgeThickness.value = v;
+});
+const edgeScale = computed(() => EDGE_THICKNESS_SCALE[edgeThickness.value]);
+const spacingIcon = computed(() => {
+  const icons = {
+    compact: "i-lucide-dot",
+    default: "i-lucide-circle-dot",
+    spacious: "i-lucide-target"
+  };
+  return icons[spacingLevel.value];
+});
+function applySpacingForces() {
+  if (!sim) return;
+  const p = SPACING_PRESETS[spacingLevel.value];
+  try {
+    sim.force("charge")?.strength(p.charge);
+    const linkForce = sim.force("link");
+    if (linkForce) linkForce.distance(p.linkDist).strength(0.5);
+    sim.force("x")?.strength(p.centerStrength);
+    sim.force("y")?.strength(p.centerStrength);
+    sim.force("collide")?.radius((n) => nodeRadius(n) + p.collideExtra);
+  } catch {
+  }
+}
+function setSpacing(level) {
+  spacingLevel.value = level;
+  tree.updateMeta(props.docId, { graphSpacing: level });
+  applySpacingForces();
+  if (sim) {
+    sim.alpha(0.5);
+    resumeSim();
+  }
+}
+function cycleSpacing() {
+  if (!props.editable) return;
+  const idx = SPACING_CYCLE.indexOf(spacingLevel.value);
+  setSpacing(SPACING_CYCLE[(idx + 1) % SPACING_CYCLE.length]);
+}
+function setShowLabels(v) {
+  showLabels.value = v;
+  tree.updateMeta(props.docId, { graphShowLabels: v });
+}
+function setShowRefEdges(v) {
+  showRefEdges.value = v;
+  tree.updateMeta(props.docId, { showRefEdges: v });
+}
+function setEdgeThickness(v) {
+  edgeThickness.value = v;
+  tree.updateMeta(props.docId, { graphEdgeThickness: v });
+}
+const viewSettingsActive = computed(
+  () => !showLabels.value || !showRefEdges.value || edgeThickness.value !== "normal"
+);
 const simNodes = ref([]);
 const renderTick = ref(0);
 let sim = null;
@@ -278,9 +354,9 @@ const { pause: pauseSim, resume: resumeSim } = useRafFn(() => {
   }
   renderTick.value++;
 }, { immediate: false });
-function restartSim() {
+function restartSim(alpha = 0.12) {
   if (!sim) return;
-  sim.alpha(Math.max(sim.alpha(), 0.12));
+  sim.alpha(Math.max(sim.alpha(), alpha));
   resumeSim();
 }
 function nodeRadius(n) {
@@ -343,7 +419,8 @@ function buildSimulation(oldPos = /* @__PURE__ */ new Map()) {
   const edges = allEdges.value.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target)).map((e) => ({ source: e.source, target: e.target }));
   pauseSim();
   sim?.stop();
-  sim = forceSimulation(nodes).force("charge", forceManyBody().strength(-120)).force("x", forceX(0).strength(0.06)).force("y", forceY(0).strength(0.06)).force("link", forceLink(edges).id((dd) => dd.id).distance(80).strength(0.5)).force("collide", forceCollide().radius((n) => nodeRadius(n) + 6).strength(0.85)).alphaDecay(0.025).velocityDecay(0.55).stop();
+  const p = SPACING_PRESETS[spacingLevel.value];
+  sim = forceSimulation(nodes).force("charge", forceManyBody().strength(p.charge)).force("x", forceX(0).strength(p.centerStrength)).force("y", forceY(0).strength(p.centerStrength)).force("link", forceLink(edges).id((dd) => dd.id).distance(p.linkDist).strength(0.5)).force("collide", forceCollide().radius((n) => nodeRadius(n) + p.collideExtra).strength(0.85)).alphaDecay(0.025).velocityDecay(0.55).stop();
   simNodes.value = nodes;
   const hasUnpositioned = nodes.some((n) => !getGraphPos(n.id) && !oldPos.has(n.id));
   if (hasUnpositioned) {
@@ -669,61 +746,131 @@ defineExpose({ connectedUsers });
     </div>
 
     <template v-else-if="d3">
-      <!-- Toolbar -->
-      <div class="absolute top-3 left-3 z-10 flex gap-1">
-        <UButton
+      <!-- Floating toolbar (bottom-center) -->
+      <div class="graph-toolbar-bar">
+        <!-- Create -->
+        <div
           v-if="editable"
-          icon="i-lucide-plus"
-          size="xs"
-          variant="soft"
-          color="neutral"
-          :label="locale.addNode"
-          @click="addNodeAtCenter"
-        />
-        <UTooltip
-          text="Zoom out"
-          :content="{ side: 'bottom' }"
-        >
-          <UButton
-            icon="i-lucide-minus"
-            size="xs"
-            variant="soft"
-            color="neutral"
-            @click="zoomOut"
-          />
-        </UTooltip>
-        <UTooltip
-          text="Zoom in"
-          :content="{ side: 'bottom' }"
+          class="toolbar-group"
         >
-          <UButton
-            icon="i-lucide-zoom-in"
-            size="xs"
-            variant="soft"
-            color="neutral"
-            @click="zoomIn"
-          />
-        </UTooltip>
-        <UTooltip
-          text="Fit view"
-          :content="{ side: 'bottom' }"
-        >
-          <UButton
-            icon="i-lucide-focus"
-            size="xs"
-            variant="soft"
-            color="neutral"
-            @click="resetView"
-          />
-        </UTooltip>
-        <UButton
-          icon="i-lucide-wind"
-          size="xs"
-          variant="soft"
-          color="neutral"
-          label="Shake"
-          @click="restartSim"
+          <UTooltip :text="locale.addNode">
+            <UButton
+              icon="i-lucide-plus"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              @click="addNodeAtCenter"
+            />
+          </UTooltip>
+        </div>
+        <div
+          v-if="editable"
+          class="toolbar-divider"
         />
+
+        <!-- View -->
+        <div class="toolbar-group">
+          <UTooltip :text="locale.zoomOut">
+            <UButton
+              icon="i-lucide-minus"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              @click="zoomOut"
+            />
+          </UTooltip>
+          <UTooltip :text="locale.zoomIn">
+            <UButton
+              icon="i-lucide-zoom-in"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              @click="zoomIn"
+            />
+          </UTooltip>
+          <UTooltip :text="locale.fitView">
+            <UButton
+              icon="i-lucide-focus"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              @click="resetView"
+            />
+          </UTooltip>
+        </div>
+        <div class="toolbar-divider" />
+
+        <!-- Simulation -->
+        <div class="toolbar-group">
+          <UTooltip :text="locale.shake">
+            <UButton
+              icon="i-lucide-wind"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              @click="() => restartSim(0.15)"
+            />
+          </UTooltip>
+          <UTooltip :text="`${locale.spacing}: ${spacingLevel}`">
+            <UButton
+              :icon="spacingIcon"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              :disabled="!editable"
+              @click="cycleSpacing"
+            />
+          </UTooltip>
+        </div>
+        <div class="toolbar-divider" />
+
+        <!-- View settings popover -->
+        <UPopover :content="{ side: 'top', align: 'end' }">
+          <UTooltip :text="locale.viewSettings">
+            <UButton
+              icon="i-lucide-sliders-horizontal"
+              size="sm"
+              :variant="viewSettingsActive ? 'soft' : 'ghost'"
+              :color="viewSettingsActive ? 'primary' : 'neutral'"
+            />
+          </UTooltip>
+          <template #content>
+            <div class="flex flex-col gap-2 p-2 w-56">
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-(--ui-text-muted)">{{ locale.showLabels }}</span>
+                <USwitch
+                  :model-value="showLabels"
+                  size="xs"
+                  @update:model-value="setShowLabels($event)"
+                />
+              </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-(--ui-text-muted)">{{ locale.showRefEdges }}</span>
+                <USwitch
+                  :model-value="showRefEdges"
+                  size="xs"
+                  @update:model-value="setShowRefEdges($event)"
+                />
+              </div>
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-(--ui-text-muted)">{{ locale.edgeThickness }}</span>
+                <div class="flex gap-0.5">
+                  <UButton
+                    v-for="th in ['thin', 'normal', 'thick']"
+                    :key="th"
+                    size="xs"
+                    :variant="edgeThickness === th ? 'soft' : 'ghost'"
+                    :color="edgeThickness === th ? 'primary' : 'neutral'"
+                    class="capitalize text-[10px] px-1.5"
+                    @click="setEdgeThickness(th)"
+                  >
+                    {{ locale[`edge${th.charAt(0).toUpperCase() + th.slice(1)}`] }}
+                  </UButton>
+                </div>
+              </div>
+            </div>
+          </template>
+        </UPopover>
       </div>
 
       <!-- Empty state -->
@@ -815,7 +962,7 @@ defineExpose({ connectedUsers });
             :x2="link.target.x"
             :y2="link.target.y"
             stroke="var(--ui-border)"
-            stroke-width="1.2"
+            :stroke-width="1.2 * edgeScale"
             opacity="0.6"
           />
         </g>
@@ -980,8 +1127,8 @@ defineExpose({ connectedUsers });
       </svg>
 
       <!-- Hint -->
-      <p class="absolute bottom-3 right-3 text-[10px] text-(--ui-text-muted) select-none pointer-events-none">
-        Drag to reposition · Right-click to pin/create · Scroll to zoom · Click to open · Dbl-click canvas to create
+      <p class="absolute top-3 right-3 text-[10px] text-(--ui-text-muted) select-none pointer-events-none">
+        Drag · Right-click · Scroll · Click · Dbl-click
       </p>
 
       <!-- Context menu -->
@@ -1028,3 +1175,7 @@ defineExpose({ connectedUsers });
     />
   </div>
 </template>
+
+<style scoped>
+.graph-toolbar-bar{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;bottom:2rem;display:flex;gap:3px;left:50%;padding:3px;position:absolute;transform:translateX(-50%);z-index:20}.toolbar-group{align-items:center;display:flex;gap:1px}.toolbar-divider{background:hsla(0,0%,100%,.15);flex-shrink:0;height:20px;margin:0 2px;width:1px}
+</style>

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

@@ -30,6 +30,11 @@ const {
   closePanel
 } = useNodePanel(childProviderRef);
 const columns = computed(() => tree.childrenOf(null));
+const columnWidthClass = computed(() => {
+  const v = tree.treeMap.data?.[props.docId]?.meta?.kanbanColumnWidth;
+  const map = { narrow: "w-52", default: "w-64", wide: "w-80" };
+  return map[v ?? ""] ?? "w-64";
+});
 function orderBetween(list, targetIdx) {
   const prev = list[targetIdx - 1];
   const next = list[targetIdx];
@@ -145,6 +150,48 @@ function remoteHovers(cardId) {
   }
   return result;
 }
+function columnPresence(colId) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const card of tree.childrenOf(colId)) {
+    for (const u of remoteHovers(card.id)) {
+      if (!seen.has(u.name)) {
+        seen.add(u.name);
+        result.push(u);
+      }
+    }
+  }
+  return result;
+}
+const PRIORITY_LABELS = ["", "Low", "Medium", "High", "Urgent"];
+const PRIORITY_COLORS = {
+  1: "neutral",
+  2: "info",
+  3: "warning",
+  4: "error"
+};
+function cardPriority(card) {
+  const p = card.meta?.priority;
+  if (!p || p < 1 || p > 4) return null;
+  return { label: PRIORITY_LABELS[p], color: PRIORITY_COLORS[p] };
+}
+function cardDueDate(card) {
+  const raw = card.meta?.dateEnd ?? card.meta?.datetimeEnd;
+  if (!raw) return null;
+  try {
+    const d = new Date(raw);
+    return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  } catch {
+    return null;
+  }
+}
+function cardTags(card) {
+  const tags = card.meta?.tags;
+  return Array.isArray(tags) ? tags.slice(0, 2) : [];
+}
+function cardHasCover(card) {
+  return !!card.meta?.coverUploadId;
+}
 function cardBorderStyle(card) {
   const hovers = remoteHovers(card.id);
   if (hovers.length > 0) return `border-left: 3px solid ${hovers[0].color}`;
@@ -350,8 +397,9 @@ defineExpose({ connectedUsers });
           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="flex-shrink-0 rounded-lg border transition-colors"
           :class="[
+  columnWidthClass,
   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' : ''
@@ -395,6 +443,17 @@ defineExpose({ connectedUsers });
                   variant="subtle"
                   size="xs"
                 />
+                <div
+                  v-if="columnPresence(col.id).length"
+                  class="flex -space-x-1"
+                >
+                  <span
+                    v-for="u in columnPresence(col.id).slice(0, 4)"
+                    :key="u.name"
+                    class="size-2 rounded-full ring-1 ring-(--ui-bg)"
+                    :style="{ backgroundColor: u.color }"
+                  />
+                </div>
                 <UDropdownMenu
                   v-if="editable"
                   :items="colMenuItems(col)"
@@ -425,7 +484,7 @@ defineExpose({ connectedUsers });
             >
               <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="group bg-(--ui-bg) rounded border text-sm cursor-pointer hover:border-(--ui-primary) transition-colors relative overflow-hidden"
                 :class="{
   'opacity-30': dragCardId === card.id,
   'border-t-2 border-t-(--ui-primary)': dragOverCardId === card.id,
@@ -440,25 +499,90 @@ defineExpose({ connectedUsers });
                 @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
+                <!-- Cover thumbnail (if set) -->
+                <AGalleryCoverImage
+                  v-if="cardHasCover(card)"
+                  :upload-id="card.meta.coverUploadId"
+                  :doc-id="card.meta.coverDocId ?? card.id"
+                  :mime-type="card.meta.coverMimeType"
+                  class="w-full aspect-[3/2] object-cover bg-(--ui-bg-elevated)"
                 />
-                <span
-                  v-else
-                  class="truncate"
-                  @dblclick.stop="editable ? startRename(card.id, card.label) : void 0"
+
+                <!-- Title row -->
+                <div class="flex items-center justify-between gap-1 px-3 py-2">
+                  <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 flex items-center gap-1"
+                    @dblclick.stop="editable ? startRename(card.id, card.label) : void 0"
+                  >
+                    <UIcon
+                      v-if="card.meta?.icon"
+                      :name="`i-lucide-${card.meta.icon}`"
+                      class="size-3.5 shrink-0 text-(--ui-text-muted)"
+                    />
+                    <span class="truncate">{{ card.label }}</span>
+                  </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 shrink-0"
+                      @click.stop
+                    />
+                  </UDropdownMenu>
+                </div>
+
+                <!-- Meta chips row -->
+                <div
+                  v-if="cardPriority(card) || cardDueDate(card) || cardTags(card).length"
+                  class="flex items-center flex-wrap gap-1 px-3 pb-2 -mt-1"
                 >
-                  {{ card.label }}
-                </span>
+                  <UBadge
+                    v-if="cardPriority(card)"
+                    size="xs"
+                    variant="subtle"
+                    :color="cardPriority(card).color"
+                  >
+                    {{ cardPriority(card).label }}
+                  </UBadge>
+                  <UBadge
+                    v-if="cardDueDate(card)"
+                    size="xs"
+                    variant="subtle"
+                    color="neutral"
+                    icon="i-lucide-calendar"
+                  >
+                    {{ cardDueDate(card) }}
+                  </UBadge>
+                  <UBadge
+                    v-for="tag in cardTags(card)"
+                    :key="tag"
+                    size="xs"
+                    variant="subtle"
+                    color="neutral"
+                  >
+                    {{ tag }}
+                  </UBadge>
+                </div>
+
                 <!-- Remote hover name badge -->
                 <span
                   v-if="remoteHovers(card.id).length > 0"
@@ -467,20 +591,6 @@ defineExpose({ connectedUsers });
                 >
                   {{ 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>
@@ -506,7 +616,8 @@ defineExpose({ connectedUsers });
         <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"
+          class="flex-shrink-0 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"
+          :class="columnWidthClass"
           @click="addColumn"
         >
           + {{ locale.addColumn }}

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

@@ -5,6 +5,8 @@ import { useRendererBase } from "../../composables/useRendererBase";
 import { useNodePanel } from "../../composables/useNodePanel";
 import { useMediaExtractor } from "../../composables/useMediaExtractor";
 import { useMediaPlayback } from "../../composables/useMediaPlayback";
+import { useFileBlobStore } from "../../composables/useFileBlobStore";
+import { useSyncedMap } from "../../composables/useYDoc";
 import MediaPlaylist from "./media/MediaPlaylist.vue";
 import MediaTransportBar from "./media/MediaTransportBar.vue";
 import MediaSyncBar from "./media/MediaSyncBar.vue";
@@ -39,20 +41,28 @@ const { mediaItems, groupedMedia } = useMediaExtractor(
 );
 const mediaElementRef = shallowRef(null);
 const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
-const getBlobUrl = async (_docId, _uploadId) => null;
-const useSyncedMapStub = (doc, mapName) => {
-  const shared = globalThis.__ABRACA_SHARED__ ?? {};
-  if (shared.useSyncedMap) return shared.useSyncedMap(doc, mapName);
-  return {
-    data: {},
-    yMap: ref(null),
-    set: (_k, _v) => {
-    },
-    lastUpdateLocal: ref(false)
-  };
-};
-const repeatMode = ref("off");
-const shuffleEnabled = ref(false);
+const { getBlobUrl } = useFileBlobStore();
+const savedDocMeta = computed(() => tree.treeMap.data?.[props.docId]?.meta);
+const repeatMode = ref(savedDocMeta.value?.mediaRepeat ?? "off");
+watch(() => savedDocMeta.value?.mediaRepeat, (v) => {
+  if (v && v !== repeatMode.value) repeatMode.value = v;
+});
+function setRepeatMode(v) {
+  repeatMode.value = v;
+  tree.updateMeta(props.docId, { mediaRepeat: v });
+}
+function cycleRepeatMode() {
+  setRepeatMode(repeatMode.value === "off" ? "all" : repeatMode.value === "all" ? "one" : "off");
+}
+const shuffleEnabled = ref(savedDocMeta.value?.mediaShuffle ?? false);
+watch(() => savedDocMeta.value?.mediaShuffle, (v) => {
+  if (typeof v === "boolean" && v !== shuffleEnabled.value) shuffleEnabled.value = v;
+});
+function toggleShuffle() {
+  const next = !shuffleEnabled.value;
+  shuffleEnabled.value = next;
+  tree.updateMeta(props.docId, { mediaShuffle: next });
+}
 const playback = useMediaPlayback({
   mediaElementRef,
   childDoc,
@@ -60,7 +70,7 @@ const playback = useMediaPlayback({
   repeatMode,
   shuffle: shuffleEnabled,
   getBlobUrl,
-  useSyncedMap: useSyncedMapStub,
+  useSyncedMap,
   onTrackChange: (track) => {
     setLocalState({ "media:trackId": track.id });
   }
@@ -146,14 +156,14 @@ defineExpose({ connectedUsers });
           variant="ghost"
           :color="shuffleEnabled ? 'primary' : 'neutral'"
           size="xs"
-          @click="shuffleEnabled = !shuffleEnabled"
+          @click="toggleShuffle"
         />
         <UButton
           :icon="repeatMode === 'one' ? 'i-lucide-repeat-1' : 'i-lucide-repeat'"
           variant="ghost"
           :color="repeatMode !== 'off' ? 'primary' : 'neutral'"
           size="xs"
-          @click="repeatMode = repeatMode === 'off' ? 'all' : repeatMode === 'all' ? 'one' : 'off'"
+          @click="cycleRepeatMode"
         />
       </div>
     </div>