@anionex/dsh-eye-care 0.1.0

package/lib/types/client/themes.d.ts

@@ -0,0 +1,14 @@
+/** Fixed eye-care themes built from semantic DSH Web tokens. */
+import type { ThemeDefinition } from '@deepseek-ai/dsh-client-ui-theme/client';
+import type { EyeCareIntensity } from '../shared.ts';
+/** Theme id prefix reserved by this package. */
+export declare const EYE_CARE_THEME_PREFIX = "eye-care-";
+type Scheme = 'light' | 'dark';
+/** Build the stable id for one concrete eye-care theme. */
+export declare function eyeCareThemeId(scheme: Scheme, intensity: EyeCareIntensity): string;
+/** Six concrete themes registered for the two schemes and three warmth levels. */
+export declare const EYE_CARE_THEMES: readonly ThemeDefinition[];
+/** Whether a theme id is one of this package's registered concrete themes. */
+export declare function isEyeCareThemeId(id: string): boolean;
+export {};
+//# sourceMappingURL=themes.d.ts.map

package/lib/types/client/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/client/themes.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAEhE,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,yCAAyC,CAAA;AAC3F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAEpD,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,cAAc,CAAA;AAEhD,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAsJ9B,2DAA2D;AAC3D,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,GAAG,MAAM,CAElF;AA6ED,kFAAkF;AAClF,eAAO,MAAM,eAAe,EAAE,SAAS,eAAe,EAOrD,CAAA;AAID,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAEpD"}

package/lib/types/index.d.ts

@@ -0,0 +1,10 @@
+/** DSH eye-care Host plugin: settings ownership and loopback RPC transport. */
+import type { Context } from '@deepseek-ai/cordis';
+export { DEFAULT_EYE_CARE_SETTINGS, EYE_CARE_INTENSITIES, EYE_CARE_MODES, EYE_CARE_SETTINGS_NAMESPACE, EYE_CARE_RPC_CHANNEL, EYE_CARE_RPC_READ, EYE_CARE_RPC_SAVE, type EyeCareIntensity, type EyeCareMode, type EyeCareSettings, } from './shared.ts';
+export { EYE_CARE_SETTINGS_NS, EyeCareSettingsSchema } from './settings.ts';
+export { EyeCareRpcBackend } from './rpc.ts';
+/** Required Host capability. */
+export declare const inject: string[];
+/** Register the durable namespace and the optional loopback browser transport. */
+export declare function apply(ctx: Context): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAE/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAKlD,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,cAAc,EACd,2BAA2B,EAC3B,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAE5C,gCAAgC;AAChC,eAAO,MAAM,MAAM,UAAe,CAAA;AAElC,kFAAkF;AAClF,wBAAgB,KAAK,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAGxC"}

package/lib/types/rpc.d.ts

@@ -0,0 +1,17 @@
+/** Loopback-only Connection RPC for durable eye-care preferences. */
+import type { Context } from '@deepseek-ai/cordis';
+import type { ConnectionRpcHandler } from '@deepseek-ai/dsh-client-connection';
+import { type EyeCareSettingsSnapshot } from './shared.ts';
+/** Host backend used by the loopback-only Connection RPC registration. */
+export declare class EyeCareRpcBackend {
+    private readonly ctx;
+    /** Create a backend over the active Settings service. */
+    constructor(ctx: Context);
+    /** Read the current browser-safe settings snapshot. */
+    snapshot(): EyeCareSettingsSnapshot;
+    /** Handle one Connection RPC endpoint. */
+    readonly handle: ConnectionRpcHandler;
+}
+/** Register the RPC channel when the Web Connection Host is composed. */
+export declare function installEyeCareRpc(ctx: Context): void;
+//# sourceMappingURL=rpc.d.ts.map

package/lib/types/rpc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rpc.d.ts","sourceRoot":"","sources":["../../src/rpc.ts"],"names":[],"mappings":"AAAA,qEAAqE;AAErE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAG9E,OAAO,EAML,KAAK,uBAAuB,EAE7B,MAAM,aAAa,CAAA;AAiCpB,0EAA0E;AAC1E,qBAAa,iBAAiB;IAEhB,OAAO,CAAC,QAAQ,CAAC,GAAG;IADhC,yDAAyD;gBAC5B,GAAG,EAAE,OAAO;IAEzC,uDAAuD;IACvD,QAAQ,IAAI,uBAAuB;IAenC,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,oBAAoB,CAuDpC;CACF;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CASpD"}

package/lib/types/settings.d.ts

@@ -0,0 +1,8 @@
+/** Host-only schema and branded namespace for eye-care settings. */
+import z from '@deepseek-ai/schemastery';
+import { type EyeCareSettings } from './shared.ts';
+/** Branded settings namespace used by the Host service. */
+export declare const EYE_CARE_SETTINGS_NS: import("@deepseek-ai/dsh-settings").SettingsNamespace;
+/** Host schema for the eye-care settings section. */
+export declare const EyeCareSettingsSchema: z<EyeCareSettings>;
+//# sourceMappingURL=settings.d.ts.map

package/lib/types/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/settings.ts"],"names":[],"mappings":"AAAA,oEAAoE;AAEpE,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAExC,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,aAAa,CAAA;AAEpB,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,uDAAiD,CAAA;AAElF,qDAAqD;AACrD,eAAO,MAAM,qBAAqB,EAAE,CAAC,CAAC,eAAe,CAGnD,CAAA"}

package/lib/types/shared.d.ts

@@ -0,0 +1,59 @@
+/** Browser-safe eye-care settings and RPC wire values. */
+/** User-selectable eye-care operating modes. */
+export declare const EYE_CARE_MODES: readonly ["off", "auto", "light", "dark"];
+/** Warmth levels shared by light and dark palettes. */
+export declare const EYE_CARE_INTENSITIES: readonly ["soft", "balanced", "warm"];
+/** Eye-care operating mode. */
+export type EyeCareMode = typeof EYE_CARE_MODES[number];
+/** Eye-care warmth level. */
+export type EyeCareIntensity = typeof EYE_CARE_INTENSITIES[number];
+/** Settings namespace owned by this package. */
+export declare const EYE_CARE_SETTINGS_NAMESPACE = "eye-care";
+/** Loopback-only Connection RPC channel owned by this package. */
+export declare const EYE_CARE_RPC_CHANNEL = "/eye-care";
+/** RPC endpoint that reads the current settings snapshot. */
+export declare const EYE_CARE_RPC_READ = "settings.read";
+/** RPC endpoint that replaces the settings section. */
+export declare const EYE_CARE_RPC_SAVE = "settings.save";
+/** Settings field carrying the selected mode. */
+export declare const MODE_FIELD = "mode";
+/** Settings field carrying the selected warmth. */
+export declare const INTENSITY_FIELD = "intensity";
+/** Defaults used when no user section exists. */
+export declare const DEFAULT_EYE_CARE_SETTINGS: Readonly<EyeCareSettings>;
+/** Persisted eye-care preferences. */
+export interface EyeCareSettings {
+    /** Whether eye care is disabled, system-aware, light, or dark. */
+    mode: EyeCareMode;
+    /** Warmth applied by the active eye-care palette. */
+    intensity: EyeCareIntensity;
+}
+/** Browser-safe Host snapshot returned through the loopback RPC channel. */
+export interface EyeCareSettingsSnapshot {
+    /** Wire schema version for this dedicated endpoint. */
+    schemaVersion: 1;
+    /** Whether the active settings provider accepts writes. */
+    writable: boolean;
+    /** Resolved settings and the revision fencing the next write. */
+    settings: {
+        value: EyeCareSettings;
+        revision: number;
+        applies: 'live';
+    };
+    /** Durable built-in Appearance preference used to fence startup convergence. */
+    baseThemePreference?: 'light' | 'dark' | 'system';
+}
+/** Revision-fenced write request. */
+export interface EyeCareSettingsWriteRequest {
+    expectedRevision: number;
+    value: EyeCareSettings;
+}
+/** Narrow an unknown value to one supported mode. */
+export declare function isEyeCareMode(value: unknown): value is EyeCareMode;
+/** Narrow an unknown value to one supported warmth. */
+export declare function isEyeCareIntensity(value: unknown): value is EyeCareIntensity;
+/** Decode a complete settings value from the RPC boundary. */
+export declare function decodeEyeCareSettings(value: unknown): EyeCareSettings | undefined;
+/** Decode one complete Host snapshot from the RPC boundary. */
+export declare function decodeEyeCareSnapshot(value: unknown): EyeCareSettingsSnapshot | undefined;
+//# sourceMappingURL=shared.d.ts.map

package/lib/types/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/shared.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAE1D,gDAAgD;AAChD,eAAO,MAAM,cAAc,2CAA4C,CAAA;AAEvE,uDAAuD;AACvD,eAAO,MAAM,oBAAoB,uCAAwC,CAAA;AAEzE,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvD,6BAA6B;AAC7B,MAAM,MAAM,gBAAgB,GAAG,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAA;AAElE,gDAAgD;AAChD,eAAO,MAAM,2BAA2B,aAAa,CAAA;AAErD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB,cAAc,CAAA;AAE/C,6DAA6D;AAC7D,eAAO,MAAM,iBAAiB,kBAAkB,CAAA;AAEhD,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,kBAAkB,CAAA;AAEhD,iDAAiD;AACjD,eAAO,MAAM,UAAU,SAAS,CAAA;AAEhC,mDAAmD;AACnD,eAAO,MAAM,eAAe,cAAc,CAAA;AAE1C,iDAAiD;AACjD,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC,eAAe,CAG9D,CAAA;AAEF,sCAAsC;AACtC,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,IAAI,EAAE,WAAW,CAAA;IACjB,qDAAqD;IACrD,SAAS,EAAE,gBAAgB,CAAA;CAC5B;AAED,4EAA4E;AAC5E,MAAM,WAAW,uBAAuB;IACtC,uDAAuD;IACvD,aAAa,EAAE,CAAC,CAAA;IAChB,2DAA2D;IAC3D,QAAQ,EAAE,OAAO,CAAA;IACjB,iEAAiE;IACjE,QAAQ,EAAE;QACR,KAAK,EAAE,eAAe,CAAA;QACtB,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;CAClD;AAED,qCAAqC;AACrC,MAAM,WAAW,2BAA2B;IAC1C,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,eAAe,CAAA;CACvB;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAElE;AAED,uDAAuD;AACvD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,gBAAgB,CAE5E;AAED,8DAA8D;AAC9D,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAKjF;AAED,+DAA+D;AAC/D,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,uBAAuB,GAAG,SAAS,CAwBzF"}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@anionex/dsh-eye-care",
+  "version": "0.1.0",
+  "description": "Warm light, warm dark, and system-aware eye-care themes for DSH Web",
+  "keywords": [
+    "deepseek",
+    "deepseek-harness",
+    "eye-care",
+    "theme",
+    "dark-mode",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Anionex/dsh-eye-care.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Anionex/dsh-eye-care/issues"
+  },
+  "type": "module",
+  "packageManager": "pnpm@11.7.0",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "main": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh.md",
+    "README.i18n.yaml",
+    "assets",
+    "cordis.patch.yml",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node --input-type=module -e \"import { rmSync } from 'node:fs'; for (const path of ['lib', '.client-build']) rmSync(path, { recursive: true, force: true })\" && tsc -p tsconfig.json && tsc -p tsconfig.client.json && tsdown -c tsdown.config.mjs",
+    "check": "tsc -p tsconfig.json --noEmit --pretty false && tsc -p tsconfig.client.json --noEmit --pretty false",
+    "prepack": "pnpm run build",
+    "test": "pnpm run build && vitest run"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-client-ui-theme"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/cordis": "^4.0.1",
+    "react": "^18.2.0",
+    "@deepseek-ai/schemastery": "^3.18.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "16.3.2",
+    "@testing-library/dom": "10.4.1",
+    "@types/node": "22.20.0",
+    "@types/react": "18.3.31",
+    "@types/react-dom": "18.3.7",
+    "jsdom": "29.1.1",
+    "lightningcss": "1.32.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsdown": "0.22.2",
+    "typescript": "6.0.3",
+    "vite-tsconfig-paths": "6.1.1",
+    "vitest": "4.1.8"
+  },
+  "license": "MIT"
+}

package/src/client/EyeCareRow.module.css

@@ -0,0 +1,137 @@
+/* Eye-care row: compact controls that remain usable in the narrow General panel. */
+
+.row {
+  display: grid;
+  grid-template-columns: minmax(170px, 0.8fr) minmax(360px, 1.2fr);
+  gap: 20px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.copy {
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.description {
+  margin: 4px 0 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.controls {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.controlGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.option,
+.smallOption {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+
+.option:focus-visible,
+.smallOption:focus-visible {
+  outline: 2px solid var(--dsw-alias-button-info-fill);
+  outline-offset: 2px;
+}
+
+.option {
+  min-width: 68px;
+  padding: 7px 11px;
+  border-radius: 9px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.smallOption {
+  padding: 4px 9px;
+  border-radius: 7px;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.option:hover:not(:disabled),
+.smallOption:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
+.selected {
+  border-color: var(--dsw-alias-button-info-fill);
+  background: var(--dsw-alias-interactive-bg-active);
+  color: var(--dsw-alias-label-primary);
+}
+
+.option:disabled,
+.smallOption:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.primaryLine,
+.settingLine {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.settingLabel,
+.status {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.settingLabel {
+  min-width: 56px;
+}
+
+.advanced {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 9px;
+  overflow: hidden;
+}
+
+.advanced > summary {
+  padding: 8px 10px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.advancedBody {
+  display: grid;
+  gap: 8px;
+  padding: 0 10px 10px;
+}
+
+.status {
+  min-height: 16px;
+}
+
+@media (max-width: 640px) {
+  .row {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}

package/src/client/EyeCareRow.tsx

@@ -0,0 +1,122 @@
+/** General-settings row for eye-care mode and warmth controls. */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { EyeCareController } from './controller.ts'
+import type { EyeCareKey } from './locales.ts'
+import type { EyeCareIntensity, EyeCareMode } from '../shared.ts'
+import css from './EyeCareRow.module.css'
+
+/** Injected business face used by the row. */
+export interface EyeCareRowInjected {
+  /** State source. */
+  hooks: { eyeCare: EyeCareController['store'] }
+  /** Set the selected mode. */
+  setMode: (mode: EyeCareMode) => Promise<void>
+  /** Set the selected warmth. */
+  setIntensity: (intensity: EyeCareIntensity) => Promise<void>
+}
+
+/** Full composed props for the settings slot. */
+export type EyeCareRowProps = PropsRuntime<'settings.general.item'>
+  & PropsLocale<'settings.eyeCare'>
+  & InjectFace<EyeCareRowInjected>
+
+const MODES: readonly { id: EyeCareMode; label: EyeCareKey }[] = [
+  { id: 'off', label: 'mode.off' },
+  { id: 'auto', label: 'mode.auto' },
+  { id: 'light', label: 'mode.light' },
+  { id: 'dark', label: 'mode.dark' },
+]
+
+const INTENSITIES: readonly { id: EyeCareIntensity; label: EyeCareKey }[] = [
+  { id: 'soft', label: 'intensity.soft' },
+  { id: 'balanced', label: 'intensity.balanced' },
+  { id: 'warm', label: 'intensity.warm' },
+]
+
+function statusKey(mode: EyeCareMode): EyeCareKey {
+  return `status.${mode}` as EyeCareKey
+}
+
+/** Render the feature-owned General settings row. */
+export function EyeCareRow({ t, useEyeCare, setMode, setIntensity }: EyeCareRowProps) {
+  const state = useEyeCare(value => value)
+  const busy = state.status === 'loading' || state.status === 'saving'
+  const enabled = state.settings.mode !== 'off'
+  const status = state.status === 'error' && state.error !== null ? state.error : t(statusKey(state.settings.mode))
+  const statusText = state.status === 'unavailable' ? `${status} · ${t('status.local')}` : status
+  return (
+    <section className={css.row} aria-labelledby="dsh-eye-care-title">
+      <div className={css.copy}>
+        <h3 id="dsh-eye-care-title" className={css.title}>{t('title')}</h3>
+        <p className={css.description}>{t('description')}</p>
+      </div>
+      <div className={css.controls}>
+        <div className={css.primaryLine}>
+          <div className={css.controlGroup} role="group" aria-label={t('enabled.title')}>
+            <button
+              type="button"
+              className={`${css.option}${!enabled ? ` ${css.selected}` : ''}`}
+              aria-pressed={!enabled}
+              disabled={busy}
+              onClick={() => { void setMode('off') }}
+            >
+              {t('enabled.off')}
+            </button>
+            <button
+              type="button"
+              className={`${css.option}${enabled ? ` ${css.selected}` : ''}`}
+              aria-pressed={enabled}
+              disabled={busy}
+              onClick={() => { void setMode(state.settings.mode === 'off' ? 'auto' : state.settings.mode) }}
+            >
+              {t('enabled.on')}
+            </button>
+          </div>
+        </div>
+        {enabled ? <details className={css.advanced}>
+          <summary>{t('advanced.title')}</summary>
+          <div className={css.advancedBody}>
+            <div className={css.settingLine}>
+              <span className={css.settingLabel}>{t('mode.title')}</span>
+              <div className={css.controlGroup} role="group" aria-label={t('mode.title')}>
+                {MODES.filter(({ id }) => id !== 'off').map(({ id, label }) => (
+                  <button
+                    key={id}
+                    type="button"
+                    className={`${css.smallOption}${state.settings.mode === id ? ` ${css.selected}` : ''}`}
+                    aria-pressed={state.settings.mode === id}
+                    disabled={busy}
+                    onClick={() => { void setMode(id) }}
+                  >
+                    {t(label)}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className={css.settingLine}>
+              <span className={css.settingLabel}>{t('intensity.title')}</span>
+              <div className={css.controlGroup} role="group" aria-label={t('intensity.title')}>
+                {INTENSITIES.map(({ id, label }) => (
+                  <button
+                    key={id}
+                    type="button"
+                    className={`${css.smallOption}${state.settings.intensity === id ? ` ${css.selected}` : ''}`}
+                    aria-pressed={state.settings.intensity === id}
+                    disabled={busy}
+                    onClick={() => { void setIntensity(id) }}
+                  >
+                    {t(label)}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </details> : null}
+        <div className={css.status} aria-live="polite">
+          {state.status === 'saving' ? t('status.saving') : statusText}
+        </div>
+      </div>
+    </section>
+  )
+}