@uipath/apollo-wind 2.51.0 → 2.52.1

package/dist/components/ui/index.cjs

@@ -27,7 +27,7 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "@/components/ui/calendar" (module) {
+    "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
     "./card" (module) {
@@ -36,10 +36,10 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "@/components/ui/collapsible" (module) {
+    "./collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -48,7 +48,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "@/components/ui/context-menu" (module) {
+    "./context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -60,13 +60,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "@/components/ui/editable-cell" (module) {
@@ -84,16 +84,16 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/info-tooltip" (module) {
+    "./info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
     "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -108,7 +108,7 @@ var __webpack_modules__ = {
     "./pagination" (module) {
         module.exports = require("./pagination.cjs");
     },
-    "@/components/ui/popover" (module) {
+    "./popover" (module) {
         module.exports = require("./popover.cjs");
     },
     "@/components/ui/portal-container" (module) {
@@ -174,7 +174,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "@/components/ui/tooltip" (module) {
@@ -296,7 +296,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
@@ -317,14 +317,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_13 = __webpack_require__("@/components/ui/collapsible");
+    var _collapsible__rspack_import_13 = __webpack_require__("./collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_13)if ([
         "TreeView",
@@ -345,7 +345,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_15[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_16 = __webpack_require__("@/components/ui/context-menu");
+    var _context_menu__rspack_import_16 = __webpack_require__("./context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_16)if ([
         "TreeView",
@@ -373,7 +373,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -387,7 +387,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_22 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_22 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_22)if ([
         "TreeView",
@@ -429,14 +429,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_27[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _info_tooltip__rspack_import_28 = __webpack_require__("@/components/ui/info-tooltip");
+    var _info_tooltip__rspack_import_28 = __webpack_require__("./info-tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _info_tooltip__rspack_import_28)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_info_tooltip__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_29 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_29 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_29)if ([
         "TreeView",
@@ -450,7 +450,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_30[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_31 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_31 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_31)if ([
         "TreeView",
@@ -485,7 +485,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_35[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _popover__rspack_import_36 = __webpack_require__("@/components/ui/popover");
+    var _popover__rspack_import_36 = __webpack_require__("./popover");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _popover__rspack_import_36)if ([
         "TreeView",
@@ -632,7 +632,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_56[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_57 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_57 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_57)if ([
         "TreeView",

package/dist/components/ui/prompt-editor/components/EditorToolbar.cjs

@@ -60,8 +60,9 @@ const ToolbarSeparator = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
         "aria-hidden": true,
         className: "mx-1 h-4 w-px bg-border/60"
     });
-const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle = true, trailing, strings = external_prompt_editor_config_cjs_namespaceObject.DEFAULT_PROMPT_EDITOR_STRINGS, activeFormats })=>{
+const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle = true, trailing, strings = external_prompt_editor_config_cjs_namespaceObject.DEFAULT_PROMPT_EDITOR_STRINGS, activeFormats, richText })=>{
     const isEditMode = !showModeToggle || 'edit' === mode;
+    const trailingNeedsSeparator = showModeToggle || Boolean(onFullscreen);
     const handleFormat = (actionName)=>()=>{
             if (!disabled && isEditMode) {
                 const fn = actionsRef?.current?.[actionName];
@@ -84,6 +85,13 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                 disabled: disabled || !isEditMode,
                 onClick: handleFormat('formatItalic')
             }),
+            richText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: external_lucide_react_namespaceObject.Underline,
+                pressed: activeFormats?.underline,
+                label: strings.underline,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatUnderline')
+            }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
                 icon: external_lucide_react_namespaceObject.Strikethrough,
                 pressed: activeFormats?.strikethrough,
@@ -105,6 +113,14 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                 label: strings.bulletedList,
                 disabled: disabled || !isEditMode,
                 onClick: handleFormat('formatBulletedList')
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: external_lucide_react_namespaceObject.Code,
+                pressed: activeFormats?.code,
+                label: strings.code,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatCode')
             })
         ]
     });
@@ -139,7 +155,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                     }),
                     trailing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+                            trailingNeedsSeparator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
                             trailing
                         ]
                     })

package/dist/components/ui/prompt-editor/components/EditorToolbar.d.ts

@@ -18,5 +18,7 @@ export interface EditorToolbarProps {
     strings?: PromptEditorStrings;
     /** Rich mode: which formats the selection carries — drives `aria-pressed` on the buttons. */
     activeFormats?: PromptEditorToolbarActiveFormats;
+    /** WYSIWYG mode. Gates Underline, which markdown has no marker for. */
+    richText?: boolean;
 }
-export declare const EditorToolbar: ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle, trailing, strings, activeFormats, }: EditorToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorToolbar: ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle, trailing, strings, activeFormats, richText, }: EditorToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/prompt-editor/components/EditorToolbar.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Bold, Italic, List, ListOrdered, Maximize2, Strikethrough } from "lucide-react";
+import { Bold, Code, Italic, List, ListOrdered, Maximize2, Strikethrough, Underline } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../tooltip.js";
 import { cn } from "../../../../lib/index.js";
 import { DEFAULT_PROMPT_EDITOR_STRINGS } from "../prompt-editor-config.js";
@@ -32,8 +32,9 @@ const ToolbarSeparator = ()=>/*#__PURE__*/ jsx("span", {
         "aria-hidden": true,
         className: "mx-1 h-4 w-px bg-border/60"
     });
-const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle = true, trailing, strings = DEFAULT_PROMPT_EDITOR_STRINGS, activeFormats })=>{
+const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle = true, trailing, strings = DEFAULT_PROMPT_EDITOR_STRINGS, activeFormats, richText })=>{
     const isEditMode = !showModeToggle || 'edit' === mode;
+    const trailingNeedsSeparator = showModeToggle || Boolean(onFullscreen);
     const handleFormat = (actionName)=>()=>{
             if (!disabled && isEditMode) {
                 const fn = actionsRef?.current?.[actionName];
@@ -56,6 +57,13 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                 disabled: disabled || !isEditMode,
                 onClick: handleFormat('formatItalic')
             }),
+            richText && /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: Underline,
+                pressed: activeFormats?.underline,
+                label: strings.underline,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatUnderline')
+            }),
             /*#__PURE__*/ jsx(ToolbarButton, {
                 icon: Strikethrough,
                 pressed: activeFormats?.strikethrough,
@@ -77,6 +85,14 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                 label: strings.bulletedList,
                 disabled: disabled || !isEditMode,
                 onClick: handleFormat('formatBulletedList')
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: Code,
+                pressed: activeFormats?.code,
+                label: strings.code,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatCode')
             })
         ]
     });
@@ -111,7 +127,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                     }),
                     trailing && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                            trailingNeedsSeparator && /*#__PURE__*/ jsx(ToolbarSeparator, {}),
                             trailing
                         ]
                     })

package/dist/components/ui/prompt-editor/components/MarkdownPreview.cjs

@@ -55,8 +55,10 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
 .prompt-editor-preview h4, .prompt-editor-preview h5, .prompt-editor-preview h6 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
 .prompt-editor-preview p { margin: 0.25em 0; }
-.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-muted); color: var(--color-foreground); }
-.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview u { text-decoration: underline; }
+/* Chip token, not --color-muted -- see the matching note in prompt-editor.tsx. */
+.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
+.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
 .prompt-editor-preview pre code { padding: 0; background: none; font-size: 0.85em; }
 .prompt-editor-preview blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--color-border); color: var(--color-muted-foreground); }
 .prompt-editor-preview ul, .prompt-editor-preview ol { margin: 0.25em 0; padding-left: 1.5em; }

package/dist/components/ui/prompt-editor/components/MarkdownPreview.js

@@ -17,8 +17,10 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
 .prompt-editor-preview h4, .prompt-editor-preview h5, .prompt-editor-preview h6 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
 .prompt-editor-preview p { margin: 0.25em 0; }
-.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-muted); color: var(--color-foreground); }
-.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview u { text-decoration: underline; }
+/* Chip token, not --color-muted -- see the matching note in prompt-editor.tsx. */
+.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
+.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
 .prompt-editor-preview pre code { padding: 0; background: none; font-size: 0.85em; }
 .prompt-editor-preview blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--color-border); color: var(--color-muted-foreground); }
 .prompt-editor-preview ul, .prompt-editor-preview ol { margin: 0.25em 0; padding-left: 1.5em; }

package/dist/components/ui/prompt-editor/plugins/ToolbarActionsPlugin.cjs

@@ -34,9 +34,11 @@ const external_react_namespaceObject = require("react");
 const EMPTY_ACTIVE_FORMATS = {
     bold: false,
     italic: false,
+    underline: false,
     strikethrough: false,
     orderedList: false,
-    bulletedList: false
+    bulletedList: false,
+    code: false
 };
 const $readActiveFormats = ()=>{
     const selection = (0, external_lexical_namespaceObject.$getSelection)();
@@ -46,12 +48,14 @@ const $readActiveFormats = ()=>{
     return {
         bold: selection.hasFormat('bold'),
         italic: selection.hasFormat('italic'),
+        underline: selection.hasFormat('underline'),
         strikethrough: selection.hasFormat('strikethrough'),
         orderedList: 'number' === listType,
-        bulletedList: 'bullet' === listType
+        bulletedList: 'bullet' === listType,
+        code: selection.hasFormat('code')
     };
 };
-const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList;
+const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.underline === b.underline && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList && a.code === b.code;
 const wrapSelectionWithMarkers = (startMarker, endMarker)=>{
     const selection = (0, external_lexical_namespaceObject.$getSelection)();
     if (!(0, external_lexical_namespaceObject.$isRangeSelection)(selection)) return;
@@ -133,9 +137,11 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             actionsRef.current = {
                 formatBold: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'bold'),
                 formatItalic: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'italic'),
+                formatUnderline: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'underline'),
                 formatStrikethrough: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'strikethrough'),
                 formatNumberedList: ()=>toggleList('number'),
-                formatBulletedList: ()=>toggleList('bullet')
+                formatBulletedList: ()=>toggleList('bullet'),
+                formatCode: ()=>editor.dispatchCommand(external_lexical_namespaceObject.FORMAT_TEXT_COMMAND, 'code')
             };
         } else actionsRef.current = {
             formatBold: ()=>{
@@ -144,6 +150,7 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             formatItalic: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('*', '*'));
             },
+            formatUnderline: ()=>{},
             formatStrikethrough: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('~~', '~~'));
             },
@@ -152,6 +159,9 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             },
             formatBulletedList: ()=>{
                 editor.update(()=>insertLinePrefixForSelection(()=>'- '));
+            },
+            formatCode: ()=>{
+                editor.update(()=>wrapSelectionWithMarkers('`', '`'));
             }
         };
         return ()=>{

package/dist/components/ui/prompt-editor/plugins/ToolbarActionsPlugin.js

@@ -6,9 +6,11 @@ import { useEffect } from "react";
 const EMPTY_ACTIVE_FORMATS = {
     bold: false,
     italic: false,
+    underline: false,
     strikethrough: false,
     orderedList: false,
-    bulletedList: false
+    bulletedList: false,
+    code: false
 };
 const $readActiveFormats = ()=>{
     const selection = $getSelection();
@@ -18,12 +20,14 @@ const $readActiveFormats = ()=>{
     return {
         bold: selection.hasFormat('bold'),
         italic: selection.hasFormat('italic'),
+        underline: selection.hasFormat('underline'),
         strikethrough: selection.hasFormat('strikethrough'),
         orderedList: 'number' === listType,
-        bulletedList: 'bullet' === listType
+        bulletedList: 'bullet' === listType,
+        code: selection.hasFormat('code')
     };
 };
-const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList;
+const activeFormatsEqual = (a, b)=>a.bold === b.bold && a.italic === b.italic && a.underline === b.underline && a.strikethrough === b.strikethrough && a.orderedList === b.orderedList && a.bulletedList === b.bulletedList && a.code === b.code;
 const wrapSelectionWithMarkers = (startMarker, endMarker)=>{
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return;
@@ -105,9 +109,11 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             actionsRef.current = {
                 formatBold: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold'),
                 formatItalic: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'),
+                formatUnderline: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline'),
                 formatStrikethrough: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough'),
                 formatNumberedList: ()=>toggleList('number'),
-                formatBulletedList: ()=>toggleList('bullet')
+                formatBulletedList: ()=>toggleList('bullet'),
+                formatCode: ()=>editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')
             };
         } else actionsRef.current = {
             formatBold: ()=>{
@@ -116,6 +122,7 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             formatItalic: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('*', '*'));
             },
+            formatUnderline: ()=>{},
             formatStrikethrough: ()=>{
                 editor.update(()=>wrapSelectionWithMarkers('~~', '~~'));
             },
@@ -124,6 +131,9 @@ const ToolbarActionsPlugin = ({ actionsRef, richText, onActiveFormatsChange })=>
             },
             formatBulletedList: ()=>{
                 editor.update(()=>insertLinePrefixForSelection(()=>'- '));
+            },
+            formatCode: ()=>{
+                editor.update(()=>wrapSelectionWithMarkers('`', '`'));
             }
         };
         return ()=>{

package/dist/components/ui/prompt-editor/prompt-editor-config.cjs

@@ -34,9 +34,11 @@ const DEFAULT_PROMPT_EDITOR_STRINGS = {
     preview: 'Preview',
     bold: 'Bold',
     italic: 'Italic',
+    underline: 'Underline',
     strikethrough: 'Strikethrough',
     numberedList: 'Numbered List',
     bulletedList: 'Bulleted List',
+    code: 'Code',
     expand: 'Expand',
     searchVariablesPlaceholder: 'Search variables…',
     noVariablesFound: 'No variables found.',

package/dist/components/ui/prompt-editor/prompt-editor-config.d.ts

@@ -30,9 +30,11 @@ export interface PromptEditorStrings {
     /** Formatting toolbar buttons */
     bold: string;
     italic: string;
+    underline: string;
     strikethrough: string;
     numberedList: string;
     bulletedList: string;
+    code: string;
     expand: string;
     /** `$`-trigger autocomplete menu */
     searchVariablesPlaceholder: string;

package/dist/components/ui/prompt-editor/prompt-editor-config.js

@@ -4,9 +4,11 @@ const DEFAULT_PROMPT_EDITOR_STRINGS = {
     preview: 'Preview',
     bold: 'Bold',
     italic: 'Italic',
+    underline: 'Underline',
     strikethrough: 'Strikethrough',
     numberedList: 'Numbered List',
     bulletedList: 'Bulleted List',
+    code: 'Code',
     expand: 'Expand',
     searchVariablesPlaceholder: 'Search variables…',
     noVariablesFound: 'No variables found.',

package/dist/components/ui/prompt-editor/prompt-editor.cjs

@@ -228,7 +228,12 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
           /* Rich-mode formatting — metrics mirror MarkdownPreview so editing matches rendering. */
           .prompt-editor-text-bold { font-weight: 700; }
           .prompt-editor-text-italic { font-style: italic; }
+          .prompt-editor-text-underline { text-decoration: underline; }
           .prompt-editor-text-strikethrough { text-decoration: line-through; }
+          .prompt-editor-text-underline-strikethrough { text-decoration: underline line-through; }
+          /* Chip token, not --color-muted: wind aliases --muted onto --surface-overlay in the
+             future themes, i.e. what the shell paints itself with, so a muted chip is invisible. */
+          .prompt-editor-text-code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
           .prompt-editor-list-ul, .prompt-editor-list-ol { margin: 0.25em 0; padding-left: 1.5em; }
           .prompt-editor-list-ul { list-style-type: disc; }
           .prompt-editor-list-ol { list-style-type: decimal; }
@@ -376,7 +381,10 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                     text: {
                         bold: 'prompt-editor-text-bold',
                         italic: 'prompt-editor-text-italic',
-                        strikethrough: 'prompt-editor-text-strikethrough'
+                        underline: 'prompt-editor-text-underline',
+                        strikethrough: 'prompt-editor-text-strikethrough',
+                        underlineStrikethrough: 'prompt-editor-text-underline-strikethrough',
+                        code: 'prompt-editor-text-code'
                     },
                     list: {
                         ul: 'prompt-editor-list-ul',
@@ -461,6 +469,7 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                                 actionsRef: toolbarActionsRef,
                                 onModeChange: handleModeChange,
                                 onFullscreen: onFullscreen,
+                                richText: richText,
                                 showModeToggle: showModeToggle && !richText,
                                 trailing: toolbarTrailing,
                                 strings: strings,

package/dist/components/ui/prompt-editor/prompt-editor.js

@@ -200,7 +200,12 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
           /* Rich-mode formatting — metrics mirror MarkdownPreview so editing matches rendering. */
           .prompt-editor-text-bold { font-weight: 700; }
           .prompt-editor-text-italic { font-style: italic; }
+          .prompt-editor-text-underline { text-decoration: underline; }
           .prompt-editor-text-strikethrough { text-decoration: line-through; }
+          .prompt-editor-text-underline-strikethrough { text-decoration: underline line-through; }
+          /* Chip token, not --color-muted: wind aliases --muted onto --surface-overlay in the
+             future themes, i.e. what the shell paints itself with, so a muted chip is invisible. */
+          .prompt-editor-text-code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-chip-default-background); color: var(--color-foreground); }
           .prompt-editor-list-ul, .prompt-editor-list-ol { margin: 0.25em 0; padding-left: 1.5em; }
           .prompt-editor-list-ul { list-style-type: disc; }
           .prompt-editor-list-ol { list-style-type: decimal; }
@@ -348,7 +353,10 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                     text: {
                         bold: 'prompt-editor-text-bold',
                         italic: 'prompt-editor-text-italic',
-                        strikethrough: 'prompt-editor-text-strikethrough'
+                        underline: 'prompt-editor-text-underline',
+                        strikethrough: 'prompt-editor-text-strikethrough',
+                        underlineStrikethrough: 'prompt-editor-text-underline-strikethrough',
+                        code: 'prompt-editor-text-code'
                     },
                     list: {
                         ul: 'prompt-editor-list-ul',
@@ -433,6 +441,7 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                                 actionsRef: toolbarActionsRef,
                                 onModeChange: handleModeChange,
                                 onFullscreen: onFullscreen,
+                                richText: richText,
                                 showModeToggle: showModeToggle && !richText,
                                 trailing: toolbarTrailing,
                                 strings: strings,

package/dist/components/ui/prompt-editor/types.d.ts

@@ -35,18 +35,24 @@ export type PromptEditorMode = 'edit' | 'preview';
 export interface PromptEditorToolbarActiveFormats {
     bold: boolean;
     italic: boolean;
+    /** Rich mode only — markdown has no underline syntax, so plain mode never offers it. */
+    underline: boolean;
     strikethrough: boolean;
     orderedList: boolean;
     bulletedList: boolean;
+    code: boolean;
 }
 export interface PromptEditorToolbarActionsRef {
     formatBold: () => void;
     formatItalic: () => void;
+    /** Rich mode only; a no-op in plain mode, where the Underline button never renders. */
+    formatUnderline: () => void;
     formatStrikethrough: () => void;
     formatNumberedList: () => void;
     formatBulletedList: () => void;
+    formatCode: () => void;
 }
-export type PromptEditorToolbarFormatAction = 'bold' | 'bulletedList' | 'italic' | 'numberedList' | 'strikethrough';
+export type PromptEditorToolbarFormatAction = 'bold' | 'bulletedList' | 'code' | 'italic' | 'numberedList' | 'strikethrough' | 'underline';
 export interface PromptEditorTokenColorConfig {
     background: string;
     border: string;

package/dist/components/ui/prompt-editor/utils/rich-serialization.cjs

@@ -37,6 +37,27 @@ const index_cjs_namespaceObject = require("../nodes/index.cjs");
 const token_nodes_cjs_namespaceObject = require("../plugins/shared/token-nodes.cjs");
 const external_insert_token_cjs_namespaceObject = require("./insert-token.cjs");
 const external_serialization_cjs_namespaceObject = require("./serialization.cjs");
+const UNDERLINE = {
+    dependencies: [],
+    importRegExp: /<u>(.*?)<\/u>/,
+    regExp: /<u>(.*?)<\/u>$/,
+    trigger: '>',
+    replace: (node, match)=>{
+        const inner = (0, external_lexical_namespaceObject.$createTextNode)(match[1]);
+        inner.setFormat(node.getFormat());
+        inner.toggleFormat('underline');
+        node.replace(inner);
+        return inner;
+    },
+    export: (node, _exportChildren, exportFormat)=>{
+        if (!(0, external_lexical_namespaceObject.$isTextNode)(node) || !node.hasFormat('underline')) return null;
+        const isUnderlined = (sibling)=>(0, external_lexical_namespaceObject.$isTextNode)(sibling) && sibling.hasFormat('underline');
+        const open = isUnderlined(node.getPreviousSibling()) ? '' : '<u>';
+        const close = isUnderlined(node.getNextSibling()) ? '' : '</u>';
+        return `${open}${exportFormat(node, node.getTextContent())}${close}`;
+    },
+    type: 'text-match'
+};
 const PROMPT_EDITOR_RICH_TRANSFORMERS = [
     markdown_namespaceObject.ORDERED_LIST,
     markdown_namespaceObject.UNORDERED_LIST,
@@ -46,7 +67,9 @@ const PROMPT_EDITOR_RICH_TRANSFORMERS = [
     markdown_namespaceObject.BOLD_UNDERSCORE,
     markdown_namespaceObject.ITALIC_STAR,
     markdown_namespaceObject.ITALIC_UNDERSCORE,
-    markdown_namespaceObject.STRIKETHROUGH
+    markdown_namespaceObject.STRIKETHROUGH,
+    UNDERLINE,
+    markdown_namespaceObject.INLINE_CODE
 ];
 const RICH_EDITOR_EXTRA_NODES = [
     list_namespaceObject.ListNode,
@@ -99,6 +122,29 @@ function createPillExportTransformer(pills) {
     };
 }
 const unescapeMarkdownLiterals = (markdown)=>markdown.replace(/\\([*_`~\\])/g, '$1');
+function $rescuePillsFromCodeSpans(pills) {
+    for (const node of (0, external_lexical_namespaceObject.$getRoot)().getAllTextNodes()){
+        if (!node.hasFormat('code') || !PILL_SENTINEL_IMPORT.test(node.getTextContent())) continue;
+        const replacements = node.getTextContent().split(PILL_SENTINEL_SPLIT).filter((part)=>'' !== part).map((part)=>{
+            const match = PILL_SENTINEL_IMPORT.exec(part);
+            if (match && match[0] === part) {
+                const pill = pills[Number(match[1])];
+                return pill ? (0, external_insert_token_cjs_namespaceObject.createTokenNodeForOption)(pill) : (0, external_lexical_namespaceObject.$createTextNode)('');
+            }
+            const text = (0, external_lexical_namespaceObject.$createTextNode)(part);
+            text.setFormat(node.getFormat());
+            return text;
+        });
+        if (replacements.length > 0) {
+            const [first, ...rest] = replacements;
+            node.replace(first);
+            rest.reduce((prev, next)=>{
+                prev.insertAfter(next);
+                return next;
+            }, first);
+        }
+    }
+}
 function $getRichEditorTokensInternal() {
     const pills = [];
     const markdown = (0, markdown_namespaceObject.$convertToMarkdownString)([
@@ -145,6 +191,7 @@ function $setRichEditorTokensInternal(tokens) {
         ...PROMPT_EDITOR_RICH_TRANSFORMERS,
         createPillImportTransformer(pills)
     ], root, true);
+    $rescuePillsFromCodeSpans(pills);
 }
 function normalizeRichTextTokens(tokens) {
     const editor = (0, external_lexical_namespaceObject.createEditor)({

package/dist/components/ui/prompt-editor/utils/rich-serialization.d.ts

@@ -1,20 +1,6 @@
 import { ListItemNode, ListNode } from '@lexical/list';
 import { type Transformer } from '@lexical/markdown';
 import type { PromptEditorToken } from '../types';
-/**
- * Rich (WYSIWYG) serialization for the prompt editor: the `PromptEditorToken[]` contract is
- * unchanged — text tokens carry markdown — but in rich mode the editor state holds real formatted
- * nodes, converted through `@lexical/markdown` on the way in and out.
- *
- * Two invariants drive everything here:
- *
- * 1. **`\n` is a visible line break** (the plain editor's convention; previews render with
- *    `breaks: true`). Both conversions run with `shouldPreserveNewLines: true` so `a\nb` and
- *    `a\n\nb` each round-trip byte-identically instead of being rewritten into paragraph spacing.
- * 2. **Unknown markdown stays literal.** The transformer set is exactly the toolbar's feature set
- *    (bold/italic/strikethrough + ordered/bulleted lists). Headings, quotes, code, links, tables
- *    pass through as plain text, which is the round-trip-safe behavior.
- */
 /** The toolbar's feature set. Underscore emphasis variants import legacy content; export emits star forms. */
 export declare const PROMPT_EDITOR_RICH_TRANSFORMERS: Transformer[];
 /** Lexical node classes rich mode registers beyond the plain editor's token nodes. */

package/dist/components/ui/prompt-editor/utils/rich-serialization.js

@@ -1,10 +1,31 @@
 import { ListItemNode, ListNode } from "@lexical/list";
-import { $convertFromMarkdownString, $convertToMarkdownString, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, ITALIC_STAR, ITALIC_UNDERSCORE, ORDERED_LIST, STRIKETHROUGH, UNORDERED_LIST } from "@lexical/markdown";
-import { $getRoot, createEditor } from "lexical";
+import { $convertFromMarkdownString, $convertToMarkdownString, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, ORDERED_LIST, STRIKETHROUGH, UNORDERED_LIST } from "@lexical/markdown";
+import { $createTextNode, $getRoot, $isTextNode, createEditor } from "lexical";
 import { InputTokenNode, OutputTokenNode, ResourceTokenNode, StateTokenNode } from "../nodes/index.js";
 import { NODE_TYPE_TO_TOKEN_TYPE, isPromptTokenNode } from "../plugins/shared/token-nodes.js";
 import { createTokenNodeForOption } from "./insert-token.js";
 import { WORD_JOINER } from "./serialization.js";
+const UNDERLINE = {
+    dependencies: [],
+    importRegExp: /<u>(.*?)<\/u>/,
+    regExp: /<u>(.*?)<\/u>$/,
+    trigger: '>',
+    replace: (node, match)=>{
+        const inner = $createTextNode(match[1]);
+        inner.setFormat(node.getFormat());
+        inner.toggleFormat('underline');
+        node.replace(inner);
+        return inner;
+    },
+    export: (node, _exportChildren, exportFormat)=>{
+        if (!$isTextNode(node) || !node.hasFormat('underline')) return null;
+        const isUnderlined = (sibling)=>$isTextNode(sibling) && sibling.hasFormat('underline');
+        const open = isUnderlined(node.getPreviousSibling()) ? '' : '<u>';
+        const close = isUnderlined(node.getNextSibling()) ? '' : '</u>';
+        return `${open}${exportFormat(node, node.getTextContent())}${close}`;
+    },
+    type: 'text-match'
+};
 const PROMPT_EDITOR_RICH_TRANSFORMERS = [
     ORDERED_LIST,
     UNORDERED_LIST,
@@ -14,7 +35,9 @@ const PROMPT_EDITOR_RICH_TRANSFORMERS = [
     BOLD_UNDERSCORE,
     ITALIC_STAR,
     ITALIC_UNDERSCORE,
-    STRIKETHROUGH
+    STRIKETHROUGH,
+    UNDERLINE,
+    INLINE_CODE
 ];
 const RICH_EDITOR_EXTRA_NODES = [
     ListNode,
@@ -67,6 +90,29 @@ function createPillExportTransformer(pills) {
     };
 }
 const unescapeMarkdownLiterals = (markdown)=>markdown.replace(/\\([*_`~\\])/g, '$1');
+function $rescuePillsFromCodeSpans(pills) {
+    for (const node of $getRoot().getAllTextNodes()){
+        if (!node.hasFormat('code') || !PILL_SENTINEL_IMPORT.test(node.getTextContent())) continue;
+        const replacements = node.getTextContent().split(PILL_SENTINEL_SPLIT).filter((part)=>'' !== part).map((part)=>{
+            const match = PILL_SENTINEL_IMPORT.exec(part);
+            if (match && match[0] === part) {
+                const pill = pills[Number(match[1])];
+                return pill ? createTokenNodeForOption(pill) : $createTextNode('');
+            }
+            const text = $createTextNode(part);
+            text.setFormat(node.getFormat());
+            return text;
+        });
+        if (replacements.length > 0) {
+            const [first, ...rest] = replacements;
+            node.replace(first);
+            rest.reduce((prev, next)=>{
+                prev.insertAfter(next);
+                return next;
+            }, first);
+        }
+    }
+}
 function $getRichEditorTokensInternal() {
     const pills = [];
     const markdown = $convertToMarkdownString([
@@ -113,6 +159,7 @@ function $setRichEditorTokensInternal(tokens) {
         ...PROMPT_EDITOR_RICH_TRANSFORMERS,
         createPillImportTransformer(pills)
     ], root, true);
+    $rescuePillsFromCodeSpans(pills);
 }
 function normalizeRichTextTokens(tokens) {
     const editor = createEditor({

package/dist/components/ui/resizable.cjs

@@ -40,12 +40,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_run
 const ResizablePanel = external_react_resizable_panels_namespaceObject.Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Separator, {
         "data-slot": "resizable-handle",
-        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/components/ui/resizable.d.ts

@@ -1,5 +1,5 @@
-import { Group, Panel, Separator } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof Group>) => import("react/jsx-runtime").JSX.Element;
 declare const ResizablePanel: typeof Panel;
 declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof Separator> & {

package/dist/components/ui/resizable.js

@@ -10,12 +10,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(Group,
 const ResizablePanel = Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ jsx(Separator, {
         "data-slot": "resizable-handle",
-        className: cn('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: cn('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ jsx("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ jsx(GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/styles.css

@@ -2482,6 +2482,12 @@
   .bg-\[\#ff0000\] {
     background-color: #ff0000;
   }
+  .bg-\[var\(--resizable-handle-divider-bg\,var\(--ap-wind-border\)\)\] {
+    background-color: var(--resizable-handle-divider-bg,var(--ap-wind-border));
+  }
+  .bg-\[var\(\.\.\.\)\] {
+    background-color: var(...);
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -4600,14 +4606,14 @@
       opacity: 100%;
     }
   }
-  .group-data-\[separator\=active\]\:bg-primary {
+  .group-data-\[separator\=active\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="active"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .group-data-\[separator\=hover\]\:bg-primary {
+  .group-data-\[separator\=hover\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="hover"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .group-data-\[state\=open\]\/section\:rotate-90 {
@@ -5786,14 +5792,14 @@
       color: var(--foreground);
     }
   }
-  .data-\[separator\=active\]\:bg-primary {
+  .data-\[separator\=active\]\:bg-primary\! {
     &[data-separator="active"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .data-\[separator\=hover\]\:bg-primary {
+  .data-\[separator\=hover\]\:bg-primary\! {
     &[data-separator="hover"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .data-\[side\=bottom\]\:translate-y-1 {
@@ -7149,6 +7155,56 @@
       rotate: 180deg;
     }
   }
+  .\[\.dark-hc_\&\]\:border-border-subtle {
+    .dark-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark-hc_\&\]\:text-foreground-inverse {
+    .dark-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .dark:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:bg-foreground-subtle {
+    .dark:not(.react-flow) & {
+      background-color: var(--foreground-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:text-foreground-inverse {
+    .dark:not(.react-flow) & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light-hc_\&\]\:border-border-subtle {
+    .light-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light-hc_\&\]\:text-foreground-inverse {
+    .light-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .light:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:bg-border-subtle {
+    .light:not(.react-flow) & {
+      background-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:text-foreground-emp {
+    .light:not(.react-flow) & {
+      color: var(--foreground-emp);
+    }
+  }
   .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
     [data-slot=card-content] & {
       background-color: transparent;
@@ -10066,6 +10122,9 @@ body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
   --surface-hover: var(--color-background-gray);
   color-scheme: dark;
 }
+body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
 body.future-dark, .future-dark, body.future-light, .future-light {
   --brand-darker: var(--color-primary-darker);
   --ring: var(--color-focus-indicator);

package/dist/tailwind.css

@@ -171,6 +171,20 @@ body.dark-hc, .dark-hc {
   color-scheme: dark;
 }
 
+/* ResizableHandle's divider needs a resting background that matches its own
+   border-subtle-toned box in classic themes (see resizable.tsx). Exposed as a
+   variable, with an unset default falling back to --ap-wind-border, so a
+   consumer's own bg-* override (e.g. bg-transparent) still wins: cn()/
+   tailwind-merge can't dedupe a plain bg-* class against one scoped to an
+   arbitrary theme variant, so the variant class must stay a single, unvaried
+   bg-[var(...)] utility for consumer overrides to keep working. */
+body.light, .light:not(.react-flow),
+body.light-hc, .light-hc,
+body.dark, .dark:not(.react-flow),
+body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
+
 /* ── Future family — mapping divergences (color-scheme comes from core) ──── */
 body.future-dark, .future-dark,
 body.future-light, .future-light {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.51.0",
+  "version": "2.52.1",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -127,7 +127,7 @@
     "tailwindcss": "^4.1.17",
     "vaul": "^1.1.2",
     "zod": "^4.3.5",
-    "@uipath/apollo-core": "5.14.0"
+    "@uipath/apollo-core": "5.14.1"
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.2.5",