@noya-app/noya-designsystem 0.1.69 → 0.1.71

package/dist/index.mjs

@@ -3973,7 +3973,8 @@ var variantStyles = {
   floating: "n-bg-floating-button n-text-text n-shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:n-opacity-80 active:n-opacity-90",
   thin: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
   none: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
-  ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light"
+  ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+  link: "n-bg-transparent n-text-text hover:n-bg-input-background-light"
 };
 var sizeStyles = {
   small: "n-px-[2px] n-font-sans n-text-[10px] n-font-medium",
@@ -4950,7 +4951,15 @@ function parseNumber(value) {
   return value ? Number(value) : NaN;
 }
 function InputFieldNumberInput(props) {
-  const { value, placeholder, onNudge, onBlur, readOnly, ...rest } = props;
+  const {
+    value,
+    placeholder,
+    onNudge,
+    onBlur,
+    readOnly,
+    triggersOnEmpty,
+    ...rest
+  } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
   const [internalValue, setInternalValue] = useState15();
@@ -4978,6 +4987,9 @@ function InputFieldNumberInput(props) {
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
+        if (triggersOnEmpty) {
+          onChange?.(0, { isEmpty: true });
+        }
         return;
       }
       if (value2.endsWith(".")) {
@@ -4987,10 +4999,10 @@ function InputFieldNumberInput(props) {
       setInternalValue(void 0);
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
-        onChange?.(newValue);
+        onChange?.(newValue, { isEmpty: false });
       }
     },
-    [onChange]
+    [onChange, triggersOnEmpty]
   );
   const handleBlur = useCallback13(
     (event) => {
@@ -9781,7 +9793,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 8 })) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
+  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ React59.createElement(React59.Fragment, null) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -10919,6 +10931,7 @@ var Combobox = memoGeneric(
     openMenuBehavior = "showFilteredItems",
     onFocus,
     onDeleteWhenEmpty,
+    iconPosition = "right",
     ...rest
   }, forwardedRef) {
     const props = useMemo27(() => {
@@ -11259,6 +11272,7 @@ var Combobox = memoGeneric(
                 onSelectItem: handleUpdateSelection,
                 onHoverIndex: handleIndexChange,
                 listSize: adjustedListSize,
+                iconPosition,
                 style: {
                   flex: `0 0 ${computedHeight}px`
                 },
@@ -11580,6 +11594,9 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
+        if (open && event.target === event.currentTarget) {
+          setOpen(false);
+        }
         return;
       }
       const dx = event.clientX - downPosition.x;
@@ -15013,7 +15030,7 @@ function ListMenu({
 }) {
   const selectedIds = items.flatMap(
     (item) => isSelectableMenuItem(item) && item.checked ? [item.value] : []
-  ).concat(selectedIdsProp);
+  ).concat(selectedIdsProp ?? []);
   let chunks = chunkBy2(
     items,
     (a, b) => a.type !== "separator" && b.type !== "separator"
@@ -16818,8 +16835,97 @@ function Tabs({
   )), /* @__PURE__ */ React101.createElement(Divider, null), renderContent({ value: activeTab }));
 }
 
+// src/components/UserPicker.tsx
+import React102, { useCallback as useCallback37, useMemo as useMemo43, useState as useState34 } from "react";
+function UserPicker({
+  users,
+  value,
+  defaultValue: defaultValue2,
+  onChangeUserId,
+  onSelectUser,
+  placeholder = "Search users...",
+  ...rest
+}) {
+  const sortedUsers = useMemo43(() => {
+    return [...users].sort(
+      (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
+        sensitivity: "base"
+      })
+    );
+  }, [users]);
+  const usersById = useMemo43(() => {
+    return new Map(sortedUsers.map((user) => [user.id, user]));
+  }, [sortedUsers]);
+  const items = useMemo43(() => {
+    return sortedUsers.map(createUserMenuItem);
+  }, [sortedUsers]);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState34(defaultValue2);
+  const selectedUserId = isControlled ? value : uncontrolledValue;
+  const selectedItem = useMemo43(() => {
+    if (!selectedUserId) return void 0;
+    return items.find((item) => item.value === selectedUserId);
+  }, [items, selectedUserId]);
+  const updateSelectedUserId = useCallback37(
+    (userId) => {
+      if (!isControlled) {
+        setUncontrolledValue(userId);
+      }
+      onChangeUserId?.(userId);
+    },
+    [isControlled, onChangeUserId]
+  );
+  const handleSelectItem = useCallback37(
+    (item) => {
+      updateSelectedUserId(item.value);
+      onSelectUser?.(usersById.get(item.value));
+    },
+    [updateSelectedUserId, onSelectUser, usersById]
+  );
+  return /* @__PURE__ */ React102.createElement(
+    Combobox,
+    {
+      ...rest,
+      placeholder,
+      mode: "option",
+      items,
+      value: selectedItem,
+      onSelectItem: handleSelectItem,
+      iconPosition: "left"
+    }
+  );
+}
+function getUserDisplayName(user) {
+  const name = user.name?.trim();
+  const email = user.email?.trim();
+  return name || email || "Anonymous user";
+}
+function createUserMenuItem(user) {
+  const title = getUserDisplayName(user);
+  const overflow = 3;
+  return {
+    value: user.id,
+    title,
+    icon: /* @__PURE__ */ React102.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ React102.createElement(
+      Avatar,
+      {
+        size: 15 + overflow * 2,
+        name: title,
+        userId: user.id,
+        image: user.image ?? void 0,
+        className: "n-pointer-events-none",
+        variant: "bare",
+        style: {
+          position: "absolute",
+          inset: -overflow
+        }
+      }
+    ))
+  };
+}
+
 // src/components/UserPointer.tsx
-import React102, { memo as memo35, useMemo as useMemo43 } from "react";
+import React103, { memo as memo35, useMemo as useMemo44 } from "react";
 var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
@@ -16827,7 +16933,7 @@ var UserPointerContainer = memo35(function UserPointerContainer2({
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "div",
     {
       style: {
@@ -16853,7 +16959,7 @@ var UserNameTag = memo35(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "span",
     {
       className: cx(
@@ -16879,7 +16985,7 @@ var UserPointerIcon = memo35(function PointerIcon({
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "svg",
     {
       width: size,
@@ -16894,7 +17000,7 @@ var UserPointerIcon = memo35(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "polygon",
       {
         points,
@@ -16920,22 +17026,22 @@ var UserPointer = memo35(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = useMemo43(
+  const userBackgroundColor = useMemo44(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = useMemo43(
+  const pointerOverlapStyle = useMemo44(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = useMemo43(
+  const nameTagOverlapStyle = useMemo44(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     UserPointerContainer,
     {
       point,
@@ -16943,14 +17049,14 @@ var UserPointer = memo35(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React102.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React102.createElement(
+    name && /* @__PURE__ */ React103.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React103.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React102.createElement(
+    ), /* @__PURE__ */ React103.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -16966,16 +17072,16 @@ var UserPointer = memo35(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React108, {
+import React109, {
   memo as memo37,
-  useCallback as useCallback38,
+  useCallback as useCallback39,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo47,
+  useMemo as useMemo48,
   useRef as useRef30
 } from "react";
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React106, { useMemo as useMemo45, useRef as useRef28, useState as useState34 } from "react";
+import React107, { useMemo as useMemo46, useRef as useRef28, useState as useState35 } from "react";
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -16984,20 +17090,20 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-import React105, { useMemo as useMemo44 } from "react";
+import React106, { useMemo as useMemo45 } from "react";
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React104, {
+import React105, {
   createContext as createContext15,
   useContext as useContext16
 } from "react";
 
 // src/components/ToolbarDrawer.tsx
-import React103, { forwardRef as forwardRef28, memo as memo36 } from "react";
+import React104, { forwardRef as forwardRef28, memo as memo36 } from "react";
 var ToolbarDrawer = memo36(
   forwardRef28(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ React103.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React104.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React104.createElement(
       "div",
       {
         className: "n-absolute n-bottom-full n-left-1/2 -n-translate-x-1/2 n-rounded-t-lg n-border n-border-toolbar-drawer-border n-border-b-transparent n-bg-toolbar-drawer-background -n-z-10",
@@ -17018,8 +17124,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React104.useState(false);
-  return /* @__PURE__ */ React104.createElement(
+  const [open, setOpen] = React105.useState(false);
+  return /* @__PURE__ */ React105.createElement(
     DropdownMenu,
     {
       open,
@@ -17031,7 +17137,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React104.createElement(
+    /* @__PURE__ */ React105.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17047,7 +17153,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React104.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React104.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React105.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React105.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17061,8 +17167,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = React104.useState(false);
-  const content = /* @__PURE__ */ React104.createElement("span", null, /* @__PURE__ */ React104.createElement(
+  const [open, setOpen] = React105.useState(false);
+  const content = /* @__PURE__ */ React105.createElement("span", null, /* @__PURE__ */ React105.createElement(
     Popover,
     {
       open,
@@ -17071,7 +17177,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ React104.createElement(
+      trigger: /* @__PURE__ */ React105.createElement(
         Button,
         {
           disabled,
@@ -17084,7 +17190,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ React104.createElement(
+  return tooltip && !open ? /* @__PURE__ */ React105.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17104,7 +17210,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ React104.createElement(
+  const content = /* @__PURE__ */ React105.createElement(
     Button,
     {
       as,
@@ -17121,7 +17227,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     displayFilter === "iconOnly" ? void 0 : item.title
   );
   const tooltip = item.tooltip ?? (displayFilter === "iconOnly" && item.title ? item.title : void 0);
-  return item.drawer && isActive ? /* @__PURE__ */ React104.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React104.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ React105.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React105.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17137,13 +17243,13 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React104.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ React105.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ React104.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ React105.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React104.createElement(
+    return /* @__PURE__ */ React105.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17155,7 +17261,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ React104.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React105.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17167,8 +17273,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React105.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17193,21 +17299,21 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = React104.useMemo(
+  const allMenuItems = React105.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts3(
-    React104.useMemo(
+    React105.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React104.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React105.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17215,7 +17321,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React104.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React105.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17236,19 +17342,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = useMemo44(() => {
+  const style2 = useMemo45(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(
     "div",
     {
       className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
-    /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React106.createElement(
       ToolbarMenu,
       {
         items,
@@ -17273,14 +17379,15 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab
+  onChangeLeftTab,
+  compactDrawerMenu
 }) {
   const portalContainer = useRef28(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState34({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState35({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = useMemo45(
+  const allTabItems = useMemo46(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17288,77 +17395,100 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const leftSelectableTabItems = useMemo45(
+  const allSelectableTabItems = useMemo46(
+    () => allTabItems.filter(isSelectableMenuItem),
+    [allTabItems]
+  );
+  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+  const leftSelectableTabItems = useMemo46(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo45(
+  const rightSelectableTabItems = useMemo46(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
+  const toggleSidebar = (ref) => {
+    if (ref.current?.isExpanded()) {
+      ref.current?.collapse();
+    } else {
+      ref.current?.expand();
+    }
+  };
+  const ensureExpanded = (ref) => {
+    if (!ref.current?.isExpanded()) {
+      ref.current?.expand();
+    }
+  };
+  const handleSelectTab = (value) => {
+    if (leftSelectableTabItems.some((item) => item.value === value)) {
+      if (value === leftTabValue) {
+        toggleSidebar(leftSidebarRef);
+      } else {
+        ensureExpanded(leftSidebarRef);
+        onChangeLeftTab?.(value);
+      }
+    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
+      if (value === rightTabValue) {
+        toggleSidebar(rightSidebarRef);
+      } else {
+        ensureExpanded(rightSidebarRef);
+        onChangeRightTab?.(value);
+      }
+    }
+  };
   const { activeValue, isSidebarCollapsed } = leftSelectableTabItems.length > 0 && !leftSidebarCollapsed ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed } : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed ? {
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && /* @__PURE__ */ React106.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
         items: allTabItems,
         activeValue,
         isSidebarCollapsed,
-        onChange: (value) => {
-          if (leftSelectableTabItems.some((item) => item.value === value)) {
-            if (value === leftTabValue) {
-              if (leftSidebarRef.current?.isExpanded()) {
-                leftSidebarRef.current?.collapse();
-              } else {
-                leftSidebarRef.current?.expand();
-              }
-            } else {
-              if (!leftSidebarRef.current?.isExpanded()) {
-                leftSidebarRef.current?.expand();
-              }
-              onChangeLeftTab?.(value);
-            }
-          } else if (rightSelectableTabItems.some((item) => item.value === value)) {
-            if (value === rightTabValue) {
-              if (rightSidebarRef.current?.isExpanded()) {
-                rightSidebarRef.current?.collapse();
-              } else {
-                rightSidebarRef.current?.expand();
-              }
-            } else {
-              if (!rightSidebarRef.current?.isExpanded()) {
-                rightSidebarRef.current?.expand();
-              }
-              onChangeRightTab?.(value);
-            }
-          }
+        onChange: (value) => handleSelectTab(value)
+      }
+    ), /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ React107.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ React107.createElement(
+      Button,
+      {
+        variant: "none",
+        className: "n-rounded",
+        style: {
+          width: "var(--n-input-height)",
+          height: "var(--n-input-height)"
+        },
+        icon: allSelectableTabItems[0].icon,
+        tooltip: allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title,
+        active: (() => {
+          const value = allSelectableTabItems[0].value;
+          const isLeftItem = leftSelectableTabItems.some((i) => i.value === value);
+          const isRightItem = rightSelectableTabItems.some((i) => i.value === value);
+          return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
+        })(),
+        onClick: () => {
+          const value = allSelectableTabItems[0].value;
+          handleSelectTab(value);
         }
       }
-    ),
-    hasTabs && /* @__PURE__ */ React106.createElement(DividerVertical, { className: "n-h-full" }),
-    /* @__PURE__ */ React106.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ React106.createElement(
+    )),
+    /* @__PURE__ */ React107.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ React107.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
         className: "n-flex-1",
-        style: {
-          left: 48,
-          maxWidth: "calc(100% - 48px)"
-        },
-        overlayStyle: {
-          left: 48
-        },
+        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
+        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
         open: !leftSidebarCollapsed,
         positioning: "absolute",
         side: "left",
@@ -17373,19 +17503,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ React106.createElement(
+    rightPanel && /* @__PURE__ */ React107.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
         ref: rightSidebarRef,
         className: "n-flex-1",
-        style: {
-          left: 48,
-          maxWidth: "calc(100% - 48px)"
-        },
-        overlayStyle: {
-          left: 48
-        },
+        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
+        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
         open: !rightSidebarCollapsed,
         positioning: "absolute",
         side: "left",
@@ -17404,7 +17529,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React107, { useCallback as useCallback37, useMemo as useMemo46, useRef as useRef29 } from "react";
+import React108, { useCallback as useCallback38, useMemo as useMemo47, useRef as useRef29 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -17571,13 +17696,14 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftTabValue,
   rightTabValue,
   onChangeLeftTab,
-  onChangeRightTab
+  onChangeRightTab,
+  compactDrawerMenu
 }) {
   const panelGroupRef = useRef29(null);
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = useMemo46(() => {
+  const autoSaveId = useMemo47(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -17604,7 +17730,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo46(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo47(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -17613,7 +17739,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       hasRightPanel
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
-  const handleLeftTabChange = useCallback37(
+  const handleLeftTabChange = useCallback38(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -17630,7 +17756,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = useCallback37(
+  const handleRightTabChange = useCallback38(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -17647,7 +17773,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = useCallback37(
+  const handleLayoutChange = useCallback38(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -17662,7 +17788,10 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [setData, propertyKey]
   );
-  return /* @__PURE__ */ React107.createElement(
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems && // When compact drawer UI is enabled, only show the rail when the
+  // sidebar is collapsed (for large screens/panel layout).
+  (!compactDrawerMenu || leftSidebarCollapsed);
+  return /* @__PURE__ */ React108.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -17673,7 +17802,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React107.createElement(React107.Fragment, null, leftSidebarOptions.showTabs && leftTabItems && /* @__PURE__ */ React107.createElement(
+    leftPanel && /* @__PURE__ */ React108.createElement(React108.Fragment, null, showLeftTabs && /* @__PURE__ */ React108.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17682,7 +17811,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), leftSidebarOptions.showTabs && leftTabItems && !leftSidebarCollapsed && /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React107.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React108.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17695,8 +17824,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React107.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ React107.createElement(
+    ), /* @__PURE__ */ React108.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ React108.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -17707,7 +17836,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React107.createElement(
+    rightPanel && /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React108.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17720,7 +17849,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React107.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React108.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -17806,9 +17935,10 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     defaultCollapsed: rightDefaultCollapsed = false,
     showTabs: rightShowTabs = true
   } = {},
-  theme
+  theme,
+  compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = React108.useRef(null);
+  const containerRef = React109.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -17909,56 +18039,56 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = useCallback38(() => {
+  const closeLeftSidebar = useCallback39(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = useCallback38(() => {
+  const closeRightSidebar = useCallback39(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = useMemo47(() => {
+  const leftChildrenProps = useMemo48(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = useMemo47(() => {
+  const rightChildrenProps = useMemo48(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = useMemo47(() => {
+  const leftSidebarProviderValue = useMemo48(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = useMemo47(() => {
+  const rightSidebarProviderValue = useMemo48(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React108.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React109.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ React108.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ React109.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React108.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React109.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ React108.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ React109.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ React108.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = useMemo47(
+  const centerPanel = /* @__PURE__ */ React109.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = useMemo48(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -17976,7 +18106,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo47(
+  const rightSidebarOptions = useMemo48(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -17996,7 +18126,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   );
   const LayoutComponent = sideType === "panel" ? PanelWorkspaceLayout : sideType === "drawer" ? DrawerWorkspaceLayout : parentSize.width > sideTypeBreakpoint ? PanelWorkspaceLayout : DrawerWorkspaceLayout;
   const readyToRender = detectSize === "window" || containerSize && containerSize.width > 0;
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     "div",
     {
       ref: containerRef,
@@ -18009,7 +18139,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React108.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React109.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React109.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18026,7 +18156,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         centerPanelPercentage,
         autoSavePrefix,
         leftSidebarRef,
-        rightSidebarRef
+        rightSidebarRef,
+        compactDrawerMenu
       }
     ))
   );
@@ -18036,7 +18167,7 @@ var PanelInner = memo37(function PanelInner2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     "div",
     {
       style: style2,
@@ -18051,22 +18182,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-import * as React109 from "react";
-var ImageDataContext = React109.createContext(
+import * as React110 from "react";
+var ImageDataContext = React110.createContext(
   void 0
 );
-var ImageDataProvider = React109.memo(function ImageDataProvider2({
+var ImageDataProvider = React110.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React109.useMemo(
+  const contextValue = React110.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React109.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React110.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React109.useContext(ImageDataContext);
+  const value = React110.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -18083,9 +18214,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect23, useState as useState35 } from "react";
+import { useEffect as useEffect23, useState as useState36 } from "react";
 function useTheme() {
-  const [theme, setTheme] = useState35("light");
+  const [theme, setTheme] = useState36("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -18220,11 +18351,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round as round2 } from "@noya-app/noya-utils";
-import * as React110 from "react";
+import * as React111 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React110.memo(function DimensionInput2({
+var DimensionInput = React111.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -18234,15 +18365,15 @@ var DimensionInput = React110.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React110.useCallback(
+  const handleNudgeValue = React111.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React110.useCallback(
+  const handleSetValue = React111.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React110.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React110.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React111.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React111.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round2(value, 2),
@@ -18269,11 +18400,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-import React111, {
+import React112, {
   forwardRef as forwardRef29,
   memo as memo40
 } from "react";
-var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "div",
   {
     ref,
@@ -18281,8 +18412,8 @@ var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "div",
   {
     ref,
@@ -18293,7 +18424,7 @@ var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "div",
   {
     ref,
@@ -18301,7 +18432,7 @@ var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React11
     ...props
   }
 ));
-var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "div",
   {
     ref,
@@ -18309,7 +18440,7 @@ var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "input",
   {
     ref,
@@ -18318,7 +18449,7 @@ var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
+var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
   "span",
   {
     ref,
@@ -18326,14 +18457,14 @@ var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React111.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React111.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var VerticalSeparator = () => /* @__PURE__ */ React112.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React112.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
 var RowLabel = forwardRef29(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(
     "label",
     {
       ref,
@@ -18353,7 +18484,7 @@ var LabeledRow = memo40(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React111.createElement(Row, { id, className }, /* @__PURE__ */ React111.createElement(Column, null, /* @__PURE__ */ React111.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React111.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React111.createElement(Row, null, children)));
+  return /* @__PURE__ */ React112.createElement(Row, { id, className }, /* @__PURE__ */ React112.createElement(Column, null, /* @__PURE__ */ React112.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React112.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React112.createElement(Row, null, children)));
 });
 export {
   AIAssistantInput,
@@ -18492,6 +18623,7 @@ export {
   Tooltip,
   TreeView,
   UserAvatar,
+  UserPicker,
   UserPointer,
   WorkspaceLayout,
   WorkspaceSideProvider,
@@ -18525,6 +18657,7 @@ export {
   getNextIndex,
   getPipelineResultLink,
   getThumbnailColors,
+  getUserDisplayName,
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
   isPopoverMenuItem,