dockview-svelte 0.0.1

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

@@ -0,0 +1,29 @@
+import type { CreateComponentOptions, IPanePart } from 'dockview';
+import { type PaneviewContext } from './context.js';
+import type { PaneviewWidgetRegistry } from './registry.js';
+import type { PaneviewState } from './types.js';
+/** The renderer factories returned by {@link createPaneviewFactory}. */
+export interface PaneviewFactory {
+    createComponent: (options: CreateComponentOptions) => IPanePart;
+    createHeaderComponent: (options: CreateComponentOptions) => IPanePart | undefined;
+    /** Access a pane's shared state by id (used by `openPanel` to build the handle). */
+    getState: (id: string) => PaneviewState | undefined;
+}
+/**
+ * Creates the paneview body/header renderer factories backed by a shared widget registry.
+ *
+ * dockview calls `createComponent({ id, name })` for the pane body and
+ * `createHeaderComponent({ id, name })` for the pane header, where `name` is
+ * the `component` / `headerComponent` string passed to `addPanel`. The body
+ * owns the {@link PaneviewState} (created here as `$state`); the header only
+ * mounts its component against the same state object. `getOrCreate` covers the
+ * construction order either way.
+ *
+ * When a widget defines no `header`, `createHeaderComponent` returns
+ * `undefined` so dockview falls back to its built-in `DefaultHeader` (plain
+ * title text) — the same fallback as the Dockview `tab`.
+ *
+ * Both mounts forward the parent `PaneviewContext` via Svelte's `mount`
+ * `context` option, so widgets can `getContext(DOCKVIEW_CONTEXT_KEY)`.
+ */
+export declare function createPaneviewFactory(registry: PaneviewWidgetRegistry, context?: PaneviewContext): PaneviewFactory;

package/dist/core/paneview.svelte.js

@@ -0,0 +1,186 @@
+import { mount, unmount } from 'svelte';
+import { DOCKVIEW_CONTEXT_KEY } from './context.js';
+import { deepEqual, mergeInto } from './utils.js';
+/** Create a `$state`-wrapped paneview state. `$state` must be a declaration initializer. */
+function createPaneviewState(api, params, title) {
+    const state = $state({
+        params: params ?? {},
+        size: { width: 0, height: 0 },
+        visible: api.isVisible,
+        active: api.isActive,
+        focused: api.isFocused,
+        expanded: api.isExpanded,
+        api,
+        title,
+        custom: {},
+    });
+    return state;
+}
+/** Shared mount helper: one `IPanePart` (body or header) bound to the shared state. */
+function createPanePart(widget, context, getOrCreateState, releaseEntry, side) {
+    const element = document.createElement('div');
+    element.className = side === 'body' ? 'dv-svelte-pane-body' : 'dv-svelte-pane-header';
+    let instance;
+    let entry;
+    let state;
+    let raf = 0;
+    let disposables = [];
+    let effectDestroy;
+    let lastParams;
+    let lastActive = false;
+    let lastVisible = true;
+    let lastExpanded = false;
+    return {
+        element,
+        init(parameters) {
+            entry = getOrCreateState(parameters.api, parameters.params, parameters.title);
+            state = entry.state;
+            instance = mount(widget, {
+                target: element,
+                props: { state },
+                ...(context ? { context: new Map([[DOCKVIEW_CONTEXT_KEY, context]]) } : {}),
+            });
+            lastParams = $state.snapshot(state.params);
+            lastActive = state.active;
+            lastVisible = state.visible;
+            lastExpanded = state.expanded;
+            // The body owns the api mirrors + widget→dockview effects; the header
+            // only mounts against the same state (it must not double-subscribe).
+            if (side === 'body') {
+                disposables.push(parameters.api.onDidActiveChange((event) => {
+                    state.active = event.isActive;
+                    lastActive = event.isActive;
+                }), parameters.api.onDidFocusChange((event) => {
+                    state.focused = event.isFocused;
+                }), parameters.api.onDidVisibilityChange((event) => {
+                    state.visible = event.isVisible;
+                    lastVisible = event.isVisible;
+                }), parameters.api.onDidDimensionsChange((event) => {
+                    cancelAnimationFrame(raf);
+                    raf = requestAnimationFrame(() => {
+                        state.size.width = event.width;
+                        state.size.height = event.height;
+                    });
+                }), parameters.api.onDidExpansionChange((event) => {
+                    state.expanded = event.isExpanded;
+                    lastExpanded = event.isExpanded;
+                }));
+                // Widget → dockview (params double-bind, activation, expand 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.visible !== lastVisible) {
+                            lastVisible = state.visible;
+                            state.api.setVisible(state.visible);
+                        }
+                    });
+                    $effect(() => {
+                        if (state.expanded !== lastExpanded) {
+                            lastExpanded = state.expanded;
+                            state.api.setExpanded(state.expanded);
+                        }
+                    });
+                });
+            }
+        },
+        update(event) {
+            // dockview → widget (body owns the merge; header shares the state).
+            if (side !== 'body' || !state)
+                return;
+            mergeInto(state.params, event.params);
+            lastParams = $state.snapshot(state.params);
+        },
+        dispose() {
+            cancelAnimationFrame(raf);
+            effectDestroy?.();
+            effectDestroy = undefined;
+            for (const disposable of disposables)
+                disposable.dispose();
+            disposables = [];
+            if (instance) {
+                unmount(instance);
+                instance = undefined;
+            }
+            if (entry) {
+                // Entries are keyed by `api.id` — read it back from the shared state.
+                releaseEntry(entry.state.api.id, side);
+            }
+        },
+    };
+}
+/**
+ * Creates the paneview body/header renderer factories backed by a shared widget registry.
+ *
+ * dockview calls `createComponent({ id, name })` for the pane body and
+ * `createHeaderComponent({ id, name })` for the pane header, where `name` is
+ * the `component` / `headerComponent` string passed to `addPanel`. The body
+ * owns the {@link PaneviewState} (created here as `$state`); the header only
+ * mounts its component against the same state object. `getOrCreate` covers the
+ * construction order either way.
+ *
+ * When a widget defines no `header`, `createHeaderComponent` returns
+ * `undefined` so dockview falls back to its built-in `DefaultHeader` (plain
+ * title text) — the same fallback as the Dockview `tab`.
+ *
+ * Both mounts forward the parent `PaneviewContext` via Svelte's `mount`
+ * `context` option, so widgets can `getContext(DOCKVIEW_CONTEXT_KEY)`.
+ */
+export function createPaneviewFactory(registry, context) {
+    const panes = new Map();
+    function getOrCreateState(api, params, title) {
+        let entry = panes.get(api.id);
+        if (!entry) {
+            entry = {
+                state: createPaneviewState(api, params, title),
+                bodyDisposed: false,
+                headerDisposed: false,
+            };
+            panes.set(api.id, entry);
+        }
+        return entry;
+    }
+    function releaseEntry(id, side) {
+        const entry = panes.get(id);
+        if (!entry)
+            return;
+        if (side === 'body')
+            entry.bodyDisposed = true;
+        else
+            entry.headerDisposed = true;
+        if (entry.bodyDisposed && entry.headerDisposed)
+            panes.delete(id);
+    }
+    function createComponent(options) {
+        const def = registry.get(options.name);
+        if (!def) {
+            throw new Error(`dockview-svelte: unknown widget "${options.name}"`);
+        }
+        return createPanePart(def.component, context, getOrCreateState, releaseEntry, 'body');
+    }
+    function createHeaderComponent(options) {
+        const def = registry.get(options.name);
+        if (!def) {
+            throw new Error(`dockview-svelte: unknown widget "${options.name}"`);
+        }
+        if (!def.header)
+            return undefined;
+        return createPanePart(def.header, context, getOrCreateState, releaseEntry, 'header');
+    }
+    return {
+        createComponent,
+        createHeaderComponent,
+        getState: (id) => panes.get(id)?.state,
+    };
+}

package/dist/core/registry.d.ts

@@ -0,0 +1,88 @@
+import type { GridviewWidgetDefinition, GridviewWidgets, PaneviewWidgetDefinition, PaneviewWidgets, SplitviewWidgetDefinition, SplitviewWidgets, WidgetDefinition, Widgets } from './types.js';
+/**
+ * Mutable widget registry consulted by the renderer factories and `openPanel`.
+ * Seeded from the `widgets` prop, extended at runtime via `registerWidget`
+ * (including `<DvWidget>` declarative children).
+ */
+export declare class WidgetRegistry {
+    private map;
+    /** Register or replace a widget definition. */
+    register(key: string, def: WidgetDefinition): void;
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key: string): void;
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key: string): WidgetDefinition | undefined;
+    /** True if a widget with the given key is registered. */
+    has(key: string): boolean;
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets: Record<string, WidgetDefinition>): void;
+}
+/**
+ * Identity helper that preserves literal keys and per-widget param types via
+ * a `const` type param. No longer needed for inference — the view components
+ * declare `const W` generics, so a plain object literal passed to `widgets`
+ * infers the same types. Kept as a deprecated alias for existing code.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export declare function defineWidgets<const W extends Widgets>(w: W): W;
+/**
+ * Deprecated alias — pass a plain object to `Splitview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export declare function defineSplitviewWidgets<const W extends SplitviewWidgets>(w: W): W;
+/**
+ * Deprecated alias — pass a plain object to `Gridview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export declare function defineGridviewWidgets<const W extends GridviewWidgets>(w: W): W;
+/**
+ * Deprecated alias — pass a plain object to `Paneview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export declare function definePaneviewWidgets<const W extends PaneviewWidgets>(w: W): W;
+/** Mutable splitview widget registry, mirroring {@link WidgetRegistry}. */
+export declare class SplitviewWidgetRegistry {
+    private map;
+    /** Register or replace a widget definition. */
+    register(key: string, def: SplitviewWidgetDefinition): void;
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key: string): void;
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key: string): SplitviewWidgetDefinition | undefined;
+    /** True if a widget with the given key is registered. */
+    has(key: string): boolean;
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets: Record<string, SplitviewWidgetDefinition>): void;
+}
+/** Mutable gridview widget registry, mirroring {@link WidgetRegistry}. */
+export declare class GridviewWidgetRegistry {
+    private map;
+    /** Register or replace a widget definition. */
+    register(key: string, def: GridviewWidgetDefinition): void;
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key: string): void;
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key: string): GridviewWidgetDefinition | undefined;
+    /** True if a widget with the given key is registered. */
+    has(key: string): boolean;
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets: Record<string, GridviewWidgetDefinition>): void;
+}
+/** Mutable paneview widget registry, mirroring {@link WidgetRegistry}. */
+export declare class PaneviewWidgetRegistry {
+    private map;
+    /** Register or replace a widget definition. */
+    register(key: string, def: PaneviewWidgetDefinition): void;
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key: string): void;
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key: string): PaneviewWidgetDefinition | undefined;
+    /** True if a widget with the given key is registered. */
+    has(key: string): boolean;
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets: Record<string, PaneviewWidgetDefinition>): void;
+}

package/dist/core/registry.js

@@ -0,0 +1,143 @@
+/**
+ * Mutable widget registry consulted by the renderer factories and `openPanel`.
+ * Seeded from the `widgets` prop, extended at runtime via `registerWidget`
+ * (including `<DvWidget>` declarative children).
+ */
+export class WidgetRegistry {
+    map = new Map();
+    /** Register or replace a widget definition. */
+    register(key, def) {
+        this.map.set(key, def);
+    }
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key) {
+        this.map.delete(key);
+    }
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key) {
+        return this.map.get(key);
+    }
+    /** True if a widget with the given key is registered. */
+    has(key) {
+        return this.map.has(key);
+    }
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets) {
+        for (const [key, def] of Object.entries(widgets)) {
+            this.map.set(key, def);
+        }
+    }
+}
+/**
+ * Identity helper that preserves literal keys and per-widget param types via
+ * a `const` type param. No longer needed for inference — the view components
+ * declare `const W` generics, so a plain object literal passed to `widgets`
+ * infers the same types. Kept as a deprecated alias for existing code.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export function defineWidgets(w) {
+    return w;
+}
+/**
+ * Deprecated alias — pass a plain object to `Splitview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export function defineSplitviewWidgets(w) {
+    return w;
+}
+/**
+ * Deprecated alias — pass a plain object to `Gridview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export function defineGridviewWidgets(w) {
+    return w;
+}
+/**
+ * Deprecated alias — pass a plain object to `Paneview`'s `widgets` instead.
+ *
+ * @deprecated Pass a plain object to `widgets` instead — inference is automatic.
+ */
+export function definePaneviewWidgets(w) {
+    return w;
+}
+/** Mutable splitview widget registry, mirroring {@link WidgetRegistry}. */
+export class SplitviewWidgetRegistry {
+    map = new Map();
+    /** Register or replace a widget definition. */
+    register(key, def) {
+        this.map.set(key, def);
+    }
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key) {
+        this.map.delete(key);
+    }
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key) {
+        return this.map.get(key);
+    }
+    /** True if a widget with the given key is registered. */
+    has(key) {
+        return this.map.has(key);
+    }
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets) {
+        for (const [key, def] of Object.entries(widgets)) {
+            this.map.set(key, def);
+        }
+    }
+}
+/** Mutable gridview widget registry, mirroring {@link WidgetRegistry}. */
+export class GridviewWidgetRegistry {
+    map = new Map();
+    /** Register or replace a widget definition. */
+    register(key, def) {
+        this.map.set(key, def);
+    }
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key) {
+        this.map.delete(key);
+    }
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key) {
+        return this.map.get(key);
+    }
+    /** True if a widget with the given key is registered. */
+    has(key) {
+        return this.map.has(key);
+    }
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets) {
+        for (const [key, def] of Object.entries(widgets)) {
+            this.map.set(key, def);
+        }
+    }
+}
+/** Mutable paneview widget registry, mirroring {@link WidgetRegistry}. */
+export class PaneviewWidgetRegistry {
+    map = new Map();
+    /** Register or replace a widget definition. */
+    register(key, def) {
+        this.map.set(key, def);
+    }
+    /** Remove a widget definition (used when a `<DvWidget>` child is destroyed). */
+    unregister(key) {
+        this.map.delete(key);
+    }
+    /** Get a widget definition by key, or `undefined` if unknown. */
+    get(key) {
+        return this.map.get(key);
+    }
+    /** True if a widget with the given key is registered. */
+    has(key) {
+        return this.map.has(key);
+    }
+    /** Seed the registry from a `{ [key]: definition }` object. */
+    seed(widgets) {
+        for (const [key, def] of Object.entries(widgets)) {
+            this.map.set(key, def);
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+import type { CreateComponentOptions, SplitviewPanel } from 'dockview';
+import { type SplitviewContext } from './context.js';
+import type { SplitviewWidgetRegistry } from './registry.js';
+import type { SplitviewState } from './types.js';
+/** The renderer factory returned by {@link createSplitviewFactory}. */
+export interface SplitviewFactory {
+    createComponent: (options: CreateComponentOptions) => SplitviewPanel;
+    /** Access a view's state by id (used by `openPanel` to build the handle). */
+    getState: (id: string) => SplitviewState | undefined;
+    /**
+     * Fired when a pane's `api.onDidActiveChange` reports `isActive: true`.
+     * The component derives `bind:activeView` from this — `SplitviewApi`
+     * exposes no active event of its own.
+     */
+    onDidActiveViewChange: (view: SplitviewPanel) => void;
+}
+/**
+ * Creates the splitview renderer factory backed by a shared widget registry.
+ *
+ * Unlike dockview's content/tab pair, a splitview view is a single
+ * `SplitviewPanel` subclass instance: `getComponent()` returns the
+ * `IFrameworkPart` (`{ update, dispose }`) that mounts the Svelte widget into
+ * the panel element. `init()` runs before the panel is added to the splitview,
+ * so the mount happens there; `layout()` writes `state.size` 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 createSplitviewFactory(registry: SplitviewWidgetRegistry, context?: SplitviewContext, hooks?: {
+    onDidActiveViewChange?: (view: SplitviewPanel) => void;
+}): SplitviewFactory;

package/dist/core/splitview.svelte.js

@@ -0,0 +1,179 @@
+import { SplitviewPanel as SplitviewPanelBase } from 'dockview';
+import { mount, unmount } from 'svelte';
+import { DOCKVIEW_CONTEXT_KEY } from './context.js';
+import { deepEqual, mergeInto } from './utils.js';
+/** Create a `$state`-wrapped splitview state. `$state` must be a declaration initializer. */
+function createSplitviewState(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 splitview panel that mounts a Svelte widget into `this.element` and wires
+ * the reactive {@link SplitviewState}.
+ *
+ * `SplitviewPanel` is abstract with a single abstract member
+ * `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: dockview calls
+ * `part.update(...)` with inconsistent shapes (raw `params` from `layout()`,
+ * `{ params }` from `update()`), so params flow through the `update(event)`
+ * override instead — a single, well-typed path.
+ */
+class SvelteSplitviewPanel extends SplitviewPanelBase {
+    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) lands here on the
+            // newly-active pane — the component derives `bind:activeView`
+            // from it. Deactivation (`false`) is ignored; the incoming
+            // pane'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 splitview renderer factory backed by a shared widget registry.
+ *
+ * Unlike dockview's content/tab pair, a splitview view is a single
+ * `SplitviewPanel` subclass instance: `getComponent()` returns the
+ * `IFrameworkPart` (`{ update, dispose }`) that mounts the Svelte widget into
+ * the panel element. `init()` runs before the panel is added to the splitview,
+ * so the mount happens there; `layout()` writes `state.size` 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 createSplitviewFactory(registry, context, hooks) {
+    const panels = new Map();
+    function getOrCreateState(api, params) {
+        let entry = panels.get(api.id);
+        if (!entry) {
+            entry = { state: createSplitviewState(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 SvelteSplitviewPanel(options.id, options.name, {
+            widget: def.component,
+            context,
+            getOrCreateState,
+            releaseState: (id) => panels.delete(id),
+            notifyActive: (view) => hooks?.onDidActiveViewChange?.(view),
+        });
+    }
+    return {
+        createComponent,
+        getState: (id) => panels.get(id)?.state,
+        onDidActiveViewChange: (view) => hooks?.onDidActiveViewChange?.(view),
+    };
+}