@abraca/nuxt 2.10.0 → 2.13.0

package/dist/runtime/components/AEncryptionModePicker.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import AModalShell from "./AModalShell.vue";
+const props = defineProps({
+  docId: { type: String, required: true },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["updated"]);
+const DEFAULTS = {
+  noneTitle: "No encryption",
+  noneDesc: "The server stores and can read this document. Full-text search, offline cache, and previews all work.",
+  cseTitle: "Client-side encryption",
+  cseDesc: "Encrypted before it leaves your device. The server stores ciphertext but can still coordinate sync.",
+  e2eTitle: "End-to-end encryption",
+  e2eDesc: "Only people with the document key can read it. The server never sees plaintext.",
+  cannotDowngrade: "Encryption can only be strengthened, never reduced.",
+  loadFailed: "Couldn't load encryption settings",
+  retry: "Retry",
+  enableE2ETitle: "Enable end-to-end encryption?",
+  cannotBeUndone: "This cannot be undone.",
+  warningServerCantRead: "The server will no longer be able to read this document.",
+  warningNoSearch: "Server-side full-text search will stop working.",
+  warningNoOffline: "Some offline and preview features may be limited.",
+  warningKeysRequired: "Anyone who needs access must hold the document key.",
+  warningCannotUndo: "You cannot switch back to a weaker mode later.",
+  cancel: "Cancel",
+  enableE2E: "Enable end-to-end encryption"
+};
+const t = computed(() => ({ ...DEFAULTS, ...props.labels }));
+const { client } = useAbracadabra();
+const encInfo = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const saving = ref(false);
+const showE2EConfirm = ref(false);
+const pendingMode = ref("none");
+const STRICTNESS = { none: 0, cse: 1, e2e: 2 };
+const modes = computed(() => {
+  const effective = encInfo.value?.effective_mode ?? "none";
+  const current = STRICTNESS[effective];
+  return [
+    {
+      value: "none",
+      label: t.value.noneTitle,
+      description: t.value.noneDesc,
+      icon: "i-lucide-lock-open",
+      disabled: current > 0
+    },
+    {
+      value: "cse",
+      label: t.value.cseTitle,
+      description: t.value.cseDesc,
+      icon: "i-lucide-shield",
+      disabled: current > 1
+    },
+    {
+      value: "e2e",
+      label: t.value.e2eTitle,
+      description: t.value.e2eDesc,
+      icon: "i-lucide-lock-keyhole",
+      disabled: false
+    }
+  ];
+});
+const selected = computed(() => encInfo.value?.effective_mode ?? "none");
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    encInfo.value = await client.value.getDocEncryption(props.docId);
+  } catch (e) {
+    error.value = String(e);
+  } finally {
+    loading.value = false;
+  }
+}
+function handleSelect(mode) {
+  if (mode === selected.value) return;
+  pendingMode.value = mode;
+  if (mode === "e2e") {
+    showE2EConfirm.value = true;
+  } else {
+    void applyMode(mode);
+  }
+}
+async function applyMode(mode) {
+  showE2EConfirm.value = false;
+  saving.value = true;
+  try {
+    await client.value.setDocEncryption(props.docId, mode);
+    await load();
+    if (encInfo.value) emit("updated", encInfo.value);
+  } catch (e) {
+    error.value = String(e);
+  } finally {
+    saving.value = false;
+  }
+}
+onMounted(load);
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div
+      v-if="loading"
+      class="space-y-2"
+    >
+      <USkeleton class="h-14 w-full rounded-lg" />
+      <USkeleton class="h-14 w-full rounded-lg" />
+      <USkeleton class="h-14 w-full rounded-lg" />
+    </div>
+
+    <UAlert
+      v-else-if="error"
+      color="error"
+      variant="soft"
+      icon="i-lucide-alert-circle"
+      :title="t.loadFailed"
+      :description="error"
+    >
+      <template #actions>
+        <UButton
+          size="sm"
+          color="error"
+          variant="soft"
+          :label="t.retry"
+          @click="load"
+        />
+      </template>
+    </UAlert>
+
+    <template v-else>
+      <URadioGroup
+        :model-value="selected"
+        :items="modes"
+        value-key="value"
+        variant="card"
+        color="primary"
+        size="md"
+        :ui="{ fieldset: 'gap-2', item: 'w-full items-start', wrapper: 'flex-1', label: 'flex items-center gap-2 font-medium text-default' }"
+        :disabled="saving"
+        @update:model-value="(v) => handleSelect(v)"
+      >
+        <template #label="{ item }">
+          <UIcon
+            :name="item.icon"
+            class="size-4 shrink-0 text-(--ui-text-muted)"
+          />
+          <span>{{ item.label }}</span>
+        </template>
+        <template #description="{ item }">
+          <span class="text-xs leading-snug text-(--ui-text-muted)">{{ item.description }}</span>
+        </template>
+      </URadioGroup>
+
+      <UAlert
+        v-if="selected !== 'none'"
+        color="warning"
+        variant="subtle"
+        size="sm"
+        icon="i-lucide-alert-triangle"
+        :title="t.cannotDowngrade"
+      />
+    </template>
+
+    <AModalShell
+      :open="showE2EConfirm"
+      max-width="sm:max-w-md"
+      @update:open="showE2EConfirm = $event"
+    >
+      <div class="flex flex-col gap-4">
+        <h2 class="text-base font-semibold text-(--ui-text-highlighted)">
+          {{ t.enableE2ETitle }}
+        </h2>
+        <UAlert
+          color="warning"
+          icon="i-lucide-alert-triangle"
+          variant="soft"
+          :title="t.cannotBeUndone"
+        >
+          <template #description>
+            <ul class="list-disc pl-4 mt-1 space-y-1 text-sm">
+              <li>{{ t.warningServerCantRead }}</li>
+              <li>{{ t.warningNoSearch }}</li>
+              <li>{{ t.warningNoOffline }}</li>
+              <li>{{ t.warningKeysRequired }}</li>
+              <li><strong>{{ t.warningCannotUndo }}</strong></li>
+            </ul>
+          </template>
+        </UAlert>
+      </div>
+      <template #footer>
+        <div class="flex gap-2 justify-end w-full">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :label="t.cancel"
+            @click="showE2EConfirm = false"
+          />
+          <UButton
+            color="error"
+            :loading="saving"
+            :label="t.enableE2E"
+            @click="applyMode('e2e')"
+          />
+        </div>
+      </template>
+    </AModalShell>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+import type { DocEncryptionInfo } from '@abraca/dabra';
+type __VLS_Props = {
+    docId: string;
+    /** Override any displayed string. */
+    labels?: Partial<typeof DEFAULTS>;
+};
+declare const DEFAULTS: {
+    noneTitle: string;
+    noneDesc: string;
+    cseTitle: string;
+    cseDesc: string;
+    e2eTitle: string;
+    e2eDesc: string;
+    cannotDowngrade: string;
+    loadFailed: string;
+    retry: string;
+    enableE2ETitle: string;
+    cannotBeUndone: string;
+    warningServerCantRead: string;
+    warningNoSearch: string;
+    warningNoOffline: string;
+    warningKeysRequired: string;
+    warningCannotUndo: string;
+    cancel: string;
+    enableE2E: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: (args_0: DocEncryptionInfo) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdated?: ((args_0: DocEncryptionInfo) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,48 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Tailwind max-width class for the modal content (e.g. `sm:max-w-3xl`). */
+    maxWidth?: string;
+    closeable?: boolean;
+    /** Standard modal heading — guarantees the canonical look every modal shares. */
+    title?: string;
+    /** Optional muted line under the title (e.g. a short description). */
+    subtitle?: string;
+    /** When false, Esc / overlay-click cannot dismiss the modal (forced choice). */
+    dismissible?: boolean;
+    /** Enable horizontal swipe gestures for multi-step navigation. */
+    swipeable?: boolean;
+    /** Whether forward (swipe left) navigation is available. */
+    canSwipeForward?: boolean;
+    /** Whether backward (swipe right) navigation is available. */
+    canSwipeBack?: boolean;
+};
+declare var __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    footer?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+    "swipe-forward": () => any;
+    "swipe-back": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    "onSwipe-forward"?: (() => any) | undefined;
+    "onSwipe-back"?: (() => any) | undefined;
+}>, {
+    maxWidth: string;
+    closeable: boolean;
+    dismissible: boolean;
+    swipeable: boolean;
+    canSwipeForward: boolean;
+    canSwipeBack: 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/AModalShell.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useSwipeGesture } from "../composables/useSwipeGesture";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  maxWidth: { type: String, required: false, default: "sm:max-w-xl" },
+  closeable: { type: Boolean, required: false, default: true },
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  swipeable: { type: Boolean, required: false, default: false },
+  canSwipeForward: { type: Boolean, required: false, default: false },
+  canSwipeBack: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:open", "swipe-forward", "swipe-back"]);
+const innerRef = ref();
+const contentHeight = ref(void 0);
+useResizeObserver(innerRef, (entries) => {
+  const entry = entries[0];
+  if (entry && entry.contentRect.height > 0) contentHeight.value = entry.contentRect.height;
+});
+const swipeRef = ref(null);
+const swipeDirection = ref(null);
+const { swipeOffset, isSwiping } = useSwipeGesture({
+  el: swipeRef,
+  axis: "x",
+  disabled: computed(() => !props.swipeable),
+  canSwipeLeft: computed(() => props.canSwipeForward),
+  canSwipeRight: computed(() => props.canSwipeBack),
+  onSwipeLeft() {
+    swipeDirection.value = "forward";
+    emit("swipe-forward");
+  },
+  onSwipeRight() {
+    swipeDirection.value = "back";
+    emit("swipe-back");
+  }
+});
+const transitionName = computed(
+  () => swipeDirection.value === "back" ? "ams-step-fade-reverse" : "ams-step-fade"
+);
+function onAfterLeave() {
+  swipeDirection.value = null;
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    :closeable="closeable"
+    :dismissible="dismissible"
+    :ui="{
+  content: `${maxWidth} divide-y-0`,
+  header: 'hidden'
+}"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="flex flex-col gap-6 p-4 sm:p-6">
+        <div
+          v-if="title || subtitle"
+          class="flex flex-col gap-1"
+        >
+          <h2
+            v-if="title"
+            class="text-base font-semibold text-(--ui-text-highlighted)"
+          >
+            {{ title }}
+          </h2>
+          <p
+            v-if="subtitle"
+            class="text-sm text-(--ui-text-muted)"
+          >
+            {{ subtitle }}
+          </p>
+        </div>
+        <div
+          ref="swipeRef"
+          class="ams-height-wrap"
+          :style="{
+  ...contentHeight !== void 0 ? { height: contentHeight + 'px' } : {},
+  ...isSwiping ? { transform: `translateX(${swipeOffset.x}px)`, transition: 'none' } : {}
+}"
+        >
+          <div ref="innerRef">
+            <Transition
+              :name="transitionName"
+              mode="out-in"
+              @after-leave="onAfterLeave"
+            >
+              <slot />
+            </Transition>
+          </div>
+        </div>
+
+        <slot name="footer" />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.ams-height-wrap{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),transform .3s ease}.ams-step-fade-enter-active{transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.ams-step-fade-leave-active{transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1)}.ams-step-fade-enter-from{opacity:0;transform:translateX(16px) scale(.97)}.ams-step-fade-leave-to{opacity:0;transform:translateX(-12px) scale(.98)}.ams-step-fade-reverse-enter-active{transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.ams-step-fade-reverse-leave-active{transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1)}.ams-step-fade-reverse-enter-from{opacity:0;transform:translateX(-16px) scale(.97)}.ams-step-fade-reverse-leave-to{opacity:0;transform:translateX(12px) scale(.98)}
+</style>

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

@@ -0,0 +1,48 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Tailwind max-width class for the modal content (e.g. `sm:max-w-3xl`). */
+    maxWidth?: string;
+    closeable?: boolean;
+    /** Standard modal heading — guarantees the canonical look every modal shares. */
+    title?: string;
+    /** Optional muted line under the title (e.g. a short description). */
+    subtitle?: string;
+    /** When false, Esc / overlay-click cannot dismiss the modal (forced choice). */
+    dismissible?: boolean;
+    /** Enable horizontal swipe gestures for multi-step navigation. */
+    swipeable?: boolean;
+    /** Whether forward (swipe left) navigation is available. */
+    canSwipeForward?: boolean;
+    /** Whether backward (swipe right) navigation is available. */
+    canSwipeBack?: boolean;
+};
+declare var __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    footer?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+    "swipe-forward": () => any;
+    "swipe-back": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    "onSwipe-forward"?: (() => any) | undefined;
+    "onSwipe-back"?: (() => any) | undefined;
+}>, {
+    maxWidth: string;
+    closeable: boolean;
+    dismissible: boolean;
+    swipeable: boolean;
+    canSwipeForward: boolean;
+    canSwipeBack: 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/ANodePanel.d.vue.ts

@@ -7,19 +7,29 @@ type __VLS_Props = {
     docType?: string;
     labels?: Partial<AbracadabraLocale['nodePanel']>;
     /** Tab to open initially. Defaults to 'editor'. */
-    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | string;
+    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings' | string;
     /**
-     * Built-in tabs to render. Defaults to all-on; pass an array to limit which
-     * tabs appear (useful when a developer wants only properties + chat).
-     * Plugin-registered tab slots are unaffected.
+     * Built-in tabs to render. Defaults to editor/properties/chat/settings on;
+     * pass an array to limit which tabs appear (useful when a developer wants
+     * only properties + chat). `serverSettings` is OPT-IN — only rendered when
+     * explicitly included (it targets a server hub doc). Plugin-registered tab
+     * slots are unaffected.
      */
-    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings'>;
+    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings'>;
+    /**
+     * Build the URL the "open as full page" (expand) button navigates to.
+     * Defaults to a slug-aware path derived from the configured `docBasePath`
+     * (`useDocSlugs().getDocUrl`), which resolves to the doc's slug when it has
+     * one and falls back to the raw id. Override to target a custom route shape.
+     */
+    docHref?: (id: string) => string;
 };
 declare var __VLS_11: {
     nodeId: string | null;
-    nodeLabel: string | undefined;
+    nodeLabel: any;
     editor: any;
     meta: DocPageMeta;
+    activeTab: string;
     docTypeDef: import("../utils/docTypes.js").DocTypeDefinition;
 };
 type __VLS_Slots = {} & {
@@ -30,7 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
-    initialTab: "editor" | "properties" | "chat" | "settings" | string;
+    initialTab: "editor" | "properties" | "chat" | "settings" | "serverSettings" | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;