@pantheon-systems/puck-css 0.7.0 → 0.9.0

package/dist/editor/components/OutlinePanel.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * OutlinePanel
+ *
+ * The page's block structure, replacing Puck's stock LayerTree at the `outline`
+ * override key.
+ *
+ */
+import React from 'react';
+import { createUsePuck } from '@puckeditor/core';
+import { Icon } from '@pantheon-systems/pds-toolkit-react';
+import { useP1PuckOptional } from '../../core/P1PuckContext.js';
+import { GripHandleIcon } from '../icons/index.js';
+import { DraggableRow } from './DraggableRow.js';
+import { PanelShell } from './PanelShell.js';
+import { PreviewPanelOverlay } from './PreviewPanelOverlay.js';
+import { flattenOutline, resolveDrop, ROOT_ZONE } from './outlineTree.js';
+import { getIconForComponent } from './componentIconName.js';
+import { useDragReorder } from './useDragReorder.js';
+import styles from './OutlinePanel.module.css';
+const usePuckOutline = createUsePuck();
+export function OutlinePanel() {
+    const p1Puck = useP1PuckOptional();
+    const isViewingHistoricalVersion = p1Puck?.isViewingHistoricalVersion ?? false;
+    const viewingVersion = p1Puck?.viewingVersion ?? null;
+    const returnToLatest = p1Puck?.returnToLatest ?? (() => { });
+    const content = usePuckOutline((s) => s.appState.data.content);
+    const config = usePuckOutline((s) => s.config);
+    const itemSelector = usePuckOutline((s) => s.appState.ui.itemSelector);
+    const dispatch = usePuckOutline((s) => s.dispatch);
+    const rows = React.useMemo(() => flattenOutline(content, config), [content, config]);
+    const isSelected = (row) => !!itemSelector &&
+        itemSelector.index === row.index &&
+        (itemSelector.zone ?? ROOT_ZONE) === row.zone;
+    const select = (row) => {
+        dispatch({ type: 'setUi', ui: { itemSelector: { index: row.index, zone: row.zone } } });
+    };
+    const remove = (row) => {
+        dispatch({ type: 'remove', index: row.index, zone: row.zone });
+    };
+    const { dropTargetId, getDragHandlers } = useDragReorder({
+        getId: (row) => row.id,
+        onReorder: (source, target) => {
+            const move = resolveDrop(source, target);
+            if (move) {
+                dispatch({
+                    type: 'reorder',
+                    sourceIndex: move.sourceIndex,
+                    destinationIndex: move.destinationIndex,
+                    destinationZone: move.zone,
+                });
+            }
+        },
+    });
+    return (_jsx(PreviewPanelOverlay, { isViewingHistoricalVersion: isViewingHistoricalVersion, versionNumber: viewingVersion?.versionNumber ?? undefined, onExitPreview: returnToLatest, children: _jsx(PanelShell, { title: "Outline", children: rows.length === 0 ? (_jsx("div", { className: styles.empty, children: "No blocks yet. Add one from the Blocks panel." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.eyebrow, children: "Page structure" }), rows.map((row) => (_jsxs(DraggableRow, { depth: row.depth, isSelected: isSelected(row), isDropTarget: dropTargetId === row.id, onSelect: () => select(row), dragHandlers: getDragHandlers(row), children: [_jsx("span", { className: styles.grip, "aria-hidden": "true", children: _jsx(GripHandleIcon, {}) }), _jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(Icon, { iconName: getIconForComponent(row.type, row.label), size: "s" }) }), _jsx("span", { className: styles.label, children: row.label }), _jsx("button", { type: "button", className: styles.delete, "aria-label": `Delete ${row.label}`, 
+                                // stopPropagation on both onClick and onKeyDown: the row div's
+                                // onKeyDown fires on Space/Enter bubbling up from this button,
+                                // which would call select(row) for a block being deleted.
+                                onClick: (e) => {
+                                    e.stopPropagation();
+                                    remove(row);
+                                }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(Icon, { iconName: "trash", size: "s" }) })] }, row.id)))] })) }) }));
+}
+//# sourceMappingURL=OutlinePanel.js.map

package/dist/editor/components/OutlinePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinePanel.js","sourceRoot":"","sources":["../../../src/editor/components/OutlinePanel.tsx"],"names":[],"mappings":"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"}

package/dist/editor/components/OutlinePanel.module.css

@@ -0,0 +1,111 @@
+/**
+ * Outline panel
+ */
+
+.eyebrow {
+  padding: 4px 6px 10px;
+  font-size: var(--pds-typography-size-xs, 0.75rem);
+  font-weight: var(--pds-typography-fw-semibold, 600);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--pds-spacing-xs, 0.5rem);
+  width: 100%;
+  margin-bottom: 2px;
+  padding: var(--pds-spacing-xs, 0.5rem) var(--pds-spacing-s, 0.75rem);
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.row:hover {
+  background: var(--pds-color-interactive-background-hover, var(--puck-css-bg-secondary));
+}
+
+.row:focus-visible {
+  outline: 2px solid var(--pds-color-interactive-focus, var(--puck-css-primary));
+  outline-offset: 2px;
+}
+
+.rowSelected,
+.rowSelected:hover {
+  background: var(--pds-color-interactive-background-selected, var(--puck-css-bg-secondary));
+  border-color: var(--pds-color-border-hover, var(--puck-css-border));
+}
+
+.rowDropTarget {
+  background: var(--pds-color-panel-sunken-background, var(--puck-css-bg-secondary));
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  font-weight: var(--pds-typography-fw-semibold, 600);
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+}
+
+.rowSelected .icon {
+  color: var(--pds-color-interactive-focus, var(--puck-css-primary));
+}
+
+.grip {
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+}
+
+/* Hidden until the row is hovered or something inside it has focus — so the
+   affordance stays reachable by keyboard, not just by pointer. */
+.delete {
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 2px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  cursor: pointer;
+  opacity: 0;
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+}
+
+.row:hover .delete,
+.row:focus-within .delete,
+.delete:focus-visible {
+  opacity: 1;
+}
+
+.delete:hover {
+  color: var(--pds-color-status-critical-foreground);
+}
+
+.delete:focus-visible {
+  outline: 2px solid var(--pds-color-interactive-focus, var(--puck-css-primary));
+  outline-offset: 1px;
+}
+
+.empty {
+  padding: 40px var(--pds-spacing-l, 1.5rem);
+  text-align: center;
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+}

package/dist/editor/components/P1InspectorFields.d.ts

@@ -0,0 +1,16 @@
+/**
+ * P1InspectorFields
+ *
+ * Orchestrates the right inspector panel's fields override:
+ *   - Page / Blocks tab header (tab mirrors Puck's itemSelector state)
+ *   - Read-only banner + interaction guard when viewing a historical version
+ *   - Delegates to P1TemplateFields when editing a template document
+ *
+ * Reads P1 context via useP1PuckOptional() and Puck state via createUsePuck().
+ * Placed in the `fields` override so it always runs inside Puck's component tree.
+ */
+import React from 'react';
+export declare function P1InspectorFields({ children, }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=P1InspectorFields.d.ts.map

package/dist/editor/components/P1InspectorFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"P1InspectorFields.d.ts","sourceRoot":"","sources":["../../../src/editor/components/P1InspectorFields.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,YAAY,CAyGrB"}

package/dist/editor/components/P1InspectorFields.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createUsePuck, usePuck } from '@puckeditor/core';
+import { IconButton } from '@pantheon-systems/pds-toolkit-react';
+import { useP1PuckOptional } from '../../core/P1PuckContext.js';
+import { templateFromRegistryPath } from '../utils/templatePath.js';
+import { ReadOnlyFieldsGuard } from '../../versioning/components/ReadOnlyFieldsGuard.js';
+import { VersionReadOnlyBanner } from '../../versioning/components/VersionReadOnlyBanner.js';
+import { P1TemplateFields } from './P1TemplateFields.js';
+import { InspectorTabHeader } from './InspectorTabHeader.js';
+// Selectors are at module level so the hook identity is stable across renders.
+const useInspectorPuck = createUsePuck();
+const useInspectorSelectedType = createUsePuck();
+const useInspectorContentLength = createUsePuck();
+const useInspectorRightVisible = createUsePuck();
+export function P1InspectorFields({ children, }) {
+    const css = useP1PuckOptional();
+    const itemSelector = useInspectorPuck((s) => s.appState?.ui
+        ?.itemSelector ?? null);
+    const selectedBlockType = useInspectorSelectedType((s) => s.selectedItem?.type ?? null);
+    const contentLength = useInspectorContentLength((s) => s.appState?.data?.content
+        ?.length ?? 0);
+    const rightSideBarVisible = useInspectorRightVisible((s) => s.appState?.ui
+        ?.rightSideBarVisible ?? true);
+    const { dispatch, config } = usePuck();
+    const selectedBlockLabel = selectedBlockType
+        ? (config.components[selectedBlockType]?.label ?? selectedBlockType)
+        : null;
+    const isReadOnly = css?.isViewingHistoricalVersion ?? false;
+    const versionNumber = css?.viewingVersion?.versionNumber ?? null;
+    const activeTab = itemSelector ? 'block' : 'page';
+    const handleTabChange = (tab) => {
+        if (tab === 'page' && itemSelector) {
+            dispatch({ type: 'setUi', ui: { itemSelector: null } });
+        }
+        if (tab === 'block' && !itemSelector && contentLength > 0) {
+            // Puck indexes the root zone as `rootDroppableId` (`root:default-zone`);
+            // the bare zone name resolves to no zone, so getItem() selects nothing.
+            dispatch({
+                type: 'setUi',
+                ui: { itemSelector: { zone: 'root:default-zone', index: 0 } },
+            });
+        }
+    };
+    const handleCollapse = () => {
+        dispatch({ type: 'setUi', ui: { rightSideBarVisible: false } });
+    };
+    const handleReopen = () => {
+        dispatch({ type: 'setUi', ui: { rightSideBarVisible: true } });
+    };
+    if (!rightSideBarVisible) {
+        return (_jsx("div", { className: "p1-inspector-reopen-strip", children: _jsx(IconButton, { ariaLabel: "Open inspector panel", iconName: "tableRows", size: "s", hasTooltip: false, hasBorder: false, onClick: handleReopen, className: "p1-inspector-reopen-btn" }) }));
+    }
+    const template = templateFromRegistryPath(css?.currentDocument?.path, css?.templates);
+    if (template && !itemSelector && css?.updateTemplate) {
+        // Guarded like the main return — without this, template fields stay editable
+        // while viewing a read-only historical version.
+        return (_jsx(ReadOnlyFieldsGuard, { isReadOnly: isReadOnly, children: _jsx(P1TemplateFields, { children: children }) }));
+    }
+    return (_jsxs("div", { className: `p1-inspector-fields${isReadOnly ? ' p1-inspector-fields--readonly' : ''}`, children: [_jsx(InspectorTabHeader, { activeTab: activeTab, onTabChange: handleTabChange, isReadOnly: isReadOnly, rightSideBarVisible: rightSideBarVisible, onCollapse: handleCollapse }), isReadOnly && versionNumber !== null && (_jsx(VersionReadOnlyBanner, { versionNumber: versionNumber })), activeTab === 'block' && selectedBlockLabel && (_jsxs("div", { className: "p1-inspector-breadcrumb", "aria-label": "Selected block location", children: [_jsx("span", { className: "p1-inspector-breadcrumb__sep", "aria-hidden": "true", children: "Page" }), _jsx("span", { className: "p1-inspector-breadcrumb__sep", "aria-hidden": "true", children: "\u203A" }), _jsx("span", { className: "p1-inspector-breadcrumb__block", children: selectedBlockLabel })] })), _jsx(ReadOnlyFieldsGuard, { isReadOnly: isReadOnly, children: children })] }));
+}
+//# sourceMappingURL=P1InspectorFields.js.map

package/dist/editor/components/P1InspectorFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"P1InspectorFields.js","sourceRoot":"","sources":["../../../src/editor/components/P1InspectorFields.tsx"],"names":[],"mappings":"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"}

package/dist/editor/components/P1TemplateFields.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Right-sidebar fields override for template documents. When editing a template
+ * (`_registry/templates/<name>`) with the root selected, replaces the default
+ * "Page" root fields with the Template details panel (Label / Description / URL
+ * pattern). Otherwise renders Puck's default fields unchanged.
+ */
+export declare function P1TemplateFields({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=P1TemplateFields.d.ts.map

package/dist/editor/components/P1TemplateFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"P1TemplateFields.d.ts","sourceRoot":"","sources":["../../../src/editor/components/P1TemplateFields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CA+ChG"}

package/dist/editor/components/P1TemplateFields.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createUsePuck, usePuck } from '@puckeditor/core';
+import { useP1PuckOptional } from '../../core/P1PuckContext.js';
+import { TemplateDetailsPanel } from '../../features/content-type-templates/ui/TemplateDetailsPanel.js';
+import { templateFromRegistryPath } from '../utils/templatePath.js';
+const useTemplateFieldsPuck = createUsePuck();
+/**
+ * Right-sidebar fields override for template documents. When editing a template
+ * (`_registry/templates/<name>`) with the root selected, replaces the default
+ * "Page" root fields with the Template details panel (Label / Description / URL
+ * pattern). Otherwise renders Puck's default fields unchanged.
+ */
+export function P1TemplateFields({ children }) {
+    const css = useP1PuckOptional();
+    const itemSelector = useTemplateFieldsPuck((s) => s.appState?.ui?.itemSelector);
+    const { dispatch } = usePuck();
+    const template = templateFromRegistryPath(css?.currentDocument?.path, css?.templates);
+    if (template && !itemSelector && css?.updateTemplate) {
+        const updateTemplate = css.updateTemplate;
+        return (_jsx(TemplateDetailsPanel, { template: template, onSave: async (details) => {
+                await updateTemplate(template.id, {
+                    label: details.label,
+                    description: details.description,
+                    defaultUrlPattern: details.defaultUrlPattern,
+                });
+                dispatch({
+                    type: 'setData',
+                    data: (prev) => {
+                        const root = (prev.root ?? {});
+                        const props = (root.props ?? {});
+                        return {
+                            ...prev,
+                            root: {
+                                ...root,
+                                props: {
+                                    ...props,
+                                    _template: {
+                                        ...(props._template ?? {}),
+                                        label: details.label,
+                                        description: details.description,
+                                        defaultUrlPattern: details.defaultUrlPattern,
+                                    },
+                                },
+                            },
+                        };
+                    },
+                });
+            } }));
+    }
+    return _jsx(_Fragment, { children: children });
+}
+//# sourceMappingURL=P1TemplateFields.js.map

package/dist/editor/components/P1TemplateFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"P1TemplateFields.js","sourceRoot":"","sources":["../../../src/editor/components/P1TemplateFields.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kEAAkE,CAAC;AACxG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,MAAM,qBAAqB,GAAG,aAAa,EAAE,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAiC;IAC1E,MAAM,GAAG,GAAG,iBAAiB,EAAE,CAAC;IAChC,MAAM,YAAY,GAAG,qBAAqB,CACxC,CAAC,CAAC,EAAE,EAAE,CACH,CAAmE,CAAC,QAAQ,EAAE,EAAE,EAAE,YAAY,CAClG,CAAC;IACF,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,wBAAwB,CAAC,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;IAEtF,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,GAAG,EAAE,cAAc,EAAE,CAAC;QACrD,MAAM,cAAc,GAAG,GAAG,CAAC,cAAc,CAAC;QAC1C,OAAO,CACL,KAAC,oBAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;gBACxB,MAAM,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE;oBAChC,KAAK,EAAE,OAAO,CAAC,KAAK;oBACpB,WAAW,EAAE,OAAO,CAAC,WAAW;oBAChC,iBAAiB,EAAE,OAAO,CAAC,iBAAiB;iBAC7C,CAAC,CAAC;gBACH,QAAQ,CAAC;oBACP,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,CAAC,IAA6B,EAAE,EAAE;wBACtC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAA4B,CAAC;wBAC1D,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAA4B,CAAC;wBAC5D,OAAO;4BACL,GAAG,IAAI;4BACP,IAAI,EAAE;gCACJ,GAAG,IAAI;gCACP,KAAK,EAAE;oCACL,GAAG,KAAK;oCACR,SAAS,EAAE;wCACT,GAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAA6B;wCACvD,KAAK,EAAE,OAAO,CAAC,KAAK;wCACpB,WAAW,EAAE,OAAO,CAAC,WAAW;wCAChC,iBAAiB,EAAE,OAAO,CAAC,iBAAiB;qCAC7C;iCACF;6BACF;yBACF,CAAC;oBACJ,CAAC;iBACO,CAAC,CAAC;YACd,CAAC,GACD,CACH,CAAC;IACJ,CAAC;IACD,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

package/dist/editor/components/PanelHeader.d.ts

@@ -0,0 +1,25 @@
+/**
+ * PanelHeader
+ *
+ * The heading every left-rail panel wears: title, an optional actions slot, a
+ * collapse button, and the rule beneath. Blocks, Outline, Version history and
+ * Data sources all render it, so their headings stay identical by construction
+ * instead of by three hand-rolled copies drifting apart — which is exactly what
+ * had happened (styles.css defined .css-plugin-panel-header twice, with
+ * different padding).
+ *
+ * Collapsing is built in rather than a required prop: all four panels want the
+ * same dispatch, and every one of them renders inside Puck's context. Pass
+ * `onCollapse` only for work that must happen *in addition*.
+ */
+import React from 'react';
+export interface PanelHeaderProps {
+    /** Panel name, rendered as the heading. */
+    title: string;
+    /** Extra work to run after collapsing. The collapse itself is built in. */
+    onCollapse?: () => void;
+    /** Optional controls rendered between the title and the collapse button. */
+    actions?: React.ReactNode;
+}
+export declare function PanelHeader({ title, onCollapse, actions, }: PanelHeaderProps): React.ReactElement;
+//# sourceMappingURL=PanelHeader.d.ts.map

package/dist/editor/components/PanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/editor/components/PanelHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,OAAO,GACR,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAoBvC"}

package/dist/editor/components/PanelHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from '@pantheon-systems/pds-toolkit-react';
+import { usePuck } from '@puckeditor/core';
+import styles from './PanelHeader.module.css';
+export function PanelHeader({ title, onCollapse, actions, }) {
+    const { dispatch } = usePuck();
+    return (_jsxs("div", { className: styles.header, children: [_jsx("span", { className: styles.title, children: title }), actions, _jsx(IconButton, { ariaLabel: "Collapse panel", iconName: "anglesLeft", size: "s", hasTooltip: true, hasBorder: false, onClick: () => {
+                    dispatch({ type: 'setUi', ui: { leftSideBarVisible: false } });
+                    onCollapse?.();
+                } })] }));
+}
+//# sourceMappingURL=PanelHeader.js.map

package/dist/editor/components/PanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHeader.js","sourceRoot":"","sources":["../../../src/editor/components/PanelHeader.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAW9C,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,OAAO,GACU;IACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAE/B,OAAO,CACL,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,EAC5C,OAAO,EACR,KAAC,UAAU,IACT,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAC,YAAY,EACrB,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,IAAI,EAChB,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;oBAC/D,UAAU,EAAE,EAAE,CAAC;gBACjB,CAAC,GACD,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/components/PanelHeader.module.css

@@ -0,0 +1,34 @@
+/**
+ * Panel heading
+ *
+ * One heading for every left-rail panel: Blocks, Outline, Version history,
+ * Data sources. Geometry mirrors the prototype's `.panel-header`
+ * (p1-responsive/editor/editor.css:230).
+ */
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--pds-color-border-default, var(--puck-css-border));
+  flex: none;
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', sans-serif);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
+}
+
+/* Trailing controls never shrink when the title is long. */
+.header > *:not(.title) {
+  flex-shrink: 0;
+}

package/dist/editor/components/PanelShell.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PanelShellProps {
+    title: string;
+    onCollapse?: () => void;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    testId?: string;
+}
+export declare function PanelShell({ title, onCollapse, actions, children, testId, }: PanelShellProps): React.ReactElement;
+//# sourceMappingURL=PanelShell.d.ts.map

package/dist/editor/components/PanelShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelShell.d.ts","sourceRoot":"","sources":["../../../src/editor/components/PanelShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAOtC"}

package/dist/editor/components/PanelShell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelHeader } from './PanelHeader.js';
+import styles from './PanelShell.module.css';
+export function PanelShell({ title, onCollapse, actions, children, testId, }) {
+    return (_jsxs("div", { className: styles.shell, "data-testid": testId, children: [_jsx(PanelHeader, { title: title, onCollapse: onCollapse, actions: actions }), _jsx("div", { className: styles.body, children: children })] }));
+}
+//# sourceMappingURL=PanelShell.js.map

package/dist/editor/components/PanelShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelShell.js","sourceRoot":"","sources":["../../../src/editor/components/PanelShell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAU7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,GACU;IAChB,OAAO,CACL,eAAK,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAe,MAAM,aAC/C,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,EACvE,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAO,IACzC,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/components/PanelShell.module.css

@@ -0,0 +1,15 @@
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px;
+  font-size: 13px;
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
+}

package/dist/editor/components/PreviewPanelOverlay.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface PreviewPanelOverlayProps {
+    children: React.ReactNode;
+    /** Whether a historical version is currently being previewed. */
+    isViewingHistoricalVersion?: boolean;
+    /** Version number being previewed — shown in the overlay label. */
+    versionNumber?: number;
+    /** Called when the user clicks "Back to current version". */
+    onExitPreview?: () => void;
+}
+export declare function PreviewPanelOverlay({ children, isViewingHistoricalVersion, versionNumber, onExitPreview, }: PreviewPanelOverlayProps): React.ReactElement;
+//# sourceMappingURL=PreviewPanelOverlay.d.ts.map

package/dist/editor/components/PreviewPanelOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPanelOverlay.d.ts","sourceRoot":"","sources":["../../../src/editor/components/PreviewPanelOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iEAAiE;IACjE,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,0BAAkC,EAClC,aAAa,EACb,aAAa,GACd,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAkC/C"}

package/dist/editor/components/PreviewPanelOverlay.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function PreviewPanelOverlay({ children, isViewingHistoricalVersion = false, versionNumber, onExitPreview, }) {
+    return (_jsxs("div", { className: `css-preview-panel-overlay__wrapper${isViewingHistoricalVersion ? ' css-preview-panel-overlay__wrapper--readonly' : ''}`, children: [isViewingHistoricalVersion && (_jsxs("div", { className: "css-preview-panel-overlay", "aria-live": "polite", children: [_jsx("div", { className: "css-preview-panel-overlay__label-wrap", children: _jsxs("p", { className: "css-preview-panel-overlay__label", children: ["You're viewing", versionNumber != null ? ` v${versionNumber}` : ' a historical version', "."] }) }), _jsx("div", { className: "css-preview-panel-overlay__btn-wrap", children: _jsx("button", { type: "button", className: "css-preview-panel-overlay__btn", onClick: onExitPreview, disabled: !onExitPreview, children: "Back to current version" }) })] })), _jsx("div", { className: isViewingHistoricalVersion
+                    ? 'css-preview-panel-overlay__content css-preview-panel-overlay__content--dimmed'
+                    : 'css-preview-panel-overlay__content', "aria-hidden": isViewingHistoricalVersion ? true : undefined, children: children })] }));
+}
+//# sourceMappingURL=PreviewPanelOverlay.js.map

package/dist/editor/components/PreviewPanelOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPanelOverlay.js","sourceRoot":"","sources":["../../../src/editor/components/PreviewPanelOverlay.tsx"],"names":[],"mappings":";AAYA,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,0BAA0B,GAAG,KAAK,EAClC,aAAa,EACb,aAAa,GACY;IACzB,OAAO,CACL,eAAK,SAAS,EAAE,qCAAqC,0BAA0B,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAC,CAAC,EAAE,EAAE,aACrI,0BAA0B,IAAI,CAC7B,eAAK,SAAS,EAAC,2BAA2B,eAAW,QAAQ,aAC3D,cAAK,SAAS,EAAC,uCAAuC,YACpD,aAAG,SAAS,EAAC,kCAAkC,+BACzB,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,aAAa,EAAE,CAAC,CAAC,CAAC,uBAAuB,SACxF,GACA,EACN,cAAK,SAAS,EAAC,qCAAqC,YAClD,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,CAAC,aAAa,wCAGjB,GACL,IACF,CACP,EACD,cACE,SAAS,EACP,0BAA0B;oBACxB,CAAC,CAAC,+EAA+E;oBACjF,CAAC,CAAC,oCAAoC,iBAE7B,0BAA0B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEzD,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/components/PublishedStatusBadge.d.ts

@@ -2,5 +2,5 @@ export interface PublishedStatusBadgeProps {
     status: "published" | "unpublished-changes" | "draft";
     className?: string;
 }
-export declare function PublishedStatusBadge({ status, className, }: PublishedStatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PublishedStatusBadge({ status, className, }: PublishedStatusBadgeProps): import("react").JSX.Element;
 //# sourceMappingURL=PublishedStatusBadge.d.ts.map

package/dist/editor/components/PublishedStatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PublishedStatusBadge.d.ts","sourceRoot":"","sources":["../../../src/editor/components/PublishedStatusBadge.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,WAAW,GAAG,qBAAqB,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,2CAmB3B"}
+{"version":3,"file":"PublishedStatusBadge.d.ts","sourceRoot":"","sources":["../../../src/editor/components/PublishedStatusBadge.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,WAAW,GAAG,qBAAqB,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,+BAmB3B"}

package/dist/editor/components/VersionBannerOverride.d.ts

@@ -5,6 +5,10 @@ export interface VersionBannerOverrideProps {
     versions: DocumentVersion[];
     selectedVersionId?: string;
     onVersionSelect?: (version: DocumentVersion) => void;
+    onRestoreVersion?: (version: DocumentVersion) => Promise<void>;
+    canRevert?: boolean;
+    /** The currently filtered version list (from the panel filter). Steppers navigate within this list. */
+    filteredVersions?: DocumentVersion[];
 }
-export declare function VersionBannerOverride({ children, versions, selectedVersionId, onVersionSelect, }: VersionBannerOverrideProps): React.ReactElement;
+export declare function VersionBannerOverride({ children, versions, selectedVersionId, onVersionSelect, onRestoreVersion, canRevert, filteredVersions, }: VersionBannerOverrideProps): React.ReactElement;
 //# sourceMappingURL=VersionBannerOverride.d.ts.map

package/dist/editor/components/VersionBannerOverride.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VersionBannerOverride.d.ts","sourceRoot":"","sources":["../../../src/editor/components/VersionBannerOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,eAAe,GAChB,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAwEjD"}
+{"version":3,"file":"VersionBannerOverride.d.ts","sourceRoot":"","sources":["../../../src/editor/components/VersionBannerOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACrD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uGAAuG;IACvG,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;CACtC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,SAAiB,EACjB,gBAAgB,GACjB,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAgFjD"}

package/dist/editor/components/VersionBannerOverride.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Icon } from '@pantheon-systems/pds-toolkit-react';
 import { useP1Puck } from '../../core/P1PuckContext.js';
-import { WarningTriangleIcon } from '../icons/WarningTriangleIcon.js';
-export function VersionBannerOverride({ children, versions, selectedVersionId, onVersionSelect, }) {
+import { HistoricalVersionBanner } from '../../versioning/components/HistoricalVersionBanner.js';
+export function VersionBannerOverride({ children, versions, selectedVersionId, onVersionSelect, onRestoreVersion, canRevert = false, filteredVersions, }) {
     const p1Context = useP1Puck();
+    // versions are newest-first from the API; index 0 is always the current (latest) version.
     const isViewingOld = !!selectedVersionId && versions.length > 0 && selectedVersionId !== versions[0]?.id;
-    const hasDocument = p1Context.currentDocument !== null;
+    const viewingVersion = versions.find(v => v.id === selectedVersionId);
+    // While a switch is loading the next document, currentDocument is null but
+    // the empty state must not flash over the still-visible previous canvas.
+    const hasOrIsLoadingDocument = p1Context.currentDocument !== null || p1Context.documentLoading;
     const isReturning = p1Context.isReturningToLatest;
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [isViewingOld && (_jsxs("div", { className: "pds-section-message pds-section-message--warning", role: "status", style: { borderRadius: 0, flexShrink: 0 }, children: [_jsxs("div", { className: "pds-section-message__content", children: [_jsx("div", { className: "pds-section-message__icon", children: _jsx(WarningTriangleIcon, {}) }), _jsx("div", { className: "pds-section-message__text", children: _jsx("div", { className: "pds-section-message__message", children: _jsx("p", { children: "Viewing a previous version" }) }) })] }), _jsx("div", { className: "pds-section-message__actions", children: _jsx("button", { type: "button", className: "pds-button pds-button--sm pds-button--secondary pds-section-message__cta", onClick: () => versions[0] && onVersionSelect?.(versions[0]), disabled: isReturning, "aria-busy": isReturning, children: isReturning ? 'Returning…' : 'Return to current' }) })] })), _jsxs("div", { style: { flex: 1, minHeight: 0, position: 'relative' }, children: [_jsx("div", { style: {
+    // Stepper: navigate within the filtered list (falls back to full list if not provided).
+    // Newest-first: lower index = newer, higher index = older.
+    const stepList = filteredVersions ?? versions;
+    const currentIdx = selectedVersionId ? stepList.findIndex(v => v.id === selectedVersionId) : -1;
+    const hasPrevious = currentIdx !== -1 && currentIdx < stepList.length - 1;
+    const hasNext = currentIdx > 0;
+    // Always provide callbacks when previewing so buttons render (disabled state controls usability).
+    const handlePrevious = useCallback(() => { const t = stepList[currentIdx + 1]; if (hasPrevious && t)
+        onVersionSelect?.(t); }, [stepList, currentIdx, hasPrevious, onVersionSelect]);
+    const handleNext = useCallback(() => { const t = stepList[currentIdx - 1]; if (hasNext && t)
+        onVersionSelect?.(t); }, [stepList, currentIdx, hasNext, onVersionSelect]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [isViewingOld && (_jsx(HistoricalVersionBanner, { version: viewingVersion, onReturnToLatest: () => { if (versions[0])
+                    onVersionSelect?.(versions[0]); }, onRestoreVersion: onRestoreVersion, canRevert: canRevert, isReturning: isReturning, onPrevious: handlePrevious, onNext: handleNext, hasPrevious: hasPrevious, hasNext: hasNext })), _jsxs("div", { style: { flex: 1, minHeight: 0, position: 'relative' }, children: [_jsx("div", { style: {
                             height: '100%',
                             opacity: isReturning ? 0.5 : 1,
                             transition: 'opacity 120ms ease',
                             pointerEvents: isReturning ? 'none' : undefined,
-                        }, children: children }), !hasDocument && (_jsxs("div", { style: {
+                        }, children: children }), !hasOrIsLoadingDocument && (_jsxs("div", { style: {
                             position: 'absolute',
                             inset: 0,
                             zIndex: 10,
@@ -22,7 +39,7 @@ export function VersionBannerOverride({ children, versions, selectedVersionId, o
                             justifyContent: 'center',
                             gap: '1rem',
                             color: 'var(--pds-color-text-subtle)',
-                            backgroundColor: 'white',
-                        }, children: [_jsx(Icon, { iconName: "userAstronaut", iconSize: '3xl', "aria-hidden": "true" }), _jsx("p", { style: { margin: 0, fontFamily: 'Poppins, sans-serif', fontSize: '1rem' }, children: "Choose a page from the menu above" })] }))] })] }));
+                            backgroundColor: 'var(--pds-color-bg-default, white)',
+                        }, children: [_jsx(Icon, { iconName: "userAstronaut", size: "3xl", "aria-hidden": "true" }), _jsx("p", { style: { margin: 0, fontFamily: 'Poppins, sans-serif', fontSize: '1rem' }, children: "Choose a page from the menu above" })] }))] })] }));
 }
 //# sourceMappingURL=VersionBannerOverride.js.map