@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/settings/settings-layout.d.ts

@@ -0,0 +1,78 @@
+import { type LucideIcon } from "lucide-react";
+import type * as React from "react";
+/**
+ * Settings layout vocabulary.
+ *
+ * Three primitives compose every settings section so the whole surface looks
+ * standardized and stays easy to scan + edit on a phone:
+ *
+ *  - {@link SettingsStack}  vertical rhythm wrapper for a section's groups
+ *  - {@link SettingsGroup}  a titled card of related rows (iOS-style grouped list)
+ *  - {@link SettingsRow}    one row: leading icon, label + description, trailing
+ *                           control — or a tappable navigation/action row
+ *
+ * Section authors should not hand-roll `flex flex-col gap-2 sm:flex-row`
+ * layouts anymore; reach for these instead.
+ */
+export declare function SettingsStack({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export interface SettingsGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Group heading shown above the card. */
+    title?: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Trailing control aligned with the title (e.g. an "Add" button). */
+    action?: React.ReactNode;
+    /** Helper / disclaimer rendered under the card. */
+    footer?: React.ReactNode;
+    /** Drop the card chrome and render children directly (custom content). */
+    bare?: boolean;
+    children?: React.ReactNode;
+}
+export declare function SettingsGroup({ title, description, action, footer, bare, className, children, ...props }: SettingsGroupProps): import("react/jsx-runtime").JSX.Element;
+type SettingsRowTone = "default" | "danger";
+export interface SettingsRowProps {
+    /** Leading icon rendered in a neutral medallion. */
+    icon?: LucideIcon;
+    iconClassName?: string;
+    /** Primary label. */
+    label: React.ReactNode;
+    /** Secondary description under the label. */
+    description?: React.ReactNode;
+    /**
+     * Trailing control kept inline with the label (Switch, small Select,
+     * Button). For wide controls (Input, Textarea, full Select) pass them as
+     * `children` with `stacked` instead.
+     */
+    control?: React.ReactNode;
+    /**
+     * Wide control area rendered full-width below the label block. Combine with
+     * `stacked` for inputs/textareas that need the whole row width on mobile.
+     */
+    children?: React.ReactNode;
+    /** Render `children` full-width under the label rather than inline. */
+    stacked?: boolean;
+    /** Makes the whole row a button (navigation / action). Adds a chevron. */
+    onClick?: () => void;
+    /** Ref forwarded to the underlying nav button (for agent-surface wiring). */
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Extra data-* attributes spread onto the nav button (agent-surface wiring).
+     * Typed as a data-attribute record since React's button props don't declare a
+     * `data-*` index signature.
+     */
+    buttonProps?: Record<`data-${string}`, string | undefined>;
+    /** Highlight the row as the currently-selected destination (nav rail). */
+    active?: boolean;
+    /** Override the trailing affordance (defaults to a chevron for nav rows). */
+    trailing?: React.ReactNode;
+    /** Force-show the chevron affordance. */
+    chevron?: boolean;
+    /** Associate the label with a control id (taps the label to focus it). */
+    htmlFor?: string;
+    tone?: SettingsRowTone;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function SettingsRow({ icon, iconClassName, label, description, control, children, stacked, onClick, buttonRef, buttonProps, active, trailing, chevron, htmlFor, tone, disabled, className, }: SettingsRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=settings-layout.d.ts.map

package/components/settings/settings-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA+BpB;AAED,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,oDAAoD;IACpD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,WAAW,EACX,MAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,2CA2DlB"}

package/components/settings/settings-layout.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+/**
+ * Settings layout vocabulary.
+ *
+ * Three primitives compose every settings section so the whole surface looks
+ * standardized and stays easy to scan + edit on a phone:
+ *
+ *  - {@link SettingsStack}  vertical rhythm wrapper for a section's groups
+ *  - {@link SettingsGroup}  a titled card of related rows (iOS-style grouped list)
+ *  - {@link SettingsRow}    one row: leading icon, label + description, trailing
+ *                           control — or a tappable navigation/action row
+ *
+ * Section authors should not hand-roll `flex flex-col gap-2 sm:flex-row`
+ * layouts anymore; reach for these instead.
+ */
+export function SettingsStack({ className, ...props }) {
+    return _jsx("div", { className: cn("flex flex-col gap-5", className), ...props });
+}
+export function SettingsGroup({ title, description, action, footer, bare = false, className, children, ...props }) {
+    const hasHeader = Boolean(title || description || action);
+    return (_jsxs("section", { className: cn("flex flex-col gap-2.5", className), ...props, children: [hasHeader ? (_jsxs("div", { className: "flex flex-col gap-2 px-1 sm:flex-row sm:items-end sm:justify-between sm:gap-3", children: [_jsxs("div", { className: "min-w-0", children: [title ? (_jsx("h3", { className: "text-sm font-medium text-txt-strong", children: title })) : null, description ? (_jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted/90", children: description })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] })) : null, bare ? (children) : (_jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg bg-card", children: children })), footer ? (_jsx("p", { className: "px-1 text-xs leading-relaxed text-muted/80", children: footer })) : null] }));
+}
+function SettingsRowBody({ icon: Icon, iconClassName, label, description, control, htmlFor, tone, trailing, chevron, }) {
+    const LabelTag = htmlFor ? "label" : "span";
+    return (_jsxs("div", { className: "flex w-full items-center gap-3", children: [Icon ? (_jsx("span", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface text-txt-strong ring-1 ring-border/70", tone === "danger" && "bg-warn/12 text-warn ring-warn/20", iconClassName), children: _jsx(Icon, { className: "h-[18px] w-[18px]", "aria-hidden": true }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(LabelTag, { ...(htmlFor ? { htmlFor } : {}), className: cn("text-sm font-medium leading-5 text-txt-strong", tone === "danger" && "text-warn", htmlFor && "cursor-pointer"), children: label }), description ? (_jsx("span", { className: "text-xs leading-relaxed text-muted", children: description })) : null] }), control ? _jsx("span", { className: "shrink-0", children: control }) : null, trailing ??
+                (chevron ? (_jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted/70", "aria-hidden": true })) : null)] }));
+}
+export function SettingsRow({ icon, iconClassName, label, description, control, children, stacked = false, onClick, buttonRef, buttonProps, active = false, trailing, chevron, htmlFor, tone = "default", disabled = false, className, }) {
+    const padding = "px-4 py-3";
+    if (onClick) {
+        return (_jsx("button", { ref: buttonRef, type: "button", onClick: onClick, disabled: disabled, "aria-current": active ? "true" : undefined, className: cn("group flex w-full min-h-[3.25rem] items-center text-left transition-colors", "hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/40", active && "bg-accent/10 hover:bg-accent/12", disabled && "cursor-not-allowed opacity-50", padding, className), ...buttonProps, children: _jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: control, tone: tone, trailing: trailing, chevron: chevron ?? true }) }));
+    }
+    return (_jsxs("div", { className: cn("flex min-h-[3.25rem] flex-col justify-center", padding, className), children: [_jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: stacked ? undefined : control, htmlFor: htmlFor, tone: tone, trailing: trailing, chevron: chevron }), children ? (_jsx("div", { className: cn(stacked ? "mt-3" : "mt-2"), children: children })) : null] }));
+}

package/components/settings/settings-section-meta.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Canonical metadata for the built-in settings sections: id, English label, and
+ * top-level group. Pure data (no React, no icons) so non-renderer consumers —
+ * notably app-core's `dev-route-catalog` parity test — can import it and assert
+ * the QA catalog never drifts from the UI without pulling the renderer graph.
+ *
+ * The React registry (`settings-sections.ts`) reads this list and attaches the
+ * icon, medallion hue, and section component per id. This is the single source
+ * of truth for built-in section ids, labels, and grouping.
+ */
+export type SettingsSectionGroup = "agent" | "system" | "security";
+export interface SettingsSectionMeta {
+    /** Stable id — also the URL hash and agent-surface address. */
+    id: string;
+    /** English display label (the i18n default value). */
+    defaultLabel: string;
+    group: SettingsSectionGroup;
+}
+export declare const SETTINGS_GROUP_ORDER: SettingsSectionGroup[];
+export declare const SETTINGS_GROUP_LABEL: Record<SettingsSectionGroup, string>;
+/**
+ * Display order is array order, bucketed by group. Keep new built-ins grouped
+ * with their peers so the nav reads top-to-bottom the way it renders.
+ */
+export declare const SETTINGS_SECTION_META: SettingsSectionMeta[];
+//# sourceMappingURL=settings-section-meta.d.ts.map

package/components/settings/settings-section-meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-section-meta.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-section-meta.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,oBAAoB,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,EAAE,oBAAoB,EAItD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIrE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,mBAAmB,EAiBtD,CAAC"}

package/components/settings/settings-section-meta.js

@@ -0,0 +1,42 @@
+/**
+ * Canonical metadata for the built-in settings sections: id, English label, and
+ * top-level group. Pure data (no React, no icons) so non-renderer consumers —
+ * notably app-core's `dev-route-catalog` parity test — can import it and assert
+ * the QA catalog never drifts from the UI without pulling the renderer graph.
+ *
+ * The React registry (`settings-sections.ts`) reads this list and attaches the
+ * icon, medallion hue, and section component per id. This is the single source
+ * of truth for built-in section ids, labels, and grouping.
+ */
+export const SETTINGS_GROUP_ORDER = [
+    "agent",
+    "system",
+    "security",
+];
+export const SETTINGS_GROUP_LABEL = {
+    agent: "Agent",
+    system: "System",
+    security: "Security",
+};
+/**
+ * Display order is array order, bucketed by group. Keep new built-ins grouped
+ * with their peers so the nav reads top-to-bottom the way it renders.
+ */
+export const SETTINGS_SECTION_META = [
+    { id: "identity", defaultLabel: "Basics", group: "agent" },
+    { id: "ai-model", defaultLabel: "Models & Providers", group: "agent" },
+    { id: "voice", defaultLabel: "Voice", group: "agent" },
+    { id: "capabilities", defaultLabel: "Capabilities", group: "agent" },
+    { id: "apps", defaultLabel: "Apps", group: "agent" },
+    { id: "connectors", defaultLabel: "Connectors", group: "agent" },
+    { id: "runtime", defaultLabel: "Runtime", group: "system" },
+    { id: "appearance", defaultLabel: "Appearance", group: "system" },
+    { id: "remote-plugins", defaultLabel: "Remote Plugins", group: "system" },
+    { id: "wallet-rpc", defaultLabel: "Wallet & RPC", group: "system" },
+    { id: "updates", defaultLabel: "Updates", group: "system" },
+    { id: "advanced", defaultLabel: "Backup & Reset", group: "system" },
+    { id: "app-permissions", defaultLabel: "App Permissions", group: "security" },
+    { id: "permissions", defaultLabel: "Permissions", group: "security" },
+    { id: "secrets", defaultLabel: "Vault", group: "security" },
+    { id: "security", defaultLabel: "Security", group: "security" },
+];

package/components/settings/settings-section-registry.d.ts

@@ -0,0 +1,55 @@
+import type { LucideIcon } from "lucide-react";
+import type { ComponentType } from "react";
+import type { SettingsSectionGroup } from "./settings-section-meta";
+/**
+ * Pluggable settings-section registry.
+ *
+ * Built-in sections (`settings-sections.ts`) and host apps / plugins both
+ * contribute through {@link registerSettingsSection}; the Settings view renders
+ * whatever {@link listSettingsSections} returns. The store is keyed on a global
+ * symbol — mirroring `app-shell-registry` — so every bundle in the process
+ * shares one registry even across module-identity splits.
+ *
+ * This is what makes settings modular: an app adds a section with one
+ * `registerSettingsSection(...)` call at boot, no edits to the view.
+ */
+export type SettingsSectionTone = "ok" | "warn" | "muted" | "accent" | "neutral";
+/** Curated, token-safe medallion tints for the section icons. No blue. */
+export type SettingsSectionHue = "accent" | "amber" | "rose" | "slate";
+export interface SettingsSectionDef {
+    /** Stable id — URL hash + agent-surface address. */
+    id: string;
+    /** i18n key for the nav label. */
+    label: string;
+    /** English fallback for {@link label}. */
+    defaultLabel: string;
+    icon: LucideIcon;
+    tone: SettingsSectionTone;
+    hue: SettingsSectionHue;
+    /** i18n key for the section header (defaults to {@link label}). */
+    titleKey: string;
+    /** English fallback for {@link titleKey}. */
+    defaultTitle: string;
+    /**
+     * Top-level group. The three built-in groups are {@link SettingsSectionGroup}
+     * (`agent | system | security`); a host may also use a custom group id (e.g.
+     * `"cloud"`) registered via the extra-group registry so the Settings view can
+     * render it. Kept as a widened string so dynamic groups don't require editing
+     * the pinned meta list.
+     */
+    group: SettingsSectionGroup | (string & {});
+    /** Sort priority within a group (lower first). Built-ins use list order. */
+    order?: number;
+    /** Padding override for the section body panel. */
+    bodyClassName?: string;
+    Component: ComponentType;
+}
+/**
+ * Register (or replace) a settings section. Later registration with the same id
+ * wins, so a host app can override a built-in section by re-registering its id.
+ */
+export declare function registerSettingsSection(section: SettingsSectionDef): void;
+/** All registered sections, sorted by `order` then registration sequence. */
+export declare function listSettingsSections(): SettingsSectionDef[];
+export declare function getSettingsSection(id: string): SettingsSectionDef | undefined;
+//# sourceMappingURL=settings-section-registry.d.ts.map

package/components/settings/settings-section-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-section-registry.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-section-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,0EAA0E;AAC1E,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,aAAa,CAAC;CAC1B;AA0BD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAKzE;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,IAAI,kBAAkB,EAAE,CAI3D;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,SAAS,CAE7E"}

package/components/settings/settings-section-registry.js

@@ -0,0 +1,33 @@
+function registryKey() {
+    return Symbol.for("elizaos.ui.settings-section-registry");
+}
+function getStore() {
+    const globalObject = globalThis;
+    const key = registryKey();
+    const existing = globalObject[key];
+    if (existing)
+        return existing;
+    const created = {
+        entries: new Map(),
+        seq: 0,
+    };
+    globalObject[key] = created;
+    return created;
+}
+/**
+ * Register (or replace) a settings section. Later registration with the same id
+ * wins, so a host app can override a built-in section by re-registering its id.
+ */
+export function registerSettingsSection(section) {
+    const store = getStore();
+    const order = section.order ?? store.seq;
+    store.seq += 1;
+    store.entries.set(section.id, { ...section, order });
+}
+/** All registered sections, sorted by `order` then registration sequence. */
+export function listSettingsSections() {
+    return [...getStore().entries.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+export function getSettingsSection(id) {
+    return getStore().entries.get(id);
+}

package/components/settings/settings-section-tokens.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Lightweight settings-section token map — no React/component imports, so the
+ * always-mounted chat composer can resolve `/settings <section>` without
+ * pulling in the heavy section component graph from `settings-sections.ts`.
+ *
+ * Keep the canonical ids in sync with `SETTINGS_SECTION_META` in
+ * `settings-section-meta.ts` (validated by a test).
+ */
+/**
+ * Friendly tokens a user can type to jump to a settings section, e.g.
+ * `/settings model`. Maps each token to a canonical settings section id.
+ */
+export declare const SETTINGS_SECTION_TOKEN_ALIASES: Record<string, string>;
+/** Suggestion tokens (deduped) offered for `/settings <section>` completion. */
+export declare const SETTINGS_SECTION_SUGGESTIONS: string[];
+/** Resolve a user-typed settings token to a canonical section id, if known. */
+export declare function resolveSettingsSectionToken(token: string): string | undefined;
+//# sourceMappingURL=settings-section-tokens.d.ts.map

package/components/settings/settings-section-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-section-tokens.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-section-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwCjE,CAAC;AAOF,gFAAgF;AAChF,eAAO,MAAM,4BAA4B,EAAE,MAAM,EAEhD,CAAC;AAEF,+EAA+E;AAC/E,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7E"}

package/components/settings/settings-section-tokens.js

@@ -0,0 +1,66 @@
+/**
+ * Lightweight settings-section token map — no React/component imports, so the
+ * always-mounted chat composer can resolve `/settings <section>` without
+ * pulling in the heavy section component graph from `settings-sections.ts`.
+ *
+ * Keep the canonical ids in sync with `SETTINGS_SECTION_META` in
+ * `settings-section-meta.ts` (validated by a test).
+ */
+/**
+ * Friendly tokens a user can type to jump to a settings section, e.g.
+ * `/settings model`. Maps each token to a canonical settings section id.
+ */
+export const SETTINGS_SECTION_TOKEN_ALIASES = {
+    basics: "identity",
+    identity: "identity",
+    profile: "identity",
+    model: "ai-model",
+    models: "ai-model",
+    provider: "ai-model",
+    providers: "ai-model",
+    ai: "ai-model",
+    cloud: "ai-model",
+    runtime: "runtime",
+    appearance: "appearance",
+    theme: "appearance",
+    look: "appearance",
+    voice: "voice",
+    tts: "voice",
+    speech: "voice",
+    capabilities: "capabilities",
+    abilities: "capabilities",
+    apps: "apps",
+    views: "apps",
+    "remote-plugins": "remote-plugins",
+    remote: "remote-plugins",
+    connectors: "connectors",
+    connections: "connectors",
+    integrations: "connectors",
+    "app-permissions": "app-permissions",
+    wallet: "wallet-rpc",
+    rpc: "wallet-rpc",
+    "wallet-rpc": "wallet-rpc",
+    permissions: "permissions",
+    perms: "permissions",
+    secrets: "secrets",
+    vault: "secrets",
+    keys: "secrets",
+    security: "security",
+    updates: "updates",
+    update: "updates",
+    advanced: "advanced",
+    "fine-tuning": "advanced",
+};
+/** The canonical section ids reachable via a token (derived from the map). */
+const CANONICAL_SECTION_IDS = new Set(Object.values(SETTINGS_SECTION_TOKEN_ALIASES));
+/** Suggestion tokens (deduped) offered for `/settings <section>` completion. */
+export const SETTINGS_SECTION_SUGGESTIONS = Array.from(new Set(Object.keys(SETTINGS_SECTION_TOKEN_ALIASES)));
+/** Resolve a user-typed settings token to a canonical section id, if known. */
+export function resolveSettingsSectionToken(token) {
+    const normalized = token.trim().toLowerCase();
+    if (!normalized)
+        return undefined;
+    if (CANONICAL_SECTION_IDS.has(normalized))
+        return normalized;
+    return SETTINGS_SECTION_TOKEN_ALIASES[normalized];
+}

package/components/settings/settings-sections.d.ts

@@ -0,0 +1,21 @@
+import { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, type SettingsSectionGroup } from "./settings-section-meta";
+import { type SettingsSectionDef, type SettingsSectionHue, type SettingsSectionTone } from "./settings-section-registry";
+export { getSettingsSection, listSettingsSections, registerSettingsSection, } from "./settings-section-registry";
+export type { SettingsSectionDef, SettingsSectionGroup, SettingsSectionHue, SettingsSectionTone, };
+export { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER };
+export declare const SECTION_TONE_ICON_CLASS: Record<SettingsSectionTone, string>;
+/**
+ * Medallion styling per hue. All colors resolve from theme tokens (orange
+ * accent + neutrals) so light and dark themes both work, and there is no blue.
+ */
+export declare const SECTION_HUE_MEDALLION_CLASS: Record<SettingsSectionHue, string>;
+/** Built-in sections, in display order, derived from the canonical meta list. */
+export declare const SETTINGS_SECTIONS: SettingsSectionDef[];
+/** Every section the Settings view should render — built-ins plus any added by
+ *  a host app / plugin through {@link registerSettingsSection}. */
+export declare function getAllSettingsSections(): SettingsSectionDef[];
+export declare function settingsSectionLabel(section: SettingsSectionDef, t: (key: string, vars?: Record<string, unknown>) => string): string;
+export declare function settingsSectionTitle(section: SettingsSectionDef, t: (key: string, vars?: Record<string, unknown>) => string): string;
+export declare function readSettingsHashSection(): string | null;
+export declare function replaceSettingsHash(sectionId: string): void;
+//# sourceMappingURL=settings-sections.d.ts.map

package/components/settings/settings-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-sections.ts"],"names":[],"mappings":"AAoCA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAMvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK1E,CAAC;AAqIF,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAoB9C,CAAC;AAsBL;mEACmE;AACnE,wBAAgB,sBAAsB,IAAI,kBAAkB,EAAE,CAE7D;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAK3D"}

package/components/settings/settings-sections.js

@@ -0,0 +1,227 @@
+import { Archive, Bot, Brain, KeyRound, LayoutGrid, Lock, Mic, Palette, Puzzle, RefreshCw, Server, Shield, ShieldCheck, SlidersHorizontal, User, Wallet, Webhook, } from "lucide-react";
+import { ReleaseCenterView } from "../pages/ReleaseCenterView.js";
+import { AdvancedSection } from "./AdvancedSection.js";
+import { AppearanceSettingsSection } from "./AppearanceSettingsSection.js";
+import { AppPermissionsSection } from "./AppPermissionsSection.js";
+import { AppsManagementSection } from "./AppsManagementSection.js";
+import { CapabilitiesSection } from "./CapabilitiesSection.js";
+import { CloudAgentsSection } from "./CloudAgentsSection.js";
+import { ConnectorsSection } from "./ConnectorsSection.js";
+import { IdentitySettingsSection } from "./IdentitySettingsSection.js";
+import { PermissionsSection } from "./PermissionsSection.js";
+import { ProviderSwitcher } from "./ProviderSwitcher.js";
+import { RemotePluginHostSection } from "./RemotePluginHostSection.js";
+import { RuntimeSettingsSection } from "./RuntimeSettingsSection.js";
+import { SecretsManagerSection } from "./SecretsManagerSection.js";
+import { SecuritySettingsSection } from "./SecuritySettingsSection.js";
+import { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, SETTINGS_SECTION_META, } from "./settings-section-meta.js";
+import { listSettingsSections, registerSettingsSection, } from "./settings-section-registry.js";
+import { VoiceSectionMount } from "./VoiceSectionMount.js";
+import { WalletRpcSection } from "./WalletRpcSection.js";
+export { getSettingsSection, listSettingsSections, registerSettingsSection, } from "./settings-section-registry.js";
+export { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER };
+export const SECTION_TONE_ICON_CLASS = {
+    ok: "text-ok",
+    warn: "text-warn",
+    muted: "text-muted",
+    accent: "text-accent",
+    neutral: "",
+};
+/**
+ * Medallion styling per hue. All colors resolve from theme tokens (orange
+ * accent + neutrals) so light and dark themes both work, and there is no blue.
+ */
+export const SECTION_HUE_MEDALLION_CLASS = {
+    accent: "bg-accent/12 text-accent ring-1 ring-accent/20",
+    amber: "bg-warn/12 text-warn ring-1 ring-warn/20",
+    rose: "bg-[color-mix(in_oklab,var(--accent)_14%,var(--surface))] text-accent ring-1 ring-accent/15",
+    slate: "bg-surface text-txt-strong ring-1 ring-border",
+};
+const SECTION_VISUALS = {
+    identity: {
+        icon: User,
+        tone: "neutral",
+        hue: "slate",
+        labelKey: "settings.sections.identity.label",
+        Component: IdentitySettingsSection,
+    },
+    "ai-model": {
+        icon: Brain,
+        tone: "accent",
+        hue: "accent",
+        labelKey: "settings.sections.aimodel.label",
+        Component: ProviderSwitcher,
+    },
+    voice: {
+        icon: Mic,
+        tone: "accent",
+        hue: "accent",
+        labelKey: "settings.sections.voice.label",
+        Component: VoiceSectionMount,
+    },
+    capabilities: {
+        icon: SlidersHorizontal,
+        tone: "accent",
+        hue: "accent",
+        labelKey: "settings.sections.capabilities.label",
+        titleKey: "common.capabilities",
+        Component: CapabilitiesSection,
+    },
+    apps: {
+        icon: LayoutGrid,
+        tone: "accent",
+        hue: "accent",
+        labelKey: "settings.sections.apps.label",
+        Component: AppsManagementSection,
+    },
+    connectors: {
+        icon: Webhook,
+        tone: "accent",
+        hue: "accent",
+        labelKey: "settings.sections.connectors.label",
+        Component: ConnectorsSection,
+    },
+    runtime: {
+        icon: Server,
+        tone: "neutral",
+        hue: "slate",
+        labelKey: "settings.sections.runtime.label",
+        Component: RuntimeSettingsSection,
+    },
+    appearance: {
+        icon: Palette,
+        tone: "neutral",
+        hue: "rose",
+        labelKey: "settings.sections.appearance.label",
+        Component: AppearanceSettingsSection,
+    },
+    "remote-plugins": {
+        icon: Puzzle,
+        tone: "accent",
+        hue: "rose",
+        labelKey: "settings.sections.remote-plugins.label",
+        Component: RemotePluginHostSection,
+    },
+    "wallet-rpc": {
+        icon: Wallet,
+        tone: "neutral",
+        hue: "slate",
+        labelKey: "settings.sections.walletrpc.label",
+        bodyClassName: "p-4 sm:p-5",
+        Component: WalletRpcSection,
+    },
+    updates: {
+        icon: RefreshCw,
+        tone: "neutral",
+        hue: "slate",
+        labelKey: "settings.sections.updates.label",
+        Component: ReleaseCenterView,
+    },
+    advanced: {
+        icon: Archive,
+        tone: "neutral",
+        hue: "slate",
+        labelKey: "settings.sections.backupReset.label",
+        Component: AdvancedSection,
+    },
+    "app-permissions": {
+        icon: ShieldCheck,
+        tone: "warn",
+        hue: "amber",
+        labelKey: "settings.sections.apppermissions.label",
+        Component: AppPermissionsSection,
+    },
+    permissions: {
+        icon: Shield,
+        tone: "warn",
+        hue: "amber",
+        labelKey: "settings.sections.permissions.label",
+        titleKey: "common.permissions",
+        Component: PermissionsSection,
+    },
+    secrets: {
+        icon: KeyRound,
+        tone: "warn",
+        hue: "amber",
+        labelKey: "settings.sections.secrets.label",
+        Component: SecretsManagerSection,
+    },
+    security: {
+        icon: Lock,
+        tone: "warn",
+        hue: "amber",
+        labelKey: "settings.sections.security.label",
+        Component: SecuritySettingsSection,
+    },
+};
+/** Built-in sections, in display order, derived from the canonical meta list. */
+export const SETTINGS_SECTIONS = SETTINGS_SECTION_META.map((meta, index) => {
+    const visual = SECTION_VISUALS[meta.id];
+    if (!visual) {
+        throw new Error(`Missing settings-section visuals for "${meta.id}"`);
+    }
+    return {
+        id: meta.id,
+        label: visual.labelKey,
+        defaultLabel: meta.defaultLabel,
+        icon: visual.icon,
+        tone: visual.tone,
+        hue: visual.hue,
+        group: meta.group,
+        titleKey: visual.titleKey ?? visual.labelKey,
+        defaultTitle: meta.defaultLabel,
+        bodyClassName: visual.bodyClassName,
+        order: index,
+        Component: visual.Component,
+    };
+});
+for (const section of SETTINGS_SECTIONS)
+    registerSettingsSection(section);
+// Eliza Cloud agent manager — contributed through the pluggable registry rather
+// than the canonical META list, so it surfaces in Settings (list / switch /
+// create+name / delete agents) without changing the built-in section count that
+// the dev-route-catalog test pins. Ordered right after the AI Model section.
+registerSettingsSection({
+    id: "cloud-agents",
+    label: "settings.sections.cloudAgents.label",
+    defaultLabel: "Agents",
+    icon: Bot,
+    tone: "accent",
+    hue: "accent",
+    group: "agent",
+    titleKey: "settings.sections.cloudAgents.title",
+    defaultTitle: "Eliza Cloud Agents",
+    order: 1.5,
+    Component: CloudAgentsSection,
+});
+/** Every section the Settings view should render — built-ins plus any added by
+ *  a host app / plugin through {@link registerSettingsSection}. */
+export function getAllSettingsSections() {
+    return listSettingsSections();
+}
+export function settingsSectionLabel(section, t) {
+    return t(section.label, { defaultValue: section.defaultLabel });
+}
+export function settingsSectionTitle(section, t) {
+    return t(section.titleKey, { defaultValue: section.defaultTitle });
+}
+export function readSettingsHashSection() {
+    if (typeof window === "undefined")
+        return null;
+    const hash = window.location.hash.replace(/^#/, "");
+    if (!hash)
+        return null;
+    if (hash === "cloud" || hash === "providers")
+        return "ai-model";
+    return getAllSettingsSections().some((section) => section.id === hash)
+        ? hash
+        : null;
+}
+export function replaceSettingsHash(sectionId) {
+    if (typeof window === "undefined")
+        return;
+    const nextHash = `#${sectionId}`;
+    if (window.location.hash === nextHash)
+        return;
+    window.history.replaceState(null, "", nextHash);
+}