nexus-shell 0.2.9 → 0.2.10

package/README.md

@@ -28,8 +28,10 @@ import { Boxes, Files } from 'lucide-react';
 import {
   AppTitle,
   ShellLayout,
+  chatPanel,
   componentRegistry,
   initializeShell,
+  terminalPanel,
   useLayoutStore,
 } from 'nexus-shell';
 import 'nexus-shell/style.css';
@@ -38,7 +40,13 @@ import 'nexus-shell/style.css';
 componentRegistry.register('editor', Editor);
 
 initializeShell({
-  panels: [{ id: 'files', label: 'Explorer', icon: Files, component: FileExplorer }],
+  panels: [
+    { id: 'files', label: 'Explorer', icon: Files, component: FileExplorer },
+    terminalPanel(),
+  ],
+  // Chat on the right rail. Move it to `panels` for the left, or register
+  // the component as a tab — nothing about it is bound to one edge.
+  inspectorPanels: [chatPanel()],
   commands: [
     { id: 'file.save', label: 'File: Save', keybinding: 'Control+s', execute: save },
   ],
@@ -56,6 +64,23 @@ createRoot(document.getElementById('root')!).render(
 That is a working IDE: dockable tabs, a command palette on `Cmd/Ctrl+Shift+P`, a
 terminal, a chat pane, and a themable frame.
 
+## Where things go
+
+The shell has four places a view can live, and nothing is nailed to one of
+them. Chat and the terminal are ordinary registrations, so they go wherever you
+put them — including into a dockable tab, alongside your own views.
+
+| Place | How |
+| :-- | :-- |
+| Left rail | `panels: [...]` |
+| Right rail | `inspectorPanels: [...]` |
+| Dockable tab | `componentRegistry.register(id, Component)` + `addTab(id)` |
+| Bottom of the workspace | A tab in the bottom row of your `initialLayoutJson` |
+
+Anything hosted in a pane or a tab is told so, and drops its own title bar —
+`SidebarPane` and the tab strip already draw one. Pass `chrome` explicitly to
+force it either way.
+
 ## Growing an app
 
 You add capability by **registering** it. None of this changes the layout, which
@@ -67,6 +92,8 @@ is what lets plugins and distant code contribute to the shell.
 | An action or hotkey | `commandRegistry.registerCommand({ id, label, keybinding, execute })` — appears in the palette automatically |
 | A menu entry | `menuRegistry.registerMenu('File', { id, label, commandId })` |
 | A sidebar panel | Add it to `panels`; it becomes an activity bar icon |
+| An inspector or properties panel | Add it to `inspectorPanels`; it docks right, with its own rail |
+| Chat or a terminal, anywhere | `chatPanel()` / `terminalPanel()` in `panels` or `inspectorPanels`, or register the component as a tab |
 | A status bar item | `useStatusBarStore.getState().addWidget(...)` |
 | A dialog from anywhere | `await useModalStore.getState().openConfirm('Sure?')` |
 | An unsaved-changes guard | `useLayoutStore.getState().setTabDirty(tabId, true)` |
@@ -114,8 +141,8 @@ shell's own frame and keep every registration working.
 
 | Component | What it is |
 | :-- | :-- |
-| `ActivityBar` | Vertical icon rail for switching sidebar panels |
-| `ChatPane` | Docked chat transcript with slash-command autocomplete |
+| `ActivityBar` | Vertical icon rail for switching side panels, either edge |
+| `ChatPane` | Chat transcript with slash-command autocomplete; fills any host |
 | `CommandPalette` | Filterable, keyboard-navigable command list |
 | `ContextMenu` | Floating menu positioned at viewport coordinates |
 | `DataGrid` | Sortable, filterable table with optional virtualisation |
@@ -124,9 +151,10 @@ shell's own frame and keep every registration working.
 | `QuickSearch` | Compact search field with grouped results, for the menu bar |
 | `SearchWidget` | Full-height search panel with autocomplete, for the sidebar |
 | `SettingsPanel` | Theme picker body for the settings sidebar |
-| `SidebarPane` | Titled, closable container for sidebar content |
+| `SidebarPane` | Titled, closable side panel; `side` docks it left or right |
 | `StatusBar` | Footer with left / center / right item groups |
-| `TerminalPane` | Bottom-docked terminal log and input |
+| `TerminalPane` | Terminal log and input; fills any host |
+| `PaneHostProvider` | Tells hosted components a title bar is already drawn |
 | `ThemeSwitcher` | Segmented theme control |
 | `TreeWidget` | Virtualised tree for any hierarchy, with drag-to-move and a data-driven menu |
 | `GraphCanvas` | Infinite pannable, zoomable field for node-and-edge editing |

package/dist/components/layout/PaneHost.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+
+/**
+ * What a component can learn about the thing hosting it.
+ *
+ * A pane, a dockable tab and a bare `<div>` give a component very different
+ * surroundings, and the difference that matters is whether a title bar has
+ * already been drawn. Without this, a chat pane inside a `SidebarPane` renders
+ * two headers and two close buttons.
+ */
+export interface IPaneHost {
+    /**
+     * The host already draws a title bar and a close affordance, so a hosted
+     * component should not draw its own.
+     */
+    chrome: boolean;
+    /** Where the host sits, when it knows. Useful for choosing a layout. */
+    placement?: 'left' | 'right' | 'bottom' | 'tab';
+}
+/**
+ * Read the surrounding host, or `null` when there isn't one.
+ *
+ * Prefer {@link useHostChrome}, which folds in an explicit prop.
+ */
+export declare const usePaneHost: () => IPaneHost | null;
+/**
+ * Whether this component should draw its own title bar.
+ *
+ * The host provides the *default*; an explicit prop always wins. That ordering
+ * is deliberate — auto-detection keeps the common case free of configuration,
+ * but a component that can only be told implicitly is one you cannot unit-test
+ * without building a host around it, and cannot force when the detection is
+ * wrong.
+ *
+ * @param explicit The component's own `chrome` prop, if the caller set one.
+ */
+export declare const useHostChrome: (explicit?: boolean) => boolean;
+export interface PaneHostProviderProps extends IPaneHost {
+    /** Everything that should see this host. */
+    children: ReactNode;
+}
+/**
+ * Declare that everything inside is hosted.
+ *
+ * `SidebarPane` and the shell's tab factory do this for you. Wrap your own
+ * container in it if you draw a title bar and want hosted components to defer.
+ *
+ * @example
+ * ```tsx
+ * <PaneHostProvider chrome placement="bottom">
+ *   <MyTitleBar />
+ *   <ConnectedTerminalPane />
+ * </PaneHostProvider>
+ * ```
+ */
+export declare const PaneHostProvider: ({ children, ...host }: PaneHostProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/ShellLayout.d.ts

@@ -11,6 +11,16 @@ export interface ShellLayoutProps {
      * renders its `component` in the sidebar when selected.
      */
     panels?: ISidebarPanel[];
+    /**
+     * Right-hand panels — inspectors, properties, anything about the current
+     * selection rather than about navigation.
+     *
+     * Registered exactly like `panels`, against a separate store, so the two
+     * sides open and close independently: file tree on the left and properties on
+     * the right, both at once. The right-hand rail appears only once at least one
+     * is registered.
+     */
+    inspectorPanels?: ISidebarPanel[];
     /** Slash commands available in the chat pane. */
     slashCommands?: ISlashCommandConfig[];
     /** Menu structure, keyed by top-level menu name. Items dispatch by `commandId`. */
@@ -92,4 +102,4 @@ export interface ShellLayoutProps {
  * );
  * ```
  */
-export declare const ShellLayout: ({ panels, slashCommands, menuConfig, statusBarConfig, title, rightMenuBarContent, centerMenuBarContent, layoutModel, initialLayoutJson, disableLocalStorage, onLayoutChange, }: ShellLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShellLayout: ({ panels, inspectorPanels, slashCommands, menuConfig, statusBarConfig, title, rightMenuBarContent, centerMenuBarContent, layoutModel, initialLayoutJson, disableLocalStorage, onLayoutChange, }: ShellLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/widgets/ActivityBar.d.ts

@@ -1,4 +1,5 @@
 import { LucideIcon } from 'lucide-react';
+import { PaneSide } from './SidebarPane';
 
 /** A single icon button in the {@link ActivityBar}. */
 export interface IActivityBarItem {
@@ -24,17 +25,25 @@ export interface ActivityBarProps {
      * deselect it — is the caller's decision, not the component's.
      */
     onSelect?: (id: string) => void;
+    /**
+     * Which edge of the shell the rail is docked to. Defaults to `"left"`.
+     *
+     * The divider and the active-item indicator both mirror, so a right-hand rail
+     * marks its selection on the edge facing the content.
+     */
+    side?: PaneSide;
     /** Extra classes merged onto the root `<aside>`. */
     className?: string;
     /** Accessible label for the landmark. Defaults to `"Activity Bar"`. */
     'aria-label'?: string;
 }
 /**
- * The narrow vertical icon rail on the left edge of the shell, used to switch
- * which panel the sidebar shows.
+ * The narrow vertical icon rail at the edge of the shell, used to switch which
+ * panel the adjacent {@link SidebarPane} shows.
  *
- * Controlled — it holds no selection state. For the store-backed variant used
- * by `ShellLayout`, see `ConnectedActivityBar`.
+ * Controlled — it holds no selection state. `side` docks it left or right; for
+ * the store-backed variants used by `ShellLayout`, see `ConnectedActivityBar`
+ * and `ConnectedInspectorBar`.
  *
  * @example
  * ```tsx
@@ -45,4 +54,4 @@ export interface ActivityBarProps {
  * />
  * ```
  */
-export declare const ActivityBar: ({ items, bottomItems, activeId, onSelect, className, "aria-label": ariaLabel, }: ActivityBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActivityBar: ({ items, bottomItems, activeId, onSelect, side, className, "aria-label": ariaLabel, }: ActivityBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/widgets/ChatPane.d.ts

@@ -38,17 +38,31 @@ export interface ChatPaneProps {
     placeholder?: string;
     /** Shown in place of the transcript when `messages` is empty. */
     emptyState?: React.ReactNode;
+    /**
+     * Draw the title bar.
+     *
+     * Left unset, this follows the host: inside a `SidebarPane` or a dockable tab
+     * the title is already drawn, so the pane omits its own. Set it explicitly to
+     * force either way — which is also what lets the component be tested without
+     * a host around it.
+     */
+    chrome?: boolean;
     /** Extra classes merged onto the root element. */
     className?: string;
 }
 /**
- * A docked chat panel: a scrolling transcript over a composer with slash-command
+ * A chat panel: a scrolling transcript over a composer with slash-command
  * autocomplete.
  *
  * Fully controlled — it owns only the in-progress input and the suggestion
  * highlight. Messages, sending and visibility belong to the caller, so the same
  * component works against a local array, a websocket, or an LLM endpoint. For
- * the store-backed variant used by `ShellLayout`, see `ConnectedChatPane`.
+ * the store-backed variant, see `ConnectedChatPane`.
+ *
+ * **It fills whatever hosts it.** Register it as a sidebar panel, an inspector
+ * panel or a dockable tab and it takes that shape; it carries no width or edge
+ * of its own. Inside a host that draws a title bar it omits its own header —
+ * see `chrome` to override.
  *
  * @example
  * ```tsx
@@ -60,4 +74,4 @@ export interface ChatPaneProps {
  * />
  * ```
  */
-export declare const ChatPane: ({ messages, onSend, slashCommands, onSlashCommand, onClose, title, placeholder, emptyState, className, }: ChatPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatPane: ({ messages, onSend, slashCommands, onSlashCommand, onClose, title, placeholder, emptyState, chrome, className, }: ChatPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/widgets/SidebarPane.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+/** Which edge of the shell a pane or rail is docked to. */
+export type PaneSide = 'left' | 'right';
 export interface SidebarPaneProps {
     /**
      * Heading text. Rendered uppercase with letter-spacing; pass it in natural
@@ -15,23 +17,40 @@ export interface SidebarPaneProps {
     onClose?: () => void;
     /** Fixed pane width, as a CSS length. Defaults to `"300px"`. */
     width?: string;
+    /**
+     * Which edge of the shell the pane is docked to. Defaults to `"left"`.
+     *
+     * Only the divider moves — a right-hand pane is the same container, so an
+     * inspector does not need a component of its own.
+     */
+    side?: PaneSide;
     /** Extra classes merged onto the root `<aside>`. */
     className?: string;
 }
 /**
- * The collapsible panel beside the {@link ActivityBar}: a titled header with an
- * optional close button, over a scrolling body.
+ * A docked side panel: a titled header with an optional close button, over a
+ * scrolling body.
  *
  * A pure container — it decides nothing about which panel is showing and holds
- * no state. Render whatever you like as `children`. For the store-backed
- * variant that resolves the active panel from `useSidebarStore`, see
- * `ConnectedSidebarPane`.
+ * no state. Render whatever you like as `children`.
+ *
+ * `side` docks it left (beside the {@link ActivityBar}) or right, where it
+ * becomes an inspector. Both are the same component deliberately: before this
+ * prop existed every application hand-rolled its own right-hand
+ * `<div className="w-80 border-l …">`, and they all drifted apart.
+ *
+ * For the store-backed variants used by `ShellLayout`, see
+ * `ConnectedSidebarPane` and `ConnectedInspectorPane`.
  *
  * @example
  * ```tsx
  * <SidebarPane title="Explorer" onClose={() => setActive(null)}>
  *   <TreeWidget data={files} />
  * </SidebarPane>
+ *
+ * <SidebarPane title="Properties" side="right" width="320px">
+ *   <PropertyPanel subjects={selected} fields={fields} />
+ * </SidebarPane>
  * ```
  */
-export declare const SidebarPane: ({ title, children, onClose, width, className, }: SidebarPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarPane: ({ title, children, onClose, width, side, className, }: SidebarPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/widgets/TerminalPane.d.ts

@@ -12,8 +12,22 @@ export interface TerminalPaneProps {
     onCommand?: (command: string) => void;
     /** Called when the collapse or close button is pressed. */
     onClose?: () => void;
-    /** Height of the pane, as a CSS length. Defaults to `"250px"`. */
+    /**
+     * Height of the pane, as a CSS length.
+     *
+     * Leave it unset inside a host that sizes its own children — a side pane or a
+     * dockable tab — and the terminal fills the space instead. Defaults to
+     * `"250px"` only when standalone.
+     */
     height?: string;
+    /**
+     * Draw the title bar.
+     *
+     * Left unset, this follows the host: inside a `SidebarPane` or a dockable tab
+     * the title is already drawn, so the pane omits its own. Set it explicitly to
+     * force either way.
+     */
+    chrome?: boolean;
     /** Prompt string shown before the input. Defaults to `"$"`. */
     prompt?: string;
     /** Title shown in the pane header. Defaults to `"Terminal"`. */
@@ -22,14 +36,17 @@ export interface TerminalPaneProps {
     className?: string;
 }
 /**
- * A bottom-docked terminal pane: a scrolling output log over a single-line
- * input.
+ * A terminal pane: a scrolling output log over a single-line input.
  *
  * Presentational and fully controlled — it owns only the in-progress input
  * text. Visibility, history and command execution all belong to the caller.
  * For the store-backed variant with built-in `clear`/`help` handling, see
  * `ConnectedTerminalPane`.
  *
+ * **It fills whatever hosts it.** Bottom of the workspace, a side pane, or a
+ * dockable tab — register it wherever it belongs. Inside a host that draws a
+ * title bar it omits its own header and its own fixed height.
+ *
  * @example
  * ```tsx
  * const [history, setHistory] = useState<string[]>([]);
@@ -40,4 +57,4 @@ export interface TerminalPaneProps {
  * />
  * ```
  */
-export declare const TerminalPane: ({ history, onCommand, onClose, height, prompt, title, className, }: TerminalPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TerminalPane: ({ history, onCommand, onClose, height, prompt, title, chrome, className, }: TerminalPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/connected/ConnectedActivityBar.d.ts

@@ -2,9 +2,20 @@ import { ActivityBarProps } from '../components/widgets/ActivityBar';
 
 export type ConnectedActivityBarProps = Omit<ActivityBarProps, 'items' | 'activeId' | 'onSelect'>;
 /**
- * {@link ActivityBar} bound to `useSidebarStore`.
+ * {@link ActivityBar} bound to `useSidebarStore`, docked left.
  *
  * Derives its items from the registered sidebar panels and toggles the active
  * panel on click — clicking the already-active item closes the sidebar.
  */
 export declare const ConnectedActivityBar: (props: ConnectedActivityBarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * {@link ActivityBar} bound to `useInspectorStore`, docked right.
+ *
+ * Rendered only when inspector panels are registered — an empty rail is a
+ * twelve-pixel strip of nothing, and a shell that grows one the moment you
+ * register a panel is easier to reason about than one you must switch on.
+ *
+ * It also defaults to no bottom group: settings live on the left rail, and two
+ * settings buttons would be a puzzle.
+ */
+export declare const ConnectedInspectorBar: (props: ConnectedActivityBarProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/connected/ConnectedChatPane.d.ts

@@ -9,10 +9,13 @@ export type ConnectedChatPaneProps = Omit<ChatPaneProps, 'messages' | 'slashComm
     onSend?: (text: string) => void;
 };
 /**
- * {@link ChatPane} bound to `useChatStore` and `useRightSidebarStore`.
+ * {@link ChatPane} bound to `useChatStore` and `useChatVisibilityStore`.
  *
- * Renders nothing while the right sidebar reports chat closed. Appends each
- * submission to the transcript, then either dispatches a registered slash
- * command's `execute` or hands the text to `onSend`.
+ * Appends each submission to the transcript, then either dispatches a
+ * registered slash command's `execute` or hands the text to `onSend`.
+ *
+ * Visibility belongs to whatever hosts it — a pane closes by closing the pane,
+ * a tab by closing the tab. Register it with `chatPanel()`, or as a tab
+ * component, and put it wherever it belongs.
  */
-export declare const ConnectedChatPane: ({ onSend, ...props }: ConnectedChatPaneProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ConnectedChatPane: ({ onSend, ...props }: ConnectedChatPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/connected/ConnectedSidebarPane.d.ts

@@ -2,11 +2,32 @@ import { SidebarPaneProps } from '../components/widgets/SidebarPane';
 
 export type ConnectedSidebarPaneProps = Omit<SidebarPaneProps, 'title' | 'children' | 'onClose'>;
 /**
- * {@link SidebarPane} bound to `useSidebarStore`.
+ * {@link SidebarPane} bound to `useSidebarStore`, docked left.
  *
  * Renders whichever panel is active, or nothing when the sidebar is closed. The
  * reserved `"settings"` panel id renders the built-in {@link SettingsPanel}
  * wired to `useThemeStore`; every other id resolves against the panels
  * registered in the store.
  */
-export declare const ConnectedSidebarPane: (props: ConnectedSidebarPaneProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ConnectedSidebarPane: (props: ConnectedSidebarPaneProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * {@link SidebarPane} bound to `useInspectorStore`, docked right.
+ *
+ * The same pane on the other edge, resolving against a separate panel registry
+ * — so an inspector opens and closes independently of the explorer, which is
+ * how anyone actually works: file tree open on the left, properties on the
+ * right, both at once.
+ *
+ * Unlike the left pane there is no reserved `"settings"` id here; settings are
+ * navigation, and navigation belongs on the left.
+ *
+ * @example
+ * ```tsx
+ * <ShellLayout
+ *   inspectorPanels={[
+ *     { id: 'properties', label: 'Properties', icon: Sliders, component: Inspector },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ConnectedInspectorPane: (props: ConnectedSidebarPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/connected/ConnectedTerminalPane.d.ts

@@ -11,8 +11,11 @@ export type ConnectedTerminalPaneProps = Omit<TerminalPaneProps, 'history' | 'on
 /**
  * {@link TerminalPane} bound to `useTerminalStore`.
  *
- * Renders nothing while the store reports the terminal closed. Echoes each
- * command into history and handles `help` and `clear` internally; anything else
- * is offered to `onCommand` before falling back to a not-found message.
+ * Echoes each command into history and handles `help` and `clear` internally;
+ * anything else is offered to `onCommand` before falling back to a not-found
+ * message.
+ *
+ * Visibility belongs to whatever hosts it. Register it with `terminalPanel()`
+ * for a side pane, or as a tab component for the docking area.
  */
-export declare const ConnectedTerminalPane: ({ onCommand, ...props }: ConnectedTerminalPaneProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ConnectedTerminalPane: ({ onCommand, ...props }: ConnectedTerminalPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/connected/index.d.ts

@@ -9,12 +9,13 @@
  * Reach for these when you want the shell's behavior. Reach for the plain
  * components when you want control.
  */
-export { ConnectedActivityBar, type ConnectedActivityBarProps } from './ConnectedActivityBar';
+export { chatPanel, terminalPanel } from './panels';
+export { ConnectedActivityBar, ConnectedInspectorBar, type ConnectedActivityBarProps, } from './ConnectedActivityBar';
 export { ConnectedChatPane, type ConnectedChatPaneProps } from './ConnectedChatPane';
 export { ConnectedCommandPalette, type ConnectedCommandPaletteProps } from './ConnectedCommandPalette';
 export { ConnectedMenuBar, type ConnectedMenuBarProps } from './ConnectedMenuBar';
 export { ConnectedModal, type ConnectedModalProps } from './ConnectedModal';
-export { ConnectedSidebarPane, type ConnectedSidebarPaneProps } from './ConnectedSidebarPane';
+export { ConnectedInspectorPane, ConnectedSidebarPane, type ConnectedSidebarPaneProps, } from './ConnectedSidebarPane';
 export { ConnectedStatusBar, type ConnectedStatusBarProps } from './ConnectedStatusBar';
 export { ConnectedTerminalPane, type ConnectedTerminalPaneProps } from './ConnectedTerminalPane';
 export { ConnectedThemeSwitcher, type ConnectedThemeSwitcherProps } from './ConnectedThemeSwitcher';

package/dist/connected/panels.d.ts

@@ -0,0 +1,28 @@
+import { CHAT_PANEL_ID, TERMINAL_PANEL_ID, ISidebarPanel } from '../core/services/SidebarService';
+
+/**
+ * Ready-made panel descriptors for the shell's own pieces.
+ *
+ * Chat and terminal used to be nailed into fixed slots — chat on the right,
+ * terminal along the bottom — and there was no way to put them anywhere else.
+ * They are now ordinary registrations, so they go wherever you register them:
+ *
+ * ```tsx
+ * initializeShell({
+ *   panels: [terminalPanel()],            // left rail
+ *   inspectorPanels: [chatPanel()],       // right rail
+ * });
+ *
+ * // …or as a dockable tab, alongside everything else:
+ * componentRegistry.register('terminal', ConnectedTerminalPane);
+ * useLayoutStore.getState().addTab('terminal', 'Terminal');
+ * ```
+ *
+ * Each takes overrides, so the id, label or icon can be changed without
+ * rebuilding the descriptor by hand.
+ */
+/** The chat pane, as a registerable panel. */
+export declare const chatPanel: (overrides?: Partial<ISidebarPanel>) => ISidebarPanel;
+/** The terminal, as a registerable panel. */
+export declare const terminalPanel: (overrides?: Partial<ISidebarPanel>) => ISidebarPanel;
+export { CHAT_PANEL_ID, TERMINAL_PANEL_ID };

package/dist/core/Boot.d.ts

@@ -10,6 +10,12 @@ export interface InitializeShellOptions {
      * renders its `component` in the sidebar when selected.
      */
     panels?: ISidebarPanel[];
+    /**
+     * Right-hand panels — inspectors and properties, as opposed to navigation.
+     * Registered against `useInspectorStore`, so they open and close
+     * independently of the left-hand sidebar.
+     */
+    inspectorPanels?: ISidebarPanel[];
     /** Menus keyed by top-level name. Items dispatch through their `commandId`. */
     menus?: Record<string, IMenuItemConfig[]>;
     /** Commands available to the palette, menus and keybindings. */
@@ -32,6 +38,18 @@ export interface InitializeShellOptions {
 }
 /** The command ids `initializeShell` registers unless told not to. */
 export declare const DEFAULT_COMMAND_IDS: readonly ["view.toggleTerminal", "view.toggleChat", "view.toggleSidebar", ...string[]];
+/**
+ * Toggle a panel wherever it happens to be registered.
+ *
+ * Chat and terminal are no longer nailed to one edge, so a command that toggled
+ * a fixed slot would be wrong the moment you moved them. This looks the id up
+ * in the left rail, then the right, and finally opens it as a tab — which is
+ * also what makes `Control+\`` keep working when the terminal is a tab.
+ *
+ * Returns `false` when the id is registered nowhere, so a caller can tell the
+ * difference between "toggled" and "nothing to toggle".
+ */
+export declare const togglePanel: (id: string) => boolean;
 /**
  * Boot the shell: register commands, menus, panels and status bar items into
  * the shell registries and stores.

package/dist/core/services/SidebarService.d.ts

@@ -1,17 +1,48 @@
+import { StoreApi, UseBoundStore } from 'zustand';
 import { LucideIcon } from 'lucide-react';
 
+/**
+ * The docked side panels, one store per edge of the shell.
+ *
+ * Both edges behave identically — a registry of panels, one of which is active,
+ * remembered across reloads — so they share an implementation rather than two
+ * that drift.
+ */
+/**
+ * Ids the shell's own panels use by default.
+ *
+ * Declared here rather than beside the descriptors so `core` can resolve them
+ * without depending on `connected` — the dependency runs the other way.
+ */
+export declare const CHAT_PANEL_ID = "chat";
+export declare const TERMINAL_PANEL_ID = "terminal";
 export interface ISidebarPanel {
     id: string;
     label: string;
     icon: LucideIcon;
     component: React.ComponentType<any> | React.ReactNode;
 }
-interface SidebarState {
+export interface SidebarState {
+    /** Id of the open panel, or `null` when the pane is collapsed. */
     activeSidebar: string | null;
     panels: ISidebarPanel[];
     setActiveSidebar: (id: string | null) => void;
+    /** Open the panel, or close it if it is already open. */
     toggleSidebar: (id: string) => void;
     setPanels: (panels: ISidebarPanel[]) => void;
 }
-export declare const useSidebarStore: import('zustand').UseBoundStore<import('zustand').StoreApi<SidebarState>>;
-export {};
+export type SidebarStore = UseBoundStore<StoreApi<SidebarState>>;
+/**
+ * A panel store bound to one storage key.
+ *
+ * Exported so an application with a third docked region — a bottom drawer, say
+ * — gets the same behaviour without copying it.
+ */
+export declare const createSidebarStore: (storageKey: string) => SidebarStore;
+/** The left-hand pane, beside the activity bar. */
+export declare const useSidebarStore: SidebarStore;
+/**
+ * The right-hand pane: inspectors, properties, chat transcripts — anything
+ * about the current selection rather than about navigation.
+ */
+export declare const useInspectorStore: SidebarStore;

package/dist/core/services/TerminalService.d.ts

@@ -1,8 +1,13 @@
+/**
+ * The terminal's scrollback.
+ *
+ * Visibility used to live here too, back when the terminal had exactly one
+ * place it could be. It is now registered like any other panel, so whatever
+ * hosts it owns whether it is showing — see `terminalPanel()` and
+ * `togglePanel()`.
+ */
 interface TerminalState {
-    isOpen: boolean;
     history: string[];
-    setOpen: (open: boolean) => void;
-    toggle: () => void;
     addHistory: (line: string) => void;
     clearHistory: () => void;
 }

package/dist/index.d.ts

@@ -23,7 +23,8 @@
  * to.
  */
 export { ShellLayout, ShellLayout as NexusWorkspaceShell, type ShellLayoutProps } from './components/layout/ShellLayout';
-export { initializeShell, DEFAULT_COMMAND_IDS, type InitializeShellOptions, } from './core/Boot';
+export { initializeShell, togglePanel, DEFAULT_COMMAND_IDS, type InitializeShellOptions, } from './core/Boot';
+export { PaneHostProvider, usePaneHost, useHostChrome, type IPaneHost, type PaneHostProviderProps, } from './components/layout/PaneHost';
 export { commandRegistry, CommandRegistry, type ICommand } from './core/registry/CommandRegistry';
 export { menuRegistry, MenuRegistry, type IMenuItemConfig } from './core/registry/MenuRegistry';
 export { pluginRegistry, type IPlugin, type PluginStatus } from './core/registry/PluginRegistry';
@@ -31,8 +32,7 @@ export { componentRegistry, type ComponentConstructor } from './core/registry/Co
 export { useChatStore, type ISlashCommandConfig } from './core/services/ChatService';
 export { useLayoutStore } from './core/services/LayoutService';
 export { useModalStore, type ModalType as ModalStoreType } from './core/services/ModalStoreService';
-export { useRightSidebarStore } from './core/services/RightSidebarService';
-export { useSidebarStore, type ISidebarPanel } from './core/services/SidebarService';
+export { useSidebarStore, useInspectorStore, createSidebarStore, CHAT_PANEL_ID, TERMINAL_PANEL_ID, type ISidebarPanel, type SidebarState, type SidebarStore, } from './core/services/SidebarService';
 export { useStatusBarStore, type IStatusBarWidgetConfig } from './core/services/StatusBarService';
 export { useTerminalStore } from './core/services/TerminalService';
 export { useThemeStore, type ThemeType } from './core/services/ThemeService';
@@ -50,7 +50,7 @@ export { Modal, type ModalProps, type ModalType } from './components/widgets/Mod
 export { QuickSearch, type QuickSearchProps, type IQuickSearchResult } from './components/widgets/QuickSearch';
 export { SearchWidget, type SearchWidgetProps, type ISearchResult } from './components/widgets/SearchWidget';
 export { SettingsPanel, type SettingsPanelProps, type ISettingsThemeOption, DEFAULT_SETTINGS_THEMES } from './components/widgets/SettingsPanel';
-export { SidebarPane, type SidebarPaneProps } from './components/widgets/SidebarPane';
+export { SidebarPane, type SidebarPaneProps, type PaneSide } from './components/widgets/SidebarPane';
 export { StatusBar, type StatusBarProps, type IStatusBarWidget } from './components/widgets/StatusBar';
 export { TerminalPane, type TerminalPaneProps } from './components/widgets/TerminalPane';
 export { ThemeSwitcher, type ThemeSwitcherProps, type IThemeOption, DEFAULT_THEME_OPTIONS } from './components/widgets/ThemeSwitcher';