nexus-shell 0.2.9 → 0.2.11

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

@@ -2,15 +2,22 @@ import { ReactNode } from 'react';
 import { Model, IJsonModel } from 'flexlayout-react';
 import { IMenuItemConfig } from '../../core/registry/MenuRegistry';
 import { ISlashCommandConfig } from '../../core/services/ChatService';
-import { ISidebarPanel } from '../../core/services/SidebarService';
+import { IPanel } from '../../core/services/PaneService';
 import { IStatusBarWidgetConfig } from '../../core/services/StatusBarService';
 
 export interface ShellLayoutProps {
     /**
-     * Sidebar panels to register. Each becomes an icon in the activity bar and
-     * renders its `component` in the sidebar when selected.
+     * Panels to register, for every edge.
+     *
+     * Each panel's `side` decides where it docks — `"left"`, `"right"` or
+     * `"bottom"`, defaulting to left — and each edge keeps its own open panel, so
+     * a file tree, an inspector and a terminal can all be showing at once. A rail
+     * appears only once its edge has a panel.
+     *
+     * Placement is data on the panel rather than a separate prop per side, so
+     * moving something is a one-word change.
      */
-    panels?: ISidebarPanel[];
+    panels?: IPanel[];
     /** Slash commands available in the chat pane. */
     slashCommands?: ISlashCommandConfig[];
     /** Menu structure, keyed by top-level menu name. Items dispatch by `commandId`. */
@@ -51,8 +58,8 @@ export interface ShellLayoutProps {
     onLayoutChange?: (layout: IJsonModel) => void;
 }
 /**
- * The complete application shell: menu bar, activity bar, sidebar, a
- * `flexlayout-react` docking workspace, terminal, chat pane and status bar.
+ * The complete application shell: menu bar, a docked pane and rail on each
+ * edge, a `flexlayout-react` docking workspace, and a status bar.
  *
  * **This is where an application starts.** Call {@link initializeShell} once to
  * register your commands, menus and panels, render this component, and add
@@ -81,7 +88,11 @@ export interface ShellLayoutProps {
  * componentRegistry.register('editor', Editor);
  *
  * initializeShell({
- *   panels: [{ id: 'files', label: 'Explorer', icon: Files, component: FileTree }],
+ *   panels: [
+ *     { id: 'files', label: 'Explorer', icon: Files, component: FileTree },
+ *     chatPanel({ side: 'right' }),
+ *     terminalPanel({ side: 'bottom' }),
+ *   ],
  *   commands: [{ id: 'file.save', label: 'File: Save', keybinding: 'Control+s', execute: save }],
  *   menus: { File: [{ id: 'save', label: 'Save', commandId: 'file.save' }] },
  *   statusBar: [{ id: 'branch', label: 'main', alignment: 'left' }],

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 {
@@ -13,8 +14,12 @@ export interface ActivityBarProps {
     /** Items rendered in the main (top) group, in order. */
     items?: IActivityBarItem[];
     /**
-     * Items rendered in the bottom group, below the flex spacer. Defaults to a
-     * single Settings item. Pass `[]` to render no bottom group.
+     * Items rendered in the bottom group, below the flex spacer. Empty by
+     * default.
+     *
+     * This used to default to a Settings item, which meant every rail grew one
+     * whether the app had settings or not. Settings is now an ordinary panel with
+     * `align: 'end'` — see `settingsPanel()`.
      */
     bottomItems?: IActivityBarItem[];
     /** Id of the currently active item, or `null` when nothing is selected. */
@@ -24,17 +29,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?: Exclude<PaneSide, 'bottom'>;
     /** 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 +58,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' | 'bottom';
 export interface SidebarPaneProps {
     /**
      * Heading text. Rendered uppercase with letter-spacing; pass it in natural
@@ -13,25 +15,49 @@ export interface SidebarPaneProps {
      * entirely — useful when the pane is always visible.
      */
     onClose?: () => void;
-    /** Fixed pane width, as a CSS length. Defaults to `"300px"`. */
+    /** Fixed pane width, as a CSS length. Ignored when `side` is `"bottom"`. Defaults to `"300px"`. */
     width?: string;
+    /** Fixed pane height, as a CSS length. Only used when `side` is `"bottom"`. Defaults to `"240px"`. */
+    height?: 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.
+ *
+ * `bottom` docks it below the workspace, where `width` gives way to `height`.
+ *
+ * For the store-backed variant used by `ShellLayout`, see `ConnectedPane`.
  *
  * @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>
+ *
+ * <SidebarPane title="Terminal" side="bottom" height="240px">
+ *   <ConnectedTerminalPane />
+ * </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, height, 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/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/ConnectedPane.d.ts

@@ -0,0 +1,24 @@
+import { SidebarPaneProps, PaneSide } from '../components/widgets/SidebarPane';
+
+export type ConnectedPaneProps = Omit<SidebarPaneProps, 'title' | 'children' | 'onClose'> & {
+    /** Which edge to render. Defaults to `"left"`. */
+    side?: PaneSide;
+};
+/**
+ * {@link SidebarPane} bound to the pane store for one edge.
+ *
+ * Renders whichever panel is open on that edge, or nothing when the pane is
+ * collapsed. Every edge resolves against its own registry, so the left pane,
+ * the right pane and the bottom drawer open and close independently — a file
+ * tree, an inspector and a terminal all at once is the normal case, not a
+ * special one.
+ *
+ * There is nothing edge-specific in here. A panel decides where it lives
+ * through its `side`, and this renders whatever arrived.
+ *
+ * @example
+ * ```tsx
+ * <ConnectedPane side="right" width="320px" />
+ * ```
+ */
+export declare const ConnectedPane: ({ side, ...props }: ConnectedPaneProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/connected/ConnectedPaneRail.d.ts

@@ -0,0 +1,25 @@
+import { ActivityBarProps } from '../components/widgets/ActivityBar';
+import { PaneSide } from '../components/widgets/SidebarPane';
+
+export type ConnectedPaneRailProps = Omit<ActivityBarProps, 'items' | 'bottomItems' | 'activeId' | 'onSelect' | 'side'> & {
+    /** Which edge to render. Defaults to `"left"`. */
+    side?: Exclude<PaneSide, 'bottom'>;
+};
+/**
+ * {@link ActivityBar} bound to the pane store for one edge.
+ *
+ * Derives its items from the panels registered on that edge and toggles the
+ * open one — clicking the already-open item closes the pane. Items with
+ * `align: 'end'` go to the far group, which is how settings ends up at the
+ * bottom without the rail knowing what settings is.
+ *
+ * Renders nothing when no panels are registered for the edge. An empty rail is
+ * a twelve-pixel strip of nothing, and both edges behave the same way — the
+ * left rail used to render regardless, which made the two sides subtly
+ * different for no reason anyone had chosen.
+ *
+ * There is no bottom rail: a bottom drawer is toggled from the status bar, a
+ * command or a keybinding, and a horizontal strip of icons under the workspace
+ * costs more room than it earns.
+ */
+export declare const ConnectedPaneRail: ({ side, ...props }: ConnectedPaneRailProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/connected/ConnectedSettingsPanel.d.ts

@@ -0,0 +1,12 @@
+import { SettingsPanelProps } from '../components/widgets/SettingsPanel';
+
+export type ConnectedSettingsPanelProps = Omit<SettingsPanelProps, 'theme' | 'onThemeChange'>;
+/**
+ * {@link SettingsPanel} bound to `useThemeStore`.
+ *
+ * This used to be reached through a reserved `"settings"` panel id that the
+ * pane special-cased. Making it an ordinary connected component means the pane
+ * has no privileged ids left, and both rails behave identically — register it
+ * with `settingsPanel()`, or don't, and nothing else changes.
+ */
+export declare const ConnectedSettingsPanel: (props: ConnectedSettingsPanelProps) => 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,14 @@
  * 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, settingsPanel } from './panels';
+export { ConnectedPaneRail, type ConnectedPaneRailProps } from './ConnectedPaneRail';
 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 { ConnectedPane, type ConnectedPaneProps } from './ConnectedPane';
+export { ConnectedSettingsPanel, type ConnectedSettingsPanelProps, } from './ConnectedSettingsPanel';
 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,36 @@
+import { IPanel } from '../core/services/PaneService';
+
+/**
+ * Ready-made panel descriptors for the shell's own pieces.
+ *
+ * Chat, terminal and settings were each nailed into a fixed place — chat on the
+ * right, terminal along the bottom, settings behind a reserved panel id the
+ * pane special-cased. They are now ordinary registrations with no privileges,
+ * so they go wherever you put them:
+ *
+ * ```tsx
+ * initializeShell({
+ *   panels: [
+ *     { id: 'files', label: 'Explorer', icon: Files, component: FileTree },
+ *     chatPanel({ side: 'right' }),
+ *     terminalPanel({ side: 'bottom' }),
+ *     settingsPanel(),
+ *   ],
+ * });
+ * ```
+ *
+ * Each takes overrides, so the id, label, icon or side can change without
+ * rebuilding the descriptor by hand.
+ */
+/** The chat pane, as a registerable panel. */
+export declare const chatPanel: (overrides?: Partial<IPanel>) => IPanel;
+/** The terminal, as a registerable panel. */
+export declare const terminalPanel: (overrides?: Partial<IPanel>) => IPanel;
+/**
+ * The theme picker, as a registerable panel.
+ *
+ * `align: 'end'` pins it to the far group of its rail, which is where a
+ * settings icon conventionally sits — and is now the only reason it ends up
+ * there, rather than the pane knowing the string `"settings"`.
+ */
+export declare const settingsPanel: (overrides?: Partial<IPanel>) => IPanel;

package/dist/core/Boot.d.ts

@@ -1,7 +1,7 @@
 import { ICommand } from './registry/CommandRegistry';
 import { IMenuItemConfig } from './registry/MenuRegistry';
 import { ISlashCommandConfig } from './services/ChatService';
-import { ISidebarPanel } from './services/SidebarService';
+import { IPanel } from './services/PaneService';
 import { IStatusBarWidgetConfig } from './services/StatusBarService';
 
 export interface InitializeShellOptions {
@@ -9,7 +9,7 @@ export interface InitializeShellOptions {
      * Sidebar panels to register. Each becomes an icon in the activity bar and
      * renders its `component` in the sidebar when selected.
      */
-    panels?: ISidebarPanel[];
+    panels?: IPanel[];
     /** 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 +32,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.
@@ -54,7 +66,10 @@ export declare const DEFAULT_COMMAND_IDS: readonly ["view.toggleTerminal", "view
  * componentRegistry.register('editor', Editor);
  *
  * initializeShell({
- *   panels: [{ id: 'files', label: 'Explorer', icon: Files, component: FileTree }],
+ *   panels: [
+ *     { id: 'files', label: 'Explorer', icon: Files, component: FileTree },
+ *     chatPanel({ side: 'right' }),
+ *   ],
  *   commands: [{ id: 'file.save', label: 'File: Save', keybinding: 'Control+s', execute: save }],
  *   menus: { File: [{ id: 'save', label: 'Save', commandId: 'file.save' }] },
  *   statusBar: [{ id: 'branch', label: 'main', alignment: 'left' }],