@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,193 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { DEFAULT_LOCALE } from "../../../locale";
+const props = defineProps({
+  pixelsPerDay: { type: Number, required: true },
+  isMobile: { type: Boolean, required: true },
+  showLabels: { type: Boolean, required: true },
+  remoteViewers: { type: Array, required: true },
+  editable: { type: Boolean, required: false },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["zoom-in", "zoom-out", "today", "go-to-date", "add-epic", "add-milestone", "toggle-labels", "fit"]);
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.timeline,
+  ...config.public?.abracadabra?.locale?.renderers?.timeline ?? {},
+  ...props.labels ?? {}
+}));
+const goToDateOpen = ref(false);
+const goToDateValue = ref("");
+function submitGoToDate() {
+  if (goToDateValue.value) {
+    emit("go-to-date", goToDateValue.value);
+    goToDateOpen.value = false;
+  }
+}
+const zoomLabel = computed(() => {
+  const ppd = props.pixelsPerDay;
+  if (ppd >= 30) return "Days";
+  if (ppd >= 10) return "Weeks";
+  if (ppd >= 2) return "Months";
+  if (ppd >= 0.5) return "Years";
+  if (ppd >= 0.05) return "Decades";
+  if (ppd >= 5e-3) return "Centuries";
+  return "Millennia";
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0 bg-(--ui-bg-elevated)/40 gap-2">
+    <!-- Left: Zoom controls -->
+    <div class="flex items-center gap-1 shrink-0">
+      <UTooltip
+        text="Zoom out"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-minus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('zoom-out')"
+        />
+      </UTooltip>
+
+      <span class="text-[10px] text-(--ui-text-muted) font-medium min-w-12 text-center">
+        {{ zoomLabel }}
+      </span>
+
+      <UTooltip
+        text="Zoom in"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('zoom-in')"
+        />
+      </UTooltip>
+
+      <UTooltip
+        text="Today"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-calendar-check"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          label="Today"
+          class="hidden sm:flex"
+          @click="emit('today')"
+        />
+        <UButton
+          icon="i-lucide-calendar-check"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          class="sm:hidden"
+          @click="emit('today')"
+        />
+      </UTooltip>
+
+      <UTooltip
+        :text="locale.fitToContent"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-maximize-2"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('fit')"
+        />
+      </UTooltip>
+
+      <!-- Go to date popover -->
+      <UPopover v-model:open="goToDateOpen">
+        <UTooltip
+          :text="locale.goToDate"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-calendar-search"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            class="hidden sm:flex"
+          />
+        </UTooltip>
+        <template #content>
+          <div class="p-2 flex items-center gap-2">
+            <input
+              v-model="goToDateValue"
+              type="date"
+              class="text-xs bg-(--ui-bg) border border-(--ui-border) rounded px-2 py-1 text-(--ui-text)"
+              @keydown.enter="submitGoToDate"
+            >
+            <UButton
+              size="xs"
+              label="Go"
+              @click="submitGoToDate"
+            />
+          </div>
+        </template>
+      </UPopover>
+    </div>
+
+    <!-- Center: Remote viewer chips -->
+    <div class="flex items-center gap-1 overflow-hidden">
+      <span
+        v-for="rv in remoteViewers.slice(0, 4)"
+        :key="rv.clientId"
+        class="text-[10px] px-1.5 py-0.5 rounded-full border shrink-0 hidden md:inline-flex"
+        :style="{ borderColor: rv.color, color: rv.color }"
+      >
+        {{ rv.name?.split(" ")[0] || "?" }}
+      </span>
+    </div>
+
+    <!-- Right: Actions -->
+    <div class="flex items-center gap-1 shrink-0">
+      <!-- Toggle label panel (mobile) -->
+      <UTooltip
+        :text="locale.toggleLabels"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-panel-left"
+          size="xs"
+          variant="ghost"
+          :color="showLabels ? 'primary' : 'neutral'"
+          class="sm:hidden"
+          @click="emit('toggle-labels')"
+        />
+      </UTooltip>
+
+      <UButton
+        v-if="editable !== false"
+        icon="i-lucide-diamond"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="isMobile ? void 0 : locale.addMilestone"
+        class="hidden sm:flex"
+        @click="emit('add-milestone')"
+      />
+
+      <UButton
+        v-if="editable !== false"
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="isMobile ? void 0 : locale.addEpic"
+        @click="emit('add-epic')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,34 @@
+import type { AbracadabraLocale } from '../../../locale.js';
+type __VLS_Props = {
+    pixelsPerDay: number;
+    isMobile: boolean;
+    showLabels: boolean;
+    remoteViewers: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+    }>;
+    editable?: boolean;
+    labels?: Partial<AbracadabraLocale['renderers']['timeline']>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    today: () => any;
+    "zoom-in": () => any;
+    "zoom-out": () => any;
+    "go-to-date": (date: string) => any;
+    "add-epic": () => any;
+    "add-milestone": () => any;
+    "toggle-labels": () => any;
+    fit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToday?: (() => any) | undefined;
+    "onZoom-in"?: (() => any) | undefined;
+    "onZoom-out"?: (() => any) | undefined;
+    "onGo-to-date"?: ((date: string) => any) | undefined;
+    "onAdd-epic"?: (() => any) | undefined;
+    "onAdd-milestone"?: (() => any) | undefined;
+    "onToggle-labels"?: (() => any) | undefined;
+    onFit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsAdminPanel.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsAdminPanel.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useAwarenessPeers } from "../../composables/useAwarenessPeers";
+const abra = useAbracadabra();
+const { peers } = useAwarenessPeers();
+const effectiveRole = computed(() => abra.provider.value?.effectiveRole ?? null);
+const canView = computed(() => effectiveRole.value === "admin" || effectiveRole.value === "service");
+const _canModify = computed(() => effectiveRole.value === "admin" || effectiveRole.value === "service");
+const users = ref([]);
+const loading = ref(false);
+async function loadUsers() {
+  if (!canView.value || !abra.client.value) return;
+  loading.value = true;
+  try {
+    users.value = await abra.listAdminUsers?.() ?? [];
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+}
+watch(() => abra.isReady.value, (ready) => {
+  if (ready && canView.value) loadUsers();
+}, { immediate: true });
+function isOnline(user) {
+  const keys = [user.publicKey, ...user.deviceKeys ?? []].filter(Boolean);
+  return keys.some((pk) => peers.value.some((p) => p.user?.publicKey === pk));
+}
+function roleBadgeColor(role) {
+  if (role === "service") return "error";
+  if (role === "admin") return "warning";
+  return "neutral";
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h3 class="text-base font-semibold">
+          Admin
+        </h3>
+        <p class="text-sm text-(--ui-text-muted) mt-1">
+          Server administration and user management.
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <UBadge
+          v-if="effectiveRole"
+          :color="roleBadgeColor(effectiveRole)"
+          variant="soft"
+          :label="effectiveRole"
+        />
+      </div>
+    </div>
+
+    <ClientOnly>
+      <UAlert
+        v-if="!canView"
+        icon="i-lucide-shield-off"
+        color="neutral"
+        variant="subtle"
+        title="Admin access required"
+        description="You need admin or service role to view this panel."
+      />
+
+      <template v-else>
+        <div class="flex items-center justify-between mb-3">
+          <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+            All Users
+          </p>
+          <div class="flex items-center gap-2">
+            <UBadge
+              color="neutral"
+              variant="subtle"
+              :label="`${users.length}`"
+              size="xs"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :loading="loading"
+              @click="loadUsers"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="loading"
+          class="space-y-2"
+        >
+          <USkeleton
+            v-for="i in 3"
+            :key="i"
+            class="h-14 w-full"
+          />
+        </div>
+
+        <div
+          v-else-if="users.length > 0"
+          class="flex flex-col gap-1"
+        >
+          <div
+            v-for="user in users"
+            :key="user.id"
+            class="flex items-center gap-3 p-3 rounded-lg border border-(--ui-border)"
+            :class="user.revoked ? 'opacity-50' : ''"
+          >
+            <div class="relative shrink-0">
+              <UAvatar
+                :alt="user.displayName ?? user.username"
+                size="sm"
+              />
+              <span
+                v-if="isOnline(user)"
+                class="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full bg-green-400 ring-2 ring-(--ui-bg)"
+              />
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 flex-wrap">
+                <p class="text-sm font-medium truncate">
+                  {{ user.displayName ?? user.username }}
+                </p>
+                <UBadge
+                  :color="roleBadgeColor(user.role)"
+                  variant="soft"
+                  :label="user.role"
+                  size="xs"
+                />
+                <UBadge
+                  v-if="user.revoked"
+                  color="error"
+                  variant="subtle"
+                  label="Revoked"
+                  size="xs"
+                />
+              </div>
+              <p class="text-xs text-(--ui-text-muted) truncate mt-0.5">
+                @{{ user.username }}
+                <template v-if="user.email">
+                  · {{ user.email }}
+                </template>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="text-sm text-(--ui-text-muted) text-center py-8"
+        >
+          No users found.
+        </div>
+      </template>
+    </ClientOnly>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsAdminPanel.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsConnectionPanel.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsConnectionPanel.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useConnectionStatus } from "../../composables/useConnectionStatus";
+import { useWebRTC } from "../../composables/useWebRTC";
+import { useBroadcastSync } from "../../composables/useBroadcastSync";
+import { useServerInfo } from "../../composables/useServerInfo";
+const abra = useAbracadabra();
+const { label: connLabel, color: connColor, icon: connIcon } = useConnectionStatus();
+const { isConnected: p2pConnected, peerCount: p2pPeerCount, connect: connectP2P, disconnect: disconnectP2P } = useWebRTC();
+const { isActive: broadcastActive } = useBroadcastSync();
+const { serverName: _serverName, serverVersion: _serverVersion } = useServerInfo();
+const currentUrl = computed(() => abra.currentServerUrl.value ?? "");
+const p2pEnabled = ref(p2pConnected.value);
+async function toggleP2P() {
+  if (p2pEnabled.value) {
+    await connectP2P();
+  } else {
+    disconnectP2P();
+  }
+}
+const serverName = computed(() => _serverName.value ?? currentUrl.value);
+const serverVersion = computed(() => _serverVersion.value ?? "Unknown");
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <h3 class="text-base font-semibold">
+        Connection
+      </h3>
+      <p class="text-sm text-(--ui-text-muted) mt-1">
+        Server connection and peer-to-peer sync settings.
+      </p>
+    </div>
+
+    <div class="rounded-lg border border-(--ui-border) divide-y divide-(--ui-border)">
+      <!-- Server status -->
+      <div class="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Server
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            {{ serverName }}
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="connIcon"
+            class="size-4"
+            :class="`text-${connColor}`"
+          />
+          <UBadge
+            :color="connColor"
+            variant="subtle"
+            :label="connLabel"
+            size="xs"
+          />
+        </div>
+      </div>
+
+      <!-- Server URL -->
+      <div class="flex max-sm:flex-col justify-between sm:items-center gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Server URL
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            The server you're connected to.
+          </p>
+        </div>
+        <code class="text-xs font-mono text-(--ui-text-muted) bg-(--ui-bg-elevated) px-2 py-1 rounded">
+          {{ currentUrl || "Not connected" }}
+        </code>
+      </div>
+
+      <!-- Server version -->
+      <div class="flex max-sm:flex-col justify-between sm:items-center gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Server Version
+          </p>
+        </div>
+        <span class="text-sm text-(--ui-text-muted)">{{ serverVersion }}</span>
+      </div>
+
+      <!-- P2P Sync -->
+      <div class="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            P2P Sync (WebRTC)
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Direct peer connections for lower latency.
+            <template v-if="p2pConnected">
+              {{ p2pPeerCount }} peer{{ p2pPeerCount === 1 ? "" : "s" }} connected.
+            </template>
+          </p>
+        </div>
+        <USwitch
+          v-model="p2pEnabled"
+          @update:model-value="toggleP2P"
+        />
+      </div>
+
+      <!-- Broadcast sync -->
+      <div class="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Cross-Tab Sync
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            BroadcastChannel sync between browser tabs.
+          </p>
+        </div>
+        <UBadge
+          :color="broadcastActive ? 'success' : 'neutral'"
+          variant="subtle"
+          :label="broadcastActive ? 'Active' : 'Inactive'"
+          size="xs"
+        />
+      </div>
+
+      <!-- Reconnect -->
+      <div class="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Reconnect
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Force reconnection to the server.
+          </p>
+        </div>
+        <UButton
+          label="Reconnect"
+          icon="i-lucide-refresh-cw"
+          color="neutral"
+          variant="outline"
+          size="xs"
+          @click="abra.reconnect()"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsConnectionPanel.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsInvitesPanel.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;