@uipath/apollo-wind 0.10.0 → 0.11.0

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

@@ -0,0 +1,328 @@
+"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 ('undefined' != 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__, {
+    PropertiesExpanded: ()=>PropertiesExpanded
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const typography_cjs_namespaceObject = require("../../foundation/Future/typography.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const button_cjs_namespaceObject = require("../ui/button.cjs");
+function MiniTab({ label, active, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        className: (0, index_cjs_namespaceObject.cn)('flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5', active ? 'bg-surface text-foreground' : 'text-foreground-subtle'),
+        onClick: onClick,
+        children: label
+    });
+}
+function SectionHeader({ title }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex items-center gap-1 px-2 py-1",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex h-8 w-8 items-center justify-center rounded-xl",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
+                    className: "h-5 w-5 text-foreground-subtle"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-sm font-semibold leading-5 text-foreground",
+                children: title
+            })
+        ]
+    });
+}
+function CodeViewer({ lines, className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 gap-6 overflow-auto px-5 py-4 text-sm leading-6', className),
+        style: {
+            fontFamily: typography_cjs_namespaceObject.fontFamily.monospace
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex flex-col text-right text-foreground-subtle select-none",
+                children: lines.map((_, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: i + 1
+                    }, i))
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex flex-col whitespace-pre text-foreground-muted",
+                children: lines.map((line, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: line
+                    }, i))
+            })
+        ]
+    });
+}
+const codeLines = [
+    ' // AI Agent validates invoice data',
+    '// Checks for anomalies and fraud patterns',
+    '// Cross-references vendor database'
+];
+const inputJsonLines = [
+    '{',
+    '  "extracted": {',
+    '    "vendor": "Acme Corp",',
+    '    "amount": 1250,',
+    '    "date": "2024-01-15",',
+    '    "items": [',
+    '      {',
+    '        "description": "Professional Services",',
+    '        "amount": 1250',
+    '      }',
+    '    ]',
+    '  },',
+    '  "invoiceId": "INV-2024-001",',
+    '  "timestamp": "2026-01-28T19:51:41.085Z"'
+];
+const outputJsonLines = [
+    '{',
+    '  "isValid": true,',
+    '    "confidence": 0.96',
+    '}'
+];
+function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onTabChange, onClose }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex w-[930px] shrink-0 flex-col rounded-2xl bg-surface-raised', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between border-b border-border p-4",
+                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.Bot, {
+                                    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: nodeName
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
+                                        children: nodeType
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay 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-3 py-2 text-sm font-medium leading-5 transition-colors', 'properties' === activeTab ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle'),
+                                        onClick: ()=>onTabChange?.('properties'),
+                                        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-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'variables' === activeTab ? 'border border-border bg-surface text-foreground' : '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"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                size: "icon",
+                                variant: "ghost",
+                                className: "bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5",
+                                onClick: onClose,
+                                "aria-label": "Close properties",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between border-b border-border px-4 py-2",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                size: "icon",
+                                variant: "ghost",
+                                className: "bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5",
+                                "aria-label": "Toggle panel dock",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+                                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                                "aria-label": "Layout toggle",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        type: "button",
+                                        className: "flex h-8 w-8 items-center justify-center rounded-[10px] text-foreground-muted transition-colors hover:text-foreground",
+                                        "aria-label": "Columns layout",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Columns2, {
+                                            className: "h-5 w-5"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        type: "button",
+                                        className: "flex h-8 w-8 items-center justify-center rounded-[10px] border border-border bg-surface text-foreground",
+                                        "aria-label": "Rows layout",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Rows2, {
+                                            className: "h-5 w-5"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(button_cjs_namespaceObject.Button, {
+                        className: "bg-brand text-foreground-on-accent hover:bg-brand/90 font-semibold",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Play, {
+                                className: "h-4 w-4"
+                            }),
+                            "Run node"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-1 flex-col overflow-hidden border-b border-border",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SectionHeader, {
+                        title: "Code"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-1 px-2 pb-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                label: "Parameters"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                label: "Script",
+                                active: true
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                label: "Errors"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CodeViewer, {
+                        lines: codeLines
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-1 overflow-hidden",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex flex-1 flex-col overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SectionHeader, {
+                                title: "Input"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-1 px-2 pb-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "JSON",
+                                        active: true
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "Table"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "List"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CodeViewer, {
+                                lines: inputJsonLines
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "w-px bg-border-subtle"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex flex-1 flex-col overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SectionHeader, {
+                                title: "Output"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-1 px-2 pb-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "JSON",
+                                        active: true
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "Table"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MiniTab, {
+                                        label: "List"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CodeViewer, {
+                                lines: outputJsonLines
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.PropertiesExpanded = __webpack_exports__.PropertiesExpanded;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "PropertiesExpanded"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,21 @@
+export interface PropertiesExpandedProps {
+    className?: string;
+    /** Node name shown in the header */
+    nodeName?: string;
+    /** Node type label (e.g. "AI Agent") */
+    nodeType?: string;
+    /** Active top tab: 'properties' | 'variables' */
+    activeTab?: 'properties' | 'variables';
+    /** Callback when top tab is changed */
+    onTabChange?: (tab: 'properties' | 'variables') => void;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * Expanded properties panel for the Flow template.
+ *
+ * Shows full node details including header, toolbar, code section,
+ * and input/output split view. Sits on the right side of the canvas.
+ * Functionality will be built out in a future update.
+ */
+export declare function PropertiesExpanded({ className, nodeName, nodeType, activeTab, onTabChange, onClose, }: PropertiesExpandedProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,294 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bot, Columns2, GripVertical, PanelRightOpen, Play, Rows2, TableProperties, Variable, X } from "lucide-react";
+import { fontFamily } from "../../foundation/Future/typography.js";
+import { cn } from "../../lib/index.js";
+import { Button } from "../ui/button.js";
+function MiniTab({ label, active, onClick }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn('flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5', active ? 'bg-surface text-foreground' : 'text-foreground-subtle'),
+        onClick: onClick,
+        children: label
+    });
+}
+function SectionHeader({ title }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center gap-1 px-2 py-1",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex h-8 w-8 items-center justify-center rounded-xl",
+                children: /*#__PURE__*/ jsx(GripVertical, {
+                    className: "h-5 w-5 text-foreground-subtle"
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "text-sm font-semibold leading-5 text-foreground",
+                children: title
+            })
+        ]
+    });
+}
+function CodeViewer({ lines, className }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex flex-1 gap-6 overflow-auto px-5 py-4 text-sm leading-6', className),
+        style: {
+            fontFamily: fontFamily.monospace
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col text-right text-foreground-subtle select-none",
+                children: lines.map((_, i)=>/*#__PURE__*/ jsx("span", {
+                        children: i + 1
+                    }, i))
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col whitespace-pre text-foreground-muted",
+                children: lines.map((line, i)=>/*#__PURE__*/ jsx("span", {
+                        children: line
+                    }, i))
+            })
+        ]
+    });
+}
+const codeLines = [
+    ' // AI Agent validates invoice data',
+    '// Checks for anomalies and fraud patterns',
+    '// Cross-references vendor database'
+];
+const inputJsonLines = [
+    '{',
+    '  "extracted": {',
+    '    "vendor": "Acme Corp",',
+    '    "amount": 1250,',
+    '    "date": "2024-01-15",',
+    '    "items": [',
+    '      {',
+    '        "description": "Professional Services",',
+    '        "amount": 1250',
+    '      }',
+    '    ]',
+    '  },',
+    '  "invoiceId": "INV-2024-001",',
+    '  "timestamp": "2026-01-28T19:51:41.085Z"'
+];
+const outputJsonLines = [
+    '{',
+    '  "isValid": true,',
+    '    "confidence": 0.96',
+    '}'
+];
+function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onTabChange, onClose }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex w-[930px] shrink-0 flex-col rounded-2xl bg-surface-raised', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between border-b border-border p-4",
+                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(Bot, {
+                                    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: nodeName
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
+                                        children: nodeType
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                                children: [
+                                    /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'properties' === activeTab ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle'),
+                                        onClick: ()=>onTabChange?.('properties'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(TableProperties, {
+                                                className: "h-5 w-5"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: "Properties"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'variables' === activeTab ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle'),
+                                        onClick: ()=>onTabChange?.('variables'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(Variable, {
+                                                className: "h-5 w-5"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: "Variables"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "icon",
+                                variant: "ghost",
+                                className: "bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5",
+                                onClick: onClose,
+                                "aria-label": "Close properties",
+                                children: /*#__PURE__*/ jsx(X, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between border-b border-border px-4 py-2",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "icon",
+                                variant: "ghost",
+                                className: "bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5",
+                                "aria-label": "Toggle panel dock",
+                                children: /*#__PURE__*/ jsx(PanelRightOpen, {})
+                            }),
+                            /*#__PURE__*/ jsxs("fieldset", {
+                                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                                "aria-label": "Layout toggle",
+                                children: [
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        className: "flex h-8 w-8 items-center justify-center rounded-[10px] text-foreground-muted transition-colors hover:text-foreground",
+                                        "aria-label": "Columns layout",
+                                        children: /*#__PURE__*/ jsx(Columns2, {
+                                            className: "h-5 w-5"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        className: "flex h-8 w-8 items-center justify-center rounded-[10px] border border-border bg-surface text-foreground",
+                                        "aria-label": "Rows layout",
+                                        children: /*#__PURE__*/ jsx(Rows2, {
+                                            className: "h-5 w-5"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Button, {
+                        className: "bg-brand text-foreground-on-accent hover:bg-brand/90 font-semibold",
+                        children: [
+                            /*#__PURE__*/ jsx(Play, {
+                                className: "h-4 w-4"
+                            }),
+                            "Run node"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-1 flex-col overflow-hidden border-b border-border",
+                children: [
+                    /*#__PURE__*/ jsx(SectionHeader, {
+                        title: "Code"
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-1 px-2 pb-2",
+                        children: [
+                            /*#__PURE__*/ jsx(MiniTab, {
+                                label: "Parameters"
+                            }),
+                            /*#__PURE__*/ jsx(MiniTab, {
+                                label: "Script",
+                                active: true
+                            }),
+                            /*#__PURE__*/ jsx(MiniTab, {
+                                label: "Errors"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(CodeViewer, {
+                        lines: codeLines
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-1 overflow-hidden",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-1 flex-col overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ jsx(SectionHeader, {
+                                title: "Input"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-1 px-2 pb-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "JSON",
+                                        active: true
+                                    }),
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "Table"
+                                    }),
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "List"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(CodeViewer, {
+                                lines: inputJsonLines
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "w-px bg-border-subtle"
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-1 flex-col overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ jsx(SectionHeader, {
+                                title: "Output"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-1 px-2 pb-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "JSON",
+                                        active: true
+                                    }),
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "Table"
+                                    }),
+                                    /*#__PURE__*/ jsx(MiniTab, {
+                                        label: "List"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(CodeViewer, {
+                                lines: outputJsonLines
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { PropertiesExpanded };