vue-dockable-desktop 1.7.2 → 1.8.1

package/CHANGELOG.md

@@ -11,6 +11,108 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.8.1] — 2026-10-05
+
+**Parity: react-dockable-desktop 7.7.1.** Two desktops on one page no longer strip each other's
+skin.
+
+### Fixed
+
+- **Unmounting one desktop stripped `<html>` of the other's skin, animations opt-out and stacking
+  base** (`data-vdd-skin`, `vdd-no-animations`, `--vdd-z-base`), and each desktop overwrote the
+  other's while both were mounted. The most recently mounted desktop now decides these, and
+  unmounting it hands them back to the others instead of removing them. Teleported chrome (menus,
+  toasts, flyouts, modals) therefore follows the newest desktop's skin when two desktops use
+  different skins.
+
+rdd 7.7.1 also fixed panel DOM, sizes and lifecycle handlers shared between workspaces. None of it
+applied here: vdd's panel cache has been per desktop from the start.
+
+### Internal
+
+Faster checks, the same checks. Nothing in the published package changes.
+
+- **`npm run verify`** — types, lint and the test suite, about a minute: the check to run while
+  working. **`npm run gate:release`** — the coverage sweep, then every milestone gate M1–M17 in
+  one call: the check to run before a release.
+- **`npm run gate -- M13 M15 M16`** runs several milestones on one standing gate (types, lint,
+  tests, build…) instead of repeating it for each. Each step's time is recorded in
+  `artifacts/M<n>/gate.json`.
+- **The branding gates wait for the page to be still instead of sleeping.** A scene, the overlays
+  and each hover now wait until nothing is animating or changing, with the old sleep as the
+  ceiling; the wait after the pointer leaves a control stays fixed, since the timers it starts are
+  invisible to such a check. M16 checks its three corner scales on one page per scene, and no
+  longer runs the hover walk for corners, which never read it. M15 captures a scene twice only
+  for an unexpected difference. Rewriting both baselines with the new code gave byte-identical
+  fixtures.
+- **The baselines key elements by library class, not position**, so a new wrapper element no
+  longer renames everything after it (this release's dialog row renamed a whole modal). Both
+  fixtures were regenerated once: every scene has the same entries with identical values, under
+  the new keys.
+- **`gate:selftest` leaves the tree fresh**: it rebuilds `dist/` and re-runs the coverage sweep at
+  the end, so a following M13 never reads the report a seeded violation left behind.
+- **Three stale milestone rules updated** ([0020](docs/decisions/0020-stale-milestone-rules.md)):
+  M2 still required `src/core/rtl.ts`, deleted at M13 as dead code; M5 looked for the window clamp
+  where it no longer lives; M6 expected the pre-1.1.2 side for an RTL tab drop. Each keeps its
+  intent and checks today's code, and the new M2 and M5 rules have seeded violations in the
+  selftest (100 rules).
+
+| | before | after |
+|---|---|---|
+| every gate, M1–M17 | ≈26 min (17 standing gates) | ≈9 min (one) |
+| M16 browser gate | 435 s | 137–145 s |
+| M15 browser gate | 236 s | 173–183 s |
+| while working | a gate run | `npm run verify`, ≈1 min |
+
+## [1.8.0] — 2026-10-05
+
+**Parity: react-dockable-desktop 7.7.0.** Ready-made dialogs: the confirmation shows an icon,
+a new alert dialog, and both as promises.
+
+### Added
+
+- **`<VddConfirm>` shows an icon left of its message**: a question mark, coloured by
+  `alertType` (info, success, warning, danger) with the toast colour tokens. The new `icon` prop
+  replaces it with your own component; `icon: null` hides it.
+- **`<VddAlert>`**: a message with a single OK button, for telling rather than asking. Its icon
+  follows `alertType`, with the same `icon` override. Props: `message`, `alertType`, `icon`,
+  `okLabel`, `onSettled`. Focus starts on OK and Enter presses it; Escape, the backdrop and the ×
+  acknowledge it too, unless the modal is `closable: false`. Button hook: `data-vdd-alert-ok`.
+- **`useModals().confirm(options)` and `useModals().alert(options)`** open those dialogs (size
+  `small`) and return a promise: `confirm` resolves `true` for the confirm button and `false` for
+  cancel or any dismissal; `alert` resolves once it is closed. Option types: `ConfirmOptions`,
+  `AlertOptions`.
+- **Message keys `confirmTitle`** ("Confirmation") **and `alertTitle`** ("Information"), the
+  helpers' default titles. A table typed `Record<MessageKey, string>` needs the two new keys.
+- New classes: `vdd-dialog-content`, `vdd-dialog-icon`, `vdd-dialog-icon-{info|success|warning|danger}`.
+
+rdd 7.7.0 also fixed an `RddConfirm` that never answered when dismissed, and one that overwrote
+the modal's header icon. Neither applied here: `<VddConfirm>` already settled on unmount and
+never set a header icon.
+
+### Upgrading
+
+- A confirmation now draws a question mark beside its message. Pass `icon: null` to keep the
+  old look.
+- The line under a confirmation's message is now the border of the new icon row,
+  `.vdd-dialog-content`, so it spans the icon too; it was `.vdd-confirmation-message`'s own
+  `border-bottom`. A stylesheet that restyled that border should target `.vdd-dialog-content`.
+
+### Tests
+
+- `test/components/dialogs.test.ts`: settle-once for every exit of both dialogs (Escape,
+  backdrop, ×, `closeAllModals`, `close(id)`, the buttons); default, custom and hidden icons;
+  the header icon left alone; alert focus, label and `closable: false`; both promise helpers.
+  Each assertion was seen failing with its code removed.
+- M10 checks that `<VddAlert>` settles on unmount and only once (with a selftest mutation). The
+  non-vacuity selftest now blanks `contributions.test.ts`: `useOverlays.ts` is reached by the new
+  dialog tests too, so blanking `useOverlays.test.ts` no longer leaves a module unexecuted.
+- `test/core/stylesheet.test.ts`: every dialog-icon class has a rule coloured from a toast token,
+  and the separator is the icon row's border, not the message's (seen failing with each removed).
+- The M15 colour baseline (`scripts/gates/browser/fixtures/m15-branding-baseline.json`, which M16
+  also reads) is regenerated on purpose: its scenes include a confirmation, whose message now sits
+  in the icon row. Nothing outside that modal changed.
+
 ## [1.7.2] — 2026-10-04
 
 **Parity: react-dockable-desktop 7.6.2.**

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

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+import type { AlertType, Label } from '../types';
+type __VLS_Props = {
+    message: Label;
+    /** Picks the built-in icon and its colour. */
+    alertType?: AlertType;
+    /** Omit it for the built-in icon of `alertType`, pass `null` for none, or pass a component. */
+    icon?: Component | null;
+    /** The button label. Defaults to the `ok` message. */
+    okLabel?: Label;
+    /** Called exactly once, whichever way the dialog closes. */
+    onSettled?: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: Component | null;
+    alertType: AlertType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,3 +1,4 @@
+import type { Component } from 'vue';
 import type { AlertType, Label } from '../types';
 type __VLS_Props = {
     message: Label;
@@ -10,8 +11,14 @@ type __VLS_Props = {
     onCancel?: () => void;
     /** Called exactly once, whichever way the dialog closes. `ok` says which. */
     onSettled?: (ok: boolean) => void;
+    /**
+     * The icon left of the message (1.8.0): omit it for the built-in question mark, pass `null`
+     * for none, or pass a component. Coloured by `alertType`.
+     */
+    icon?: Component | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: Component | null;
     alertType: AlertType;
     yesNo: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,16 @@
+/**
+ * The icon slot left of a dialog's message (1.8.0). `icon` undefined draws the built-in icon —
+ * a question mark for a confirmation, the type's icon for an alert — `null` draws nothing, and a
+ * component is drawn in its place. Coloured by `vdd-dialog-icon-${type}`; the glyphs use
+ * currentColor, on the same grid as the toast icons.
+ */
+import type { Component } from 'vue';
+import type { AlertType } from '../types';
+type __VLS_Props = {
+    icon: Component | null | undefined;
+    type: AlertType;
+    question?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useOverlays.d.ts

@@ -1,5 +1,28 @@
 import type { Component, ComputedRef } from 'vue';
 import type { ModalOptions, OverlayInstance, SidePanelOptions } from '../core/overlays';
+import type { AlertType, Label } from '../types';
+/** Options of `useModals().confirm()`. The title defaults to the `confirmTitle` message. */
+export interface ConfirmOptions {
+    message: Label;
+    title?: Label;
+    alert?: string;
+    alertType?: AlertType;
+    icon?: Component | null;
+    /** Label the buttons "Yes"/"No" rather than "OK"/"Cancel". */
+    yesNo?: boolean;
+    /** @default 'small' */
+    size?: ModalOptions['size'];
+}
+/** Options of `useModals().alert()`. The title defaults to the `alertTitle` message. */
+export interface AlertOptions {
+    message: Label;
+    title?: Label;
+    alertType?: AlertType;
+    icon?: Component | null;
+    okLabel?: Label;
+    /** @default 'small' */
+    size?: ModalOptions['size'];
+}
 /**
  * The modal stack.
  *
@@ -25,6 +48,13 @@ export declare function useModals(): {
         force?: boolean;
     }) => Promise<void>;
     closeAll: () => void;
+    /**
+     * Open a `<VddConfirm>` (1.8.0). Resolves `true` for the confirm button, `false` for cancel and
+     * for any dismissal — Escape, the backdrop, the ×, or a close by code.
+     */
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    /** Open a `<VddAlert>` (1.8.0). Resolves once it is closed, however. */
+    alert: (options: AlertOptions) => Promise<void>;
 };
 /**
  * The two side drawers.

package/dist/core/documentMirror.d.ts

@@ -0,0 +1,30 @@
+/**
+ * What a desktop mirrors onto `<html>`: its skin, its animations opt-out and its stacking base.
+ *
+ * Chrome teleported to `document.body` (menus, toasts, flyouts, modals) can only inherit these from
+ * the document, so they are written there. The document is shared by every desktop on the page, which
+ * is why this module keeps state at module level, per document — and why it is a stack of owners
+ * rather than a plain write: with two desktops mounted, each used to overwrite the other, and
+ * unmounting either one removed the values for the one still on screen.
+ *
+ * Each field shows the most recently mounted owner that claims it. Releasing the last claim of a field
+ * removes it from `<html>`, as a single desktop always did. A field nobody claims is never touched, so
+ * a value the page set itself survives. rdd 7.7.1's `src/utils/documentMirror.ts` is the same rule.
+ */
+export interface DocumentMirrorValues {
+    /** `data-vdd-skin`. An empty value claims "no skin attribute". */
+    skin?: string | null;
+    /** The `vdd-no-animations` class. */
+    noAnimations?: boolean;
+    /** `--vdd-z-base`. */
+    zBase?: number;
+}
+type Field = keyof DocumentMirrorValues;
+/**
+ * Claims (or updates) `owner`'s values. A first claim puts the owner on top; an update keeps its
+ * place, so changing one desktop's skin never lets it jump over a desktop mounted after it.
+ */
+export declare function claimDocumentMirror(owner: object, values: DocumentMirrorValues, doc?: Document): void;
+/** Releases `owner`'s claim on `fields`; the owner leaves the stack once it claims nothing. */
+export declare function releaseDocumentMirror(owner: object, fields?: readonly Field[], doc?: Document): void;
+export {};

package/dist/core/messages.d.ts

@@ -87,6 +87,14 @@ export declare const defaultMessages: {
         readonly id: "vdd.ok";
         readonly defaultMessage: "OK";
     };
+    readonly confirmTitle: {
+        readonly id: "vdd.confirmTitle";
+        readonly defaultMessage: "Confirmation";
+    };
+    readonly alertTitle: {
+        readonly id: "vdd.alertTitle";
+        readonly defaultMessage: "Information";
+    };
     readonly closeTooltip: {
         readonly id: "vdd.closeTooltip";
         readonly defaultMessage: "Close";