@textui/widgets 0.1.0

package/dist/shells/console-shell.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Direction A: the dense operator console.
+ *
+ * Every region is a labelled box, chrome carries counts, nothing is wasted.
+ * Sidebar left, panel bottom, one-line status.
+ */
+export declare const ConsoleShell: (props: import("@textui/core").BoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=console-shell.d.ts.map

package/dist/shells/console-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"console-shell.d.ts","sourceRoot":"","sources":["../../src/shells/console-shell.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iFAkCvB,CAAC"}

package/dist/shells/console-shell.js

@@ -0,0 +1,30 @@
+import { defineComponent, h, useSize, useStoreValue, useTheme } from '@textui/core';
+import { ToastHost } from '../overlay/index.js';
+import { SurfaceArea } from '../surface/index.js';
+import { useSurfaceMounted } from './shared.js';
+/**
+ * Direction A: the dense operator console.
+ *
+ * Every region is a labelled box, chrome carries counts, nothing is wasted.
+ * Sidebar left, panel bottom, one-line status.
+ */
+export const ConsoleShell = defineComponent('ConsoleShell', (props) => {
+    const theme = useTheme();
+    const size = useSize();
+    const sidebarCollapsed = useStoreValue('$/ui/sidebar/collapsed', false);
+    const sidebar = useSurfaceMounted('sidebar');
+    const narrow = size.width < 80;
+    return h('box', {
+        direction: 'column', width: '100%', height: '100%',
+        // Ink as well as page: a themed background with the terminal's own
+        // foreground on top is how a light theme comes out white on white.
+        bg: 'canvas', fg: 'text',
+        ...props,
+    }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, sidebar && !narrow && !sidebarCollapsed
+        ? h('box', {
+            width: 18,
+            border: { style: theme.border, sides: { right: true } },
+            direction: 'column',
+        }, h(SurfaceArea, { surface: 'sidebar', flex: 1 }))
+        : null, h('box', { flex: 1, direction: 'column' }, h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'panel' })), !narrow ? h(SurfaceArea, { surface: 'aside' }) : null), h(SurfaceArea, { surface: 'status' }), h(ToastHost, { anchor: 'bottom-right' }));
+});

package/dist/shells/index.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentDefinition, ShellDefinition } from '@textui/core';
+/**
+ * Shells.
+ *
+ * A shell decides where the surfaces go, and that is the whole of what it
+ * decides. The three below are the same application in three house styles -
+ * a dense bordered console, an airy report, and a workbench frame - and
+ * nothing in the component catalog knows which one is mounted.
+ *
+ * That is the test the whole architecture exists to pass: if a shell needs a
+ * component the others cannot use, the boundary is in the wrong place.
+ */
+export * from './console-shell.js';
+export * from './paper-shell.js';
+export * from './plain-shell.js';
+export * from './workbench-shell.js';
+export type { ShellProps } from './shared.js';
+export declare const SHELL_COMPONENTS: ComponentDefinition[];
+export declare const BUILTIN_SHELLS: ShellDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/shells/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shells/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMzE;;;;;;;;;;GAUG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,eAAO,MAAM,gBAAgB,EAAE,mBAAmB,EAKjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAAe,EAmC3C,CAAC"}

package/dist/shells/index.js

@@ -0,0 +1,61 @@
+import { ConsoleShell } from './console-shell.js';
+import { PaperShell } from './paper-shell.js';
+import { PlainShell } from './plain-shell.js';
+import { WorkbenchShell } from './workbench-shell.js';
+/**
+ * Shells.
+ *
+ * A shell decides where the surfaces go, and that is the whole of what it
+ * decides. The three below are the same application in three house styles -
+ * a dense bordered console, an airy report, and a workbench frame - and
+ * nothing in the component catalog knows which one is mounted.
+ *
+ * That is the test the whole architecture exists to pass: if a shell needs a
+ * component the others cannot use, the boundary is in the wrong place.
+ */
+export * from './console-shell.js';
+export * from './paper-shell.js';
+export * from './plain-shell.js';
+export * from './workbench-shell.js';
+export const SHELL_COMPONENTS = [
+    { component: 'PlainShell', category: 'chrome', renderer: { kind: 'function', render: PlainShell }, description: 'Main and status, no frame.' },
+    { component: 'ConsoleShell', category: 'chrome', renderer: { kind: 'function', render: ConsoleShell }, description: 'Dense bordered operator console.' },
+    { component: 'PaperShell', category: 'chrome', renderer: { kind: 'function', render: PaperShell }, description: 'Airy and borderless.' },
+    { component: 'WorkbenchShell', category: 'chrome', renderer: { kind: 'function', render: WorkbenchShell }, description: 'Full frame: rail, sidebar, tabs, panel, status.' },
+];
+export const BUILTIN_SHELLS = [
+    {
+        id: 'plain',
+        title: 'Plain',
+        description: 'Main and status only. The default.',
+        component: 'PlainShell',
+        surfaces: ['main', 'status', 'overlay', 'notify'],
+    },
+    {
+        id: 'console',
+        title: 'Console',
+        description: 'Dense, bordered, every region labelled.',
+        component: 'ConsoleShell',
+        theme: 'console',
+        surfaces: ['header', 'sidebar', 'main', 'panel', 'aside', 'status', 'overlay', 'notify'],
+        minSize: { width: 60, height: 12 },
+    },
+    {
+        id: 'paper',
+        title: 'Paper',
+        description: 'Borderless. Whitespace and alignment do the separating.',
+        component: 'PaperShell',
+        theme: 'paper',
+        surfaces: ['header', 'main', 'panel', 'status', 'overlay', 'notify'],
+        minSize: { width: 50, height: 10 },
+    },
+    {
+        id: 'workbench',
+        title: 'Workbench',
+        description: 'Persistent frame with a rail, sidebar, tabs and a panel.',
+        component: 'WorkbenchShell',
+        theme: 'workbench',
+        surfaces: ['header', 'rail', 'sidebar', 'main', 'panel', 'aside', 'status', 'overlay', 'notify'],
+        minSize: { width: 80, height: 20 },
+    },
+];

package/dist/shells/paper-shell.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Direction B: airy and borderless.
+ *
+ * Whitespace does the separating; there is no frame, and the surfaces that
+ * would be chrome elsewhere are simply spaced sections. Also the shell that
+ * reads best when the output is piped to a file.
+ */
+export declare const PaperShell: (props: import("@textui/core").BoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=paper-shell.d.ts.map

package/dist/shells/paper-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paper-shell.d.ts","sourceRoot":"","sources":["../../src/shells/paper-shell.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iFAkBrB,CAAC"}

package/dist/shells/paper-shell.js

@@ -0,0 +1,23 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { ToastHost } from '../overlay/index.js';
+import { SurfaceArea } from '../surface/index.js';
+/**
+ * Direction B: airy and borderless.
+ *
+ * Whitespace does the separating; there is no frame, and the surfaces that
+ * would be chrome elsewhere are simply spaced sections. Also the shell that
+ * reads best when the output is piped to a file.
+ */
+export const PaperShell = defineComponent('PaperShell', (props) => {
+    const theme = useTheme();
+    return h('box', {
+        direction: 'column',
+        width: '100%',
+        height: '100%',
+        bg: 'canvas',
+        fg: 'text',
+        padding: [1, theme.spacing.md],
+        gap: 1,
+        ...props,
+    }, h(SurfaceArea, { surface: 'header' }), h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'panel' }), h(SurfaceArea, { surface: 'status' }), h(ToastHost, { anchor: 'bottom' }));
+});

package/dist/shells/plain-shell.d.ts

@@ -0,0 +1,3 @@
+/** No chrome at all: `main` fills the terminal. For a single-screen tool. */
+export declare const PlainShell: (props: import("@textui/core").BoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=plain-shell.d.ts.map

package/dist/shells/plain-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plain-shell.d.ts","sourceRoot":"","sources":["../../src/shells/plain-shell.ts"],"names":[],"mappings":"AAKA,6EAA6E;AAC7E,eAAO,MAAM,UAAU,iFAYtB,CAAC"}

package/dist/shells/plain-shell.js

@@ -0,0 +1,11 @@
+import { defineComponent, h } from '@textui/core';
+import { ToastHost } from '../overlay/index.js';
+import { SurfaceArea } from '../surface/index.js';
+/** No chrome at all: `main` fills the terminal. For a single-screen tool. */
+export const PlainShell = defineComponent('PlainShell', (props) => h('box', {
+    direction: 'column', width: '100%', height: '100%',
+    // Ink as well as page: a themed background with the terminal's own
+    // foreground on top is how a light theme comes out white on white.
+    bg: 'canvas', fg: 'text',
+    ...props,
+}, h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'status' }), h(ToastHost, { anchor: 'bottom-right' })));

package/dist/shells/shared.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps, SurfaceName } from '@textui/core';
+export type ShellProps = BoxProps;
+/**
+ * Whether a surface has anything to show.
+ *
+ * `SurfaceArea` already renders nothing for an empty surface, but a region
+ * with a fixed width reserves its column either way - which is how an
+ * application that never mounts a sidebar still gets an empty gutter down the
+ * left of every screen. A shell has to ask before it spends the space.
+ */
+export declare function useSurfaceMounted(surface: SurfaceName): boolean;
+//# sourceMappingURL=shared.d.ts.map

package/dist/shells/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/shells/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGvE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAU/D"}

package/dist/shells/shared.js

@@ -0,0 +1,21 @@
+import { useRuntime, useStoreSubtree } from '@textui/core';
+/**
+ * Whether a surface has anything to show.
+ *
+ * `SurfaceArea` already renders nothing for an empty surface, but a region
+ * with a fixed width reserves its column either way - which is how an
+ * application that never mounts a sidebar still gets an empty gutter down the
+ * left of every screen. A shell has to ask before it spends the space.
+ */
+export function useSurfaceMounted(surface) {
+    const runtime = useRuntime();
+    useStoreSubtree(`$/layout/surfaces/${surface}`);
+    useStoreSubtree(`$/layout/mounts/${surface}`);
+    const app = runtime.app();
+    if (!app)
+        return false;
+    const state = app.surfaces.state(surface);
+    if (!state.visible || state.collapsed)
+        return false;
+    return app.surfaces.mounts(surface).length > 0;
+}

package/dist/shells/workbench-shell.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Direction C: the workbench.
+ *
+ * A persistent frame - rail, sidebar, tabbed main, panel, status - inside a
+ * rounded border. The richest shell, and the one that needs the most room, so
+ * it declares a minimum size and the app falls back when the terminal is small.
+ */
+export declare const WorkbenchShell: (props: import("@textui/core").BoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=workbench-shell.d.ts.map

package/dist/shells/workbench-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAgDzB,CAAC"}

package/dist/shells/workbench-shell.js

@@ -0,0 +1,43 @@
+import { defineComponent, h, useSize, useStoreValue, useTheme } from '@textui/core';
+import { ToastHost } from '../overlay/index.js';
+import { SurfaceArea } from '../surface/index.js';
+import { useSurfaceMounted } from './shared.js';
+/**
+ * Direction C: the workbench.
+ *
+ * A persistent frame - rail, sidebar, tabbed main, panel, status - inside a
+ * rounded border. The richest shell, and the one that needs the most room, so
+ * it declares a minimum size and the app falls back when the terminal is small.
+ */
+export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
+    const theme = useTheme();
+    const size = useSize();
+    const sidebarCollapsed = useStoreValue('$/ui/sidebar/collapsed', false);
+    const asideVisible = useStoreValue('$/ui/aside/visible', false);
+    const sidebar = useSurfaceMounted('sidebar');
+    const aside = useSurfaceMounted('aside');
+    const narrow = size.width < 90;
+    return h('box', {
+        direction: 'column',
+        width: '100%',
+        height: '100%',
+        bg: 'canvas',
+        fg: 'text',
+        border: theme.border,
+        ...props,
+    }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), sidebar && !sidebarCollapsed && !narrow
+        ? h('box', {
+            width: 24,
+            border: { style: theme.border, sides: { right: true } },
+            direction: 'column',
+            padding: { left: 1 },
+        }, h(SurfaceArea, { surface: 'sidebar', flex: 1 }))
+        : null, h('box', { flex: 1, direction: 'column', padding: { left: 1 } }, h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'panel' })), aside && asideVisible && !narrow
+        ? h('box', {
+            width: 30,
+            border: { style: theme.border, sides: { left: true } },
+            direction: 'column',
+            padding: { left: 1 },
+        }, h(SurfaceArea, { surface: 'aside', flex: 1 }))
+        : null), h(SurfaceArea, { surface: 'status' }), h(ToastHost, { anchor: 'bottom-right' }));
+});

package/dist/surface/bar-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Every mount on one line. Headers and status bars use this. */
+export declare const BarLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=bar-layout.d.ts.map

package/dist/surface/bar-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-layout.d.ts","sourceRoot":"","sources":["../../src/surface/bar-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,iEAAiE;AACjE,eAAO,MAAM,SAAS,6DAKpB,CAAC"}

package/dist/surface/bar-layout.js

@@ -0,0 +1,7 @@
+import { defineComponent, h } from '@textui/core';
+import { MountView } from './mount-view.js';
+/** Every mount on one line. Headers and status bars use this. */
+export const BarLayout = defineComponent('BarLayout', (props) => {
+    const { mounts, surface: _surface, state: _state, ...rest } = props;
+    return h('box', { direction: 'row', height: 1, gap: 2, ...rest }, ...mounts.map((mount) => h(MountView, { key: mount.key, mount })));
+});

package/dist/surface/index.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentDefinition } from '@textui/core';
+/**
+ * Surfaces, mounts and layouts.
+ *
+ * `SurfaceArea` is the only bridge between the registries and the render tree:
+ * it reads a surface's mounts and its state, then hands both to whichever
+ * layout that surface is currently using. Because the layout is store state
+ * rather than code, a sidebar can be tabs now and a stack a keystroke later.
+ */
+export * from './bar-layout.js';
+export * from './inline-layout.js';
+export * from './mount-view.js';
+export * from './rail-layout.js';
+export * from './single-layout.js';
+export * from './split-layout.js';
+export * from './stack-layout.js';
+export * from './surface-area.js';
+export * from './tabs-layout.js';
+export type { LayoutProps } from './shared.js';
+export declare const SURFACE_COMPONENTS: ComponentDefinition[];
+export declare const BUILTIN_LAYOUTS: ({
+    name: "single";
+    component: string;
+    title: string;
+} | {
+    name: "tabs";
+    component: string;
+    title: string;
+} | {
+    name: "stack";
+    component: string;
+    title: string;
+} | {
+    name: "split";
+    component: string;
+    title: string;
+} | {
+    name: "bar";
+    component: string;
+    title: string;
+} | {
+    name: "rail";
+    component: string;
+    title: string;
+} | {
+    name: "inline";
+    component: string;
+    title: string;
+} | {
+    name: "floating";
+    component: string;
+    title: string;
+} | {
+    name: "toast";
+    component: string;
+    title: string;
+})[];
+//# sourceMappingURL=index.d.ts.map

package/dist/surface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surface/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWxD;;;;;;;GAOG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,EAUnD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAU3B,CAAC"}

package/dist/surface/index.js

@@ -0,0 +1,48 @@
+import { BarLayout } from './bar-layout.js';
+import { InlineLayout } from './inline-layout.js';
+import { MountView } from './mount-view.js';
+import { RailLayout } from './rail-layout.js';
+import { SingleLayout } from './single-layout.js';
+import { SplitLayout } from './split-layout.js';
+import { StackLayout } from './stack-layout.js';
+import { SurfaceArea } from './surface-area.js';
+import { TabsLayout } from './tabs-layout.js';
+/**
+ * Surfaces, mounts and layouts.
+ *
+ * `SurfaceArea` is the only bridge between the registries and the render tree:
+ * it reads a surface's mounts and its state, then hands both to whichever
+ * layout that surface is currently using. Because the layout is store state
+ * rather than code, a sidebar can be tabs now and a stack a keystroke later.
+ */
+export * from './bar-layout.js';
+export * from './inline-layout.js';
+export * from './mount-view.js';
+export * from './rail-layout.js';
+export * from './single-layout.js';
+export * from './split-layout.js';
+export * from './stack-layout.js';
+export * from './surface-area.js';
+export * from './tabs-layout.js';
+export const SURFACE_COMPONENTS = [
+    { component: 'SurfaceArea', category: 'chrome', renderer: { kind: 'function', render: SurfaceArea }, description: 'Renders one surface through its active layout.' },
+    { component: 'MountView', category: 'chrome', renderer: { kind: 'function', render: MountView }, description: 'Renders one mount target.' },
+    { component: 'SingleLayout', category: 'chrome', renderer: { kind: 'function', render: SingleLayout }, description: 'Only the active mount.' },
+    { component: 'TabsLayout', category: 'chrome', renderer: { kind: 'function', render: TabsLayout }, description: 'Tab strip plus the active mount.' },
+    { component: 'StackLayout', category: 'chrome', renderer: { kind: 'function', render: StackLayout }, description: 'All mounts, stacked with headings.' },
+    { component: 'SplitLayout', category: 'chrome', renderer: { kind: 'function', render: SplitLayout }, description: 'All mounts, side by side.' },
+    { component: 'BarLayout', category: 'chrome', renderer: { kind: 'function', render: BarLayout }, description: 'All mounts on one line.' },
+    { component: 'RailLayout', category: 'chrome', renderer: { kind: 'function', render: RailLayout }, description: 'Icons only.' },
+    { component: 'InlineLayout', category: 'chrome', renderer: { kind: 'function', render: InlineLayout }, description: 'All mounts, no chrome.' },
+];
+export const BUILTIN_LAYOUTS = [
+    { name: 'single', component: 'SingleLayout', title: 'Single' },
+    { name: 'tabs', component: 'TabsLayout', title: 'Tabs' },
+    { name: 'stack', component: 'StackLayout', title: 'Stack' },
+    { name: 'split', component: 'SplitLayout', title: 'Split' },
+    { name: 'bar', component: 'BarLayout', title: 'Bar' },
+    { name: 'rail', component: 'RailLayout', title: 'Rail' },
+    { name: 'inline', component: 'InlineLayout', title: 'Inline' },
+    { name: 'floating', component: 'InlineLayout', title: 'Floating' },
+    { name: 'toast', component: 'StackLayout', title: 'Toast' },
+];

package/dist/surface/inline-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Every mount, no chrome at all. */
+export declare const InlineLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=inline-layout.d.ts.map

package/dist/surface/inline-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-layout.d.ts","sourceRoot":"","sources":["../../src/surface/inline-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,qCAAqC;AACrC,eAAO,MAAM,YAAY,6DAKvB,CAAC"}

package/dist/surface/inline-layout.js

@@ -0,0 +1,7 @@
+import { defineComponent, h } from '@textui/core';
+import { MountView } from './mount-view.js';
+/** Every mount, no chrome at all. */
+export const InlineLayout = defineComponent('InlineLayout', (props) => {
+    const { mounts, surface: _surface, state: _state, ...rest } = props;
+    return h('box', { direction: 'column', flex: 1, ...rest }, ...mounts.map((mount) => h(MountView, { key: mount.key, mount })));
+});

package/dist/surface/mount-view.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps, Mount } from '@textui/core';
+export interface MountViewProps extends BoxProps {
+    mount: Mount;
+}
+/** Renders one mount's target - an inline node, or a node read from a path. */
+export declare const MountView: (props: MountViewProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=mount-view.d.ts.map

package/dist/surface/mount-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount-view.d.ts","sourceRoot":"","sources":["../../src/surface/mount-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,QAAQ,EAAiB,KAAK,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,KAAK,EAAE,KAAK,CAAC;CACd;AAED,+EAA+E;AAC/E,eAAO,MAAM,SAAS,gEAoBpB,CAAC"}

package/dist/surface/mount-view.js

@@ -0,0 +1,19 @@
+import { defineComponent, h, useRuntime } from '@textui/core';
+import { EmptyState } from '../display/index.js';
+/** Renders one mount's target - an inline node, or a node read from a path. */
+export const MountView = defineComponent('MountView', ({ mount, ...rest }) => {
+    const runtime = useRuntime();
+    const target = mount.target;
+    const node = 'component' in target
+        ? target
+        : (runtime.store.get(target.path) ?? null);
+    if (!node) {
+        return h(EmptyState, { title: 'Nothing mounted', ...rest });
+    }
+    // A mount's data context makes relative paths inside it resolve against the
+    // record it was opened for.
+    const withContext = mount.dataContext
+        ? { ...node, dataContext: mount.dataContext }
+        : node;
+    return h('box', { flex: 1, direction: 'column', ...rest }, withContext);
+});

package/dist/surface/rail-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Icons only, one per mount. An activity bar. */
+export declare const RailLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=rail-layout.d.ts.map

package/dist/surface/rail-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail-layout.d.ts","sourceRoot":"","sources":["../../src/surface/rail-layout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,kDAAkD;AAClD,eAAO,MAAM,UAAU,6DAsBrB,CAAC"}

package/dist/surface/rail-layout.js

@@ -0,0 +1,19 @@
+import { defineComponent, h, useRuntime, useTheme } from '@textui/core';
+/** Icons only, one per mount. An activity bar. */
+export const RailLayout = defineComponent('RailLayout', (props) => {
+    const runtime = useRuntime();
+    const theme = useTheme();
+    const { mounts, state, surface, ...rest } = props;
+    const app = runtime.app();
+    return h('box', { direction: 'column', width: 3, align: 'center', ...rest }, ...mounts.map((mount) => {
+        const active = mount.key === state.activeKey;
+        return h('box', {
+            key: mount.key,
+            direction: 'row',
+            gap: 0,
+            fg: active ? 'accent' : 'muted',
+            bold: active,
+            onClick: () => app?.surfaces.activate(surface, mount.key),
+        }, h('text', { content: active ? theme.glyphs.chevronRight : ' ' }), h('text', { content: mount.display?.icon ?? mount.key.slice(0, 1).toUpperCase() }));
+    }));
+});

package/dist/surface/shared.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps, Mount, SurfaceName, SurfaceState } from '@textui/core';
+export interface LayoutProps extends BoxProps {
+    surface: SurfaceName;
+    mounts: Mount[];
+    state: SurfaceState;
+}
+//# sourceMappingURL=shared.d.ts.map

package/dist/surface/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/surface/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE/E,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;CACrB"}

package/dist/surface/shared.js

@@ -0,0 +1 @@
+export {};

package/dist/surface/single-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Only the active mount. */
+export declare const SingleLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=single-layout.d.ts.map

package/dist/surface/single-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-layout.d.ts","sourceRoot":"","sources":["../../src/surface/single-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,6BAA6B;AAC7B,eAAO,MAAM,YAAY,6DAmBvB,CAAC"}

package/dist/surface/single-layout.js

@@ -0,0 +1,18 @@
+import { defineComponent, h } from '@textui/core';
+import { MountView } from './mount-view.js';
+/** Only the active mount. */
+export const SingleLayout = defineComponent('SingleLayout', (props) => {
+    const { mounts, state, surface: _surface, ...rest } = props;
+    const active = mounts.find((m) => m.key === state.activeKey) ?? mounts[0];
+    if (!active)
+        return null;
+    // A mount that declares a title gets one drawn, the same rule `stack`
+    // follows. It matters more here: `stack` shows everything at once, so which
+    // panel you are looking at is never a question, and this one shows one of
+    // several and answers it no other way.
+    if (active.display?.title === undefined)
+        return h(MountView, { mount: active, ...rest });
+    return h('box', { direction: 'column', flex: 1, ...rest }, h('box', { direction: 'row', gap: 1 }, h('text', { content: active.display.title, bold: true, fg: 'muted' }), active.display.badge !== undefined
+        ? h('text', { content: String(active.display.badge), fg: 'subtle' })
+        : null, h('spacer', { flex: 1 })), h(MountView, { mount: active, flex: 1 }));
+});

package/dist/surface/split-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Every mount, side by side, sharing the space. */
+export declare const SplitLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=split-layout.d.ts.map

package/dist/surface/split-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-layout.d.ts","sourceRoot":"","sources":["../../src/surface/split-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,oDAAoD;AACpD,eAAO,MAAM,WAAW,6DAKtB,CAAC"}

package/dist/surface/split-layout.js

@@ -0,0 +1,7 @@
+import { defineComponent, h } from '@textui/core';
+import { MountView } from './mount-view.js';
+/** Every mount, side by side, sharing the space. */
+export const SplitLayout = defineComponent('SplitLayout', (props) => {
+    const { mounts, surface: _surface, state: _state, direction = 'row', ...rest } = props;
+    return h('box', { direction, flex: 1, gap: 1, ...rest }, ...mounts.map((mount) => h(MountView, { key: mount.key, mount, flex: 1 })));
+});

package/dist/surface/stack-layout.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from './shared.js';
+/** Every mount, stacked, each under its own heading. */
+export declare const StackLayout: (props: LayoutProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=stack-layout.d.ts.map

package/dist/surface/stack-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-layout.d.ts","sourceRoot":"","sources":["../../src/surface/stack-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wDAAwD;AACxD,eAAO,MAAM,WAAW,6DA0BtB,CAAC"}

package/dist/surface/stack-layout.js

@@ -0,0 +1,22 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { MountView } from './mount-view.js';
+/** Every mount, stacked, each under its own heading. */
+export const StackLayout = defineComponent('StackLayout', (props) => {
+    const theme = useTheme();
+    const { mounts, surface: _surface, state: _state, ...rest } = props;
+    return h('box', { direction: 'column', flex: 1, ...rest }, ...mounts.map((mount, i) => 
+    // Each mount fills its share of the surface rather than only what its
+    // own content needs. A content-sized wrapper hands a viewport no height
+    // to measure, and a tree inside one reports a rect of 3 rows in a
+    // twenty-row sidebar - or of 0, once its content overflows.
+    h('box', { key: mount.key, direction: 'column', flex: 1 }, mount.display?.title
+        ? h('box', { direction: 'row', gap: 1 }, h('text', { content: mount.display.title, bold: true, fg: 'muted' }), mount.display.badge !== undefined
+            ? h('text', { content: String(mount.display.badge), fg: 'subtle' })
+            : null, h('spacer', { flex: 1 }))
+        : null, h(MountView, { mount }), 
+    // A rule separates two mounts. After the last one it separates a mount
+    // from nothing, which is a line under a sidebar with one panel in it.
+    i < mounts.length - 1
+        ? h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' })
+        : null)));
+});

package/dist/surface/surface-area.d.ts

@@ -0,0 +1,16 @@
+import type { BoxProps, ComponentNode, SurfaceName } from '@textui/core';
+export interface SurfaceAreaProps extends BoxProps {
+    surface: SurfaceName;
+    /** Override the surface's stored layout. */
+    layout?: string;
+    /** Rendered when the surface has no visible mounts. */
+    fallback?: ComponentNode;
+}
+/**
+ * Render one surface through its active layout.
+ *
+ * This subscribes to the surface's state and mount list rather than to the
+ * whole store, so opening a tab in `main` does not re-render the status bar.
+ */
+export declare const SurfaceArea: (props: SurfaceAreaProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=surface-area.d.ts.map

package/dist/surface/surface-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface-area.d.ts","sourceRoot":"","sources":["../../src/surface/surface-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,OAAO,EAAE,WAAW,CAAC;IACrB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kEA4BtB,CAAC"}