@kubex/zinc 1.1.28 → 1.1.31

package/dist/zn.d.ts

@@ -4425,7 +4425,6 @@ declare module "components/icon-picker/icon-picker.component" {
         private handleFreeInput;
         private handleClear;
         private _handleTriggerClick;
-        private _handleTriggerKeyDown;
         render(): import("lit-html").TemplateResult<1>;
     }
 }
@@ -7700,10 +7699,13 @@ declare module "components/settings-container/settings-container.component" {
      *
      * @dependency zn-example
      *
-     * @event zn-event-name - Emitted as an example.
+     * @event zn-show - Emitted when the pull tab panel opens.
+     * @event zn-hide - Emitted when the pull tab panel closes.
      *
      * @slot - The default slot.
-     * @slot example - An example slot.
+     * @slot filter - Filter definitions used to toggle visibility of content.
+     * @slot dropdown-content - Custom content for the settings panel.
+     * @slot tab - Extra content rendered inside the pull tab next to the chevron.
      *
      * @csspart base - The component's base wrapper.
      *
@@ -7715,11 +7717,19 @@ declare module "components/settings-container/settings-container.component" {
         position: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
         storeKey: string;
         noScroll: boolean;
+        pullTab: boolean;
+        open: boolean;
+        private panelExpanded;
         private readonly _mutationObserver;
         private _updateFiltersScheduled;
         private _store;
         private _hiddenElements;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        private handleDocumentMouseDown;
+        private togglePullTab;
+        private hidePullTab;
+        private handlePanelTransitionEnd;
         private scheduleUpdateFilters;
         private handleContentSlotChange;
         private handleFiltersSlotChange;
@@ -7728,6 +7738,7 @@ declare module "components/settings-container/settings-container.component" {
         updateFilters(): void;
         updateFilter(e: ZnChangeEvent): void;
         render(): import("lit-html").TemplateResult<1>;
+        private renderPullTab;
         private getDropdownContent;
     }
 }
@@ -8442,6 +8453,57 @@ declare module "components/flow-builder/flow.types" {
         /** Branch configuration (filters / conditions for taking this path), edited via the branch editor. */
         data?: Record<string, unknown>;
     }
+    /** A choice in a filter field's operator or value dropdown. */
+    export interface FlowFilterOption {
+        value: string;
+        /** Display text; defaults to the value. */
+        label?: string;
+    }
+    /** One control row of a branch filter (e.g. "[in the last ▾] [6] [month(s) ▾]"). */
+    export interface FlowFilterField {
+        id: string;
+        /** Leading text shown before the controls. */
+        label?: string;
+        /** The value control. Defaults to 'select' when `options` are given, else 'text'. */
+        type?: 'select' | 'number' | 'text';
+        /** Operator choices shown before the value (e.g. "at least" / "in the last" / "is equal to"). */
+        operators?: FlowFilterOption[];
+        /** Value choices for a 'select' field. */
+        options?: FlowFilterOption[];
+        /** Choices for an adjustable trailing unit dropdown (e.g. day(s) / month(s)); shown instead of `suffix`. */
+        units?: FlowFilterOption[];
+        /** Trailing unit text (e.g. "time(s)") when the unit isn't adjustable. */
+        suffix?: string;
+        placeholder?: string;
+        /** Initial value when the filter is added to a condition. */
+        value?: string | number;
+    }
+    /** An operator's display label: its own, a well-known default for its value, else the value itself. */
+    export function operatorLabel(option: FlowFilterOption): string;
+    /** A filter offered by the built-in branch conditions editor. */
+    export interface FlowBranchFilter {
+        id: string;
+        label: string;
+        description?: string;
+        fields: FlowFilterField[];
+    }
+    /** One configured condition: a filter plus its per-field operator / value / unit entries. */
+    export interface FlowBranchCondition {
+        /** The `FlowBranchFilter` id this condition uses. */
+        filter: string;
+        values: Record<string, {
+            operator?: string;
+            value?: string | number;
+            unit?: string;
+        }>;
+    }
+    /**
+     * A branch's full condition set as persisted on the output port's
+     * `data.conditions`: the outer array is OR-ed, each inner group AND-ed.
+     */
+    export type FlowBranchConditions = FlowBranchCondition[][];
+    /** Read the conditions persisted on an output port (`port.data.conditions`). */
+    export function branchConditions(port: FlowPort): FlowBranchConditions;
     /**
      * Describes a kind of node that can be placed on the canvas. Consumers register
      * these with the builder to extend it — the steps panel and inspector are driven
@@ -8469,6 +8531,12 @@ declare module "components/flow-builder/flow.types" {
         outputs?: FlowPort[];
         /** Initial `data` for a freshly placed node. */
         defaultData?: Record<string, unknown>;
+        /**
+         * Filters offered by the built-in branch conditions editor for this type's
+         * output branches (AND/OR groups persisted on the port's `data.conditions`).
+         * Ignored when `renderBranchConfig` is set.
+         */
+        branchFilters?: FlowBranchFilter[];
         /** Renders the inspector body for a selected node of this type. */
         renderConfig?: (node: FlowNodeInstance, update: (data: Record<string, unknown>) => void) => TemplateResult;
         /** Renders the branch editor body (filters / conditions) for one of this type's output branches. */
@@ -8534,14 +8602,27 @@ declare module "components/flow-builder/flow.types" {
      */
     export const NODE_WIDTH = 240;
     export const NODE_HEIGHT = 60;
-    /** Horizontal spacing between the branches of a multi-output node. */
-    export const BRANCH_SPREAD = 200;
+    /**
+     * Horizontal spacing between the branches of a multi-output node. Matches the
+     * untangle layer gap (card width + 80) so two sibling children fit side by side
+     * directly under their drops — straight downward wires, no elbows.
+     */
+    export const BRANCH_SPREAD: number;
     export const BUS_OFFSET = 40;
     export const PILL_DROP = 40;
     export const PILL_HEIGHT = 40;
     export const PILL_MAX_WIDTH = 240;
     /** Extra pill height per wrapped line (matches the pill's CSS line-height). */
     export const PILL_LINE_HEIGHT = 20;
+    /**
+     * Canvas y of a branch pill's top edge. A pill on a wire to a child below is
+     * centred along the run from its node's bottom to the child's top — equal wire
+     * above and below, however long or tight. A sole output's wire is a straight
+     * stem with no bus to respect, so its pill may rise above the bus line to stay
+     * centred; fan branches stop at the bus. Open branches and loop/side wires
+     * keep the fixed drop below the bus.
+     */
+    export function branchPillTop(node: Pick<FlowNodeInstance, 'y'>, pillH: number, child?: Pick<FlowNodeInstance, 'y'>, soleOutput?: boolean): number;
     /**
      * Estimated pill box for a branch name: sizes to the text up to the max width,
      * then hard-wraps — the height grows a grid unit per extra line. The pill DOM
@@ -8566,12 +8647,13 @@ declare module "components/flow-builder/flow.types" {
     /** A function resolving a node type key to its registered type. */
     export type FlowTypeOf = (type: string) => FlowNodeType | undefined;
     /**
-     * Canvas x for each of a node's branch drops. A connected branch pulls straight
-     * above its child's input — a bend-free wire — when it's the only wire into that
-     * input, the child is within the branch's natural fan range, and the position
-     * keeps clear of sibling branches; otherwise it fans out source-side.
+     * Canvas x for each of a node's branch drops: the natural fan position under
+     * the source. Pills never shift sideways to chase their child — the wire into
+     * a pill is always a straight vertical, and any lateral offset to the child is
+     * taken up by the elbow below the pill (which still enters the child from
+     * straight above).
      */
-    export function branchDropXs(node: FlowNodeInstance, typeOf: FlowTypeOf, nodes: FlowNodeInstance[], connections: FlowConnection[]): number[];
+    export function branchDropXs(node: FlowNodeInstance, typeOf: FlowTypeOf): number[];
     /**
      * The rects a node occupies on the canvas: its card plus each branch-name pill,
      * at the exact positions the canvas draws them.
@@ -8579,6 +8661,13 @@ declare module "components/flow-builder/flow.types" {
     export function nodeObstacles(node: FlowNodeInstance, typeOf: FlowTypeOf, nodes: FlowNodeInstance[], connections: FlowConnection[]): Rect[];
     /** Whether two nodes' footprints (cards and branch pills) would overlap. */
     export function nodesCollide(a: FlowNodeInstance, b: FlowNodeInstance, typeOf: FlowTypeOf, nodes: FlowNodeInstance[], connections: FlowConnection[]): boolean;
+    /**
+     * Whether any of `node`'s branch pills overlap another node's footprint. A
+     * pill centres between its node and the connected child, so moving the CHILD
+     * moves the pill — drags use this to check the moved node's parents, whose
+     * displaced pills could land on a third node.
+     */
+    export function pillsCollide(node: FlowNodeInstance, typeOf: FlowTypeOf, nodes: FlowNodeInstance[], connections: FlowConnection[]): boolean;
     /** Whether a bare card placed at `pos` would hit any of `node`'s footprint. */
     export function cardCollides(pos: {
         x: number;
@@ -8623,6 +8712,88 @@ declare module "components/flow-builder/flow.types" {
      */
     export function loopConnections(nodes: FlowNodeInstance[], connections: FlowConnection[]): Set<FlowConnection>;
 }
+declare module "components/flow-builder/modules/flow-branch-conditions/flow-branch-conditions.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnButton from "components/button/index";
+    import ZnIcon from "components/icon/index";
+    import ZnInput from "components/input/index";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
+    import { type FlowBranchConditions, type FlowBranchFilter } from "components/flow-builder/flow.types";
+    /**
+     * @summary The built-in branch conditions editor: pick filters from a searchable list, then
+     *   combine them into AND groups joined by OR. Rendered by `<zn-flow-builder>`'s branch editor
+     *   for node types that declare `branchFilters`; edits are drafted locally and only applied
+     *   on Save.
+     * @documentation https://zinc.style/components/flow-branch-conditions
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-button
+     * @dependency zn-icon
+     * @dependency zn-input
+     * @dependency zn-option
+     * @dependency zn-select
+     *
+     * @event flow-conditions-save - Emitted on Save with `detail.conditions` (OR groups of AND-ed conditions).
+     * @event flow-conditions-cancel - Emitted on Cancel, with the draft discarded.
+     *
+     * @csspart base - The editor wrapper.
+     * @csspart picker - The filter picker (search + list).
+     * @csspart conditions - The configured condition groups.
+     */
+    export default class ZnFlowBranchConditions extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-button': typeof ZnButton;
+            'zn-icon': typeof ZnIcon;
+            'zn-input': typeof ZnInput;
+            'zn-option': typeof ZnOption;
+            'zn-select': typeof ZnSelect;
+        };
+        /** The filters available to build conditions from. */
+        filters: FlowBranchFilter[];
+        /** The saved conditions being edited; changes stay in a local draft until Save. */
+        value: FlowBranchConditions;
+        private _draft;
+        /** Group index the picker adds into (`_draft.length` starts a new OR group), or null when closed. */
+        private _picker;
+        private _search;
+        /** JSON of the last `value` the draft was built from, so re-renders that pass an
+         *  equivalent value (fresh array refs) don't wipe in-progress edits. */
+        private _valueJson;
+        protected willUpdate(changed: PropertyValues): void;
+        private _emit;
+        private _save;
+        private _cancel;
+        private _cloneDraft;
+        private _addCondition;
+        private _removeCondition;
+        private _setField;
+        private _renderPicker;
+        /**
+         * A select's minimum width, sized so its longest label never truncates
+         * (estimated per char, plus padding and the chevron). When the row can't
+         * fit it, flex-wrap gives the select its own full-width line instead.
+         */
+        private static _selectMinWidth;
+        private _renderField;
+        private _renderCondition;
+        private _renderConditions;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/flow-builder/modules/flow-branch-conditions/index" {
+    import ZnFlowBranchConditions from "components/flow-builder/modules/flow-branch-conditions/flow-branch-conditions.component";
+    export * from "components/flow-builder/modules/flow-branch-conditions/flow-branch-conditions.component";
+    export default ZnFlowBranchConditions;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-flow-branch-conditions': ZnFlowBranchConditions;
+        }
+    }
+}
 declare module "components/flow-builder/modules/flow-node/flow-node.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
@@ -8743,6 +8914,7 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
      *
      * @csspart base - The canvas viewport.
      * @csspart toolbar - The floating toolbar.
+     * @csspart bin - The delete drop-zone shown bottom-right while dragging a node or step.
      */
     export default class ZnFlowCanvas extends ZincElement {
         static styles: CSSResultGroup;
@@ -8767,6 +8939,8 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
         private panX;
         private panY;
         private drag;
+        /** Whether the current drag (node or step) is over the delete bin. */
+        private _overBin;
         /** Canvas-space top-left where a step, if dropped now, would be placed. */
         private _dropGhost;
         /** The stray branch being drawn from an output port until it attaches or cancels. */
@@ -8809,6 +8983,12 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
          * builder on attach).
          */
         private _onPortClick;
+        /**
+         * An orphaned branch pill's port was clicked. If a branch from another node
+         * is already in flight, attach it to this pill's node; otherwise start a
+         * stray branch that continues from this pill.
+         */
+        private _onBranchPortClick;
         private _startLink;
         private _onLinkPointerMove;
         private _updateLinkFromClient;
@@ -8822,6 +9002,8 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
         private _cancelLink;
         private _onPointerMove;
         private _onPointerUp;
+        /** Whether a client-space point is over the delete bin. */
+        private _binHit;
         private _beginMove;
         /**
          * A node's outputs all leave from a single bottom-centre stem and fan out along a
@@ -8840,7 +9022,12 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
          * same input keep sharing a line: their join is real.
          */
         private _elbowMidOffsets;
-        /** Whether an orthogonal segment passes through any node card (with margin). */
+        /**
+         * Whether an orthogonal segment passes through any node card (with margin) —
+         * or the approach zone above one, where incoming arrows land. A foreign wire
+         * running just over a card's input port reads as connecting to it, so routes
+         * keep well clear of that strip too.
+         */
         private _segmentBlocked;
         private _routeClear;
         /**
@@ -8869,6 +9056,9 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
         private _onAddPointDragOver;
         private _onAddDrop;
         private _onWireDrop;
+        private _onBinDragOver;
+        private _onBinDragLeave;
+        private _onBinDrop;
         private _zoomBy;
         /** Canvas-space bounding box of the whole flow: nodes, branch drops, and notes. */
         private _contentBounds;
@@ -8940,10 +9130,13 @@ declare module "components/flow-builder/modules/flow-step-group/index" {
 }
 declare module "components/flow-builder/flow-layout" {
     import { type FlowNodeType, type FlowState } from "components/flow-builder/flow.types";
-    /** Horizontal gap between node origins within a layer. */
+    /** Horizontal gap between node origins within a layer (= BRANCH_SPREAD, so siblings land under their drops). */
     export const LAYOUT_H_GAP: number;
-    /** Vertical gap between layers — clears the bus, a branch pill, and the wire run-in. */
-    export const LAYOUT_V_GAP = 300;
+    /**
+     * Vertical gap between layers: a 160 card-to-card gap — a centred pill gets 60
+     * of wire above and below — keeping the arranged flow compact.
+     */
+    export const LAYOUT_V_GAP = 220;
     /**
      * "Untangle" auto-layout: assigns every node a position in a layered, top-down
      * flow. Layers come from the longest path back to a root (the graph is a DAG —
@@ -8960,6 +9153,7 @@ declare module "components/flow-builder/flow-layout" {
 declare module "components/flow-builder/flow-builder.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
+    import ZnFlowBranchConditions from "components/flow-builder/modules/flow-branch-conditions/index";
     import ZnFlowCanvas from "components/flow-builder/modules/flow-canvas/index";
     import ZnFlowStepGroup from "components/flow-builder/modules/flow-step-group/index";
     import ZnIcon from "components/icon/index";
@@ -8977,6 +9171,7 @@ declare module "components/flow-builder/flow-builder.component" {
      * @dependency zn-input
      * @dependency zn-tabs
      * @dependency zn-navbar
+     * @dependency zn-flow-branch-conditions
      * @dependency zn-flow-canvas
      * @dependency zn-flow-node
      *
@@ -8985,7 +9180,10 @@ declare module "components/flow-builder/flow-builder.component" {
      * @event zn-flow-connect - Emitted when a connection is created. `event.detail.connection`.
      *
      * @slot - `<zn-flow-step>` type declarations; never displayed, each `group`/`category` routes the
-     *   step into the right tab and collapsible grouping of the rendered panel.
+     *   step into the right tab and collapsible grouping of the rendered panel. A step may nest
+     *   `<zn-flow-filter>` declarations (each holding `<zn-flow-filter-field>`s, whose operator /
+     *   option choices are nested `<zn-flow-operator>` / `<zn-flow-option>` elements) — or set a
+     *   `branch-filters` JSON attribute — to drive the built-in branch conditions editor.
      * @slot header-left - Actions shown on the left of the header bar (e.g. Close / Undo All Changes).
      * @slot header-right - Actions shown on the right of the header bar (e.g. Apply Changes).
      * @slot sidebar - Extra right-panel content (status, version history), below the configuration errors.
@@ -9002,6 +9200,7 @@ declare module "components/flow-builder/flow-builder.component" {
             'zn-input': typeof ZnInput;
             'zn-tabs': typeof ZnTabs;
             'zn-navbar': typeof ZnNavbar;
+            'zn-flow-branch-conditions': typeof ZnFlowBranchConditions;
             'zn-flow-canvas': typeof ZnFlowCanvas;
             'zn-flow-step-group': typeof ZnFlowStepGroup;
         };
@@ -9011,6 +9210,12 @@ declare module "components/flow-builder/flow-builder.component" {
         subheading: string;
         /** Node ids flagged as having configuration errors (drives the red node styling). */
         errorNodes: string[];
+        /**
+         * Auto-save the flow to localStorage (1-day TTL). Omit to disable. A bare
+         * `auto-save` saves every 5 minutes; a numeric value sets the interval in
+         * minutes (`auto-save="5"`). Restore with `restoreAutoSave()`.
+         */
+        autoSave: number | null;
         /** Optional hint shown beneath each steps-panel tab. */
         entrypointsHint: string;
         triggersHint: string;
@@ -9025,6 +9230,9 @@ declare module "components/flow-builder/flow-builder.component" {
         /** The steps-panel tab currently shown; the search only filters this tab. */
         private _activeGroup;
         private readonly _hasSlot;
+        /** Side panels tucked away via their edge chevrons. */
+        private _stepsCollapsed;
+        private _sideCollapsed;
         /** The node being relocated via the MOVE menu action, if any. */
         private _movingNodeId;
         /** The "+" picker popover target (an open output, or a wire to insert into), if open. */
@@ -9047,10 +9255,52 @@ declare module "components/flow-builder/flow-builder.component" {
         private get _listeners();
         connectedCallback(): void;
         disconnectedCallback(): void;
+        private _autoSaveTimer;
+        private _statusTimer;
+        private _justSavedTimer;
+        /** Guards the restore prompt from re-triggering on restoreAutoSave's own setState. */
+        private _restoring;
+        /** Epoch of the newest auto-save (also picked up from storage on start). */
+        private _lastSavedAt;
+        /** Briefly true right after a save — flashes "Auto-saved" in the status pill. */
+        private _justSaved;
+        /** Re-render clock for the "last saved Xm ago" label. */
+        private _statusNow;
+        /** A fresh auto-save differing from the loaded flow — offer to restore it. */
+        private _restorePrompt;
+        /** localStorage key for this builder's auto-saves — its id, else its heading. */
+        private get _autoSaveKey();
+        private _stopAutoSave;
+        private _restartAutoSave;
+        /** An empty canvas is never saved — it would clobber a stored flow with nothing. */
+        private _autoSaveTick;
+        /** The stored auto-save, purging it when past its TTL (or unreadable). */
+        private _readAutoSave;
+        /** Load the auto-saved flow, if one exists within the 1-day TTL. */
+        restoreAutoSave(): boolean;
+        /**
+         * A flow was just loaded — when a fresh auto-save differs from it, ask the
+         * user whether to pick up their draft instead.
+         */
+        private _offerRestoreIfNewer;
         private _onKeyDown;
         protected willUpdate(changed: PropertyValues): void;
         protected firstUpdated(changed: PropertyValues): void;
         private static _parsePorts;
+        /** Parse an operator / option list: a JSON array (strings or `{value,label}`) or comma-separated values. */
+        private static _parseFilterOptions;
+        /**
+         * Option list declared as child elements — the tidy form. The element's text
+         * is the label; a `value` attribute overrides the stored value:
+         * `<zn-flow-operator value="gte">at least</zn-flow-operator>`.
+         */
+        private static _nestedFilterOptions;
+        private static _filterFieldFromEl;
+        /**
+         * A step's branch filters: the `branch-filters` JSON attribute, or nested
+         * `<zn-flow-filter>` declarations each holding `<zn-flow-filter-field>`s.
+         */
+        private static _parseBranchFilters;
         private _typeFromStep;
         /** Register a FlowNodeType for every slotted <zn-flow-step>. */
         private _registerSlottedTypes;
@@ -9060,6 +9310,12 @@ declare module "components/flow-builder/flow-builder.component" {
         setState(next: FlowState): void;
         get value(): string;
         set value(json: string);
+        /**
+         * The full flow state — nodes with their positions, connections, branch
+         * data, and notes — ready for persisting. Lets `JSON.stringify(builder)`
+         * serialize the flow directly, e.g. as a POST body.
+         */
+        toJSON(): FlowState;
         undo: () => void;
         redo: () => void;
         /**
@@ -9141,10 +9397,14 @@ declare module "components/flow-builder/flow-builder.component" {
         private _renderInspector;
         /** Replace one of the node's output ports (per-instance override), keeping its id. */
         private _updateBranch;
+        /** Persist the built-in conditions editor's draft onto the branch and close it. Undoable. */
+        private _saveBranchConditions;
         private _renderBranchEditor;
         private _renderRightPanel;
         private _renderHeader;
         private _renderSidebar;
+        private _renderAutoSaveStatus;
+        private _renderRestorePrompt;
         private _renderPicker;
         private _pickType;
         render(): import("lit-html").TemplateResult<1>;
@@ -9226,7 +9486,8 @@ declare module "components/flow-builder/modules/flow-step/flow-step.component" {
      * @event flow-step-drag - Emitted on dragstart with `detail.type`, so the builder can preview the drop.
      * @event flow-step-drag-end - Emitted on dragend.
      *
-     * @slot - The step's label.
+     * @slot - The step's label. May also hold `<zn-flow-filter>` declarations (never displayed)
+     *   that drive the flow builder's built-in branch conditions editor.
      *
      * @csspart base - The row.
      */
@@ -9265,6 +9526,386 @@ declare module "components/flow-builder/modules/flow-step/index" {
         }
     }
 }
+declare module "components/page-builder/page.types" {
+    import type { TemplateResult } from 'lit';
+    /** A section placed on a page. */
+    export interface PageSection {
+        id: string;
+        type: string;
+        /** Overrides the type label when set (per-instance rename). */
+        label?: string;
+        /** Section content, keyed by field name (the inspector's `name` attributes). */
+        data: Record<string, unknown>;
+        /** Slot contents for container sections, sized to the type's `slots`. Empty slots are null. */
+        children?: (PageSection | null)[];
+    }
+    /** The complete serialisable state of a page. Order = render order. */
+    export interface PageState {
+        sections: PageSection[];
+    }
+    /**
+     * Describes a kind of section that can be placed on a page. Declared via
+     * `<template type slot="config">` children or registered programmatically —
+     * the palette and inspector are driven entirely by registered types.
+     */
+    export interface PageSectionType {
+        /** Unique key, persisted on every placed section. */
+        type: string;
+        label: string;
+        /** zn-icon `src`. */
+        icon?: string;
+        iconLibrary?: string;
+        /** Accent colour for the icon tile — any CSS colour. */
+        color?: string;
+        /** Collapsible palette category. */
+        category?: string;
+        description?: string;
+        /** Inspector form markup (from a slotted `<template slot="config">`). */
+        configTemplate?: HTMLTemplateElement;
+        /** Programmatic inspector body — takes precedence over `configTemplate`. */
+        renderConfig?: (section: PageSection, update: (data: Record<string, unknown>) => void) => TemplateResult;
+        /**
+         * Number of child slots this section offers on the canvas (a container tile);
+         * rendered as a 3-column grid. Containers cannot be placed inside other containers.
+         */
+        slots?: number;
+        /** Section type keys allowed in this container's slots. Omit to allow any non-container type. */
+        accepts?: string[];
+    }
+    /** A container section's slot contents, padded/truncated to the type's slot count. */
+    export function sectionChildren(section: PageSection, type: PageSectionType): (PageSection | null)[];
+    /** Drag-and-drop MIME carrying a section type id from the palette to the canvas. */
+    export const PAGE_TYPE_MIME = "application/x-zn-page-type";
+    /** Drag-and-drop MIME carrying a placed section's id when reordering. */
+    export const PAGE_SECTION_MIME = "application/x-zn-page-section";
+    export function emptyPageState(): PageState;
+    /** Unique-enough id for a new section, stable across edits once assigned. */
+    export function generateSectionId(): string;
+    /** Card summary: the section's first non-empty string value, else the type description. */
+    export function sectionSummary(section: PageSection, type?: PageSectionType): string;
+}
+declare module "components/page-builder/page-registry" {
+    import type { PageSectionType } from "components/page-builder/page.types";
+    /**
+     * Holds the set of {@link PageSectionType}s available to a page builder.
+     * Register custom section types here (or via slotted templates) and the
+     * palette and inspector pick them up automatically.
+     */
+    export class PageSectionRegistry {
+        private types;
+        register(type: PageSectionType): this;
+        registerAll(types: PageSectionType[]): this;
+        get(type: string): PageSectionType | undefined;
+        has(type: string): boolean;
+        all(): PageSectionType[];
+        /** Map of category name -> types, preserving insertion order. Uncategorised under ''. */
+        categories(): Map<string, PageSectionType[]>;
+        clear(): void;
+    }
+}
+declare module "components/page-builder/modules/page-palette-item/page-palette-item.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnIcon from "components/icon/index";
+    /**
+     * @summary A draggable palette entry in `<zn-page-builder>`, representing a registered
+     *   section type. Drag it onto the canvas to add that section. Unlike zn-page-section-card
+     *   (host-wired), this element wires its own drag behaviour so it is draggable standalone.
+     * @documentation https://zinc.style/components/page-palette-item
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-icon
+     *
+     * @csspart base - The card row.
+     */
+    export default class ZnPagePaletteItem extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-icon': typeof ZnIcon;
+        };
+        /** The section type id this item creates when dropped. */
+        type: string;
+        label: string;
+        description: string;
+        icon: string;
+        iconLibrary: string;
+        color: string;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        protected updated(changed: PropertyValues): void;
+        private _onDragStart;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/page-builder/modules/page-palette-item/index" {
+    import ZnPagePaletteItem from "components/page-builder/modules/page-palette-item/page-palette-item.component";
+    export * from "components/page-builder/modules/page-palette-item/page-palette-item.component";
+    export default ZnPagePaletteItem;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-page-palette-item': ZnPagePaletteItem;
+        }
+    }
+}
+declare module "components/page-builder/modules/page-section-card/page-section-card.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnButton from "components/button/index";
+    import ZnIcon from "components/icon/index";
+    /**
+     * @summary A section card on the `<zn-page-builder>` canvas: icon tile, label, one-line
+     *   summary, and hover actions (duplicate / remove). Purely presentational — the builder
+     *   wires up dragging, focus, selection and keyboard handling on the host element.
+     * @documentation https://zinc.style/components/page-section-card
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-button
+     * @dependency zn-icon
+     *
+     * @event page-card-duplicate - The duplicate action was clicked (internal; not in the typed event map).
+     * @event page-card-remove - The remove action was clicked (internal; not in the typed event map).
+     *
+     * @csspart base - The card row.
+     */
+    export default class ZnPageSectionCard extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-button': typeof ZnButton;
+            'zn-icon': typeof ZnIcon;
+        };
+        label: string;
+        summary: string;
+        icon: string;
+        iconLibrary: string;
+        color: string;
+        selected: boolean;
+        /** Set when the section's type has no registered template — renders greyed. */
+        unknown: boolean;
+        protected updated(changed: PropertyValues): void;
+        private _action;
+        private _actionKeydown;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/page-builder/modules/page-section-card/index" {
+    import ZnPageSectionCard from "components/page-builder/modules/page-section-card/page-section-card.component";
+    export * from "components/page-builder/modules/page-section-card/page-section-card.component";
+    export default ZnPageSectionCard;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-page-section-card': ZnPageSectionCard;
+        }
+    }
+}
+declare module "components/page-builder/page-builder.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import { type PageSection, type PageSectionType, type PageState } from "components/page-builder/page.types";
+    import ZincElement from "internal/zinc-element";
+    import ZnCollapsible from "components/collapsible/index";
+    import ZnIcon from "components/icon/index";
+    import ZnInput from "components/input/index";
+    import ZnPagePaletteItem from "components/page-builder/modules/page-palette-item/index";
+    import ZnPageSectionCard from "components/page-builder/modules/page-section-card/index";
+    /**
+     * @summary A config-driven page composer: a palette of predefined section types, a linear
+     *   canvas of section cards, and an inspector for editing each section's content.
+     * @documentation https://zinc.style/components/page-builder
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-collapsible
+     * @dependency zn-icon
+     * @dependency zn-input
+     * @dependency zn-page-palette-item
+     * @dependency zn-page-section-card
+     *
+     * @event zn-page-change - Emitted whenever the page state changes. `event.detail.state` is the new PageState.
+     * @event zn-page-selection-change - Emitted when the selected section changes. `event.detail.sectionId`.
+     *
+     * @slot config - `<template type="…">` declarations; never displayed. Each template's attributes
+     *   (type, label, icon, icon-library, color, category, description, slots, accepts) declare a
+     *   palette entry and its content declares the inspector form for that type. `slots` makes the
+     *   section a container with that many child slots; `accepts` is a comma-separated list of the
+     *   type keys its slots allow.
+     * @slot header-left - Actions shown on the left of the header bar.
+     * @slot header-right - Actions shown on the right of the header bar.
+     *
+     * @csspart base - The grid wrapper.
+     * @csspart header - The full-width header action bar (only rendered when header slots are filled).
+     * @csspart palette - The left palette panel.
+     * @csspart canvas - The centre section-card canvas.
+     * @csspart inspector - The right panel while a section is selected.
+     */
+    export default class ZnPageBuilder extends ZincElement {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-collapsible': typeof ZnCollapsible;
+            'zn-icon': typeof ZnIcon;
+            'zn-input': typeof ZnInput;
+            'zn-page-palette-item': typeof ZnPagePaletteItem;
+            'zn-page-section-card': typeof ZnPageSectionCard;
+        };
+        /** The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning. */
+        config: string;
+        heading: string;
+        subheading: string;
+        /** Section types to make available, registered into the internal registry. */
+        sectionTypes: PageSectionType[];
+        /** Collapses the left palette. Auto-set when the builder becomes narrow. */
+        paletteCollapsed: boolean;
+        /** Collapses the inspector while a section is selected. */
+        inspectorCollapsed: boolean;
+        /**
+         * Auto-save the page to localStorage (1-day TTL). Omit to disable. A bare
+         * `auto-save` saves every 5 minutes; a numeric value sets the interval in
+         * minutes (`auto-save="2"`). Restore with `restoreAutoSave()`.
+         */
+        autoSave: number | null;
+        private registry;
+        private _state;
+        private _selectedId;
+        private _search;
+        /** Index of the drop zone whose "+" type picker is open, if any. */
+        private _pickerIndex;
+        private _dragOverIndex;
+        /** The container slot a drag is currently over, if any. */
+        private _slotDragOver;
+        /** The container slot whose "+" type picker is open, if any. */
+        private _slotPicker;
+        /** The stamped config form for the selected section; rebuilt on selection change. */
+        private _form;
+        private readonly _hasSlot;
+        private _history;
+        private _redoStack;
+        /** A deep copy of the current page state. */
+        get state(): PageState;
+        /** Replaces the page state wholesale (does not emit zn-page-change). */
+        set state(next: PageState);
+        handleConfigChange(): void;
+        handleSectionTypesChange(): void;
+        registerSectionType(type: PageSectionType): this;
+        registerSectionTypes(types: PageSectionType[]): this;
+        /**
+         * Auto-collapses the palette when the builder crosses into narrow — only on the
+         * crossing, so re-expanding while narrow stays a user choice.
+         */
+        private _wasNarrow;
+        private _resizeObserver;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        private _autoSaveTimer;
+        private _statusTimer;
+        private _justSavedTimer;
+        /** Guards the restore prompt from re-triggering on restoreAutoSave's own state install. */
+        private _restoring;
+        /** Epoch of the newest auto-save (also picked up from storage on start). */
+        private _lastSavedAt;
+        /** Briefly true right after a save — flashes "Auto-saved" in the status pill. */
+        private _justSaved;
+        /** Re-render clock for the "last saved Xm ago" label. */
+        private _statusNow;
+        /** A fresh auto-save differing from the loaded page — offer to restore it. */
+        private _restorePrompt;
+        /** localStorage key for this builder's auto-saves — its id, else its heading. */
+        private get _autoSaveKey();
+        private _stopAutoSave;
+        private _restartAutoSave;
+        /** An empty page is never saved — it would clobber a stored page with nothing. */
+        private _autoSaveTick;
+        /** The stored auto-save, purging it when past its TTL (or unreadable). */
+        private _readAutoSave;
+        /** Load the auto-saved page, if one exists within the 1-day TTL. */
+        restoreAutoSave: () => boolean;
+        /**
+         * A page was just loaded — when a fresh auto-save differs from it, ask the
+         * user whether to pick up their draft instead.
+         */
+        private _offerRestoreIfNewer;
+        protected willUpdate(changed: PropertyValues): void;
+        private _typeFromTemplate;
+        private _registerSlottedTemplates;
+        /** Normalises and installs an externally provided state; resets selection. */
+        private _applyExternalState;
+        /** Finds a section by id, searching top-level sections and slotted children. */
+        private _findSection;
+        /** New sections array with the section patched wherever it lives (top level or slot). */
+        private _patchSection;
+        /** Detaches a section wherever it lives: removed from the top level, or its slot nulled. */
+        private _extract;
+        /** Installs a new state from a user edit and notifies listeners. */
+        private _commit;
+        private _selectedSection;
+        private _select;
+        private _pushHistory;
+        undo: () => void;
+        redo: () => void;
+        /** Adds a section of a registered type at `index` (default: end). Returns null for unknown types. */
+        addSection(type: string, index?: number): PageSection | null;
+        /** Adds a new section of a registered type into a container's slot. Returns null if not allowed. */
+        addSectionToSlot(type: string, containerId: string, slotIndex: number): PageSection | null;
+        private _removeSection;
+        private _duplicateSection;
+        /** Moves a section (top-level or slotted) to a top-level position. */
+        private _moveSection;
+        /**
+         * Moves a section into a container's slot. Dropping onto an occupied slot swaps
+         * the two children (slot-to-slot reordering); top-level sections and containers
+         * only enter empty slots / never enter slots respectively.
+         */
+        private _moveToSlot;
+        private _onCardDragStart;
+        /** Whether a drag carries one of the builder's own payloads. */
+        private _isPageDrag;
+        private _onSlotDragOver;
+        private _onSlotDrop;
+        private _onZoneDragOver;
+        private _onZoneDrop;
+        private _onCanvasDragOver;
+        private _onCanvasDrop;
+        private _onCardKeydown;
+        private _renderPalette;
+        private _renderPaletteItem;
+        private _renderAutoSaveStatus;
+        private _renderRestorePrompt;
+        private _renderCanvas;
+        /** The one card template both the page list and slot cells render. */
+        private _renderSectionCard;
+        private _renderCard;
+        private _renderSlot;
+        /** Types allowed in a container's slots: non-containers, filtered by its accepts list. */
+        private _slotTypes;
+        /** The one type-picker template both drop zones and slot cells render. */
+        private _renderTypePicker;
+        private _renderDropZone;
+        /**
+         * Clones the selected type's config template into a live form and prefills each
+         * `[name]` control from the section's data. The element is rendered directly by
+         * Lit (`${this._form}`) so user-entered values survive unrelated re-renders.
+         */
+        private _buildInspectorForm;
+        private _isBooleanControl;
+        /** Handles change/input events bubbling from stamped form controls. */
+        private _onInspectorInput;
+        private _updateSectionData;
+        private _renameSection;
+        private _renderInspector;
+        render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/page-builder/index" {
+    import ZnPageBuilder from "components/page-builder/page-builder.component";
+    export * from "components/page-builder/page-builder.component";
+    export * from "components/page-builder/page.types";
+    export * from "components/page-builder/page-registry";
+    export default ZnPageBuilder;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-page-builder': ZnPageBuilder;
+        }
+    }
+}
 declare module "utilities/form" {
     export { clearFormStoreValues } from "internal/form";
 }
@@ -9410,6 +10051,27 @@ declare module "events/zn-flow-connect" {
         }
     }
 }
+declare module "events/zn-page-change" {
+    import type { PageState } from "components/page-builder/page.types";
+    export type ZnPageChangeEvent = CustomEvent<{
+        state: PageState;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-page-change': ZnPageChangeEvent;
+        }
+    }
+}
+declare module "events/zn-page-selection-change" {
+    export type ZnPageSelectionChangeEvent = CustomEvent<{
+        sectionId: string | null;
+    }>;
+    global {
+        interface GlobalEventHandlersEventMap {
+            'zn-page-selection-change': ZnPageSelectionChangeEvent;
+        }
+    }
+}
 declare module "events/events" {
     export type { ZnAfterHideEvent } from "events/zn-after-hide";
     export type { ZnAfterShowEvent } from "events/zn-after-show";
@@ -9428,6 +10090,8 @@ declare module "events/events" {
     export type { ZnFlowChangeEvent } from "events/zn-flow-change";
     export type { ZnFlowSelectionChangeEvent } from "events/zn-flow-selection-change";
     export type { ZnFlowConnectEvent } from "events/zn-flow-connect";
+    export type { ZnPageChangeEvent } from "events/zn-page-change";
+    export type { ZnPageSelectionChangeEvent } from "events/zn-page-selection-change";
 }
 declare module "zinc" {
     export { default as Button } from "components/button/index";
@@ -9535,6 +10199,10 @@ declare module "zinc" {
     export { default as FlowSteps } from "components/flow-builder/modules/flow-steps/index";
     export { default as FlowStepGroup } from "components/flow-builder/modules/flow-step-group/index";
     export { default as FlowStep } from "components/flow-builder/modules/flow-step/index";
+    export { default as FlowBranchConditions } from "components/flow-builder/modules/flow-branch-conditions/index";
+    export { default as PageBuilder } from "components/page-builder/index";
+    export { default as PagePaletteItem } from "components/page-builder/modules/page-palette-item/index";
+    export { default as PageSectionCard } from "components/page-builder/modules/page-section-card/index";
     export { default as ZincElement } from "internal/zinc-element";
     export * from "utilities/on";
     export * from "utilities/query";