uhuu-components 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -7,6 +7,29 @@ All notable changes to the `uhuu-components` Storybook workspace are documented
 - `package.json` declares the Node floor (>=24) and the package-manager pin (pnpm@10.30.3) the ecosystem
   toolchain policy measures. Metadata only; the dependency resolution is unchanged.
 
+## 0.3.3 (unreleased)
+
+### Added
+
+- The editor shell's chrome follows the host's light or dark appearance: the stage behind the
+  pages, page labels and their menus, the floating page toolbar and zoom menu, the add and reorder
+  sheets, notices and the stage's scrollbars. Pages, and the page thumbnails in the sheets, stay
+  paper. Inside the uhuu document editor the shell takes `?appearance=light|dark` from the template
+  URL before the first render, then `appearance` in the handshake answer (`shaked`, re-emitted by
+  the SDK as `loaded`), then `{ action: 'appearance', data: { appearance } }` when the user
+  switches; it reads the editor's messages itself, so templates that pin an older SDK follow too.
+  Light by default; never a cookie or the OS preference; the renderer is always light. No new
+  exports: `InteractiveModeProvider` takes `appearance` to force one, and `useInteractive()`
+  reports the resolved `appearance` for template-owned chrome. Dark values mirror `@uhuuio/theme`
+  (not a dependency). See `docs/editor-shell-appearance.md`.
+
+### Changed
+
+- Chrome surfaces draw with a shell token instead of `bg-white` (`bg-(--uhuu-shell-surface)`, and
+  `text-(--uhuu-shell-on-inverse)` on dark buttons); the light look is pixel-identical.
+- Chrome roots without `data-uhuu-editor` (the "added" notice, `Section`'s default header, the
+  legacy `PageResizer` controls, the drag grid's debug box) now carry it.
+
 ## 0.3.2 (unreleased)
 
 ### Fixed

package/README.md

@@ -7,7 +7,7 @@ React components for printable documents with fixed pages, static flow paginatio
 ## Install
 
 ```sh
-npm install uhuu-components@^0.3.2 react react-dom
+npm install uhuu-components@^0.3.3 react react-dom
 ```
 
 The delivery package declares React and React DOM `^18.0.0 || ^19.0.0` peers. Both must use the same React installation. Local owning verification uses React 19; the declared React 18 range is not evidence of a tested React 18 release. UI dependencies are bundled; React and React DOM remain external. No Next dependency is required by the delivery package.
@@ -47,6 +47,8 @@ Dialog click handlers are omitted in renderer mode. Empty text bindings remain e
 
 The shell's own words ship in German, French, Italian and English and follow the host's language; `InteractiveModeProvider` takes `locale` and `translations` to pin, override or add a language, and template labels accept one string per language. See [editor shell translations](https://github.com/uhuuio/uhuu-storybook/blob/main/docs/editor-shell-translations.md).
 
+The shell's chrome follows the host's light or dark appearance (`?appearance=`, then the uhuu document editor's handshake and live changes); pages stay paper. `InteractiveModeProvider` takes `appearance` to force one and `useInteractive().appearance` lets template-owned chrome follow. See [editor shell appearance](https://github.com/uhuuio/uhuu-storybook/blob/main/docs/editor-shell-appearance.md).
+
 ## Images and BrandKit
 
 Use public `ImageBlock` with `mode="bleed"`, `mode="spread"` or `mode="auto"`; internal ImageBleed and ImageSpread components are not package exports. `imageUrl` provides print-aware thumbnail URLs and preserves SVG/data/relative URLs.

package/index.d.ts

@@ -471,8 +471,16 @@ export interface InteractiveModeContextValue {
   enableDevTools?: boolean;
   /** The shell's resolved interface language (`de`, `fr`, `it`, `en`, or what the template passed). */
   locale: string;
+  /**
+   * The shell chrome's resolved appearance, so template-owned chrome (a floating button, a panel)
+   * can follow it. Pages are paper: never style document content with it.
+   */
+  appearance: EditorShellAppearance;
 }
 
+/** The editor shell's chrome appearance (docs/editor-shell-appearance.md). */
+export type EditorShellAppearance = "light" | "dark";
+
 /**
  * A label as one string, or one string per language: `{ en: 'Cover', de: 'Titelseite' }`.
  * Accepted wherever `templateConfig` and `pageOptions` take a `label` (pages, groups, options,
@@ -498,6 +506,12 @@ export interface InteractiveModeProviderProps {
    * does not ship: `{ de: { toolbar: { add: 'Neu' } }, rm: romanshCatalog }`. Pass a stable object.
    */
   translations?: Record<string, EditorShellTranslations>;
+  /**
+   * Forces the shell chrome's appearance. Default: the host's (the uhuu document editor's
+   * handshake `appearance` and later `appearance` messages), then `?appearance=`, then `light`.
+   * Pages never follow it.
+   */
+  appearance?: EditorShellAppearance;
 }
 
 export interface BrandKitOption {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.2",
+  "version": "0.3.4",
   "name": "uhuu-components",
   "main": "uhuu-components.umd.cjs",
   "module": "uhuu-components.es.js",