@uipath/apollo-react 4.58.0 → 4.59.0

package/dist/canvas/components/Toolbox/ListView.js

@@ -2,12 +2,30 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Column } from "../../layouts/index.js";
 import { CanvasIcon, partition } from "../../utils/index.js";
 import { Skeleton } from "@uipath/apollo-wind";
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { InitialsBadge } from "../shared/InitialsBadge.js";
-import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
+import { IconContainer, ListItemButton, StyledList } from "./ListView.styles.js";
 const DEFAULT_SKELETON_COUNT = 3;
+const ROW_HEIGHT_ITEM = 32;
+const ROW_HEIGHT_ITEM_TWO_LINE = 44;
+const ROW_HEIGHT_SECTION = 30;
+const ROW_HEIGHT_SECTION_FIRST = 22;
+const ROW_HEIGHT_DIVIDER = 13;
+function getRenderItemHeight(renderItem) {
+    if (!renderItem) return ROW_HEIGHT_ITEM;
+    switch(renderItem.type){
+        case 'divider':
+            return ROW_HEIGHT_DIVIDER;
+        case 'section':
+            return renderItem.first ? ROW_HEIGHT_SECTION_FIRST : ROW_HEIGHT_SECTION;
+        case 'skeleton':
+            return ROW_HEIGHT_ITEM;
+        default:
+            return renderItem.item.description ? ROW_HEIGHT_ITEM_TWO_LINE : ROW_HEIGHT_ITEM;
+    }
+}
 function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
     const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
@@ -17,6 +35,15 @@ function buildRenderedItems(items, enableSections, loadingSkeleton) {
             type: 'skeleton'
         });
     };
+    const pushItem = (item)=>{
+        if (item.dividerBefore && result.length > 0) result.push({
+            type: 'divider'
+        });
+        result.push({
+            type: 'item',
+            item
+        });
+    };
     if (!enableSections) {
         for (const item of items)result.push({
             type: 'item',
@@ -26,10 +53,7 @@ function buildRenderedItems(items, enableSections, loadingSkeleton) {
         return result;
     }
     const [itemsWithSection, itemsWithoutSection] = partition(items, (item)=>!!item.section);
-    for (const item of itemsWithoutSection)result.push({
-        type: 'item',
-        item
-    });
+    for (const item of itemsWithoutSection)pushItem(item);
     const itemsBySection = new Map();
     for (const item of itemsWithSection){
         const name = item.section;
@@ -50,12 +74,10 @@ function buildRenderedItems(items, enableSections, loadingSkeleton) {
     for (const sectionName of sectionNames){
         result.push({
             type: 'section',
-            sectionName
-        });
-        for (const item of itemsBySection.get(sectionName) ?? [])result.push({
-            type: 'item',
-            item
+            sectionName,
+            first: 0 === result.length
         });
+        for (const item of itemsBySection.get(sectionName) ?? [])pushItem(item);
         const skeletonForSection = skeletonBySection.get(sectionName);
         if (skeletonForSection) pushSkeletons(skeletonForSection.count ?? baseSkeletonCount);
     }
@@ -71,6 +93,21 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         }), [
         style
     ]);
+    const nameRef = useRef(null);
+    const descriptionRef = useRef(null);
+    const [truncated, setTruncated] = useState({
+        name: false,
+        description: false
+    });
+    const measureTruncation = useCallback(()=>{
+        const n = nameRef.current;
+        const d = descriptionRef.current;
+        const next = {
+            name: !!n && n.scrollWidth > n.clientWidth,
+            description: !!d && d.scrollWidth > d.clientWidth
+        };
+        setTruncated((prev)=>prev.name === next.name && prev.description === next.description ? prev : next);
+    }, []);
     const handleButtonClick = useCallback(()=>{
         const clickTarget = renderedItems[index];
         if (clickTarget?.type === 'item') onItemClick(clickTarget.item, index);
@@ -80,18 +117,22 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         index
     ]);
     const handleButtonHover = useCallback(()=>{
+        measureTruncation();
         const hoverTarget = renderedItems[index];
         if (hoverTarget?.type === 'item') onItemHover?.(hoverTarget.item);
     }, [
+        measureTruncation,
         onItemHover,
         renderedItems,
         index
     ]);
-    if ('section' === renderItem.type) return /*#__PURE__*/ jsx(SectionHeader, {
-        ...ariaAttributes,
+    if ('section' === renderItem.type) return /*#__PURE__*/ jsx("div", {
+        role: "presentation",
         style: style,
+        className: `flex items-end box-border ${renderItem.first ? 'px-2 py-1' : 'px-2 pt-3 pb-1'}`,
+        "data-testid": "list-section-header",
         children: /*#__PURE__*/ jsx("span", {
-            className: "text-xs",
+            className: "uppercase text-foreground-muted font-bold text-xs",
             children: renderItem.sectionName
         })
     });
@@ -99,10 +140,20 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         style: style,
         children: /*#__PURE__*/ jsx(ListItemSkeleton, {})
     });
+    if ('divider' === renderItem.type) return /*#__PURE__*/ jsx("div", {
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-testid": "list-item-divider",
+        style: style,
+        className: "flex items-center box-border px-1.5",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "w-full border-t border-border-de-emp"
+        })
+    });
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
     const isActive = index === activeIndex;
-    return /*#__PURE__*/ jsxs(ListItemButton, {
+    const button = /*#__PURE__*/ jsxs(ListItemButton, {
         ...ariaAttributes,
         tabIndex: -1,
         id: `toolbox-item-${item.id}`,
@@ -116,24 +167,24 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         children: [
             /*#__PURE__*/ jsxs(IconContainerMemoized, {
                 bgColor: bgColor,
-                color: "var(--canvas-foreground-emp)",
+                style: item.contentColor ? {
+                    color: item.contentColor
+                } : void 0,
                 "data-testid": "list-item-icon",
                 children: [
                     item.icon?.url && /*#__PURE__*/ jsx("img", {
                         src: item.icon?.url,
                         alt: item.name,
-                        style: {
-                            width: 24,
-                            height: 24
-                        }
+                        className: "w-5 h-5"
                     }),
                     item.icon?.name && /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: item.icon.name,
-                        size: 24
+                        size: 20
                     }),
                     item.icon?.Component && /*#__PURE__*/ jsx(item.icon.Component, {}),
                     !item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ jsx(InitialsBadge, {
                         name: item.name,
+                        size: "20px",
                         "data-testid": "list-item-initials-badge"
                     })
                 ]
@@ -142,53 +193,83 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
                 flex: 1,
                 overflow: "hidden",
                 children: [
-                    /*#__PURE__*/ jsx(CanvasTooltip, {
-                        content: item.name,
-                        placement: "right",
-                        smartTooltip: true,
-                        children: /*#__PURE__*/ jsx("span", {
-                            className: "text-sm list-view-item-name",
-                            children: item.name
-                        })
+                    /*#__PURE__*/ jsx("span", {
+                        ref: nameRef,
+                        className: "text-sm list-view-item-name",
+                        style: item.contentColor ? {
+                            color: item.contentColor
+                        } : void 0,
+                        children: item.name
                     }),
-                    item.description && /*#__PURE__*/ jsx(CanvasTooltip, {
-                        content: item.description,
-                        placement: "right",
-                        smartTooltip: true,
-                        children: /*#__PURE__*/ jsx("span", {
-                            className: "text-xs list-view-item-name text-foreground-muted",
-                            children: item.description
-                        })
+                    item.description && /*#__PURE__*/ jsx("span", {
+                        ref: descriptionRef,
+                        className: "text-xs list-view-item-name text-foreground-muted",
+                        children: item.description
                     })
                 ]
             }),
+            item.badge && /*#__PURE__*/ jsx("span", {
+                className: "shrink-0 uppercase font-semibold text-[10px] py-px px-1 rounded border border-border text-foreground-muted",
+                "data-testid": "list-item-badge",
+                children: item.badge
+            }),
+            item.trailingIcon && !item.children && /*#__PURE__*/ jsx("span", {
+                "data-testid": "list-item-trailing-icon",
+                className: "flex shrink-0",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: item.trailingIcon.name,
+                    size: 16,
+                    color: item.trailingIcon.color ?? 'var(--canvas-foreground-de-emp)'
+                })
+            }),
             !!item.children && /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: "chevron-right",
-                size: 20,
+                size: 16,
                 color: "var(--canvas-foreground-de-emp)"
             })
         ]
     });
+    const showName = truncated.name;
+    const showDescription = !!item.description && truncated.description;
+    const showPopover = truncated.name || truncated.description || !!item.detail;
+    const popover = showPopover ? /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-0.5",
+        children: [
+            showName && /*#__PURE__*/ jsx("span", {
+                className: "text-sm",
+                children: item.name
+            }),
+            showDescription && /*#__PURE__*/ jsx("span", {
+                className: "text-xs text-foreground-muted",
+                children: item.description
+            }),
+            item.detail && /*#__PURE__*/ jsx("span", {
+                className: "text-xs",
+                children: item.detail
+            })
+        ]
+    }) : null;
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
+        content: popover,
+        placement: "right",
+        delay: true,
+        contentClassName: "max-w-64",
+        hide: !showPopover,
+        disableSkipDelay: true,
+        children: button
+    }, item.id);
 });
 const ListItemSkeleton = ()=>/*#__PURE__*/ jsxs("div", {
-        className: "flex items-center gap-2.5 h-8",
+        className: "flex items-center gap-2.5 h-8 px-1.5",
         role: "presentation",
         "aria-hidden": "true",
         "data-testid": "list-item-skeleton",
         children: [
             /*#__PURE__*/ jsx(Skeleton, {
-                className: "h-8 w-8 shrink-0 rounded-lg"
+                className: "h-6 w-6 shrink-0 rounded-md"
             }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex-1 space-y-1.5 min-w-0",
-                children: [
-                    /*#__PURE__*/ jsx(Skeleton, {
-                        className: "h-3.5 w-1/3"
-                    }),
-                    /*#__PURE__*/ jsx(Skeleton, {
-                        className: "h-3 w-2/3"
-                    })
-                ]
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-3.5 w-1/2"
             })
         ]
     });
@@ -220,6 +301,9 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         onItemClick,
         onItemHover
     ]);
+    const getRowHeight = useCallback((index)=>getRenderItemHeight(renderedItems[index]), [
+        renderedItems
+    ]);
     if (0 === renderedItems.length) {
         if (renderEmptyState) return renderEmptyState();
         return /*#__PURE__*/ jsxs(Column, {
@@ -251,10 +335,10 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         rowProps: rowProps,
         rowComponent: ListViewRow,
         rowCount: renderedItems.length,
-        rowHeight: 40,
+        rowHeight: getRowHeight,
         overscanCount: 20,
         onScroll: onScroll
     });
 });
 const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
-export { ListView_ListView as ListView, buildRenderedItems };
+export { ListView_ListView as ListView, ROW_HEIGHT_DIVIDER, ROW_HEIGHT_ITEM, ROW_HEIGHT_ITEM_TWO_LINE, ROW_HEIGHT_SECTION, ROW_HEIGHT_SECTION_FIRST, buildRenderedItems, getRenderItemHeight };

package/dist/canvas/components/Toolbox/ListView.styles.cjs

@@ -33,29 +33,14 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    IconContainer: ()=>IconContainer,
     StyledList: ()=>StyledList,
-    SectionHeader: ()=>SectionHeader,
-    ListItemButton: ()=>ListItemButton
+    ListItemButton: ()=>ListItemButton,
+    IconContainer: ()=>IconContainer
 });
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_namespaceObject = require("motion/react");
 const external_react_window_namespaceObject = require("react-window");
-const SectionHeader = styled_default().div`
-  display: flex;
-  align-items: center;
-  border-top: 1px solid var(--canvas-border-de-emp);
-
-  &:first-of-type {
-    border-top: none;
-  }
-
-  &.loading {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-`;
 const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
   display: flex;
   align-items: center;
@@ -66,6 +51,10 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
   cursor: pointer;
   text-align: left;
   width: 100%;
+  // Don't rely on a consumer's global reset: the row combines width:100% + an
+  // explicit react-window height with its own padding, so content-box would
+  // overflow the slot and desync the virtualizer's row positions.
+  box-sizing: border-box;
   // Reserve the focus ring geometry in the resting state (invisible via a
   // transparent color) so activating a row only flips outline-color. Without
   // this the outline falls back to UA defaults (3px / currentColor) and every
@@ -84,13 +73,15 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
   }
 `;
 const IconContainer = styled_default().div`
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props)=>props.bgColor || 'var(--canvas-background)'};
-  border-radius: 8px;
+  // Transparent unless the item declares a background (color / colorDark),
+  // so plain rows read as icon + text without a tile.
+  background: ${(props)=>props.bgColor || 'transparent'};
+  border-radius: 6px;
   color: var(--canvas-foreground-emp);
   opacity: 0.9;
   flex-shrink: 0;
@@ -134,12 +125,10 @@ const StyledList = styled_default()(external_react_window_namespaceObject.List)`
 `;
 exports.IconContainer = __webpack_exports__.IconContainer;
 exports.ListItemButton = __webpack_exports__.ListItemButton;
-exports.SectionHeader = __webpack_exports__.SectionHeader;
 exports.StyledList = __webpack_exports__.StyledList;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "IconContainer",
     "ListItemButton",
-    "SectionHeader",
     "StyledList"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/Toolbox/ListView.styles.d.ts

@@ -1,8 +1,4 @@
 import { List } from 'react-window';
-export declare const SectionHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ListItemButton: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UA0B1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
+{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,cAAc;;UA8B1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAezD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.styles.js

@@ -1,20 +1,6 @@
 import styled from "@emotion/styled";
 import { motion } from "motion/react";
 import { List } from "react-window";
-const SectionHeader = styled.div`
-  display: flex;
-  align-items: center;
-  border-top: 1px solid var(--canvas-border-de-emp);
-
-  &:first-of-type {
-    border-top: none;
-  }
-
-  &.loading {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-`;
 const ListItemButton = styled(motion.button)`
   display: flex;
   align-items: center;
@@ -25,6 +11,10 @@ const ListItemButton = styled(motion.button)`
   cursor: pointer;
   text-align: left;
   width: 100%;
+  // Don't rely on a consumer's global reset: the row combines width:100% + an
+  // explicit react-window height with its own padding, so content-box would
+  // overflow the slot and desync the virtualizer's row positions.
+  box-sizing: border-box;
   // Reserve the focus ring geometry in the resting state (invisible via a
   // transparent color) so activating a row only flips outline-color. Without
   // this the outline falls back to UA defaults (3px / currentColor) and every
@@ -43,13 +33,15 @@ const ListItemButton = styled(motion.button)`
   }
 `;
 const IconContainer = styled.div`
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props)=>props.bgColor || 'var(--canvas-background)'};
-  border-radius: 8px;
+  // Transparent unless the item declares a background (color / colorDark),
+  // so plain rows read as icon + text without a tile.
+  background: ${(props)=>props.bgColor || 'transparent'};
+  border-radius: 6px;
   color: var(--canvas-foreground-emp);
   opacity: 0.9;
   flex-shrink: 0;
@@ -91,4 +83,4 @@ const StyledList = styled(List)`
     }
   }
 `;
-export { IconContainer, ListItemButton, SectionHeader, StyledList };
+export { IconContainer, ListItemButton, StyledList };

package/dist/canvas/constants.cjs

@@ -60,7 +60,7 @@ const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
-const TOOLBOX_HEIGHT = 440;
+const TOOLBOX_HEIGHT = 410;
 const TOOLBOX_PADDING_X = 20;
 const TOOLBOX_PADDING_Y = 12;
 const TOOLBOX_GAP = 12;

package/dist/canvas/constants.d.ts

@@ -5,7 +5,7 @@ export declare const DEFAULT_NODE_SIZE = 96;
 export declare const GRID_SPACING = 16;
 export declare const CANVAS_COMPACT_BREAKPOINT = 600;
 export declare const TOOLBOX_WIDTH = 320;
-export declare const TOOLBOX_HEIGHT = 440;
+export declare const TOOLBOX_HEIGHT = 410;
 export declare const TOOLBOX_PADDING_X = 20;
 export declare const TOOLBOX_PADDING_Y = 12;
 export declare const TOOLBOX_GAP = 12;

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAOjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/canvas/constants.js

@@ -5,7 +5,7 @@ const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
-const TOOLBOX_HEIGHT = 440;
+const TOOLBOX_HEIGHT = 410;
 const TOOLBOX_PADDING_X = 20;
 const TOOLBOX_PADDING_Y = 12;
 const TOOLBOX_GAP = 12;

package/dist/canvas/core/CategoryTreeAdapter.cjs

@@ -60,6 +60,7 @@ class CategoryTreeAdapter {
                 const categoryItem = {
                     id: category.id,
                     name: category.name,
+                    description: category.description,
                     data: null,
                     ...category.icon ? {
                         icon: {

package/dist/canvas/core/CategoryTreeAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryTreeAdapter.d.ts","sourceRoot":"","sources":["../../../src/canvas/core/CategoryTreeAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAcrE,qBAAa,mBAAmB;IAClB,OAAO,CAAC,IAAI;gBAAJ,IAAI,EAAE,YAAY;IAetC,WAAW,IAAI,QAAQ,EAAE;CAiE1B"}
+{"version":3,"file":"CategoryTreeAdapter.d.ts","sourceRoot":"","sources":["../../../src/canvas/core/CategoryTreeAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAcrE,qBAAa,mBAAmB;IAClB,OAAO,CAAC,IAAI;gBAAJ,IAAI,EAAE,YAAY;IAetC,WAAW,IAAI,QAAQ,EAAE;CAkE1B"}

package/dist/canvas/core/CategoryTreeAdapter.js

@@ -32,6 +32,7 @@ class CategoryTreeAdapter {
                 const categoryItem = {
                     id: category.id,
                     name: category.name,
+                    description: category.description,
                     data: null,
                     ...category.icon ? {
                         icon: {

package/dist/canvas/schema/node-definition/category-manifest.cjs

@@ -30,6 +30,7 @@ const external_zod_namespaceObject = require("zod");
 const categoryManifestSchema = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string().min(1),
     name: external_zod_namespaceObject.z.string().min(1),
+    description: external_zod_namespaceObject.z.string().optional(),
     parentId: external_zod_namespaceObject.z.string().optional(),
     sortOrder: external_zod_namespaceObject.z.number().int().nonnegative(),
     color: external_zod_namespaceObject.z.string().min(1).optional(),

package/dist/canvas/schema/node-definition/category-manifest.d.ts

@@ -2,6 +2,7 @@ import { z } from 'zod';
 export declare const categoryManifestSchema: z.ZodObject<{
     id: z.ZodString;
     name: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
     parentId: z.ZodOptional<z.ZodString>;
     sortOrder: z.ZodNumber;
     color: z.ZodOptional<z.ZodString>;

package/dist/canvas/schema/node-definition/category-manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/schema/node-definition/category-manifest.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAexB,eAAO,MAAM,sBAAsB;;;;;;;;;iBAwCjC,CAAC;AAGH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"category-manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/schema/node-definition/category-manifest.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAexB,eAAO,MAAM,sBAAsB;;;;;;;;;;iBA2CjC,CAAC;AAGH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/canvas/schema/node-definition/category-manifest.js

@@ -2,6 +2,7 @@ import { z } from "zod";
 const categoryManifestSchema = z.object({
     id: z.string().min(1),
     name: z.string().min(1),
+    description: z.string().optional(),
     parentId: z.string().optional(),
     sortOrder: z.number().int().nonnegative(),
     color: z.string().min(1).optional(),

package/dist/canvas/storybook-utils/manifests/index.d.ts

@@ -7,6 +7,7 @@ export declare const defaultWorkflowManifest: {
         name: string;
         sortOrder: number;
         tags: string[];
+        description?: string | undefined;
         parentId?: string | undefined;
         color?: string | undefined;
         colorDark?: string | undefined;

package/dist/canvas/storybook-utils/manifests/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/manifests/index.ts"],"names":[],"mappings":"AAGA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAKnC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/manifests/index.ts"],"names":[],"mappings":"AAGA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAKnC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInC,CAAC"}