@sqlrooms/layout 0.28.0-rc.0 → 0.28.1-rc.0

package/README.md

@@ -1,10 +1,6 @@
-This package is part of the SQLRooms framework and provides flexible layout components for building complex, resizable, and draggable interfaces.
+Layout slice and mosaic utilities for SQLRooms panel-based UIs.
 
-## Overview
-
-The `@sqlrooms/layout` package offers a set of components and utilities for creating dynamic, multi-pane layouts in SQLRooms applications. It's primarily built around the [react-mosaic](https://nomcopter.github.io/react-mosaic/) library, which provides a powerful windowing system similar to the one found in advanced IDEs.
-
-> **Note:** This package uses [react-mosaic](https://nomcopter.github.io/react-mosaic/) which should not be confused with [uwdata/mosaic](https://github.com/uwdata/mosaic) used in the [`@sqlrooms/mosaic`](/api/mosaic/) package for data visualization purposes.
+This package uses `react-mosaic` to compose resizable panel layouts.
 
 ## Installation
 
@@ -12,78 +8,91 @@ The `@sqlrooms/layout` package offers a set of components and utilities for crea
 npm install @sqlrooms/layout
 ```
 
-## Mosaic Tree Structure
+## Main exports
 
-The mosaic layout is defined by a tree structure where each node is either a string (representing a panel ID) or an object with `direction`, `first`, `second`, and optional `splitPercentage` properties. Here's an example of how a mosaic tree might look:
+- `createLayoutSlice()`, `useStoreWithLayout()`
+- `MosaicLayout` component
+- mosaic helpers:
+  - `makeMosaicStack`
+  - `visitMosaicLeafNodes`
+  - `getVisibleMosaicLayoutPanels`
+  - `findMosaicNodePathByKey`
+  - `removeMosaicNodeByKey`
+- layout config schemas/types re-exported from `@sqlrooms/layout-config`
+
+## Store usage
 
 ```tsx
-// Simple two-panel layout with 30/70 split
-const simpleMosaicTree = {
-  direction: 'row',
-  first: 'data-sources', // Left panel (30% width)
-  second: 'main', // Right panel (70% width)
-  splitPercentage: 30,
-};
-
-// More complex nested layout
-const complexMosaicTree = {
-  direction: 'row',
-  first: 'data-sources', // Left panel
-  second: {
-    // Right side contains a nested layout
-    direction: 'column',
-    first: 'main', // Top panel
-    second: {
-      // Bottom contains another nested layout
-      direction: 'row',
-      first: 'sql-editor',
-      second: 'visualization',
-      splitPercentage: 50,
-    },
-    splitPercentage: 60,
-  },
-  splitPercentage: 20,
-};
+import {
+  LayoutSliceState,
+  LayoutTypes,
+  MAIN_VIEW,
+  createLayoutSlice,
+} from '@sqlrooms/layout';
+import {
+  BaseRoomStoreState,
+  createBaseRoomSlice,
+  createRoomStore,
+} from '@sqlrooms/room-store';
+
+function DataPanel() {
+  return <div>Data</div>;
+}
+
+function MainPanel() {
+  return <div>Main</div>;
+}
+
+type State = BaseRoomStoreState & LayoutSliceState;
+
+export const {roomStore, useRoomStore} = createRoomStore<State>(
+  (set, get, store) => ({
+    ...createBaseRoomSlice()(set, get, store),
+    ...createLayoutSlice({
+      config: {
+        type: LayoutTypes.enum.mosaic,
+        nodes: {
+          direction: 'row',
+          first: 'data',
+          second: MAIN_VIEW,
+          splitPercentage: 30,
+        },
+      },
+      panels: {
+        data: {
+          title: 'Data',
+          component: DataPanel,
+          placement: 'sidebar',
+        },
+        main: {
+          title: 'Main',
+          component: MainPanel,
+          placement: 'main',
+        },
+      },
+    })(set, get, store),
+  }),
+);
 ```
 
-## Components
-
-### MosaicLayout
-
-A wrapper around the `Mosaic` component from react-mosaic-component that provides a customized look and feel consistent with SQLRooms styling.
+## Programmatic panel visibility
 
 ```tsx
-import {MosaicLayout} from '@sqlrooms/layout';
-
-// Example usage
-<MosaicLayout
-  renderTile={(id, path) => <YourTileContent id={id} />}
-  value={yourMosaicTree}
-  onChange={handleLayoutChange}
-/>;
+import {Button} from '@sqlrooms/ui';
+
+function PanelButtons() {
+  const togglePanel = useRoomStore((state) => state.layout.togglePanel);
+  const togglePanelPin = useRoomStore((state) => state.layout.togglePanelPin);
+
+  return (
+    <div className="flex gap-2">
+      <Button onClick={() => togglePanel('data')}>Toggle Data Panel</Button>
+      <Button onClick={() => togglePanelPin('data')}>Pin/Unpin Data Panel</Button>
+    </div>
+  );
+}
 ```
 
-### MosaicTile
-
-A component for rendering individual tiles within the mosaic layout.
-
-## Utility Functions
-
-The package provides several utility functions for working with mosaic layouts:
-
-- `makeMosaicStack`: Creates a stack of mosaic nodes with specified weights and direction
-- `visitMosaicLeafNodes`: Traverses all leaf nodes in a mosaic tree
-- `getVisibleMosaicLayoutPanels`: Gets an array of all visible panel IDs
-- `findMosaicNodePathByKey`: Finds the path to a specific node by its key
-- `removeMosaicNodeByKey`: Removes a node from the mosaic tree by its key
-
-## Learn More
-
-For more information about the underlying react-mosaic library, visit:
-
-- [react-mosaic documentation](https://nomcopter.github.io/react-mosaic/)
-- [react-mosaic GitHub repository](https://github.com/nomcopter/react-mosaic)
-
-## License
+## Note
 
-MIT
+`@sqlrooms/layout` (react-mosaic layout) is different from `@sqlrooms/mosaic` (UW IDL data visualization package).

package/dist/LayoutSlice.d.ts

@@ -20,6 +20,8 @@ export type LayoutSliceConfig = z.infer<typeof LayoutSliceConfig>;
 export declare function createDefaultLayoutConfig(): LayoutSliceConfig;
 export type LayoutSliceState = {
     layout: {
+        initialize?: () => Promise<void>;
+        destroy?: () => Promise<void>;
         config: LayoutSliceConfig;
         panels: Record<string, RoomPanelInfo>;
         setConfig(layout: LayoutConfig): void;

package/dist/LayoutSlice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSlice.d.ts","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AACtB,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACjD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,SAAS,EAAE,SAAS,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;2BAAe,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,wBAAgB,yBAAyB,IAAI,iBAAiB,CAE7D;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QACN,MAAM,EAAE,iBAAiB,CAAC;QAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACtC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QACtC,wCAAwC;QACxC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QACrD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EAAE,aAA2C,EACnD,MAAW,GACZ,GAAE,sBAA2B,GAAG,YAAY,CAAC,gBAAgB,CAAC,CA+F9D;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,CAAC,GACvC,CAAC,CAEH"}
+{"version":3,"file":"LayoutSlice.d.ts","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AACtB,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAwBrC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACjD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,SAAS,EAAE,SAAS,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;2BAAe,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,wBAAgB,yBAAyB,IAAI,iBAAiB,CAE7D;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,MAAM,EAAE,iBAAiB,CAAC;QAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACtC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QACtC,wCAAwC;QACxC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QACrD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EAAE,aAA2C,EACnD,MAAW,GACZ,GAAE,sBAA2B,GAAG,YAAY,CAAC,gBAAgB,CAAC,CA0H9D;AAmGD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,CAAC,GACvC,CAAC,CAEH"}

package/dist/LayoutSlice.js

@@ -1,92 +1,212 @@
 import { DEFAULT_MOSAIC_LAYOUT, LayoutConfig, MAIN_VIEW, isMosaicLayoutParent, } from '@sqlrooms/layout-config';
-import { createSlice, useBaseRoomStore } from '@sqlrooms/room-store';
+import { createSlice, registerCommandsForOwner, unregisterCommandsForOwner, useBaseRoomStore, } from '@sqlrooms/room-store';
 import { produce } from 'immer';
+import { z } from 'zod';
 import { makeMosaicStack, removeMosaicNodeByKey } from './mosaic';
+const LAYOUT_COMMAND_OWNER = '@sqlrooms/layout/panels';
+const ToggleLayoutPanelCommandInput = z.object({
+    panelId: z
+        .string()
+        .describe('ID of the panel to show/hide, e.g. "sql-editor".'),
+    show: z
+        .boolean()
+        .optional()
+        .describe('Optional explicit visibility. True shows, false hides, omitted toggles.'),
+});
+const ToggleLayoutPanelPinInput = z.object({
+    panelId: z.string().describe('ID of the panel to pin/unpin.'),
+});
 export const LayoutSliceConfig = LayoutConfig;
 export function createDefaultLayoutConfig() {
     return DEFAULT_MOSAIC_LAYOUT;
 }
 export function createLayoutSlice({ config: initialConfig = createDefaultLayoutConfig(), panels = {}, } = {}) {
-    return createSlice((set, get) => ({
-        layout: {
-            config: initialConfig,
-            panels,
-            setConfig: (config) => set((state) => produce(state, (draft) => {
-                draft.layout.config = config;
-            })),
-            setLayout: (layout) => get().layout.setConfig(layout),
-            togglePanel: (panel, show) => {
-                if (get().layout.config?.nodes === panel) {
-                    // don't hide the view if it's the only one
-                    return;
-                }
-                const result = removeMosaicNodeByKey(get().layout.config?.nodes, panel);
-                const isShown = result.success;
-                if (isShown) {
-                    if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {
+    return createSlice((set, get, store) => {
+        let unsubscribePanelChanges;
+        const registerPanelCommands = () => {
+            const panelCommands = createLayoutPanelCommands(get().layout.panels);
+            registerCommandsForOwner(store, LAYOUT_COMMAND_OWNER, panelCommands);
+        };
+        return {
+            layout: {
+                initialize: async () => {
+                    registerPanelCommands();
+                    unsubscribePanelChanges?.();
+                    unsubscribePanelChanges = store.subscribe((state, prevState) => {
+                        if (state.layout.panels !== prevState.layout.panels) {
+                            registerPanelCommands();
+                        }
+                    });
+                },
+                destroy: async () => {
+                    unsubscribePanelChanges?.();
+                    unsubscribePanelChanges = undefined;
+                    unregisterCommandsForOwner(store, LAYOUT_COMMAND_OWNER);
+                },
+                config: initialConfig,
+                panels,
+                setConfig: (config) => set((state) => produce(state, (draft) => {
+                    draft.layout.config = config;
+                })),
+                setLayout: (layout) => get().layout.setConfig(layout),
+                togglePanel: (panel, show) => {
+                    if (get().layout.config?.nodes === panel) {
+                        // don't hide the view if it's the only one
                         return;
                     }
-                    set((state) => produce(state, (draft) => {
-                        const layout = draft.layout.config;
-                        layout.nodes = result.nextTree;
-                        if (layout.pinned?.includes(panel)) {
-                            layout.pinned = layout.pinned.filter((p) => p !== panel);
+                    const result = removeMosaicNodeByKey(get().layout.config?.nodes, panel);
+                    const isShown = result.success;
+                    if (isShown) {
+                        if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {
+                            return;
                         }
-                    }));
-                }
-                else {
-                    if (show === false) {
-                        return;
+                        set((state) => produce(state, (draft) => {
+                            const layout = draft.layout.config;
+                            layout.nodes = result.nextTree;
+                            if (layout.pinned?.includes(panel)) {
+                                layout.pinned = layout.pinned.filter((p) => p !== panel);
+                            }
+                        }));
                     }
+                    else {
+                        if (show === false) {
+                            return;
+                        }
+                        set((state) => produce(state, (draft) => {
+                            const layout = draft.layout.config;
+                            const root = layout.nodes;
+                            const placement = draft.layout.panels[panel]?.placement;
+                            const side = placement === 'sidebar' ? 'first' : 'second';
+                            const toReplace = isMosaicLayoutParent(root)
+                                ? root[side]
+                                : undefined;
+                            if (toReplace &&
+                                isMosaicLayoutParent(root) &&
+                                !isMosaicLayoutParent(toReplace) &&
+                                toReplace !== MAIN_VIEW &&
+                                !layout.fixed?.includes(toReplace) &&
+                                !layout.pinned?.includes(toReplace)) {
+                                // replace first un-pinned leaf
+                                root[side] = panel;
+                            }
+                            else {
+                                const panelNode = { node: panel, weight: 1 };
+                                const restNode = {
+                                    node: draft.layout.config?.nodes,
+                                    weight: 3,
+                                };
+                                // add to to the left
+                                layout.nodes = makeMosaicStack(placement === 'sidebar-bottom' ? 'column' : 'row', side === 'first'
+                                    ? [panelNode, restNode]
+                                    : [restNode, panelNode]);
+                            }
+                        }));
+                    }
+                },
+                /**
+                 * Toggle the pin state of a panel.
+                 * @param panel - The panel to toggle the pin state of.
+                 */
+                togglePanelPin: (panel) => {
                     set((state) => produce(state, (draft) => {
                         const layout = draft.layout.config;
-                        const root = layout.nodes;
-                        const placement = draft.layout.panels[panel]?.placement;
-                        const side = placement === 'sidebar' ? 'first' : 'second';
-                        const toReplace = isMosaicLayoutParent(root)
-                            ? root[side]
-                            : undefined;
-                        if (toReplace &&
-                            isMosaicLayoutParent(root) &&
-                            !isMosaicLayoutParent(toReplace) &&
-                            toReplace !== MAIN_VIEW &&
-                            !layout.fixed?.includes(toReplace) &&
-                            !layout.pinned?.includes(toReplace)) {
-                            // replace first un-pinned leaf
-                            root[side] = panel;
+                        const pinned = layout.pinned ?? [];
+                        if (pinned.includes(panel)) {
+                            layout.pinned = pinned.filter((p) => p !== panel);
                         }
                         else {
-                            const panelNode = { node: panel, weight: 1 };
-                            const restNode = {
-                                node: draft.layout.config?.nodes,
-                                weight: 3,
-                            };
-                            // add to to the left
-                            layout.nodes = makeMosaicStack(placement === 'sidebar-bottom' ? 'column' : 'row', side === 'first'
-                                ? [panelNode, restNode]
-                                : [restNode, panelNode]);
+                            layout.pinned = [...pinned, panel];
                         }
                     }));
-                }
-            },
-            /**
-             * Toggle the pin state of a panel.
-             * @param panel - The panel to toggle the pin state of.
-             */
-            togglePanelPin: (panel) => {
-                set((state) => produce(state, (draft) => {
-                    const layout = draft.layout.config;
-                    const pinned = layout.pinned ?? [];
-                    if (pinned.includes(panel)) {
-                        layout.pinned = pinned.filter((p) => p !== panel);
-                    }
-                    else {
-                        layout.pinned = [...pinned, panel];
-                    }
-                }));
+                },
             },
+        };
+    });
+}
+function createLayoutPanelCommands(panels) {
+    const byIdCommand = {
+        id: 'layout.panel.toggle',
+        name: 'Toggle panel by ID',
+        description: 'Show or hide a panel by its ID',
+        group: 'Layout',
+        keywords: ['layout', 'panel', 'toggle', 'show', 'hide', 'id'],
+        inputSchema: ToggleLayoutPanelCommandInput,
+        inputDescription: 'Provide panelId and optional show. If show is omitted, the panel visibility is toggled.',
+        metadata: {
+            readOnly: false,
+            idempotent: true,
+            riskLevel: 'low',
+        },
+        validateInput: (input, { getState }) => {
+            const { panelId } = input;
+            if (!getState().layout.panels[panelId]) {
+                throw new Error(`Unknown panel ID "${panelId}".`);
+            }
+        },
+        execute: ({ getState }, input) => {
+            const { panelId, show } = input;
+            getState().layout.togglePanel(panelId, show);
+            return {
+                success: true,
+                commandId: 'layout.panel.toggle',
+                message: `Toggled panel "${panelId}".`,
+            };
         },
-    }));
+    };
+    const pinByIdCommand = {
+        id: 'layout.panel.toggle-pin',
+        name: 'Toggle panel pin by ID',
+        description: 'Pin or unpin a panel by its ID',
+        group: 'Layout',
+        keywords: ['layout', 'panel', 'pin', 'unpin', 'id'],
+        inputSchema: ToggleLayoutPanelPinInput,
+        inputDescription: 'Provide panelId to toggle pin state.',
+        metadata: {
+            readOnly: false,
+            idempotent: true,
+            riskLevel: 'low',
+        },
+        validateInput: (input, { getState }) => {
+            const { panelId } = input;
+            if (!getState().layout.panels[panelId]) {
+                throw new Error(`Unknown panel ID "${panelId}".`);
+            }
+        },
+        execute: ({ getState }, input) => {
+            const { panelId } = input;
+            getState().layout.togglePanelPin(panelId);
+            return {
+                success: true,
+                commandId: 'layout.panel.toggle-pin',
+                message: `Toggled pin state for panel "${panelId}".`,
+            };
+        },
+    };
+    const panelShortcutCommands = Object.entries(panels).map(([panelId, panelInfo]) => {
+        const title = panelInfo.title ?? panelId;
+        const keywords = [panelId, panelInfo.title, panelInfo.placement].filter((value) => Boolean(value));
+        return {
+            id: `layout.panel.toggle.${panelId}`,
+            name: `Toggle panel: ${title}`,
+            description: `Show or hide the ${title} panel`,
+            group: 'Layout',
+            keywords,
+            metadata: {
+                readOnly: false,
+                idempotent: true,
+                riskLevel: 'low',
+            },
+            execute: ({ getState }) => {
+                getState().layout.togglePanel(panelId);
+                return {
+                    success: true,
+                    commandId: `layout.panel.toggle.${panelId}`,
+                    message: `Toggled panel "${panelId}".`,
+                };
+            },
+        };
+    });
+    return [byIdCommand, pinByIdCommand, ...panelShortcutCommands];
 }
 export function useStoreWithLayout(selector) {
     return useBaseRoomStore((state) => selector(state));

package/dist/LayoutSlice.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSlice.js","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DEFAULT_MOSAIC_LAYOUT,\n  LayoutConfig,\n  MAIN_VIEW,\n  isMosaicLayoutParent,\n} from '@sqlrooms/layout-config';\nimport {createSlice, useBaseRoomStore} from '@sqlrooms/room-store';\nimport {produce} from 'immer';\nimport React from 'react';\nimport {z} from 'zod';\nimport {StateCreator} from 'zustand';\nimport {makeMosaicStack, removeMosaicNodeByKey} from './mosaic';\n\nexport type RoomPanelInfo = {\n  title?: string;\n  icon?: React.ComponentType<{className?: string}>;\n  component: React.ComponentType;\n  placement: 'sidebar' | 'sidebar-bottom' | 'main' | string;\n};\n\nexport const LayoutSliceConfig = LayoutConfig;\n\nexport type LayoutSliceConfig = z.infer<typeof LayoutSliceConfig>;\n\nexport function createDefaultLayoutConfig(): LayoutSliceConfig {\n  return DEFAULT_MOSAIC_LAYOUT;\n}\n\nexport type LayoutSliceState = {\n  layout: {\n    config: LayoutSliceConfig;\n    panels: Record<string, RoomPanelInfo>;\n    setConfig(layout: LayoutConfig): void;\n    /** @deprecated Use setConfig instead */\n    setLayout(layout: LayoutConfig): void;\n    togglePanel: (panel: string, show?: boolean) => void;\n    togglePanelPin: (panel: string) => void;\n  };\n};\n\nexport type CreateLayoutSliceProps = {\n  config?: LayoutSliceConfig;\n  panels?: Record<string, RoomPanelInfo>;\n};\n\nexport function createLayoutSlice({\n  config: initialConfig = createDefaultLayoutConfig(),\n  panels = {},\n}: CreateLayoutSliceProps = {}): StateCreator<LayoutSliceState> {\n  return createSlice<LayoutSliceState>((set, get) => ({\n    layout: {\n      config: initialConfig,\n      panels,\n      setConfig: (config) =>\n        set((state) =>\n          produce(state, (draft) => {\n            draft.layout.config = config;\n          }),\n        ),\n      setLayout: (layout) => get().layout.setConfig(layout),\n      togglePanel: (panel, show) => {\n        if (get().layout.config?.nodes === panel) {\n          // don't hide the view if it's the only one\n          return;\n        }\n        const result = removeMosaicNodeByKey(get().layout.config?.nodes, panel);\n        const isShown = result.success;\n        if (isShown) {\n          if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {\n            return;\n          }\n          set((state) =>\n            produce(state, (draft) => {\n              const layout = draft.layout.config;\n              layout.nodes = result.nextTree;\n              if (layout.pinned?.includes(panel)) {\n                layout.pinned = layout.pinned.filter(\n                  (p: string) => p !== panel,\n                );\n              }\n            }),\n          );\n        } else {\n          if (show === false) {\n            return;\n          }\n          set((state) =>\n            produce(state, (draft) => {\n              const layout = draft.layout.config;\n              const root = layout.nodes;\n              const placement = draft.layout.panels[panel]?.placement;\n              const side = placement === 'sidebar' ? 'first' : 'second';\n              const toReplace = isMosaicLayoutParent(root)\n                ? root[side]\n                : undefined;\n              if (\n                toReplace &&\n                isMosaicLayoutParent(root) &&\n                !isMosaicLayoutParent(toReplace) &&\n                toReplace !== MAIN_VIEW &&\n                !layout.fixed?.includes(toReplace) &&\n                !layout.pinned?.includes(toReplace)\n              ) {\n                // replace first un-pinned leaf\n                root[side] = panel;\n              } else {\n                const panelNode = {node: panel, weight: 1};\n                const restNode = {\n                  node: draft.layout.config?.nodes,\n                  weight: 3,\n                };\n                // add to to the left\n                layout.nodes = makeMosaicStack(\n                  placement === 'sidebar-bottom' ? 'column' : 'row',\n                  side === 'first'\n                    ? [panelNode, restNode]\n                    : [restNode, panelNode],\n                );\n              }\n            }),\n          );\n        }\n      },\n\n      /**\n       * Toggle the pin state of a panel.\n       * @param panel - The panel to toggle the pin state of.\n       */\n      togglePanelPin: (panel: string) => {\n        set((state) =>\n          produce(state, (draft) => {\n            const layout = draft.layout.config;\n            const pinned = layout.pinned ?? [];\n            if (pinned.includes(panel)) {\n              layout.pinned = pinned.filter((p: string) => p !== panel);\n            } else {\n              layout.pinned = [...pinned, panel];\n            }\n          }),\n        );\n      },\n    },\n  }));\n}\n\nexport function useStoreWithLayout<T>(\n  selector: (state: LayoutSliceState) => T,\n): T {\n  return useBaseRoomStore<LayoutSliceState, T>((state) => selector(state));\n}\n"]}
+{"version":3,"file":"LayoutSlice.js","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DEFAULT_MOSAIC_LAYOUT,\n  LayoutConfig,\n  MAIN_VIEW,\n  isMosaicLayoutParent,\n} from '@sqlrooms/layout-config';\nimport {\n  BaseRoomStoreState,\n  createSlice,\n  registerCommandsForOwner,\n  RoomCommand,\n  unregisterCommandsForOwner,\n  useBaseRoomStore,\n} from '@sqlrooms/room-store';\nimport {produce} from 'immer';\nimport React from 'react';\nimport {z} from 'zod';\nimport {StateCreator} from 'zustand';\nimport {makeMosaicStack, removeMosaicNodeByKey} from './mosaic';\n\nconst LAYOUT_COMMAND_OWNER = '@sqlrooms/layout/panels';\nconst ToggleLayoutPanelCommandInput = z.object({\n  panelId: z\n    .string()\n    .describe('ID of the panel to show/hide, e.g. \"sql-editor\".'),\n  show: z\n    .boolean()\n    .optional()\n    .describe(\n      'Optional explicit visibility. True shows, false hides, omitted toggles.',\n    ),\n});\ntype ToggleLayoutPanelCommandInput = z.infer<\n  typeof ToggleLayoutPanelCommandInput\n>;\n\nconst ToggleLayoutPanelPinInput = z.object({\n  panelId: z.string().describe('ID of the panel to pin/unpin.'),\n});\ntype ToggleLayoutPanelPinInput = z.infer<typeof ToggleLayoutPanelPinInput>;\n\nexport type RoomPanelInfo = {\n  title?: string;\n  icon?: React.ComponentType<{className?: string}>;\n  component: React.ComponentType;\n  placement: 'sidebar' | 'sidebar-bottom' | 'main' | string;\n};\n\nexport const LayoutSliceConfig = LayoutConfig;\n\nexport type LayoutSliceConfig = z.infer<typeof LayoutSliceConfig>;\n\nexport function createDefaultLayoutConfig(): LayoutSliceConfig {\n  return DEFAULT_MOSAIC_LAYOUT;\n}\n\nexport type LayoutSliceState = {\n  layout: {\n    initialize?: () => Promise<void>;\n    destroy?: () => Promise<void>;\n    config: LayoutSliceConfig;\n    panels: Record<string, RoomPanelInfo>;\n    setConfig(layout: LayoutConfig): void;\n    /** @deprecated Use setConfig instead */\n    setLayout(layout: LayoutConfig): void;\n    togglePanel: (panel: string, show?: boolean) => void;\n    togglePanelPin: (panel: string) => void;\n  };\n};\n\nexport type CreateLayoutSliceProps = {\n  config?: LayoutSliceConfig;\n  panels?: Record<string, RoomPanelInfo>;\n};\n\nexport function createLayoutSlice({\n  config: initialConfig = createDefaultLayoutConfig(),\n  panels = {},\n}: CreateLayoutSliceProps = {}): StateCreator<LayoutSliceState> {\n  return createSlice<LayoutSliceState, BaseRoomStoreState & LayoutSliceState>(\n    (set, get, store) => {\n      let unsubscribePanelChanges: (() => void) | undefined;\n      const registerPanelCommands = () => {\n        const panelCommands = createLayoutPanelCommands(get().layout.panels);\n        registerCommandsForOwner(store, LAYOUT_COMMAND_OWNER, panelCommands);\n      };\n\n      return {\n        layout: {\n          initialize: async () => {\n            registerPanelCommands();\n            unsubscribePanelChanges?.();\n            unsubscribePanelChanges = store.subscribe((state, prevState) => {\n              if (state.layout.panels !== prevState.layout.panels) {\n                registerPanelCommands();\n              }\n            });\n          },\n          destroy: async () => {\n            unsubscribePanelChanges?.();\n            unsubscribePanelChanges = undefined;\n            unregisterCommandsForOwner(store, LAYOUT_COMMAND_OWNER);\n          },\n          config: initialConfig,\n          panels,\n          setConfig: (config) =>\n            set((state) =>\n              produce(state, (draft) => {\n                draft.layout.config = config;\n              }),\n            ),\n          setLayout: (layout) => get().layout.setConfig(layout),\n          togglePanel: (panel, show) => {\n            if (get().layout.config?.nodes === panel) {\n              // don't hide the view if it's the only one\n              return;\n            }\n            const result = removeMosaicNodeByKey(\n              get().layout.config?.nodes,\n              panel,\n            );\n            const isShown = result.success;\n            if (isShown) {\n              if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {\n                return;\n              }\n              set((state) =>\n                produce(state, (draft) => {\n                  const layout = draft.layout.config;\n                  layout.nodes = result.nextTree;\n                  if (layout.pinned?.includes(panel)) {\n                    layout.pinned = layout.pinned.filter(\n                      (p: string) => p !== panel,\n                    );\n                  }\n                }),\n              );\n            } else {\n              if (show === false) {\n                return;\n              }\n              set((state) =>\n                produce(state, (draft) => {\n                  const layout = draft.layout.config;\n                  const root = layout.nodes;\n                  const placement = draft.layout.panels[panel]?.placement;\n                  const side = placement === 'sidebar' ? 'first' : 'second';\n                  const toReplace = isMosaicLayoutParent(root)\n                    ? root[side]\n                    : undefined;\n                  if (\n                    toReplace &&\n                    isMosaicLayoutParent(root) &&\n                    !isMosaicLayoutParent(toReplace) &&\n                    toReplace !== MAIN_VIEW &&\n                    !layout.fixed?.includes(toReplace) &&\n                    !layout.pinned?.includes(toReplace)\n                  ) {\n                    // replace first un-pinned leaf\n                    root[side] = panel;\n                  } else {\n                    const panelNode = {node: panel, weight: 1};\n                    const restNode = {\n                      node: draft.layout.config?.nodes,\n                      weight: 3,\n                    };\n                    // add to to the left\n                    layout.nodes = makeMosaicStack(\n                      placement === 'sidebar-bottom' ? 'column' : 'row',\n                      side === 'first'\n                        ? [panelNode, restNode]\n                        : [restNode, panelNode],\n                    );\n                  }\n                }),\n              );\n            }\n          },\n\n          /**\n           * Toggle the pin state of a panel.\n           * @param panel - The panel to toggle the pin state of.\n           */\n          togglePanelPin: (panel: string) => {\n            set((state) =>\n              produce(state, (draft) => {\n                const layout = draft.layout.config;\n                const pinned = layout.pinned ?? [];\n                if (pinned.includes(panel)) {\n                  layout.pinned = pinned.filter((p: string) => p !== panel);\n                } else {\n                  layout.pinned = [...pinned, panel];\n                }\n              }),\n            );\n          },\n        },\n      };\n    },\n  );\n}\n\ntype LayoutCommandStoreState = BaseRoomStoreState & LayoutSliceState;\n\nfunction createLayoutPanelCommands(\n  panels: Record<string, RoomPanelInfo>,\n): RoomCommand<LayoutCommandStoreState>[] {\n  const byIdCommand: RoomCommand<LayoutCommandStoreState> = {\n    id: 'layout.panel.toggle',\n    name: 'Toggle panel by ID',\n    description: 'Show or hide a panel by its ID',\n    group: 'Layout',\n    keywords: ['layout', 'panel', 'toggle', 'show', 'hide', 'id'],\n    inputSchema: ToggleLayoutPanelCommandInput,\n    inputDescription:\n      'Provide panelId and optional show. If show is omitted, the panel visibility is toggled.',\n    metadata: {\n      readOnly: false,\n      idempotent: true,\n      riskLevel: 'low',\n    },\n    validateInput: (input, {getState}) => {\n      const {panelId} = input as ToggleLayoutPanelCommandInput;\n      if (!getState().layout.panels[panelId]) {\n        throw new Error(`Unknown panel ID \"${panelId}\".`);\n      }\n    },\n    execute: ({getState}, input) => {\n      const {panelId, show} = input as ToggleLayoutPanelCommandInput;\n      getState().layout.togglePanel(panelId, show);\n      return {\n        success: true,\n        commandId: 'layout.panel.toggle',\n        message: `Toggled panel \"${panelId}\".`,\n      };\n    },\n  };\n\n  const pinByIdCommand: RoomCommand<LayoutCommandStoreState> = {\n    id: 'layout.panel.toggle-pin',\n    name: 'Toggle panel pin by ID',\n    description: 'Pin or unpin a panel by its ID',\n    group: 'Layout',\n    keywords: ['layout', 'panel', 'pin', 'unpin', 'id'],\n    inputSchema: ToggleLayoutPanelPinInput,\n    inputDescription: 'Provide panelId to toggle pin state.',\n    metadata: {\n      readOnly: false,\n      idempotent: true,\n      riskLevel: 'low',\n    },\n    validateInput: (input, {getState}) => {\n      const {panelId} = input as ToggleLayoutPanelPinInput;\n      if (!getState().layout.panels[panelId]) {\n        throw new Error(`Unknown panel ID \"${panelId}\".`);\n      }\n    },\n    execute: ({getState}, input) => {\n      const {panelId} = input as ToggleLayoutPanelPinInput;\n      getState().layout.togglePanelPin(panelId);\n      return {\n        success: true,\n        commandId: 'layout.panel.toggle-pin',\n        message: `Toggled pin state for panel \"${panelId}\".`,\n      };\n    },\n  };\n\n  const panelShortcutCommands: RoomCommand<LayoutCommandStoreState>[] =\n    Object.entries(panels).map(([panelId, panelInfo]) => {\n      const title = panelInfo.title ?? panelId;\n      const keywords = [panelId, panelInfo.title, panelInfo.placement].filter(\n        (value): value is string => Boolean(value),\n      );\n      return {\n        id: `layout.panel.toggle.${panelId}`,\n        name: `Toggle panel: ${title}`,\n        description: `Show or hide the ${title} panel`,\n        group: 'Layout',\n        keywords,\n        metadata: {\n          readOnly: false,\n          idempotent: true,\n          riskLevel: 'low',\n        },\n        execute: ({getState}) => {\n          getState().layout.togglePanel(panelId);\n          return {\n            success: true,\n            commandId: `layout.panel.toggle.${panelId}`,\n            message: `Toggled panel \"${panelId}\".`,\n          };\n        },\n      };\n    });\n\n  return [byIdCommand, pinByIdCommand, ...panelShortcutCommands];\n}\n\nexport function useStoreWithLayout<T>(\n  selector: (state: LayoutSliceState) => T,\n): T {\n  return useBaseRoomStore<LayoutSliceState, T>((state) => selector(state));\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/layout",
-  "version": "0.28.0-rc.0",
+  "version": "0.28.1-rc.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -21,9 +21,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/layout-config": "0.28.0-rc.0",
-    "@sqlrooms/room-store": "0.28.0-rc.0",
-    "@sqlrooms/ui": "0.28.0-rc.0",
+    "@sqlrooms/layout-config": "0.28.1-rc.0",
+    "@sqlrooms/room-store": "0.28.1-rc.0",
+    "@sqlrooms/ui": "0.28.1-rc.0",
     "immer": "^11.0.1",
     "zod": "^4.1.8",
     "zustand": "^5.0.8"
@@ -40,5 +40,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "87a478edbff690e04c38cc717db8e11e844565c8"
+  "gitHead": "1e0dcae95d1ccdbcd1b32df1d647d0f794b94e5e"
 }