@uipath/apollo-wind 0.10.0-pr219.4de07ef → 0.10.0-pr219.56d6495

package/dist/components/custom/canvas-studio.cjs

@@ -0,0 +1,133 @@
+"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__, {
+    StudioGrid: ()=>StudioGrid,
+    StudioCanvas: ()=>StudioCanvas,
+    StudioGridItem: ()=>StudioGridItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = external_react_namespaceObject.useState(0);
+    const itemRef = external_react_namespaceObject.useRef(null);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: itemRef,
+        className: (0, index_cjs_namespaceObject.cn)(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+exports.StudioCanvas = __webpack_exports__.StudioCanvas;
+exports.StudioGrid = __webpack_exports__.StudioGrid;
+exports.StudioGridItem = __webpack_exports__.StudioGridItem;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StudioCanvas",
+    "StudioGrid",
+    "StudioGridItem"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,99 @@
+import * as React from 'react';
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "p-4";
+    readonly md: "p-6";
+    readonly lg: "p-8";
+};
+type PaddingSize = keyof typeof paddingClasses;
+export interface StudioCanvasProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Outer padding applied to the scrollable area.
+     * @default 'md' (1.5rem / 24px)
+     */
+    padding?: PaddingSize;
+    /**
+     * Background of the canvas workspace.
+     * - `'raised'` — slightly elevated surface (default, differentiates from panels)
+     * - `'surface'` — base surface color
+     * - `'transparent'` — no background
+     */
+    background?: 'raised' | 'surface' | 'transparent';
+    /**
+     * When true, content fills the full canvas width instead of being
+     * centered in a 760px column. Use for data-dense layouts like tables.
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Center canvas for the Studio template.
+ *
+ * - Fills remaining horizontal space between panels (`flex-1 relative`)
+ * - Scrolls independently via `absolute inset-0 overflow-y-auto`
+ * - Centers content in a `w-[760px] max-w-full` column
+ * - `data-canvas` attribute allows `StudioGridItem` canvasResponsive tracking
+ *
+ * Usage:
+ * ```tsx
+ * <StudioCanvas>
+ *   <StudioGrid>
+ *     <StudioGridItem>...</StudioGridItem>
+ *   </StudioGrid>
+ * </StudioCanvas>
+ * ```
+ */
+export declare function StudioCanvas({ children, className, padding, background, fullWidth, }: StudioCanvasProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridProps {
+    children: React.ReactNode;
+    /** Number of columns in the grid. Default 12. */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Gap between grid cells. Default 'md'. */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Grid wrapper for use inside `StudioCanvas`.
+ *
+ * Defaults to a 12-column grid with md gap. Pair with `StudioGridItem`.
+ */
+export declare function StudioGrid({ children, cols, gap, className }: StudioGridProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridItemProps {
+    children: React.ReactNode;
+    /**
+     * Column span within the parent `StudioGrid`.
+     * Ignored if `className` already contains a `col-span-*` class,
+     * or if `canvasResponsive` is true (canvas width drives the span).
+     * @default 12
+     */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    className?: string;
+    /**
+     * Background of the grid item card.
+     * - `'surface'` — base surface color (default, card-like)
+     * - `'raised'` — elevated surface
+     * - `'transparent'` — no background
+     */
+    background?: 'surface' | 'raised' | 'transparent';
+    /** Padding inside the card. Default 'md'. */
+    padding?: PaddingSize;
+    /** Render a border and rounded corners around the card. Default true. */
+    border?: boolean;
+    /**
+     * When true, the item measures the nearest `[data-canvas]` ancestor width
+     * and overrides `cols` with a responsive span:
+     * - < 768px  → col-span-12 (full width)
+     * - < 1024px → col-span-6  (half width)
+     * - ≥ 1024px → col-span-3  (quarter width)
+     */
+    canvasResponsive?: boolean;
+}
+/**
+ * Grid cell for use inside `StudioGrid`.
+ *
+ * Renders a card-like container with configurable background, padding, and border.
+ * Set `canvasResponsive` to automatically resize based on the canvas width.
+ */
+export declare function StudioGridItem({ children, cols, className, background, padding, border, canvasResponsive, }: StudioGridItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/custom/canvas-studio.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/index.js";
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ jsx("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const itemRef = useRef(null);
+    useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ jsx("div", {
+        ref: itemRef,
+        className: cn(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+export { StudioCanvas, StudioGrid, StudioGridItem };

package/dist/components/custom/chat-prompt-suggestions.cjs

@@ -33,6 +33,7 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-start gap-2', className),
         children: suggestions.map((suggestion)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
                 className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
                 onClick: ()=>onSelect?.(suggestion),
                 children: suggestion.label

package/dist/components/custom/chat-prompt-suggestions.js

@@ -5,6 +5,7 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-col items-start gap-2', className),
         children: suggestions.map((suggestion)=>/*#__PURE__*/ jsx("button", {
+                type: "button",
                 className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
                 onClick: ()=>onSelect?.(suggestion),
                 children: suggestion.label

package/dist/components/custom/chat-steps-view.cjs

@@ -60,6 +60,7 @@ function StatItem({ value, label }) {
 }
 function ActionButton({ icon, label, onClick }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        type: "button",
         className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover",
         onClick: onClick,
         children: [

package/dist/components/custom/chat-steps-view.js

@@ -32,6 +32,7 @@ function StatItem({ value, label }) {
 }
 function ActionButton({ icon, label, onClick }) {
     return /*#__PURE__*/ jsxs("button", {
+        type: "button",
         className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover",
         onClick: onClick,
         children: [

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

@@ -61,6 +61,7 @@ function PropertiesBar({ className, flowName = 'Invoice processing', flowType =
                 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');
@@ -76,6 +77,7 @@ function PropertiesBar({ className, flowName = 'Invoice processing', flowType =
                         ]
                     }),
                     /*#__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: [

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

@@ -33,6 +33,7 @@ function PropertiesBar({ className, flowName = 'Invoice processing', flowType =
                 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');
@@ -48,6 +49,7 @@ function PropertiesBar({ className, flowName = 'Invoice processing', flowType =
                         ]
                     }),
                     /*#__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: [

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

@@ -33,6 +33,7 @@ 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
@@ -104,7 +105,7 @@ const outputJsonLines = [
     '    "confidence": 0.96',
     '}'
 ];
-function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onClose }) {
+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: [
@@ -142,7 +143,9 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                 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"
@@ -153,7 +156,9 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                         ]
                                     }),
                                     /*#__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"
@@ -190,9 +195,8 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                 "aria-label": "Toggle panel dock",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {})
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
                                 className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
-                                role: "group",
                                 "aria-label": "Layout toggle",
                                 children: [
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {

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

@@ -6,6 +6,8 @@ export interface PropertiesExpandedProps {
     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;
 }
@@ -16,4 +18,4 @@ export interface PropertiesExpandedProps {
  * 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, onClose, }: PropertiesExpandedProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -5,6 +5,7 @@ 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
@@ -76,7 +77,7 @@ const outputJsonLines = [
     '    "confidence": 0.96',
     '}'
 ];
-function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onClose }) {
+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: [
@@ -114,7 +115,9 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                 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"
@@ -125,7 +128,9 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                         ]
                                     }),
                                     /*#__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"
@@ -162,9 +167,8 @@ function PropertiesExpanded({ className, nodeName = 'Validate invoice', nodeType
                                 "aria-label": "Toggle panel dock",
                                 children: /*#__PURE__*/ jsx(PanelRightOpen, {})
                             }),
-                            /*#__PURE__*/ jsxs("div", {
+                            /*#__PURE__*/ jsxs("fieldset", {
                                 className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
-                                role: "group",
                                 "aria-label": "Layout toggle",
                                 children: [
                                     /*#__PURE__*/ jsx("button", {

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

@@ -50,6 +50,7 @@ function FieldItem({ field, onGraphControl }) {
                         ]
                     }),
                     field.showGraphControl && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
                         className: "flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                         onClick: ()=>onGraphControl?.(field.label),
                         "aria-label": "Graph control",
@@ -125,6 +126,7 @@ const sampleJsonLines = [
 ];
 function EditorToolbarButton({ icon, label }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
         className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
         "aria-label": label,
         children: icon
@@ -143,6 +145,7 @@ function JsonEditorDrawer({ open, onClose }) {
                         children: "JSON editor"
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
                         className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                         onClick: onClose,
                         "aria-label": "Close editor",
@@ -202,6 +205,7 @@ function JsonEditorDrawer({ open, onClose }) {
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                    type: "button",
                                     className: "flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
                                     "aria-label": "Refresh",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.RefreshCw, {
@@ -237,6 +241,7 @@ function JsonEditorDrawer({ open, onClose }) {
                 className: "flex items-center justify-end gap-2 px-6 py-4",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
                         className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground",
                         onClick: onClose,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -244,6 +249,7 @@ function JsonEditorDrawer({ open, onClose }) {
                         })
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
                         className: "flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90",
                         onClick: onClose,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -287,6 +293,7 @@ function PropertiesSimple({ className, icon, title = 'HTTP Request', fields = []
                                 ]
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
                                 className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                                 onClick: onClose,
                                 "aria-label": "Close properties",

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

@@ -22,6 +22,7 @@ function FieldItem({ field, onGraphControl }) {
                         ]
                     }),
                     field.showGraphControl && /*#__PURE__*/ jsx("button", {
+                        type: "button",
                         className: "flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                         onClick: ()=>onGraphControl?.(field.label),
                         "aria-label": "Graph control",
@@ -97,6 +98,7 @@ const sampleJsonLines = [
 ];
 function EditorToolbarButton({ icon, label }) {
     return /*#__PURE__*/ jsx("button", {
+        type: "button",
         className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
         "aria-label": label,
         children: icon
@@ -115,6 +117,7 @@ function JsonEditorDrawer({ open, onClose }) {
                         children: "JSON editor"
                     }),
                     /*#__PURE__*/ jsx("button", {
+                        type: "button",
                         className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                         onClick: onClose,
                         "aria-label": "Close editor",
@@ -174,6 +177,7 @@ function JsonEditorDrawer({ open, onClose }) {
                                     ]
                                 }),
                                 /*#__PURE__*/ jsx("button", {
+                                    type: "button",
                                     className: "flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
                                     "aria-label": "Refresh",
                                     children: /*#__PURE__*/ jsx(RefreshCw, {
@@ -209,6 +213,7 @@ function JsonEditorDrawer({ open, onClose }) {
                 className: "flex items-center justify-end gap-2 px-6 py-4",
                 children: [
                     /*#__PURE__*/ jsx("button", {
+                        type: "button",
                         className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground",
                         onClick: onClose,
                         children: /*#__PURE__*/ jsx("span", {
@@ -216,6 +221,7 @@ function JsonEditorDrawer({ open, onClose }) {
                         })
                     }),
                     /*#__PURE__*/ jsx("button", {
+                        type: "button",
                         className: "flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90",
                         onClick: onClose,
                         children: /*#__PURE__*/ jsx("span", {
@@ -259,6 +265,7 @@ function PropertiesSimple({ className, icon, title = 'HTTP Request', fields = []
                                 ]
                             }),
                             /*#__PURE__*/ jsx("button", {
+                                type: "button",
                                 className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
                                 onClick: onClose,
                                 "aria-label": "Close properties",