@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/AClaimAccountModal.vue

@@ -0,0 +1,230 @@
+<script setup>
+import { ref, watch } from "vue";
+import { UI_COLORS } from "../types";
+import { useAbracadabra } from "../composables/useAbracadabra";
+const props = defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:open"]);
+const {
+  userName,
+  userColorName,
+  setUserColor,
+  setUserName,
+  claimAccount
+} = useAbracadabra();
+const step = ref("identity");
+const displayName = ref("");
+const isLoading = ref(false);
+const error = ref(null);
+watch(() => props.open, (open) => {
+  if (!open) return;
+  displayName.value = userName.value;
+  step.value = "identity";
+  error.value = null;
+});
+function commitIdentity() {
+  const trimmed = displayName.value.trim();
+  if (!trimmed) return;
+  step.value = "passkey";
+}
+async function handleClaim() {
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const trimmed = displayName.value.trim();
+    if (trimmed && trimmed !== userName.value) setUserName(trimmed);
+    await claimAccount();
+    step.value = "success";
+  } catch (e) {
+    error.value = e?.message ?? "Passkey creation failed";
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    :ui="{
+  content: 'sm:max-w-md',
+  header: 'hidden',
+  footer: 'hidden'
+}"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="p-6">
+        <!-- Step 1: Identity -->
+        <div
+          v-if="step === 'identity'"
+          class="flex flex-col gap-6"
+        >
+          <div class="flex flex-col items-center text-center gap-4 pt-4">
+            <UAvatar
+              :alt="displayName || '?'"
+              size="xl"
+              class="ring-2 ring-(--ui-border)"
+            />
+            <div>
+              <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+                Claim Your Identity
+              </h2>
+              <p class="text-sm text-(--ui-text-muted) mt-1">
+                Protect your identity with a hardware passkey.
+              </p>
+            </div>
+          </div>
+
+          <UInput
+            v-model="displayName"
+            placeholder="Your display name"
+            size="lg"
+            class="w-full max-w-xs mx-auto"
+            autofocus
+            @keydown.enter="commitIdentity"
+          />
+
+          <div class="flex flex-col items-center gap-2">
+            <p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">
+              Identity Color
+            </p>
+            <div class="flex flex-wrap justify-center gap-1.5 max-w-78">
+              <UTooltip
+                v-for="color in UI_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="userColorName === color ? 'ring-current scale-110' : 'ring-transparent'"
+                  :style="{ background: `var(--color-${color}-400)` }"
+                  @click="setUserColor(color)"
+                />
+              </UTooltip>
+            </div>
+          </div>
+
+          <UButton
+            label="Continue"
+            icon="i-lucide-arrow-right"
+            trailing
+            size="lg"
+            block
+            :disabled="!displayName.trim()"
+            @click="commitIdentity"
+          />
+
+          <UButton
+            label="Cancel"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            block
+            @click="emit('update:open', false)"
+          />
+        </div>
+
+        <!-- Step 2: Passkey ceremony -->
+        <div
+          v-else-if="step === 'passkey'"
+          class="flex flex-col items-center gap-6 py-4"
+        >
+          <div class="w-16 h-16 rounded-2xl bg-(--ui-bg-elevated) flex items-center justify-center">
+            <UIcon
+              name="i-lucide-fingerprint"
+              class="size-8 text-(--ui-text-muted)"
+            />
+          </div>
+
+          <div class="text-center">
+            <p class="font-semibold text-lg text-(--ui-text-highlighted)">
+              Create Passkey
+            </p>
+            <p class="text-sm text-(--ui-text-muted) mt-1">
+              Binding identity to {{ displayName }}'s device.
+            </p>
+          </div>
+
+          <UAlert
+            v-if="error"
+            color="error"
+            variant="soft"
+            icon="i-lucide-triangle-alert"
+            :description="error"
+            class="w-full"
+          />
+
+          <UButton
+            size="lg"
+            block
+            :loading="isLoading"
+            icon="i-lucide-key-round"
+            @click="handleClaim"
+          >
+            Create Passkey
+          </UButton>
+
+          <UButton
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            :disabled="isLoading"
+            @click="error = null;
+  step = 'identity'"
+          >
+            Back
+          </UButton>
+        </div>
+
+        <!-- Step 3: Success -->
+        <div
+          v-else-if="step === 'success'"
+          class="flex flex-col items-center gap-6 py-4"
+        >
+          <div class="relative">
+            <UAvatar
+              :alt="displayName"
+              size="xl"
+            />
+            <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)">
+              Identity Protected
+            </p>
+            <p class="text-sm text-(--ui-text-muted) mt-1">
+              {{ displayName }}'s identity is now bound to this device.
+            </p>
+          </div>
+
+          <UButton
+            label="Done"
+            size="lg"
+            block
+            @click="emit('update:open', false)"
+          />
+        </div>
+
+        <!-- Step indicator -->
+        <div class="flex justify-center gap-1.5 mt-4">
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="h-1 rounded-full transition-all duration-300"
+            :class="
+  i - 1 === ['identity', 'passkey', 'success'].indexOf(step) ? 'w-4 bg-(--color-primary-500)' : i - 1 < ['identity', 'passkey', 'success'].indexOf(step) ? 'w-1.5 bg-(--color-primary-500)/40' : 'w-1.5 bg-(--ui-border)'
+"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/AClaimAccountModal.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ACollaborationUsers.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, shallowRef, watch } from "vue";
+import { useAppConfig } from "#imports";
 import { useAwarenessOf } from "../composables/useYDoc";
 import { avatarBorderStyle } from "../utils/avatarStyle";
 const props = defineProps({

package/dist/runtime/components/AColorPicker.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from "vue";
+import { useAbraLocale } from "#imports";
 import { COLOR_PALETTES, findPaletteByHex } from "../utils/colorPalettes";
 const props = defineProps({
   modelValue: { type: String, required: false },
@@ -10,9 +12,9 @@ const locale = computed(() => useAbraLocale("colorPicker", props.labels));
 const open = ref(false);
 const swatches = computed(() => COLOR_PALETTES.map((p) => ({
   name: p.name,
-  hex: p.shades.find((s) => s.shade === 400)?.hex ?? p.shades[Math.floor(p.shades.length / 2)].hex
+  hex: p.shades.find((s) => s.shade === 400)?.hex ?? p.shades[Math.floor(p.shades.length / 2)]?.hex ?? "#888"
 })));
-const currentMatch = computed(() => props.modelValue ? findPaletteByHex(props.modelValue) : null);
+const _currentMatch = computed(() => props.modelValue ? findPaletteByHex(props.modelValue) : null);
 function select(hex) {
   if (props.modelValue === hex) {
     emit("update:modelValue", void 0);

package/dist/runtime/components/ACommandPalette.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { watch } from "vue";
+import { useCommandPalette, defineShortcuts } from "#imports";
 import { useAbraLocale } from "../composables/useAbraLocale";
 const props = defineProps({
   open: { type: Boolean, required: false },
@@ -7,7 +9,7 @@ const props = defineProps({
 });
 const locale = useAbraLocale("commandPalette", props.labels);
 const emit = defineEmits(["update:open"]);
-const { isOpen, searchTerm, groups, toggle, close } = useCommandPalette();
+const { isOpen, searchTerm, groups, toggle, close: _close } = useCommandPalette();
 watch(() => props.open, (v) => {
   if (v !== void 0) isOpen.value = v;
 });
@@ -17,13 +19,16 @@ defineShortcuts({ meta_k: toggle });
 
 <template>
   <ClientOnly>
-    <UModal v-model:open="isOpen" :ui="{ content: 'p-0' }">
+    <UModal
+      v-model:open="isOpen"
+      :ui="{ content: 'p-0' }"
+    >
       <template #content>
         <UCommandPalette
           v-model="searchTerm"
           :groups="groups"
           :placeholder="placeholder ?? locale.placeholder"
-          @update:model-value="searchTerm = $event"
+          @update:model-value="searchTerm = String($event ?? '')"
         />
       </template>
     </UModal>

package/dist/runtime/components/AConnectServerModal.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (url: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onDone?: ((url: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/AConnectServerModal.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["done"]);
+const abra = useAbracadabra();
+const serverUrl = ref("");
+const connecting = ref(false);
+const error = ref("");
+const step = ref("connect");
+const connectedUrl = ref("");
+const inviteCode = ref("");
+const inviteLoading = ref(false);
+const inviteError = ref(null);
+watch(open, (v) => {
+  if (!v) return;
+  step.value = "connect";
+  serverUrl.value = "";
+  error.value = "";
+  connectedUrl.value = "";
+  inviteCode.value = "";
+  inviteError.value = null;
+});
+function onInviteInput(e) {
+  const raw = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+  const parts = raw.match(/.{1,4}/g) ?? [];
+  inviteCode.value = parts.join("-").slice(0, 14);
+}
+async function handleConnect() {
+  const raw = serverUrl.value.trim();
+  if (!raw) return;
+  connecting.value = true;
+  error.value = "";
+  try {
+    let url = raw;
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      url = "https://" + url;
+    }
+    url = url.replace(/\/$/, "");
+    const resp = await fetch(`${url}/info`);
+    if (!resp.ok) throw new Error(`Server returned ${resp.status}`);
+    const info = await resp.json();
+    await abra.addServer(url);
+    connectedUrl.value = url;
+    if (info.invite_only) {
+      step.value = "invite";
+    } else {
+      await finishConnection(url);
+    }
+  } catch (e) {
+    error.value = e?.message || "Connection failed";
+  } finally {
+    connecting.value = false;
+  }
+}
+async function handleInviteRedeem() {
+  const trimmed = inviteCode.value.trim();
+  if (!trimmed) return;
+  inviteLoading.value = true;
+  inviteError.value = null;
+  try {
+    await abra.redeemInvite(trimmed);
+    await finishConnection(connectedUrl.value);
+  } catch (e) {
+    inviteError.value = e?.message ?? "Invite redemption failed";
+  } finally {
+    inviteLoading.value = false;
+  }
+}
+async function finishConnection(url) {
+  await abra.switchServer(url);
+  open.value = false;
+  emit("done", url);
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :ui="{
+  content: 'sm:max-w-md',
+  header: 'hidden',
+  footer: 'hidden'
+}"
+  >
+    <template #body>
+      <div class="flex flex-col gap-6 p-6">
+        <!-- Step 1: Connect -->
+        <template v-if="step === 'connect'">
+          <div class="flex flex-col items-center text-center gap-4 pt-4">
+            <div class="w-14 h-14 rounded-2xl bg-(--ui-bg-elevated) flex items-center justify-center">
+              <UIcon
+                name="i-lucide-server"
+                class="size-7 text-(--color-primary-500)"
+              />
+            </div>
+            <div>
+              <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 the URL of an Abracadabra server.
+              </p>
+            </div>
+          </div>
+
+          <UInput
+            v-model="serverUrl"
+            placeholder="https://abra.example.com"
+            size="lg"
+            autofocus
+            :disabled="connecting"
+            @keydown.enter="handleConnect"
+          />
+
+          <p
+            v-if="error"
+            class="text-xs text-(--ui-color-error-500)"
+          >
+            {{ error }}
+          </p>
+
+          <div class="flex gap-2">
+            <UButton
+              color="primary"
+              :loading="connecting"
+              @click="handleConnect"
+            >
+              Connect
+            </UButton>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :disabled="connecting"
+              @click="open = false"
+            >
+              Cancel
+            </UButton>
+          </div>
+        </template>
+
+        <!-- Step 2: Invite required -->
+        <template v-else>
+          <div class="flex flex-col items-center text-center gap-4 pt-4">
+            <UIcon
+              name="i-lucide-ticket"
+              class="size-8 text-(--color-primary-500)"
+            />
+            <div>
+              <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+                Invite Required
+              </h2>
+              <p class="text-sm text-(--ui-text-muted)">
+                This server requires an invite code to join.
+              </p>
+            </div>
+          </div>
+
+          <UInput
+            :model-value="inviteCode"
+            placeholder="XXXX-XXXX-XXXX"
+            class="font-mono tracking-widest"
+            size="lg"
+            autofocus
+            :disabled="inviteLoading"
+            @input="onInviteInput"
+            @keydown.enter="handleInviteRedeem"
+          />
+
+          <p
+            v-if="inviteError"
+            class="text-xs text-(--ui-color-error-500)"
+          >
+            {{ inviteError }}
+          </p>
+
+          <div class="flex gap-2">
+            <UButton
+              color="primary"
+              icon="i-lucide-ticket-check"
+              :loading="inviteLoading"
+              :disabled="inviteCode.replace(/-/g, '').length < 12"
+              @click="handleInviteRedeem"
+            >
+              Redeem
+            </UButton>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :disabled="inviteLoading"
+              @click="step = 'connect'"
+            >
+              Back
+            </UButton>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/AConnectServerModal.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (url: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onDone?: ((url: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/AConnectionStatus.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { useConnectionStatus } from "../composables/useConnectionStatus";
 const props = defineProps({
   status: { type: String, required: false },

package/dist/runtime/components/ADocPickModal.d.vue.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: {
+        id: string;
+        label: string;
+    } | null) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((value: {
+        id: string;
+        label: string;
+    } | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocPickModal.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useSyncedMap } from "../composables/useYDoc";
+import { resolveDocType } from "../utils/docTypes";
+const emit = defineEmits(["close"]);
+const { doc: rootDoc } = useAbracadabra();
+const treeMap = useSyncedMap(
+  rootDoc,
+  "doc-tree"
+);
+const open = ref(true);
+function selectDoc(id, label) {
+  open.value = false;
+  emit("close", { id, label });
+}
+function onModalClose() {
+  emit("close", null);
+}
+function parentPath(id) {
+  if (!id) return "";
+  const entry = treeMap.data[id];
+  if (!entry) return "";
+  const ancestor = parentPath(entry.parentId);
+  return ancestor ? `${ancestor} / ${entry.label || "Untitled"}` : entry.label || "Untitled";
+}
+const groups = computed(() => {
+  const items = Object.entries(treeMap.data).map(([id, entry]) => {
+    const typeDef = resolveDocType(entry.type);
+    const path = parentPath(entry.parentId);
+    return {
+      id,
+      prefix: path ? `${path} /` : void 0,
+      label: entry.label || "Untitled",
+      suffix: typeDef.label,
+      icon: typeDef.icon,
+      onSelect(e) {
+        e.preventDefault();
+        selectDoc(id, entry.label || "Untitled");
+      }
+    };
+  });
+  return [{ id: "pages", label: "Link to page", items }];
+});
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="Link to page"
+    @after:leave="onModalClose"
+  >
+    <template #content>
+      <UCommandPalette
+        :groups="groups"
+        placeholder="Search for a page to link..."
+        :fuse="{
+  fuseOptions: { keys: ['prefix', 'label'], threshold: 0.3 },
+  resultLimit: 20,
+  matchAllWhenSearchEmpty: true
+}"
+        :ui="{
+  itemLabel: 'flex items-baseline',
+  itemLabelPrefix: 'text-dimmed text-xs truncate min-w-0',
+  itemLabelBase: 'truncate min-w-[2rem] shrink-[0.01]',
+  itemLabelSuffix: 'shrink-0 whitespace-nowrap'
+}"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/ADocPickModal.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: {
+        id: string;
+        label: string;
+    } | null) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((value: {
+        id: string;
+        label: string;
+    } | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocRenderer.d.vue.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    /** Document ID to render */
+    docId: string;
+    /** Whether the document is editable. Default: true */
+    editable?: boolean;
+    /** CSS class applied to editor-type documents (doc, or hasEditor: true) */
+    editorClass?: string;
+    /** CSS class applied to structured renderers (kanban, table, etc.) */
+    rendererClass?: string;
+};
+declare var __VLS_1: {}, __VLS_23: {
+    error: string;
+};
+type __VLS_Slots = {} & {
+    loading?: (props: typeof __VLS_1) => any;
+} & {
+    error?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: 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;
+    };
+};