dockview-svelte 0.0.1

package/dist/components/Splitview.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { ISplitviewPanel, IView, SerializedSplitview, SplitviewApi, SplitviewComponentOptions } from 'dockview';
+import { type Snippet } from 'svelte';
+import type { SplitviewHandle, SplitviewWidgets } from '../core/types.js';
+interface Props<W extends SplitviewWidgets> {
+    /** Widget registry: `{ [key]: { component } }` — no tabs or titles, splitviews have no headers. */
+    widgets?: W;
+    /**
+     * `SplitviewComponentOptions` passthrough (orientation, proportionalLayout, …).
+     *
+     * `createComponent` is owned by the library (Svelte `mount` factory
+     * backed by the `widgets` registry) and cannot be overridden.
+     */
+    options?: Omit<SplitviewComponentOptions, 'createComponent'>;
+    /** `bind:layout` — splitview JSON (`toJSON`/`fromJSON` shape). */
+    layout?: SerializedSplitview;
+    /** `bind:handle` — `{ api, openPanel, registerWidget, removePanel, movePanel, setVisible, setActive }`. */
+    handle?: SplitviewHandle<W>;
+    /**
+     * `bind:views` — reactive list of current views (`api.panels` snapshot).
+     * Refreshed on layout/add/remove/FromJSON, so `views.length` is the
+     * sveltish view count — no manual `onDidAddView` counting needed.
+     */
+    views?: ISplitviewPanel[];
+    /**
+     * `bind:activeView` — the currently active pane. `SplitviewApi` exposes
+     * no active event (activation only fires per-panel
+     * `api.onDidActiveChange`), so this derives from those events plus
+     * explicit sync on the open/remove paths (dockview activates the new
+     * pane on `addPanel` and the last pane on `removePanel`).
+     */
+    activeView?: ISplitviewPanel | undefined;
+    /** Extra classes for the root container. */
+    class?: string;
+    /** Declarative widgets (`<DvWidget>` children) — alternative to the `widgets` prop. */
+    children?: Snippet;
+    /** Fired once the component is mounted and `api` is ready. */
+    onReady?: (event: {
+        api: SplitviewApi;
+        handle: SplitviewHandle<W>;
+    }) => void;
+    onDidLayoutChange?: () => void;
+    onDidLayoutFromJSON?: () => void;
+    onDidAddView?: (view: IView) => void;
+    onDidRemoveView?: (view: IView) => void;
+    onDidActiveViewChange?: (view: ISplitviewPanel | undefined) => void;
+}
+declare function $$render<const W extends SplitviewWidgets>(): {
+    props: Props<W>;
+    exports: {};
+    bindings: "layout" | "handle" | "views" | "activeView";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<const W extends SplitviewWidgets> {
+    props(): ReturnType<typeof $$render<W>>['props'];
+    events(): ReturnType<typeof $$render<W>>['events'];
+    slots(): ReturnType<typeof $$render<W>>['slots'];
+    bindings(): "layout" | "handle" | "views" | "activeView";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <const W extends SplitviewWidgets>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<W>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<W>['props']>, ReturnType<__sveltets_Render<W>['events']>, ReturnType<__sveltets_Render<W>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<W>['bindings']>;
+    } & ReturnType<__sveltets_Render<W>['exports']>;
+    <const W extends SplitviewWidgets>(internal: unknown, props: ReturnType<__sveltets_Render<W>['props']> & {}): ReturnType<__sveltets_Render<W>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Splitview: $$IsomorphicComponent;
+type Splitview<const W extends SplitviewWidgets> = InstanceType<typeof Splitview<W>>;
+export default Splitview;

package/dist/core/context.d.ts

@@ -0,0 +1,62 @@
+import type { DockviewApi, GridviewApi, PaneviewApi, SplitviewApi } from 'dockview';
+import type { WidgetRegistry } from './registry.js';
+import type { GridviewWidgetDefinition, PaneviewWidgetDefinition, SplitviewWidgetDefinition } from './types.js';
+/**
+ * Context provided by `<Dockview>` to descendant widgets.
+ *
+ * `api` is populated once the component mounts; read it reactively. The registry
+ * and `registerWidget` are stable for the lifetime of the component.
+ */
+export interface DockviewContext {
+    /** The parent {@link DockviewApi}, available after mount. */
+    api: DockviewApi | undefined;
+    /** Register (or override) a widget type at runtime. */
+    registerWidget: (key: string, def: Parameters<WidgetRegistry['register']>[1]) => void;
+    /** Remove a widget type (used when a `<DvWidget>` child is destroyed). */
+    unregisterWidget: (key: string) => void;
+    /** The layout this context belongs to (used by `<DvWidget>` to validate snippets). */
+    kind: 'dockview';
+}
+/**
+ * Context provided by `<Splitview>` to descendant widgets.
+ * Same shape as {@link DockviewContext} but typed for the splitview api.
+ */
+export interface SplitviewContext {
+    /** The parent {@link SplitviewApi}, available after mount. */
+    api: SplitviewApi | undefined;
+    /** Register (or override) a widget type at runtime. */
+    registerWidget: (key: string, def: SplitviewWidgetDefinition) => void;
+    /** Remove a widget type (used when a `<DvWidget>` child is destroyed). */
+    unregisterWidget: (key: string) => void;
+    /** The layout this context belongs to (used by `<DvWidget>` to validate snippets). */
+    kind: 'splitview';
+}
+/**
+ * Context provided by `<Gridview>` to descendant widgets.
+ * Same shape as {@link DockviewContext} but typed for the gridview api.
+ */
+export interface GridviewContext {
+    /** The parent {@link GridviewApi}, available after mount. */
+    api: GridviewApi | undefined;
+    /** Register (or override) a widget type at runtime. */
+    registerWidget: (key: string, def: GridviewWidgetDefinition) => void;
+    /** Remove a widget type (used when a `<DvWidget>` child is destroyed). */
+    unregisterWidget: (key: string) => void;
+    /** The layout this context belongs to (used by `<DvWidget>` to validate snippets). */
+    kind: 'gridview';
+}
+/**
+ * Context provided by `<Paneview>` to descendant widgets.
+ * Same shape as {@link DockviewContext} but typed for the paneview api.
+ */
+export interface PaneviewContext {
+    /** The parent {@link PaneviewApi}, available after mount. */
+    api: PaneviewApi | undefined;
+    /** Register (or override) a widget type at runtime. */
+    registerWidget: (key: string, def: PaneviewWidgetDefinition) => void;
+    /** Remove a widget type (used when a `<DvWidget>` child is destroyed). */
+    unregisterWidget: (key: string) => void;
+    /** The layout this context belongs to (used by `<DvWidget>` to validate snippets). */
+    kind: 'paneview';
+}
+export declare const DOCKVIEW_CONTEXT_KEY: unique symbol;

package/dist/core/context.js

@@ -0,0 +1 @@
+export const DOCKVIEW_CONTEXT_KEY = Symbol('dockview-svelte.context');

package/dist/core/effect-helpers.d.ts

@@ -0,0 +1,7 @@
+import { type vi } from 'vitest';
+/** Await pending `$effect`s so widget → dockview pushes have run. */
+export declare function flushEffects(rounds?: number): Promise<void>;
+/** Assert `updateParameters` was called with a snapshot equal to `expected`. */
+export declare function expectUpdateParameters(api: {
+    updateParameters: ReturnType<typeof vi.fn>;
+}, expected: unknown): void;

package/dist/core/effect-helpers.js

@@ -0,0 +1,23 @@
+/**
+ * Shared helpers for factory double-bind tests.
+ *
+ * The factories wire widget → dockview pushes through `$effect`s created inside
+ * `$effect.root()` during `init()`. Those effects run on Svelte's microtask
+ * queue, so tests must `await tick()` after mutating `state` before asserting
+ * on the api mocks. `flushSync` does NOT work here — the effects are scheduled
+ * async, not batched sync updates.
+ */
+import { tick } from 'svelte';
+import { expect } from 'vitest';
+/** Await pending `$effect`s so widget → dockview pushes have run. */
+export async function flushEffects(rounds = 2) {
+    for (let i = 0; i < rounds; i++) {
+        await tick();
+    }
+}
+/** Assert `updateParameters` was called with a snapshot equal to `expected`. */
+export function expectUpdateParameters(api, expected) {
+    expect(api.updateParameters).toHaveBeenCalled();
+    const last = api.updateParameters.mock.calls.at(-1)[0];
+    expect(last).toEqual(expected);
+}

package/dist/core/factory.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CreateComponentOptions, DockviewGroupPanel, IContentRenderer, IHeaderActionsRenderer, ITabRenderer } from 'dockview';
+import { type DockviewContext } from './context.js';
+import type { WidgetRegistry } from './registry.js';
+import type { HeaderActionComponent, PanelState } from './types.js';
+/** Header slot served by {@link createHeaderActionFactories}. */
+export type HeaderActionSlot = 'left' | 'right' | 'prefix';
+/** The renderer factories returned by {@link createDockviewFactory}. */
+export interface DockviewFactory {
+    createComponent: (options: CreateComponentOptions) => IContentRenderer;
+    createTabComponent: (options: CreateComponentOptions) => ITabRenderer;
+    /** Svelte-backed group-header action factories (left/right/prefix slots). */
+    createHeaderActionFactories: Record<HeaderActionSlot, ((group: DockviewGroupPanel) => IHeaderActionsRenderer) | undefined>;
+    /** Access a panel's shared state by id (used by `openPanel` to build the handle). */
+    getState: (id: string) => PanelState | undefined;
+}
+export declare function createDockviewFactory(registry: WidgetRegistry, context?: DockviewContext, headerActions?: Record<HeaderActionSlot, HeaderActionComponent | undefined>): DockviewFactory;

package/dist/core/factory.svelte.js

@@ -0,0 +1,248 @@
+import { mount, unmount } from 'svelte';
+import DefaultTab from '../components/DefaultTab.svelte';
+import { DOCKVIEW_CONTEXT_KEY } from './context.js';
+import { deepEqual, mergeInto } from './utils.js';
+/**
+ * Creates the content/tab renderer factories backed by a shared widget registry.
+ *
+ * The content renderer owns the {@link PanelState} (created here as `$state`) and
+ * its reactivity wiring: the title mirror and the params double-bind. The tab
+ * renderer only mounts its header component against the same state object.
+ *
+ * Both mounts forward the parent `DockviewContext` via Svelte's `mount`
+ * `context` option, so widgets can `getContext(DOCKVIEW_CONTEXT_KEY)`.
+ *
+ * The empty-state `watermark` is NOT a factory: `Dockview.svelte` renders it
+ * as a plain Svelte child overlay when empty, so it gets context automatically.
+ */
+/** Create a `$state`-wrapped panel state. `$state` must be a declaration initializer. */
+function createPanelState(api, params, title) {
+    const state = $state({
+        params: params ?? {},
+        size: { width: 0, height: 0 },
+        shown: true,
+        visible: api.isVisible,
+        active: api.isActive,
+        focused: api.isFocused,
+        pinned: api.isPinned,
+        groupActive: api.isGroupActive,
+        api,
+        title,
+        custom: {},
+    });
+    return state;
+}
+export function createDockviewFactory(registry, context, headerActions) {
+    const panels = new Map();
+    function getOrCreateState(api, params, title) {
+        let entry = panels.get(api.id);
+        if (!entry) {
+            entry = {
+                state: createPanelState(api, params, title),
+                contentDisposed: false,
+                tabDisposed: false,
+            };
+            panels.set(api.id, entry);
+        }
+        return entry;
+    }
+    function createContentRenderer(options) {
+        const element = document.createElement('div');
+        element.className = 'dv-svelte-content';
+        let instance;
+        let entry;
+        let state;
+        let raf = 0;
+        let disposables = [];
+        let effectDestroy;
+        let lastParams;
+        let lastActive = false;
+        let lastPinned = false;
+        return {
+            element,
+            init(params) {
+                const def = registry.get(options.name);
+                if (!def) {
+                    throw new Error(`dockview-svelte: unknown widget "${options.name}"`);
+                }
+                entry = getOrCreateState(params.api, params.params, params.title);
+                state = entry.state;
+                instance = mount(def.component, {
+                    target: element,
+                    props: { state },
+                    ...(context ? { context: new Map([[DOCKVIEW_CONTEXT_KEY, context]]) } : {}),
+                });
+                lastParams = $state.snapshot(state.params);
+                lastActive = state.active;
+                lastPinned = state.pinned;
+                // Title mirror: dockview owns the title; reflect changes into state.
+                disposables.push(params.api.onDidTitleChange((event) => {
+                    state.title = event.title;
+                }));
+                // Read-only mirrors of dockview's per-panel booleans.
+                disposables.push(params.api.onDidActiveChange((event) => {
+                    state.active = event.isActive;
+                    lastActive = event.isActive;
+                }), params.api.onDidFocusChange((event) => {
+                    state.focused = event.isFocused;
+                }), params.api.onDidVisibilityChange((event) => {
+                    state.visible = event.isVisible;
+                }), params.api.onDidChangePinned((event) => {
+                    state.pinned = event.isPinned;
+                    lastPinned = event.isPinned;
+                }), params.api.onDidActiveGroupChange((event) => {
+                    state.groupActive = event.isActive;
+                }));
+                // Widget → dockview (params double-bind, activation, pin toggle).
+                effectDestroy = $effect.root(() => {
+                    $effect(() => {
+                        const snap = $state.snapshot(state.params);
+                        if (deepEqual(snap, lastParams))
+                            return;
+                        lastParams = snap;
+                        state.api.updateParameters(snap);
+                    });
+                    $effect(() => {
+                        // Only activation is meaningful from the widget side.
+                        if (state.active && !lastActive) {
+                            state.api.setActive();
+                        }
+                    });
+                    $effect(() => {
+                        if (state.pinned !== lastPinned) {
+                            lastPinned = state.pinned;
+                            state.api.setPinned(state.pinned);
+                        }
+                    });
+                });
+            },
+            update(event) {
+                // dockview → widget
+                if (!state)
+                    return;
+                mergeInto(state.params, event.params);
+                lastParams = $state.snapshot(state.params);
+            },
+            layout(width, height) {
+                cancelAnimationFrame(raf);
+                raf = requestAnimationFrame(() => {
+                    if (!state?.shown)
+                        return;
+                    state.size.width = width;
+                    state.size.height = height;
+                });
+            },
+            onShow() {
+                if (state)
+                    state.shown = true;
+            },
+            onHide() {
+                if (state)
+                    state.shown = false;
+            },
+            dispose() {
+                cancelAnimationFrame(raf);
+                effectDestroy?.();
+                effectDestroy = undefined;
+                for (const disposable of disposables)
+                    disposable.dispose();
+                disposables = [];
+                if (instance) {
+                    unmount(instance);
+                    instance = undefined;
+                }
+                if (entry) {
+                    entry.contentDisposed = true;
+                    if (entry.tabDisposed)
+                        panels.delete(options.id);
+                }
+            },
+        };
+    }
+    function createTabRenderer(options) {
+        const element = document.createElement('div');
+        element.className = 'dv-svelte-tab';
+        let instance;
+        let entry;
+        let state;
+        return {
+            element,
+            init(params) {
+                const def = registry.get(options.name);
+                // Content owns the state; the tab just shares it. Use the default
+                // header when the widget has no custom `tab`.
+                const tabComponent = def?.tab ?? DefaultTab;
+                entry = getOrCreateState(params.api, params.params, params.title);
+                state = entry.state;
+                instance = mount(tabComponent, {
+                    target: element,
+                    props: { state },
+                    ...(context ? { context: new Map([[DOCKVIEW_CONTEXT_KEY, context]]) } : {}),
+                });
+            },
+            dispose() {
+                if (instance) {
+                    unmount(instance);
+                    instance = undefined;
+                }
+                if (entry) {
+                    entry.tabDisposed = true;
+                    if (entry.contentDisposed)
+                        panels.delete(options.id);
+                }
+            },
+        };
+    }
+    function createHeaderActionFactory(slot, slotComponent) {
+        if (!slotComponent)
+            return undefined;
+        return (group) => {
+            const element = document.createElement('div');
+            element.className = `dv-svelte-header-actions dv-svelte-header-actions--${slot}`;
+            let instance;
+            let disposables = [];
+            // Reactive group-state mirror — the same idiom as PanelState.
+            const state = $state({
+                isCollapsed: group.api.isCollapsed(),
+                isPeeking: group.api.isPeeking(),
+                location: group.api.location,
+            });
+            return {
+                element,
+                init(params) {
+                    disposables.push(group.api.onDidCollapsedChange((event) => {
+                        state.isCollapsed = event.isCollapsed;
+                    }), group.api.onDidPeekChange((event) => {
+                        state.isPeeking = event.isPeeking;
+                    }), group.api.onDidLocationChange((event) => {
+                        state.location = event.location;
+                    }));
+                    instance = mount(slotComponent, {
+                        target: element,
+                        props: { containerApi: params.containerApi, group, state },
+                        ...(context ? { context: new Map([[DOCKVIEW_CONTEXT_KEY, context]]) } : {}),
+                    });
+                },
+                dispose() {
+                    for (const disposable of disposables)
+                        disposable.dispose();
+                    disposables = [];
+                    if (instance) {
+                        unmount(instance);
+                        instance = undefined;
+                    }
+                },
+            };
+        };
+    }
+    return {
+        createComponent: createContentRenderer,
+        createTabComponent: createTabRenderer,
+        createHeaderActionFactories: {
+            left: createHeaderActionFactory('left', headerActions?.left),
+            right: createHeaderActionFactory('right', headerActions?.right),
+            prefix: createHeaderActionFactory('prefix', headerActions?.prefix),
+        },
+        getState: (id) => panels.get(id)?.state,
+    };
+}

package/dist/core/gridview.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { CreateComponentOptions, GridviewPanel as GridviewPanelType } from 'dockview';
+import { type GridviewContext } from './context.js';
+import type { GridviewWidgetRegistry } from './registry.js';
+import type { GridviewState } from './types.js';
+/** The renderer factory returned by {@link createGridviewFactory}. */
+export interface GridviewFactory {
+    createComponent: (options: CreateComponentOptions) => GridviewPanelType;
+    /** Access a cell's state by id (used by `openPanel` to build the handle). */
+    getState: (id: string) => GridviewState | undefined;
+    /**
+     * Fired when a cell's `api.onDidActiveChange` reports `isActive: true`.
+     * The component derives `bind:activePanel` from this — `GridviewApi`'s
+     * own `onDidActivePanelChange` only fires on focus-driven activation.
+     */
+    onDidActivePanelChange: (panel: GridviewPanelType) => void;
+}
+/**
+ * Creates the gridview renderer factory backed by a shared widget registry.
+ *
+ * A gridview cell is a single `GridviewPanel` subclass instance: `getComponent()`
+ * returns the `IFrameworkPart` (`{ update, dispose }`) that mounts the Svelte
+ * widget into the panel element. `init()` runs before the cell is added to the
+ * grid, so the mount happens there; `size` is written via the api's
+ * `onDidDimensionsChange` mirror.
+ *
+ * The mount forwards the parent context via Svelte's `mount` `context` option,
+ * so widgets can `getContext(DOCKVIEW_CONTEXT_KEY)`.
+ */
+export declare function createGridviewFactory(registry: GridviewWidgetRegistry, context?: GridviewContext, hooks?: {
+    onDidActivePanelChange?: (panel: GridviewPanelType) => void;
+}): GridviewFactory;

package/dist/core/gridview.svelte.js

@@ -0,0 +1,177 @@
+import { GridviewPanel as GridviewPanelBase } from 'dockview';
+import { mount, unmount } from 'svelte';
+import { DOCKVIEW_CONTEXT_KEY } from './context.js';
+import { deepEqual, mergeInto } from './utils.js';
+/** Create a `$state`-wrapped gridview state. `$state` must be a declaration initializer. */
+function createGridviewState(api, params) {
+    const state = $state({
+        params: params ?? {},
+        size: { width: 0, height: 0 },
+        visible: api.isVisible,
+        active: api.isActive,
+        focused: api.isFocused,
+        api,
+        custom: {},
+    });
+    return state;
+}
+/**
+ * A gridview cell that mounts a Svelte widget into `this.element` and wires
+ * the reactive {@link GridviewState}.
+ *
+ * Same pattern as {@link SvelteSplitviewPanel}: `GridviewPanel` carries its
+ * view through the abstract `getComponent(): IFrameworkPart`. The subclass
+ * overrides `init()` to mount (once `this.api`/`this.element` exist and params
+ * arrive) and `update()` for the dockview → widget params merge.
+ *
+ * `getComponent().update` is deliberately a no-op: params flow through the
+ * `update(event)` override instead — a single, well-typed path.
+ */
+class SvelteGridviewPanel extends GridviewPanelBase {
+    deps;
+    instance;
+    entry;
+    state;
+    disposables = [];
+    effectDestroy;
+    lastParams;
+    lastActive = false;
+    lastVisible = true;
+    raf = 0;
+    constructor(id, name, deps) {
+        super(id, name);
+        this.deps = deps;
+    }
+    init(parameters) {
+        super.init(parameters);
+        const { widget, context, getOrCreateState } = this.deps;
+        this.entry = getOrCreateState(this.api, parameters.params);
+        this.state = this.entry.state;
+        this.instance = mount(widget, {
+            target: this.element,
+            props: { state: this.state },
+            ...(context ? { context: new Map([[DOCKVIEW_CONTEXT_KEY, context]]) } : {}),
+        });
+        this.lastParams = $state.snapshot(this.state.params);
+        this.lastActive = this.state.active;
+        this.lastVisible = this.state.visible;
+        // Read-only mirrors of the api flags. `size` is rAF-throttled —
+        // `onDidDimensionsChange` fires per-pixel on sash drags, exactly like the
+        // Dockview `layout()` hook.
+        this.disposables.push(this.api.onDidActiveChange((event) => {
+            this.state.active = event.isActive;
+            this.lastActive = event.isActive;
+            // Activation (button, `setActive`, focus, programmatic add)
+            // lands here on the newly-active cell — the component derives
+            // `bind:activePanel` from it. Deactivation (`false`) is
+            // ignored; the incoming cell's `true` wins without ordering
+            // hazards.
+            if (event.isActive)
+                this.deps.notifyActive(this);
+        }), this.api.onDidFocusChange((event) => {
+            this.state.focused = event.isFocused;
+        }), this.api.onDidVisibilityChange((event) => {
+            this.state.visible = event.isVisible;
+            this.lastVisible = event.isVisible;
+        }), this.api.onDidDimensionsChange((event) => {
+            cancelAnimationFrame(this.raf);
+            this.raf = requestAnimationFrame(() => {
+                this.state.size.width = event.width;
+                this.state.size.height = event.height;
+            });
+        }));
+        // Widget → dockview (params double-bind, activation).
+        this.effectDestroy = $effect.root(() => {
+            $effect(() => {
+                const snap = $state.snapshot(this.state.params);
+                if (deepEqual(snap, this.lastParams))
+                    return;
+                this.lastParams = snap;
+                this.state.api.updateParameters(snap);
+            });
+            $effect(() => {
+                // Only activation is meaningful from the widget side.
+                if (this.state.active && !this.lastActive) {
+                    this.state.api.setActive();
+                }
+            });
+            $effect(() => {
+                if (this.state.visible !== this.lastVisible) {
+                    this.lastVisible = this.state.visible;
+                    this.state.api.setVisible(this.state.visible);
+                }
+            });
+        });
+    }
+    update(event) {
+        super.update(event);
+        if (!this.state)
+            return;
+        mergeInto(this.state.params, event.params);
+        this.lastParams = $state.snapshot(this.state.params);
+    }
+    getComponent() {
+        return {
+            update: () => {
+                // Params flow through `update(event)` above, not here (see class doc).
+            },
+            dispose: () => {
+                cancelAnimationFrame(this.raf);
+                this.effectDestroy?.();
+                this.effectDestroy = undefined;
+                for (const disposable of this.disposables)
+                    disposable.dispose();
+                this.disposables = [];
+                if (this.instance) {
+                    unmount(this.instance);
+                    this.instance = undefined;
+                }
+                if (this.entry && !this.entry.disposed) {
+                    this.entry.disposed = true;
+                    this.deps.releaseState(this.id);
+                }
+            },
+        };
+    }
+}
+/**
+ * Creates the gridview renderer factory backed by a shared widget registry.
+ *
+ * A gridview cell is a single `GridviewPanel` subclass instance: `getComponent()`
+ * returns the `IFrameworkPart` (`{ update, dispose }`) that mounts the Svelte
+ * widget into the panel element. `init()` runs before the cell is added to the
+ * grid, so the mount happens there; `size` is written via the api's
+ * `onDidDimensionsChange` mirror.
+ *
+ * The mount forwards the parent context via Svelte's `mount` `context` option,
+ * so widgets can `getContext(DOCKVIEW_CONTEXT_KEY)`.
+ */
+export function createGridviewFactory(registry, context, hooks) {
+    const panels = new Map();
+    function getOrCreateState(api, params) {
+        let entry = panels.get(api.id);
+        if (!entry) {
+            entry = { state: createGridviewState(api, params), disposed: false };
+            panels.set(api.id, entry);
+        }
+        return entry;
+    }
+    function createComponent(options) {
+        const def = registry.get(options.name);
+        if (!def) {
+            throw new Error(`dockview-svelte: unknown widget "${options.name}"`);
+        }
+        return new SvelteGridviewPanel(options.id, options.name, {
+            widget: def.component,
+            context,
+            getOrCreateState,
+            releaseState: (id) => panels.delete(id),
+            notifyActive: (panel) => hooks?.onDidActivePanelChange?.(panel),
+        });
+    }
+    return {
+        createComponent,
+        getState: (id) => panels.get(id)?.state,
+        onDidActivePanelChange: (panel) => hooks?.onDidActivePanelChange?.(panel),
+    };
+}

package/dist/core/paneview-test-helpers.js

@@ -0,0 +1,28 @@
+import { vi } from 'vitest';
+/**
+ * Fake {@link PaneviewPanelApi} for tests that need a real `init()` without
+ * importing the paneview factory test's hoisted mock.
+ */
+export function makePaneviewFakeApi(id) {
+    const listeners = {};
+    const on = (key) => (cb) => {
+        ;
+        (listeners[key] ??= []).push(cb);
+        return { dispose: vi.fn() };
+    };
+    return {
+        id,
+        isVisible: true,
+        isActive: false,
+        isFocused: false,
+        isExpanded: true,
+        onDidActiveChange: vi.fn(on('active')),
+        onDidFocusChange: vi.fn(on('focus')),
+        onDidVisibilityChange: vi.fn(on('visibility')),
+        onDidDimensionsChange: vi.fn(on('dimensions')),
+        onDidExpansionChange: vi.fn(on('expansion')),
+        updateParameters: vi.fn(),
+        setActive: vi.fn(),
+        setExpanded: vi.fn(),
+    };
+}