@abraca/nuxt 1.8.2 → 2.0.0

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

@@ -1,38 +1,91 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, ref, useAttrs, watch } from "vue";
 import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { useAACaret } from "../../composables/useAACaret";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import APeerCaretLayer from "./APeerCaretLayer.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  fieldKey: { type: String, required: true }
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
 });
-const { hoverers, focusers, handlers } = useAAField(props.fieldKey);
-const focusRingStyle = computed(() => {
-  if (focusers.value.length) {
-    const color = focusers.value[0]?.user?.color;
-    if (color) return { boxShadow: `0 0 0 2px ${color}`, borderRadius: "0.375rem" };
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(
+  () => "modelValue" in attrs || "onUpdate:modelValue" in attrs
+);
+const hostRef = ref(null);
+const textareaEl = ref(null);
+function resolveTextarea() {
+  textareaEl.value = hostRef.value?.querySelector("textarea") ?? null;
+}
+onMounted(resolveTextarea);
+watch(() => props.fieldKey, resolveTextarea);
+const { carets } = useAACaret(() => props.fieldKey, textareaEl);
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
   }
-  if (hoverers.value.length) {
-    const color = hoverers.value[0]?.user?.color;
-    if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
   }
-  return {};
+  return out;
 });
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
 </script>
 
 <template>
   <div
-    class="relative w-full"
-    :style="focusRingStyle"
-    v-on="handlers"
+    ref="hostRef"
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
   >
-    <UTextarea v-bind="$attrs" />
+    <UTextarea
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UTextarea
+      v-else
+      v-bind="attrs"
+    />
+
+    <APeerCaretLayer
+      v-if="enablePeers"
+      :target="textareaEl"
+      :carets="carets"
+    />
+
     <Transition name="aa-peer">
       <span
-        v-if="focusers.length"
-        class="absolute -top-2.5 right-0 flex -space-x-1 pointer-events-none z-10"
+        v-if="overlayPeers.length"
+        class="aa-overlay"
       >
         <AAvatar
-          v-for="p in focusers.slice(0, 2)"
+          v-for="p in overlayPeers.slice(0, max)"
           :key="p.clientId"
           :user="p"
           size="2xs"
@@ -45,5 +98,5 @@ const focusRingStyle = computed(() => {
 </template>
 
 <style scoped>
-.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;gap:0;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
 </style>

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

@@ -1,7 +1,17 @@
 type __VLS_Props = {
-    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
     fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    peers?: boolean;
+    total?: boolean;
+    max?: number;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_20: string, __VLS_21: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    total: 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/components/aware/AToggleGroup.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UToggleGroup
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </UToggleGroup>
+    <UToggleGroup
+      v-else
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </UToggleGroup>
+
+    <Transition name="aa-peer">
+      <span v-if="overlayPeers.length" class="aa-overlay">
+        <AAvatar v-for="p in overlayPeers.slice(0, max)" :key="p.clientId" :user="p" size="2xs" :show-status="false" :show-tooltip="true" />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+</style>

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_20: string, __VLS_21: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    total: 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/components/aware/ATree.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    peers: boolean;
+    awareness: boolean;
+    live: boolean;
+    total: 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/components/aware/ATree.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import AHoverItem from "./AHoverItem.vue";
+function nodeId(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.value ?? item.id ?? item.label ?? "");
+}
+function nodeLabel(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.label ?? item.value ?? item.id ?? "");
+}
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const attrs = useAttrs();
+const liveExpanded = useAAUIState(() => `${props.fieldKey}:expanded`, { defaultValue: [] });
+const localExpanded = ref(enableLive.value ? liveExpanded.value ?? [] : []);
+watch(liveExpanded, (val) => {
+  if (enableLive.value && JSON.stringify(localExpanded.value) !== JSON.stringify(val)) localExpanded.value = val ?? [];
+});
+watch(localExpanded, (val) => {
+  if (enableLive.value && JSON.stringify(liveExpanded.value) !== JSON.stringify(val)) liveExpanded.value = val;
+});
+const { peers: hoveredPeers, setLocal: setHovered } = useAAEphemeral(() => `${props.fieldKey}:hovered`);
+function onMouseover(e) {
+  if (!enablePeers.value) return;
+  const node = e.target?.closest("[data-tree-node-id]");
+  const id = node?.getAttribute("data-tree-node-id");
+  if (id) setHovered(id);
+}
+function onMouseleave() {
+  if (!enablePeers.value) return;
+  setHovered(null);
+}
+</script>
+
+<template>
+  <div
+    class="aa-tree-host aa-host"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+    @mouseover="onMouseover"
+    @mouseleave="onMouseleave"
+  >
+    <UTree
+      v-if="enableLive"
+      v-model:expanded="localExpanded"
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #item-label="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${nodeId(item)}`" variant="block" :show-flag="false">
+          {{ nodeLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UTree>
+    <UTree
+      v-else
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #item-label="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${nodeId(item)}`" variant="block" :show-flag="false">
+          {{ nodeLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UTree>
+    <div v-if="enablePeers && hoveredPeers.length" class="aa-tree-peers">
+      <span
+        v-for="p in hoveredPeers"
+        :key="p.clientId"
+        class="aa-tree-peer-chip"
+        :style="{ borderColor: p.user?.color ?? 'var(--ui-border)' }"
+      >
+        <span class="aa-tree-peer-dot" :style="{ background: p.user?.color ?? 'var(--ui-text-muted)' }" />
+        {{ p.user?.name || "Anonymous" }} on {{ p.value }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aa-tree-host{position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--pressed{filter:brightness(.94)}.aa-tree-peers{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}.aa-tree-peer-chip{align-items:center;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text-highlighted);display:inline-flex;font-size:.6875rem;font-weight:500;gap:.35rem;padding:.15rem .55rem}.aa-tree-peer-dot{border-radius:999px;height:.5rem;width:.5rem}
+</style>

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    peers: boolean;
+    awareness: boolean;
+    live: boolean;
+    total: 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/components/chat/AChatPanel.d.vue.ts

@@ -45,32 +45,32 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     send: (content: string) => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
     typing: () => any;
     "doc-drop": (payload: {
         docId: string;
         label: string;
     }) => any;
-    "open-doc": (docId: string) => any;
-    "jump-to-quote": (docId: string, from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
     onSend?: ((content: string) => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
     onTyping?: (() => any) | undefined;
     "onDoc-drop"?: ((payload: {
         docId: string;
         label: string;
     }) => any) | undefined;
-    "onOpen-doc"?: ((docId: string) => any) | undefined;
-    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
 }>, {
     placeholder: string;
     autofocus: boolean;
-    canSend: boolean;
-    mentionUsers: ChatMentionUser[];
     currentUserId: string;
     emptyIcon: string;
     emptyText: string;
     emptySubtext: string;
+    canSend: boolean;
+    mentionUsers: ChatMentionUser[];
     typingUsers: TypingUser[];
     activeAgents: ActiveAgent[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -45,32 +45,32 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     send: (content: string) => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
     typing: () => any;
     "doc-drop": (payload: {
         docId: string;
         label: string;
     }) => any;
-    "open-doc": (docId: string) => any;
-    "jump-to-quote": (docId: string, from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
     onSend?: ((content: string) => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
     onTyping?: (() => any) | undefined;
     "onDoc-drop"?: ((payload: {
         docId: string;
         label: string;
     }) => any) | undefined;
-    "onOpen-doc"?: ((docId: string) => any) | undefined;
-    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
 }>, {
     placeholder: string;
     autofocus: boolean;
-    canSend: boolean;
-    mentionUsers: ChatMentionUser[];
     currentUserId: string;
     emptyIcon: string;
     emptyText: string;
     emptySubtext: string;
+    canSend: boolean;
+    mentionUsers: ChatMentionUser[];
     typingUsers: TypingUser[];
     activeAgents: ActiveAgent[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,42 @@
+type __VLS_Props = {
+    /** The doc ID whose chat channel we wire up. */
+    docId: string;
+    /** Override the default label (which uses the channel's own label). */
+    label?: string;
+    /** Custom placeholder for the input. */
+    placeholder?: string;
+    /** Auto-focus the input when mounted. */
+    autofocus?: boolean;
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare var __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_15) => any;
+} & {
+    trailing?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    placeholder: string;
+    autofocus: boolean;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+}, {}, {}, {}, 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/components/chat/ANodeChatPanel.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+import { useChatChannel } from "../../composables/useChat";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import AChatPanel from "./AChatPanel.vue";
+const props = defineProps({
+  docId: { type: String, required: true },
+  label: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "Type a message\u2026" },
+  autofocus: { type: Boolean, required: false, default: false },
+  emptyIcon: { type: String, required: false, default: "i-lucide-message-circle" },
+  emptyText: { type: String, required: false, default: "No messages yet" },
+  emptySubtext: { type: String, required: false, default: "Be the first to send a message" }
+});
+const emit = defineEmits(["open-doc", "jump-to-quote", "close"]);
+const { publicKeyB64 } = useAbracadabra();
+const { messages, channel, typingUsers, send, typing } = useChatChannel(props.docId);
+const resolvedLabel = computed(() => props.label ?? channel.value?.label ?? "Chat");
+const typingUsersAdapted = computed(
+  () => (typingUsers.value || []).map((id) => ({
+    userId: String(id),
+    userName: String(id),
+    color: "#888"
+  }))
+);
+</script>
+
+<template>
+  <AChatPanel
+    :label="resolvedLabel"
+    :messages="messages"
+    :current-user-id="publicKeyB64 ?? ''"
+    :typing-users="typingUsersAdapted"
+    :placeholder="placeholder"
+    :autofocus="autofocus"
+    :empty-icon="emptyIcon"
+    :empty-text="emptyText"
+    :empty-subtext="emptySubtext"
+    can-send
+    @send="(content) => send(content)"
+    @typing="typing"
+    @open-doc="(id) => emit('open-doc', id)"
+    @jump-to-quote="(id, from, to) => emit('jump-to-quote', id, from, to)"
+    @close="emit('close')"
+  >
+    <template #leading>
+      <slot name="leading" />
+    </template>
+    <template #trailing>
+      <slot name="trailing" />
+    </template>
+  </AChatPanel>
+</template>

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

@@ -0,0 +1,42 @@
+type __VLS_Props = {
+    /** The doc ID whose chat channel we wire up. */
+    docId: string;
+    /** Override the default label (which uses the channel's own label). */
+    label?: string;
+    /** Custom placeholder for the input. */
+    placeholder?: string;
+    /** Auto-focus the input when mounted. */
+    autofocus?: boolean;
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare var __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_15) => any;
+} & {
+    trailing?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    placeholder: string;
+    autofocus: boolean;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+}, {}, {}, {}, 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;
+    };
+};