@abraca/nuxt 2.10.0 → 2.13.0

package/dist/runtime/components/settings/ASettingsPlaceholder.vue

@@ -0,0 +1,32 @@
+<script setup>
+defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  badge: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16 px-4 gap-3">
+    <div class="size-12 rounded-full bg-(--ui-bg-elevated) flex items-center justify-center">
+      <UIcon
+        :name="icon"
+        class="size-6 text-(--ui-text-muted)"
+      />
+    </div>
+    <h3 class="text-sm font-semibold text-(--ui-text-highlighted)">
+      {{ title }}
+    </h3>
+    <p class="text-xs text-(--ui-text-muted) max-w-sm leading-relaxed">
+      {{ description }}
+    </p>
+    <UBadge
+      v-if="badge"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      :label="badge"
+    />
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsPlaceholder.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * <ASettingsPlaceholder>
+ *
+ * Centered empty-state card for a not-yet-implemented (or empty) settings
+ * section: icon bubble + title + description, with an optional badge.
+ * Ported from cou-sh SettingsV2/Placeholder.vue — the badge is configurable
+ * here (cou-sh hardcoded "Coming next"); omit `badge` to hide it.
+ */
+type __VLS_Props = {
+    icon: string;
+    title: string;
+    description: string;
+    /** Optional badge label (e.g. "Coming next"). Omit to hide the badge. */
+    badge?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    badge: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/ASettingsRow.d.vue.ts

@@ -0,0 +1,34 @@
+/**
+ * <ASettingsRow>
+ *
+ * One labelled setting row: label + optional description on the left, the
+ * control (default slot) on the right. Bottom-bordered so rows stack into a
+ * clean list inside an <ASettingsGroup>. Use `stacked` for wide controls
+ * (color grids, lists) that need their own row beneath the label.
+ *
+ * Shared building block for settings panels — ported from cou-sh
+ * SettingsV2/Row.vue so module panels share one consistent row look.
+ */
+type __VLS_Props = {
+    label: string;
+    description?: string;
+    /** Stack label + description above a full-width control row (wide widgets). */
+    stacked?: boolean;
+    /** Vertical alignment of the control against the label. */
+    align?: 'center' | 'start';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "center" | "start";
+}, {}, {}, {}, 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/settings/ASettingsRow.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  stacked: { type: Boolean, required: false },
+  align: { type: String, required: false, default: "center" }
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-4 py-3.5 border-b border-(--ui-border) last:border-b-0"
+    :class="[
+  stacked ? 'flex-col' : 'flex-col sm:flex-row sm:justify-between',
+  !stacked && align === 'center' ? 'sm:items-center' : 'sm:items-start'
+]"
+  >
+    <div class="flex flex-col gap-0.5 min-w-0">
+      <span class="text-sm text-(--ui-text-highlighted)">{{ label }}</span>
+      <span
+        v-if="description"
+        class="text-xs text-(--ui-text-muted) leading-relaxed"
+      >
+        {{ description }}
+      </span>
+    </div>
+    <div
+      class="flex items-center gap-2 shrink-0"
+      :class="stacked && 'w-full justify-start'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/settings/ASettingsRow.vue.d.ts

@@ -0,0 +1,34 @@
+/**
+ * <ASettingsRow>
+ *
+ * One labelled setting row: label + optional description on the left, the
+ * control (default slot) on the right. Bottom-bordered so rows stack into a
+ * clean list inside an <ASettingsGroup>. Use `stacked` for wide controls
+ * (color grids, lists) that need their own row beneath the label.
+ *
+ * Shared building block for settings panels — ported from cou-sh
+ * SettingsV2/Row.vue so module panels share one consistent row look.
+ */
+type __VLS_Props = {
+    label: string;
+    description?: string;
+    /** Stack label + description above a full-width control row (wide widgets). */
+    stacked?: boolean;
+    /** Vertical alignment of the control against the label. */
+    align?: 'center' | 'start';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "center" | "start";
+}, {}, {}, {}, 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/settings/sections.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Settings section registry.
+ *
+ * The single source of truth for which settings sections exist, how they're
+ * labelled/grouped/searched, and which component renders each. <ASettingsModal>
+ * builds its nav + content from this list instead of hard-coding them, so a new
+ * section is one entry here (no template edits), and the nav gets search +
+ * grouping for free.
+ *
+ * Grouping maps onto the shell's two modes:
+ *   - 'user'      → "User settings"
+ *   - 'workspace' → "Administration" (workspace-level)
+ *   - 'admin'     → "Administration" (admin/service only; `adminOnly`)
+ */
+import { type Component } from 'vue';
+import type { SettingsTab } from '../../composables/useSettingsModal.js';
+export type SettingsGroup = 'user' | 'workspace' | 'admin';
+export interface SettingsSectionDef {
+    key: SettingsTab;
+    label: string;
+    icon: string;
+    group: SettingsGroup;
+    /** Extra terms matched by the nav search box (besides the label). */
+    keywords?: string[];
+    /** Only shown to admin/service roles. */
+    adminOnly?: boolean;
+    /** The panel component to render for this section. */
+    component: Component;
+}
+/** Which shell "mode" each group belongs to. */
+export declare const GROUP_MODE: Record<SettingsGroup, 'user' | 'admin'>;
+export declare const GROUP_LABELS: Record<SettingsGroup, string>;
+export declare const BUILTIN_SETTINGS_SECTIONS: SettingsSectionDef[];
+/** Filter to the sections visible for the current role. */
+export declare function visibleSections(sections: SettingsSectionDef[], isAdmin: boolean): SettingsSectionDef[];
+/** Case-insensitive search over label + keywords. */
+export declare function searchSections(query: string, sections: SettingsSectionDef[]): SettingsSectionDef[];

package/dist/runtime/components/settings/sections.js

@@ -0,0 +1,45 @@
+import { markRaw } from "vue";
+import ASettingsProfilePanel from "./ASettingsProfilePanel.vue";
+import ASettingsAppearancePanel from "./ASettingsAppearancePanel.vue";
+import ASettingsSecurityPanel from "./ASettingsSecurityPanel.vue";
+import ASettingsOfflinePanel from "./ASettingsOfflinePanel.vue";
+import ASettingsSpacesPanel from "./ASettingsSpacesPanel.vue";
+import ASettingsMembersPanel from "./ASettingsMembersPanel.vue";
+import ASettingsConnectionPanel from "./ASettingsConnectionPanel.vue";
+import ASettingsTrashPanel from "./ASettingsTrashPanel.vue";
+import ASettingsPluginsPanel from "./ASettingsPluginsPanel.vue";
+import ASettingsInvitesPanel from "./ASettingsInvitesPanel.vue";
+import ASettingsAdminPanel from "./ASettingsAdminPanel.vue";
+export const GROUP_MODE = {
+  user: "user",
+  workspace: "admin",
+  admin: "admin"
+};
+export const GROUP_LABELS = {
+  user: "Account",
+  workspace: "Workspace",
+  admin: "Administration"
+};
+export const BUILTIN_SETTINGS_SECTIONS = [
+  { key: "profile", label: "Profile", icon: "i-lucide-user", group: "user", keywords: ["name", "avatar", "identity", "colour", "color"], component: markRaw(ASettingsProfilePanel) },
+  { key: "appearance", label: "Appearance", icon: "i-lucide-palette", group: "user", keywords: ["theme", "dark", "light", "motion", "font"], component: markRaw(ASettingsAppearancePanel) },
+  { key: "security", label: "Security", icon: "i-lucide-shield", group: "user", keywords: ["passkey", "password", "account", "logout", "wipe"], component: markRaw(ASettingsSecurityPanel) },
+  { key: "offline", label: "Offline", icon: "i-lucide-database", group: "user", keywords: ["sync", "storage", "cache"], component: markRaw(ASettingsOfflinePanel) },
+  { key: "spaces", label: "Spaces", icon: "i-lucide-layers", group: "workspace", keywords: ["workspace", "create", "switch"], component: markRaw(ASettingsSpacesPanel) },
+  { key: "members", label: "Members", icon: "i-lucide-users", group: "workspace", keywords: ["people", "roles", "online"], component: markRaw(ASettingsMembersPanel) },
+  { key: "connection", label: "Connection", icon: "i-lucide-wifi", group: "workspace", keywords: ["server", "p2p", "webrtc", "reconnect"], component: markRaw(ASettingsConnectionPanel) },
+  { key: "trash", label: "Trash", icon: "i-lucide-trash-2", group: "workspace", keywords: ["deleted", "restore", "purge"], component: markRaw(ASettingsTrashPanel) },
+  { key: "plugins", label: "Plugins", icon: "i-lucide-plug", group: "workspace", keywords: ["extensions", "page types"], component: markRaw(ASettingsPluginsPanel) },
+  { key: "invites", label: "Invites", icon: "i-lucide-ticket", group: "admin", adminOnly: true, keywords: ["invite", "code", "join"], component: markRaw(ASettingsInvitesPanel) },
+  { key: "admin", label: "Admin", icon: "i-lucide-shield-alert", group: "admin", adminOnly: true, keywords: ["users", "server", "manage"], component: markRaw(ASettingsAdminPanel) }
+];
+export function visibleSections(sections, isAdmin) {
+  return sections.filter((s) => !s.adminOnly || isAdmin);
+}
+export function searchSections(query, sections) {
+  const q = query.trim().toLowerCase();
+  if (!q) return sections;
+  return sections.filter(
+    (s) => s.label.toLowerCase().includes(q) || s.keywords?.some((k) => k.toLowerCase().includes(q))
+  );
+}

package/dist/runtime/components/shell/ABreadcrumbForDoc.d.vue.ts

@@ -3,9 +3,15 @@ type __VLS_Props = {
     docId: string | null | undefined;
     /** Maximum ancestors to walk (default 8) */
     maxDepth?: number;
+    /**
+     * Collapse the middle into a "…" overflow menu once the trail exceeds this
+     * many crumbs. 0 (default) renders the full trail with no collapsing.
+     */
+    maxVisible?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     maxDepth: number;
+    maxVisible: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/shell/ABreadcrumbForDoc.vue

@@ -1,15 +1,87 @@
 <script setup>
+import { computed } from "vue";
 import { useDocBreadcrumb } from "../../composables/useDocBreadcrumb";
 const props = defineProps({
   docId: { type: null, required: true },
-  maxDepth: { type: Number, required: false, default: 8 }
+  maxDepth: { type: Number, required: false, default: 8 },
+  maxVisible: { type: Number, required: false, default: 0 }
 });
-const { items } = useDocBreadcrumb(() => props.docId, { maxDepth: props.maxDepth });
+const { items, collapsed } = useDocBreadcrumb(() => props.docId, {
+  maxDepth: props.maxDepth,
+  maxVisible: props.maxVisible
+});
+const overflowItems = computed(
+  () => collapsed.value.hidden.map((a) => ({ label: a.label, icon: a.icon, to: a.to }))
+);
 </script>
 
 <template>
+  <!-- Collapsed single-line variant (overflow menu for the hidden middle) -->
+  <nav
+    v-if="collapsed.overflowed"
+    aria-label="Breadcrumb"
+    class="flex items-center gap-0.5 min-w-0 text-(--ui-text-muted)"
+  >
+    <template
+      v-for="ancestor in collapsed.head"
+      :key="ancestor.id"
+    >
+      <ULink
+        :to="ancestor.to"
+        class="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors min-w-0"
+      >
+        <UIcon
+          :name="ancestor.icon"
+          class="size-3.5 shrink-0"
+        />
+        <span class="truncate max-w-[10ch]">{{ ancestor.label }}</span>
+      </ULink>
+      <UIcon
+        name="i-lucide-chevron-right"
+        class="size-3.5 shrink-0 opacity-60"
+      />
+    </template>
+
+    <UDropdownMenu :items="overflowItems">
+      <button
+        type="button"
+        class="flex items-center px-1 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors"
+        :aria-label="`Show ${collapsed.hidden.length} hidden`"
+      >
+        …
+      </button>
+    </UDropdownMenu>
+    <UIcon
+      name="i-lucide-chevron-right"
+      class="size-3.5 shrink-0 opacity-60"
+    />
+
+    <template
+      v-for="(ancestor, idx) in collapsed.tail"
+      :key="ancestor.id"
+    >
+      <ULink
+        :to="ancestor.to"
+        class="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors min-w-0"
+        :class="ancestor.to ? '' : 'pointer-events-none text-(--ui-text)'"
+      >
+        <UIcon
+          :name="ancestor.icon"
+          class="size-3.5 shrink-0"
+        />
+        <span class="truncate max-w-[10ch]">{{ ancestor.label }}</span>
+      </ULink>
+      <UIcon
+        v-if="idx < collapsed.tail.length - 1"
+        name="i-lucide-chevron-right"
+        class="size-3.5 shrink-0 opacity-60"
+      />
+    </template>
+  </nav>
+
+  <!-- Full-trail variant -->
   <UBreadcrumb
-    v-if="items.length > 0"
+    v-else-if="items.length > 0"
     :items="items"
     :ui="{ root: 'min-w-0', list: 'min-w-0 flex-nowrap', item: 'truncate', link: 'truncate' }"
   />

package/dist/runtime/components/shell/ABreadcrumbForDoc.vue.d.ts

@@ -3,9 +3,15 @@ type __VLS_Props = {
     docId: string | null | undefined;
     /** Maximum ancestors to walk (default 8) */
     maxDepth?: number;
+    /**
+     * Collapse the middle into a "…" overflow menu once the trail exceeds this
+     * many crumbs. 0 (default) renders the full trail with no collapsing.
+     */
+    maxVisible?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     maxDepth: number;
+    maxVisible: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/shell/ADocPanelServerSettings.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Hub document id (informational — the panel reflects the active server). */
+    docId?: string;
+};
+declare var __VLS_96: "storage" | "users" | "members" | "invites", __VLS_97: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_96>]?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: 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: __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/shell/ADocPanelServerSettings.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { computed, onMounted, reactive, ref, useSlots, watch } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+defineProps({
+  docId: { type: String, required: false }
+});
+const slots = useSlots();
+const { client, status, synced, effectiveRole, currentServerUrl, reconnect } = useAbracadabra();
+const ROLE_LEVELS = {
+  observer: 0,
+  viewer: 1,
+  editor: 2,
+  owner: 3,
+  admin: 4,
+  service: 5
+};
+const roleLevel = computed(() => ROLE_LEVELS[effectiveRole.value ?? ""] ?? 0);
+const canEdit = computed(() => roleLevel.value >= 2);
+const isAdmin = computed(() => roleLevel.value >= 4);
+const roleBadgeColor = computed(() => {
+  const r = effectiveRole.value;
+  if (r === "admin" || r === "service") return "warning";
+  if (r === "owner") return "primary";
+  if (r === "editor") return "success";
+  return "neutral";
+});
+const statusDotClass = computed(() => {
+  if (status.value === "connected") return "bg-(--ui-success)";
+  if (status.value === "connecting") return "bg-(--ui-warning)";
+  return "bg-(--ui-error)";
+});
+const serverInfo = ref(null);
+async function loadServerInfo() {
+  if (!client.value) return;
+  try {
+    serverInfo.value = await client.value.serverInfo();
+  } catch {
+  }
+}
+watch(client, loadServerInfo, { immediate: true });
+const healthData = ref(null);
+const healthLoading = ref(false);
+async function checkHealth() {
+  if (!client.value) return;
+  healthLoading.value = true;
+  try {
+    healthData.value = await client.value.health();
+  } catch {
+  } finally {
+    healthLoading.value = false;
+  }
+}
+const expanded = reactive({ members: false, users: false, invites: false, storage: false });
+const adminSections = computed(() => [
+  { key: "members", label: "Members", icon: "i-lucide-users", show: canEdit.value && !!slots.members },
+  { key: "users", label: "Users", icon: "i-lucide-shield-alert", show: isAdmin.value && !!slots.users },
+  { key: "invites", label: "Invites", icon: "i-lucide-ticket", show: isAdmin.value && !!slots.invites },
+  { key: "storage", label: "Storage", icon: "i-lucide-hard-drive", show: isAdmin.value && !!slots.storage }
+].filter((s) => s.show));
+onMounted(loadServerInfo);
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto px-4 py-3 space-y-3">
+    <!-- Connection — read-only URL (single-server) -->
+    <div class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden">
+      <div class="flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border)">
+        <UIcon
+          name="i-lucide-plug"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted)">Connection</span>
+      </div>
+      <div class="px-3 py-3 space-y-1.5">
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-lucide-server"
+            class="size-3.5 text-(--ui-text-dimmed) shrink-0"
+          />
+          <span class="text-sm truncate flex-1 min-w-0 text-(--ui-text)">{{ currentServerUrl || "\u2014" }}</span>
+          <UButton
+            v-if="status !== 'connected'"
+            icon="i-lucide-refresh-cw"
+            size="xs"
+            variant="ghost"
+            color="primary"
+            @click="reconnect"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Status -->
+    <div class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden">
+      <div class="flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border)">
+        <UIcon
+          name="i-lucide-info"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted)">Status</span>
+      </div>
+      <div class="divide-y divide-(--ui-border)">
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-activity"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Connection</span>
+          </div>
+          <div class="flex items-center gap-1.5 shrink-0">
+            <span :class="['size-1.5 rounded-full', statusDotClass]" />
+            <span class="text-sm capitalize">{{ status }}</span>
+          </div>
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-shield"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Your role</span>
+          </div>
+          <UBadge
+            v-if="effectiveRole"
+            :color="roleBadgeColor"
+            variant="subtle"
+            :label="effectiveRole"
+            size="sm"
+            class="capitalize shrink-0"
+          />
+          <span
+            v-else
+            class="text-sm text-(--ui-text-dimmed)"
+          >—</span>
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-refresh-ccw"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Synced</span>
+          </div>
+          <UBadge
+            :color="synced ? 'success' : 'neutral'"
+            variant="subtle"
+            :label="synced ? 'Yes' : 'No'"
+            :icon="synced ? 'i-lucide-check' : 'i-lucide-circle'"
+            size="sm"
+            class="shrink-0"
+          />
+        </div>
+        <div
+          v-if="serverInfo?.version"
+          class="flex items-center justify-between gap-2 px-3 py-2"
+        >
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-tag"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Version</span>
+          </div>
+          <div class="flex items-center gap-1 shrink-0">
+            <UBadge
+              color="neutral"
+              variant="subtle"
+              :label="`v${serverInfo.version}`"
+              size="sm"
+            />
+            <UBadge
+              v-if="serverInfo.protocol_version"
+              color="neutral"
+              variant="outline"
+              :label="`p${serverInfo.protocol_version}`"
+              size="sm"
+            />
+          </div>
+        </div>
+        <div
+          v-if="serverInfo?.invite_only !== void 0"
+          class="flex items-center justify-between gap-2 px-3 py-2"
+        >
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              :name="serverInfo.invite_only ? 'i-lucide-lock' : 'i-lucide-globe'"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Invite only</span>
+          </div>
+          <UBadge
+            :color="serverInfo.invite_only ? 'warning' : 'success'"
+            variant="subtle"
+            :label="serverInfo.invite_only ? 'Yes' : 'No'"
+            size="sm"
+            class="shrink-0"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-heart-pulse"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Health</span>
+          </div>
+          <UButton
+            :label="healthData ? `v${healthData.version}` : 'Check'"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="shrink-0"
+            :loading="healthLoading"
+            @click="checkHealth"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Admin surfaces — opt-in via slots, gated by role -->
+    <div
+      v-for="section in adminSections"
+      :key="section.key"
+      class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden"
+    >
+      <button
+        type="button"
+        class="w-full flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border) hover:bg-(--ui-bg-accented)/40 transition-colors"
+        :class="{ 'border-b-0': !expanded[section.key] }"
+        @click="expanded[section.key] = !expanded[section.key]"
+      >
+        <UIcon
+          :name="section.icon"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex-1 text-left">
+          {{ section.label }}
+        </span>
+        <UIcon
+          :name="expanded[section.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="size-3.5 text-(--ui-text-dimmed)"
+        />
+      </button>
+      <div
+        v-if="expanded[section.key]"
+        class="px-3 py-3"
+      >
+        <slot :name="section.key" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/shell/ADocPanelServerSettings.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Hub document id (informational — the panel reflects the active server). */
+    docId?: string;
+};
+declare var __VLS_96: "storage" | "users" | "members" | "invites", __VLS_97: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_96>]?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: 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: __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;
+    };
+};