@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/shell/AWelcomeScreen.vue

@@ -0,0 +1,422 @@
+<script setup>
+import { ref, computed, watch, watchEffect } from "vue";
+const open = defineModel("open", { type: Boolean, ...{ default: true } });
+const props = defineProps({
+  userName: { type: String, required: false, default: "" },
+  avatarStyle: { type: String, required: false, default: "" },
+  colors: { type: Array, required: false, default: () => ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"] },
+  neutrals: { type: Array, required: false, default: () => ["slate", "gray", "zinc", "neutral", "stone"] },
+  currentColor: { type: String, required: false, default: "blue" },
+  currentNeutral: { type: String, required: false, default: "zinc" },
+  isClaimed: { type: Boolean, required: false, default: false },
+  connecting: { type: Boolean, required: false, default: false },
+  connectionError: { type: String, required: false, default: "" },
+  claimLoading: { type: Boolean, required: false, default: false },
+  claimError: { type: [String, null], required: false, default: null },
+  claimSuccess: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["done", "set-name", "set-color", "set-neutral", "start-local", "connect-server", "claim-passkey"]);
+const step = ref("identity");
+const displayName = ref(props.userName || "");
+const serverUrl = ref("");
+watchEffect(() => {
+  if (!displayName.value && props.userName) displayName.value = props.userName;
+});
+const stepIndex = computed(() => {
+  if (step.value === "identity") return 0;
+  if (step.value === "done") return 2;
+  return 1;
+});
+function commitIdentity() {
+  const trimmed = displayName.value.trim();
+  if (!trimmed) return;
+  if (trimmed !== props.userName) emit("set-name", trimmed);
+  step.value = "choose";
+}
+function close() {
+  open.value = false;
+  emit("done");
+}
+function finish() {
+  close();
+}
+function startLocal() {
+  emit("start-local");
+  step.value = "done";
+}
+function connectToServer() {
+  const raw = serverUrl.value.trim();
+  if (!raw) return;
+  emit("connect-server", raw);
+}
+watch(() => props.connecting, (val, prev) => {
+  if (prev && !val && !props.connectionError && step.value === "server") {
+    step.value = "done";
+  }
+});
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :closeable="true"
+    :ui="{
+  content: 'sm:max-w-xl divide-y-0',
+  header: 'hidden',
+  close: 'absolute top-3 end-3 z-10'
+}"
+    :close="{
+  icon: 'i-lucide-x',
+  color: 'neutral',
+  variant: 'ghost',
+  size: 'sm'
+}"
+  >
+    <template #body>
+      <div class="flex flex-col gap-6">
+        <Transition
+          name="step-fade"
+          mode="out-in"
+        >
+          <!-- ── Step 1: Identity ────────────────────────────── -->
+          <div
+            v-if="step === 'identity'"
+            key="identity"
+            class="flex flex-col gap-6"
+          >
+            <!-- Hero -->
+            <div class="flex flex-col items-center text-center gap-4 pt-4">
+              <slot name="logo">
+                <UIcon
+                  name="i-lucide-wand-sparkles"
+                  class="size-10 text-(--color-primary-500)"
+                />
+              </slot>
+              <div class="flex flex-col items-center gap-1">
+                <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+                  <slot name="title">
+                    Welcome
+                  </slot>
+                </h2>
+                <p class="text-sm text-(--ui-text-muted)">
+                  <slot name="subtitle">
+                    Set up your identity to get started
+                  </slot>
+                </p>
+              </div>
+            </div>
+
+            <!-- Avatar + name input -->
+            <div class="flex flex-col items-center gap-4">
+              <UAvatar
+                :alt="displayName || '?'"
+                size="xl"
+                :style="avatarStyle"
+                class="ring-2 ring-(--ui-border)"
+              />
+              <UInput
+                v-model="displayName"
+                placeholder="Display name"
+                size="lg"
+                class="w-full max-w-xs"
+                autofocus
+                @keydown.enter="commitIdentity"
+              />
+            </div>
+
+            <!-- Color picker -->
+            <div class="flex flex-col items-center gap-2">
+              <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+                Choose your color
+              </p>
+              <div class="flex flex-wrap justify-center gap-1.5 max-w-78">
+                <UTooltip
+                  v-for="color in colors"
+                  :key="color"
+                  :text="color"
+                >
+                  <button
+                    class="w-5 h-5 rounded-full ring-2 ring-offset-1 ring-offset-(--ui-bg) transition-all duration-150 hover:scale-110 focus:outline-none"
+                    :class="currentColor === color ? 'ring-current scale-110' : 'ring-transparent'"
+                    :style="{ background: `var(--color-${color}-400)` }"
+                    @click="emit('set-color', color)"
+                  />
+                </UTooltip>
+              </div>
+            </div>
+
+            <!-- Neutral color picker -->
+            <div class="flex flex-col items-center gap-2">
+              <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+                Choose your neutral
+              </p>
+              <div class="flex flex-wrap justify-center gap-1.5 max-w-78">
+                <UTooltip
+                  v-for="color in neutrals"
+                  :key="color"
+                  :text="color"
+                >
+                  <button
+                    class="w-5 h-5 rounded-full ring-2 ring-offset-1 ring-offset-(--ui-bg) transition-all duration-150 hover:scale-110 focus:outline-none"
+                    :class="currentNeutral === color ? 'ring-current scale-110' : 'ring-transparent'"
+                    :style="{ background: `var(--color-${color}-400)` }"
+                    @click="emit('set-neutral', color)"
+                  />
+                </UTooltip>
+              </div>
+            </div>
+
+            <!-- Continue -->
+            <UButton
+              label="Continue"
+              icon="i-lucide-arrow-right"
+              trailing
+              size="lg"
+              block
+              :disabled="!displayName.trim()"
+              @click="commitIdentity"
+            />
+
+            <!-- Extra slot for "What is this?" etc. -->
+            <slot name="identity-footer" />
+          </div>
+
+          <!-- ── Step 2: Choose mode ─────────────────────────── -->
+          <div
+            v-else-if="step === 'choose'"
+            key="choose"
+            class="flex flex-col gap-6"
+          >
+            <div class="flex flex-col items-center text-center gap-4 pt-4">
+              <UAvatar
+                :alt="displayName"
+                size="lg"
+                :style="avatarStyle"
+              />
+              <div class="flex flex-col items-center gap-1">
+                <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+                  How would you like to get started?
+                </h2>
+                <p class="text-sm text-(--ui-text-muted)">
+                  You can change this later
+                </p>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 gap-2">
+              <button
+                class="group flex flex-col items-center gap-2.5 p-4 rounded-lg border border-transparent text-center transition-all duration-200 hover:border-(--ui-border) hover:bg-(--ui-bg-elevated)/60"
+                @click="startLocal"
+              >
+                <UIcon
+                  name="i-lucide-hard-drive"
+                  class="size-5 text-(--ui-text-muted) group-hover:text-(--color-primary-500) transition-colors"
+                />
+                <div class="flex flex-col gap-0.5">
+                  <span class="text-xs font-semibold text-(--ui-text-highlighted) leading-tight">Start locally</span>
+                  <span class="text-[11px] text-(--ui-text-muted) leading-snug">No server needed</span>
+                </div>
+              </button>
+
+              <slot name="hosted-option">
+                <div />
+              </slot>
+
+              <button
+                class="group flex flex-col items-center gap-2.5 p-4 rounded-lg border border-transparent text-center transition-all duration-200 hover:border-(--ui-border) hover:bg-(--ui-bg-elevated)/60"
+                @click="step = 'server'"
+              >
+                <UIcon
+                  name="i-lucide-server"
+                  class="size-5 text-(--ui-text-muted) group-hover:text-(--color-primary-500) transition-colors"
+                />
+                <div class="flex flex-col gap-0.5">
+                  <span class="text-xs font-semibold text-(--ui-text-highlighted) leading-tight">Self-hosted</span>
+                  <span class="text-[11px] text-(--ui-text-muted) leading-snug">Your infrastructure</span>
+                </div>
+              </button>
+            </div>
+
+            <slot name="choose-footer" />
+          </div>
+
+          <!-- ── Step 2b: Self-hosted server ─────────────────── -->
+          <div
+            v-else-if="step === 'server'"
+            key="server"
+            class="flex flex-col gap-6"
+          >
+            <div class="flex flex-col items-center text-center gap-4 pt-4">
+              <slot name="logo">
+                <UIcon
+                  name="i-lucide-wand-sparkles"
+                  class="size-10 text-(--color-primary-500)"
+                />
+              </slot>
+              <div class="flex flex-col items-center gap-1">
+                <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+                  Connect to server
+                </h2>
+                <p class="text-sm text-(--ui-text-muted)">
+                  Enter your server URL
+                </p>
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-3 w-full">
+              <UInput
+                v-model="serverUrl"
+                placeholder="https://your-server.example.com"
+                size="lg"
+                autofocus
+                :disabled="connecting"
+                @keydown.enter="connectToServer"
+              />
+              <p
+                v-if="connectionError"
+                class="text-xs text-(--ui-color-error-500)"
+              >
+                {{ connectionError }}
+              </p>
+              <div class="flex gap-2">
+                <UButton
+                  color="primary"
+                  :loading="connecting"
+                  @click="connectToServer"
+                >
+                  Connect
+                </UButton>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  :disabled="connecting"
+                  @click="step = 'choose'"
+                >
+                  Back
+                </UButton>
+              </div>
+            </div>
+          </div>
+
+          <!-- ── Step 3: Done + Passkey ───────────────────────── -->
+          <div
+            v-else-if="step === 'done'"
+            key="done"
+            class="flex flex-col items-center gap-6 py-4"
+          >
+            <!-- Already claimed or just claimed -->
+            <template v-if="isClaimed || claimSuccess">
+              <div class="relative">
+                <UAvatar
+                  :alt="displayName"
+                  size="2xl"
+                  :style="avatarStyle"
+                />
+                <div class="absolute -bottom-1 -right-1 rounded-full p-0.5 bg-(--ui-color-success-500)">
+                  <UIcon
+                    name="i-lucide-shield-check"
+                    class="text-white size-4"
+                  />
+                </div>
+              </div>
+
+              <div class="text-center">
+                <p class="font-semibold text-lg text-(--ui-text-highlighted)">
+                  {{ claimSuccess ? "Identity protected" : "All set" }}
+                </p>
+                <p class="text-sm text-(--ui-text-muted) mt-1">
+                  <template v-if="claimSuccess">
+                    Your identity is now hardware-bound, {{ displayName }}
+                  </template>
+                  <template v-else>
+                    Welcome back, {{ displayName }}
+                  </template>
+                </p>
+              </div>
+
+              <UButton
+                label="Open dashboard"
+                icon="i-lucide-arrow-right"
+                trailing
+                size="lg"
+                block
+                @click="finish"
+              />
+            </template>
+
+            <!-- Default: offer passkey -->
+            <template v-else>
+              <div class="relative">
+                <UAvatar
+                  :alt="displayName"
+                  size="2xl"
+                  :style="avatarStyle"
+                />
+                <div class="absolute -bottom-1 -right-1 rounded-full p-0.5 bg-(--ui-color-success-500)">
+                  <UIcon
+                    name="i-lucide-check"
+                    class="text-white size-4"
+                  />
+                </div>
+              </div>
+
+              <div class="text-center">
+                <p class="font-semibold text-lg text-(--ui-text-highlighted)">
+                  Workspace ready
+                </p>
+                <p class="text-sm text-(--ui-text-muted) mt-1">
+                  Secure your identity with a passkey
+                </p>
+              </div>
+
+              <UAlert
+                v-if="claimError"
+                color="error"
+                variant="soft"
+                icon="i-lucide-triangle-alert"
+                :description="claimError"
+                class="w-full"
+              />
+
+              <div class="flex flex-col gap-2 w-full">
+                <UButton
+                  icon="i-lucide-fingerprint"
+                  label="Secure with passkey"
+                  size="lg"
+                  block
+                  :loading="claimLoading"
+                  @click="emit('claim-passkey')"
+                />
+                <UButton
+                  label="Skip for now"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  block
+                  :disabled="claimLoading"
+                  @click="finish"
+                />
+              </div>
+            </template>
+          </div>
+        </Transition>
+
+        <!-- Step indicator dots -->
+        <div class="flex justify-center gap-1.5 pb-1">
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="h-1 rounded-full transition-all duration-300"
+            :class="
+  i - 1 === stepIndex ? 'w-4 bg-(--color-primary-500)' : i - 1 < stepIndex ? 'w-1.5 bg-(--color-primary-500)/40' : 'w-1.5 bg-(--ui-border)'
+"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.step-fade-enter-active,.step-fade-leave-active{transition:opacity .2s ease,transform .2s ease}.step-fade-enter-from{opacity:0;transform:translateX(12px)}.step-fade-leave-to{opacity:0;transform:translateX(-12px)}
+</style>

package/dist/runtime/components/shell/AWelcomeScreen.vue.d.ts

@@ -0,0 +1,96 @@
+type __VLS_Props = {
+    /** Current user name (pre-filled in identity step) */
+    userName?: string;
+    /** User avatar style (CSS) */
+    avatarStyle?: string;
+    /** Available UI accent colors */
+    colors?: string[];
+    /** Available UI neutral colors */
+    neutrals?: string[];
+    /** Currently selected accent color */
+    currentColor?: string;
+    /** Currently selected neutral color */
+    currentNeutral?: string;
+    /** Whether the account is already claimed (passkey) */
+    isClaimed?: boolean;
+    /** Whether server connection is in progress */
+    connecting?: boolean;
+    /** Server connection error */
+    connectionError?: string;
+    /** Whether passkey claim is in progress */
+    claimLoading?: boolean;
+    /** Passkey claim error */
+    claimError?: string | null;
+    /** Whether passkey was just claimed */
+    claimSuccess?: boolean;
+};
+type __VLS_ModelProps = {
+    /**
+     * Welcome/onboarding screen.
+     *
+     * 3-step flow: identity setup → mode selection → done (optional passkey).
+     * Slot-based and emit-driven — the consuming app handles actual server
+     * connections, space creation, and navigation.
+     *
+     * Ported from cou-sh/app/components/WelcomeScreen.vue — decoupled from
+     * useAbracadabra, useSpaceRegistry, and all app-specific modals.
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {}, __VLS_22: {}, __VLS_24: {}, __VLS_57: {}, __VLS_69: {}, __VLS_76: {}, __VLS_78: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_15) => any;
+} & {
+    title?: (props: typeof __VLS_22) => any;
+} & {
+    subtitle?: (props: typeof __VLS_24) => any;
+} & {
+    'identity-footer'?: (props: typeof __VLS_57) => any;
+} & {
+    'hosted-option'?: (props: typeof __VLS_69) => any;
+} & {
+    'choose-footer'?: (props: typeof __VLS_76) => any;
+} & {
+    logo?: (props: typeof __VLS_78) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: () => any;
+    "update:open": (value: boolean) => any;
+    "set-name": (name: string) => any;
+    "set-color": (color: string) => any;
+    "set-neutral": (color: string) => any;
+    "start-local": () => any;
+    "connect-server": (url: string) => any;
+    "claim-passkey": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDone?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onSet-name"?: ((name: string) => any) | undefined;
+    "onSet-color"?: ((color: string) => any) | undefined;
+    "onSet-neutral"?: ((color: string) => any) | undefined;
+    "onStart-local"?: (() => any) | undefined;
+    "onConnect-server"?: ((url: string) => any) | undefined;
+    "onClaim-passkey"?: (() => any) | undefined;
+}>, {
+    connecting: boolean;
+    userName: string;
+    currentColor: string;
+    isClaimed: boolean;
+    avatarStyle: string;
+    colors: string[];
+    neutrals: string[];
+    currentNeutral: string;
+    connectionError: string;
+    claimLoading: boolean;
+    claimError: string | null;
+    claimSuccess: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useAAField.js

@@ -1,4 +1,6 @@
 import { computed, isRef } from "vue";
+import { useAwareness } from "./useAwareness.js";
+import { useAwarenessPeers } from "./useAwarenessPeers.js";
 export function useAAField(key) {
   const { setField } = useAwareness();
   const { peers } = useAwarenessPeers();

package/dist/runtime/composables/useAbraLocale.js

@@ -1,4 +1,5 @@
 import { DEFAULT_LOCALE } from "../locale.js";
+import { useRuntimeConfig } from "#imports";
 export function useAbraLocale(section, overrides) {
   const config = useRuntimeConfig();
   const moduleLocale = config.public?.abracadabra?.locale;

package/dist/runtime/composables/useAbracadabra.js

@@ -1,3 +1,4 @@
+import { useNuxtApp } from "#imports";
 export function useAbracadabra() {
   return useNuxtApp().$abracadabra;
 }

package/dist/runtime/composables/useAbracadabraAuth.d.ts

@@ -1,8 +1,5 @@
-/**
- * Focused auth composable — a subset of useAbracadabra() for components
- * that only need identity/auth state without importing the entire surface.
- */
 export declare function useAbracadabraAuth(): {
+    identityState: any;
     isClaimed: any;
     identityLost: any;
     needsReauth: any;
@@ -16,6 +13,8 @@ export declare function useAbracadabraAuth(): {
     claimAccount: any;
     loginWithHardware: any;
     logout: any;
+    recoverIdentity: any;
+    unblockConnection: any;
     setUserName: any;
     setUserColor: any;
     setNeutralColor: any;

package/dist/runtime/composables/useAbracadabraAuth.js

@@ -1,6 +1,8 @@
+import { useNuxtApp } from "#imports";
 export function useAbracadabraAuth() {
   const abra = useNuxtApp().$abracadabra;
   return {
+    identityState: abra.identityState,
     isClaimed: abra.isClaimed,
     identityLost: abra.identityLost,
     needsReauth: abra.needsReauth,
@@ -14,6 +16,8 @@ export function useAbracadabraAuth() {
     claimAccount: abra.claimAccount,
     loginWithHardware: abra.loginWithHardware,
     logout: abra.logout,
+    recoverIdentity: abra.recoverIdentity,
+    unblockConnection: abra.unblockConnection,
     setUserName: abra.setUserName,
     setUserColor: abra.setUserColor,
     setNeutralColor: abra.setNeutralColor,

package/dist/runtime/composables/useAwareness.js

@@ -1,4 +1,6 @@
 import { shallowRef, computed, watch } from "vue";
+import { tryOnScopeDispose } from "@vueuse/core";
+import { useAbracadabra } from "./useAbracadabra.js";
 export function useAwareness() {
   const { provider } = useAbracadabra();
   const states = shallowRef(/* @__PURE__ */ new Map());
@@ -22,6 +24,10 @@ export function useAwareness() {
     _unsub = () => awareness.off("change", handler);
   }
   watch(provider, () => _subscribe(), { immediate: true });
+  tryOnScopeDispose(() => {
+    _unsub?.();
+    _unsub = null;
+  });
   const localState = computed(() => {
     const awareness = provider.value?.awareness;
     if (!awareness) return {};

package/dist/runtime/composables/useAwarenessPeers.js

@@ -1,5 +1,6 @@
 import { shallowRef, computed, watch, isRef } from "vue";
 import { useAwarenessOf } from "./useYDoc.js";
+import { useAbracadabra } from "./useAbracadabra.js";
 export function useAwarenessPeers() {
   const { provider } = useAbracadabra();
   const providerRef = shallowRef(provider.value);

package/dist/runtime/composables/useBackgroundSync.d.ts

@@ -14,6 +14,8 @@ interface DocSyncState {
 }
 export declare function _initBackgroundSync(manager: any, intervalMs?: number): void;
 export declare function _destroyBackgroundSync(): void;
+declare function pause(): void;
+declare function resume(intervalMs?: number): void;
 declare function syncNow(): Promise<void>;
 declare function syncDoc(docId: string): Promise<void>;
 export declare function useBackgroundSync(): {
@@ -27,11 +29,14 @@ export declare function useBackgroundSync(): {
         error?: string | undefined;
     }> & Omit<Map<string, DocSyncState>, keyof Map<any, any>>)>;
     isSyncing: import("vue").Ref<boolean, boolean>;
+    isPaused: import("vue").Ref<boolean, boolean>;
     syncedCount: import("vue").ComputedRef<number>;
     errorCount: import("vue").ComputedRef<number>;
     progress: import("vue").ComputedRef<number>;
     lastCompletedAt: import("vue").Ref<number | null, number | null>;
     syncNow: typeof syncNow;
     syncDoc: typeof syncDoc;
+    pause: typeof pause;
+    resume: typeof resume;
 };
 export {};