@ojiepermana/angular 22.1.10 → 22.1.12

package/sdk/src/writer/index.js

@@ -0,0 +1,286 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeStandalone = writeStandalone;
+exports.writeLibrary = writeLibrary;
+exports.writeSecondaryEntrypoint = writeSecondaryEntrypoint;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const template_1 = require("../render/template");
+const ROOT_ENTRYPOINT = '';
+const VIRTUAL_ROOT = '/__sdk__';
+/**
+ * No-op writer for the standalone mode — returns emitted files unchanged. Kept
+ * as a named function so modes are composable from a single switch at the
+ * engine layer.
+ */
+function writeStandalone(files) {
+    return files;
+}
+/**
+ * Library mode: add `ng-package.json`, `package.json`, and a top-level README
+ * so the `output` folder can be built with ng-packagr directly.
+ */
+function writeLibrary(files, ir, target, workspaceRoot, outputDir) {
+    const normalizedFiles = rewriteCrossEntrypointImports(files, target, workspaceRoot, outputDir);
+    const ngPackage = {
+        $schema: toPosixPath((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'node_modules/ng-packagr/ng-package.schema.json'))),
+        dest: resolveLibraryDestPath(workspaceRoot, outputDir),
+        lib: { entryFile: 'public-api.ts' },
+    };
+    const pkg = {
+        name: target.packageName,
+        version: target.packageVersion,
+        description: `Generated SDK for ${ir.title} ${ir.version}`,
+        peerDependencies: {
+            '@angular/common': '>=22.1.0',
+            '@angular/core': '>=22.1.0',
+            rxjs: '>=7.8.0',
+        },
+        sideEffects: false,
+    };
+    return [
+        ...normalizedFiles,
+        createNgPackageFile('ng-package.json', ngPackage),
+        ...createNestedEntrypointNgPackages(normalizedFiles),
+        {
+            path: 'package.json',
+            content: (0, template_1.finalize)(JSON.stringify(pkg, null, 2)),
+        },
+        ...createLibraryTsConfigFiles(workspaceRoot, outputDir),
+        {
+            path: 'README.md',
+            content: (0, template_1.finalize)(`# ${target.packageName}\n\nGenerated SDK for **${ir.title}** v${ir.version}.\n\nThis folder was generated by the local SDK generator. Do not edit by hand.\n`),
+        },
+    ];
+}
+/**
+ * Secondary-entrypoint mode: same file set as standalone, plus a minimal
+ * `ng-package.json` pointing at `public-api.ts`. Meant to live **inside** an
+ * existing library (e.g. `projects/angular/sdk-api/`) so ng-packagr picks it
+ * up automatically as a secondary entrypoint of the parent library.
+ */
+function writeSecondaryEntrypoint(files, _ir, target, workspaceRoot, outputDir) {
+    const normalizedFiles = rewriteCrossEntrypointImports(files, target, workspaceRoot, outputDir);
+    const ngPackage = {
+        lib: { entryFile: 'public-api.ts' },
+    };
+    return [
+        ...normalizedFiles,
+        createNgPackageFile('ng-package.json', ngPackage),
+        ...createNestedEntrypointNgPackages(normalizedFiles),
+    ];
+}
+function rewriteCrossEntrypointImports(files, target, workspaceRoot, outputDir) {
+    const entrypointDirs = collectEntrypointDirs(files);
+    if (entrypointDirs.length <= 1) {
+        return [...files];
+    }
+    const packageImportBase = resolvePackageImportBase(target, workspaceRoot, outputDir);
+    if (!packageImportBase) {
+        return [...files];
+    }
+    const knownFiles = new Set(files.map((file) => file.path));
+    return files.map((file) => {
+        const owner = findEntrypointOwner(file.path, entrypointDirs);
+        return {
+            ...file,
+            content: file.content.replace(/(from\s+['"])([^'"]+)(['"])/g, (_match, prefix, spec, suffix) => {
+                const nextSpec = rewriteModuleSpecifier(spec, file.path, owner, entrypointDirs, knownFiles, packageImportBase);
+                return `${prefix}${nextSpec}${suffix}`;
+            }),
+        };
+    });
+}
+function rewriteModuleSpecifier(specifier, currentPath, currentOwner, entrypointDirs, knownFiles, packageImportBase) {
+    if (!specifier.startsWith('./') && !specifier.startsWith('../')) {
+        return specifier;
+    }
+    const targetPath = resolveVirtualFilePath(currentPath, specifier, knownFiles);
+    if (!targetPath) {
+        return specifier;
+    }
+    const targetOwner = findEntrypointOwner(targetPath, entrypointDirs);
+    if (targetOwner === currentOwner) {
+        return specifier;
+    }
+    return buildEntrypointImport(packageImportBase, targetOwner);
+}
+function resolveVirtualFilePath(currentPath, specifier, knownFiles) {
+    const currentAbs = node_path_1.posix.join(VIRTUAL_ROOT, currentPath);
+    const resolved = node_path_1.posix.normalize(node_path_1.posix.join((0, node_path_1.dirname)(currentAbs), specifier));
+    const candidates = [
+        `${resolved}.ts`,
+        `${resolved}/index.ts`,
+        `${resolved}/public-api.ts`,
+        resolved,
+    ];
+    for (const candidate of candidates) {
+        if (!candidate.startsWith(`${VIRTUAL_ROOT}/`)) {
+            continue;
+        }
+        const relativePath = candidate.slice(VIRTUAL_ROOT.length + 1);
+        if (knownFiles.has(relativePath)) {
+            return relativePath;
+        }
+    }
+    return undefined;
+}
+function resolvePackageImportBase(target, workspaceRoot, outputDir) {
+    if (target.mode === 'library') {
+        return target.packageName;
+    }
+    if (target.mode !== 'secondary-entrypoint') {
+        return '';
+    }
+    return inferSecondaryEntrypointPackageName(workspaceRoot, outputDir, target.packageName);
+}
+function inferSecondaryEntrypointPackageName(workspaceRoot, outputDir, fallback) {
+    let currentDir = outputDir;
+    let nearestPackageDir;
+    let nearestPackagrDir;
+    while (isWithinWorkspace(currentDir, workspaceRoot)) {
+        const packageJsonPath = (0, node_path_1.resolve)(currentDir, 'package.json');
+        if ((0, node_fs_1.existsSync)(packageJsonPath)) {
+            nearestPackageDir ??= currentDir;
+            if ((0, node_fs_1.existsSync)((0, node_path_1.resolve)(currentDir, 'ng-package.json'))) {
+                nearestPackagrDir = currentDir;
+                break;
+            }
+        }
+        if (currentDir === workspaceRoot) {
+            break;
+        }
+        const parentDir = (0, node_path_1.dirname)(currentDir);
+        if (parentDir === currentDir) {
+            break;
+        }
+        currentDir = parentDir;
+    }
+    const packageDir = nearestPackagrDir ?? nearestPackageDir;
+    if (!packageDir) {
+        return fallback;
+    }
+    const packageName = readPackageName(packageDir);
+    if (!packageName) {
+        return fallback;
+    }
+    const relativeOutput = toPosixPath((0, node_path_1.relative)(packageDir, outputDir)).replace(/^\.\//, '');
+    if (!relativeOutput || relativeOutput === '.') {
+        return packageName;
+    }
+    return `${packageName}/${relativeOutput}`;
+}
+function readPackageName(packageDir) {
+    const packageJsonPath = (0, node_path_1.resolve)(packageDir, 'package.json');
+    if (!(0, node_fs_1.existsSync)(packageJsonPath)) {
+        return undefined;
+    }
+    let raw;
+    try {
+        raw = JSON.parse((0, node_fs_1.readFileSync)(packageJsonPath, 'utf8'));
+    }
+    catch (cause) {
+        throw new Error(`Failed to read ${packageJsonPath}: ${cause instanceof Error ? cause.message : String(cause)}`, { cause });
+    }
+    return typeof raw.name === 'string' && raw.name.length > 0 ? raw.name : undefined;
+}
+function isWithinWorkspace(candidate, workspaceRoot) {
+    const rel = (0, node_path_1.relative)(workspaceRoot, candidate);
+    return rel === '' || (!rel.startsWith('..') && !(0, node_path_1.isAbsolute)(rel));
+}
+function collectEntrypointDirs(files) {
+    const dirs = new Set();
+    for (const file of files) {
+        if (file.path === 'public-api.ts') {
+            dirs.add(ROOT_ENTRYPOINT);
+            continue;
+        }
+        if (!file.path.endsWith('/public-api.ts')) {
+            continue;
+        }
+        dirs.add(file.path.slice(0, -'/public-api.ts'.length));
+    }
+    return [...dirs].sort((left, right) => right.length - left.length || left.localeCompare(right));
+}
+function findEntrypointOwner(filePath, entrypointDirs) {
+    for (const entrypointDir of entrypointDirs) {
+        if (entrypointDir === ROOT_ENTRYPOINT) {
+            continue;
+        }
+        if (filePath === `${entrypointDir}/public-api.ts` || filePath.startsWith(`${entrypointDir}/`)) {
+            return entrypointDir;
+        }
+    }
+    return ROOT_ENTRYPOINT;
+}
+function buildEntrypointImport(packageImportBase, entrypointDir) {
+    return entrypointDir ? `${packageImportBase}/${entrypointDir}` : packageImportBase;
+}
+function createNestedEntrypointNgPackages(files) {
+    return collectSecondaryEntrypointDirs(files).map((dir) => createNgPackageFile(`${dir}/ng-package.json`, {
+        lib: { entryFile: 'public-api.ts' },
+    }));
+}
+function collectSecondaryEntrypointDirs(files) {
+    const dirs = new Set();
+    for (const file of files) {
+        if (!file.path.endsWith('/public-api.ts')) {
+            continue;
+        }
+        dirs.add(file.path.slice(0, -'/public-api.ts'.length));
+    }
+    return [...dirs].sort();
+}
+function resolveLibraryDestPath(workspaceRoot, outputDir) {
+    const outputFolderName = (0, node_path_1.basename)(outputDir) || 'sdk';
+    return toPosixPath((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'dist', outputFolderName)));
+}
+function createLibraryTsConfigFiles(workspaceRoot, outputDir) {
+    const rootTsConfig = toPosixPath((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'tsconfig.json')));
+    const outDir = toPosixPath((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'out-tsc/lib')));
+    const distDir = toRecursiveGlob((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'dist')));
+    const nodeModulesDir = toRecursiveGlob((0, node_path_1.relative)(outputDir, (0, node_path_1.resolve)(workspaceRoot, 'node_modules')));
+    const tsconfigLib = {
+        extends: rootTsConfig,
+        compilerOptions: {
+            outDir,
+            declaration: true,
+            declarationMap: true,
+            types: [],
+        },
+        include: ['public-api.ts', '**/public-api.ts'],
+        exclude: ['**/*.spec.ts', distDir, nodeModulesDir],
+    };
+    const tsconfigLibProd = {
+        extends: './tsconfig.lib.json',
+        compilerOptions: {
+            declarationMap: false,
+        },
+        angularCompilerOptions: {
+            compilationMode: 'partial',
+        },
+    };
+    return [
+        {
+            path: 'tsconfig.lib.json',
+            content: (0, template_1.finalize)(JSON.stringify(tsconfigLib, null, 2)),
+        },
+        {
+            path: 'tsconfig.lib.prod.json',
+            content: (0, template_1.finalize)(JSON.stringify(tsconfigLibProd, null, 2)),
+        },
+    ];
+}
+function toRecursiveGlob(value) {
+    const normalized = toPosixPath(value).replace(/\/+$/, '');
+    return normalized === '.' ? './**' : `${normalized}/**`;
+}
+function toPosixPath(value) {
+    return value.split('\\').join('/');
+}
+function createNgPackageFile(path, content) {
+    return {
+        path,
+        content: (0, template_1.finalize)(JSON.stringify(content, null, 2)),
+    };
+}

package/theme/README.md

@@ -0,0 +1,126 @@
+# @ojiepermana/angular/theme
+
+Theme layer for the `@ojiepermana/angular` design system: a runtime provider
+(mode / color / neutral / brand), design tokens, and the Tailwind v4 CSS that the
+components are styled against.
+
+```bash
+bun add @ojiepermana/angular
+# or: npm install @ojiepermana/angular
+```
+
+Everything below is reached through the `theme` subpath of that one package.
+
+## Entry points
+
+| Import path                                     | Contents                                                                                                                                |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `@ojiepermana/angular/theme/styles`             | `provideUiTheme`, `ThemeModeService`, `ThemeColorService`, `ThemeBrandService`, `ThemeRadiusService`, `ThemeSpaceService`, …            |
+| `@ojiepermana/angular/theme/component/settings` | Navigation-aligned right-side settings drawer; theme axes plus optional consumer-owned layout/navigation adapter                        |
+| `@ojiepermana/angular/theme/layout`             | Layout shell building blocks                                                                                                            |
+| `@ojiepermana/angular/theme/shell`              | Application shell root: `<Shell>` with `mode` / `device` / `color` axes, its own desktop titlebar, and the Tauri/Electron window bridge |
+| `@ojiepermana/angular/theme/page`               | Page-level scaffolding                                                                                                                  |
+| `@ojiepermana/angular/theme/theme.css`          | Base tokens + component styles only — lightweight, no runtime axes                                                                      |
+| `@ojiepermana/angular/theme/theme-full.css`     | Base + every runtime axis (color, neutral, radius, space) — needed for `ThemeColorService`/`ThemeNeutralService` switching              |
+| `@ojiepermana/angular/theme/styles/css/*`       | Raw CSS assets (per-axis color + neutral palettes, Tailwind map)                                                                        |
+
+## Tailwind v4 setup
+
+The CSS is published with the package and addressable by name. Use `theme-full.css`
+for the full design system (runtime color/neutral switching); use the lightweight
+`theme.css` plus only the axes you need for a smaller bundle.
+
+```css
+/* styles.css — full design system */
+@import '@ojiepermana/angular/theme/theme-full.css'; /* base + all color + neutral palettes */
+@import 'tailwindcss';
+@import '@ojiepermana/angular/theme/styles/css/base/tailwind.css'; /* maps tokens → bg-primary, bg-brand, text-foreground, … */
+```
+
+For a lightweight setup, import the base then opt in to specific axes:
+
+```css
+/* styles.css — base + only the axes you use */
+@import '@ojiepermana/angular/theme/theme.css'; /* base tokens + components, no axes */
+@import 'tailwindcss';
+@import '@ojiepermana/angular/theme/styles/css/base/tailwind.css';
+@import '@ojiepermana/angular/theme/styles/css/color/index.css'; /* opt in to accent palettes */
+@import '@ojiepermana/angular/theme/styles/css/neutral/index.css'; /* opt in to neutral families */
+```
+
+Requires Tailwind CSS `^4.3.0`.
+
+## Provider
+
+```ts
+import { provideUiTheme } from '@ojiepermana/angular/theme/styles';
+
+export const appConfig = {
+  providers: [
+    provideUiTheme({
+      mode: 'light',
+      color: 'base', // accent palette (base, red…rose, brand)
+      neutral: 'base', // gray family (base, slate, gray, zinc, …)
+      radius: 'md', // corner radius preset (none, xs, sm, md, xl, full)
+      space: 'normal', // spacing density preset (compact, normal, relaxed, spacious)
+      brand: { color: '221 83% 53%', foreground: '0 0% 100%' }, // consumer brand
+    }),
+  ],
+};
+```
+
+- `mode` — bootstraps `ThemeModeService` and persists the default mode (`light` / `dark` / `system`).
+- `color` — bootstraps `ThemeColorService`; initial accent palette (`<html theme-color>`).
+- `neutral` — initial neutral family (`<html theme-neutral>`); composes with any accent.
+- `radius` — bootstraps `ThemeRadiusService`; initial corner-radius preset (`<html theme-radius>`).
+  Drives the single `--radius-base` knob so the whole `--radius-*` scale and `rounded-*`
+  utilities follow. Values: `none`, `xs`, `sm`, `md` (default), `xl`, `full`;
+  each uses Tailwind's stock radius value with the same name.
+- `space` — bootstraps `ThemeSpaceService`; initial spacing-density preset (`<html theme-space>`).
+  Drives the single `--spacing-base` knob so every `p-*` / `m-*` / `gap-*` / `w-*` / `h-*`
+  utility follows. Values: `compact`, `normal` (default), `relaxed`, `spacious`.
+- `brand` — bootstraps `ThemeBrandService`; sets `--brand` / `bg-brand` and the
+  `theme-color='brand'` accent preset. Accepts an HSL triplet string (`'221 83% 53%'`)
+  or `{ color, foreground }`. Settable at runtime via `setBrand()`.
+
+A persisted choice (localStorage `theme-color` / `theme-neutral` / `theme-radius` /
+`theme-space` / `theme-brand`) always wins over the configured default.
+
+### Color system (FluxUI-style)
+
+Four independent axes switch at runtime via attribute selectors on `<html>`:
+
+- **accent** (`theme-color`) — `base` (core), `red … rose`, and `brand`. Each
+  re-tints the full palette. `base` = no override.
+- **neutral** (`theme-neutral`) — `base` (core), `slate`, `gray`, `zinc`, `neutral`,
+  `stone`, `mauve`, `olive`, `mist`, `taupe`. Overrides the gray family and Layout's
+  decorative pattern source, and is layered after accent so it wins both token groups.
+  With neutral `base`, surface patterns follow the active accent; every other neutral
+  gives them its own soft family hue.
+- **radius** (`theme-radius`) — `none`, `xs`, `sm`, `md` (default), `xl`, `full`.
+  Sets the `--radius-base` knob; the full `--radius-*` scale and `rounded-*` utilities follow.
+- **space** (`theme-space`) — `compact`, `normal` (default), `relaxed`, `spacious`.
+  Sets the `--spacing-base` knob; every `p-*` / `m-*` / `gap-*` / `w-*` / `h-*` utility follows.
+
+`theme-full.css` (i.e. `styles/css/index.css`) bundles the core base theme plus
+every accent and neutral palette, so switching needs no runtime CSS loading. The
+lightweight `theme.css` ships base only — import the axis files you need on top of
+it (or use `theme-full.css`) to enable runtime switching.
+
+### Material Symbols icons (opt-in)
+
+`provideUiTheme()` makes **no external network request by default**. To preload the
+Material Symbols font from Google Fonts:
+
+```ts
+provideUiTheme({ icons: { materialSymbols: true } });
+```
+
+Leave it off (the default) for privacy / offline / strict CSP, and self-host the
+font in your own stylesheet if you need it.
+
+## Support and security
+
+Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
+bundled `SUPPORT.md`. Report suspected vulnerabilities privately using the instructions in the
+bundled `SECURITY.md`. This package is MIT licensed; see the bundled `LICENSE`.

package/theme/component/settings/README.md

@@ -0,0 +1,135 @@
+# Theme settings
+
+Navigation-aligned settings inspector for the runtime theme axes. It is a
+right-side drawer with an optional native button or link-style trigger. Theme
+choices apply and persist immediately; an optional adapter also exposes layout
+and navigation preferences.
+
+## Import
+
+```ts
+import { ThemeSettingsComponent } from '@ojiepermana/angular/theme/component/settings';
+```
+
+## Navigation button
+
+```ts
+@Component({
+  imports: [ThemeSettingsComponent],
+  template: `
+    <NavigationFooterAction>
+      <ThemeSettings trigger-icon-only />
+    </NavigationFooterAction>
+  `,
+})
+export class AppNavigation {}
+```
+
+The built-in button is focusable, exposes `aria-haspopup="dialog"` and reflects
+the drawer state with `aria-expanded`. Use `trigger="link"` when the trigger
+should read as a text link while retaining button semantics for the action.
+
+## External state
+
+```html
+<button type="button" (click)="themeOpen.set(true)">Personalize theme</button>
+<ThemeSettings [(open)]="themeOpen" [show-trigger]="false" />
+```
+
+The drawer uses the shared Drawer/Sheet overlay: focus is trapped while it is
+open; Escape, backdrop click, and the close controls dismiss it; focus returns
+to the opening trigger. Its header and footer use the navigation topbar height,
+semantic borders, and theme tokens so it sits naturally beside a layout shell.
+
+## Shell
+
+Directly below **Theme** sits a **Shell** section with all three shell axes, driven
+by `ShellService` — so they need no adapter and each persists to its own key:
+
+| Control        | Values                                  | Storage key    |
+| -------------- | --------------------------------------- | -------------- |
+| `Shell mode`   | `web` / `desktop` / `tablet` / `mobile` | `shell-mode`   |
+| `Shell device` | the devices the active mode can host    | `shell-device` |
+| `Shell color`  | `Sync` / `Native`                       | `shell-color`  |
+
+`Shell device` is filtered by the active mode rather than showing all seven with
+most disabled — `web` hosts one device, `desktop` three. It also displays the value
+`<Shell>` would actually render: `ShellService.device()` is a _preference_ that may
+belong to another form factor (a stored `macos` survives a temporary `web` mode), so
+the control shows that preference corrected to the current mode.
+
+`Shell color` decides whether the desktop titlebar follows the theme axes above
+(`sync`) or paints the active device's own native chrome (`default`).
+
+`Shell mode` constrains the next section: everything but `web` owns the whole surface, so
+there is no page for the layout frame to be inset within. On those modes the width
+picker is disabled down to `full` and says why — see
+[`@ojiepermana/angular/theme/shell`](../../shell/README.md#mode-locks-the-layout-width).
+The user's own width choice is preserved, not overwritten, so switching back to
+`web` restores it.
+
+## Layout and navigation adapter
+
+The Theme and Shell sections are always available in any app using
+`provideUiTheme()`. The ordered **Layout** and **Navigation** sections need an
+adapter on `THEME_SETTINGS_ADAPTER`. Use the published default:
+
+```ts
+import { provideThemeSettingsAdapter } from '@ojiepermana/angular/theme/component/settings';
+
+export const appConfig = {
+  providers: [provideUiTheme({ ... }), provideThemeSettingsAdapter()],
+};
+```
+
+`ThemeSettingsDefaultAdapter` delegates surface, appearance, and width to
+`LayoutService`, and owns layout type, nav type, and nav type mode itself —
+`<Layout>` writes `type` back to follow nav orientation, so reading
+`layout.type()` would drift from the operator's choice. It persists those three
+under `layout-type`, `nav-type`, and `nav-type-mode`, reads them back with a safe
+fallback, and stores nothing but presentation choices. Storage that is missing,
+blocked, or holding a foreign value falls back to the default without throwing.
+
+Incoherent axis pairs auto-correct, so the rendered shell never lands in an
+impossible state. The rules are exported for consumers building their own
+settings panel:
+
+| Helper                  | Answers                                                |
+| ----------------------- | ------------------------------------------------------ |
+| `allowedNavTypes()`     | which nav types a layout type and shell mode allow     |
+| `allowedNavTypeModes()` | which presentation modes a nav type offers             |
+| `isWidthEnabled()`      | whether `fluid` width means anything for a layout type |
+
+A consumer that needs different behavior can still implement
+`ThemeSettingsAdapter` by hand and provide it on the token directly; the default
+adapter is a convenience, not a requirement.
+
+```ts
+import {
+  THEME_SETTINGS_ADAPTER,
+  type ThemeSettingsAdapter,
+} from '@ojiepermana/angular/theme/component/settings';
+
+@Service()
+export class AppLayoutSettings implements ThemeSettingsAdapter {
+  // Signals: appearance, surface, layoutType, width, navType, navTypeMode
+  // Setters for each axis; persist the values in the consumer app.
+}
+
+export const appConfig = {
+  providers: [{ provide: THEME_SETTINGS_ADAPTER, useExisting: AppLayoutSettings }],
+};
+```
+
+`navTypeMode` is contextual: sidebar supports **Default** / **Collapsed**,
+dockbar supports **Sticky** / **Drawer**, and horizontal navigation stays at
+**Default**.
+
+For `shell mode = desktop` together with `layoutType = horizontal`, `navType`
+has exactly one valid value: **Desktop**. This is a shell choice rather than a
+fifth navigation primitive: the desktop titlebar remains the chrome, while the
+wrapper hides desktop/mobile navigation and gives the content the same focused
+behavior as an `empty` layout. Persist it through
+`ThemeSettingsNavigationType`; entering that shell/layout pair normalizes the
+value to `desktop`, while leaving it normalizes to the first valid nav for the
+new combination.