vue-dockable-desktop 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -11,6 +11,73 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.11.0] — 2026-10-07
+
+**Parity: react-dockable-desktop 7.10.0.** Your own tab content, and an opt-in typed panel registry.
+Both opt-in: without them nothing changes. Same names as rdd 7.10.0.
+
+### Added
+
+- **The `#tab-content` slot on `<VddDesktop>`: your own tab content.** It replaces what's inside every
+  tab in the grid: the icon, the title and the dirty marker. The slot receives a `TabContentProps`:
+  `{ panelId, component, title, icon, dirty, selected, focused }`, with `title` already formatted
+  and `icon` the registration's (or `undefined`), so the built-in look is one line to start from.
+  Branch on `component` for a per-kind look. The tab itself stays the library's: dragging, keyboard
+  navigation, `role="tab"`, its context menu, state attributes and classes, and the close button.
+  Floating-window title bars and the taskbar are unchanged. New type: `TabContentProps`.
+- **`definePanels()`: a typed panel registry, opt-in.** Wrap the `panels` map in `definePanels({…})`
+  and the workspace `createWorkspace` returns has a typed `openPanel`: only registered names are
+  accepted, and `props` is checked against that panel's props (without `panelId`). It returns its
+  argument unchanged; the typing is compile-time only. With typed events too, pass both:
+  `createWorkspace<typeof panels, AppEvents>({ panels })`. `useWorkspace()` stays untyped. A plain map
+  keeps its types exactly. New types: `TypedWorkspace`, `PanelMap`, `PanelPropsOf`.
+
+### Docs
+
+- The API reference now names `PanelDrop` and `PanelDropTarget` (added in 1.10.0).
+
+## [1.10.0] — 2026-10-06
+
+**Parity: react-dockable-desktop 7.9.0.** Control over where users can move panels: per-kind rules and
+an app-wide veto, all opt-in. Without them nothing changes, and the app's own calls are never
+restricted. Same names as rdd 7.9.0.
+
+### Added
+
+- **`canFloat` and `canDock` per kind**, next to `canDrag`, `canMinimize` and `canClose`.
+  `canFloat: false` keeps a panel in the grid: a tab drag can't end in a floating window, and
+  "Float Window" and the taskbar's "Maximize" are hidden. `canDock: false` keeps a panel floating:
+  dragging it offers no group, tab or edge targets.
+- **`canDrop`, an app-wide veto.** `createWorkspace({ canDrop: ({ panelId, component, to }) => boolean })`
+  is asked for every place a dragged panel could go, and for the "Float" and "Maximize" menu items;
+  `to` is a `PanelDropTarget` (a group, an edge, or a float). A forbidden target isn't offered, and
+  it's asked again at release. Positions and corners are the ones the move applies, mirrored under
+  RTL. If it throws, the move is allowed and the error is logged. New types: `PanelDrop`,
+  `PanelDropTarget`.
+- Both apply only to what the user does; the app's own calls always work.
+
+### Fixed
+
+- **A drag built on `startPointerDrag` could outlive its element.** It ended on pointerup,
+  pointercancel and window blur, but not when the capturing element was removed mid-drag (an
+  overlay widget closed during its own drag), which left its listeners attached and its classes on
+  the page. It now also ends on a lost pointer capture, listened for on the document, where browsers
+  fire it; `onCancel` runs if given.
+
+### Docs
+
+- Layout (Chapter 4): **Controlling where users can move panels**. Panels (Chapter 3) and the API
+  reference: the new options. `PARITY.md`: the rdd 7.9.0 trace.
+
+### Tests
+
+- `test/components/releaseB.test.ts` (12 tests): `canFloat` (no float on nothing, no corners, no
+  "Float Window" or "Maximize" from a group, the app's `floatPanel` still works), `canDock` (no group
+  or edge targets, only corners), `canDrop` (its argument, vetoed zones and edges not offered, RTL
+  positions, tab insertion into a vetoed group, rules changed mid-drag for zones and tabs, a throwing
+  `canDrop`, no rules meaning every target), and `startPointerDrag` ending on a lost capture. Each
+  rule was seen failing with it broken. `api-surface.json` gains the two types.
+
 ## [1.9.0] — 2026-10-06
 
 **Parity: react-dockable-desktop 7.8.0.** More control over how the desktop looks and where panels

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

@@ -1,4 +1,5 @@
 import type { TaskbarVisibility } from './VddTaskbar.vue';
+import type { TabContentProps } from '../types';
 type __VLS_Props = {
     /** Built-in skin, or a name you scope your own tokens to. @default 'vscode' */
     skin?: string;
@@ -15,9 +16,15 @@ type __VLS_Props = {
     /** Fallback icon for panels that register none. */
     defaultPanelIcon?: unknown;
 };
-declare var __VLS_13: {};
-type __VLS_Slots = {} & {
-    'empty-workspace'?: (props: typeof __VLS_13) => any;
+type __VLS_Slots = {
+    /** Your view while no panel is docked (1.9.0). */
+    'empty-workspace'?: () => unknown;
+    /**
+     * Your own content for each tab in the grid (1.11.0): it replaces the built-in icon, title and
+     * dirty marker. The tab itself (dragging, keyboard, accessibility, its menu, the close button)
+     * stays the library's. Branch on `tab.component` for a per-type look.
+     */
+    'tab-content'?: (tab: TabContentProps) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     taskbarContextMenu: (panelId: string, event: MouseEvent | PointerEvent) => any;

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

@@ -1,10 +1,10 @@
-import type { LayoutLeafNode } from '../types';
+import type { LayoutLeafNode, TabContentProps } from '../types';
 type __VLS_Props = {
     leaf: LayoutLeafNode;
 };
-declare var __VLS_16: {};
-type __VLS_Slots = {} & {
-    'empty-workspace'?: (props: typeof __VLS_16) => any;
+type __VLS_Slots = {
+    'empty-workspace'?: () => unknown;
+    'tab-content'?: (tab: TabContentProps) => unknown;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,11 +1,18 @@
+/**
+ * The recursive grid: a branch renders its children with a draggable divider between each
+ * pair; a leaf renders a tab group.
+ *
+ * `path` is the index route from the root to this node — what `updateSplitSizes` addresses.
+ */
+import type { TabContentProps } from '../types';
 import type { LayoutNode } from '../types';
 type __VLS_Props = {
     node: LayoutNode;
     path: number[];
 };
-declare var __VLS_9: {};
-type __VLS_Slots = {} & {
-    'empty-workspace'?: (props: typeof __VLS_9) => any;
+type __VLS_Slots = {
+    'empty-workspace'?: () => unknown;
+    'tab-content'?: (tab: TabContentProps) => unknown;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/core/dockRules.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Docking rules (1.10.0): what the *user* may do with a panel. The kind's own `canFloat` /
+ * `canDock` first, then the workspace's `canDrop`. Never consulted by the app's own calls.
+ */
+import type { PanelDropTarget } from '../types';
+import type { Workspace } from './workspace';
+type RuleHost = Pick<Workspace<never>, 'state' | 'registry' | 'config'>;
+export declare function isDropAllowed(ws: RuleHost, panelId: string, to: PanelDropTarget): boolean;
+export {};

package/dist/core/panelMenu.d.ts

@@ -8,6 +8,7 @@
 import type { ContextMenuItem } from './contextMenu';
 import type { PanelDefaultOptions } from './registry';
 import type { Label, MessageDescriptor } from '../types';
+import type { Workspace } from './workspace';
 /**
  * Just enough of the workspace to build a menu, so this module does not depend on the store.
  *
@@ -19,6 +20,10 @@ interface MenuHost {
     format: (label: Label | undefined) => string;
     messages: Record<string, MessageDescriptor>;
     panelMenuItems: (id: string) => ContextMenuItem[];
+    /** For the docking rules (1.10.0): floating is a move they decide. */
+    state: Workspace<never>['state'];
+    registry: Workspace<never>['registry'];
+    config: Workspace<never>['config'];
 }
 export interface PanelMenuActions {
     float: () => void;

package/dist/core/registry.d.ts

@@ -23,6 +23,19 @@ export interface PanelDefaultOptions {
     canMinimize?: boolean;
     /** Allow dragging the tab, which is also what allows floating by drag. @default true */
     canDrag?: boolean;
+    /**
+     * `false`: the user can't make this panel floating. A tab drag can't end in a floating window
+     * (dropped on nothing or on a corner, it stays where it was), and "Float Window" and the taskbar's
+     * "Maximize" are hidden. A window the app floated itself can still be moved. The app's own
+     * `floatPanel` always works. @default true (1.10.0)
+     */
+    canFloat?: boolean;
+    /**
+     * `false`: the user can't dock this panel. Dragging it offers no group, tab or edge targets
+     * (corners still pin a floating window), so it stays floating. The app's own docking calls always
+     * work; give the kind `initialTarget: 'floating'` so it opens floating. @default true (1.10.0)
+     */
+    canDock?: boolean;
     /** Show a letter tile instead of a live thumbnail in the taskbar hover preview. @default false */
     disableLivePreview?: boolean;
     /**

package/dist/core/workspace.d.ts

@@ -1,5 +1,5 @@
-import type { App, Component, ComputedRef, InjectionKey } from 'vue';
-import type { DirtyStateOptions, DropPosition, FloatAnchor, FloatingWindow, Label, LayoutNode, MessageDescriptor, MessageFormatter, PanelInfo, SplitDirection } from '../types';
+import type { AllowedComponentProps, App, Component, ComputedRef, InjectionKey, VNodeProps } from 'vue';
+import type { DirtyStateOptions, DropPosition, FloatAnchor, PanelDrop, FloatingWindow, Label, LayoutNode, MessageDescriptor, MessageFormatter, PanelInfo, SplitDirection } from '../types';
 import { PanelRegistry } from './registry';
 import type { PanelDefaultOptions } from './registry';
 import type { ContextMenuItem, ContextMenuRequest, ShowContextMenuOptions } from './contextMenu';
@@ -43,6 +43,14 @@ export interface WorkspaceConfig {
      * rendered elements, which is the part that can actually break.
      */
     classes?: HostClasses;
+    /**
+     * Veto where users can move panels (1.10.0). Called for each place a dragged panel could go, and
+     * for the built-in "Float" and "Maximize" menu items: return `false` and that target isn't offered
+     * and the move doesn't happen. It runs after the kind's own `canFloat` / `canDock`, and only for
+     * what the user does: the app's own calls always work. Keep it fast and pure; it runs while the
+     * pointer moves.
+     */
+    canDrop?: (drop: PanelDrop) => boolean;
 }
 /** Consumer classes added to the library's chrome. Every field is optional. */
 export interface HostClasses {
@@ -221,6 +229,52 @@ export interface Workspace<TEvents extends object = Record<string, unknown>> {
 }
 /** Injection key for {@link useWorkspace}. */
 export declare const WORKSPACE_KEY: InjectionKey<Workspace<never>>;
+/** The type-only mark {@link definePanels} puts on a map. No such value exists at runtime. */
+declare const panelsBrand: unique symbol;
+/** A panel map marked by {@link definePanels}, so `createWorkspace` types `openPanel` from it (1.11.0). */
+export type PanelMap<TPanels extends Record<string, PanelDefinition> = Record<string, PanelDefinition>> = TPanels & {
+    readonly [panelsBrand]: true;
+};
+/** A component's props: from `$props` for a component object, from the first argument for a functional one. */
+type PropsOfComponent<C> = C extends new (...args: never[]) => {
+    $props: infer P;
+} ? P : C extends (props: infer P, ...rest: never[]) => unknown ? P : Record<string, unknown>;
+/**
+ * The props `openPanel` passes to a registered panel: its component's props, without `panelId`
+ * (the library passes it) or Vue's own attributes (`key`, `ref`, `class`, `style`).
+ */
+export type PanelPropsOf<TDefinition> = TDefinition extends {
+    component: infer C;
+} ? Omit<PropsOfComponent<C>, 'panelId' | keyof VNodeProps | keyof AllowedComponentProps> : never;
+/**
+ * Marks a panel map for typing (1.11.0). Returns it unchanged; a workspace created from it gets a
+ * typed `openPanel`: only registered names, and `props` checked against that panel's component.
+ *
+ * @example
+ * ```ts
+ * const panels = definePanels({ map: { component: MapPanel }, chart: { component: ChartPanel } })
+ * const workspace = createWorkspace({ panels })
+ * workspace.openPanel('c1', 'chart', { props: { series: 3 } })   // checked against ChartPanel's props
+ * ```
+ */
+export declare function definePanels<const TPanels extends Record<string, PanelDefinition>>(panels: TPanels): PanelMap<TPanels>;
+/**
+ * A workspace created from {@link definePanels}: the same object, with `openPanel` typed from the
+ * registry. It goes anywhere a {@link Workspace} goes. `useWorkspace()` stays untyped; keep this
+ * one for typed calls.
+ */
+export interface TypedWorkspace<TPanels extends Record<string, PanelDefinition>, TEvents extends object = Record<string, unknown>> extends Workspace<TEvents> {
+    /** `openPanel`, typed: a registered name, and that panel's props. */
+    openPanel<K extends keyof TPanels & string>(id: string, component: K, options?: OpenPanelOptions<PanelPropsOf<TPanels[K]>>): void;
+}
+/**
+ * Create a workspace from a map marked by {@link definePanels} (1.11.0): `openPanel` takes only the
+ * registered names, with `props` checked against each panel's component. To name the events as
+ * well, pass both type arguments: `createWorkspace<typeof panels, AppEvents>({ panels })`.
+ */
+export declare function createWorkspace<TPanels extends Record<string, PanelDefinition>, TEvents extends object = Record<string, unknown>>(config: WorkspaceConfig & {
+    panels: PanelMap<TPanels>;
+}): TypedWorkspace<TPanels, TEvents>;
 /**
  * Create a workspace.
  *
@@ -228,3 +282,4 @@ export declare const WORKSPACE_KEY: InjectionKey<Workspace<never>>;
  * `createPinia()` / `createRouter()` shape a Vue developer already knows.
  */
 export declare function createWorkspace<TEvents extends object = Record<string, unknown>>(config?: WorkspaceConfig): Workspace<TEvents>;
+export {};