vue-dockable-desktop 1.3.0 → 1.5.1

package/CHANGELOG.md

@@ -11,6 +11,140 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.5.1] — 2026-10-01
+
+**Parity: react-dockable-desktop 7.4.1 fixes.** From a review of 1.5.0. No API changes.
+
+### Fixed
+
+- **A message's placeholder was replaced only once**: `'{n} of {n}'` read `'2 of {n}'`. The
+  default formatter replaces every `{key}` now, and the workspace's `format` uses the same
+  function instead of a copy of it.
+- **The window losing focus mid-drag left the drag armed.** After an alt-tab, the pointer
+  listeners, the drop target and `vdd-dragging-active` stayed, and the next release docked the
+  panel into the target it had been over. A `blur` now ends a tab drag (mouse or touch) and a
+  floating window's title-bar drag as a `pointercancel` does. `startPointerDrag` ends on `blur`
+  too, and takes an optional `onCancel`; the floating window's title bar uses it, so a cancel
+  no longer docks the window into the target it was over.
+- **Layout repair** drops a group's panel id that the layout's `panels` doesn't have, and gives
+  a split whose sizes don't match its children, or aren't finite positive numbers, even sizes
+  (they reached the style as `flex-basis: NaN%`). Each is named in the development warning.
+- **A throwing event subscriber stopped delivery to the others**, and threw into the action
+  that published — `loadLayout`, `openPanel`, a close. Each subscriber's error is logged with
+  `console.error`, naming the event, and delivery goes on.
+
+### Tests
+
+- `test/store/reviewFixes.test.ts` (placeholders, layout repair, the event bus) and
+  `test/components/dragBlur.test.ts` (mouse, touch and title-bar drags, with uninterrupted
+  drags as controls), ported from rdd 7.4.1's `Patch741.test.ts` and `DragBlur.test.tsx`. Each
+  seen failing before its fix and with it removed.
+
+## [1.5.0] — 2026-09-30
+
+**Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0–7.4.0's skin branding
+and field-report fixes.** From a consumer's field report: fixed dropdowns inside frosted windows,
+direction for the sidebar and toasts, translated titles, and a quieter restore.
+
+### Added
+
+- **Title functions**: a title (a panel's, a window's, a drawer's, a modal's, a widget's) can be
+  `() => string`. The library calls it each time it renders the title, so a function that reads
+  your locale ref follows a language change on its own — a translated *string* is fixed in the
+  language active when the panel opened. A function isn't saved in a layout: the restored panel
+  takes the title its type is registered with. `Label` is now
+  `string | MessageDescriptor | (() => string)`.
+- **Reduced motion**: the library's own transitions and animations stop when the user has asked
+  the system for reduced motion (`prefers-reduced-motion: reduce`), as with
+  `:animations="false"`. Your own are untouched.
+
+### Fixed
+
+- **A `position: fixed` element inside a frosted container was positioned against the
+  container, not the viewport** — so a dropdown, popover or date picker of yours inside a
+  floating window, a drawer, an overlay widget, a frosted panel toolbar or (in `macos`) a docked
+  panel opened in the wrong place, in some skins and not others. A `backdrop-filter` makes its
+  element the containing block for fixed content; the frost now sits on each container's
+  `::before` (with the background it tints, where the frost saturates). What is drawn is unchanged.
+- **`setDirection('rtl')` did not mirror the sidebar or the toasts**: they followed only the
+  page's `dir`. They follow the workspace into RTL now, and so does everything inside the sidebar
+  (a toolbar, your own chrome); while the workspace is left-to-right they still follow the page,
+  as before.
+- **A saved window with unusable geometry reached the window's style**: a `NaN` saved as `null`,
+  an `Infinity` or a missing size. Such values are replaced on load by the default a new floating
+  window gets, with a warning naming the window.
+
+### Tests
+
+- **M17 browser gate** (`scripts/gates/browser/m17.mjs`, real Chrome): a fixed child of each of
+  the 7 frosted cases lands on the viewport, and each renders as before within a small tolerance;
+  reduced motion stops every library transition and leaves the page's; the sidebar and toasts
+  follow `setDirection` and still follow the page while LTR.
+- `test/components/fieldReport.test.ts` (title functions, finite geometry) and
+  `test/core/stylesheet.test.ts` (the consumer content contract), ported from rdd 7.4.0.
+- The M15 colour and M16 corner baselines compare a frosted container's `::before` as its
+  element: where it is drawn changed, what is drawn did not.
+- M17 rules (`scripts/gates/m17.mjs`) and two selftest cases.
+
+### Documentation
+
+- Theming: Frosted glass and your own overlays; reduced motion under Animations. i18n: title
+  functions; the sidebar and toasts follow `setDirection`. Panels: objects that cross into Vue's
+  reactivity (`markRaw`, `shallowRef`, getters). ADR 0019; PARITY.md; the plan's M17.
+
+## [1.4.0] — 2026-09-30
+
+**Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0 and 7.3.0's skin
+branding.** Branding, part two: your own surfaces and corner shape on any built-in skin. See
+[Your surfaces](docs/manual/10-theming.md#your-surfaces) and [Corners](docs/manual/10-theming.md#corners).
+
+### Added
+
+- **`--vdd-brand-surface`** and **`--vdd-brand-text`**: set per scheme on `:root`, they replace
+  every built-in skin's backgrounds and text — the workspace, panels, tab bar, sidebar, floating
+  windows, modals, drawers, the taskbar, toasts, borders and muted text are all derived from the
+  two. Set both or neither: with only one set, every skin keeps its own surfaces. A skin keeps
+  its shape and effects (macOS's glass, Chrome's tabs, the VS Code accent bar) and each
+  translucent surface keeps the skin's own transparency; the accent, status colours and shadows
+  are not affected.
+- **`--vdd-radius-scale`**: multiplies every corner the library draws — `0` square, `1` each
+  skin's own (the default), `1.5` rounder. Circles and pills stay round. It also scales the
+  radius tokens you set yourself (`--vdd-panel-float-radius`, `--vdd-panel-toolbar-btn-radius`,
+  `--vdd-tab-btn-active-radius`).
+- Manual: **Your surfaces** and **Corners** under Brand your app, the corner habit for custom
+  skins, and the three variables in the token reference.
+
+### Fixed
+
+- **The workspace-edge drop preview was Bootstrap blue** (`#007bff`) in every skin, instead of
+  the skin's accent. It follows `--vdd-accent-color` and `--vdd-brand-accent` now. It shows only
+  while you drag a panel to a workspace edge.
+- **Colours no token reached**: the dock-target chips, the light-mode outline button (the
+  confirm dialog's Cancel) and the frosted panel toolbar painted literal colours in their own
+  rules. They read the surface tokens now, and follow a brand surface; unbranded they are
+  unchanged.
+
+### Tests
+
+- **M16 browser gate** (`scripts/gates/browser/m16.mjs`, real Chrome): the corner radii of every
+  library element and pseudo-element, in all 7 skins × dark/light, match a 1.3.0 baseline with
+  the scale unset, are `0px` at scale `0` and 1.5× at `1.5`, with circles and pills unchanged;
+  with a brand surface set, no colour of any skin's own palette remains — rendered, hovered or as
+  a token — the workspace, panel and tab bar stay distinct, and text on panels meets 4.5:1
+  (muted 3:1); with only one of the two set, a scene matches M15's baseline. M15's gate still
+  holds with no brand set.
+- `test/core/stylesheet.test.ts`, ported from rdd 7.3.0: every corner length is scaled and the
+  library never declares the scale; every coloured surface reads a derived value first, declared
+  only on `:root` and built on the guarded base; no element rule paints a colour of its own.
+- M16 rules (`scripts/gates/m16.mjs`) and two selftest cases. The M15 browser gate's scene
+  helpers moved to `scripts/gates/lib/branding-scenes.mjs`, shared with M16. The playground
+  takes `?bs=`, `?bt=` and `?rs=`.
+
+### Documentation
+
+- Theming chapter: Your surfaces, Corners, the fourth brandable-skin habit, token rows; README
+  snippet; ADR 0018; PARITY.md; the plan's M16.
+
 ## [1.3.0] — 2026-09-29
 
 **Parity: react-dockable-desktop 6.3.1, plus react-dockable-desktop 7.2.0's skin branding**

package/README.md

@@ -24,7 +24,7 @@ so a layout saved by either library loads in the other.
 > 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.1**, plus
-> rdd 7.2.0's skin branding — and feature by feature in [docs/PARITY.md](docs/PARITY.md).
+> rdd 7.2.0 and 7.3.0's skin branding — and feature by feature in [docs/PARITY.md](docs/PARITY.md).
 
 ## Install
 
@@ -35,7 +35,7 @@ npm install vue-dockable-desktop
 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 846 tests.
+is pinned by `api-surface.json` and covered by 851 tests.
 
 ## Quick start
 
@@ -117,8 +117,17 @@ localStorage.setItem('layout', ws.saveLayout())
   ```
 
   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)
+  `var(--bs-primary)` (Bootstrap). Your own surfaces and corner shape, too:
+
+  ```css
+  :root:not([data-color-scheme="light"]) {  /* dark: the attribute's absence */
+    --vdd-brand-surface: #0b1f3a;   /* app background — panels, bars and borders derive from it */
+    --vdd-brand-text: #e8eef7;      /* main text — set both, or neither */
+  }
+  :root { --vdd-radius-scale: 0; }  /* 0 square · 1 each skin's own · 1.5 rounder */
+  ```
+
+  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/core/dragResize.d.ts

@@ -21,8 +21,13 @@ export interface PointerDragConfig<TStart> {
     captureStart: () => TStart;
     /** Called on every pointermove with the delta from the drag's start position. */
     onMove: (dx: number, dy: number, start: TStart) => void;
-    /** Called once when the drag ends (pointerup or pointercancel). */
+    /** Called once when the drag ends (pointerup, or pointercancel and window blur when `onCancel` is absent). */
     onEnd?: (start: TStart) => void;
+    /**
+     * Called instead of `onEnd` when the drag is cancelled — a pointercancel, or the window losing
+     * focus (1.5.1) — for a drag whose release does something a cancel must not.
+     */
+    onCancel?: (start: TStart) => void;
     /** Classes toggled on the given elements for the duration of the drag. */
     activeClasses?: Array<{
         el: HTMLElement;

package/dist/core/layoutTree.d.ts

@@ -67,9 +67,10 @@ export declare function findLeaf(node: LayoutNode | null, leafId: string): Layou
  */
 export declare function isLoneOccupant(node: LayoutNode, leafId: string, panelId: string): boolean;
 /**
- * Heal a tree that lists a panel twice, or lists none of a docked panel.
+ * Heal a tree that lists a panel twice, or lists none of a docked panel — or, since 1.5.1, lists
+ * a panel the layout doesn't have, or gives a split sizes that don't fit its children.
  *
- * Both are states this library once produced and then *saved*: a lone docked panel dropped
+ * The first two are states this library once produced and then *saved*: a lone docked panel dropped
  * on its own group left rdd with the panel in two leaves and vdd with it in none, and
  * `saveLayout()` wrote the result out, so the fault returned on every reload. Repairing on
  * read means a layout stored by an affected version loads clean with nothing asked of the

package/dist/core/messages.d.ts

@@ -121,5 +121,8 @@ export declare const defaultMessages: {
  * that all keys are present and none are misspelled.
  */
 export type MessageKey = keyof typeof defaultMessages;
-/** Resolve a label with a formatter, falling back to its `defaultMessage` then its `id`. */
+/**
+ * Resolve a label with a formatter, falling back to its `defaultMessage` then its `id`, with each
+ * `{key}` replaced by its value — every occurrence (1.5.1; it replaced only the first).
+ */
 export declare function formatLabel(label: Label | undefined, format?: MessageFormatter): string;

package/dist/core/serialize.d.ts

@@ -18,6 +18,13 @@ export interface ParsedLayout {
     panels: Record<string, PanelInfo>;
     activePanelId: string | null;
 }
+/** The geometry a newly floated panel gets, and what a saved window's unusable geometry is repaired to. */
+export declare const DEFAULT_FLOAT_RECT: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 /**
  * Validate and normalise a parsed JSON payload, or return `null` if it is not a layout.
  *