@abraca/nuxt 1.8.0 → 1.9.1

package/README.md

@@ -216,7 +216,7 @@ pnpm install
 # Generate type stubs
 pnpm dev:prepare
 
-# Develop with the playground
+# Develop with the playground (one route per module feature)
 pnpm dev
 
 # Build
@@ -225,11 +225,36 @@ pnpm prepack
 # Lint
 pnpm lint
 
-# Test
+# Unit + integration tests (requires a running abracadabra-rs at $ABRACADABRA_URL for integration)
 pnpm test
 pnpm test:watch
+pnpm test:integration
+
+# Browser E2E (Playwright against a real spawned abracadabra-rs + abracadabra-aperio)
+pnpm test:e2e          # headless
+pnpm test:e2e:headed   # headed debug
+pnpm test:e2e:ui       # Playwright UI mode
+```
+
+### E2E setup
+
+`pnpm test:e2e` drives Chromium against a freshly-spawned `abracadabra-rs`
+(release binary) and `abracadabra-aperio` (Nuxt dev) — no mocks. The sibling
+repos must be checked out next to this one:
+
+```
+Abracadabra/
+├── abracadabra-nuxt/        (this repo)
+├── abracadabra-rs/          # build: cargo build --release -p abracadabra-server
+└── abracadabra-aperio/      # consumer app under test
 ```
 
+The test harness listens on port **3300** for aperio. Keep that free. Set
+`E2E_VERBOSE=1` to stream rs + aperio logs alongside test output — useful
+when a test is surprising you.
+
+The `playground/` directory is a focused, multi-page sandbox — one route per module feature — used to develop and visually verify the module in isolation. For a full reference application that exercises the entire module surface (auth, spaces, chat, file transfer, settings, etc.), see [`abracadabra-aperio`](../abracadabra-aperio), the open-source dashboard built on top of `@abraca/nuxt`.
+
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@abraca/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-version-href]: https://npmjs.com/package/@abraca/nuxt

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.8.0",
+  "version": "1.9.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module';
 import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addImports, addComponentsDir, addServerHandler, addRouteMiddleware, addServerPlugin, addServerImportsDir } from '@nuxt/kit';
 import { defu } from 'defu';
 export { buildSlugMap, isUUID, slugify } from '../dist/runtime/utils/slugify.js';
@@ -118,6 +119,9 @@ const module$1 = defineNuxtModule({
         "prosemirror-dropcursor",
         "prosemirror-commands",
         "prosemirror-tables",
+        // y-prosemirror is transitive via @tiptap/extension-collaboration — dedupe
+        // is still valuable (prevents two copies if the app happens to install it
+        // directly), and Vite dedupe silently skips entries it can't resolve.
         "y-prosemirror",
         "yjs",
         "y-protocols",
@@ -162,7 +166,8 @@ const module$1 = defineNuxtModule({
     }
     nuxt.options.vite.optimizeDeps = defu(nuxt.options.vite.optimizeDeps, { include: [] });
     const includeList = nuxt.options.vite.optimizeDeps.include ?? [];
-    const prosemirrorDeps = [
+    const prebundleDeps = [
+      // ProseMirror core (re-exported by @tiptap/pm)
       "prosemirror-view",
       "prosemirror-state",
       "prosemirror-model",
@@ -175,17 +180,44 @@ const module$1 = defineNuxtModule({
       "prosemirror-inputrules",
       "prosemirror-history",
       "prosemirror-schema-list",
-      "y-prosemirror",
+      // TipTap core + Vue binding (shared globals plugin)
+      "@tiptap/core",
+      "@tiptap/vue-3",
+      "@tiptap/starter-kit",
+      // TipTap extensions used by core.plugin.ts
       "@tiptap/extension-table",
       "@tiptap/extension-table-row",
       "@tiptap/extension-table-header",
       "@tiptap/extension-table-cell",
       "@tiptap/extension-collaboration",
       "@tiptap/extension-collaboration-caret",
+      "@tiptap/extension-task-list",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-character-count",
+      "@tiptap/extension-text-align",
+      "@tiptap/extension-highlight",
+      "@tiptap/extension-color",
+      "@tiptap/extension-text-style",
+      "@tiptap/extension-superscript",
+      "@tiptap/extension-subscript",
+      "@tiptap/extension-code-block-lowlight",
+      "lowlight",
+      // Yjs + provider deps (shared globals + client plugin)
+      "yjs",
+      "@abraca/dabra",
+      "@noble/ed25519",
+      "@noble/hashes/sha512",
+      // Composable + util deps
+      "@vueuse/core",
       "nanoevents"
     ];
+    try {
+      createRequire(`${nuxt.options.rootDir}/`).resolve("jszip");
+      prebundleDeps.push("jszip");
+    } catch {
+    }
     nuxt.options.vite.optimizeDeps.include = [
-      .../* @__PURE__ */ new Set([...includeList, ...prosemirrorDeps])
+      .../* @__PURE__ */ new Set([...includeList, ...prebundleDeps])
     ];
     if (options.features?.editor !== false) {
       nuxt.options.css.push(resolver.resolve("./runtime/assets/editor.css"));
@@ -273,6 +305,11 @@ const module$1 = defineNuxtModule({
       prefix: options.prefix ?? "",
       pathPrefix: false
     });
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components/docs"),
+      prefix: options.prefix ?? "",
+      pathPrefix: false
+    });
     if (options.features?.chat) {
       addComponentsDir({
         path: resolver.resolve("./runtime/components/chat"),
@@ -282,7 +319,8 @@ const module$1 = defineNuxtModule({
     }
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
-      prefix: options.prefix ?? ""
+      prefix: options.prefix ?? "",
+      ignore: ["**/docs/**"]
     });
     if (options.server?.render !== false) {
       addServerHandler({

package/dist/runtime/components/docs/ADocsNavigation.d.vue.ts

@@ -0,0 +1,155 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    variant: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    navigation: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    unmountOnHide: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    variant: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    navigation: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    unmountOnHide: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    disabled: boolean;
+    level: number;
+    as: any;
+    collapsible: boolean;
+    highlight: boolean;
+    defaultOpen: boolean;
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/dist/runtime/components/docs/ADocsNavigation.vue

@@ -0,0 +1,154 @@
+<script>
+import theme from "../../theme/content/content-navigation";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useRoute, useAppConfig } from "#imports";
+import { useComponentUI } from "@nuxt/ui/composables/useComponentUI";
+import { pickLinkProps } from "@nuxt/ui/utils/link";
+import { tv } from "@nuxt/ui/utils/tv";
+import { mapContentNavigationItem } from "../../utils/content";
+import ADocsNavigation from "./ADocsNavigation.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  defaultOpen: { type: Boolean, required: false, default: void 0 },
+  trailingIcon: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  highlight: { type: Boolean, required: false, default: false },
+  highlightColor: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 0 },
+  navigation: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  disabled: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "multiple" },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
+const route = useRoute();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("contentNavigation", props);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNavigation || {} })({
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}));
+const disabled = computed(() => props.disabled || props.type === "multiple" && props.collapsible === false);
+function isRouteInTree(link, routePath) {
+  if (link.children?.length) {
+    return link.children.some((child) => isRouteInTree(child, routePath));
+  }
+  return routePath === link.path;
+}
+const defaultValue = computed(() => {
+  if (props.defaultOpen === false) {
+    return void 0;
+  }
+  if (props.defaultOpen === void 0) {
+    return props.type === "single" ? "0" : props.navigation?.map((link, index) => link.defaultOpen !== false && String(index)).filter(Boolean);
+  }
+  const indices = props.navigation?.reduce((acc, link, index) => {
+    if (isRouteInTree(link, route.path)) {
+      acc.push(String(index));
+    }
+    return acc;
+  }, []) || [];
+  return props.type === "multiple" ? indices : indices[0];
+});
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ link, active }">
+    <slot name="link" :link="link" :active="active" :ui="ui">
+      <slot name="link-leading" :link="link" :active="active" :ui="ui">
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+      </slot>
+
+      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle], active })">
+        <slot name="link-title" :link="link" :active="active" :ui="ui">
+          {{ link.title }}
+        </slot>
+
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [uiProp?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+      </span>
+
+      <span v-if="link.badge || link.badge === 0 || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, link.ui?.linkTrailing] })">
+        <slot name="link-trailing" :link="link" :active="active" :ui="ui">
+          <UBadge
+            v-if="link.badge || link.badge === 0"
+            color="neutral"
+            variant="outline"
+            :size="uiProp?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
+            data-slot="linkTrailingBadge"
+            :class="ui.linkTrailingBadge({ class: uiProp?.linkTrailingBadge })"
+          />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+        </slot>
+      </span>
+    </slot>
+  </DefineLinkTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
+      <template v-for="(link, index) in navigation" :key="index">
+        <AccordionItem
+          v-if="link.children?.length"
+          as="li"
+          :disabled="!!link.disabled"
+          data-slot="itemWithChildren"
+          :class="ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })"
+          :value="String(index)"
+        >
+          <AccordionTrigger
+            as="button"
+            :class="[
+              ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+              ui.trigger({ class: [uiProp?.trigger, link.ui?.trigger], disabled: !!link.disabled || disabled })
+            ]"
+          >
+            <ReuseLinkTemplate :link="link" :active="link.active || false" />
+          </AccordionTrigger>
+
+          <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.content, link.ui?.content] })">
+            <ADocsNavigation
+              v-bind="rootProps"
+              :navigation="link.children"
+              :default-open="defaultOpen"
+              :level="level + 1"
+              :trailing-icon="trailingIcon"
+              :color="color"
+              :variant="variant"
+              :highlight="highlight"
+              :highlight-color="highlightColor"
+              :ui="uiProp"
+            >
+              <template v-for="(_, name) in slots" #[name]="slotData">
+                <slot :name="name" v-bind="{ ...slotData, link: slotData.link }" />
+              </template>
+            </ADocsNavigation>
+          </AccordionContent>
+        </AccordionItem>
+
+        <li v-else data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item], level: level > 0 })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :link="link" :active="active" />
+            </ULinkBase>
+          </ULink>
+        </li>
+      </template>
+    </AccordionRoot>
+  </Primitive>
+</template>

package/dist/runtime/components/docs/ADocsNavigation.vue.d.ts

@@ -0,0 +1,155 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    variant: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    navigation: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    unmountOnHide: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    trailingIcon: {
+        type: null;
+        required: false;
+    };
+    color: {
+        type: null;
+        required: false;
+    };
+    variant: {
+        type: null;
+        required: false;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    highlightColor: {
+        type: null;
+        required: false;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    navigation: {
+        type: ArrayConstructor;
+        required: false;
+    };
+    class: {
+        type: null;
+        required: false;
+    };
+    ui: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    unmountOnHide: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    disabled: boolean;
+    level: number;
+    as: any;
+    collapsible: boolean;
+    highlight: boolean;
+    defaultOpen: boolean;
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});