@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from "vue";
+import { usePluginRegistry } from "../../composables/usePluginRegistry";
+const registry = usePluginRegistry();
+const pluginList = computed(
+  () => registry.getPlugins().map((p) => ({
+    name: p.name,
+    description: p.description ?? "",
+    icon: p.icon ?? "i-lucide-plug",
+    hasExtensions: !!p.extensions?.length,
+    hasPageTypes: !!p.pageTypes?.length,
+    hasToolbar: !!p.toolbarItems?.length,
+    hasSuggestions: !!p.suggestionItems?.length
+  }))
+);
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <h3 class="text-base font-semibold">
+        Plugins
+      </h3>
+      <p class="text-sm text-(--ui-text-muted) mt-1">
+        Installed plugins extending the editor and platform.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div
+        v-for="plugin in pluginList"
+        :key="plugin.name"
+        class="flex items-center gap-3 p-3 rounded-lg border border-(--ui-border)"
+      >
+        <UIcon
+          :name="plugin.icon"
+          class="size-5 text-(--ui-text-muted) shrink-0"
+        />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium">
+            {{ plugin.name }}
+          </p>
+          <p
+            v-if="plugin.description"
+            class="text-xs text-(--ui-text-muted) mt-0.5"
+          >
+            {{ plugin.description }}
+          </p>
+          <div class="flex flex-wrap gap-1 mt-1">
+            <UBadge
+              v-if="plugin.hasExtensions"
+              color="info"
+              variant="subtle"
+              label="Extensions"
+              size="xs"
+            />
+            <UBadge
+              v-if="plugin.hasPageTypes"
+              color="success"
+              variant="subtle"
+              label="Page Types"
+              size="xs"
+            />
+            <UBadge
+              v-if="plugin.hasToolbar"
+              color="warning"
+              variant="subtle"
+              label="Toolbar"
+              size="xs"
+            />
+            <UBadge
+              v-if="plugin.hasSuggestions"
+              color="neutral"
+              variant="subtle"
+              label="Suggestions"
+              size="xs"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="pluginList.length === 0"
+        class="flex flex-col items-center justify-center py-12"
+      >
+        <UIcon
+          name="i-lucide-plug"
+          class="size-10 text-(--ui-text-dimmed) mb-3"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          No plugins installed.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsPluginsPanel.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/ASettingsProfilePanel.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/ASettingsProfilePanel.vue

@@ -0,0 +1,223 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { UI_COLORS, UI_NEUTRALS } from "../../types";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+const {
+  userName,
+  setUserName,
+  userColorName,
+  setUserColor,
+  userNeutralColorName,
+  setNeutralColor,
+  publicKeyB64,
+  isClaimed
+} = useAbracadabra();
+const { copy, copied } = useClipboard();
+const nameInput = ref(userName.value);
+watch(userName, (v) => {
+  nameInput.value = v;
+});
+let nameDebounce = null;
+function onNameInput(v) {
+  nameInput.value = v;
+  if (nameDebounce) clearTimeout(nameDebounce);
+  if (v.length >= 2) {
+    nameDebounce = setTimeout(() => setUserName(v), 600);
+  }
+}
+const shortKey = computed(() => {
+  if (!publicKeyB64.value) return "\u2014";
+  return publicKeyB64.value.slice(0, 8) + "\u2026" + publicKeyB64.value.slice(-8);
+});
+const fontItems = [
+  { value: "system", label: "System" },
+  { value: "inter", label: "Inter" },
+  { value: "outfit", label: "Outfit" },
+  { value: "poppins", label: "Poppins" },
+  { value: "dm-sans", label: "DM Sans" },
+  { value: "jetbrains-mono", label: "JetBrains Mono" }
+];
+const fontFamily = ref(
+  import.meta.client ? localStorage.getItem("abracadabra_font") || "system" : "system"
+);
+function setFont(value) {
+  fontFamily.value = value;
+  localStorage.setItem("abracadabra_font", value);
+  document.documentElement.dataset.font = value;
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <h3 class="text-base font-semibold">
+        Profile
+      </h3>
+      <p class="text-sm text-(--ui-text-muted) mt-1">
+        Customize your identity and appearance.
+      </p>
+    </div>
+
+    <div class="rounded-lg border border-(--ui-border) divide-y divide-(--ui-border)">
+      <!-- Avatar preview -->
+      <div class="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Avatar
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Generated from your display name and color.
+          </p>
+        </div>
+        <ClientOnly>
+          <UAvatar
+            :alt="userName"
+            size="lg"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- Display name -->
+      <div class="flex max-sm:flex-col justify-between items-start gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Display Name
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            How others see you in collaboration.
+          </p>
+        </div>
+        <UInput
+          :model-value="nameInput"
+          autocomplete="off"
+          placeholder="Enter your name"
+          @update:model-value="onNameInput"
+        />
+      </div>
+
+      <!-- Public key -->
+      <div class="flex max-sm:flex-col justify-between sm:items-center gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Public Key
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Your unique cryptographic identity.
+          </p>
+        </div>
+        <ClientOnly>
+          <div class="flex items-center gap-2">
+            <code class="text-xs font-mono text-(--ui-text-muted) bg-(--ui-bg-elevated) px-2 py-1 rounded">
+              {{ shortKey }}
+            </code>
+            <UButton
+              :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :label="copied ? 'Copied' : 'Copy'"
+              @click="copy(publicKeyB64 ?? '')"
+            />
+          </div>
+        </ClientOnly>
+      </div>
+
+      <!-- Identity type -->
+      <div class="flex max-sm:flex-col justify-between sm:items-center gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Identity Type
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Whether your identity is hardware-protected.
+          </p>
+        </div>
+        <ClientOnly>
+          <UBadge
+            :icon="isClaimed ? 'i-lucide-shield-check' : 'i-lucide-shield-off'"
+            :color="isClaimed ? 'success' : 'neutral'"
+            variant="subtle"
+            :label="isClaimed ? 'Hardware Protected' : 'Guest (Soft Key)'"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- Identity color -->
+      <div class="flex max-sm:flex-col justify-between items-start gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Identity Color
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Your cursor and avatar accent color.
+          </p>
+        </div>
+        <ClientOnly>
+          <div class="flex flex-wrap gap-2 max-w-sm">
+            <UTooltip
+              v-for="color in UI_COLORS"
+              :key="color"
+              :text="color"
+            >
+              <button
+                type="button"
+                class="size-6 rounded-full ring-2 ring-offset-2 ring-offset-(--ui-bg) transition-transform hover:scale-110 cursor-pointer"
+                :class="userColorName === color ? 'ring-(--ui-primary)' : 'ring-transparent'"
+                :style="{ background: `var(--color-${color}-400)` }"
+                @click="setUserColor(color)"
+              />
+            </UTooltip>
+          </div>
+        </ClientOnly>
+      </div>
+
+      <!-- Neutral color -->
+      <div class="flex max-sm:flex-col justify-between items-start gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Neutral Color
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Background tint for your UI theme.
+          </p>
+        </div>
+        <ClientOnly>
+          <div class="flex flex-wrap gap-2 max-w-sm">
+            <UTooltip
+              v-for="color in UI_NEUTRALS"
+              :key="color"
+              :text="color"
+            >
+              <button
+                type="button"
+                class="size-6 rounded-full ring-2 ring-offset-2 ring-offset-(--ui-bg) transition-transform hover:scale-110 cursor-pointer"
+                :class="userNeutralColorName === color ? 'ring-(--ui-primary)' : 'ring-transparent'"
+                :style="{ background: `var(--color-${color}-400)` }"
+                @click="setNeutralColor(color)"
+              />
+            </UTooltip>
+          </div>
+        </ClientOnly>
+      </div>
+
+      <!-- Font -->
+      <div class="flex max-sm:flex-col justify-between sm:items-center gap-4 p-4">
+        <div>
+          <p class="text-sm font-medium">
+            Font
+          </p>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Choose the UI font family.
+          </p>
+        </div>
+        <USelect
+          :model-value="fontFamily"
+          :items="fontItems"
+          value-key="value"
+          @update:model-value="setFont"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsProfilePanel.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/ASettingsSecurityPanel.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/ASettingsSecurityPanel.vue

@@ -0,0 +1,312 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { usePasskeyAccounts } from "../../composables/usePasskeyAccounts";
+const {
+  isClaimed,
+  claimAccount,
+  loginWithHardware,
+  logout,
+  client,
+  isReady,
+  publicKeyB64,
+  requirePasskeyOnLogin,
+  setRequirePasskey
+} = useAbracadabra();
+const { accounts: passkeyAccounts, removeAccount } = usePasskeyAccounts();
+const toast = (await import("#imports")).useToast?.() ?? { add() {
+} };
+const serverKeys = ref([]);
+const loadingKeys = ref(false);
+async function loadServerKeys() {
+  if (!client.value) return;
+  loadingKeys.value = true;
+  try {
+    serverKeys.value = await client.value.listKeys();
+  } catch (e) {
+    toast.add?.({ title: "Failed to load keys", description: e.message, color: "error" });
+  } finally {
+    loadingKeys.value = false;
+  }
+}
+watch(isReady, (ready) => {
+  if (ready) loadServerKeys();
+}, { immediate: true });
+async function handleClaim() {
+  try {
+    await claimAccount();
+    toast.add?.({ title: "Account claimed", icon: "i-lucide-shield-check", color: "success" });
+    await loadServerKeys();
+  } catch (e) {
+    toast.add?.({ title: "Claim failed", description: e.message, color: "error" });
+  }
+}
+async function handleLoginHardware() {
+  try {
+    await loginWithHardware();
+    toast.add?.({ title: "Authenticated", icon: "i-lucide-key-round", color: "success" });
+  } catch (e) {
+    toast.add?.({ title: "Login failed", description: e.message, color: "error" });
+  }
+}
+async function handleRevokeKey(id) {
+  if (!client.value) return;
+  try {
+    await client.value.revokeKey(id);
+    toast.add?.({ title: "Key revoked", color: "success", icon: "i-lucide-trash-2" });
+    await loadServerKeys();
+  } catch (e) {
+    toast.add?.({ title: "Failed to revoke", description: e.message, color: "error" });
+  }
+}
+function handleRemovePasskey(publicKey) {
+  removeAccount(publicKey);
+  toast.add?.({ title: "Passkey removed", color: "neutral", icon: "i-lucide-trash-2" });
+}
+function formatRelative(ts) {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+const showLogoutConfirm = ref(false);
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <h3 class="text-base font-semibold">
+        Security
+      </h3>
+      <p class="text-sm text-(--ui-text-muted) mt-1">
+        Manage your identity, passkeys, and registered keys.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <!-- Identity status -->
+      <ClientOnly>
+        <div class="flex items-center gap-3 p-3 rounded-lg bg-(--ui-bg-elevated)/60">
+          <UIcon
+            :name="isClaimed ? 'i-lucide-shield-check' : 'i-lucide-shield-off'"
+            class="size-5 shrink-0"
+            :class="isClaimed ? 'text-(--ui-color-success-500)' : 'text-(--ui-text-muted)'"
+          />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium">
+              {{ isClaimed ? "Hardware Protected" : "Guest Identity" }}
+            </p>
+            <p class="text-xs text-(--ui-text-muted)">
+              {{ isClaimed ? "Bound to hardware security enclave." : "Key stored in localStorage only." }}
+            </p>
+          </div>
+          <div class="flex gap-2 shrink-0">
+            <UButton
+              v-if="!isClaimed"
+              label="Claim Account"
+              icon="i-lucide-shield"
+              size="xs"
+              @click="handleClaim"
+            />
+            <UButton
+              v-if="!isClaimed && passkeyAccounts.length > 0"
+              label="Login with Passkey"
+              icon="i-lucide-key-round"
+              color="neutral"
+              variant="outline"
+              size="xs"
+              @click="handleLoginHardware"
+            />
+          </div>
+        </div>
+
+        <!-- Require passkey toggle -->
+        <div
+          v-if="isClaimed"
+          class="flex items-center justify-between gap-3 p-4 rounded-lg border border-(--ui-border)"
+        >
+          <div class="flex flex-col gap-0.5">
+            <span class="text-sm">Require Passkey on Login</span>
+            <span class="text-xs text-(--ui-text-muted)">Always require hardware authentication when opening the app.</span>
+          </div>
+          <USwitch
+            :model-value="requirePasskeyOnLogin"
+            @update:model-value="setRequirePasskey"
+          />
+        </div>
+      </ClientOnly>
+
+      <!-- Passkeys on device -->
+      <ClientOnly>
+        <template v-if="passkeyAccounts.length > 0">
+          <USeparator />
+          <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+            Passkeys on This Device
+          </p>
+          <div class="flex flex-col gap-1">
+            <div
+              v-for="account in passkeyAccounts"
+              :key="account.publicKey"
+              class="flex items-center gap-3 p-2.5 rounded-lg bg-(--ui-bg-elevated)/40"
+            >
+              <UAvatar
+                :alt="account.displayName"
+                size="sm"
+              />
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium truncate">
+                  {{ account.displayName }}
+                </p>
+                <p class="text-xs text-(--ui-text-muted)">
+                  Claimed {{ formatRelative(account.claimedAt) }} · Last used {{ formatRelative(account.lastUsedAt) }}
+                </p>
+              </div>
+              <UBadge
+                :color="account.publicKey === publicKeyB64 ? 'primary' : 'neutral'"
+                variant="subtle"
+                :label="account.publicKey === publicKeyB64 ? 'Active' : 'Inactive'"
+                size="xs"
+              />
+              <UButton
+                icon="i-lucide-trash-2"
+                color="error"
+                variant="ghost"
+                size="xs"
+                :disabled="account.publicKey === publicKeyB64"
+                @click="handleRemovePasskey(account.publicKey)"
+              />
+            </div>
+          </div>
+        </template>
+      </ClientOnly>
+
+      <!-- Server keys -->
+      <ClientOnly>
+        <USeparator />
+        <div class="flex items-center justify-between">
+          <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+            Registered Keys
+          </p>
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :loading="loadingKeys"
+            @click="loadServerKeys"
+          />
+        </div>
+
+        <div
+          v-if="loadingKeys"
+          class="space-y-2"
+        >
+          <USkeleton
+            v-for="i in 2"
+            :key="i"
+            class="h-12 w-full"
+          />
+        </div>
+
+        <div
+          v-else-if="serverKeys.length > 0"
+          class="flex flex-col gap-1"
+        >
+          <div
+            v-for="key in serverKeys"
+            :key="key.id"
+            class="flex items-center gap-3 p-2.5 rounded-lg bg-(--ui-bg-elevated)/40"
+          >
+            <UIcon
+              name="i-lucide-key"
+              class="size-4 text-(--ui-text-muted) shrink-0"
+            />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-mono truncate">
+                {{ key.publicKey.slice(0, 16) }}...
+              </p>
+              <p class="text-xs text-(--ui-text-muted)">
+                {{ key.deviceName ?? "Unknown device" }}
+              </p>
+            </div>
+            <UBadge
+              v-if="key.revoked"
+              color="error"
+              variant="subtle"
+              label="Revoked"
+              size="xs"
+            />
+            <UBadge
+              v-else-if="key.publicKey === publicKeyB64"
+              color="primary"
+              variant="subtle"
+              label="Current"
+              size="xs"
+            />
+            <UButton
+              v-if="!key.revoked && key.publicKey !== publicKeyB64"
+              icon="i-lucide-trash-2"
+              color="error"
+              variant="ghost"
+              size="xs"
+              @click="handleRevokeKey(key.id)"
+            />
+          </div>
+        </div>
+
+        <p
+          v-else
+          class="text-sm text-(--ui-text-muted) text-center py-2"
+        >
+          No keys registered on the server.
+        </p>
+      </ClientOnly>
+
+      <!-- Danger zone -->
+      <USeparator />
+      <div class="flex flex-col gap-3 p-3 rounded-lg border border-(--ui-color-error-500)/20 bg-(--ui-color-error-500)/5">
+        <p class="text-xs font-medium text-(--ui-color-error-500) uppercase tracking-wide">
+          Danger Zone
+        </p>
+        <div v-if="!showLogoutConfirm">
+          <UButton
+            label="Logout & Wipe Identity"
+            color="error"
+            variant="outline"
+            icon="i-lucide-log-out"
+            size="sm"
+            @click="showLogoutConfirm = true"
+          />
+        </div>
+        <div
+          v-else
+          class="flex flex-col gap-2"
+        >
+          <p class="text-sm text-(--ui-text-muted)">
+            This will clear your local key material. If your identity is not claimed, it will be permanently lost.
+          </p>
+          <div class="flex gap-2">
+            <UButton
+              label="Cancel"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              @click="showLogoutConfirm = false"
+            />
+            <UButton
+              label="Yes, Log Out"
+              color="error"
+              icon="i-lucide-log-out"
+              size="sm"
+              @click="logout()"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsSecurityPanel.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/ASettingsSpacesPanel.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;