@noya-app/noya-designsystem 0.1.70 → 0.1.71

package/dist/index.mjs

@@ -4951,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();
@@ -4979,6 +4987,9 @@ function InputFieldNumberInput(props) {
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
+        if (triggersOnEmpty) {
+          onChange?.(0, { isEmpty: true });
+        }
         return;
       }
       if (value2.endsWith(".")) {
@@ -4988,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) => {
@@ -10920,6 +10931,7 @@ var Combobox = memoGeneric(
     openMenuBehavior = "showFilteredItems",
     onFocus,
     onDeleteWhenEmpty,
+    iconPosition = "right",
     ...rest
   }, forwardedRef) {
     const props = useMemo27(() => {
@@ -11260,6 +11272,7 @@ var Combobox = memoGeneric(
                 onSelectItem: handleUpdateSelection,
                 onHoverIndex: handleIndexChange,
                 listSize: adjustedListSize,
+                iconPosition,
                 style: {
                   flex: `0 0 ${computedHeight}px`
                 },
@@ -15017,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"
@@ -16822,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,
@@ -16831,7 +16933,7 @@ var UserPointerContainer = memo35(function UserPointerContainer2({
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "div",
     {
       style: {
@@ -16857,7 +16959,7 @@ var UserNameTag = memo35(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "span",
     {
       className: cx(
@@ -16883,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,
@@ -16898,7 +17000,7 @@ var UserPointerIcon = memo35(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "polygon",
       {
         points,
@@ -16924,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,
@@ -16947,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,
@@ -16970,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";
@@ -16988,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",
@@ -17022,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,
@@ -17035,7 +17137,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React104.createElement(
+    /* @__PURE__ */ React105.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17051,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,
@@ -17065,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,
@@ -17075,7 +17177,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ React104.createElement(
+      trigger: /* @__PURE__ */ React105.createElement(
         Button,
         {
           disabled,
@@ -17088,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,
@@ -17108,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,
@@ -17125,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,
@@ -17141,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,
@@ -17159,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,
@@ -17171,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,
@@ -17197,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,
@@ -17219,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,
@@ -17240,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,
@@ -17281,11 +17383,11 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   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 ?? [] : []
@@ -17293,16 +17395,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = useMemo45(
+  const allSelectableTabItems = useMemo46(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = useMemo45(
+  const leftSelectableTabItems = useMemo46(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo45(
+  const rightSelectableTabItems = useMemo46(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -17339,14 +17441,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     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 && !useCompactInToolbar && /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17355,8 +17457,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ React106.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ React106.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__ */ React106.createElement(
+    ), /* @__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",
@@ -17379,8 +17481,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__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,
@@ -17401,7 +17503,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ React106.createElement(
+    rightPanel && /* @__PURE__ */ React107.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17427,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,
@@ -17601,7 +17703,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   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({
@@ -17628,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,
@@ -17637,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()) {
@@ -17654,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()) {
@@ -17671,7 +17773,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = useCallback37(
+  const handleLayoutChange = useCallback38(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -17689,7 +17791,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   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__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -17700,7 +17802,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React107.createElement(React107.Fragment, null, showLeftTabs && /* @__PURE__ */ React107.createElement(
+    leftPanel && /* @__PURE__ */ React108.createElement(React108.Fragment, null, showLeftTabs && /* @__PURE__ */ React108.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17709,7 +17811,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !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,
@@ -17722,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,
@@ -17734,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,
@@ -17747,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",
@@ -17836,7 +17938,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   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;
@@ -17937,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,
@@ -18004,7 +18106,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo47(
+  const rightSidebarOptions = useMemo48(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18024,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,
@@ -18037,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,
@@ -18065,7 +18167,7 @@ var PanelInner = memo37(function PanelInner2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     "div",
     {
       style: style2,
@@ -18080,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");
   }
@@ -18112,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) {
@@ -18249,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,
@@ -18263,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),
@@ -18298,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,
@@ -18310,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,
@@ -18322,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,
@@ -18330,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,
@@ -18338,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,
@@ -18347,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,
@@ -18355,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,
@@ -18382,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,
@@ -18521,6 +18623,7 @@ export {
   Tooltip,
   TreeView,
   UserAvatar,
+  UserPicker,
   UserPointer,
   WorkspaceLayout,
   WorkspaceSideProvider,
@@ -18554,6 +18657,7 @@ export {
   getNextIndex,
   getPipelineResultLink,
   getThumbnailColors,
+  getUserDisplayName,
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
   isPopoverMenuItem,