@ojiepermana/angular 22.1.10 → 22.1.12

package/fesm2022/ojiepermana-angular-theme-component-settings.mjs

@@ -1,7 +1,1391 @@
-export * from '@ojiepermana/angular-theme/component/settings';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, signal, effect, Service, computed, Component, model, input } from '@angular/core';
+import { DrawerCloseDirective, DrawerComponent, DrawerContentComponent, DrawerHeaderComponent, DrawerTitleComponent } from '@ojiepermana/angular/component/drawer';
+import { IconComponent } from '@ojiepermana/angular/component/icon';
+import { SegmentedControlComponent } from '@ojiepermana/angular/component/segmented-control';
+import { globalLocalStorage, injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
+import { LAYOUT_TYPE_STORAGE_KEY, LAYOUT_LOCKED_WIDTH } from '@ojiepermana/angular/theme/layout/types';
+import { ShellService } from '@ojiepermana/angular/theme/shell/services';
+import { isPlatformBrowser } from '@angular/common';
+import { LayoutService } from '@ojiepermana/angular/theme/layout/services';
+import { resolveShellDeviceForMode, shellDevicesForMode, SHELL_MODES, isShellDeviceForMode, SHELL_FRAMES, SHELL_COLORS } from '@ojiepermana/angular/theme/shell/types';
+import { ThemeModeService, ThemeColorService, ThemeBrandService, ThemeRadiusService, ThemeSpaceService, THEME_COLORS, THEME_NEUTRALS, isThemeMode, isThemeRadius, isThemeSpace } from '@ojiepermana/angular/theme/styles';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** Provide this from an application's persisted layout-settings facade. */
+const THEME_SETTINGS_ADAPTER = new InjectionToken('THEME_SETTINGS_ADAPTER');
+
+/** Storage key for the persisted navigation type. Owned by the package. */
+const NAV_TYPE_STORAGE_KEY = 'nav-type';
+/** Storage key for the persisted navigation presentation mode. Owned by the package. */
+const NAV_TYPE_MODE_STORAGE_KEY = 'nav-type-mode';
+const NAV_TYPES = [
+    'sidebar',
+    'dockbar',
+    'navbar',
+    'flyout',
+    'desktop',
+];
+const NAV_TYPE_MODES = ['default', 'collapsed', 'drawer'];
+/**
+ * Nav types valid for a layout/shell pair — mirrors `LayoutWrapperDefault`
+ * (`navbar`/`flyout` → web horizontal, `sidebar`/`dockbar` → vertical).
+ * A desktop-mode horizontal shell owns exactly one navigation shape: `desktop`.
+ * `empty` and `fluid` shells are brand-only, so no nav type applies.
+ */
+function allowedNavTypes$1(layoutType, shellMode) {
+    switch (layoutType) {
+        case 'vertical':
+            return ['sidebar', 'dockbar'];
+        case 'horizontal':
+            return shellMode === 'desktop' ? ['desktop'] : ['navbar', 'flyout'];
+        default:
+            return [];
+    }
+}
+/**
+ * Presentation modes meaningful to a navigation type: sidebar collapses, dockbar
+ * turns into a drawer, and every other type has one presentation only.
+ */
+function allowedNavTypeModes(navType) {
+    switch (navType) {
+        case 'sidebar':
+            return ['default', 'collapsed'];
+        case 'dockbar':
+            return ['default', 'drawer'];
+        default:
+            return ['default'];
+    }
+}
+/** `fluid` width only has an effect when the layout type is also `fluid`. */
+function isWidthEnabled(layoutType, width) {
+    return width !== 'fluid' || layoutType === 'fluid';
+}
+/**
+ * Default `ThemeSettingsAdapter`: the axis coherence rules that make runtime
+ * layout and navigation switching safe, published so every consumer shares one
+ * tested implementation instead of copying it.
+ *
+ * - `surface` / `appearance` / `width` delegate to the library `LayoutService`
+ *   (already reactive and persisted, with no nav-derived override to drift from).
+ * - `layoutType` / `navType` / `navTypeMode` are owned here: `<Layout>` writes
+ *   `type` back to the service (`persist: false`) to follow nav orientation, so
+ *   reading `layout.type()` would drift from the operator's choice. Nav type is
+ *   not `LayoutService` territory at all.
+ *
+ * Incoherent axis pairs auto-correct, so the shell never renders an impossible
+ * state. Only presentation choices are stored, never identity or session data,
+ * and storage that is unavailable or holds a foreign value falls back to the
+ * default without throwing.
+ *
+ * Install with {@link provideThemeSettingsAdapter}.
+ */
+class ThemeSettingsDefaultAdapter {
+    platformId = inject(PLATFORM_ID);
+    storage = globalLocalStorage(isPlatformBrowser(this.platformId));
+    layout = inject(LayoutService);
+    shell = inject(ShellService);
+    surface = this.layout.surface;
+    appearance = this.layout.appearance;
+    width = this.layout.width;
+    layoutTypeState = signal(this.layout.getStoredType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutTypeState" }] : /* istanbul ignore next */ []));
+    navTypeState = signal(this.readStoredNavType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navTypeState" }] : /* istanbul ignore next */ []));
+    navTypeModeState = signal(this.readStoredNavTypeMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navTypeModeState" }] : /* istanbul ignore next */ []));
+    layoutType = this.layoutTypeState.asReadonly();
+    navType = this.navTypeState.asReadonly();
+    navTypeMode = this.navTypeModeState.asReadonly();
+    /** Shell mode the nav-type constraints are resolved against. */
+    shellMode = this.shell.mode;
+    constructor() {
+        // Keep external shell-mode changes coherent too: desktop+horizontal owns
+        // exactly `desktop`, while that nav type cannot survive another shell mode.
+        effect(() => this.enforceConstraints(this.layoutTypeState(), this.shell.mode()));
+    }
+    setSurface(surface) {
+        this.layout.setSurface(surface);
+    }
+    setAppearance(appearance) {
+        this.layout.setAppearance(appearance);
+    }
+    setWidth(width) {
+        this.layout.setWidth(width);
+    }
+    setLayoutType(type) {
+        this.layoutTypeState.set(type);
+        this.storage.write(LAYOUT_TYPE_STORAGE_KEY, type);
+        this.enforceConstraints(type, this.shell.mode());
+    }
+    setNavType(type) {
+        if (!allowedNavTypes$1(this.layoutTypeState(), this.shell.mode()).includes(type)) {
+            return;
+        }
+        this.navTypeState.set(type);
+        this.storage.write(NAV_TYPE_STORAGE_KEY, type);
+        this.enforceNavTypeMode();
+    }
+    setNavTypeMode(mode) {
+        if (!allowedNavTypeModes(this.navTypeState()).includes(mode)) {
+            return;
+        }
+        this.navTypeModeState.set(mode);
+        this.storage.write(NAV_TYPE_MODE_STORAGE_KEY, mode);
+    }
+    /**
+     * Auto-correct the lower-priority axes a layout type invalidates, so the
+     * rendered shell never lands in an inconsistent state (e.g. `vertical` +
+     * `navbar`). Idempotent — only writes when a value is actually out of range.
+     */
+    enforceConstraints(type, shellMode) {
+        const navs = allowedNavTypes$1(type, shellMode);
+        if (navs.length && !navs.includes(this.navTypeState())) {
+            this.setNavType(navs[0]);
+        }
+        this.enforceNavTypeMode();
+        if (type === 'fluid' && this.width() !== 'fluid') {
+            this.setWidth('fluid');
+        }
+        else if (type !== 'fluid' && this.width() === 'fluid') {
+            this.setWidth('wide');
+        }
+    }
+    enforceNavTypeMode() {
+        const available = allowedNavTypeModes(this.navTypeState());
+        if (!available.includes(this.navTypeModeState())) {
+            this.setNavTypeMode(available[0]);
+        }
+    }
+    readStoredNavType() {
+        const stored = this.storage.read(NAV_TYPE_STORAGE_KEY);
+        return stored && NAV_TYPES.includes(stored)
+            ? stored
+            : 'dockbar';
+    }
+    readStoredNavTypeMode() {
+        const stored = this.storage.read(NAV_TYPE_MODE_STORAGE_KEY);
+        return stored && NAV_TYPE_MODES.includes(stored)
+            ? stored
+            : 'default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+/**
+ * Install the published {@link ThemeSettingsDefaultAdapter} on
+ * `THEME_SETTINGS_ADAPTER`, which turns on the layout and navigation sections of
+ * `<ThemeSettings>`:
+ *
+ * ```ts
+ * providers: [provideThemeSettingsAdapter()];
+ * ```
+ *
+ * Additive: consumers that provide their own adapter, or none at all, are
+ * unaffected.
+ */
+function provideThemeSettingsAdapter() {
+    return [{ provide: THEME_SETTINGS_ADAPTER, useExisting: ThemeSettingsDefaultAdapter }];
+}
+
+/**
+ * The one rule the settings sections share.
+ *
+ * Two of the four sections change something that can invalidate the navigation
+ * type: the layout section (layout type) and the shell section (shell mode). Both
+ * have to run the same correction, and before the split they called one private
+ * method. Pure functions here, so neither section owns it and neither can drift.
+ */
+/** Nav types the active layout and shell pair allows. Empty without an adapter. */
+function allowedNavTypes(adapter, shellMode) {
+    const layoutType = adapter?.layoutType();
+    return layoutType ? allowedNavTypes$1(layoutType, shellMode) : [];
+}
+/**
+ * Correct a navigation type the new layout or shell pair no longer allows.
+ * Idempotent, and a no-op without an adapter.
+ */
+function normalizeNavType(adapter, shellMode) {
+    const current = adapter?.navType();
+    const allowed = allowedNavTypes(adapter, shellMode);
+    if (current && allowed.length && !allowed.includes(current)) {
+        adapter?.setNavType(allowed[0]);
+    }
+}
+
+/*
+ * Option tables and swatch palettes for `ThemeSettings`.
+ *
+ * Pure data, extracted from the component so the drawer stays inside the
+ * 700-line source-unit budget (scripts/check-library-boundaries.mjs) as axes are
+ * added. Each option list is the full domain of one axis; the component decides
+ * which entries are `disabled` in the current combination.
+ */
+const DEFAULT_BRAND_COLOR = '262 83% 58%';
+const DEFAULT_BRAND_HSL = [262, 83, 58];
+const MODE_OPTIONS = [
+    { value: 'light', label: 'Light', icon: 'light_mode' },
+    { value: 'dark', label: 'Dark', icon: 'dark_mode' },
+    { value: 'system', label: 'System', icon: 'desktop_windows' },
+];
+/**
+ * Shell delivery targets (`@ojiepermana/angular/theme/shell`). Everything but
+ * `web` owns its whole surface, which is what locks the layout width to `full`.
+ */
+const SHELL_MODE_OPTIONS = [
+    { value: 'web', label: 'Web', icon: 'public' },
+    { value: 'desktop', label: 'Desktop', icon: 'desktop_windows' },
+    { value: 'tablet', label: 'Tablet', icon: 'tablet' },
+    { value: 'mobile', label: 'Mobile', icon: 'smartphone' },
+];
+/**
+ * Where the shell's own chrome takes its colors from. `sync` follows the theme
+ * axes above; `default` paints the active device's native titlebar instead.
+ */
+const SHELL_COLOR_OPTIONS = [
+    { value: 'sync', label: 'Sync', icon: 'palette' },
+    { value: 'default', label: 'Native', icon: 'desktop_mac' },
+];
+/**
+ * How the app sits in its window. `modern` insets it as a panel and fuses the
+ * titlebar with the surround; only a desktop window has a frame to shape.
+ */
+const SHELL_FRAME_OPTIONS = [
+    { value: 'classic', label: 'Classic', icon: 'crop_din' },
+    { value: 'modern', label: 'Modern', icon: 'fullscreen_exit' },
+];
+/**
+ * Host devices, keyed so the drawer can offer only the ones the active shell mode
+ * can actually run on (`SHELL_MODE_DEVICES`) — with `web` that is a single entry,
+ * so a flat 7-option control would be mostly disabled noise.
+ */
+const SHELL_DEVICE_OPTIONS = {
+    browser: { value: 'browser', label: 'Browser', icon: 'language' },
+    macos: { value: 'macos', label: 'macOS', icon: 'laptop_mac' },
+    windows: { value: 'windows', label: 'Windows', icon: 'laptop_windows' },
+    linux: { value: 'linux', label: 'Linux', icon: 'terminal' },
+    ipad: { value: 'ipad', label: 'iPad', icon: 'tablet_mac' },
+    android: { value: 'android', label: 'Android', icon: 'android' },
+    ios: { value: 'ios', label: 'iOS', icon: 'phone_iphone' },
+};
+/** Corner radius axis; each preset carries Tailwind's stock value for its name. */
+const RADIUS_OPTIONS = [
+    { value: 'none', label: 'None', icon: 'crop_square' },
+    { value: 'xs', label: 'Xs', icon: 'rounded_corner' },
+    { value: 'sm', label: 'Sm', icon: 'rounded_corner' },
+    { value: 'md', label: 'Md', icon: 'rounded_corner' },
+    { value: 'xl', label: 'Xl', icon: 'rounded_corner' },
+    { value: 'full', label: 'Full', icon: 'circle' },
+];
+const SPACE_OPTIONS = [
+    { value: 'compact', label: 'Compact', icon: 'density_small' },
+    { value: 'normal', label: 'Normal', icon: 'density_medium' },
+];
+const APPEARANCE_OPTIONS = [
+    { value: 'flat', label: 'Flat', icon: 'web_asset' },
+    { value: 'border-rail', label: 'Border rail', icon: 'border_outer' },
+];
+const SURFACE_OPTIONS = [
+    { value: 'flat', label: 'Flat', icon: 'format_color_reset' },
+    { value: 'grid', label: 'Grid', icon: 'grid_4x4' },
+    { value: 'grid-line', label: 'Grid line', icon: 'grid_view' },
+    { value: 'honeycomb', label: 'Honeycomb', icon: 'hexagon' },
+    { value: 'matrix', label: 'Matrix', icon: 'data_object' },
+    { value: 'circuit', label: 'Circuit', icon: 'memory' },
+    { value: 'line-vertical', label: 'Vertical lines', icon: 'view_column' },
+    { value: 'line-horizontal', label: 'Horizontal lines', icon: 'view_agenda' },
+];
+const LAYOUT_TYPE_OPTIONS = [
+    { value: 'vertical', label: 'Vertical', icon: 'view_sidebar' },
+    { value: 'horizontal', label: 'Horizontal', icon: 'view_stream' },
+    { value: 'empty', label: 'Empty', icon: 'crop_free' },
+    { value: 'fluid', label: 'Fluid', icon: 'fit_screen' },
+];
+const WIDTH_OPTIONS = [
+    { value: 'full', label: 'Full', icon: 'width_full' },
+    { value: 'wide', label: 'Wide', icon: 'width_wide' },
+    { value: 'container', label: 'Container', icon: 'width_normal' },
+    { value: 'fluid', label: 'Fluid', icon: 'aspect_ratio' },
+];
+const NAV_TYPE_OPTIONS = [
+    { value: 'sidebar', label: 'Sidebar', icon: 'left_panel_open' },
+    { value: 'dockbar', label: 'Dockbar', icon: 'dock_to_left' },
+    { value: 'navbar', label: 'Navbar', icon: 'menu' },
+    { value: 'flyout', label: 'Flyout', icon: 'open_in_new' },
+    { value: 'desktop', label: 'Desktop', icon: 'desktop_windows' },
+];
+const ACCENT_SWATCH = {
+    base: 'hsl(240 6% 10%)',
+    red: 'hsl(0 72% 48%)',
+    orange: 'hsl(24 95% 48%)',
+    amber: 'hsl(38 92% 48%)',
+    yellow: 'hsl(48 96% 48%)',
+    lime: 'hsl(84 78% 44%)',
+    green: 'hsl(142 69% 40%)',
+    emerald: 'hsl(160 78% 38%)',
+    teal: 'hsl(173 75% 38%)',
+    cyan: 'hsl(191 85% 40%)',
+    sky: 'hsl(199 89% 46%)',
+    blue: 'hsl(221 83% 53%)',
+    indigo: 'hsl(239 78% 60%)',
+    violet: 'hsl(258 86% 62%)',
+    purple: 'hsl(271 81% 56%)',
+    fuchsia: 'hsl(292 80% 56%)',
+    pink: 'hsl(330 78% 54%)',
+    rose: 'hsl(349 84% 52%)',
+    brand: 'hsl(var(--brand))',
+};
+const NEUTRAL_SWATCH = {
+    base: 'hsl(220 9% 46%)',
+    slate: 'hsl(215 16% 47%)',
+    gray: 'hsl(220 9% 46%)',
+    zinc: 'hsl(240 5% 46%)',
+    neutral: 'hsl(0 0% 46%)',
+    stone: 'hsl(30 6% 46%)',
+    mauve: 'hsl(280 6% 47%)',
+    olive: 'hsl(80 8% 42%)',
+    mist: 'hsl(200 14% 50%)',
+    taupe: 'hsl(28 10% 46%)',
+};
+
+/**
+ * The Layout section of `ThemeSettings`: appearance, surface, layout type, width.
+ * Internal, see the Theme section for why.
+ *
+ * The adapter is injected NON-optionally: the parent only renders this section
+ * when an adapter is present, which is what lets a theme-only consumer use
+ * `ThemeSettings` with just the Theme and Shell sections.
+ */
+class ThemeSettingsLayoutSectionComponent {
+    shell = inject(ShellService);
+    settings = inject(THEME_SETTINGS_ADAPTER);
+    shellMode = this.shell.mode;
+    /** Every mode but `web` owns its surface, which is what locks the width axis. */
+    widthLocked = computed(() => this.shellMode() !== 'web', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthLocked" }] : /* istanbul ignore next */ []));
+    appearanceOptions = APPEARANCE_OPTIONS;
+    surfaceOptions = SURFACE_OPTIONS;
+    layoutTypeOptions = LAYOUT_TYPE_OPTIONS;
+    widthOptions = computed(() => WIDTH_OPTIONS.map((option) => ({
+        ...option,
+        disabled: 
+        // The shell mode lock leaves exactly one legal width; `fluid` additionally
+        // needs the fluid layout type to mean anything.
+        (this.widthLocked() && option.value !== LAYOUT_LOCKED_WIDTH) ||
+            (option.value === 'fluid' && this.settings.layoutType() !== 'fluid'),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthOptions" }] : /* istanbul ignore next */ []));
+    layoutGroupId = injectUniqueId('theme-settings-layout');
+    appearanceLabelId = injectUniqueId('theme-settings-appearance');
+    surfaceLabelId = injectUniqueId('theme-settings-surface');
+    layoutTypeLabelId = injectUniqueId('theme-settings-layout-type');
+    widthLabelId = injectUniqueId('theme-settings-width');
+    setAppearance(value) {
+        if (value === 'flat' || value === 'border-rail')
+            this.settings.setAppearance(value);
+    }
+    setSurface(value) {
+        if (SURFACE_OPTIONS.some((option) => option.value === value))
+            this.settings.setSurface(value);
+    }
+    setLayoutType(value) {
+        if (LAYOUT_TYPE_OPTIONS.some((option) => option.value === value)) {
+            this.settings.setLayoutType(value);
+            normalizeNavType(this.settings, this.shellMode());
+        }
+    }
+    setWidth(value) {
+        // Refuse the change rather than record a preference the lock would hide.
+        if (this.widthLocked())
+            return;
+        if (WIDTH_OPTIONS.some((option) => option.value === value))
+            this.settings.setWidth(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsLayoutSectionComponent, isStandalone: true, selector: "ThemeSettingsLayoutSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="layoutGroupId"
+    >
+      <h2 [id]="layoutGroupId" class="nav-heading text-foreground">Layout</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="appearanceLabelId" class="nav-heading text-muted-foreground">
+          Layout appearance
+        </h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.appearance()"
+          [options]="appearanceOptions"
+          [aria-labelledby]="appearanceLabelId"
+          (valueChange)="setAppearance($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="surfaceLabelId" class="nav-heading text-muted-foreground">Layout surface</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.surface()"
+          [options]="surfaceOptions"
+          [aria-labelledby]="surfaceLabelId"
+          (valueChange)="setSurface($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="layoutTypeLabelId" class="nav-heading text-muted-foreground">Layout type</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.layoutType()"
+          [options]="layoutTypeOptions"
+          [aria-labelledby]="layoutTypeLabelId"
+          (valueChange)="setLayoutType($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="widthLabelId" class="nav-heading text-muted-foreground">Layout width</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.width()"
+          [options]="widthOptions()"
+          [aria-labelledby]="widthLabelId"
+          (valueChange)="setWidth($event)"
+        />
+        @if (widthLocked()) {
+          <p class="text-xs text-muted-foreground" aria-live="polite">
+            Locked to full on {{ shellMode() }}: the app is the whole surface, so there is no page
+            to inset the frame within.
+          </p>
+        }
+      </div>
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsLayoutSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ThemeSettingsLayoutSection',
+                    imports: [SegmentedControlComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="layoutGroupId"
+    >
+      <h2 [id]="layoutGroupId" class="nav-heading text-foreground">Layout</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="appearanceLabelId" class="nav-heading text-muted-foreground">
+          Layout appearance
+        </h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.appearance()"
+          [options]="appearanceOptions"
+          [aria-labelledby]="appearanceLabelId"
+          (valueChange)="setAppearance($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="surfaceLabelId" class="nav-heading text-muted-foreground">Layout surface</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.surface()"
+          [options]="surfaceOptions"
+          [aria-labelledby]="surfaceLabelId"
+          (valueChange)="setSurface($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="layoutTypeLabelId" class="nav-heading text-muted-foreground">Layout type</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.layoutType()"
+          [options]="layoutTypeOptions"
+          [aria-labelledby]="layoutTypeLabelId"
+          (valueChange)="setLayoutType($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="widthLabelId" class="nav-heading text-muted-foreground">Layout width</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.width()"
+          [options]="widthOptions()"
+          [aria-labelledby]="widthLabelId"
+          (valueChange)="setWidth($event)"
+        />
+        @if (widthLocked()) {
+          <p class="text-xs text-muted-foreground" aria-live="polite">
+            Locked to full on {{ shellMode() }}: the app is the whole surface, so there is no page
+            to inset the frame within.
+          </p>
+        }
+      </div>
+    </section>
+  `,
+                }]
+        }] });
+
+/**
+ * The Navigation section of `ThemeSettings`: navigation type and its mode.
+ * Internal, see the Theme section for why.
+ */
+class ThemeSettingsNavigationSectionComponent {
+    shell = inject(ShellService);
+    settings = inject(THEME_SETTINGS_ADAPTER);
+    navTypeOptions = computed(() => NAV_TYPE_OPTIONS.map((option) => ({
+        ...option,
+        disabled: !allowedNavTypes(this.settings, this.shell.mode()).includes(option.value),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navTypeOptions" }] : /* istanbul ignore next */ []));
+    // Mirrors `allowedNavTypeModes` in the default adapter, which decides which of
+    // these the adapter will actually accept; here they also carry their labels,
+    // and dockbar names its default "Sticky".
+    navTypeModeOptions = computed(() => {
+        switch (this.settings.navType()) {
+            case 'sidebar':
+                return [
+                    { value: 'default', label: 'Default', icon: 'view_sidebar' },
+                    { value: 'collapsed', label: 'Collapsed', icon: 'first_page' },
+                ];
+            case 'dockbar':
+                return [
+                    { value: 'default', label: 'Sticky', icon: 'dock_to_left' },
+                    { value: 'drawer', label: 'Drawer', icon: 'side_navigation' },
+                ];
+            default:
+                return [{ value: 'default', label: 'Default', icon: 'tune' }];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navTypeModeOptions" }] : /* istanbul ignore next */ []));
+    navigationGroupId = injectUniqueId('theme-settings-navigation');
+    navTypeLabelId = injectUniqueId('theme-settings-nav-type');
+    navTypeModeLabelId = injectUniqueId('theme-settings-nav-type-mode');
+    setNavType(value) {
+        if (value &&
+            allowedNavTypes(this.settings, this.shell.mode()).includes(value)) {
+            this.settings.setNavType(value);
+        }
+    }
+    setNavTypeMode(value) {
+        if (value === 'default' || value === 'collapsed' || value === 'drawer')
+            this.settings.setNavTypeMode(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: ThemeSettingsNavigationSectionComponent, isStandalone: true, selector: "ThemeSettingsNavigationSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="navigationGroupId"
+    >
+      <h2 [id]="navigationGroupId" class="nav-heading text-foreground">Navigation</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="navTypeLabelId" class="nav-heading text-muted-foreground">Nav type</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.navType()"
+          [options]="navTypeOptions()"
+          [aria-labelledby]="navTypeLabelId"
+          (valueChange)="setNavType($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="navTypeModeLabelId" class="nav-heading text-muted-foreground">Nav type mode</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.navTypeMode()"
+          [options]="navTypeModeOptions()"
+          [aria-labelledby]="navTypeModeLabelId"
+          (valueChange)="setNavTypeMode($event)"
+        />
+      </div>
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsNavigationSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ThemeSettingsNavigationSection',
+                    imports: [SegmentedControlComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="navigationGroupId"
+    >
+      <h2 [id]="navigationGroupId" class="nav-heading text-foreground">Navigation</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="navTypeLabelId" class="nav-heading text-muted-foreground">Nav type</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.navType()"
+          [options]="navTypeOptions()"
+          [aria-labelledby]="navTypeLabelId"
+          (valueChange)="setNavType($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="navTypeModeLabelId" class="nav-heading text-muted-foreground">Nav type mode</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="settings.navTypeMode()"
+          [options]="navTypeModeOptions()"
+          [aria-labelledby]="navTypeModeLabelId"
+          (valueChange)="setNavTypeMode($event)"
+        />
+      </div>
+    </section>
+  `,
+                }]
+        }] });
+
+/**
+ * The Shell section of `ThemeSettings`: delivery mode, device, frame, chrome
+ * colour. Internal, see the Theme section for why.
+ *
+ * It injects the adapter optionally because a theme-only consumer has none, and
+ * it only needs it to run the shared navigation-type correction after a mode
+ * change.
+ */
+class ThemeSettingsShellSectionComponent {
+    shell = inject(ShellService);
+    settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
+    shellMode = this.shell.mode;
+    shellColor = this.shell.color;
+    shellFrame = this.shell.frame;
+    /** Only a desktop window has a frame to shape, so `modern` is offered only there. */
+    shellFrameOptions = computed(() => SHELL_FRAME_OPTIONS.map((option) => ({
+        ...option,
+        disabled: option.value === 'modern' && this.shellMode() !== 'desktop',
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellFrameOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The device actually in effect: `ShellService.device()` is a preference that may
+     * belong to another form factor (it deliberately survives a temporary mode change),
+     * so the control shows the value `<Shell>` would render for the active mode.
+     */
+    shellDevice = computed(() => resolveShellDeviceForMode(this.shellMode(), this.shell.device()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellDevice" }] : /* istanbul ignore next */ []));
+    shellDeviceOptions = computed(() => shellDevicesForMode(this.shellMode()).map((device) => SHELL_DEVICE_OPTIONS[device]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellDeviceOptions" }] : /* istanbul ignore next */ []));
+    shellModeOptions = SHELL_MODE_OPTIONS;
+    shellColorOptions = SHELL_COLOR_OPTIONS;
+    shellGroupId = injectUniqueId('theme-settings-shell');
+    shellModeLabelId = injectUniqueId('theme-settings-shell-mode');
+    shellDeviceLabelId = injectUniqueId('theme-settings-shell-device');
+    shellColorLabelId = injectUniqueId('theme-settings-shell-color');
+    shellFrameLabelId = injectUniqueId('theme-settings-shell-frame');
+    setShellMode(value) {
+        if (SHELL_MODES.includes(value)) {
+            this.shell.setMode(value);
+            normalizeNavType(this.settings, this.shellMode());
+        }
+    }
+    setShellDevice(value) {
+        // Guard on the active mode, not just the union: a device from another form
+        // factor would be corrected away on render anyway.
+        if (value && isShellDeviceForMode(this.shellMode(), value)) {
+            this.shell.setDevice(value);
+        }
+    }
+    setShellFrame(value) {
+        // Refuse `modern` off desktop rather than store a preference the shell would
+        // coerce away on render.
+        if (value === 'modern' && this.shellMode() !== 'desktop')
+            return;
+        if (SHELL_FRAMES.includes(value))
+            this.shell.setFrame(value);
+    }
+    setShellColor(value) {
+        if (SHELL_COLORS.includes(value))
+            this.shell.setColor(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsShellSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsShellSectionComponent, isStandalone: true, selector: "ThemeSettingsShellSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="shellGroupId"
+    >
+      <h2 [id]="shellGroupId" class="nav-heading text-foreground">Shell</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellModeLabelId" class="nav-heading text-muted-foreground">Shell mode</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellMode()"
+          [options]="shellModeOptions"
+          [aria-labelledby]="shellModeLabelId"
+          (valueChange)="setShellMode($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Where the app is delivered. Only <code>web</code> is a page inside a browser; the others
+          own the whole surface, so the layout width locks to full.
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellDeviceLabelId" class="nav-heading text-muted-foreground">Shell device</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellDevice()"
+          [options]="shellDeviceOptions()"
+          [aria-labelledby]="shellDeviceLabelId"
+          (valueChange)="setShellDevice($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Which host the shell runs on. Only the devices the active mode can host are offered —
+          <code>android</code> ships on both tablet and mobile, so only the mode tells those apart.
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellFrameLabelId" class="nav-heading text-muted-foreground">Shell frame</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellFrame()"
+          [options]="shellFrameOptions()"
+          [aria-labelledby]="shellFrameLabelId"
+          (valueChange)="setShellFrame($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          @if (shellMode() === 'desktop') {
+            <code>modern</code> insets the app as a panel and fuses the titlebar with the surround
+            into one frame; <code>classic</code> keeps it flush under a bordered bar.
+          } @else {
+            Only a desktop window has a frame to shape, so this stays
+            <code>classic</code> on {{ shellMode() }}.
+          }
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellColorLabelId" class="nav-heading text-muted-foreground">Shell color</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellColor()"
+          [options]="shellColorOptions"
+          [aria-labelledby]="shellColorLabelId"
+          (valueChange)="setShellColor($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Whether the desktop titlebar follows the theme axes above, or paints the active device's
+          own native chrome.
+        </p>
+      </div>
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsShellSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ThemeSettingsShellSection',
+                    imports: [SegmentedControlComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <section
+      class="flex flex-col gap-5 border-t border-border pt-7"
+      [attr.aria-labelledby]="shellGroupId"
+    >
+      <h2 [id]="shellGroupId" class="nav-heading text-foreground">Shell</h2>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellModeLabelId" class="nav-heading text-muted-foreground">Shell mode</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellMode()"
+          [options]="shellModeOptions"
+          [aria-labelledby]="shellModeLabelId"
+          (valueChange)="setShellMode($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Where the app is delivered. Only <code>web</code> is a page inside a browser; the others
+          own the whole surface, so the layout width locks to full.
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellDeviceLabelId" class="nav-heading text-muted-foreground">Shell device</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellDevice()"
+          [options]="shellDeviceOptions()"
+          [aria-labelledby]="shellDeviceLabelId"
+          (valueChange)="setShellDevice($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Which host the shell runs on. Only the devices the active mode can host are offered —
+          <code>android</code> ships on both tablet and mobile, so only the mode tells those apart.
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellFrameLabelId" class="nav-heading text-muted-foreground">Shell frame</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellFrame()"
+          [options]="shellFrameOptions()"
+          [aria-labelledby]="shellFrameLabelId"
+          (valueChange)="setShellFrame($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          @if (shellMode() === 'desktop') {
+            <code>modern</code> insets the app as a panel and fuses the titlebar with the surround
+            into one frame; <code>classic</code> keeps it flush under a bordered bar.
+          } @else {
+            Only a desktop window has a frame to shape, so this stays
+            <code>classic</code> on {{ shellMode() }}.
+          }
+        </p>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="shellColorLabelId" class="nav-heading text-muted-foreground">Shell color</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="shellColor()"
+          [options]="shellColorOptions"
+          [aria-labelledby]="shellColorLabelId"
+          (valueChange)="setShellColor($event)"
+        />
+        <p class="text-xs text-muted-foreground">
+          Whether the desktop titlebar follows the theme axes above, or paints the active device's
+          own native chrome.
+        </p>
+      </div>
+    </section>
+  `,
+                }]
+        }] });
+
+/*
+ * Brand-color math for `ThemeSettings`.
+ *
+ * The drawer's brand picker is a native `<input type="color">`, which speaks hex,
+ * while the design system's tokens are HSL triplets (`H S% L%`). These pure
+ * conversions bridge the two, plus pick a readable foreground for a chosen brand.
+ *
+ * Extracted from the component so the drawer stays inside the 700-line source-unit
+ * budget (scripts/check-library-boundaries.mjs) as shell axes are added.
+ */
+function hslToHex(color) {
+    const match = /^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/.exec(color);
+    const [hue, saturation, lightness] = match
+        ? [Number(match[1]), Number(match[2]), Number(match[3])]
+        : DEFAULT_BRAND_HSL;
+    const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
+    const segment = hue / 60;
+    const x = chroma * (1 - Math.abs((segment % 2) - 1));
+    const matchLightness = lightness / 100 - chroma / 2;
+    const [red, green, blue] = segment < 1
+        ? [chroma, x, 0]
+        : segment < 2
+            ? [x, chroma, 0]
+            : segment < 3
+                ? [0, chroma, x]
+                : segment < 4
+                    ? [0, x, chroma]
+                    : segment < 5
+                        ? [x, 0, chroma]
+                        : [chroma, 0, x];
+    const channel = (value) => Math.round((value + matchLightness) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${channel(red)}${channel(green)}${channel(blue)}`;
+}
+function hexToHsl(color) {
+    const match = /^#([0-9a-f]{6})$/i.exec(color);
+    if (!match)
+        return null;
+    const hex = match[1];
+    const [red, green, blue] = [0, 2, 4].map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255);
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const delta = max - min;
+    const lightness = (max + min) / 2;
+    let hue = 0;
+    if (delta !== 0)
+        hue =
+            max === red
+                ? 60 * (((green - blue) / delta) % 6)
+                : max === green
+                    ? 60 * ((blue - red) / delta + 2)
+                    : 60 * ((red - green) / delta + 4);
+    if (hue < 0)
+        hue += 360;
+    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+    return `${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
+}
+function brandForeground(color) {
+    const match = /^#([0-9a-f]{6})$/i.exec(color);
+    if (!match)
+        return '0 0% 100%';
+    const channels = [0, 2, 4].map((index) => Number.parseInt(match[1].slice(index, index + 2), 16));
+    const linear = (channel) => {
+        const value = channel / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    };
+    const luminance = linear(channels[0]) * 0.2126 + linear(channels[1]) * 0.7152 + linear(channels[2]) * 0.0722;
+    return luminance > 0.179 ? '0 0% 0%' : '0 0% 100%';
+}
+
+/**
+ * The Theme section of `ThemeSettings`: mode, brand, accent, neutral, space,
+ * radius.
+ *
+ * Internal. Not exported from the entry point: it exists so `ThemeSettings`
+ * stays under the 700-line source guard and so each axis group can be read on
+ * its own. Every dependency arrives by injection, so the parent composes it with
+ * no inputs and no outputs.
+ *
+ * `class: 'contents'` keeps the host out of the layout: the parent's flex column
+ * spaces the `<section>` inside, and a custom element defaults to `display:
+ * inline`, which would break that spacing.
+ */
+class ThemeSettingsThemeSectionComponent {
+    themeMode = inject(ThemeModeService);
+    themeColor = inject(ThemeColorService);
+    themeBrand = inject(ThemeBrandService);
+    themeRadius = inject(ThemeRadiusService);
+    themeSpace = inject(ThemeSpaceService);
+    mode = this.themeMode.mode;
+    resolvedMode = this.themeMode.resolvedMode;
+    color = this.themeColor.color;
+    neutralColor = this.themeColor.neutral;
+    brand = this.themeBrand.brand;
+    brandHex = computed(() => hslToHex(this.brand()?.color ?? DEFAULT_BRAND_COLOR), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandHex" }] : /* istanbul ignore next */ []));
+    radius = this.themeRadius.radius;
+    space = this.themeSpace.space;
+    accents = THEME_COLORS;
+    neutrals = THEME_NEUTRALS;
+    accentSwatch = ACCENT_SWATCH;
+    neutralSwatch = NEUTRAL_SWATCH;
+    modeOptions = MODE_OPTIONS;
+    radiusOptions = RADIUS_OPTIONS;
+    spaceOptions = SPACE_OPTIONS;
+    themeGroupId = injectUniqueId('theme-settings-theme');
+    modeLabelId = injectUniqueId('theme-settings-mode');
+    brandLabelId = injectUniqueId('theme-settings-brand');
+    accentLabelId = injectUniqueId('theme-settings-accent');
+    neutralLabelId = injectUniqueId('theme-settings-neutral');
+    spaceLabelId = injectUniqueId('theme-settings-space');
+    radiusLabelId = injectUniqueId('theme-settings-radius');
+    swatchClasses(active) {
+        return cn('inline-flex size-[18px] rounded-full ring-1 ring-black/10 transition-[transform,box-shadow] duration-200 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background motion-reduce:transition-none', active
+            ? 'ring-2 ring-ring ring-offset-2 ring-offset-background shadow-sm'
+            : 'hover:scale-105');
+    }
+    setMode(value) {
+        if (isThemeMode(value))
+            this.themeMode.setMode(value);
+    }
+    setColor(value) {
+        this.themeColor.setColor(value);
+    }
+    setNeutral(value) {
+        this.themeColor.setNeutral(value);
+    }
+    setRadius(value) {
+        if (isThemeRadius(value))
+            this.themeRadius.setRadius(value);
+    }
+    setSpace(value) {
+        if (isThemeSpace(value))
+            this.themeSpace.setSpace(value);
+    }
+    setBrandFromPicker(event) {
+        if (!(event.target instanceof HTMLInputElement))
+            return;
+        const color = event.target.value;
+        const hsl = hexToHsl(color);
+        if (!hsl)
+            return;
+        this.themeBrand.setBrand(hsl, brandForeground(color));
+        this.themeColor.setColor('brand');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsThemeSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsThemeSectionComponent, isStandalone: true, selector: "ThemeSettingsThemeSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <section class="flex flex-col gap-5" [attr.aria-labelledby]="themeGroupId">
+      <h2 [id]="themeGroupId" class="nav-heading text-foreground">Theme</h2>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-baseline justify-between gap-3">
+          <h3 [id]="modeLabelId" class="nav-heading text-muted-foreground">Theme mode</h3>
+          <span class="text-xs text-muted-foreground">{{ resolvedMode() }}</span>
+        </div>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="mode()"
+          [options]="modeOptions"
+          [aria-labelledby]="modeLabelId"
+          (valueChange)="setMode($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="brandLabelId" class="nav-heading text-muted-foreground">Theme brand</h3>
+        <input
+          type="color"
+          class="size-10 cursor-pointer appearance-none overflow-hidden rounded-full border border-border bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&::-moz-color-swatch]:rounded-full [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full"
+          [value]="brandHex()"
+          [attr.aria-labelledby]="brandLabelId"
+          (input)="setBrandFromPicker($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="accentLabelId" class="nav-heading text-muted-foreground">Theme color</h3>
+        <fieldset class="grid grid-cols-5 gap-2 sm:grid-cols-6">
+          <legend class="sr-only">Choose theme color</legend>
+          @for (accent of accents; track accent) {
+            <label class="inline-flex size-10 cursor-pointer items-center justify-center"
+              ><input
+                class="peer sr-only"
+                type="radio"
+                name="theme-settings-accent"
+                [value]="accent"
+                [checked]="color() === accent"
+                (change)="setColor(accent)"
+              /><span
+                [class]="swatchClasses(color() === accent)"
+                [style.background]="accentSwatch[accent]"
+                ><span class="sr-only">{{ accent }}</span></span
+              ></label
+            >
+          }
+        </fieldset>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="neutralLabelId" class="nav-heading text-muted-foreground">Theme neutral</h3>
+        <fieldset class="grid grid-cols-5 gap-2 sm:grid-cols-6">
+          <legend class="sr-only">Choose theme neutral</legend>
+          @for (neutral of neutrals; track neutral) {
+            <label class="inline-flex size-10 cursor-pointer items-center justify-center"
+              ><input
+                class="peer sr-only"
+                type="radio"
+                name="theme-settings-neutral"
+                [value]="neutral"
+                [checked]="neutralColor() === neutral"
+                (change)="setNeutral(neutral)"
+              /><span
+                [class]="swatchClasses(neutralColor() === neutral)"
+                [style.background]="neutralSwatch[neutral]"
+                ><span class="sr-only">{{ neutral }}</span></span
+              ></label
+            >
+          }
+        </fieldset>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="spaceLabelId" class="nav-heading text-muted-foreground">Theme space</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="space()"
+          [options]="spaceOptions"
+          [aria-labelledby]="spaceLabelId"
+          (valueChange)="setSpace($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="radiusLabelId" class="nav-heading text-muted-foreground">Theme radius</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="radius()"
+          [options]="radiusOptions"
+          [aria-labelledby]="radiusLabelId"
+          (valueChange)="setRadius($event)"
+        />
+      </div>
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsThemeSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ThemeSettingsThemeSection',
+                    imports: [SegmentedControlComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <section class="flex flex-col gap-5" [attr.aria-labelledby]="themeGroupId">
+      <h2 [id]="themeGroupId" class="nav-heading text-foreground">Theme</h2>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-baseline justify-between gap-3">
+          <h3 [id]="modeLabelId" class="nav-heading text-muted-foreground">Theme mode</h3>
+          <span class="text-xs text-muted-foreground">{{ resolvedMode() }}</span>
+        </div>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="mode()"
+          [options]="modeOptions"
+          [aria-labelledby]="modeLabelId"
+          (valueChange)="setMode($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="brandLabelId" class="nav-heading text-muted-foreground">Theme brand</h3>
+        <input
+          type="color"
+          class="size-10 cursor-pointer appearance-none overflow-hidden rounded-full border border-border bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&::-moz-color-swatch]:rounded-full [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full"
+          [value]="brandHex()"
+          [attr.aria-labelledby]="brandLabelId"
+          (input)="setBrandFromPicker($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="accentLabelId" class="nav-heading text-muted-foreground">Theme color</h3>
+        <fieldset class="grid grid-cols-5 gap-2 sm:grid-cols-6">
+          <legend class="sr-only">Choose theme color</legend>
+          @for (accent of accents; track accent) {
+            <label class="inline-flex size-10 cursor-pointer items-center justify-center"
+              ><input
+                class="peer sr-only"
+                type="radio"
+                name="theme-settings-accent"
+                [value]="accent"
+                [checked]="color() === accent"
+                (change)="setColor(accent)"
+              /><span
+                [class]="swatchClasses(color() === accent)"
+                [style.background]="accentSwatch[accent]"
+                ><span class="sr-only">{{ accent }}</span></span
+              ></label
+            >
+          }
+        </fieldset>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="neutralLabelId" class="nav-heading text-muted-foreground">Theme neutral</h3>
+        <fieldset class="grid grid-cols-5 gap-2 sm:grid-cols-6">
+          <legend class="sr-only">Choose theme neutral</legend>
+          @for (neutral of neutrals; track neutral) {
+            <label class="inline-flex size-10 cursor-pointer items-center justify-center"
+              ><input
+                class="peer sr-only"
+                type="radio"
+                name="theme-settings-neutral"
+                [value]="neutral"
+                [checked]="neutralColor() === neutral"
+                (change)="setNeutral(neutral)"
+              /><span
+                [class]="swatchClasses(neutralColor() === neutral)"
+                [style.background]="neutralSwatch[neutral]"
+                ><span class="sr-only">{{ neutral }}</span></span
+              ></label
+            >
+          }
+        </fieldset>
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="spaceLabelId" class="nav-heading text-muted-foreground">Theme space</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="space()"
+          [options]="spaceOptions"
+          [aria-labelledby]="spaceLabelId"
+          (valueChange)="setSpace($event)"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <h3 [id]="radiusLabelId" class="nav-heading text-muted-foreground">Theme radius</h3>
+        <SegmentedControl
+          appearance="icon-text"
+          space="compact"
+          [value]="radius()"
+          [options]="radiusOptions"
+          [aria-labelledby]="radiusLabelId"
+          (valueChange)="setRadius($event)"
+        />
+      </div>
+    </section>
+  `,
+                }]
+        }] });
+
+/** A navigation-aligned, right-side inspector for runtime theme and shell settings. */
+class ThemeSettingsComponent {
+    /**
+     * Present only when the app provided an adapter. It is a render gate here: the
+     * Layout and Navigation sections inject the token non-optionally, so a
+     * theme-only consumer simply gets the Theme and Shell sections.
+     */
+    settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    trigger = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    triggerLabel = input('Theme settings', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    triggerIconOnly = input(false, { ...(ngDevMode ? { debugName: "triggerIconOnly" } : /* istanbul ignore next */ {}), alias: 'trigger-icon-only' });
+    showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), alias: 'show-trigger' });
+    side = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    triggerClasses = computed(() => cn('inline-flex items-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none', this.trigger() === 'link'
+        ? this.triggerIconOnly()
+            ? 'size-11 p-0 text-primary underline-offset-4 hover:underline'
+            : 'min-h-11 px-1 text-primary underline-offset-4 hover:underline'
+        : this.triggerIconOnly()
+            ? 'size-11 justify-center p-0 text-muted-foreground hover:bg-accent hover:text-foreground'
+            : 'min-h-11 justify-center px-3 text-muted-foreground hover:bg-accent hover:text-accent-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsComponent, isStandalone: true, selector: "ThemeSettings", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "trigger-icon-only", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "show-trigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (showTrigger()) {
+      <button
+        type="button"
+        [class]="triggerClasses()"
+        [attr.aria-label]="triggerIconOnly() ? triggerLabel() : null"
+        [attr.title]="triggerIconOnly() ? triggerLabel() : null"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        (click)="open.set(true)"
+      >
+        <Icon name="palette" [size]="18" />
+        @if (triggerIconOnly()) {
+          <span class="sr-only">{{ triggerLabel() }}</span>
+        } @else {
+          <span>{{ triggerLabel() }}</span>
+        }
+      </button>
+    }
+
+    @if (open()) {
+      <Drawer
+        [(open)]="open"
+        [side]="side()"
+        [showCloseButton]="false"
+        class="ThemeSettings w-full max-w-md gap-0! p-0! sm:w-100"
+      >
+        <DrawerHeader
+          class="flex h-(--layout-topbar-height) shrink-0 flex-row items-center gap-3 border-b border-border bg-background px-3 text-left"
+        >
+          <span
+            aria-hidden="true"
+            class="grid size-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary ring-1 ring-primary/20"
+            ><Icon name="palette" [size]="18"
+          /></span>
+          <div class="min-w-0 flex-1">
+            <DrawerTitle>Theme settings</DrawerTitle>
+          </div>
+          <button
+            type="button"
+            DrawerClose
+            class="inline-flex h-8 shrink-0 items-center rounded-md bg-primary px-2 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none"
+          >
+            Done
+          </button>
+        </DrawerHeader>
+
+        <DrawerContent class="min-h-0 px-4 py-5 sm:px-5">
+          <div class="flex flex-col gap-8">
+            <ThemeSettingsThemeSection />
+            <ThemeSettingsShellSection />
+            @if (settings) {
+              <ThemeSettingsLayoutSection />
+              <ThemeSettingsNavigationSection />
+            }
+          </div>
+        </DrawerContent>
+      </Drawer>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: DrawerCloseDirective, selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]" }, { kind: "component", type: DrawerComponent, selector: "Sheet, Drawer", inputs: ["open", "side", "variant", "closeOnEscape", "closeOnBackdropClick", "backdrop", "showCloseButton", "closeButtonLabel", "restoreFocus", "aria-labelledby", "aria-describedby", "role", "class"], outputs: ["openChange", "openedChange"] }, { kind: "component", type: DrawerContentComponent, selector: "SheetContent, DrawerContent", inputs: ["class"] }, { kind: "component", type: DrawerHeaderComponent, selector: "SheetHeader, DrawerHeader", inputs: ["class"] }, { kind: "component", type: DrawerTitleComponent, selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", inputs: ["id", "class"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: ThemeSettingsLayoutSectionComponent, selector: "ThemeSettingsLayoutSection" }, { kind: "component", type: ThemeSettingsNavigationSectionComponent, selector: "ThemeSettingsNavigationSection" }, { kind: "component", type: ThemeSettingsShellSectionComponent, selector: "ThemeSettingsShellSection" }, { kind: "component", type: ThemeSettingsThemeSectionComponent, selector: "ThemeSettingsThemeSection" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ThemeSettings',
+                    imports: [
+                        DrawerCloseDirective,
+                        DrawerComponent,
+                        DrawerContentComponent,
+                        DrawerHeaderComponent,
+                        DrawerTitleComponent,
+                        IconComponent,
+                        ThemeSettingsLayoutSectionComponent,
+                        ThemeSettingsNavigationSectionComponent,
+                        ThemeSettingsShellSectionComponent,
+                        ThemeSettingsThemeSectionComponent,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    @if (showTrigger()) {
+      <button
+        type="button"
+        [class]="triggerClasses()"
+        [attr.aria-label]="triggerIconOnly() ? triggerLabel() : null"
+        [attr.title]="triggerIconOnly() ? triggerLabel() : null"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        (click)="open.set(true)"
+      >
+        <Icon name="palette" [size]="18" />
+        @if (triggerIconOnly()) {
+          <span class="sr-only">{{ triggerLabel() }}</span>
+        } @else {
+          <span>{{ triggerLabel() }}</span>
+        }
+      </button>
+    }
+
+    @if (open()) {
+      <Drawer
+        [(open)]="open"
+        [side]="side()"
+        [showCloseButton]="false"
+        class="ThemeSettings w-full max-w-md gap-0! p-0! sm:w-100"
+      >
+        <DrawerHeader
+          class="flex h-(--layout-topbar-height) shrink-0 flex-row items-center gap-3 border-b border-border bg-background px-3 text-left"
+        >
+          <span
+            aria-hidden="true"
+            class="grid size-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary ring-1 ring-primary/20"
+            ><Icon name="palette" [size]="18"
+          /></span>
+          <div class="min-w-0 flex-1">
+            <DrawerTitle>Theme settings</DrawerTitle>
+          </div>
+          <button
+            type="button"
+            DrawerClose
+            class="inline-flex h-8 shrink-0 items-center rounded-md bg-primary px-2 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none"
+          >
+            Done
+          </button>
+        </DrawerHeader>
+
+        <DrawerContent class="min-h-0 px-4 py-5 sm:px-5">
+          <div class="flex flex-col gap-8">
+            <ThemeSettingsThemeSection />
+            <ThemeSettingsShellSection />
+            @if (settings) {
+              <ThemeSettingsLayoutSection />
+              <ThemeSettingsNavigationSection />
+            }
+          </div>
+        </DrawerContent>
+      </Drawer>
+    }
+  `,
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-icon-only", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-trigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { NAV_TYPE_MODE_STORAGE_KEY, NAV_TYPE_STORAGE_KEY, THEME_SETTINGS_ADAPTER, ThemeSettingsComponent, ThemeSettingsDefaultAdapter, allowedNavTypeModes, allowedNavTypes$1 as allowedNavTypes, isWidthEnabled, provideThemeSettingsAdapter };