@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/ASpaceFormModal.vue

@@ -0,0 +1,182 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useSpaces } from "../composables/useSpaces";
+const props = defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:open", "created"]);
+const { create } = useSpaces();
+const name = ref("");
+const description = ref("");
+const visibility = ref("public");
+const creating = ref(false);
+const error = ref(null);
+watch(() => props.open, (open) => {
+  if (!open) return;
+  name.value = "";
+  description.value = "";
+  visibility.value = "public";
+  error.value = null;
+  creating.value = false;
+});
+async function handleCreate() {
+  if (!name.value.trim()) return;
+  creating.value = true;
+  error.value = null;
+  try {
+    const result = await create({
+      name: name.value.trim(),
+      description: description.value.trim() || void 0,
+      visibility: visibility.value
+    });
+    emit("created", { id: result.doc_id });
+    emit("update:open", false);
+  } catch (e) {
+    error.value = e?.message ?? "Failed to create space";
+  } finally {
+    creating.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="flex flex-col gap-6 p-6">
+        <!-- Header -->
+        <div class="flex flex-col items-center text-center gap-3 pt-4">
+          <div class="w-14 h-14 rounded-2xl bg-(--ui-bg-elevated) flex items-center justify-center">
+            <UIcon
+              name="i-lucide-layers"
+              class="size-7 text-(--color-primary-500)"
+            />
+          </div>
+          <div>
+            <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+              New Space
+            </h2>
+            <p class="text-sm text-(--ui-text-muted) mt-1">
+              Create a new collaborative workspace.
+            </p>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <p class="text-sm font-medium mb-1">
+              Name
+            </p>
+            <UInput
+              v-model="name"
+              placeholder="My Workspace"
+              size="lg"
+              autofocus
+              @keydown.enter="handleCreate"
+            />
+          </div>
+
+          <div>
+            <p class="text-sm font-medium mb-1">
+              Description
+            </p>
+            <UTextarea
+              v-model="description"
+              placeholder="Optional description"
+              :rows="2"
+            />
+          </div>
+
+          <!-- Visibility -->
+          <div>
+            <p class="text-sm font-medium mb-2">
+              Visibility
+            </p>
+            <div class="space-y-2">
+              <label
+                class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
+                :class="visibility === 'public' ? 'border-(--ui-color-primary-400) bg-[color-mix(in_srgb,var(--ui-color-primary-500)_8%,transparent)]' : 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+              >
+                <input
+                  v-model="visibility"
+                  type="radio"
+                  value="public"
+                  class="mt-0.5"
+                >
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <UIcon
+                      name="i-lucide-globe"
+                      class="size-3.5 shrink-0 text-(--ui-text-muted)"
+                    />
+                    <span class="text-sm font-medium">Public</span>
+                  </div>
+                  <p class="text-xs text-(--ui-text-muted) mt-0.5">
+                    Anyone on the server can access this space.
+                  </p>
+                </div>
+              </label>
+              <label
+                class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
+                :class="visibility === 'private' ? 'border-(--ui-color-primary-400) bg-[color-mix(in_srgb,var(--ui-color-primary-500)_8%,transparent)]' : 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+              >
+                <input
+                  v-model="visibility"
+                  type="radio"
+                  value="private"
+                  class="mt-0.5"
+                >
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <UIcon
+                      name="i-lucide-lock"
+                      class="size-3.5 shrink-0 text-(--ui-text-muted)"
+                    />
+                    <span class="text-sm font-medium">Private</span>
+                  </div>
+                  <p class="text-xs text-(--ui-text-muted) mt-0.5">
+                    Only invited members can access.
+                  </p>
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <UAlert
+          v-if="error"
+          color="error"
+          variant="soft"
+          icon="i-lucide-triangle-alert"
+          :description="error"
+        />
+
+        <UButton
+          label="Create Space"
+          icon="i-lucide-layers"
+          size="lg"
+          block
+          :disabled="!name.trim()"
+          :loading="creating"
+          @click="handleCreate"
+        />
+
+        <UButton
+          label="Cancel"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          block
+          @click="emit('update:open', false)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (args_0: {
+        id: string;
+    }) => any;
+    "update:open": (v: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCreated?: ((args_0: {
+        id: string;
+    }) => any) | undefined;
+    "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/AVoiceBar.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from "vue";
+import { useAppConfig, useVoice, useAbraLocale, defineShortcuts } from "#imports";
 import { avatarBorderStyle } from "../utils/avatarStyle";
 const props = defineProps({
   docId: { type: String, required: true },
@@ -71,11 +73,11 @@ const micIcon = computed(() => {
   return isMuted.value ? "i-lucide-mic-off" : "i-lucide-mic";
 });
 defineShortcuts({
-  "alt_m": {
+  alt_m: {
     handler: toggleMute,
     whenever: [isActive]
   },
-  "alt_v": {
+  alt_v: {
     handler: toggleVideo,
     whenever: [isActive]
   }
@@ -83,7 +85,10 @@ defineShortcuts({
 </script>
 
 <template>
-  <div v-bind="$attrs" class="w-full">
+  <div
+    v-bind="$attrs"
+    class="w-full"
+  >
     <ClientOnly>
       <UPopover
         v-model:open="popoverOpen"
@@ -147,7 +152,10 @@ defineShortcuts({
             </UAvatarGroup>
 
             <template v-if="isConnected">
-              <UTooltip :text="isMuted ? locale.unmute : locale.mute" :kbds="['Alt', 'M']">
+              <UTooltip
+                :text="isMuted ? locale.unmute : locale.mute"
+                :kbds="['Alt', 'M']"
+              >
                 <UButton
                   :icon="isMuted ? 'i-lucide-mic-off' : 'i-lucide-mic'"
                   size="xs"
@@ -157,7 +165,10 @@ defineShortcuts({
                   @click.stop="toggleMute"
                 />
               </UTooltip>
-              <UTooltip text="Toggle video" :kbds="['Alt', 'V']">
+              <UTooltip
+                text="Toggle video"
+                :kbds="['Alt', 'V']"
+              >
                 <UButton
                   :icon="isVideoEnabled ? 'i-lucide-video' : 'i-lucide-video-off'"
                   size="xs"
@@ -167,7 +178,10 @@ defineShortcuts({
                   @click.stop="toggleVideo"
                 />
               </UTooltip>
-              <UTooltip v-if="canScreenShare" text="Screen share">
+              <UTooltip
+                v-if="canScreenShare"
+                text="Screen share"
+              >
                 <UButton
                   :icon="isScreenEnabled ? 'i-lucide-monitor-up' : 'i-lucide-monitor'"
                   size="xs"
@@ -216,7 +230,10 @@ defineShortcuts({
             <!-- Connecting -->
             <template v-else-if="isConnecting">
               <div class="flex items-center gap-2 py-0.5">
-                <UIcon name="i-lucide-loader-circle" class="size-4 text-warning animate-spin shrink-0" />
+                <UIcon
+                  name="i-lucide-loader-circle"
+                  class="size-4 text-warning animate-spin shrink-0"
+                />
                 <span class="text-sm text-muted">{{ locale.connecting }}</span>
               </div>
               <UButton
@@ -292,7 +309,7 @@ defineShortcuts({
                   :step="0.01"
                   size="xs"
                   class="flex-1"
-                  @update:model-value="setMasterVolume"
+                  @update:model-value="(v) => setMasterVolume(v)"
                 />
               </div>
 
@@ -315,9 +332,21 @@ defineShortcuts({
                         :style="peer.color ? avatarBorderStyle(peer.color, neutral) : ''"
                       />
                       <span class="text-xs truncate flex-1">{{ peer.displayName || peer.userId.slice(0, 6) }}</span>
-                      <UIcon v-if="peer.remoteVideo" name="i-lucide-video" class="size-3 text-primary shrink-0" />
-                      <UIcon v-if="peer.remoteScreen" name="i-lucide-monitor-up" class="size-3 text-primary shrink-0" />
-                      <UIcon v-if="peer.remoteMuted" name="i-lucide-mic-off" class="size-3 text-error shrink-0" />
+                      <UIcon
+                        v-if="peer.remoteVideo"
+                        name="i-lucide-video"
+                        class="size-3 text-primary shrink-0"
+                      />
+                      <UIcon
+                        v-if="peer.remoteScreen"
+                        name="i-lucide-monitor-up"
+                        class="size-3 text-primary shrink-0"
+                      />
+                      <UIcon
+                        v-if="peer.remoteMuted"
+                        name="i-lucide-mic-off"
+                        class="size-3 text-error shrink-0"
+                      />
                     </div>
                     <!-- Audio level bar -->
                     <div class="flex items-center gap-2 pl-7">
@@ -348,14 +377,23 @@ defineShortcuts({
                   </div>
                 </div>
               </template>
-              <p v-else class="text-xs text-muted text-center py-0.5">
+              <p
+                v-else
+                class="text-xs text-muted text-center py-0.5"
+              >
                 {{ locale.alone }}
               </p>
             </template>
 
             <!-- Error -->
-            <div v-if="voiceError" class="flex items-start gap-1.5 text-error">
-              <UIcon name="i-lucide-alert-circle" class="size-3.5 shrink-0 mt-0.5" />
+            <div
+              v-if="voiceError"
+              class="flex items-start gap-1.5 text-error"
+            >
+              <UIcon
+                name="i-lucide-alert-circle"
+                class="size-3.5 shrink-0 mt-0.5"
+              />
               <p class="text-xs leading-tight">
                 {{ voiceError.message }}
               </p>
@@ -370,8 +408,14 @@ defineShortcuts({
           class="flex items-center gap-1.5 w-full px-2 opacity-30 pointer-events-none"
           :class="props.collapsed ? 'justify-center h-8' : 'min-h-8 py-1'"
         >
-          <UIcon name="i-lucide-mic-off" class="size-4 text-dimmed" />
-          <span v-if="!props.collapsed" class="text-xs text-dimmed">{{ locale.voice }}</span>
+          <UIcon
+            name="i-lucide-mic-off"
+            class="size-4 text-dimmed"
+          />
+          <span
+            v-if="!props.collapsed"
+            class="text-xs text-dimmed"
+          >{{ locale.voice }}</span>
         </div>
       </template>
     </ClientOnly>

package/dist/runtime/components/AVoiceTile.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, watch, onMounted, computed } from "vue";
 const props = defineProps({
   stream: { type: null, required: true },
   name: { type: String, required: true },
@@ -41,7 +42,10 @@ const kindIcon = computed(() => props.kind === "screen" ? "i-lucide-monitor-up"
       :style="props.mirrored ? 'transform: scaleX(-1)' : ''"
     />
     <div class="absolute bottom-2 left-2 flex items-center gap-1.5 bg-black/60 backdrop-blur-sm rounded px-2 py-1">
-      <UIcon :name="kindIcon" class="size-3 text-white/70 shrink-0" />
+      <UIcon
+        :name="kindIcon"
+        class="size-3 text-white/70 shrink-0"
+      />
       <span class="text-xs text-white font-medium truncate max-w-32">{{ name }}</span>
     </div>
   </div>

package/dist/runtime/components/AWindowLayer.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useWindowManager } from "../composables/useWindowManager";
 const { windows } = useWindowManager();
 const windowIds = computed(() => [...windows.keys()]);
 </script>

package/dist/runtime/components/aware/AArea.d.vue.ts

@@ -29,8 +29,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    max: number;
     tag: string;
+    max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/aware/AArea.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useAAField } from "../../composables/useAAField";
 const props = defineProps({
   fieldKey: { type: String, required: true },
   tag: { type: String, required: false, default: "div" },
@@ -8,7 +9,7 @@ const props = defineProps({
 const { hoverers, hoverHandlers } = useAAField(props.fieldKey);
 const hoverRingStyle = computed(() => {
   if (!hoverers.value.length) return {};
-  const color = hoverers.value[0].user?.color;
+  const color = hoverers.value[0]?.user?.color;
   if (!color) return {};
   return { boxShadow: `0 0 0 1px ${color}`, borderRadius: "0.375rem" };
 });
@@ -18,8 +19,8 @@ const hoverRingStyle = computed(() => {
   <component
     :is="tag"
     class="relative"
-    v-on="hoverHandlers"
     :style="hoverRingStyle"
+    v-on="hoverHandlers"
   >
     <slot />
     <Transition name="aa-peer">

package/dist/runtime/components/aware/AArea.vue.d.ts

@@ -29,8 +29,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    max: number;
     tag: string;
+    max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/aware/AAvatar.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from "vue";
+import { useAppConfig } from "#imports";
 import { avatarBorderStyle } from "../../utils/avatarStyle";
 const props = defineProps({
   user: { type: Object, required: true },
@@ -35,22 +37,59 @@ const popoverOpen = ref(false);
 
 <template>
   <!-- Popover variant (click to open details) -->
-  <UPopover v-if="showPopover" v-model:open="popoverOpen">
-    <UTooltip v-if="showTooltip" :text="tooltipText" :delay-duration="600">
-      <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
-        <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+  <UPopover
+    v-if="showPopover"
+    v-model:open="popoverOpen"
+  >
+    <UTooltip
+      v-if="showTooltip"
+      :text="tooltipText"
+      :delay-duration="600"
+    >
+      <UChip
+        v-if="showStatus && chipColor !== void 0"
+        :color="chipColor"
+        position="top-right"
+        size="sm"
+      >
+        <UAvatar
+          :alt="name"
+          :size="size"
+          :style="avatarStyle"
+        />
       </UChip>
-      <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+      <UAvatar
+        v-else
+        :alt="name"
+        :size="size"
+        :style="avatarStyle"
+      />
     </UTooltip>
-    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+    <UAvatar
+      v-else
+      :alt="name"
+      :size="size"
+      :style="avatarStyle"
+    />
 
     <template #content>
       <div class="p-3 w-52 flex flex-col gap-3">
         <div class="flex items-center gap-3">
-          <UAvatar :alt="name" size="md" :style="avatarStyle" />
+          <UAvatar
+            :alt="name"
+            size="md"
+            :style="avatarStyle"
+          />
           <div class="flex-1 min-w-0">
-            <p class="text-sm font-semibold text-default truncate">{{ name }}</p>
-            <p v-if="docContext" class="text-xs text-muted truncate">{{ docContext }}</p>
+            <p class="text-sm font-semibold text-default truncate">
+              {{ name }}
+            </p>
+            <p
+              v-if="docContext"
+              class="text-xs text-muted truncate"
+            >
+              {{ docContext }}
+            </p>
           </div>
         </div>
         <USeparator />
@@ -69,18 +108,50 @@ const popoverOpen = ref(false);
   </UPopover>
 
   <!-- Tooltip-only variant -->
-  <UTooltip v-else-if="showTooltip" :text="tooltipText" :delay-duration="600">
-    <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
-      <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+  <UTooltip
+    v-else-if="showTooltip"
+    :text="tooltipText"
+    :delay-duration="600"
+  >
+    <UChip
+      v-if="showStatus && chipColor !== void 0"
+      :color="chipColor"
+      position="top-right"
+      size="sm"
+    >
+      <UAvatar
+        :alt="name"
+        :size="size"
+        :style="avatarStyle"
+      />
     </UChip>
-    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+    <UAvatar
+      v-else
+      :alt="name"
+      :size="size"
+      :style="avatarStyle"
+    />
   </UTooltip>
 
   <!-- Bare variant -->
   <template v-else>
-    <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
-      <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+    <UChip
+      v-if="showStatus && chipColor !== void 0"
+      :color="chipColor"
+      position="top-right"
+      size="sm"
+    >
+      <UAvatar
+        :alt="name"
+        :size="size"
+        :style="avatarStyle"
+      />
     </UChip>
-    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+    <UAvatar
+      v-else
+      :alt="name"
+      :size="size"
+      :style="avatarStyle"
+    />
   </template>
 </template>

package/dist/runtime/components/aware/AButton.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useAAField } from "../../composables/useAAField";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fieldKey: { type: String, required: true }
@@ -7,14 +8,18 @@ const props = defineProps({
 const { hoverers, pressers, handlers } = useAAField(props.fieldKey);
 const pressRingStyle = computed(() => {
   if (!pressers.value.length) return {};
-  const color = pressers.value[0].user?.color;
+  const color = pressers.value[0]?.user?.color;
   if (!color) return {};
   return { outline: `2px solid ${color}`, outlineOffset: "2px", borderRadius: "0.375rem" };
 });
 </script>
 
 <template>
-  <span class="relative inline-flex" v-on="handlers" :style="pressRingStyle">
+  <span
+    class="relative inline-flex"
+    :style="pressRingStyle"
+    v-on="handlers"
+  >
     <UButton v-bind="$attrs" />
     <Transition name="aa-peer">
       <span

package/dist/runtime/components/aware/ACursorLabel.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   user: { type: Object, required: true },
   x: { type: Number, required: true },
@@ -26,7 +27,11 @@ const triangleStyle = computed(() => ({
 </script>
 
 <template>
-  <div v-show="visible" :style="labelStyle" class="flex flex-col items-center">
+  <div
+    v-show="visible"
+    :style="labelStyle"
+    class="flex flex-col items-center"
+  >
     <!-- Name pill -->
     <span
       class="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium text-white whitespace-nowrap shadow-sm"

package/dist/runtime/components/aware/ADocBadge.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from "vue";
+import { useAwarenessPeers, useAppConfig } from "#imports";
 import { avatarBorderStyle } from "../../utils/avatarStyle";
 const props = defineProps({
   docId: { type: String, required: true },
@@ -14,7 +16,10 @@ const visible = computed(() => peers.value.slice(0, props.max));
 </script>
 
 <template>
-  <div v-show="peers.length > 0" class="flex items-center -space-x-1">
+  <div
+    v-show="peers.length > 0"
+    class="flex items-center -space-x-1"
+  >
     <UAvatar
       v-for="peer in visible"
       :key="peer.clientId"

package/dist/runtime/components/aware/AFacepile.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from "vue";
+import { useAwarenessPeers, useAppConfig } from "#imports";
 import { avatarBorderStyle } from "../../utils/avatarStyle";
 const props = defineProps({
   docId: { type: String, required: false },
@@ -24,7 +26,10 @@ const overflowOpen = ref(false);
 </script>
 
 <template>
-  <div v-if="allPeers.length > 0" class="flex items-center">
+  <div
+    v-if="allPeers.length > 0"
+    class="flex items-center"
+  >
     <!-- Stacked avatars -->
     <div class="flex items-center -space-x-2">
       <UTooltip
@@ -44,7 +49,10 @@ const overflowOpen = ref(false);
     </div>
 
     <!-- Name labels (expanded mode) -->
-    <div v-if="showNames && visible.length > 0" class="ml-2 flex items-center gap-2">
+    <div
+      v-if="showNames && visible.length > 0"
+      class="ml-2 flex items-center gap-2"
+    >
       <span
         v-for="peer in visible"
         :key="peer.clientId"
@@ -54,7 +62,11 @@ const overflowOpen = ref(false);
     </div>
 
     <!-- Overflow badge + popover -->
-    <UPopover v-if="overflow > 0" v-model:open="overflowOpen" :content="{ side: 'bottom', align: 'start' }">
+    <UPopover
+      v-if="overflow > 0"
+      v-model:open="overflowOpen"
+      :content="{ side: 'bottom', align: 'start' }"
+    >
       <UBadge
         :label="`+${overflow}`"
         color="neutral"