@owlmeans/web-panel 0.1.18-rc.52 → 0.1.18-rc.53

package/README.md

@@ -11,7 +11,7 @@ but never started.
 ## Installation
 
 ```sh
-bun add @owlmeans/web-panel@^0.1.18-rc.52
+bun add @owlmeans/web-panel@^0.1.18-rc.53
 ```
 
 Peer requirements (the consuming app provides these): `react`, `react-dom`,
@@ -224,11 +224,12 @@ alias. Default keys are `nav.<section>` and `modules.<alias>`.
 
 | Component | Props |
 |---|---|
-| `NavLayout` | `nav`, `translate?`, `title?`, `home?` (brand target; defaults to the first section's first item), `actions?`, `mobileMenu?` (below `md`, a menu button and a sheet replace the section menu and the screen strip; `actions` stay), `skipLinkLabel?` (the first-on-page skip link to `<main id="main">`; default `shell.skip` → "Skip to content"; `false` renders no link and no `#main`), `footer?` (`PanelNavLink[]` renders the centred link row; a node renders as a full-width block above the credit), `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
+| `NavLayout` | `nav`, `translate?`, `title?`, `home?` (brand target; defaults to the first section's first item), `actions?`, `mobileMenu?` (below `md`, a menu button and a sheet replace the section menu and the screen strip; `actions` stay), `skipLinkLabel?` (the first-on-page skip link to `<main id="main">`; default `shell.skip` → "Skip to content"; `false` renders no link and no `#main`), `themeToggle?` (`true` or `{ labels? }`: the light/dark switcher in the footer's bottom row beside the credit; names via `shell.toLight` / `shell.toDark`), `footer?` (`PanelNavLink[]` renders the centred link row; a node renders as a full-width block above the credit), `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
 | `TopNav` | `config`, `translate?`, `ariaLabel?`, `className?`, `style?` |
 | `SideNav` | the same, plus `variant?: 'side' \| 'bar'` |
 | `MobileNav` | the same as `TopNav`; the trigger's name and the sheet title resolve `shell.menu` ("Menu"), its close button `shell.close` ("Close"); `className`/`style` land on the trigger |
-| `Footer` | `links?`, `content?` (full-width block, `data-footer-content`), `translate?`, `containerClassName?`, `children?` (join the link row), `className?`, `style?` — always renders the platform/owner credit line last, via `ShellCredit` |
+| `Footer` | `links?`, `content?` (full-width block, `data-footer-content`), `translate?`, `containerClassName?`, `children?` (join the link row), `themeToggle?`, `className?`, `style?` — always renders the platform/owner credit line last, via `ShellCredit` |
+| `ThemeToggle` | `labels?: { toLight?, toDark? }` (English defaults), `className?`, `style?` — a 44px `<button data-theme-toggle>` flipping the resolved scheme |
 | `ShellCredit`, `useShellCredit` | `className?` — "Powered by OwlMeans" plus the owner's copyright, resolved the same way the sign-in screen's credit is |
 
 ### 4. Forms, panels and status
@@ -345,6 +346,8 @@ The dialog's strings are the lib-tier `socket` namespace (`reload.title`, `reloa
 | `BlockProps`, `TextProps`, `LinkProps`, `StatusProps`, `StyledProps`, `TextVariant` | type | Their props |
 | `ImageUploader`, `ImageUploaderProps` | component, type | Drop target with a `previewUrl` |
 | `Toaster` | component | `sonner` surface themed from app tokens; follows `.dark` on the document element |
+| `ThemeToggle`, `ThemeToggleProps`, `ThemeToggleLabels` | component, type | The light/dark switcher |
+| `useColorScheme()`, `ColorSchemeModel` | hook, type | `{ scheme, choice, setChoice }` — the resolved scheme, the stored choice (`null` = follow the OS), and the setter |
 | `SocketReloadDialog` | component | Blocking reload prompt for `'lost'` sockets |
 | `LoginScreen`, `LocalizedLoginScreen` | component | Identity-provider choice screen; the localized one binds `translate` to the app's resources |
 | `appendLoginScreen(ctx, setup?)`, `LoginScreenSetup` | function, type | Register the screen on the login service, with `Logo` and other `LoginScreenProps` |
@@ -388,6 +391,24 @@ relying party.
 `@owlmeans/web-panel/auth/entrypoints` exports `entrypoints`: `@owlmeans/client-auth/manager`'s
 bindings plus `@owlmeans/api-config-client`'s.
 
+### `@owlmeans/web-panel/scheme`
+
+React-free — it imports nothing, so a Node build script can load it.
+
+| Symbol | Kind | Purpose |
+|---|---|---|
+| `COLOR_SCHEME_KEY` | const | `'owlmeans:color-scheme'`, the `localStorage` key |
+| `COLOR_SCHEME_EVENT` | const | The `window` event every change dispatches |
+| `ColorSchemeChoice` | type | `'light' \| 'dark'` |
+| `readColorScheme()` | function | The stored choice or `null` (storage errors swallowed) |
+| `applyColorScheme(choice \| null)` | function | Sets the `light`/`dark` class on `<html>`, stores or clears the key, dispatches the event |
+| `colorSchemeBootstrapScript()` | function | The inline head script that applies a stored choice before first paint |
+
+The class contract: `.dark` = chosen dark, `.light` = chosen light, neither = follow the OS. A
+consumer's CSS puts dark tokens under `.dark` AND under
+`@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`, and inlines
+`colorSchemeBootstrapScript()` in the document head.
+
 ### `@owlmeans/web-panel/consent`
 
 | Symbol | Kind | Purpose |
@@ -445,6 +466,9 @@ The public names match the MUI implementation; these props and types differ:
   does nothing and `PanelCookieConsent` keeps its floating button.
 - **Pass an application footer layout as a node `footer`.** It renders full-width above the credit;
   an array renders the centred link row. Neither removes the credit.
+- **A theme for `ThemeToggle` reads both classes.** Dark tokens under `.dark` only never follow
+  the OS; under the media query only, they ignore an explicit light choice. Inline the head
+  bootstrap or a stored dark choice flashes light for a frame.
 - **The shell already renders the skip link and `<main id="main">`.** A screen never renders a
   second `<main>` or `#main`; an app with its own skip link passes `skipLinkLabel={false}`.
 - **`mobileMenu` is opt-in.** Without it a narrow viewport keeps the section menu and the screen

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.52",
-  "generatedAt": "2026-09-21T21:54:22.981Z",
+  "version": "0.1.18-rc.53",
+  "generatedAt": "2026-09-22T09:20:40.388Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-panel/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-panel
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.52"` in `dependencies`
+**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.53"` in `dependencies`
 
 ## Key Exports
 
@@ -18,6 +18,7 @@ user-invocable: false
 | `NavLayout` | The application shell — header, section menu, screen menu, content, footer |
 | `TopNav` / `SideNav` / `MobileNav` / `Footer` | The shell's pieces, mountable on their own |
 | `Toaster` | The application's toast surface — mounted once, in the layout |
+| `ThemeToggle` / `useColorScheme` | The light/dark switcher (`ThemeToggleProps`, `ThemeToggleLabels`) and the hook behind it (`ColorSchemeModel`) — see *Light and dark* below |
 | `SocketReloadDialog` | The global "reload the page" prompt (opt in via `cfg.socket.reloadDialog`) `PanelApp` mounts automatically — see below. The hook it reads, `useSocketStatus`, is imported from `@owlmeans/client-socket`, not from this package |
 | `Link` | An `<a>` addressing an entrypoint alias (or a literal `src`), with the label taken from i18n |
 | `LoginScreen` / `LocalizedLoginScreen` / `appendLoginScreen` | The identity-provider choice screen — see `login-methods` |
@@ -42,6 +43,9 @@ user-invocable: false
 - `./consent` — the cookie consent dialog and policy, bound to this app's i18n, plus a menu-row
   widget and a presence service so a host's own collapsed menu can take over the floating button's
   job
+- `./scheme` — the React-free colour-scheme half: `COLOR_SCHEME_KEY`, `COLOR_SCHEME_EVENT`,
+  `ColorSchemeChoice`, `readColorScheme`, `applyColorScheme`, `colorSchemeBootstrapScript` — safe
+  to import from a Node build script
 
 ## Usage
 
@@ -104,11 +108,11 @@ header. Both render the same items; only one is visible at a time.
 
 | Component | Props |
 |---|---|
-| `NavLayout` | `nav: PanelNavConfig`, `translate?`, `title?: ReactNode`, `home?: string` (brand target — defaults to the first section's first item), `actions?: ReactNode`, `mobileMenu?: boolean`, `skipLinkLabel?: string \| false`, `footer?: PanelNavLink[] \| ReactNode`, `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
+| `NavLayout` | `nav: PanelNavConfig`, `translate?`, `title?: ReactNode`, `home?: string` (brand target — defaults to the first section's first item), `actions?: ReactNode`, `mobileMenu?: boolean`, `skipLinkLabel?: string \| false`, `themeToggle?: boolean \| { labels? }`, `footer?: PanelNavLink[] \| ReactNode`, `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
 | `TopNav` | `config: PanelNavConfig`, `translate?`, `ariaLabel?`, `className?`, `style?` |
 | `SideNav` | the same, plus `variant?: 'side' \| 'bar'` |
 | `MobileNav` | the same as `TopNav`; `ariaLabel` names the landmark inside the sheet, `className`/`style` land on the trigger button |
-| `Footer` | `links?: PanelNavLink[]`, `content?: ReactNode` (a full-width block — see below), `translate?`, `containerClassName?` (the shell's rhythm, so the footer row lines up with the header and content), `children?` (joins the centred link row), `className?`, `style?` |
+| `Footer` | `links?: PanelNavLink[]`, `content?: ReactNode` (a full-width block — see below), `translate?`, `containerClassName?` (the shell's rhythm, so the footer row lines up with the header and content), `children?` (joins the centred link row), `themeToggle?: boolean \| { labels? }` (the switcher beside the credit), `className?`, `style?` |
 | `ShellCredit` / `useShellCredit` | `className?`; the platform/owner credit line `Footer` always renders — see below |
 
 **The narrow-viewport menu is opt-in: `mobileMenu`.** Off (the default) the shell is exactly the
@@ -153,8 +157,9 @@ row. A node — an application's own footer layout: a brand, a description, link
 `Footer`'s `content` and renders as a `w-full self-stretch text-start` block (`data-footer-content`)
 inside the footer's container, above the credit. The container keeps `items-center` for the link
 row and the credit; only the block stretches. It used to land INSIDE the centred link row, where
-it shrink-wrapped to its content in the middle of the page. `ShellCredit` stays the container's
-last child in every case. Pinned by `nav.spec.ts` → "a node footer" (`?footer=node`).
+it shrink-wrapped to its content in the middle of the page. `ShellCredit` stays the last thing the
+footer renders in every case — the container's own last child, or, with `themeToggle`, first in the
+bottom row `[data-footer-bottom]` with the switcher after it. Pinned by `nav.spec.ts` → "a node footer" (`?footer=node`).
 
 **The style slots are REGIONS, and each region is its own SURFACE.** `className` is the root —
 the full-height page *behind* the header, side menu and footer. `headerClassName` is the sticky
@@ -244,6 +249,60 @@ Rules that make the shell behave:
   uses the package-local shadcn `navigation-menu` primitive and `MobileNav` the package-local
   `sheet` (over `@radix-ui/react-dialog`, a peer) — see the package-boundary rule below.
 
+### Light and dark — `ThemeToggle`, `useColorScheme`, `./scheme`
+
+The standard switcher, with no theme library behind it. `NavLayout themeToggle` (or `Footer
+themeToggle`) puts it in the footer's bottom row beside the credit, whatever `footer` is; absent or
+`false`, the footer's DOM is what it is without one. It is also mountable on its own.
+
+**The contract is two classes on `<html>`.** `dark` = the visitor chose dark, `light` = chose light,
+neither = follow the operating system. The choice is stored under `COLOR_SCHEME_KEY`
+(`owlmeans:color-scheme`, `localStorage`, every access in `try`). `light` exists as a class of its
+own because a visitor choosing light on a dark system has no other way to say so to a stylesheet
+that paints dark under `prefers-color-scheme: dark`. So a consumer's CSS must read BOTH:
+
+```css
+:root { color-scheme: light; /* light tokens */ }
+.dark { color-scheme: dark; /* dark tokens */ }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) { color-scheme: dark; /* the same dark tokens */ }
+}
+/* Tailwind v4: a `dark:` variant that follows the same rule */
+@custom-variant dark {
+  &:where(.dark, .dark *) { @slot; }
+  @media (prefers-color-scheme: dark) { &:where(:root:not(.light), :root:not(.light) *) { @slot; } }
+}
+```
+
+A theme with dark tokens under `.dark` alone never follows the OS; one with them under the media
+query alone ignores an explicit light choice.
+
+**The head bootstrap goes before any stylesheet paints.** `colorSchemeBootstrapScript()` returns a
+self-contained inline script that puts the stored choice's class on `<html>` before first paint —
+the only moment it can; a component doing it after mount shows a visitor who chose dark one frame
+of the light page. A build step inlines it into `index.html` (import it from
+`@owlmeans/web-panel/scheme` — that module imports nothing, React included) and a CSP that hashes
+inline scripts must hash it. Without the bootstrap, `useColorScheme` re-applies the stored class on
+mount: correct, one frame late.
+
+Rules the pieces own:
+
+- **The toggle flips the RESOLVED scheme** (`choice ?? system`), never the stored choice alone: on
+  a dark system with nothing stored the first press means light. The icon is the scheme the page
+  is in (sun while light, moon while dark), chosen in script, not by a `dark:` variant.
+- **The accessible name says what pressing does** — `labels.toLight` / `labels.toDark`, English
+  defaults; `NavLayout` resolves them through `translate` (`shell.toLight`, `shell.toDark`).
+- **One choice per document.** `applyColorScheme(choice | null)` sets the class, stores or clears
+  the key and dispatches `COLOR_SCHEME_EVENT`, so every mounted `useColorScheme` agrees at once;
+  another tab's change arrives through `storage`, and an OS switch through `matchMedia` while
+  nothing is stored. `setChoice(null)` hands the page back to the OS.
+- **Look:** a 44px round target, `text-muted-foreground` → `hover:text-foreground`, the 3px
+  `--ring` focus ring, no fill, border, gradient or shadow.
+
+Pinned by `tests/scheme.spec.ts` (`?themeToggle=1`): the module's imports, the bootstrap string,
+the class flip and persistence, the resolved flip under an emulated dark system, a node footer,
+and the absent case.
+
 ### Toasts — `Toaster`
 
 An action that succeeded or failed says so in a toast. The surface is `Toaster`; the messages are

package/build/components/footer/component.d.ts

@@ -19,7 +19,12 @@ import type { FooterProps } from './types.js';
  * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
  * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
  * an otherwise-empty bordered strip): the footer as a whole returns `null` only when content,
- * links, children AND the resolved credit are all empty.
+ * links, children, the theme switcher AND the resolved credit are all absent.
+ *
+ * `themeToggle` puts the light/dark `ThemeToggle` in the bottom row beside the credit. It is the
+ * footer's own row rather than something an application adds through `content`, so every area of
+ * an application offers it in the same place and the credit keeps its position whatever the
+ * application's own footer layout does.
  */
 export declare const Footer: FC<FooterProps>;
 //# sourceMappingURL=component.d.ts.map

package/build/components/footer/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA2BlC,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyClC,CAAA"}

package/build/components/footer/component.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultNavTranslate, resolveNavLabel } from '@owlmeans/client-panel';
 import { cn } from '../../@/lib/utils.js';
 import { Link } from '../link.js';
+import { ThemeToggle } from '../scheme/toggle.js';
 import { ShellCredit, useShellCredit } from './credit.js';
 /**
  * The standard footer — an optional full-width `content` block, a centred row of links plus
@@ -22,12 +23,20 @@ import { ShellCredit, useShellCredit } from './credit.js';
  * The credit is rendered unconditionally — never behind a prop, so a restyle cannot delete it.
  * `useShellCredit` decides emptiness here (rather than letting `ShellCredit` render null inside
  * an otherwise-empty bordered strip): the footer as a whole returns `null` only when content,
- * links, children AND the resolved credit are all empty.
+ * links, children, the theme switcher AND the resolved credit are all absent.
+ *
+ * `themeToggle` puts the light/dark `ThemeToggle` in the bottom row beside the credit. It is the
+ * footer's own row rather than something an application adds through `content`, so every area of
+ * an application offers it in the same place and the credit keeps its position whatever the
+ * application's own footer layout does.
  */
-export const Footer = ({ links, translate = defaultNavTranslate, children, content, className, style, containerClassName }) => {
+export const Footer = ({ links, translate = defaultNavTranslate, children, content, className, style, containerClassName, themeToggle }) => {
     const credit = useShellCredit();
     const hasLinks = (links != null && links.length > 0) || children != null;
-    if (content == null && !hasLinks && !credit.poweredBy && credit.line == null) {
+    const toggle = themeToggle == null || themeToggle === false
+        ? null
+        : themeToggle === true ? {} : themeToggle;
+    if (content == null && !hasLinks && toggle == null && !credit.poweredBy && credit.line == null) {
         return null;
     }
     return _jsx("footer", { className: cn('border-t py-6', className), style: style, children: _jsxs("div", { className: cn('flex flex-col items-center gap-3 text-center', containerClassName), children: [content != null && _jsx("div", { "data-footer-content": true, className: "w-full self-stretch text-start", children: content }), hasLinks && _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 text-sm", children: [links?.map((link, idx) => {
@@ -35,6 +44,8 @@ export const Footer = ({ links, translate = defaultNavTranslate, children, conte
                             return link.href != null
                                 ? _jsx(Link, { src: link.href, open: link.open, children: label }, `${link.href}:${idx}`)
                                 : _jsx(Link, { module: link.alias, open: link.open, children: label }, `${link.alias}:${idx}`);
-                        }), children] }), _jsx(ShellCredit, {})] }) });
+                        }), children] }), toggle != null
+                    ? _jsxs("div", { "data-footer-bottom": true, className: "flex flex-wrap items-center justify-center gap-2", children: [_jsx(ShellCredit, {}), _jsx(ThemeToggle, { ...(toggle.labels != null ? { labels: toggle.labels } : {}) })] })
+                    : _jsx(ShellCredit, {})] }) });
 };
 //# sourceMappingURL=component.js.map

package/build/components/footer/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIzD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,KAAK,EAAE,SAAS,GAAG,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAChG,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAA;IACxE,IAAI,OAAO,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7E,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,iBAAQ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACpE,eAAK,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,kBAAkB,CAAC,aACnF,OAAO,IAAI,IAAI,IAAI,2CAAyB,SAAS,EAAC,gCAAgC,YAAE,OAAO,GAAO,EACtG,QAAQ,IAAI,eAAK,SAAS,EAAC,0DAA0D,aACnF,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;4BACxB,MAAM,KAAK,GAAG,eAAe,CAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAC3F,CAAA;4BAED,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI;gCACtB,CAAC,CAAC,KAAC,IAAI,IAA6B,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAA9D,GAAG,IAAI,CAAC,IAAI,IAAI,GAAG,EAAE,CAAiD;gCACnF,CAAC,CAAC,KAAC,IAAI,IAA8B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAAnE,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,CAAqD,CAAA;wBAC5F,CAAC,CAAC,EACD,QAAQ,IACL,EACN,KAAC,WAAW,KAAG,IACX,GACC,CAAA;AACX,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/footer/component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,KAAK,EAAE,SAAS,GAAG,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAC/F,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,IAAI,IAAI,CAAA;IACxE,MAAM,MAAM,GAAG,WAAW,IAAI,IAAI,IAAI,WAAW,KAAK,KAAK;QACzD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3C,IAAI,OAAO,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;QAC/F,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,iBAAQ,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACpE,eAAK,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,kBAAkB,CAAC,aACnF,OAAO,IAAI,IAAI,IAAI,2CAAyB,SAAS,EAAC,gCAAgC,YAAE,OAAO,GAAO,EACtG,QAAQ,IAAI,eAAK,SAAS,EAAC,0DAA0D,aACnF,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;4BACxB,MAAM,KAAK,GAAG,eAAe,CAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAC3F,CAAA;4BAED,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI;gCACtB,CAAC,CAAC,KAAC,IAAI,IAA6B,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAA9D,GAAG,IAAI,CAAC,IAAI,IAAI,GAAG,EAAE,CAAiD;gCACnF,CAAC,CAAC,KAAC,IAAI,IAA8B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,KAAK,IAAnE,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,CAAqD,CAAA;wBAC5F,CAAC,CAAC,EACD,QAAQ,IACL,EAML,MAAM,IAAI,IAAI;oBACb,CAAC,CAAC,2CAAwB,SAAS,EAAC,kDAAkD,aACpF,KAAC,WAAW,KAAG,EACf,KAAC,WAAW,OAAK,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAI,IACzE;oBACN,CAAC,CAAC,KAAC,WAAW,KAAG,IACf,GACC,CAAA;AACX,CAAC,CAAA"}

package/build/components/footer/types.d.ts

@@ -1,6 +1,11 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { NavTranslate, PanelNavLink } from '@owlmeans/client-panel';
+import type { ThemeToggleLabels } from '../scheme/types.js';
 import type { StyledProps } from '../types.js';
+/** `true` for the English labels; an object to pass the application's own. */
+export type FooterThemeToggle = boolean | {
+    labels?: ThemeToggleLabels;
+};
 export interface FooterProps extends PropsWithChildren<StyledProps> {
     links?: PanelNavLink[];
     /**
@@ -9,6 +14,11 @@ export interface FooterProps extends PropsWithChildren<StyledProps> {
      * the link row and the credit line. `children`, by contrast, join the centred link row.
      */
     content?: ReactNode;
+    /**
+     * Render the light/dark `ThemeToggle` in the bottom row, beside the credit line. Absent or
+     * `false`, the footer is exactly what it is without a switcher.
+     */
+    themeToggle?: FooterThemeToggle;
     /** The shell's horizontal rhythm, so the footer row lines up with the header and the content. */
     containerClassName?: string;
     /** See {@link NavTranslate} — omitted, literal labels and humanized aliases are used. */

package/build/components/footer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,WAAW,WAAY,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACjE,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,8EAA8E;AAC9E,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG;IAAE,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAA;AAExE,MAAM,WAAW,WAAY,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACjE,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB"}

package/build/components/index.d.ts

@@ -16,4 +16,5 @@ export * from './helper.js';
 export * from './status.js';
 export * from './toaster.js';
 export * from './socket/index.js';
+export * from './scheme/index.js';
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAEhC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAEhC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}

package/build/components/index.js

@@ -15,4 +15,5 @@ export * from './helper.js';
 export * from './status.js';
 export * from './toaster.js';
 export * from './socket/index.js';
+export * from './scheme/index.js';
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAEhC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAEhC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}

package/build/components/nav/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAS3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AA2BhD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA0HxC,CAAA"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAS3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AA2BhD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAsIxC,CAAA"}

package/build/components/nav/layout.js

@@ -45,8 +45,19 @@ const SKIP_LINK = [
  * The skip link comes FIRST in the root, ahead of the header — the first thing a keyboard reaches
  * — and moves focus to `<main id="main">`, past the brand, the menus and the actions.
  */
-export const NavLayout = ({ nav, translate = defaultNavTranslate, title, home, actions, footer, children, className, style, headerClassName, contentClassName, containerClassName, mobileMenu = false, skipLinkLabel }) => {
+export const NavLayout = ({ nav, translate = defaultNavTranslate, title, home, actions, footer, children, className, style, headerClassName, contentClassName, containerClassName, mobileMenu = false, skipLinkLabel, themeToggle }) => {
     const navigator = useNavigate();
+    // The switcher's names go through `translate` like every other shell string, with the caller's
+    // own labels winning; `false`/absent stays absent, so the footer renders exactly as it did.
+    const toggle = themeToggle == null || themeToggle === false ? undefined : {
+        labels: {
+            toLight: (themeToggle === true ? undefined : themeToggle.labels?.toLight)
+                ?? translate('shell.toLight', 'Switch to light mode'),
+            toDark: (themeToggle === true ? undefined : themeToggle.labels?.toDark)
+                ?? translate('shell.toDark', 'Switch to dark mode'),
+        },
+    };
+    const toggleProp = toggle != null ? { themeToggle: toggle } : {};
     const main = useRef(null);
     const skipLabel = skipLinkLabel === false
         ? null
@@ -68,9 +79,9 @@ export const NavLayout = ({ nav, translate = defaultNavTranslate, title, home, a
     // value stays a width-only change; `px-8` still overrides the padding when that is the intent.
     const container = cn(CONTAINER, containerClassName);
     return _jsxs("div", { className: cn('flex min-h-screen flex-col bg-background text-foreground', className), style: style, children: [skipLabel != null && _jsx("a", { href: "#main", onClick: skip, "data-skip-link": true, className: SKIP_LINK, children: skipLabel }), _jsxs("header", { className: cn('sticky top-0 z-40 isolate border-b bg-background text-foreground', headerClassName), children: [_jsxs("div", { className: cn('flex h-14 items-center gap-6', container), children: [title != null ? _jsx("a", { onClick: brandAlias != null ? navigator.press(brandAlias) : undefined, className: cn('brand flex items-center gap-2 text-lg font-semibold', brandAlias != null && 'cursor-pointer'), children: title }) : null, _jsx(TopNav, { config: nav, translate: translate, ariaLabel: "Sections", className: mobileMenu ? 'hidden md:flex' : undefined }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [actions, mobileMenu && _jsx(MobileNav, { config: nav, translate: translate, ariaLabel: "Sections", className: "md:hidden" })] })] }), !mobileMenu && _jsx(SideNav, { config: nav, translate: translate, variant: "bar", ariaLabel: "Screens", className: "md:hidden" }), _jsx("div", { "aria-hidden": "true", "data-nav-backdrop": true, className: "absolute inset-0 -z-10 bg-background pointer-events-none" })] }), _jsxs("div", { className: "flex flex-1", children: [_jsx(SideNav, { config: nav, translate: translate, variant: "side", ariaLabel: "Screens", className: "hidden md:block" }), _jsx("main", { ref: main, ...(skipLabel != null ? { id: 'main', tabIndex: -1 } : {}), className: cn('flex-1 py-8 outline-none', contentClassName), children: _jsx("div", { className: cn(container), children: children }) })] }), Array.isArray(footer)
-                ? _jsx(Footer, { links: footer, translate: translate, containerClassName: container })
+                ? _jsx(Footer, { links: footer, translate: translate, containerClassName: container, ...toggleProp })
                 : footer != null
-                    ? _jsx(Footer, { containerClassName: container, content: footer })
-                    : _jsx(Footer, { containerClassName: container })] });
+                    ? _jsx(Footer, { containerClassName: container, content: footer, ...toggleProp })
+                    : _jsx(Footer, { containerClassName: container, ...toggleProp })] });
 };
 //# sourceMappingURL=layout.js.map

package/build/components/nav/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/components/nav/layout.tsx"],"names":[],"mappings":"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"}

package/build/components/nav/types.d.ts

@@ -1,5 +1,6 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { NavTranslate, PanelNavConfig, PanelNavLink } from '@owlmeans/client-panel';
+import type { FooterThemeToggle } from '../footer/types.js';
 import type { StyledProps } from '../types.js';
 interface NavCommonProps extends StyledProps {
     config: PanelNavConfig;
@@ -48,6 +49,13 @@ export interface NavLayoutProps extends PropsWithChildren<StyledProps> {
      * without the `main` id, for an application that renders its own skip link and target.
      */
     skipLinkLabel?: string | false;
+    /**
+     * The light/dark switcher in the footer's bottom row, beside the credit — forwarded to
+     * `Footer`, whether `footer` is links, a node or absent. The accessible names resolve
+     * `shell.toLight` / `shell.toDark` through `translate` unless `labels` gives them. Absent or
+     * `false`, the footer renders exactly as it does without one.
+     */
+    themeToggle?: FooterThemeToggle;
     /**
      * An array renders the standard footer: a centred row of links above the credit line.
      *

package/build/components/nav/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,cAAe,SAAQ,WAAW;IAC1C,MAAM,EAAE,cAAc,CAAA;IACtB,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;CAAI;AAEvD,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;CAAI;AAE1D,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACpE,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC9B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;IACnC;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,cAAe,SAAQ,WAAW;IAC1C,MAAM,EAAE,cAAc,CAAA;IACtB,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;CAAI;AAEvD,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;CAAI;AAE1D,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACpE,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;IACnC;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B"}

package/build/components/scheme/hook.d.ts

@@ -0,0 +1,16 @@
+import type { ColorSchemeModel } from './types.js';
+/**
+ * The page's colour scheme, and the way to choose one.
+ *
+ * Both halves are read synchronously on the first render — the stored choice from storage, the
+ * system preference from `matchMedia` — so a toggle never renders the wrong icon for a frame.
+ * Afterwards it follows three sources: `applyColorScheme` anywhere in this document (its event),
+ * another tab changing the stored key (`storage`), and the operating system switching while no
+ * choice is stored.
+ *
+ * Mounting also re-applies a stored choice's class. The head bootstrap has normally done that
+ * before the first paint; an application without it still ends up on the right scheme, one frame
+ * late rather than never.
+ */
+export declare const useColorScheme: () => ColorSchemeModel;
+//# sourceMappingURL=hook.d.ts.map

package/build/components/scheme/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/components/scheme/hook.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAQlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,QAAO,gBAqCjC,CAAA"}

package/build/components/scheme/hook.js

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from 'react';
+import { COLOR_SCHEME_EVENT, COLOR_SCHEME_KEY, applyColorScheme, readColorScheme, setColorSchemeClass, } from '../../scheme/scheme.js';
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+const systemDark = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    && window.matchMedia(DARK_QUERY).matches;
+/**
+ * The page's colour scheme, and the way to choose one.
+ *
+ * Both halves are read synchronously on the first render — the stored choice from storage, the
+ * system preference from `matchMedia` — so a toggle never renders the wrong icon for a frame.
+ * Afterwards it follows three sources: `applyColorScheme` anywhere in this document (its event),
+ * another tab changing the stored key (`storage`), and the operating system switching while no
+ * choice is stored.
+ *
+ * Mounting also re-applies a stored choice's class. The head bootstrap has normally done that
+ * before the first paint; an application without it still ends up on the right scheme, one frame
+ * late rather than never.
+ */
+export const useColorScheme = () => {
+    const [choice, setState] = useState(readColorScheme);
+    const [dark, setDark] = useState(systemDark);
+    useEffect(() => {
+        const stored = readColorScheme();
+        if (stored != null) {
+            setColorSchemeClass(stored);
+        }
+        setState(stored);
+        const onChoice = () => setState(readColorScheme());
+        const onStorage = (event) => {
+            if (event.key === COLOR_SCHEME_KEY || event.key == null) {
+                const next = readColorScheme();
+                setColorSchemeClass(next);
+                setState(next);
+            }
+        };
+        window.addEventListener(COLOR_SCHEME_EVENT, onChoice);
+        window.addEventListener('storage', onStorage);
+        const media = typeof window.matchMedia === 'function' ? window.matchMedia(DARK_QUERY) : null;
+        const onSystem = () => setDark(media?.matches === true);
+        media?.addEventListener('change', onSystem);
+        onSystem();
+        return () => {
+            window.removeEventListener(COLOR_SCHEME_EVENT, onChoice);
+            window.removeEventListener('storage', onStorage);
+            media?.removeEventListener('change', onSystem);
+        };
+    }, []);
+    const setChoice = useCallback((next) => applyColorScheme(next), []);
+    return { scheme: choice ?? (dark ? 'dark' : 'light'), choice, setChoice };
+};
+//# sourceMappingURL=hook.js.map

package/build/components/scheme/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../src/components/scheme/hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EACL,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,mBAAmB,GAC7F,MAAM,wBAAwB,CAAA;AAI/B,MAAM,UAAU,GAAG,8BAA8B,CAAA;AAEjD,MAAM,UAAU,GAAG,GAAY,EAAE,CAC/B,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;OACnE,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;AAE5C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAqB,EAAE;IACnD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA2B,eAAe,CAAC,CAAA;IAC9E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,CAAA;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,eAAe,EAAE,CAAA;QAChC,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,mBAAmB,CAAC,MAAM,CAAC,CAAA;QAC7B,CAAC;QACD,QAAQ,CAAC,MAAM,CAAC,CAAA;QAEhB,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAA;QAClD,MAAM,SAAS,GAAG,CAAC,KAAmB,EAAE,EAAE;YACxC,IAAI,KAAK,CAAC,GAAG,KAAK,gBAAgB,IAAI,KAAK,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;gBACxD,MAAM,IAAI,GAAG,eAAe,EAAE,CAAA;gBAC9B,mBAAmB,CAAC,IAAI,CAAC,CAAA;gBACzB,QAAQ,CAAC,IAAI,CAAC,CAAA;YAChB,CAAC;QACH,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;QACrD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAE7C,MAAM,KAAK,GAAG,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QAC5F,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;QACvD,KAAK,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC3C,QAAQ,EAAE,CAAA;QAEV,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;YACxD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;YAChD,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAChD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,IAA8B,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE7F,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAA;AAC3E,CAAC,CAAA"}

package/build/components/scheme/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './types.js';
+export * from './hook.js';
+export * from './toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/build/components/scheme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scheme/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA"}

package/build/components/scheme/index.js

@@ -0,0 +1,3 @@
+export * from './hook.js';
+export * from './toggle.js';
+//# sourceMappingURL=index.js.map

package/build/components/scheme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/scheme/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA"}

package/build/components/scheme/toggle.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { ThemeToggleProps } from './types.js';
+/**
+ * The light/dark switcher.
+ *
+ * It flips the RESOLVED scheme, not the stored choice: on a system that prefers dark and with no
+ * choice stored, the page is dark, so the first press means "light" — a toggle keyed on the
+ * choice alone would answer that press with "dark", which changes nothing the visitor can see.
+ * The icon is the scheme the page is in (a sun while light, a moon while dark), chosen in script
+ * from the same state rather than by a `dark:` variant, so it is right whatever the app's CSS
+ * calls dark. The accessible name says what pressing does, from `labels` or the English default.
+ */
+export declare const ThemeToggle: FC<ThemeToggleProps>;
+//# sourceMappingURL=toggle.d.ts.map

package/build/components/scheme/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/scheme/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAclD;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAc5C,CAAA"}

package/build/components/scheme/toggle.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Moon, Sun } from 'lucide-react';
+import { cn } from '../../@/lib/utils.js';
+import { useColorScheme } from './hook.js';
+/**
+ * A 44px round target in the page's own tokens — muted at rest, the foreground on hover — with
+ * the 3px ring every interactive element shows on keyboard focus. No fill, border, gradient or
+ * shadow: it sits in a footer's bottom row beside the credit and must read as part of it.
+ */
+const TOGGLE = [
+    'inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full',
+    'bg-transparent text-muted-foreground transition-colors hover:text-foreground',
+    'outline-none focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-offset-2',
+    'focus-visible:ring-offset-background',
+].join(' ');
+/**
+ * The light/dark switcher.
+ *
+ * It flips the RESOLVED scheme, not the stored choice: on a system that prefers dark and with no
+ * choice stored, the page is dark, so the first press means "light" — a toggle keyed on the
+ * choice alone would answer that press with "dark", which changes nothing the visitor can see.
+ * The icon is the scheme the page is in (a sun while light, a moon while dark), chosen in script
+ * from the same state rather than by a `dark:` variant, so it is right whatever the app's CSS
+ * calls dark. The accessible name says what pressing does, from `labels` or the English default.
+ */
+export const ThemeToggle = ({ labels, className, style }) => {
+    const { scheme, setChoice } = useColorScheme();
+    const dark = scheme === 'dark';
+    const label = dark
+        ? labels?.toLight ?? 'Switch to light mode'
+        : labels?.toDark ?? 'Switch to dark mode';
+    return _jsx("button", { type: "button", "data-theme-toggle": true, "data-scheme": scheme, "aria-label": label, title: label, onClick: () => setChoice(dark ? 'light' : 'dark'), className: cn(TOGGLE, className), style: style, children: dark ? _jsx(Moon, { className: "size-5", "aria-hidden": "true" }) : _jsx(Sun, { className: "size-5", "aria-hidden": "true" }) });
+};
+//# sourceMappingURL=toggle.js.map

package/build/components/scheme/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/scheme/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAG1C;;;;GAIG;AACH,MAAM,MAAM,GAAG;IACb,sFAAsF;IACtF,8EAA8E;IAC9E,2FAA2F;IAC3F,sCAAsC;CACvC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEX;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9C,MAAM,IAAI,GAAG,MAAM,KAAK,MAAM,CAAA;IAC9B,MAAM,KAAK,GAAG,IAAI;QAChB,CAAC,CAAC,MAAM,EAAE,OAAO,IAAI,sBAAsB;QAC3C,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,qBAAqB,CAAA;IAE3C,OAAO,iBACL,IAAI,EAAC,QAAQ,4CAAgC,MAAM,gBAAc,KAAK,EAAE,KAAK,EAAE,KAAK,EACpF,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EACjD,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YAE7C,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,iBAAa,MAAM,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,SAAS,EAAC,QAAQ,iBAAa,MAAM,GAAG,GAC/F,CAAA;AACX,CAAC,CAAA"}

package/build/components/scheme/types.d.ts

@@ -0,0 +1,21 @@
+import type { ColorSchemeChoice } from '../../scheme/scheme.js';
+import type { StyledProps } from '../types.js';
+export interface ColorSchemeModel {
+    /** What the page is showing: the stored choice, or the operating system's preference. */
+    scheme: 'light' | 'dark';
+    /** The visitor's explicit choice, or `null` while the page follows the operating system. */
+    choice: ColorSchemeChoice | null;
+    /** Choose — `null` clears the choice and hands the page back to the operating system. */
+    setChoice: (choice: ColorSchemeChoice | null) => void;
+}
+/** The toggle's accessible names — what pressing it DOES. English defaults when absent. */
+export interface ThemeToggleLabels {
+    /** Shown while the page is dark. Default "Switch to light mode". */
+    toLight?: string;
+    /** Shown while the page is light. Default "Switch to dark mode". */
+    toDark?: string;
+}
+export interface ThemeToggleProps extends StyledProps {
+    labels?: ThemeToggleLabels;
+}
+//# sourceMappingURL=types.d.ts.map