@abraca/nuxt 2.11.0 → 2.14.0

package/dist/runtime/components/renderers/AGraphRenderer.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import { useRuntimeConfig } from "#imports";
-import { useRafFn, useEventListener } from "@vueuse/core";
+import { useRafFn, useEventListener, useLocalStorage } from "@vueuse/core";
 import { getIcon, loadIcon } from "@iconify/vue";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useNodePanel } from "../../composables/useNodePanel";
@@ -161,20 +161,39 @@ function svgCoord(clientX, clientY) {
 }
 function onWheel(e) {
   e.preventDefault();
-  const sensitivity = e.ctrlKey ? 8e-3 : 25e-4;
-  const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), 100);
-  const scale = 1 + delta * sensitivity;
-  const rect = svgRef.value.getBoundingClientRect();
-  const tv = targetVb.value;
-  const px = (e.clientX - rect.left) / rect.width * tv.w + tv.x;
-  const py = (e.clientY - rect.top) / rect.height * tv.h + tv.y;
-  targetVb.value = {
-    x: px - (px - tv.x) * scale,
-    y: py - (py - tv.y) * scale,
-    w: Math.max(100, Math.min(8e3, tv.w * scale)),
-    h: Math.max(100, Math.min(8e3, tv.h * scale))
-  };
-  if (!zoomRafId) zoomRafId = requestAnimationFrame(animateZoom);
+  const wantsZoom = e.ctrlKey ? scrollBehavior.value === "pan" : scrollBehavior.value === "zoom";
+  if (wantsZoom) {
+    const sensitivity = e.ctrlKey ? 8e-3 : 25e-4;
+    const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), 100);
+    const scale = 1 + delta * sensitivity;
+    const rect = svgRef.value.getBoundingClientRect();
+    const tv = targetVb.value;
+    const px = (e.clientX - rect.left) / rect.width * tv.w + tv.x;
+    const py = (e.clientY - rect.top) / rect.height * tv.h + tv.y;
+    targetVb.value = {
+      x: px - (px - tv.x) * scale,
+      y: py - (py - tv.y) * scale,
+      w: Math.max(100, Math.min(8e3, tv.w * scale)),
+      h: Math.max(100, Math.min(8e3, tv.h * scale))
+    };
+    if (!zoomRafId) zoomRafId = requestAnimationFrame(animateZoom);
+  } else {
+    if (zoomRafId) {
+      cancelAnimationFrame(zoomRafId);
+      zoomRafId = null;
+    }
+    vb.value = { ...targetVb.value };
+    const rect = svgRef.value.getBoundingClientRect();
+    const sx = vb.value.w / rect.width;
+    const sy = vb.value.h / rect.height;
+    vb.value = {
+      x: vb.value.x + e.deltaX * sx,
+      y: vb.value.y + e.deltaY * sy,
+      w: vb.value.w,
+      h: vb.value.h
+    };
+    targetVb.value = { ...vb.value };
+  }
 }
 const activePointers = /* @__PURE__ */ new Map();
 let isPinching = false;
@@ -371,6 +390,7 @@ watch(() => savedDocMeta.value?.graphEdgeThickness, (v) => {
   if (v && v !== edgeThickness.value) edgeThickness.value = v;
 });
 const edgeScale = computed(() => EDGE_THICKNESS_SCALE[edgeThickness.value]);
+const scrollBehavior = useLocalStorage("abracadabra_graph_scroll_behavior", "pan");
 const spacingIcon = computed(() => {
   const icons = {
     compact: "i-lucide-dot",
@@ -1179,6 +1199,35 @@ defineExpose({ connectedUsers });
                   </UButton>
                 </div>
               </div>
+
+              <!-- Personal (device-local) — not shared via the doc -->
+              <div class="h-px bg-(--ui-border)" />
+              <div class="flex items-center justify-between gap-2">
+                <div class="flex flex-col min-w-0">
+                  <span class="text-xs text-(--ui-text-muted)">{{ locale.scrollBehavior }}</span>
+                  <span class="text-[10px] text-(--ui-text-dimmed)">{{ locale.personalSetting }}</span>
+                </div>
+                <div class="flex gap-0.5 shrink-0">
+                  <UButton
+                    size="xs"
+                    :variant="scrollBehavior === 'pan' ? 'soft' : 'ghost'"
+                    :color="scrollBehavior === 'pan' ? 'primary' : 'neutral'"
+                    class="text-[10px] px-1.5"
+                    @click="scrollBehavior = 'pan'"
+                  >
+                    {{ locale.scrollPan }}
+                  </UButton>
+                  <UButton
+                    size="xs"
+                    :variant="scrollBehavior === 'zoom' ? 'soft' : 'ghost'"
+                    :color="scrollBehavior === 'zoom' ? 'primary' : 'neutral'"
+                    class="text-[10px] px-1.5"
+                    @click="scrollBehavior = 'zoom'"
+                  >
+                    {{ locale.scrollZoom }}
+                  </UButton>
+                </div>
+              </div>
             </div>
           </template>
         </UPopover>

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.d.vue.ts

@@ -20,16 +20,16 @@ type __VLS_Props = {
     };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: () => any;
     "update:viewMode": (mode: CalendarViewMode) => any;
     prev: () => any;
-    next: () => any;
     today: () => any;
     "add-event": () => any;
     "navigate-to-month": (year: number, month: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNext?: (() => any) | undefined;
     "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     onToday?: (() => any) | undefined;
     "onAdd-event"?: (() => any) | undefined;
     "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;

package/dist/runtime/components/renderers/calendar/ACalendarToolbar.vue.d.ts

@@ -20,16 +20,16 @@ type __VLS_Props = {
     };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: () => any;
     "update:viewMode": (mode: CalendarViewMode) => any;
     prev: () => any;
-    next: () => any;
     today: () => any;
     "add-event": () => any;
     "navigate-to-month": (year: number, month: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNext?: (() => any) | undefined;
     "onUpdate:viewMode"?: ((mode: CalendarViewMode) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     onToday?: (() => any) | undefined;
     "onAdd-event"?: (() => any) | undefined;
     "onNavigate-to-month"?: ((year: number, month: number) => any) | undefined;

package/dist/runtime/components/renderers/media/MediaTransportBar.d.vue.ts

@@ -8,13 +8,13 @@ type __VLS_Props = {
     isLoading: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    prev: () => any;
     next: () => any;
+    prev: () => any;
     togglePlay: () => any;
     seek: (position: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    onPrev?: (() => any) | undefined;
     onTogglePlay?: (() => any) | undefined;
     onSeek?: ((position: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/renderers/media/MediaTransportBar.vue.d.ts

@@ -8,13 +8,13 @@ type __VLS_Props = {
     isLoading: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    prev: () => any;
     next: () => any;
+    prev: () => any;
     togglePlay: () => any;
     seek: (position: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    onPrev?: (() => any) | undefined;
     onTogglePlay?: (() => any) | undefined;
     onSeek?: ((position: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/renderers/sheets/ASheetsGrid.d.vue.ts

@@ -60,10 +60,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     keydown: (e: KeyboardEvent) => any;
     paste: (e: ClipboardEvent) => any;
     renameColumn: (colId: string, label: string) => any;
-    commitEdit: () => any;
     "update:editValue": (value: string) => any;
     selectCell: (colIdx: number, rowIdx: number, shiftKey: boolean) => any;
     activateCell: (colIdx: number, rowIdx: number) => any;
+    commitEdit: () => any;
     cancelEdit: () => any;
     resizeColumn: (colId: string, width: number) => any;
     selectRow: (rowIdx: number) => any;
@@ -86,10 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     onKeydown?: ((e: KeyboardEvent) => any) | undefined;
     onPaste?: ((e: ClipboardEvent) => any) | undefined;
     onRenameColumn?: ((colId: string, label: string) => any) | undefined;
-    onCommitEdit?: (() => any) | undefined;
     "onUpdate:editValue"?: ((value: string) => any) | undefined;
     onSelectCell?: ((colIdx: number, rowIdx: number, shiftKey: boolean) => any) | undefined;
     onActivateCell?: ((colIdx: number, rowIdx: number) => any) | undefined;
+    onCommitEdit?: (() => any) | undefined;
     onCancelEdit?: (() => any) | undefined;
     onResizeColumn?: ((colId: string, width: number) => any) | undefined;
     onSelectRow?: ((rowIdx: number) => any) | undefined;

package/dist/runtime/components/renderers/sheets/ASheetsGrid.vue.d.ts

@@ -60,10 +60,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     keydown: (e: KeyboardEvent) => any;
     paste: (e: ClipboardEvent) => any;
     renameColumn: (colId: string, label: string) => any;
-    commitEdit: () => any;
     "update:editValue": (value: string) => any;
     selectCell: (colIdx: number, rowIdx: number, shiftKey: boolean) => any;
     activateCell: (colIdx: number, rowIdx: number) => any;
+    commitEdit: () => any;
     cancelEdit: () => any;
     resizeColumn: (colId: string, width: number) => any;
     selectRow: (rowIdx: number) => any;
@@ -86,10 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     onKeydown?: ((e: KeyboardEvent) => any) | undefined;
     onPaste?: ((e: ClipboardEvent) => any) | undefined;
     onRenameColumn?: ((colId: string, label: string) => any) | undefined;
-    onCommitEdit?: (() => any) | undefined;
     "onUpdate:editValue"?: ((value: string) => any) | undefined;
     onSelectCell?: ((colIdx: number, rowIdx: number, shiftKey: boolean) => any) | undefined;
     onActivateCell?: ((colIdx: number, rowIdx: number) => any) | undefined;
+    onCommitEdit?: (() => any) | undefined;
     onCancelEdit?: (() => any) | undefined;
     onResizeColumn?: ((colId: string, width: number) => any) | undefined;
     onSelectRow?: ((rowIdx: number) => any) | undefined;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useNuxtApp } from "#imports";
+const colorMode = useNuxtApp().$colorMode;
+const THEME_OPTIONS = [
+  { value: "system", label: "System", icon: "i-lucide-monitor" },
+  { value: "light", label: "Light", icon: "i-lucide-sun" },
+  { value: "dark", label: "Dark", icon: "i-lucide-moon" }
+];
+const theme = computed({
+  get: () => colorMode?.preference || "system",
+  set: (v) => {
+    if (colorMode) colorMode.preference = v;
+  }
+});
+const REDUCE_MOTION_KEY = "abracadabra_reduce_motion";
+const reduceMotion = ref(false);
+function applyReduceMotion(on) {
+  if (typeof document === "undefined") return;
+  if (on) document.documentElement.setAttribute("data-reduce-motion", "");
+  else document.documentElement.removeAttribute("data-reduce-motion");
+}
+onMounted(() => {
+  reduceMotion.value = localStorage.getItem(REDUCE_MOTION_KEY) === "1";
+  applyReduceMotion(reduceMotion.value);
+});
+function setReduceMotion(on) {
+  reduceMotion.value = on;
+  if (typeof localStorage !== "undefined") localStorage.setItem(REDUCE_MOTION_KEY, on ? "1" : "0");
+  applyReduceMotion(on);
+}
+</script>
+
+<template>
+  <ASettingsGroup
+    title="Appearance"
+    description="Theme and motion preferences for this device."
+  >
+    <ASettingsRow
+      label="Theme"
+      description="Match your system, or always use light or dark."
+    >
+      <div class="flex items-center gap-1 rounded-(--ui-radius) bg-(--ui-bg-elevated) p-0.5">
+        <UButton
+          v-for="opt in THEME_OPTIONS"
+          :key="opt.value"
+          :icon="opt.icon"
+          :label="opt.label"
+          size="xs"
+          :color="theme === opt.value ? 'primary' : 'neutral'"
+          :variant="theme === opt.value ? 'soft' : 'ghost'"
+          @click="theme = opt.value"
+        />
+      </div>
+    </ASettingsRow>
+
+    <ASettingsRow
+      label="Reduced motion"
+      description="Minimise animations and transitions across the app."
+    >
+      <USwitch
+        :model-value="reduceMotion"
+        @update:model-value="setReduceMotion($event)"
+      />
+    </ASettingsRow>
+  </ASettingsGroup>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+/**
+ * <ASettingsGroup>
+ *
+ * A titled group of settings rows: optional title + description header above a
+ * column of <ASettingsRow>s. Shared building block — ported from cou-sh
+ * SettingsV2/Group.vue.
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+};
+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<{}>, {}, {}, {}, {}, 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/ASettingsGroup.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false }
+});
+</script>
+
+<template>
+  <section class="flex flex-col gap-3">
+    <header
+      v-if="title || description"
+      class="flex flex-col gap-1"
+    >
+      <h3
+        v-if="title"
+        class="text-base font-semibold text-(--ui-text-highlighted)"
+      >
+        {{ title }}
+      </h3>
+      <p
+        v-if="description"
+        class="text-sm text-(--ui-text-muted)"
+      >
+        {{ description }}
+      </p>
+    </header>
+    <div class="flex flex-col">
+      <slot />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,24 @@
+/**
+ * <ASettingsGroup>
+ *
+ * A titled group of settings rows: optional title + description header above a
+ * column of <ASettingsRow>s. Shared building block — ported from cou-sh
+ * SettingsV2/Group.vue.
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+};
+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<{}>, {}, {}, {}, {}, 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/ASettingsModal.vue

@@ -2,6 +2,13 @@
 import { ref, computed, watch } from "vue";
 import { useSettingsModal } from "../../composables/useSettingsModal";
 import { useAbracadabra } from "../../composables/useAbracadabra";
+import {
+  BUILTIN_SETTINGS_SECTIONS,
+  GROUP_LABELS,
+  GROUP_MODE,
+  searchSections,
+  visibleSections
+} from "./sections";
 const { isOpen, activeTab } = useSettingsModal();
 const abra = useAbracadabra();
 const effectiveRole = computed(() => abra.provider.value?.effectiveRole ?? null);
@@ -9,53 +16,56 @@ const isAdmin = computed(() => {
   const role = effectiveRole.value;
   return role === "admin" || role === "service";
 });
-const userLinks = [
-  { key: "profile", label: "Profile", icon: "i-lucide-user" },
-  { key: "security", label: "Security", icon: "i-lucide-shield" },
-  { key: "offline", label: "Offline", icon: "i-lucide-database" }
-];
-const adminLinks = computed(() => [
-  { key: "spaces", label: "Spaces", icon: "i-lucide-layers" },
-  { key: "members", label: "Members", icon: "i-lucide-users" },
-  { key: "connection", label: "Connection", icon: "i-lucide-wifi" },
-  { key: "trash", label: "Trash", icon: "i-lucide-trash-2" },
-  { key: "plugins", label: "Plugins", icon: "i-lucide-plug" },
-  ...isAdmin.value ? [
-    { key: "invites", label: "Invites", icon: "i-lucide-ticket" },
-    { key: "admin", label: "Admin", icon: "i-lucide-shield-alert" }
-  ] : []
-]);
+const search = ref("");
 const settingsMode = ref("user");
 const headerTabs = [
   { value: "user", label: "User Settings", icon: "i-lucide-user" },
   { value: "admin", label: "Administration", icon: "i-lucide-shield" }
 ];
-const currentLinks = computed(
-  () => settingsMode.value === "admin" ? adminLinks.value : userLinks
+const modeSections = computed(
+  () => visibleSections(BUILTIN_SETTINGS_SECTIONS, isAdmin.value).filter((s) => GROUP_MODE[s.group] === settingsMode.value)
 );
+const filteredSections = computed(() => searchSections(search.value, modeSections.value));
+const groupedSections = computed(() => {
+  const groups = [];
+  for (const section of filteredSections.value) {
+    let g = groups.find((x) => x.group === section.group);
+    if (!g) {
+      g = { group: section.group, label: GROUP_LABELS[section.group], items: [] };
+      groups.push(g);
+    }
+    g.items.push(section);
+  }
+  return groups;
+});
 const currentDescription = computed(
   () => settingsMode.value === "admin" ? "Manage spaces, members, and server settings." : "Personalize your profile, security, and preferences."
 );
-const selectedItem = computed(
-  () => currentLinks.value.find((l) => l.key === activeTab.value) ?? currentLinks.value[0]
+const selectedSection = computed(
+  () => modeSections.value.find((s) => s.key === activeTab.value) ?? modeSections.value[0]
 );
-function selectSection(item) {
-  activeTab.value = item.key;
+const activeComponent = computed(() => selectedSection.value?.component ?? null);
+function selectSection(section) {
+  activeTab.value = section.key;
 }
 const showMobileNav = ref(true);
-function selectMobile(item) {
-  selectSection(item);
+function selectMobile(section) {
+  selectSection(section);
   showMobileNav.value = false;
 }
 watch(isOpen, (val) => {
   if (val) {
     showMobileNav.value = true;
+    search.value = "";
+    const target = BUILTIN_SETTINGS_SECTIONS.find((s) => s.key === activeTab.value);
+    if (target) settingsMode.value = GROUP_MODE[target.group];
   }
 });
 watch(settingsMode, () => {
   showMobileNav.value = true;
-  const first = settingsMode.value === "admin" ? "spaces" : "profile";
-  activeTab.value = first;
+  search.value = "";
+  const first = modeSections.value[0];
+  if (first) activeTab.value = first.key;
 });
 </script>
 
@@ -112,28 +122,54 @@ watch(settingsMode, () => {
   showMobileNav ? 'w-full sm:w-52' : 'hidden sm:block sm:w-52'
 ]"
           >
-            <div class="p-4 pb-2">
-              <p class="text-xs text-(--ui-text-muted)">
+            <div class="p-3 pb-2 space-y-2">
+              <p class="text-xs text-(--ui-text-muted) px-1">
                 {{ currentDescription }}
               </p>
+              <UInput
+                v-model="search"
+                icon="i-lucide-search"
+                placeholder="Search settings…"
+                size="xs"
+                class="w-full"
+                :ui="{ root: 'w-full' }"
+              />
             </div>
 
-            <nav class="flex flex-col gap-0.5 p-2">
-              <button
-                v-for="item in currentLinks"
-                :key="item.key"
-                class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left w-full"
-                :class="[
-  selectedItem?.key === item.key ? 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted) font-medium' : 'text-(--ui-text-muted) hover:text-(--ui-text) hover:bg-(--ui-bg-elevated)/50'
+            <nav class="flex flex-col gap-2 p-2">
+              <div
+                v-for="grp in groupedSections"
+                :key="grp.group"
+                class="flex flex-col gap-0.5"
+              >
+                <p
+                  v-if="groupedSections.length > 1"
+                  class="px-3 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-(--ui-text-dimmed)"
+                >
+                  {{ grp.label }}
+                </p>
+                <button
+                  v-for="item in grp.items"
+                  :key="item.key"
+                  class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left w-full"
+                  :class="[
+  selectedSection?.key === item.key ? 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted) font-medium' : 'text-(--ui-text-muted) hover:text-(--ui-text) hover:bg-(--ui-bg-elevated)/50'
 ]"
-                @click="selectMobile(item)"
+                  @click="selectMobile(item)"
+                >
+                  <UIcon
+                    :name="item.icon"
+                    class="size-4 shrink-0"
+                  />
+                  <span class="truncate">{{ item.label }}</span>
+                </button>
+              </div>
+              <p
+                v-if="filteredSections.length === 0"
+                class="px-3 py-4 text-center text-xs text-(--ui-text-dimmed)"
               >
-                <UIcon
-                  :name="item.icon"
-                  class="size-4 shrink-0"
-                />
-                <span class="truncate">{{ item.label }}</span>
-              </button>
+                No matching settings.
+              </p>
             </nav>
           </div>
 
@@ -151,21 +187,16 @@ watch(settingsMode, () => {
                 size="xs"
                 @click="showMobileNav = true"
               />
-              <span class="text-sm font-medium truncate">{{ selectedItem?.label }}</span>
+              <span class="text-sm font-medium truncate">{{ selectedSection?.label }}</span>
             </div>
 
             <div class="p-4 sm:p-6 lg:p-8">
               <div class="flex flex-col gap-6 max-w-2xl mx-auto">
-                <ASettingsProfilePanel v-if="activeTab === 'profile'" />
-                <ASettingsConnectionPanel v-else-if="activeTab === 'connection'" />
-                <ASettingsSpacesPanel v-else-if="activeTab === 'spaces'" />
-                <ASettingsSecurityPanel v-else-if="activeTab === 'security'" />
-                <ASettingsInvitesPanel v-else-if="activeTab === 'invites'" />
-                <ASettingsMembersPanel v-else-if="activeTab === 'members'" />
-                <ASettingsTrashPanel v-else-if="activeTab === 'trash'" />
-                <ASettingsOfflinePanel v-else-if="activeTab === 'offline'" />
-                <ASettingsPluginsPanel v-else-if="activeTab === 'plugins'" />
-                <ASettingsAdminPanel v-else-if="activeTab === 'admin'" />
+                <component
+                  :is="activeComponent"
+                  v-if="activeComponent"
+                  :key="selectedSection?.key"
+                />
               </div>
             </div>
           </div>

package/dist/runtime/components/settings/ASettingsPlaceholder.d.vue.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/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>