@uipath/apollo-wind 2.34.0 → 2.36.0

package/dist/templates/Delegate/template-delegate.d.ts

@@ -14,13 +14,10 @@ export interface DelegateTemplateProps {
     selectedChildId?: string;
     /** Callback when a nav child is selected */
     onChildSelect?: (childId: string) => void;
-    /** Main content to render in the Canvas */
+    /** Main content */
     children?: React.ReactNode;
 }
 /**
- * Full-page Delegate template composed of a DelegatePanel and Canvas.
- *
- * This is a convenience wrapper — for more control you can use
- * `DelegatePanel` and `Canvas` directly.
+ * Full-page Delegate template composed of a DelegatePanel and main content area.
  */
 export declare function DelegateTemplate({ className, theme, defaultPanelOpen, navItems, selectedChildId, onChildSelect, children, }: DelegateTemplateProps): import("react/jsx-runtime").JSX.Element;

package/dist/templates/Flow/template-flow.d.ts

@@ -15,16 +15,6 @@ export interface FlowTemplateProps {
     chatMessages?: FlowPanelChatMessage[];
     /** Custom content for the expanded panel (overrides default chat) */
     expandedContent?: React.ReactNode;
-    /** Flow name displayed in the properties bar */
-    flowName?: string;
-    /** Flow type label (e.g. "Workflow") */
-    flowType?: string;
-    /** Whether the properties panel starts expanded */
-    defaultPropertiesExpanded?: boolean;
-    /** Node name for the expanded properties panel */
-    propertiesNodeName?: string;
-    /** Node type for the expanded properties panel */
-    propertiesNodeType?: string;
     /** Whether to show the simple properties panel (right side) */
     defaultPropertiesSimple?: boolean;
     /** Title for the simple properties panel header */
@@ -37,6 +27,18 @@ export interface FlowTemplateProps {
     propertiesSimpleSections?: PropertiesSimpleSection[];
     /** Canvas content */
     children?: React.ReactNode;
+    /** Hide the left navigation rail and expanded assistant panel. */
+    hideLeftPanel?: boolean;
+    /** Control rendered at the top right of the canvas. */
+    topRightControl?: React.ReactNode;
+    /** Control rendered at the bottom center of the canvas. */
+    bottomCenterControl?: React.ReactNode;
+    /** Control rendered at the bottom right of the canvas. */
+    bottomRightControl?: React.ReactNode;
+    /** Custom docked panel rendered to the right of the canvas. */
+    rightPanel?: React.ReactNode;
+    /** Custom docked panel rendered across the bottom of the workspace. */
+    bottomPanel?: React.ReactNode;
     /**
      * When true, renders only the left sidebar (icon rail) and the canvas —
      * no properties bar, no toolbars, no right-side panels.
@@ -48,10 +50,8 @@ export interface FlowTemplateProps {
  *
  * Composed of:
  * - **FlowPanel** — 60px icon rail + optional 420px expanded chat panel
- * - **Canvas** — main content area (reuses Delegate Canvas)
- * - **FlowProperties** (collapsed) — bar top-right of canvas (default)
- * - **FlowProperties** (expanded) — full properties panel on the right (when expanded)
- * - **FlowCanvasToolbar** — bottom-center of canvas
- * - **FlowViewToolbar** — bottom-right of canvas
+ * - Full-bleed canvas content area
+ * - Consumer-supplied controls at top-right, bottom-center, and bottom-right
+ * - Consumer-supplied docked panels at right or bottom
  */
-export declare function FlowTemplate({ className, theme, navItems, defaultPanelOpen, chatMessages, expandedContent, flowName, flowType, defaultPropertiesExpanded, propertiesNodeName, propertiesNodeType, defaultPropertiesSimple, propertiesSimpleTitle, propertiesSimpleIcon, propertiesSimpleFields, propertiesSimpleSections, children, blank, }: FlowTemplateProps): import("react/jsx-runtime").JSX.Element;
+export declare function FlowTemplate({ className, theme, navItems, defaultPanelOpen, chatMessages, expandedContent, defaultPropertiesSimple, propertiesSimpleTitle, propertiesSimpleIcon, propertiesSimpleFields, propertiesSimpleSections, children, blank, hideLeftPanel, topRightControl, bottomCenterControl, bottomRightControl, rightPanel, bottomPanel, }: FlowTemplateProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.34.0",
+  "version": "2.36.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",

package/dist/components/custom/canvas.cjs

@@ -1,44 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    Canvas: ()=>Canvas
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function Canvas({ className, children }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col overflow-auto bg-surface', className),
-        children: children
-    });
-}
-exports.Canvas = __webpack_exports__.Canvas;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Canvas"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/custom/canvas.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface CanvasProps {
-    className?: string;
-    children?: React.ReactNode;
-}
-/**
- * Main content canvas for Delegate templates.
- *
- * Provides the dark background surface that sits alongside the DelegatePanel.
- * Content placed inside the Canvas can be laid out freely — future iterations
- * will add optional layout guidelines (max-width constraints, centered
- * content zones, padding presets, etc.).
- */
-export declare function Canvas({ className, children }: CanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/canvas.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { cn } from "../../lib/index.js";
-function Canvas({ className, children }) {
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-1 flex-col overflow-auto bg-surface', className),
-        children: children
-    });
-}
-export { Canvas };

package/dist/components/custom/flow-node-expandable.cjs

@@ -1,81 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    FlowNodeExpandable: ()=>FlowNodeExpandable
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-const external_lucide_react_namespaceObject = require("lucide-react");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
-    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
-    const isHover = 'hover' === forceState;
-    const isSelectedHover = 'selected-hover' === forceState;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex items-center justify-between",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex items-center gap-2.5",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
-                                children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
-                                    className: "h-5 w-5 text-foreground-muted"
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-sm font-medium text-foreground whitespace-nowrap",
-                                children: title
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                        type: "button",
-                        className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                        onClick: onToggle,
-                        "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                            className: (0, index_cjs_namespaceObject.cn)('h-4 w-4', expanded && 'rotate-180')
-                        })
-                    })
-                ]
-            }),
-            expanded && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "flex-1 min-h-0 rounded-lg bg-surface"
-            })
-        ]
-    });
-}
-exports.FlowNodeExpandable = __webpack_exports__.FlowNodeExpandable;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "FlowNodeExpandable"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/custom/flow-node-expandable.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-export interface FlowNodeExpandableProps {
-    className?: string;
-    /** Node title */
-    title?: string;
-    /** Icon rendered in the node header */
-    icon?: React.ReactNode;
-    /** Whether the node is expanded */
-    expanded?: boolean;
-    /** Whether the node is selected */
-    selected?: boolean;
-    /**
-     * Force a specific visual state — used for Storybook stories and snapshots.
-     * In normal use, hover is driven by CSS group-hover.
-     */
-    forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
-    /** Callback when expand/collapse chevron is toggled */
-    onToggle?: () => void;
-}
-/**
- * Expandable card-style canvas node for the Flow template.
- *
- * Collapsed: 360px wide, header only.
- * Expanded: 360×360px, header + content area.
- * Shares the same 4-state border pattern as FlowNode.
- */
-export declare function FlowNodeExpandable({ className, title, icon, expanded, selected, forceState, onToggle, }: FlowNodeExpandableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-node-expandable.js

@@ -1,47 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { ChevronDown, Workflow } from "lucide-react";
-import { cn } from "../../lib/index.js";
-function FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
-    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
-    const isHover = 'hover' === forceState;
-    const isSelectedHover = 'selected-hover' === forceState;
-    return /*#__PURE__*/ jsxs("div", {
-        className: cn('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex items-center justify-between",
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex items-center gap-2.5",
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
-                                children: icon ?? /*#__PURE__*/ jsx(Workflow, {
-                                    className: "h-5 w-5 text-foreground-muted"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-sm font-medium text-foreground whitespace-nowrap",
-                                children: title
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                        onClick: onToggle,
-                        "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
-                        children: /*#__PURE__*/ jsx(ChevronDown, {
-                            className: cn('h-4 w-4', expanded && 'rotate-180')
-                        })
-                    })
-                ]
-            }),
-            expanded && /*#__PURE__*/ jsx("div", {
-                className: "flex-1 min-h-0 rounded-lg bg-surface"
-            })
-        ]
-    });
-}
-export { FlowNodeExpandable };

package/dist/components/custom/flow-node.cjs

@@ -1,74 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    FlowNode: ()=>FlowNode
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-const external_lucide_react_namespaceObject = require("lucide-react");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
-    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
-    const isHover = 'hover' === forceState;
-    const isSelectedHover = 'selected-hover' === forceState;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-        type: "button",
-        className: (0, index_cjs_namespaceObject.cn)('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
-        onClick: onClick,
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: (0, index_cjs_namespaceObject.cn)('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
-                    children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
-                        className: "h-10 w-10 text-foreground-muted",
-                        strokeWidth: 1.4
-                    })
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex flex-col items-center",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
-                        children: title
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-center text-[12px] leading-[18px] text-foreground-muted",
-                        children: subtitle
-                    })
-                ]
-            })
-        ]
-    });
-}
-exports.FlowNode = __webpack_exports__.FlowNode;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "FlowNode"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/custom/flow-node.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-export interface FlowNodeProps {
-    className?: string;
-    /** Node title */
-    title?: string;
-    /** Node subtitle */
-    subtitle?: string;
-    /** Icon rendered inside the inner shape */
-    icon?: React.ReactNode;
-    /** Whether the node is in selected state */
-    selected?: boolean;
-    /**
-     * Force a specific visual state — used for Storybook stories and snapshots.
-     * In normal use, hover is driven by CSS group-hover.
-     */
-    forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
-    onClick?: () => void;
-}
-/**
- * Icon-centric canvas node for the Flow template.
- *
- * 96×96 outer ring → 80×80 inner rounded shape → 40×40 icon.
- * Title + subtitle centered below.
- */
-export declare function FlowNode({ className, title, subtitle, icon, selected, forceState, onClick, }: FlowNodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-node.js

@@ -1,40 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Bot } from "lucide-react";
-import { cn } from "../../lib/index.js";
-function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
-    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
-    const isHover = 'hover' === forceState;
-    const isSelectedHover = 'selected-hover' === forceState;
-    return /*#__PURE__*/ jsxs("button", {
-        type: "button",
-        className: cn('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
-        onClick: onClick,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: cn('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
-                    children: icon ?? /*#__PURE__*/ jsx(Bot, {
-                        className: "h-10 w-10 text-foreground-muted",
-                        strokeWidth: 1.4
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-col items-center",
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
-                        children: title
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-center text-[12px] leading-[18px] text-foreground-muted",
-                        children: subtitle
-                    })
-                ]
-            })
-        ]
-    });
-}
-export { FlowNode };

package/dist/components/custom/flow-properties-bar.cjs

@@ -1,103 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    PropertiesBar: ()=>PropertiesBar
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_lucide_react_namespaceObject = require("lucide-react");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function PropertiesBar({ className, flowName = 'Invoice processing', flowType = 'Workflow', activeTab = 'properties', onTabChange, onExpand }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex h-16 items-center justify-between rounded-2xl bg-surface-raised px-4', className),
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex items-center gap-4",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
-                            className: "h-6 w-6 text-brand-foreground"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex flex-col",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
-                                children: flowName
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
-                                children: flowType
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                        type: "button",
-                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover', 'properties' === activeTab && 'text-foreground-subtle'),
-                        onClick: ()=>{
-                            onTabChange?.('properties');
-                            onExpand?.();
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.TableProperties, {
-                                className: "h-5 w-5"
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                children: "Properties"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                        type: "button",
-                        className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors', 'variables' === activeTab && 'text-foreground-subtle'),
-                        onClick: ()=>onTabChange?.('variables'),
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
-                                className: "h-5 w-5"
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                children: "Variables"
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-exports.PropertiesBar = __webpack_exports__.PropertiesBar;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "PropertiesBar"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/custom/flow-properties-bar.d.ts

@@ -1,21 +0,0 @@
-export interface PropertiesBarProps {
-    className?: string;
-    /** Flow name shown in the bar */
-    flowName?: string;
-    /** Flow type label (e.g. "Workflow") */
-    flowType?: string;
-    /** Active tab: 'properties' | 'variables' */
-    activeTab?: 'properties' | 'variables';
-    /** Callback when tab changes */
-    onTabChange?: (tab: 'properties' | 'variables') => void;
-    /** Callback when the properties tab is clicked to expand the panel */
-    onExpand?: () => void;
-}
-/**
- * Collapsed properties bar for the Flow template.
- *
- * Anchored to the top-right of the canvas. Shows flow name/type on the left
- * and Properties/Variables tab buttons on the right. A future update will
- * introduce the expanded state.
- */
-export declare function PropertiesBar({ className, flowName, flowType, activeTab, onTabChange, onExpand, }: PropertiesBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-properties-bar.js

@@ -1,69 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { TableProperties, Variable, Workflow } from "lucide-react";
-import { cn } from "../../lib/index.js";
-function PropertiesBar({ className, flowName = 'Invoice processing', flowType = 'Workflow', activeTab = 'properties', onTabChange, onExpand }) {
-    return /*#__PURE__*/ jsxs("div", {
-        className: cn('flex h-16 items-center justify-between rounded-2xl bg-surface-raised px-4', className),
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex items-center gap-4",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
-                        children: /*#__PURE__*/ jsx(Workflow, {
-                            className: "h-6 w-6 text-brand-foreground"
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-col",
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
-                                children: flowName
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
-                                children: flowType
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1",
-                children: [
-                    /*#__PURE__*/ jsxs("button", {
-                        type: "button",
-                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover', 'properties' === activeTab && 'text-foreground-subtle'),
-                        onClick: ()=>{
-                            onTabChange?.('properties');
-                            onExpand?.();
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx(TableProperties, {
-                                className: "h-5 w-5"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                children: "Properties"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("button", {
-                        type: "button",
-                        className: cn('flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors', 'variables' === activeTab && 'text-foreground-subtle'),
-                        onClick: ()=>onTabChange?.('variables'),
-                        children: [
-                            /*#__PURE__*/ jsx(Variable, {
-                                className: "h-5 w-5"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                children: "Variables"
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-export { PropertiesBar };