Zod schemas and types for SQLRooms layout configuration.

Installation

npm install @sqlrooms/layout-config

Main exports

• MAIN_VIEW
• LayoutConfig (LayoutNode | null)
• LayoutNode, LayoutPanelNode, LayoutSplitNode, LayoutTabsNode, LayoutDockNode, LayoutGridNode
• isLayoutPanelNode, isLayoutSplitNode, isLayoutTabsNode, isLayoutDockNode, isLayoutGridNode
• createDefaultLayout()

Basic usage

import {
  LayoutConfig,
  LayoutNode,
  createDefaultLayout,
} from '@sqlrooms/layout-config';

// Simplest config — just the main view
const simpleLayout = createDefaultLayout(); // returns 'main'

// Two-pane split layout
const twoPaneLayout: LayoutConfig = {
  type: 'split',
  direction: 'row',
  children: [
    {type: 'panel', id: 'data', defaultSize: '30%'},
    {type: 'panel', id: 'main', defaultSize: '70%'},
  ],
};

// Validated via Zod
const validated: LayoutConfig = LayoutConfig.parse(twoPaneLayout);

Layout node types

LayoutConfig is LayoutNode | null. A LayoutNode is one of:

| Type | Description | | -------- | ------------------------------------------------------------- | | string | Leaf panel key (e.g. 'main', 'data') | | panel | Leaf with sizing constraints (defaultSize, minSize, etc.) | | split | Resizable panel group (rendered via react-resizable-panels) | | tabs | Tabbed container with collapsible areas | | dock | Docking container with a nested layout tree | | grid | Scrollable dashboard grid with draggable/resizable panels |

Panel node

{type: 'panel', id: 'sidebar', defaultSize: '25%', minSize: '150px', collapsible: true}

Split node

{
  type: 'split',
  direction: 'row',
  children: [
    {type: 'panel', id: 'left', defaultSize: '30%'},
    {type: 'panel', id: 'right'},
  ],
}

Tabs node

{
  type: 'tabs',
  id: 'sidebar',
  children: ['data', 'schema'],
  activeTabIndex: 0,
  collapsible: true,
}

Dock node

{
  type: 'dock',
  id: 'docking-area',
  root: {
    type: 'split',
    direction: 'row',
    children: [
      {type: 'panel', id: 'editor', defaultSize: '70%'},
      {type: 'panel', id: 'preview', defaultSize: '30%'},
    ],
  },
  defaultSize: '100%',
}

Grid node

{
  type: 'grid',
  id: 'dashboard-grid',
  breakpoints: {lg: 768, sm: 0},
  cols: {lg: 12, sm: 6},
  rowHeight: 220,
  compactType:  'vertical',
  preventCollision: false,
  resizeHandles: ['e', 's', 'w', 'se', 'sw'],
  children: [
    {type: 'panel', id: 'chart-a', panel: 'chart'},
    {type: 'panel', id: 'chart-b', panel: 'chart'},
  ],
}

Typical integration

import {createRoomShellSlice} from '@sqlrooms/room-shell';

createRoomShellSlice({
  layout: {
    config: twoPaneLayout,
    panels: {
      data: {title: 'Data', component: DataPanel},
      main: {title: 'Main', component: MainPanel},
    },
  },
});

Backward compatibility

Legacy binary-tree split configs are still migrated via z.preprocess, but the old mosaic node shape is no longer part of the public schema.