@abraca/nuxt 0.3.0 → 1.6.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 },
@@ -307,7 +309,7 @@ defineShortcuts({
                   :step="0.01"
                   size="xs"
                   class="flex-1"
-                  @update:model-value="setMasterVolume"
+                  @update:model-value="(v) => setMasterVolume(v)"
                 />
               </div>
 

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 },

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" };
 });

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 },

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,7 +8,7 @@ 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" };
 });

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 },

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 },

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 },

package/dist/runtime/components/aware/AInput.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,11 +8,11 @@ const props = defineProps({
 const { hoverers, focusers, handlers } = useAAField(props.fieldKey);
 const focusRingStyle = computed(() => {
   if (focusers.value.length) {
-    const color = focusers.value[0].user?.color;
+    const color = focusers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 2px ${color}`, borderRadius: "0.375rem" };
   }
   if (hoverers.value.length) {
-    const color = hoverers.value[0].user?.color;
+    const color = hoverers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
   }
   return {};

package/dist/runtime/components/aware/ASelect.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,11 +8,11 @@ const props = defineProps({
 const { hoverers, focusers, onMouseenter, onMouseleave, onFocus, onBlur } = useAAField(props.fieldKey);
 const focusRingStyle = computed(() => {
   if (focusers.value.length) {
-    const color = focusers.value[0].user?.color;
+    const color = focusers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 2px ${color}`, borderRadius: "0.375rem" };
   }
   if (hoverers.value.length) {
-    const color = hoverers.value[0].user?.color;
+    const color = hoverers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
   }
   return {};

package/dist/runtime/components/aware/ATextarea.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,11 +8,11 @@ const props = defineProps({
 const { hoverers, focusers, handlers } = useAAField(props.fieldKey);
 const focusRingStyle = computed(() => {
   if (focusers.value.length) {
-    const color = focusers.value[0].user?.color;
+    const color = focusers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 2px ${color}`, borderRadius: "0.375rem" };
   }
   if (hoverers.value.length) {
-    const color = hoverers.value[0].user?.color;
+    const color = hoverers.value[0]?.user?.color;
     if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
   }
   return {};

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

@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from "vue";
+import { useAwarenessPeers } from "../../composables/useAwarenessPeers";
 const props = defineProps({
   docId: { type: String, required: false },
   showSelf: { type: Boolean, required: false, default: false },

package/dist/runtime/components/chat/AChatAgentStatus.d.vue.ts

@@ -0,0 +1,15 @@
+export interface AgentToolCall {
+    name: string;
+    target?: string;
+}
+export interface ActiveAgent {
+    name: string;
+    status?: 'thinking' | string | null;
+    activeToolCall?: AgentToolCall | null;
+}
+type __VLS_Props = {
+    agents: ActiveAgent[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatAgentStatus.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  agents: { type: Array, required: true }
+});
+const toolIcons = {
+  read_document: "i-lucide-file-text",
+  write_document: "i-lucide-pencil",
+  create_document: "i-lucide-plus",
+  find_document: "i-lucide-search",
+  list_documents: "i-lucide-list",
+  get_document_tree: "i-lucide-git-branch",
+  delete_document: "i-lucide-trash",
+  move_document: "i-lucide-move",
+  upload_file: "i-lucide-upload",
+  send_chat_message: "i-lucide-message-circle",
+  reply: "i-lucide-reply",
+  bash: "i-lucide-terminal",
+  read_file: "i-lucide-file-text",
+  edit_file: "i-lucide-pencil-line",
+  write_file: "i-lucide-file-plus",
+  grep: "i-lucide-text-search",
+  glob: "i-lucide-folder-search",
+  subagent: "i-lucide-bot",
+  web_fetch: "i-lucide-globe",
+  web_search: "i-lucide-search"
+};
+const toolLabels = {
+  read_document: "Reading document",
+  write_document: "Writing document",
+  create_document: "Creating document",
+  find_document: "Finding document",
+  list_documents: "Listing documents",
+  get_document_tree: "Reading document tree",
+  delete_document: "Deleting document",
+  move_document: "Moving document",
+  upload_file: "Uploading file",
+  send_chat_message: "Sending message",
+  reply: "Writing reply",
+  bash: "Running command",
+  read_file: "Reading file",
+  edit_file: "Editing file",
+  write_file: "Writing file",
+  grep: "Searching content",
+  glob: "Finding files",
+  subagent: "Running sub-agent",
+  web_fetch: "Fetching webpage",
+  web_search: "Searching web"
+};
+function toolCallLabel(name) {
+  return toolLabels[name] || name.replace(/_/g, " ");
+}
+function toolCallIcon(name) {
+  return toolIcons[name] || "i-lucide-wrench";
+}
+const showMultipleNames = computed(() => props.agents.length > 1);
+</script>
+
+<template>
+  <template
+    v-for="agent in agents"
+    :key="agent.name"
+  >
+    <div
+      v-if="agent.status === 'thinking'"
+      class="mt-3 ms-8.5"
+    >
+      <div class="flex items-center gap-2 text-sm text-(--ui-text-muted)">
+        <UIcon
+          name="i-lucide-brain"
+          class="size-4 animate-pulse"
+        />
+        <span>{{ showMultipleNames ? `${agent.name} is thinking...` : "Thinking..." }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="agent.activeToolCall"
+      class="mt-2 ms-8.5"
+    >
+      <div class="flex items-center gap-2 text-xs text-(--ui-text-muted) bg-(--ui-bg-elevated) rounded-lg px-3 py-2">
+        <UIcon
+          :name="toolCallIcon(agent.activeToolCall.name)"
+          class="size-3.5 shrink-0 animate-pulse"
+        />
+        <span class="truncate">
+          {{ showMultipleNames ? `${agent.name}: ` : "" }}{{ toolCallLabel(agent.activeToolCall.name) }}
+          <template v-if="agent.activeToolCall.target">
+            <span class="text-(--ui-text-dimmed)">({{ agent.activeToolCall.target.slice(0, 30) }}{{ agent.activeToolCall.target.length > 30 ? "..." : "" }})</span>
+          </template>
+        </span>
+      </div>
+    </div>
+  </template>
+</template>

package/dist/runtime/components/chat/AChatAgentStatus.vue.d.ts

@@ -0,0 +1,15 @@
+export interface AgentToolCall {
+    name: string;
+    target?: string;
+}
+export interface ActiveAgent {
+    name: string;
+    status?: 'thinking' | string | null;
+    activeToolCall?: AgentToolCall | null;
+}
+type __VLS_Props = {
+    agents: ActiveAgent[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatDocLink.d.vue.ts

@@ -0,0 +1,18 @@
+/**
+ * Document reference link card in chat messages.
+ *
+ * Ported from cou-sh/app/components/chat/ChatDocLink.vue.
+ */
+type __VLS_Props = {
+    docId: string;
+    label: string;
+    icon?: string;
+    isSelf?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (docId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((docId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatDocLink.vue

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  docId: { type: String, required: true },
+  label: { type: String, required: true },
+  icon: { type: String, required: false },
+  isSelf: { type: Boolean, required: false }
+});
+const emit = defineEmits(["open"]);
+</script>
+
+<template>
+  <div class="rounded-lg overflow-hidden border-l-2 border-(--ui-color-primary-500) bg-(--ui-bg-muted) text-sm">
+    <div class="px-3 py-2 flex items-center gap-2">
+      <UIcon
+        :name="icon ?? 'i-lucide-file-text'"
+        class="size-4 shrink-0 text-(--ui-text-muted)"
+      />
+      <span class="flex-1 truncate text-(--ui-text-highlighted) font-medium text-xs">{{ label }}</span>
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-up-right"
+        label="Open"
+        @click="emit('open', docId)"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/chat/AChatDocLink.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Document reference link card in chat messages.
+ *
+ * Ported from cou-sh/app/components/chat/ChatDocLink.vue.
+ */
+type __VLS_Props = {
+    docId: string;
+    label: string;
+    icon?: string;
+    isSelf?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (docId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((docId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatDocQuote.d.vue.ts

@@ -0,0 +1,26 @@
+/**
+ * Quoted document text in chat messages.
+ *
+ * Ported from cou-sh/app/components/chat/ChatDocQuote.vue —
+ * jump/hover actions emitted for app to handle.
+ */
+type __VLS_Props = {
+    text: string;
+    docId: string;
+    from: number;
+    to: number;
+    label: string;
+    section?: string;
+    isSelf?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    jump: (docId: string, from: number, to: number) => any;
+    "hover-start": (docId: string, from: number, to: number) => any;
+    "hover-end": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onJump?: ((docId: string, from: number, to: number) => any) | undefined;
+    "onHover-start"?: ((docId: string, from: number, to: number) => any) | undefined;
+    "onHover-end"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatDocQuote.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  text: { type: String, required: true },
+  docId: { type: String, required: true },
+  from: { type: Number, required: true },
+  to: { type: Number, required: true },
+  label: { type: String, required: true },
+  section: { type: String, required: false },
+  isSelf: { type: Boolean, required: false }
+});
+const emit = defineEmits(["jump", "hover-start", "hover-end"]);
+</script>
+
+<template>
+  <div
+    class="rounded-lg overflow-hidden border-l-2 border-(--ui-color-primary-500) bg-(--ui-bg-muted) text-sm"
+    @mouseenter="emit('hover-start', docId, from, to)"
+    @mouseleave="emit('hover-end')"
+  >
+    <div class="px-3 pt-2 pb-1">
+      <div class="flex items-center gap-1.5 mb-1.5 text-xs text-(--ui-text-muted) font-medium">
+        <UIcon
+          name="i-lucide-file-text"
+          class="size-3 shrink-0"
+        />
+        <span class="truncate text-(--ui-text-highlighted)">{{ label }}</span>
+        <template v-if="section">
+          <span>·</span>
+          <span class="truncate text-(--ui-text-muted)">{{ section }}</span>
+        </template>
+      </div>
+      <p class="text-(--ui-text) italic line-clamp-4 whitespace-pre-wrap break-words">
+        "{{ text }}"
+      </p>
+    </div>
+    <div class="px-2 pb-1.5 flex justify-end">
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-up-right"
+        label="Jump to passage"
+        @click="emit('jump', docId, from, to)"
+      />
+    </div>
+  </div>
+</template>