@noya-app/noya-designsystem 0.1.69 → 0.1.71

package/dist/index.js

@@ -3257,6 +3257,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
   UserAvatar: () => UserAvatar,
+  UserPicker: () => UserPicker,
   UserPointer: () => UserPointer,
   WorkspaceLayout: () => WorkspaceLayout,
   WorkspaceSideProvider: () => WorkspaceSideProvider,
@@ -3290,6 +3291,7 @@ __export(src_exports, {
   getNextIndex: () => getNextIndex,
   getPipelineResultLink: () => getPipelineResultLink,
   getThumbnailColors: () => getThumbnailColors,
+  getUserDisplayName: () => getUserDisplayName,
   isMenuItemSectionHeader: () => isMenuItemSectionHeader,
   isNonSelectableMenuItem: () => isNonSelectableMenuItem,
   isPopoverMenuItem: () => isPopoverMenuItem,
@@ -4193,7 +4195,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",
@@ -5138,7 +5141,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] = (0, import_react29.useState)();
@@ -5166,6 +5177,9 @@ function InputFieldNumberInput(props) {
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
+        if (triggersOnEmpty) {
+          onChange?.(0, { isEmpty: true });
+        }
         return;
       }
       if (value2.endsWith(".")) {
@@ -5175,10 +5189,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 = (0, import_react29.useCallback)(
     (event) => {
@@ -9899,7 +9913,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 })) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -11026,6 +11040,7 @@ var Combobox = memoGeneric(
     openMenuBehavior = "showFilteredItems",
     onFocus,
     onDeleteWhenEmpty,
+    iconPosition = "right",
     ...rest
   }, forwardedRef) {
     const props = (0, import_react72.useMemo)(() => {
@@ -11366,6 +11381,7 @@ var Combobox = memoGeneric(
                 onSelectItem: handleUpdateSelection,
                 onHoverIndex: handleIndexChange,
                 listSize: adjustedListSize,
+                iconPosition,
                 style: {
                   flex: `0 0 ${computedHeight}px`
                 },
@@ -11679,6 +11695,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;
@@ -15106,7 +15125,7 @@ function ListMenu({
 }) {
   const selectedIds = items.flatMap(
     (item) => isSelectableMenuItem(item) && item.checked ? [item.value] : []
-  ).concat(selectedIdsProp);
+  ).concat(selectedIdsProp ?? []);
   let chunks = (0, import_noya_utils15.chunkBy)(
     items,
     (a, b) => a.type !== "separator" && b.type !== "separator"
@@ -16885,16 +16904,105 @@ function Tabs({
   )), /* @__PURE__ */ React101.createElement(Divider, null), renderContent({ value: activeTab }));
 }
 
-// src/components/UserPointer.tsx
+// src/components/UserPicker.tsx
 var import_react101 = __toESM(require("react"));
-var UserPointerContainer = (0, import_react101.memo)(function UserPointerContainer2({
+function UserPicker({
+  users,
+  value,
+  defaultValue: defaultValue2,
+  onChangeUserId,
+  onSelectUser,
+  placeholder = "Search users...",
+  ...rest
+}) {
+  const sortedUsers = (0, import_react101.useMemo)(() => {
+    return [...users].sort(
+      (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
+        sensitivity: "base"
+      })
+    );
+  }, [users]);
+  const usersById = (0, import_react101.useMemo)(() => {
+    return new Map(sortedUsers.map((user) => [user.id, user]));
+  }, [sortedUsers]);
+  const items = (0, import_react101.useMemo)(() => {
+    return sortedUsers.map(createUserMenuItem);
+  }, [sortedUsers]);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react101.useState)(defaultValue2);
+  const selectedUserId = isControlled ? value : uncontrolledValue;
+  const selectedItem = (0, import_react101.useMemo)(() => {
+    if (!selectedUserId) return void 0;
+    return items.find((item) => item.value === selectedUserId);
+  }, [items, selectedUserId]);
+  const updateSelectedUserId = (0, import_react101.useCallback)(
+    (userId) => {
+      if (!isControlled) {
+        setUncontrolledValue(userId);
+      }
+      onChangeUserId?.(userId);
+    },
+    [isControlled, onChangeUserId]
+  );
+  const handleSelectItem = (0, import_react101.useCallback)(
+    (item) => {
+      updateSelectedUserId(item.value);
+      onSelectUser?.(usersById.get(item.value));
+    },
+    [updateSelectedUserId, onSelectUser, usersById]
+  );
+  return /* @__PURE__ */ import_react101.default.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__ */ import_react101.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react101.default.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
+var import_react102 = __toESM(require("react"));
+var UserPointerContainer = (0, import_react102.memo)(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react102.default.createElement(
     "div",
     {
       style: {
@@ -16911,7 +17019,7 @@ var UserPointerContainer = (0, import_react101.memo)(function UserPointerContain
     children
   );
 });
-var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
+var UserNameTag = (0, import_react102.memo)(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
@@ -16920,7 +17028,7 @@ var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react102.default.createElement(
     "span",
     {
       className: cx(
@@ -16939,14 +17047,14 @@ var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
+var UserPointerIcon = (0, import_react102.memo)(function PointerIcon({
   size,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react102.default.createElement(
     "svg",
     {
       width: size,
@@ -16961,7 +17069,7 @@ var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react101.default.createElement(
+    /* @__PURE__ */ import_react102.default.createElement(
       "polygon",
       {
         points,
@@ -16974,7 +17082,7 @@ var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = (0, import_react101.memo)(function UserPointer2({
+var UserPointer = (0, import_react102.memo)(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -16987,22 +17095,22 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = (0, import_react101.useMemo)(
+  const userBackgroundColor = (0, import_react102.useMemo)(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = (0, import_react101.useMemo)(
+  const pointerOverlapStyle = (0, import_react102.useMemo)(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = (0, import_react101.useMemo)(
+  const nameTagOverlapStyle = (0, import_react102.useMemo)(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react102.default.createElement(
     UserPointerContainer,
     {
       point,
@@ -17010,14 +17118,14 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ import_react101.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react101.default.createElement(
+    name && /* @__PURE__ */ import_react102.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react102.default.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ import_react101.default.createElement(
+    ), /* @__PURE__ */ import_react102.default.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -17033,10 +17141,10 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
-var import_react108 = __toESM(require("react"));
+var import_react109 = __toESM(require("react"));
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react105 = __toESM(require("react"));
+var import_react106 = __toESM(require("react"));
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -17045,17 +17153,17 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-var import_react104 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 
 // src/components/Toolbar.tsx
 var import_noya_keymap6 = require("@noya-app/noya-keymap");
-var import_react103 = __toESM(require("react"));
+var import_react104 = __toESM(require("react"));
 
 // src/components/ToolbarDrawer.tsx
-var import_react102 = __toESM(require("react"));
-var ToolbarDrawer = (0, import_react102.memo)(
-  (0, import_react102.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ import_react102.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react102.default.createElement(
+var import_react103 = __toESM(require("react"));
+var ToolbarDrawer = (0, import_react103.memo)(
+  (0, import_react103.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
+    return /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react103.default.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",
@@ -17071,13 +17179,13 @@ var ToolbarDrawer = (0, import_react102.memo)(
 
 // src/components/Toolbar.tsx
 var SIDE_OFFSET = 6;
-var ToolbarMenuContext = (0, import_react103.createContext)({});
+var ToolbarMenuContext = (0, import_react104.createContext)({});
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = import_react103.default.useState(false);
-  return /* @__PURE__ */ import_react103.default.createElement(
+  const [open, setOpen] = import_react104.default.useState(false);
+  return /* @__PURE__ */ import_react104.default.createElement(
     DropdownMenu,
     {
       open,
@@ -17089,7 +17197,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react103.default.createElement(
+    /* @__PURE__ */ import_react104.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17105,7 +17213,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react103.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react103.default.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react104.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react104.default.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17119,8 +17227,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = import_react103.default.useState(false);
-  const content = /* @__PURE__ */ import_react103.default.createElement("span", null, /* @__PURE__ */ import_react103.default.createElement(
+  const [open, setOpen] = import_react104.default.useState(false);
+  const content = /* @__PURE__ */ import_react104.default.createElement("span", null, /* @__PURE__ */ import_react104.default.createElement(
     Popover,
     {
       open,
@@ -17129,7 +17237,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ import_react103.default.createElement(
+      trigger: /* @__PURE__ */ import_react104.default.createElement(
         Button,
         {
           disabled,
@@ -17142,7 +17250,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ import_react103.default.createElement(
+  return tooltip && !open ? /* @__PURE__ */ import_react104.default.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17162,7 +17270,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ import_react103.default.createElement(
+  const content = /* @__PURE__ */ import_react104.default.createElement(
     Button,
     {
       as,
@@ -17179,7 +17287,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__ */ import_react103.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react103.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ import_react104.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react104.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17191,17 +17299,17 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   displayFilter,
   dividerOverflow: dividerOverflowProp
 }) {
-  const { dividerOverflow: contextDividerOverflow } = (0, import_react103.useContext)(ToolbarMenuContext);
+  const { dividerOverflow: contextDividerOverflow } = (0, import_react104.useContext)(ToolbarMenuContext);
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ import_react103.default.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ import_react104.default.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ import_react103.default.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ import_react104.default.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ import_react103.default.createElement(
+    return /* @__PURE__ */ import_react104.default.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17213,7 +17321,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ import_react103.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ import_react104.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17225,8 +17333,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ import_react103.default.createElement(import_react103.default.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(import_react104.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react104.default.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17251,21 +17359,21 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = import_react103.default.useMemo(
+  const allMenuItems = import_react104.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   (0, import_noya_keymap6.useKeyboardShortcuts)(
-    import_react103.default.useMemo(
+    import_react104.default.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react103.default.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react104.default.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17273,7 +17381,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react103.default.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react104.default.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17294,19 +17402,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = (0, import_react104.useMemo)(() => {
+  const style2 = (0, import_react105.useMemo)(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react105.default.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__ */ import_react104.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(
       ToolbarMenu,
       {
         items,
@@ -17331,14 +17439,15 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab
+  onChangeLeftTab,
+  compactDrawerMenu
 }) {
-  const portalContainer = (0, import_react105.useRef)(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react105.useState)({
+  const portalContainer = (0, import_react106.useRef)(null);
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react106.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = (0, import_react105.useMemo)(
+  const allTabItems = (0, import_react106.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17346,77 +17455,100 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const leftSelectableTabItems = (0, import_react105.useMemo)(
+  const allSelectableTabItems = (0, import_react106.useMemo)(
+    () => allTabItems.filter(isSelectableMenuItem),
+    [allTabItems]
+  );
+  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+  const leftSelectableTabItems = (0, import_react106.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = (0, import_react105.useMemo)(
+  const rightSelectableTabItems = (0, import_react106.useMemo)(
     () => (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__ */ import_react105.default.createElement(
+  return /* @__PURE__ */ import_react106.default.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && /* @__PURE__ */ import_react105.default.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, /* @__PURE__ */ import_react106.default.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__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ import_react106.default.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__ */ import_react106.default.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__ */ import_react105.default.createElement(DividerVertical, { className: "n-h-full" }),
-    /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react105.default.createElement(
+    )),
+    /* @__PURE__ */ import_react106.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ import_react106.default.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",
@@ -17431,19 +17563,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react105.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react106.default.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",
@@ -17462,7 +17589,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-var import_react106 = __toESM(require("react"));
+var import_react107 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/components/workspace/panelStorage.ts
@@ -17625,13 +17752,14 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftTabValue,
   rightTabValue,
   onChangeLeftTab,
-  onChangeRightTab
+  onChangeRightTab,
+  compactDrawerMenu
 }) {
-  const panelGroupRef = (0, import_react106.useRef)(null);
+  const panelGroupRef = (0, import_react107.useRef)(null);
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = (0, import_react106.useMemo)(() => {
+  const autoSaveId = (0, import_react107.useMemo)(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -17658,7 +17786,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react106.useMemo)(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react107.useMemo)(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -17667,7 +17795,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       hasRightPanel
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
-  const handleLeftTabChange = (0, import_react106.useCallback)(
+  const handleLeftTabChange = (0, import_react107.useCallback)(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -17684,7 +17812,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = (0, import_react106.useCallback)(
+  const handleRightTabChange = (0, import_react107.useCallback)(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -17701,7 +17829,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = (0, import_react106.useCallback)(
+  const handleLayoutChange = (0, import_react107.useCallback)(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -17716,7 +17844,10 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [setData, propertyKey]
   );
-  return /* @__PURE__ */ import_react106.default.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__ */ import_react107.default.createElement(
     import_react_resizable_panels.PanelGroup,
     {
       ref: panelGroupRef,
@@ -17727,7 +17858,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, leftSidebarOptions.showTabs && leftTabItems && /* @__PURE__ */ import_react106.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react107.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17736,7 +17867,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), leftSidebarOptions.showTabs && leftTabItems && !leftSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react106.default.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react107.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react107.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17749,8 +17880,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react106.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ import_react106.default.createElement(
+    ), /* @__PURE__ */ import_react107.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ import_react107.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: CONTENT_AREA_ID,
@@ -17761,7 +17892,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, /* @__PURE__ */ import_react106.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react106.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, /* @__PURE__ */ import_react107.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react107.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17774,7 +17905,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react106.default.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react107.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react107.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -17796,11 +17927,11 @@ function renderPanelChildren(fn, props) {
 }
 
 // src/components/workspace/WorkspaceSideContext.tsx
-var import_react107 = require("react");
-var WorkspaceSideContext = (0, import_react107.createContext)({});
+var import_react108 = require("react");
+var WorkspaceSideContext = (0, import_react108.createContext)({});
 var WorkspaceSideProvider = WorkspaceSideContext.Provider;
 function useWorkspaceSide() {
-  return (0, import_react107.useContext)(WorkspaceSideContext);
+  return (0, import_react108.useContext)(WorkspaceSideContext);
 }
 
 // src/components/workspace/WorkspaceLayout.tsx
@@ -17860,9 +17991,10 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     defaultCollapsed: rightDefaultCollapsed = false,
     showTabs: rightShowTabs = true
   } = {},
-  theme
+  theme,
+  compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = import_react108.default.useRef(null);
+  const containerRef = import_react109.default.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -17893,8 +18025,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     rightSidebarMinPercentage,
     rightSidebarMaxPercentage
   );
-  const leftSidebarRef = (0, import_react108.useRef)(null);
-  const rightSidebarRef = (0, import_react108.useRef)(null);
+  const leftSidebarRef = (0, import_react109.useRef)(null);
+  const rightSidebarRef = (0, import_react109.useRef)(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -17905,7 +18037,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     onChange: onChangeRightTab,
     defaultValue: getFirstTabValue(rightTabItems, "")
   });
-  (0, import_react108.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react109.useImperativeHandle)(forwardedRef, () => ({
     setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -17963,56 +18095,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 = (0, import_react108.useCallback)(() => {
+  const closeLeftSidebar = (0, import_react109.useCallback)(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = (0, import_react108.useCallback)(() => {
+  const closeRightSidebar = (0, import_react109.useCallback)(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = (0, import_react108.useMemo)(() => {
+  const leftChildrenProps = (0, import_react109.useMemo)(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = (0, import_react108.useMemo)(() => {
+  const rightChildrenProps = (0, import_react109.useMemo)(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = (0, import_react108.useMemo)(() => {
+  const leftSidebarProviderValue = (0, import_react109.useMemo)(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = (0, import_react108.useMemo)(() => {
+  const rightSidebarProviderValue = (0, import_react109.useMemo)(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react108.default.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react109.default.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ import_react108.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ import_react109.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react108.default.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react109.default.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ import_react108.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ import_react109.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ import_react108.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = (0, import_react108.useMemo)(
+  const centerPanel = /* @__PURE__ */ import_react109.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = (0, import_react109.useMemo)(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -18030,7 +18162,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = (0, import_react108.useMemo)(
+  const rightSidebarOptions = (0, import_react109.useMemo)(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18050,7 +18182,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__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -18063,7 +18195,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ import_react108.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react108.default.createElement(
+    /* @__PURE__ */ import_react109.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react109.default.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18080,17 +18212,18 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         centerPanelPercentage,
         autoSavePrefix,
         leftSidebarRef,
-        rightSidebarRef
+        rightSidebarRef,
+        compactDrawerMenu
       }
     ))
   );
 });
-var PanelInner = (0, import_react108.memo)(function PanelInner2({
+var PanelInner = (0, import_react109.memo)(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "div",
     {
       style: style2,
@@ -18105,22 +18238,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-var React109 = __toESM(require("react"));
-var ImageDataContext = React109.createContext(
+var React110 = __toESM(require("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");
   }
@@ -18137,9 +18270,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-var import_react109 = require("react");
+var import_react110 = require("react");
 function useTheme() {
-  const [theme, setTheme] = (0, import_react109.useState)("light");
+  const [theme, setTheme] = (0, import_react110.useState)("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -18151,7 +18284,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react109.useEffect)(() => {
+  (0, import_react110.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -18274,11 +18407,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils21 = require("@noya-app/noya-utils");
-var React110 = __toESM(require("react"));
+var React111 = __toESM(require("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,
@@ -18288,15 +18421,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 : (0, import_noya_utils21.round)(value, 2),
@@ -18323,8 +18456,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react110 = __toESM(require("react"));
-var Section2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var import_react111 = __toESM(require("react"));
+var Section2 = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "div",
   {
     ref,
@@ -18332,8 +18465,8 @@ var Section2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = (0, import_react110.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var SectionHeader2 = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = (0, import_react111.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "div",
   {
     ref,
@@ -18344,7 +18477,7 @@ var Title = (0, import_react110.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Row = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "div",
   {
     ref,
@@ -18352,7 +18485,7 @@ var Row = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @
     ...props
   }
 ));
-var Column = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Column = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "div",
   {
     ref,
@@ -18360,7 +18493,7 @@ var Column = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var Checkbox3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Checkbox3 = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "input",
   {
     ref,
@@ -18369,7 +18502,7 @@ var Checkbox3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var Text3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Text3 = (0, import_react111.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react111.default.createElement(
   "span",
   {
     ref,
@@ -18377,14 +18510,14 @@ var Text3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react110.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react110.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react110.forwardRef)(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ import_react111.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react111.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react111.forwardRef)(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react110.default.createElement(
+  return /* @__PURE__ */ import_react111.default.createElement(
     "label",
     {
       ref,
@@ -18396,7 +18529,7 @@ var RowLabel = (0, import_react110.forwardRef)(function RowLabel2({
     }
   );
 });
-var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react111.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -18404,7 +18537,7 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react110.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react110.default.createElement(Column, null, /* @__PURE__ */ import_react110.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react110.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react110.default.createElement(Row, null, children)));
+  return /* @__PURE__ */ import_react111.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react111.default.createElement(Column, null, /* @__PURE__ */ import_react111.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react111.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react111.default.createElement(Row, null, children)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -18544,6 +18677,7 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   Tooltip,
   TreeView,
   UserAvatar,
+  UserPicker,
   UserPointer,
   WorkspaceLayout,
   WorkspaceSideProvider,
@@ -18577,6 +18711,7 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   getNextIndex,
   getPipelineResultLink,
   getThumbnailColors,
+  getUserDisplayName,
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
   isPopoverMenuItem,