vue-dockable-desktop 1.10.0 → 1.11.1

package/CHANGELOG.md

@@ -11,6 +11,55 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.11.1] — 2026-11-11
+
+**Parity: react-dockable-desktop 7.10.0** (unchanged). A panel's tab icon is centred on its title.
+
+### Fixed
+
+- **The tab icon sat about 1px below the title's middle,** for every icon (a component, a bare
+  `<svg>`, an emoji) and in every skin. It was an inline box on the title's text line, and
+  `vertical-align: middle` centres on the lowercase letters, not on the capitals and digits. The
+  tab's icon and title are now one flex row (`.vdd-workspace-tab-title`, as rdd's since 7.1.2) and
+  the icon is centred on the title. Long titles still end in "…": the title span
+  (`.vdd-workspace-tab-label`) now carries the ellipsis itself, which a flex row needs.
+- **Apps that worked around it** (for example `.vdd-workspace-tab-icon { vertical-align: -0.2em }`)
+  should remove the override, or the icon now sits too high.
+- The `#tab-content` slot's content is laid out as in 1.11.0: its wrapper stays a plain block, so
+  the spaces between your own elements are kept. Floating-window title bars were already centred.
+
+### Internal
+
+- M17's browser gate gains a "tab icon" step: in all seven skins, LTR and RTL, the icon's centre is
+  within 0.5px of the title's middle (it was +1.04px), and a squeezed tab cuts a long title with an
+  ellipsis. It fails with either new rule removed. `releaseC.test.ts` asserts the classes, with and
+  without the slot (+2 tests).
+
+## [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

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/workspace.d.ts

@@ -1,4 +1,4 @@
-import type { App, Component, ComputedRef, InjectionKey } from 'vue';
+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';
@@ -229,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.
  *
@@ -236,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 {};