ctx.layout

Read and drive side-panel collapse state through LayoutService, reveal a registered side panel, and open a dock-anchored companion sheet for one. Read collapse state reactively in React with useServiceState.

ctx.layout: LayoutService

Example

tsx

import { useServiceState } from "@silo-code/sdk";

function MyWidget() {
  const state = useServiceState(ctx.layout);
  return (
    <button onClick={() => ctx.layout.toggleSidePanel("left")}>
      {state.left.collapsed ? "Show" : "Hide"} left
    </button>
  );
}

openPanelSheet — a companion sheet anchored to a side panel

tsx

void ctx.layout.openPanelSheet(
  "skills",
  (close) => <BrowseBody onClose={close} />,
  { title: <BrandMark />, width: 560 },
);

Opens a host-owned, dock-anchored sheet that grows out of the side dock currently hosting the given SidePanel's id — revealing that panel first (unhiding it, expanding a collapsed column, activating its tab), then sliding the sheet out from its side. Never modal: no scrim, Escape does nothing, the rest of the workbench stays live. Unlike ctx.ui.showModal, there's no anchor/side to choose — the target panel's own current dock decides it, so the sheet opens correctly whether triggered by a click inside the panel or by a command/status-bar button from anywhere else. Resolves once the sheet closes; rejects if panelId names no registered panel.

Methods

On ctx.layout. Method names link to the full signature.

Method	What it does
`getState()`	Current frozen `LayoutState`.
`subscribe(listener)`	Observe changes; returns a `Disposable`.
`toggleSidePanel(location)`	Toggle a side column collapsed/expanded.
`setSidePanelCollapsed(location, collapsed)`	Set a column's collapsed state explicitly.
`revealSidePanel(id)`	Bring a registered panel to the foreground — make it active in its column and expand that column. No-op for an unknown id.
`openPanelSheet(panelId, render, opts?)`	Open a dock-anchored sheet grown out of `panelId`'s side dock, revealing that panel first. Resolves when the sheet closes; rejects for an unknown `panelId`.

State

The readable state — a frozen LayoutState from getState(), subscribe, or useServiceState:

Property	Type	What it is
`left`	`SidePanelColumnState`	left column collapse state (`{ collapsed }`)
`right`	`SidePanelColumnState`	right column collapse state (`{ collapsed }`)

Types

Pass LayoutService.

Related: LayoutState · SidePanelColumnState · SideLocation · SheetOptions (for openPanelSheet).

ctx.layout ​

Example ​

openPanelSheet — a companion sheet anchored to a side panel ​

Methods ​

State ​

Types ​

See also ​