nexus-shell 0.2.8 → 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 |
@@ -138,6 +166,9 @@ shell's own frame and keep every registration working.
 | `useGraphLayout` | Auto layout engines, with a freeform escape for hand placement |
 | `layeredLayout` | Layered tree layout in four directions; handles cycles |
 | `gridLayout` | Uniform grid, ignoring edges |
+| `PropertyPanel` | Inspector for the current selection, with mixed-value editing |
+| `TextField` … `StaticField` | Nine composable property fields, usable on their own |
+| `FieldShell` | The label / description / error frame, for fields of your own |
 | `UserProfile` | Avatar and identity widget |
 
 ## Theming

package/dist/components/graph/GraphEdge.d.ts

@@ -58,7 +58,9 @@ export declare const edgePath: (from: IPoint, to: IPoint, fromPort: GraphPort, r
  */
 export declare const GraphEdge: ({ edge, source, target, routing, selected, arrow, onSelect, onContextMenu, className, }: GraphEdgeProps) => import("react/jsx-runtime").JSX.Element;
 export interface GraphEdgeLayerProps {
+    /** The edges to draw. Anything SVG works — this is just the surface. */
     children?: React.ReactNode;
+    /** Extra classes merged onto the `<svg>` element. */
     className?: string;
 }
 /**

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/properties/FieldShell.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+
+/** Props every field in this family accepts. */
+export interface FieldProps<T> {
+    /** Label shown above the control. */
+    label: string;
+    /** Current value. `undefined` renders as empty. */
+    value: T | undefined;
+    /** Called with the new value. */
+    onChange?: (value: T) => void;
+    /** One line under the label explaining the property. */
+    description?: string;
+    /**
+     * Selected subjects hold different values. The control shows a placeholder
+     * instead of a value, and editing applies to all of them.
+     */
+    mixed?: boolean;
+    /** Render read-only. */
+    disabled?: boolean;
+    /** Validation message, shown in the destructive colour. */
+    error?: string;
+    /** Extra classes merged onto the field wrapper. */
+    className?: string;
+}
+export interface FieldShellProps {
+    /** Label shown above the control, or beside it when `inline`. */
+    label: string;
+    /** Associates the label with the control. */
+    htmlFor?: string;
+    /** One line under the control explaining the property. Hidden while `error` is set. */
+    description?: string;
+    /** Validation message, shown in the destructive colour in place of the description. */
+    error?: string;
+    /** Selected subjects hold different values — renders the *Mixed* marker beside the label. */
+    mixed?: boolean;
+    /** The control itself. */
+    children: ReactNode;
+    /**
+     * Render the label beside the control rather than above. Suits checkboxes,
+     * where a label on its own line reads as a heading for nothing.
+     */
+    inline?: boolean;
+    /** Extra classes merged onto the field wrapper. */
+    className?: string;
+}
+/**
+ * The label, description and error frame shared by every property field.
+ *
+ * Exported so a bespoke field looks like the built-in ones without copying
+ * their markup — which is exactly what went wrong in the examples this family
+ * replaces, where the same label styling was pasted into three inspectors.
+ *
+ * @example
+ * ```tsx
+ * <FieldShell label="Opacity" description="0 to 1" htmlFor="opacity">
+ *   <MyCustomSlider id="opacity" />
+ * </FieldShell>
+ * ```
+ */
+export declare const FieldShell: ({ label, htmlFor, description, error, mixed, children, inline, className, }: FieldShellProps) => import("react/jsx-runtime").JSX.Element;
+/** Shared control styling, so every field lines up. */
+export declare const CONTROL_CLASS: string;
+export declare const borderClass: (error?: string) => "border-border" | "border-destructive";
+/** A stable id per field, so labels associate without the caller supplying one. */
+export declare const fieldId: (label: string, suffix?: string) => string;

package/dist/components/properties/PropertyPanel.d.ts

@@ -0,0 +1,132 @@
+import { ReactNode } from 'react';
+import { IPropertyAccessor, IPropertyValue } from '../../lib/properties';
+
+/**
+ * One editable property.
+ *
+ * `type` names a renderer in the field registry. The built-ins are listed in
+ * {@link BUILT_IN_FIELD_TYPES}, and any string works once you register a
+ * renderer for it.
+ */
+export interface IPropertyField<S = unknown> extends IPropertyAccessor<S> {
+    /** Label shown above the control. */
+    label: string;
+    /** Field type. Defaults to `"text"`. */
+    type?: string;
+    /** One line under the label explaining the property. */
+    description?: string;
+    /** Group heading this field sits under. Ungrouped fields come first. */
+    group?: string;
+    /** Render read-only. */
+    disabled?: boolean;
+    /**
+     * Hide the field for the current selection — a property that only applies to
+     * some node kinds, say. Receives the selected subjects.
+     */
+    when?: (subjects: S[]) => boolean;
+    /** Return a message to show the field as invalid. */
+    validate?: (value: unknown, subjects: S[]) => string | undefined;
+    /**
+     * Anything the renderer needs: `options` for a select, `rows` for a text
+     * area, `unit` for a number, or whatever your own field type expects.
+     */
+    props?: Record<string, unknown>;
+}
+/** What a field renderer receives. */
+export interface FieldRendererProps<S = unknown> {
+    field: IPropertyField<S>;
+    /** The shared value across the selection, and whether subjects disagree. */
+    state: IPropertyValue;
+    /** Apply a value to every selected subject. */
+    onChange: (value: unknown) => void;
+    /** The selected subjects, for a renderer that needs more than one value. */
+    subjects: S[];
+    /** Validation message, if `validate` returned one. */
+    error?: string;
+}
+/** Renders one field. Register your own to extend the panel. */
+export type FieldRenderer<S = unknown> = (props: FieldRendererProps<S>) => ReactNode;
+/**
+ * The field types the panel understands out of the box.
+ *
+ * Spread it to add your own, or replace an entry to change how a type renders
+ * everywhere:
+ *
+ * ```tsx
+ * <PropertyPanel
+ *   fieldTypes={{ ...BUILT_IN_FIELD_TYPES, latlong: LatLongField }}
+ * />
+ * ```
+ */
+export declare const BUILT_IN_FIELD_TYPES: Record<string, FieldRenderer<any>>;
+export interface PropertyPanelProps<S = unknown> {
+    /**
+     * The selected subjects. Zero renders the empty state, one edits normally,
+     * several edit together with a mixed indicator where values differ.
+     */
+    subjects: S[];
+    /** The properties to show. */
+    fields: IPropertyField<S>[];
+    /**
+     * Called with every subject updated. The panel produces new copies and never
+     * mutates, so this is the whole edit — apply it to your state.
+     */
+    onChange?: (updated: S[], field: IPropertyField<S>, value: unknown) => void;
+    /**
+     * Field renderers by type. Defaults to {@link BUILT_IN_FIELD_TYPES}; spread
+     * it to add your own without losing the built-ins.
+     */
+    fieldTypes?: Record<string, FieldRenderer<S>>;
+    /** Shown when nothing is selected. */
+    emptyState?: ReactNode;
+    /**
+     * Heading above the fields. Receives the selection, so it can read
+     * "3 nodes selected" as easily as a name.
+     */
+    title?: ReactNode | ((subjects: S[]) => ReactNode);
+    /** Group headings render in this order. Unlisted groups follow, in first-seen order. */
+    groupOrder?: string[];
+    /** Extra classes merged onto the root element. */
+    className?: string;
+    /** Accessible label for the region. Defaults to `"Properties"`. */
+    'aria-label'?: string;
+}
+/**
+ * An inspector: the properties of whatever is selected, as editable fields.
+ *
+ * Give it the selection and a list of field descriptors. It reads each
+ * property across every selected subject, renders the matching field, and hands
+ * back new copies on edit — it holds no state and mutates nothing.
+ *
+ * Three selection states are handled for you:
+ *
+ * - **none** — the empty state.
+ * - **one** — ordinary editing.
+ * - **several** — shared values edit together; where subjects disagree the
+ *   field shows *Mixed* rather than one subject's value, and editing applies to
+ *   all of them.
+ *
+ * That last case is the one hand-rolled inspectors usually skip, and skipping
+ * it is how a multi-selection edit silently flattens data.
+ *
+ * Every field is also exported on its own — reach for `TextField` and friends
+ * when a property needs bespoke arrangement, and use `FieldShell` to make a
+ * custom control look like the rest.
+ *
+ * @example
+ * ```tsx
+ * <PropertyPanel
+ *   subjects={selectedNodes}
+ *   title={(nodes) => nodes.length > 1 ? `${nodes.length} nodes` : 'Node'}
+ *   fields={[
+ *     { key: 'data.label', label: 'Label' },
+ *     { key: 'kind', label: 'Type', type: 'select',
+ *       props: { options: [{ value: 'idea', label: 'Idea' }] } },
+ *     { key: 'data.notes', label: 'Notes', type: 'textarea', group: 'Detail' },
+ *     { key: 'data.tags', label: 'Tags', type: 'tags', group: 'Detail' },
+ *   ]}
+ *   onChange={(updated) => setNodes(merge(nodes, updated))}
+ * />
+ * ```
+ */
+export declare const PropertyPanel: <S>({ subjects, fields, onChange, fieldTypes, emptyState, title, groupOrder, className, "aria-label": ariaLabel, }: PropertyPanelProps<S>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/properties/fields.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { FieldProps } from './FieldShell';
+
+export interface TextFieldProps extends FieldProps<string> {
+    /** Hint shown in an empty control. Replaced by the mixed placeholder when `mixed`. */
+    placeholder?: string;
+    /** Input type, for the browser's own affordances. Defaults to `"text"`. */
+    inputType?: 'text' | 'url' | 'email' | 'tel' | 'password';
+}
+/** A single-line text property. */
+export declare const TextField: ({ label, value, onChange, description, mixed, disabled, error, placeholder, inputType, className, }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface TextAreaFieldProps extends FieldProps<string> {
+    /** Hint shown in an empty control. Replaced by the mixed placeholder when `mixed`. */
+    placeholder?: string;
+    /** Visible rows. Defaults to `4`. */
+    rows?: number;
+}
+/** A multi-line text property — notes, descriptions, evidence. */
+export declare const TextAreaField: ({ label, value, onChange, description, mixed, disabled, error, placeholder, rows, className, }: TextAreaFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface ISelectOption {
+    value: string;
+    label: string;
+    /** Render unselectable — an unavailable choice you still want visible. */
+    disabled?: boolean;
+}
+export interface SelectFieldProps extends FieldProps<string> {
+    /** The choices, in the order they should appear. */
+    options: ISelectOption[];
+    /** Shown as the first, unselected entry. */
+    placeholder?: string;
+}
+/** A choice from a fixed set. */
+export declare const SelectField: ({ label, value, onChange, description, mixed, disabled, error, options, placeholder, className, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export type CheckboxFieldProps = FieldProps<boolean>;
+/**
+ * A boolean property.
+ *
+ * When `mixed`, the box renders indeterminate — neither on nor off — which is
+ * the only honest state for a selection that disagrees.
+ */
+export declare const CheckboxField: ({ label, value, onChange, description, mixed, disabled, error, className, }: CheckboxFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface NumberFieldProps extends FieldProps<number> {
+    /** Lowest accepted value. Enforced by the browser, not by this component. */
+    min?: number;
+    /** Highest accepted value. Enforced by the browser, not by this component. */
+    max?: number;
+    /** Increment for the spinner and arrow keys. */
+    step?: number;
+    /** Unit shown inside the control's trailing edge, e.g. `"px"`. */
+    unit?: string;
+    /** Hint shown in an empty control. Replaced by the mixed placeholder when `mixed`. */
+    placeholder?: string;
+}
+/** A numeric property. */
+export declare const NumberField: ({ label, value, onChange, description, mixed, disabled, error, min, max, step, unit, placeholder, className, }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface ColorFieldProps extends FieldProps<string> {
+    /** Show the hex value in an editable text box beside the swatch. Default `true`. */
+    showValue?: boolean;
+}
+/** A colour property, as a swatch plus an editable hex value. */
+export declare const ColorField: ({ label, value, onChange, description, mixed, disabled, error, showValue, className, }: ColorFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface DateFieldProps extends FieldProps<string> {
+    /** Include a time component. Defaults to `false`. */
+    withTime?: boolean;
+    /** Earliest selectable date, in the same ISO form as `value`. */
+    min?: string;
+    /** Latest selectable date, in the same ISO form as `value`. */
+    max?: string;
+}
+/**
+ * A date property, as an ISO `yyyy-mm-dd` string (or `yyyy-mm-ddThh:mm` with
+ * `withTime`). A string rather than a `Date` so it round-trips through JSON
+ * unchanged.
+ */
+export declare const DateField: ({ label, value, onChange, description, mixed, disabled, error, withTime, min, max, className, }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface TagFieldProps extends FieldProps<string[]> {
+    /** Hint shown in the draft box. Defaults to `"Add and press Enter"`. */
+    placeholder?: string;
+    /** Offer these as a datalist while typing. */
+    suggestions?: string[];
+}
+/**
+ * A list-of-strings property.
+ *
+ * Enter or the add button commits the draft; duplicates and blanks are
+ * rejected silently rather than with an error, since neither is a mistake worth
+ * interrupting for.
+ */
+export declare const TagField: ({ label, value, onChange, description, mixed, disabled, error, placeholder, suggestions, className, }: TagFieldProps) => import("react/jsx-runtime").JSX.Element;
+export interface StaticFieldProps extends Omit<FieldProps<ReactNode>, 'onChange'> {
+    /** Render in a monospaced face — ids, hashes, coordinates. */
+    mono?: boolean;
+}
+/**
+ * A read-only property: an id, a timestamp, a computed total.
+ *
+ * Present because inspectors are full of values worth showing and not worth
+ * editing, and a disabled text input reads as "you may not edit this yet"
+ * rather than "this is derived".
+ */
+export declare const StaticField: ({ label, value, description, mixed, mono, className, }: StaticFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/properties/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Property editing.
+ *
+ * An inspector is one of the things every application with a canvas, a tree or
+ * a selection ends up needing, and one of the things most often hand-rolled
+ * three times over. This family covers it at two levels: composable fields you
+ * arrange yourself, and a descriptor-driven panel built on them.
+ *
+ * Nothing here is graph-specific — the subjects can be nodes, edges, tree
+ * items, rows, or an application's settings object.
+ */
+export { FieldShell, CONTROL_CLASS, borderClass, fieldId, type FieldShellProps, type FieldProps, } from './FieldShell';
+export { TextField, TextAreaField, SelectField, CheckboxField, NumberField, ColorField, DateField, TagField, StaticField, type TextFieldProps, type TextAreaFieldProps, type SelectFieldProps, type CheckboxFieldProps, type NumberFieldProps, type ColorFieldProps, type DateFieldProps, type TagFieldProps, type StaticFieldProps, type ISelectOption, } from './fields';
+export { PropertyPanel, BUILT_IN_FIELD_TYPES, type PropertyPanelProps, type IPropertyField, type FieldRenderer, type FieldRendererProps, } from './PropertyPanel';

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;