vue-dockable-desktop 1.1.2 → 1.3.0

package/CHANGELOG.md

@@ -11,6 +11,157 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.3.0] — 2026-09-29
+
+**Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0's skin branding**
+(the same port angular-dockable-desktop 1.1.0 made). Put your company's colour and font on any
+built-in skin with a few CSS variables — no skin of your own needed. See
+[Brand your app](docs/manual/10-theming.md#brand-your-app).
+
+### Added
+
+- **`--vdd-brand-accent`**: set on `:root`, it replaces the accent of every built-in skin in dark
+  and light — tab indicators, active sidebar tabs and toolbar buttons, hover and active tints,
+  glows, the focused window's glow, the taskbar, the drop and snap highlights, the primary
+  button. Unset, each skin keeps its own accent.
+- **`--vdd-brand-on-accent`**: the text colour on a solid accent fill (the confirm dialog's
+  primary button, the highlighted dock target), for light brand colours such as yellow — in both
+  schemes. Defaults as before: `#090b11`, and `#ffffff` on the primary button in light mode.
+- **Per-skin fonts** through `--vdd-skin-font-family`: `vscode` uses VS Code's workbench font,
+  `macos` San Francisco, `chrome` Google's UI fonts, `slate` Fluent's Segoe UI stack, `nord` a
+  humanist sans (Avenir Next) and `tokyo` a monospace (JetBrains Mono); `obsidian` keeps the
+  library stack. All are system font stacks — the library still loads no fonts — and your own
+  `--vdd-font-family` replaces them all, teleported chrome included. `:root` now declares
+  `--vdd-font-family` as `var(--vdd-skin-font-family, 'Outfit', 'Inter', system-ui,
+  -apple-system, sans-serif)`.
+- Manual: **Brand your app** — the brand variables, a per-scheme brand colour, loading your own
+  font, following a UI framework's theme (PrimeVue, Bootstrap, Tailwind, shadcn-vue), where to
+  put a logo (a custom `headerAction` entry on `<VddSidebar>`), and how to keep a custom skin
+  brandable.
+
+### Changed
+
+- **Browser minimum**: CSS `color-mix()` — Chrome / Edge 111, Safari 16.2, Firefox 113 (all
+  2023). In an older browser the tinted hover and active highlights lose their colour; layout and
+  behaviour are unaffected.
+- **The default skin's font** is VS Code's workbench stack (`-apple-system, BlinkMacSystemFont,
+  'Segoe WPC', 'Segoe UI', …`) instead of `'Outfit', 'Inter', …`, which is now the fallback for
+  skins that set no font (`obsidian`, and custom skins). If you loaded Outfit for the library,
+  set `--vdd-font-family` to it. In `tokyo`, `nord`, `macos`, `chrome` and `slate` the font changes
+  too — and panel content inherits it, so in `tokyo` your panels turn monospace unless they set a
+  font of their own.
+- **Every tint of the accent is derived from it** (`color-mix()` of `--vdd-accent-color`) instead
+  of a hand-copied `rgba()`. With the built-in skins and no brand set, the look is unchanged
+  except for the fixes below.
+- `vscode` light mode has an accent of its own, `#0066cc` — the blue its light-mode tokens
+  already used. The primary button, the taskbar's peek handle and the other accent uses, which
+  were cyan on a light background, are that blue now. A custom skin that sets no accent gets it
+  in light mode too.
+- **Set the accent with `--vdd-brand-accent`, not `--vdd-accent-color`.** Every skin and the light
+  scheme declare `--vdd-accent-color` with a selector that also matches the workspace element, so
+  a `:root` override of it is replaced inside the workspace — now in `vscode` light mode as well,
+  where 1.2.0 had no light accent to replace it with.
+
+### Fixed
+
+- **Overriding `--vdd-accent-color` on `:root` had no effect in 6 of the 7 skins**: each skin
+  redeclared it on the workspace element. `--vdd-brand-accent`, which every skin reads first, is
+  the supported way to rebrand.
+- **Changing the accent left the old colour behind**: 142 hover, active and glow colours were
+  copies of a skin's accent written as fixed `rgba()` values. They follow the accent now.
+- **Skins showed colours that weren't theirs**: the default cyan (and `#0066cc` in light mode)
+  left in other skins — the taskbar hover glow, the dock preview and corner-snap highlights, the
+  floating-widget drop zones, the light-mode focused-tab indicator and taskbar text, the
+  `--vdd-sidebar-card-*` and `--vdd-sidebar-btn-front-*` tokens — now show each skin's own
+  accent. `slate` and `tokyo` drew their active states in a blue that wasn't their accent, and
+  `obsidian`'s panel toolbar in a violet; they use their accent now. `obsidian`'s dark-mode white
+  glows no longer show in light mode, where its accent is black.
+- **The rail and toolbar buttons ignored `--vdd-font-family`**: a `<button>` does not inherit a
+  font, so they drew their labels and badges in the browser's button font (Arial in Chrome) in
+  every skin. The library's own form controls inherit the chrome font now, as in rdd 6.4.0; your
+  own inputs and buttons inside a panel are left alone. Found by the M15 font check.
+
+### Tests
+
+- **M15 browser gate** (`scripts/gates/browser/m15.mjs`, real Chrome): with no brand set, the
+  computed colours of every library element, its pseudo-elements, 8 hover states and every token
+  (inside the workspace, in the toolbar outside it, and on `<body>`), in all 7 skins × dark/light
+  with the chrome opened, match a 1.2.0 baseline — except exactly the fixes above; with a brand
+  set, no trace of any original accent remains; a light brand with a dark on-accent colour is
+  readable on the primary button in dark and light; each skin's font reaches every piece of
+  chrome, and a brand font set on `:root` wins in every skin, teleported chrome included. Its
+  `--control` run (a skin that redeclares its accent and its font) is rejected.
+- `test/core/stylesheet.test.ts`, ported from rdd 7.2.0's branding contract: every
+  `--vdd-accent-color` reads `--vdd-brand-accent` first, nothing in the library declares a
+  `--vdd-brand-*` variable, no accent colour is written as a literal outside its one declaration,
+  only `:root` declares `--vdd-font-family`, and text on accent fills reads
+  `--vdd-brand-on-accent`.
+- M15 rules (`scripts/gates/m15.mjs`): the release files, ADR 0017, the manual's skin-font table
+  against the stylesheet, the browser minimum in the README and chapter 1, and PARITY.md.
+- The playground takes `?skin=`, `?cs=light`, `?ba=` / `?bon=` (brand variables before mount)
+  and `?anim=0`.
+- **The gate runner no longer mistakes another app for its own**: with another dev server on
+  the demo's port, `--strictPort` stopped vdd's demo from starting, the runner took the other
+  app's answer as ready, and M14 timed out waiting for the demo. It now waits for its own Vite's
+  ready line, moves to the next free port when the usual one is taken, and passes the URL to the
+  browser gates (`VDD_APP_URL`; the usual ports stay the default when a gate is run by hand).
+
+### Documentation
+
+- Theming chapter: **Brand your app**, **Skin fonts**, brandable custom skins (the demo's `mono`
+  skin now reads `--vdd-brand-accent` too), and the token reference (a branding table; tints
+  listed as "the accent at N%").
+- The browser minimum in the README and chapter 1; a Branding item in the README's features;
+  the rdd 7.2.0 names in the migration chapter; ADR 0017; PARITY.md.
+
+## [1.2.0] — 2026-09-24
+
+**Parity: react-dockable-desktop 6.3.1.**
+
+The remaining items from the user bug report that 1.1.2 left for a minor release: they add
+behaviour, change a default, or extend a public type.
+
+### Added
+
+- **Tabs work from the keyboard.** Each tab group is one stop in the Tab order — its selected
+  tab. ArrowLeft and ArrowRight move to the previous or next tab and show it, wrapping, and
+  mirrored under RTL; Delete closes the focused tab, asking first if it has unsaved changes.
+  The tab strip is a `tablist` and the body a `tabpanel`; a tab's close × is hidden from
+  assistive technology, since Delete and the menu's Close cover it. A focus ring shows for
+  keyboard focus only.
+
+- **The context menu works from the keyboard.** It takes focus when it opens; ArrowDown and
+  ArrowUp move between enabled items, Enter or Space runs one, and Tab or Escape closes it.
+  Closing from the keyboard, or by running an item, hands focus back to whatever had it. A
+  submenu now also opens on click, which helps on touch screens. A custom menu slot manages
+  its own focus.
+
+- **`--vdd-font-family`, one token for the font of all library chrome.** Set it to change the
+  font of the workspace, sidebar, toolbar, modals, side panels, toasts, menus and flyouts in
+  one place, or to `inherit` to use your page's font. See the theming chapter.
+
+- **Two message keys: `notifications` and `closeNotification`.** The toast region's
+  accessible name and a toast's close button were hard-coded English, as was the sidebar
+  drawer's close button (now the existing `close` key). They go through the message table and
+  formatter like every other string, and fall back to English where there is no workspace.
+
+- **`<VddDesktop>` can be set up without a DOM.** Server-rendering it threw
+  `document is not defined` and took the whole page render down. It now renders the chrome and
+  leaves the panels to the client. `<ClientOnly>` remains the supported setup under Nuxt or
+  other SSR, and the getting-started chapter says so.
+
+### Changed
+
+- **The chrome's default font.** The context menu used the system font stack while the rest of
+  the chrome used the workspace's, and everything rendered outside the workspace — the sidebar
+  and toolbar around it, modals, side panels, toasts, menus and flyouts — took the host page's
+  body font. All of it now uses `--vdd-font-family`, which defaults to the workspace's stack.
+  To keep the page's font, set `--vdd-font-family: inherit`.
+
+- **`MessageKey` has two more keys.** A table typed `Record<MessageKey, string>`, as the i18n
+  chapter recommends, fails to compile until it adds `notifications` and `closeNotification`.
+  That is the check doing its job; partial `messages` overrides are unaffected.
+
 ## [1.1.2] — 2026-09-24
 
 **Parity: react-dockable-desktop 6.3.1.**

package/README.md

@@ -23,8 +23,8 @@ so a layout saved by either library loads in the other.
 > **Versioning.** vdd follows its own semver, independently of `react-dockable-desktop`:
 > matching the two numbers would be a promise that breaks the first time either library needs
 > a breaking change the other does not. Which rdd release a given version corresponds to is
-> stated per release in [CHANGELOG.md](CHANGELOG.md) — this one tracks **rdd 6.3.0** — and
-> feature by feature in [docs/PARITY.md](docs/PARITY.md).
+> stated per release in [CHANGELOG.md](CHANGELOG.md) — this one tracks **rdd 6.3.1**, plus
+> rdd 7.2.0's skin branding — and feature by feature in [docs/PARITY.md](docs/PARITY.md).
 
 ## Install
 
@@ -32,9 +32,10 @@ so a layout saved by either library loads in the other.
 npm install vue-dockable-desktop
 ```
 
-Requires Vue 3.4+. No other runtime dependencies. The published package is
+Requires Vue 3.4+, and a browser with CSS `color-mix()` (Chrome / Edge 111, Safari 16.2,
+Firefox 113 or later). No other runtime dependencies. The published package is
 [`vue-dockable-desktop`](https://www.npmjs.com/package/vue-dockable-desktop); the public API
-is pinned by `api-surface.json` and covered by 730 tests.
+is pinned by `api-surface.json` and covered by 846 tests.
 
 ## Quick start
 
@@ -103,7 +104,21 @@ localStorage.setItem('layout', ws.saveLayout())
 - **Panel overlay** — anchored toolbars and floating widgets inside a single panel
 - **Overlays** — side panels, a modal stack, dirty-close confirmation, and toasts
 - **Layout serialisation** — save and restore the whole workspace as a JSON string
-- **Theming** — built-in skins, light/dark colour schemes, all `--vdd-*` CSS variables
+- **Theming** — built-in skins, each with its own font, light/dark colour schemes, all
+  `--vdd-*` CSS variables
+- **Branding** — your company's colour and font on any built-in skin, from three variables:
+
+  ```css
+  :root {
+    --vdd-brand-accent: #e4002b;                 /* every accent use, in every skin, dark and light */
+    --vdd-brand-on-accent: #ffffff;              /* text on a brand-coloured fill — a dark one for light brands */
+    --vdd-font-family: 'Acme Sans', sans-serif;  /* your font (the library loads none) */
+  }
+  ```
+
+  Point them at your UI framework's theme to follow it — `var(--p-primary-color)` (PrimeVue),
+  `var(--bs-primary)` (Bootstrap). See
+  [Brand your app](docs/manual/10-theming.md#brand-your-app)
 - **i18n and RTL** — every string is a message key; `dir="rtl"` flips the whole workspace
 - **TypeScript-first** — complete types, no separate `@types` package
 

package/dist/composables/useLibraryMessage.d.ts

@@ -0,0 +1,10 @@
+import type { MessageKey } from '../core/messages';
+/**
+ * One of the library's own strings, for a component that may render with no workspace.
+ *
+ * Toasts work from anywhere and a sidebar can stand alone, so these cannot `useWorkspace()`,
+ * which throws without one. With a workspace the string goes through its message table and
+ * formatter, exactly as every other library label does; without one it is the English
+ * default. Call the returned function during render, so a locale change is followed. @internal
+ */
+export declare function useLibraryMessage(): (key: MessageKey) => string;

package/dist/core/messages.d.ts

@@ -107,6 +107,14 @@ export declare const defaultMessages: {
         readonly id: "vdd.search";
         readonly defaultMessage: "Search";
     };
+    readonly notifications: {
+        readonly id: "vdd.notifications";
+        readonly defaultMessage: "Notifications";
+    };
+    readonly closeNotification: {
+        readonly id: "vdd.closeNotification";
+        readonly defaultMessage: "Close notification";
+    };
 };
 /**
  * Every message key. Import it in your own message table to get a compile-time guarantee

package/dist/core/panelDom.d.ts

@@ -13,7 +13,7 @@
  * workspaces on a page shared panel DOM.
  */
 export declare class PanelDomCache {
-    private readonly doc;
+    private readonly ownerDocument?;
     private elements;
     /**
      * Preserved state, **owned per panel and outliving the hidden period**.
@@ -34,7 +34,13 @@ export declare class PanelDomCache {
      */
     private sizes;
     private hidden;
-    constructor(doc?: Document);
+    /**
+     * The document is looked up on first use, not in a parameter default: constructing the cache
+     * then touches nothing, so `<VddDesktop>` can be set up where there is no DOM (server
+     * rendering) as long as no panel element is asked for.
+     */
+    constructor(ownerDocument?: Document | undefined);
+    private get doc();
     /** The off-screen store. Panels live here while minimised, and before their first host. */
     hiddenStore(): HTMLElement;
     /**