vue-dockable-desktop 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -11,6 +11,151 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.6.0] — 2026-10-04
+
+**Parity: react-dockable-desktop 7.5.0.** Toolbar buttons: the library sizes the icon inside its
+own buttons, and a toggle that is on can be told from one that is off at a glance, on chrome and
+over panel content alike. No props were added or removed; everything new is a CSS custom property.
+
+### Added
+
+- **Icon size tokens.** `--vdd-panel-toolbar-icon-size` (`20px`) sizes icons in
+  `<VddPanelToolbar>` buttons and toggles; `--vdd-chrome-icon-size` (`22px`) sizes them in the
+  workspace toolbar and the sidebar rail. Icon fonts follow the button's `font-size`; SVG icons
+  follow the token's width and height, even when the SVG has its own `width`/`height` attributes.
+- **`soft` chip tokens**: `--vdd-panel-toolbar-btn-bg`, `--vdd-panel-toolbar-btn-bg-hover`,
+  `--vdd-panel-toolbar-btn-border`.
+- **Workspace toolbar toggle tokens**: `--vdd-toolbar-btn-toggle-active-color` and
+  `--vdd-toolbar-btn-toggle-active-border`.
+
+### Changed
+
+- **Panel toolbar "on" state** is a solid chip with a white icon, the same in every
+  `buttonVariant`: in dark the accent mixed 65% with black, in light the plain accent. The icon is
+  `--vdd-brand-on-accent` when a brand sets it. It clears WCAG's 3:1 non-text contrast. Before, it
+  was a 14–15% accent tint.
+- **`buttonVariant="soft"`** is a near-opaque chip with a hairline edge, readable over panel
+  content. Before, it was a 6% (dark) / 4% (light) wash.
+- **Workspace toolbar toggle "on"**: the accent tint goes from 6–8% to 22% (dark) / 16% (light),
+  with a 1px accent edge and the accent icon.
+- **Icons in toolbar and rail buttons are larger by default**: 20px in panel toolbars, 22px in
+  the workspace toolbar and rail.
+
+### Fixed
+
+- **Keyboard focus was invisible on toolbar and rail buttons**: `.vdd-toolbar-btn` and
+  `.vdd-sidebar-tab-btn` removed the outline with nothing in its place. They, and panel toolbar
+  buttons, show a focus ring for keyboard focus now (`--vdd-focus-ring`, default a 2px accent
+  outline), as rdd does.
+- **`filled` toggles looked the same on and off**; it now rests on an accent tint with an accent
+  edge, and "on" is the solid chip.
+- **vscode and macos painted a white hover tint in light mode** on panel toolbar buttons; it now
+  applies in dark only.
+- **`buttonSize` was documented as the icon size.** It sets the button size.
+- The theming chapter no longer claims a coarse-pointer rule enlarges panel toolbar buttons.
+
+### Upgrading
+
+- Remove per-icon sizes inside toolbar and rail buttons (`width`/`height` props, inline sizes):
+  set `--vdd-panel-toolbar-icon-size` / `--vdd-chrome-icon-size` instead. An inline `style` size
+  still wins over the tokens.
+- If you added shadows to keep toolbar icons readable over panel content, remove them and use
+  `button-variant="soft"` or a `frosted`/`solid` toolbar.
+- To restyle "on", set `--vdd-panel-toolbar-btn-active-bg` and `--vdd-panel-toolbar-btn-active-color`
+  (recipes in the panel overlay chapter).
+
+### Documentation
+
+- Panel overlay chapter: "Styling toolbar buttons" (what the library owns, icon sizes, variants,
+  the "on" tokens, recipes); corrected `buttonSize`.
+- Theming chapter: new icon and toggle tokens; panel toolbar defaults updated.
+
+### Demo
+
+- "Toolbar Buttons" panel (Control Center → open): every `buttonVariant` in every state over
+  light, dark and busy content, with icon-size sliders.
+
+## [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

package/dist/components/VddPanelToolbar.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     variant?: ToolbarVariant;
     /** Inherited by this toolbar's buttons unless they override it. @default 'ghost' */
     buttonVariant?: ButtonVariant;
-    /** Icon button size in pixels. Left to the stylesheet when unset. */
+    /** Button size in pixels (sets `--vdd-panel-toolbar-btn-size`). The icon inside follows `--vdd-panel-toolbar-icon-size`. Left to the stylesheet when unset. */
     buttonSize?: number;
 };
 declare var __VLS_1: {};

package/dist/components/VddToolbarButton.vue.d.ts

@@ -1,4 +1,4 @@
-/** An icon button for a `<VddPanelToolbar>`. The icon is a slot, so anything renders. */
+/** An icon button for a `<VddPanelToolbar>`. The icon is a slot, so anything renders; pass it no size, the library sizes it with `--vdd-panel-toolbar-icon-size`. */
 type __VLS_Props = {
     /** Tooltip and accessible name. */
     title?: string;

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.
  *