@datalayer/primer-addons 1.0.20 → 1.0.22

package/lib/reactor/page-layout/PageLayout.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The page layout: the work on a centred sheet, like a document.
+ *
+ * A quiet canvas fills the view. On it, one sheet — the page, at a reading
+ * width, with the margins and the shadow a page has — and a band docked
+ * directly above the canvas — or, when the host asks for it, floating over
+ * the canvas as a draggable card — like the toolbar of a document
+ * application, with chips directly under it — or standing in the side panel
+ * under its content, the page bare. With no page to show, the side panel's
+ * content is the page: the same sheet, holding it, and no side panel. While
+ * something works in the page, a small line at the top of the sheet says
+ * what it is doing — "Analyst is adding a cell…" — so the change is seen
+ * where it happens. The panel is a column on the right that opens when it
+ * is wanted — on either side by `panelSide`, and by `panelMode` a column, an
+ * overlay over the page's edge or a small window in its corner; closed, the
+ * page is all there is.
+ *
+ * The sheet is a reading column by default, as tall as what is on it; asked
+ * for a paper (`pageSize`: letter, A4, or a free width and height), it takes
+ * the paper's width and is at least the paper's height.
+ *
+ * The band holds one **mount point**, and that is what gives its content its
+ * width: the same `sheetWidth` column the sheet gets, centred the same way,
+ * inside the same canvas padding. So the band and the page below it are one
+ * column with one pair of edges, and they stay one when the panel opens and
+ * narrows the canvas — because the band lives inside the page column, not
+ * across the whole view. A floating card sizes itself, which is why it never
+ * lines up with anything. It hangs at the top of the canvas, over the chips
+ * and the sheet, which start where they would with no band at all: the flow
+ * keeps no room for the card. What it covers is a drag away, and a strip of
+ * canvas held clear for it was a blank band before the page — worse than a
+ * card over the first lines.
+ *
+ * Nothing here decides what the parts do. A host wires them; this arranges
+ * them. It grew up as the Loop's page layout, where the page is a notebook or
+ * a document, the band is the composer and the panel is the conversation;
+ * the names here are the general ones.
+ *
+ * @module reactor/page-layout/PageLayout
+ */
+import { useEffect } from "react";
+import { Box, Text } from "@primer/react";
+import { useSignalValue } from "@datalayer/reactor/react";
+import { pageLayoutActivity, pageLayoutPanelOpen, pageLayoutSheet, } from "./panelState";
+/** A page reads best at about this width; wider and lines run too long. */
+export const PAGE_SHEET_WIDTH = 920;
+/** The side panel, when open. */
+export const PAGE_PANEL_WIDTH = 400;
+/** The papers, in CSS px (96 to the inch): US Letter 8.5 × 11 in, A4 210 × 297 mm. */
+export const PAGE_SIZE_FORMATS = {
+    letter: { width: 816, height: 1056 },
+    a4: { width: 794, height: 1123 },
+};
+/**
+ * The width and least height a `PageSize` asks for: the format's, with any
+ * free width or height over it; `sheetWidth` and the content's height when
+ * neither says.
+ */
+export function resolvePageSize(size, sheetWidth = PAGE_SHEET_WIDTH) {
+    const paper = size?.format && size.format !== "free"
+        ? PAGE_SIZE_FORMATS[size.format]
+        : undefined;
+    return {
+        width: size?.width ?? paper?.width ?? sheetWidth,
+        height: size?.height ?? paper?.height,
+    };
+}
+/**
+ * The canvas' own gutters, shared by the sheet and the band.
+ *
+ * One constant rather than two literals: the two are only aligned as long as
+ * they are equal, and a column that lines up by coincidence stops lining up
+ * the first time one of them is edited.
+ */
+const CANVAS_PX = [2, 3, 4];
+/** What is happening in the page, pinned to the sheet's top edge. */
+function ActivityLine({ label }) {
+    return (_jsxs(Box, { "data-page-activity": "", role: "status", sx: {
+            position: "sticky",
+            top: 0,
+            zIndex: 2,
+            alignSelf: "flex-start",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2,
+            px: 2,
+            py: "4px",
+            borderRadius: "999px",
+            border: "1px solid",
+            borderColor: "accent.muted",
+            bg: "accent.subtle",
+            color: "accent.fg",
+            fontSize: 0,
+            fontWeight: "semibold",
+            whiteSpace: "nowrap",
+            boxShadow: "0 4px 12px -6px rgba(0,0,0,0.3)",
+        }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", sx: {
+                    width: 7,
+                    height: 7,
+                    borderRadius: "50%",
+                    bg: "accent.fg",
+                    animation: "page-activity-dot 1.1s ease-in-out infinite",
+                    "@keyframes page-activity-dot": {
+                        "0%, 100%": { opacity: 1 },
+                        "50%": { opacity: 0.3 },
+                    },
+                } }), _jsx(Text, { children: label })] }));
+}
+export function PageLayout({ page, hasPage = page !== undefined && page !== null, panel, band, chips, picker, transient, activity, bandMode = "docked", panelMode = "docked", panelSide = "right", sheetWidth = PAGE_SHEET_WIDTH, pageSize, panelWidth = PAGE_PANEL_WIDTH, }) {
+    const floating = bandMode === "floating";
+    const bandInPanel = bandMode === "panel";
+    const hasBand = band !== undefined && band !== null;
+    // One width for the sheet, the band's mount and the chips: the column.
+    const { width: pageWidth, height: pageHeight } = resolvePageSize(pageSize, sheetWidth);
+    const panelOpen = useSignalValue(pageLayoutPanelOpen);
+    // A panel holding the band is on screen whatever the toggle says: closing
+    // it would take the composer with it.
+    const panelShown = panelOpen || (bandInPanel && hasBand);
+    const announced = useSignalValue(pageLayoutActivity);
+    const activityLabel = activity ?? announced;
+    /*
+     * No page — a host without one, or a view that hid it — and the panel's
+     * content is what lies on the sheet. Told to the parts that only make
+     * sense beside a page, through the shared signal.
+     */
+    const sheet = hasPage ? "page" : "panel";
+    useEffect(() => {
+        pageLayoutSheet.value = sheet;
+    }, [sheet]);
+    return (_jsxs(Box, { "data-page-layout": "", sx: {
+            // The positioned ancestor the out-of-sight parts park against.
+            position: "relative",
+            flex: "1 1 auto",
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+        }, children: [picker, _jsxs(Box, { sx: {
+                    flex: "1 1 auto",
+                    minHeight: 0,
+                    display: "flex",
+                    // The canvas the sheet lies on: a step darker than the page, so the
+                    // sheet reads as paper rather than as a bordered region of the
+                    // same surface.
+                    bg: "canvas.inset",
+                }, children: [_jsxs(Box, { sx: {
+                            flex: "1 1 auto",
+                            minWidth: 0,
+                            minHeight: 0,
+                            display: "flex",
+                            flexDirection: "column",
+                        }, children: [band && bandMode === "docked" ? (_jsx(Box, { "data-page-band": "", "data-page-prompt-dock": "", sx: {
+                                    flex: "0 0 auto",
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    px: CANVAS_PX,
+                                    // The content brings its own padding, its own border and
+                                    // its own surface; the band only has to carry them the full
+                                    // width of the canvas and close with a rule.
+                                    bg: "canvas.subtle",
+                                    borderBottom: "1px solid",
+                                    borderColor: "border.default",
+                                }, children: _jsx(Box, { sx: { width: "100%", maxWidth: pageWidth, minWidth: 0 }, children: band }) })) : null, _jsxs(Box, { "data-page-canvas": "", sx: {
+                                    flex: "1 1 auto",
+                                    minWidth: 0,
+                                    minHeight: 0,
+                                    // A page's sheet grows with its content and the canvas
+                                    // scrolls; the panel's sheet fills the canvas and scrolls
+                                    // inside, so a conversation keeps following its stream.
+                                    overflowY: hasPage ? "auto" : "hidden",
+                                    overflowX: "hidden",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    // The same under a floating card: the chips and the sheet
+                                    // start at the top, and the card hangs over them.
+                                    pt: 3,
+                                    pb: 6,
+                                    px: CANVAS_PX,
+                                }, children: [band && chips && !bandInPanel ? (_jsx(Box, { sx: {
+                                            width: "100%",
+                                            maxWidth: pageWidth,
+                                            mb: 3,
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            "& > *": { justifyContent: "center" },
+                                        }, children: chips })) : null, activityLabel ? (_jsx(Box, { sx: {
+                                            width: "100%",
+                                            maxWidth: pageWidth,
+                                            display: "flex",
+                                            justifyContent: "flex-end",
+                                            mb: 2,
+                                        }, children: _jsx(ActivityLine, { label: activityLabel }) })) : null, _jsx(Box, { "data-page-sheet": "", sx: {
+                                            width: "100%",
+                                            maxWidth: pageWidth,
+                                            /*
+                                              A page's sheet is at least as tall as the canvas, and grows
+                                              past it with its content (`1 0 auto`: grow, never shrink).
+                                              It used to be `0 0 auto`, its content's height only — so
+                                              when the layout was given more room (full screen, a taller
+                                              frame, a resized window) the canvas grew and the page did
+                                              not, leaving an empty band of canvas under a short sheet.
+                                              Flex does the following: nothing is measured, so any
+                                              change in the layout's height reaches the page at once.
+                                            */
+                                            flex: hasPage ? "1 0 auto" : "1 1 auto",
+                                            bg: "canvas.default",
+                                            border: "1px solid",
+                                            borderColor: "border.default",
+                                            borderRadius: "10px",
+                                            boxShadow: "0 1px 2px rgba(0,0,0,0.06), 0 24px 48px -28px rgba(0,0,0,0.35)",
+                                            // The page's own margins. A page fills the sheet and reads
+                                            // against these, as text on paper does; a panel's content
+                                            // brings its own gutters, so it sits closer.
+                                            px: hasPage ? [3, 4, "56px"] : [2, 3, 4],
+                                            py: hasPage ? [3, 4, 4] : 2,
+                                            // What is on the sheet positions its hidden siblings
+                                            // against this.
+                                            position: "relative",
+                                            display: "flex",
+                                            // A paper's height when the size names one: the sheet is at
+                                            // least that tall, and grows past it with its content.
+                                            minHeight: hasPage ? (pageHeight ?? 480) : 0,
+                                            /*
+                                            The page fills the sheet, not the viewport: the sheet grows
+                                            with its content and the canvas scrolls, which is what makes
+                                            it a page.
+                                          */
+                                            "& > *": { flex: "1 1 auto", minWidth: 0 },
+                                        }, children: hasPage ? page : panel }), hasPage || !page ? null : (_jsx(Box, { "aria-hidden": "true", sx: {
+                                            position: "absolute",
+                                            inset: 0,
+                                            visibility: "hidden",
+                                            pointerEvents: "none",
+                                            zIndex: -1,
+                                            display: "flex",
+                                        }, children: page }))] })] }), !hasPage || !panel ? null : panelShown ? (_jsxs(Box, { "data-page-panel": "", "data-page-panel-mode": panelMode, sx: {
+                            minWidth: 0,
+                            minHeight: 0,
+                            display: "flex",
+                            flexDirection: "column",
+                            bg: "canvas.default",
+                            borderColor: "border.default",
+                            ...(panelMode === "docked"
+                                ? {
+                                    flex: `0 0 ${panelWidth}px`,
+                                    maxWidth: "45%",
+                                    order: panelSide === "left" ? -1 : undefined,
+                                    [panelSide === "left" ? "borderRight" : "borderLeft"]: "1px solid",
+                                    // Over the canvas, and beside the band rather than under
+                                    // it: the band belongs to the page column.
+                                    zIndex: 1,
+                                }
+                                : panelMode === "overlay"
+                                    ? {
+                                        // Over the page's right edge, the page untouched
+                                        // under it; against the root, as the float is.
+                                        position: "absolute",
+                                        top: 0,
+                                        bottom: 0,
+                                        [panelSide]: 0,
+                                        width: panelWidth,
+                                        maxWidth: "85%",
+                                        [panelSide === "left" ? "borderRight" : "borderLeft"]: "1px solid",
+                                        boxShadow: "shadow.large",
+                                        zIndex: 5,
+                                    }
+                                    : {
+                                        // A window in the page's corner.
+                                        position: "absolute",
+                                        [panelSide]: 16,
+                                        bottom: 16,
+                                        width: panelWidth,
+                                        maxWidth: "calc(100% - 32px)",
+                                        height: "min(70%, 560px)",
+                                        border: "1px solid",
+                                        borderRadius: 2,
+                                        boxShadow: "shadow.large",
+                                        overflow: "hidden",
+                                        zIndex: 5,
+                                    }),
+                        }, children: [_jsx(Box, { sx: {
+                                    flex: "1 1 auto",
+                                    minHeight: 0,
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    "& > *": { flex: "1 1 auto", minHeight: 0 },
+                                }, children: panel }), bandInPanel && hasBand ? (_jsxs(Box, { "data-page-panel-band": "", sx: {
+                                    flex: "0 0 auto",
+                                    borderTop: "1px solid",
+                                    borderColor: "border.default",
+                                    "& > *": { justifyContent: "center" },
+                                }, children: [chips, band] })) : null] })) : (
+                    // Kept mounted, out of sight: a conversation is where the tools
+                    // run and the stream lands, and a panel that unmounted it would
+                    // stop the agent the moment the reader closed it.
+                    _jsx(Box, { "aria-hidden": "true", sx: {
+                            position: "absolute",
+                            inset: 0,
+                            visibility: "hidden",
+                            pointerEvents: "none",
+                            zIndex: -1,
+                            display: "flex",
+                        }, children: panel }))] }), transient, floating && hasBand ? band : null] }));
+}
+export default PageLayout;

package/lib/reactor/page-layout/PageLayoutPlugin.d.ts

@@ -0,0 +1,59 @@
+import type { ReactorReactOutput } from "@datalayer/reactor/react";
+import type { Icon } from "@primer/octicons-react";
+import type { PageSize } from "./PageLayout";
+export declare const PAGE_LAYOUT_PLUGIN_NAME = "@datalayer/primer-page-layout";
+/** The slots the plugin opens, by their default names. */
+export declare const PageLayoutSlots: {
+    readonly page: "page";
+    readonly band: "page-band";
+    readonly panel: "page-panel";
+    readonly chips: "page-chips";
+};
+export type PageLayoutPluginConfig = {
+    /** The slot the layout renders into. */
+    slot: string;
+    /** Its place among that slot's components; lower first. */
+    order: number;
+    /** The slot the panel toggle renders into. Empty for no toggle. */
+    headerSlot: string;
+    /**
+     * The toggle's place among the header's components. Fifty by default:
+     * after a view selector, before an appearance menu at a hundred.
+     */
+    toggleOrder: number;
+    /** What the toggle's label calls the panel: "Show the conversation". */
+    panelName: string;
+    /** The toggle's glyph; the sidebar octicon by default. */
+    toggleIcon?: Icon;
+    /** The slot for what lies on the sheet. */
+    pageSlot: string;
+    /** The slot for the band above the page. */
+    bandSlot: string;
+    /** The slot for the side panel. */
+    panelSlot: string;
+    /** The slot for the chips under the band. */
+    chipsSlot: string;
+    /**
+     * Whether the band is docked at the sheet's width, floats over the canvas,
+     * or stands in the side panel under its content.
+     */
+    band: "docked" | "floating" | "panel";
+    /** Where the panel stands: beside the page, over its edge, or in its corner. */
+    panel: "docked" | "overlay" | "popup";
+    /** Which side it stands on. `right` by default; `left` for a nav sidebar. */
+    panelSide: "left" | "right";
+    /** Whether the panel is open when the page first draws. */
+    panelOpen: boolean;
+    /** The sheet's width, in pixels. */
+    sheetWidth?: number;
+    /**
+     * The sheet's size: free (the default) at `sheetWidth`, or a paper —
+     * `{ format: "letter" }`, `{ format: "a4" }` — with a free `width` or
+     * `height` over it.
+     */
+    pageSize?: PageSize;
+    /** The open panel's width, in pixels. */
+    panelWidth?: number;
+};
+export declare const PageLayoutPlugin: import("@datalayer/reactor").ReactorPlugin<PageLayoutPluginConfig, unknown, ReactorReactOutput>;
+export default PageLayoutPlugin;

package/lib/reactor/page-layout/PageLayoutPlugin.js

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `@datalayer/primer-page-layout` — the page layout, as a reactor plugin.
+ *
+ * A host lists this plugin and renders one slot, `main` by default; the
+ * plugin fills it with {@link PageLayout} and opens four slots of its own for
+ * the other plugins to fill: `page` for what lies on the sheet, `page-band`
+ * for the band docked above it (a composer, a toolbar), `page-panel` for the
+ * side panel, `page-chips` for the chips under the band. A button that opens
+ * and closes the panel goes in the header — only while something fills the
+ * panel slot, so a host with no panel gets no dead button.
+ *
+ * This is the Loop's page layout with the Loop taken out: there the chat
+ * view hands the layout its parts directly through a contribution point of
+ * its own, and the Loop keeps that adapter. Here the parts are slots, which
+ * is what a plain Reactor host has.
+ *
+ * @module reactor/page-layout/PageLayoutPlugin
+ */
+import { createElement } from "react";
+import { definePlugin } from "@datalayer/reactor";
+import { SlotPageLayout, SlotPanelToggle } from "./SlotPageLayout";
+import { pageLayoutPanelOpen } from "./panelState";
+export const PAGE_LAYOUT_PLUGIN_NAME = "@datalayer/primer-page-layout";
+/** The slots the plugin opens, by their default names. */
+export const PageLayoutSlots = {
+    page: "page",
+    band: "page-band",
+    panel: "page-panel",
+    chips: "page-chips",
+};
+export const PageLayoutPlugin = definePlugin({
+    name: PAGE_LAYOUT_PLUGIN_NAME,
+    displayName: "Page layout",
+    description: "The page on a centred sheet, a band docked above it at the same width or floating over it, and a side panel that opens from the header.",
+    octicon: "file",
+    emoji: "\u{1F4C4}",
+    config: {
+        slot: "main",
+        order: 0,
+        headerSlot: "header",
+        toggleOrder: 50,
+        panelName: "panel",
+        toggleIcon: undefined,
+        pageSlot: PageLayoutSlots.page,
+        bandSlot: PageLayoutSlots.band,
+        panelSlot: PageLayoutSlots.panel,
+        chipsSlot: PageLayoutSlots.chips,
+        band: "docked",
+        panel: "docked",
+        panelSide: "right",
+        panelOpen: false,
+        sheetWidth: undefined,
+        pageSize: undefined,
+        panelWidth: undefined,
+    },
+    build: ({ config }) => {
+        // A host whose panel is a navigation sidebar wants it open on arrival,
+        // not behind the header's toggle. Set once, at build: after that the
+        // signal is the reader's.
+        if (config.panelOpen) {
+            pageLayoutPanelOpen.value = true;
+        }
+        return {
+            components: [
+                {
+                    id: "page-layout",
+                    slot: config.slot,
+                    order: config.order,
+                    Component: (context) => createElement(SlotPageLayout, {
+                        pageSlot: config.pageSlot,
+                        bandSlot: config.bandSlot,
+                        panelSlot: config.panelSlot,
+                        chipsSlot: config.chipsSlot,
+                        bandMode: config.band,
+                        panelMode: config.panel,
+                        panelSide: config.panelSide,
+                        sheetWidth: config.sheetWidth,
+                        pageSize: config.pageSize,
+                        panelWidth: config.panelWidth,
+                        context,
+                    }),
+                },
+                ...(config.headerSlot
+                    ? [
+                        {
+                            id: "page-layout-panel-toggle",
+                            slot: config.headerSlot,
+                            order: config.toggleOrder,
+                            Component: () => createElement(SlotPanelToggle, {
+                                panelSlot: config.panelSlot,
+                                panelName: config.panelName,
+                                icon: config.toggleIcon,
+                            }),
+                        },
+                    ]
+                    : []),
+            ],
+        };
+    },
+});
+export default PageLayoutPlugin;

package/lib/reactor/page-layout/PagePanelToggle.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from "react";
+import { type SxProp } from "@primer/react";
+import { type Icon } from "@primer/octicons-react";
+export type PagePanelToggleProps = {
+    /** What the panel holds, for the label: "Show the conversation". */
+    panelName?: string;
+    /** The button's glyph. */
+    icon?: Icon;
+    /** Extra styles — an `order` among a header's items, say. */
+    sx?: SxProp["sx"];
+};
+/**
+ * The header button that opens and closes the page layout's side panel.
+ *
+ * It shares the layout's signals, so a host that opens the panel itself —
+ * `openPagePanel()` when something lands in it — sees the button follow.
+ * With the panel's content on the sheet there is nothing to open, and the
+ * button draws nothing.
+ */
+export declare function PagePanelToggle({ panelName, icon, sx, }: PagePanelToggleProps): JSX.Element | null;
+export default PagePanelToggle;

package/lib/reactor/page-layout/PagePanelToggle.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from "@primer/react";
+import { SidebarExpandIcon } from "@primer/octicons-react";
+import { useSignalValue } from "@datalayer/reactor/react";
+import { openPagePanel, pageLayoutPanelOpen, pageLayoutSheet, } from "./panelState";
+/**
+ * The header button that opens and closes the page layout's side panel.
+ *
+ * It shares the layout's signals, so a host that opens the panel itself —
+ * `openPagePanel()` when something lands in it — sees the button follow.
+ * With the panel's content on the sheet there is nothing to open, and the
+ * button draws nothing.
+ */
+export function PagePanelToggle({ panelName = "panel", icon = SidebarExpandIcon, sx, }) {
+    const open = useSignalValue(pageLayoutPanelOpen);
+    const sheet = useSignalValue(pageLayoutSheet);
+    if (sheet === "panel") {
+        return null;
+    }
+    return (_jsx(IconButton, { icon: icon, size: "small", variant: open ? "default" : "invisible", "aria-label": open ? `Hide the ${panelName}` : `Show the ${panelName}`, "aria-pressed": open, onClick: () => {
+            if (open) {
+                pageLayoutPanelOpen.value = false;
+            }
+            else {
+                openPagePanel();
+            }
+        }, sx: { color: open ? "accent.fg" : "fg.muted", ...sx } }));
+}
+export default PagePanelToggle;

package/lib/reactor/page-layout/SlotPageLayout.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The page layout fed from slots, for a host whose parts arrive as plugins.
+ *
+ * The layout component takes elements; a Reactor host has slot components.
+ * This reads four slots — the page, the band, the panel, the chips — and
+ * hands each to the layout as a `ReactorSlot`, or as nothing when no plugin
+ * filled it, so an empty band draws no band and an empty panel offers no
+ * toggle. Whatever the host passed to the layout's own slot goes on to every
+ * sub-slot, the way a slot's props always reach its components.
+ *
+ * @module reactor/page-layout/SlotPageLayout
+ */
+import type { JSX } from "react";
+import type { Icon } from "@primer/octicons-react";
+import { type PageLayoutProps } from "./PageLayout";
+export type SlotPageLayoutProps = Pick<PageLayoutProps, "bandMode" | "panelMode" | "panelSide" | "sheetWidth" | "pageSize" | "panelWidth"> & {
+    pageSlot: string;
+    bandSlot: string;
+    panelSlot: string;
+    chipsSlot: string;
+    /** What the host handed the layout's slot; passed on to every sub-slot. */
+    context?: Record<string, unknown>;
+};
+export declare function SlotPageLayout({ pageSlot, bandSlot, panelSlot, chipsSlot, context, ...layout }: SlotPageLayoutProps): JSX.Element;
+/**
+ * The panel toggle, drawn only while some plugin fills the panel slot.
+ *
+ * Its place in the header is the slot component's `order`, which the slot
+ * applies; nothing here sets a CSS order, which would reshuffle the row.
+ */
+export declare function SlotPanelToggle({ panelSlot, panelName, icon, }: {
+    panelSlot: string;
+    panelName?: string;
+    icon?: Icon;
+}): JSX.Element | null;
+export default SlotPageLayout;

package/lib/reactor/page-layout/SlotPageLayout.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactorSlot, useOptionalSlotComponents, } from "@datalayer/reactor/react";
+import { PageLayout } from "./PageLayout";
+import { PagePanelToggle } from "./PagePanelToggle";
+export function SlotPageLayout({ pageSlot, bandSlot, panelSlot, chipsSlot, context, ...layout }) {
+    const hasPage = useOptionalSlotComponents(pageSlot).length > 0;
+    const hasBand = useOptionalSlotComponents(bandSlot).length > 0;
+    const hasPanel = useOptionalSlotComponents(panelSlot).length > 0;
+    const hasChips = useOptionalSlotComponents(chipsSlot).length > 0;
+    return (_jsx(PageLayout, { ...layout, page: hasPage ? _jsx(ReactorSlot, { slot: pageSlot, props: context }) : null, hasPage: hasPage, band: hasBand ? _jsx(ReactorSlot, { slot: bandSlot, props: context }) : null, panel: hasPanel ? _jsx(ReactorSlot, { slot: panelSlot, props: context }) : null, chips: hasChips ? _jsx(ReactorSlot, { slot: chipsSlot, props: context }) : null }));
+}
+/**
+ * The panel toggle, drawn only while some plugin fills the panel slot.
+ *
+ * Its place in the header is the slot component's `order`, which the slot
+ * applies; nothing here sets a CSS order, which would reshuffle the row.
+ */
+export function SlotPanelToggle({ panelSlot, panelName, icon, }) {
+    const hasPanel = useOptionalSlotComponents(panelSlot).length > 0;
+    if (!hasPanel) {
+        return null;
+    }
+    return _jsx(PagePanelToggle, { panelName: panelName, icon: icon });
+}
+export default SlotPageLayout;

package/lib/reactor/page-layout/panelState.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Whether the side panel is open.
+ *
+ * Closed to start: the page is what a reader came for, and a panel with
+ * nothing in it yet is a column of nothing.
+ */
+export declare const pageLayoutPanelOpen: import("@datalayer/reactor").Signal<boolean>;
+/**
+ * What lies on the sheet: the page, or — when there is no page to show — the
+ * panel's own content.
+ *
+ * Written by the layout as it renders, read by the parts that only make
+ * sense beside a page: the toggle would open a second copy of what is
+ * already on the sheet, and anything hung under a band to echo the panel
+ * would repeat it.
+ */
+export declare const pageLayoutSheet: import("@datalayer/reactor").Signal<"page" | "panel">;
+/**
+ * What is happening in the page, in a short line — "Analyst is adding a
+ * cell…" — or nothing. The layout pins it to the top of the sheet while it
+ * is set. A host or another plugin writes it; a layout given an `activity`
+ * prop shows that instead.
+ */
+export declare const pageLayoutActivity: import("@datalayer/reactor").Signal<string | undefined>;
+/** Open the panel — for a host that wants its content seen the moment it lands. */
+export declare function openPagePanel(): void;
+export declare function closePagePanel(): void;
+export declare function togglePagePanel(): void;