@noya-app/noya-designsystem 0.1.76 → 0.1.77

package/dist/index.js

@@ -3176,6 +3176,7 @@ __export(src_exports, {
   FullscreenDialog: () => FullscreenDialog,
   GlobalInputBlurProvider: () => GlobalInputBlurProvider,
   Grid: () => Grid,
+  GridBackground: () => GridBackground,
   GridView: () => GridView,
   Heading1: () => Heading1,
   Heading2: () => Heading2,
@@ -3211,6 +3212,7 @@ __export(src_exports, {
   Message: () => Message,
   Navigator: () => Navigator,
   OpenPortalsProvider: () => OpenPortalsProvider,
+  OverlayToolbar: () => OverlayToolbar,
   PipelineResultLayout: () => PipelineResultLayout,
   PipelineResultLink: () => PipelineResultLink,
   Popover: () => Popover,
@@ -3313,8 +3315,10 @@ __export(src_exports, {
   separator: () => separator,
   styles: () => styles,
   textStyles: () => textStyles,
+  toolbarTransparentStyle: () => toolbarTransparentStyle,
   updateSelection: () => updateSelection,
   useAutoResize: () => useAutoResize,
+  useBindKeyboardShortcutsForMenuItems: () => useBindKeyboardShortcutsForMenuItems,
   useComboboxState: () => useComboboxState,
   useCurrentFloatingWindowInternal: () => useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration: () => useDesignSystemConfiguration,
@@ -3345,6 +3349,7 @@ __export(src_exports, {
   useTheme: () => useTheme,
   useWorkspaceSide: () => useWorkspaceSide,
   validateDropIndicator: () => validateDropIndicator,
+  whiteboardProseTheme: () => whiteboardProseTheme,
   withDragProvider: () => withDragProvider,
   withSeparatorElements: () => withSeparatorElements
 });
@@ -6142,7 +6147,8 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     emptyState,
     contentStyle,
     title,
-    icon
+    icon,
+    modal = true
   } = props;
   const [open, setOpen] = useControlledOrUncontrolled({
     value: openProp,
@@ -6163,7 +6169,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     }),
     [contentStyle]
   );
-  return /* @__PURE__ */ import_react38.default.createElement(import_radix_ui5.DropdownMenu.Root, { onOpenChange: setOpen, open }, /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(import_radix_ui5.DropdownMenu.Root, { onOpenChange: setOpen, open, modal }, /* @__PURE__ */ import_react38.default.createElement(
     import_radix_ui5.DropdownMenu.Trigger,
     {
       ref: forwardedRef,
@@ -10728,17 +10734,22 @@ var getContrastRatio = (luminance1, luminance2) => {
 };
 var WHITE_LUMINANCE = 1;
 var BLACK_LUMINANCE = 0;
-var getContrastColorForBackground = (backgroundColor) => {
+var getContrastRatiosForBackground = (backgroundColor) => {
   try {
     const bgRgba = parseColorToRgba(backgroundColor);
     const bgLuminance = getRelativeLuminance(bgRgba.r, bgRgba.g, bgRgba.b);
     const contrastWithWhite = getContrastRatio(bgLuminance, WHITE_LUMINANCE);
     const contrastWithBlack = getContrastRatio(bgLuminance, BLACK_LUMINANCE);
-    return contrastWithWhite > contrastWithBlack ? "#ffffff" : "#000000";
+    return { contrastWithWhite, contrastWithBlack };
   } catch (error) {
-    return "#000000";
+    return null;
   }
 };
+var getContrastColorForBackground = (backgroundColor) => {
+  const ratios = getContrastRatiosForBackground(backgroundColor);
+  if (!ratios) return "#000000";
+  return ratios.contrastWithWhite >= ratios.contrastWithBlack ? "#ffffff" : "#000000";
+};
 
 // ../noya-color/src/cssColor.ts
 var import_noya_geometry2 = require("@noya-app/noya-geometry");
@@ -15226,10 +15237,42 @@ var FloatingWindow = ({
   );
 };
 
-// src/components/InspectorContainer.tsx
+// src/components/GridBackground.tsx
+var import_noya_geometry4 = require("@noya-app/noya-geometry");
 var import_react84 = __toESM(require("react"));
-var InspectorContainer = (0, import_react84.memo)(
-  (0, import_react84.forwardRef)(function InspectorContainer2({
+var GridBackground = ({
+  transform = import_noya_geometry4.AffineTransform.identity,
+  gridSize: gridSizeProp = 10,
+  dotSize = 1
+}) => {
+  const scale = transform.scaleComponents.x;
+  const isScaling = scale !== 1 && transform.scaleComponents.y !== 1;
+  const gridSize = isScaling && scale > 1 ? gridSizeProp * scale : gridSizeProp;
+  return /* @__PURE__ */ import_react84.default.createElement("div", { className: "n-absolute n-inset-0 n-pointer-events-none n-overflow-hidden" }, /* @__PURE__ */ import_react84.default.createElement(
+    "svg",
+    {
+      className: "n-absolute n-inset-0 n-w-full n-h-full",
+      style: { opacity: 0.5 }
+    },
+    /* @__PURE__ */ import_react84.default.createElement("defs", null, /* @__PURE__ */ import_react84.default.createElement(
+      "pattern",
+      {
+        id: "dot-pattern",
+        width: gridSize,
+        height: gridSize,
+        patternUnits: "userSpaceOnUse",
+        patternTransform: `translate(${transform.tx % gridSize} ${transform.ty % gridSize})`
+      },
+      /* @__PURE__ */ import_react84.default.createElement("rect", { x: 0, y: 0, width: dotSize, height: dotSize, fill: "#9ca3af" })
+    )),
+    /* @__PURE__ */ import_react84.default.createElement("rect", { width: "100%", height: "100%", fill: "url(#dot-pattern)" })
+  ));
+};
+
+// src/components/InspectorContainer.tsx
+var import_react85 = __toESM(require("react"));
+var InspectorContainer = (0, import_react85.memo)(
+  (0, import_react85.forwardRef)(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -15238,7 +15281,7 @@ var InspectorContainer = (0, import_react84.memo)(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react84.default.createElement(
+    return /* @__PURE__ */ import_react85.default.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -15253,32 +15296,32 @@ var InspectorContainer = (0, import_react84.memo)(
         }
       },
       header,
-      children ? /* @__PURE__ */ import_react84.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react84.default.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react84.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react84.default.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
+      children ? /* @__PURE__ */ import_react85.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react85.default.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react85.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react85.default.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React81 = __toESM(require("react"));
-var LabeledElementView = React81.memo(function LabeledElementView2({
+var React82 = __toESM(require("react"));
+var LabeledElementView = React82.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React81.Children.toArray(children).flatMap(
-    (child) => React81.isValidElement(child) && child.type === React81.Fragment ? child.props.children : [child]
+  const elementIds = React82.Children.toArray(children).flatMap(
+    (child) => React82.isValidElement(child) && child.type === React82.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React81.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React82.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React81.useRef(null);
-  const refs = React81.useMemo(() => {
+  const containerRef = React82.useRef(null);
+  const refs = React82.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React81.createRef()])
+      serializedIds.split(",").map((id) => [id, React82.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React81.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React81.createElement(
+  const labelElements = React82.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React82.createElement(
       "span",
       {
         key: id,
@@ -15291,7 +15334,7 @@ var LabeledElementView = React81.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React81.useLayoutEffect(() => {
+  React82.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -15353,17 +15396,17 @@ var LabeledElementView = React81.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-1 n-flex-col n-relative", ref: containerRef }, /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-1 n-items-center" }, children), /* @__PURE__ */ React81.createElement("div", { className: "n-relative n-overflow-hidden n-select-none" }, labelElements));
+  return /* @__PURE__ */ React82.createElement("div", { className: "n-flex n-flex-1 n-flex-col n-relative", ref: containerRef }, /* @__PURE__ */ React82.createElement("div", { className: "n-flex n-flex-1 n-items-center" }, children), /* @__PURE__ */ React82.createElement("div", { className: "n-relative n-overflow-hidden n-select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
-var import_react86 = __toESM(require("react"));
+var import_react87 = __toESM(require("react"));
 
 // src/hooks/useIndent.ts
-var import_react85 = __toESM(require("react"));
-var IndentContext = import_react85.default.createContext(0);
+var import_react86 = __toESM(require("react"));
+var IndentContext = import_react86.default.createContext(0);
 var useIndent = () => {
-  return import_react85.default.useContext(IndentContext);
+  return import_react86.default.useContext(IndentContext);
 };
 
 // src/components/LabeledField.tsx
@@ -15375,7 +15418,7 @@ var labeledFieldStyles = (labelType) => cx(
 var labelTypeInset = {
   type: "inset"
 };
-var LabeledField = (0, import_react86.memo)(function LabeledField2({
+var LabeledField = (0, import_react87.memo)(function LabeledField2({
   children,
   label,
   labelType: labelTypeProp,
@@ -15391,15 +15434,15 @@ var LabeledField = (0, import_react86.memo)(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelTypeFromContext = useLabelType();
   const labelType = labelTypeProp ?? labelTypeFromContext;
-  const labeledFieldClasses = (0, import_react86.useMemo)(
+  const labeledFieldClasses = (0, import_react87.useMemo)(
     () => labeledFieldStyles(labelType),
     [labelType]
   );
-  const labelContextValue = (0, import_react86.useMemo)(
+  const labelContextValue = (0, import_react87.useMemo)(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = (0, import_react86.useMemo)(
+  const indentStyle = (0, import_react87.useMemo)(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -15408,20 +15451,20 @@ var LabeledField = (0, import_react86.memo)(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = (0, import_react86.useMemo)(
+  const fieldStyle = (0, import_react87.useMemo)(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = (0, import_react86.useMemo)(
+  const labelStyle = (0, import_react87.useMemo)(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ import_react86.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ import_react86.default.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ import_react86.default.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react86.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react86.default.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ import_react86.default.createElement(
+  return /* @__PURE__ */ import_react87.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ import_react87.default.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ import_react87.default.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react87.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react87.default.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ import_react87.default.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -15430,13 +15473,13 @@ var LabeledField = (0, import_react86.memo)(function LabeledField2({
       ...props
     },
     label
-  ), labelType === "start" ? /* @__PURE__ */ import_react86.default.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/ListMenu.tsx
 var import_noya_icons10 = require("@noya-app/noya-icons");
 var import_noya_utils15 = require("@noya-app/noya-utils");
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 function getItemId(item) {
   if (item.type === "submenu") {
     return item.id;
@@ -15465,7 +15508,7 @@ function ListMenu({
     const regularItems = chunk.filter(
       (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
     );
-    return /* @__PURE__ */ import_react87.default.createElement(
+    return /* @__PURE__ */ import_react88.default.createElement(
       List,
       {
         key: regularItems.map(getItemId).join("-"),
@@ -15477,31 +15520,31 @@ function ListMenu({
         getName: (item) => item.title.toString(),
         selectedIds,
         renderRight,
-        renderThumbnail: ({ item }) => /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-flex-1 n-items-center n-justify-center n-bg-divider-subtle n-w-full n-h-full n-rounded-sm" }, renderIcon(item.icon)),
-        renderDetail: (item) => isSubMenuItem(item) && /* @__PURE__ */ import_react87.default.createElement(import_noya_icons10.ArrowRightIcon, null),
+        renderThumbnail: ({ item }) => /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-flex-1 n-items-center n-justify-center n-bg-divider-subtle n-w-full n-h-full n-rounded-sm" }, renderIcon(item.icon)),
+        renderDetail: (item) => isSubMenuItem(item) && /* @__PURE__ */ import_react88.default.createElement(import_noya_icons10.ArrowRightIcon, null),
         onClickItem: (itemId) => onSelect(itemId)
       }
     );
   });
   return withSeparatorElements(
     lists,
-    /* @__PURE__ */ import_react87.default.createElement(Divider, { overflow: 12, className: "n-my-1" })
+    /* @__PURE__ */ import_react88.default.createElement(Divider, { overflow: 12, className: "n-my-1" })
   );
 }
 
 // src/components/ListNavigator.tsx
-var import_react91 = __toESM(require("react"));
+var import_react92 = __toESM(require("react"));
 
 // src/components/Navigator.tsx
-var import_react90 = __toESM(require("react"));
+var import_react91 = __toESM(require("react"));
 
 // src/components/StackNavigator.tsx
 var import_noya_utils16 = require("@noya-app/noya-utils");
-var import_react89 = __toESM(require("react"));
+var import_react90 = __toESM(require("react"));
 
 // src/components/BaseToolbar.tsx
-var import_react88 = __toESM(require("react"));
-var toolbarStyle = {
+var import_react89 = __toESM(require("react"));
+var toolbarTransparentStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -15512,20 +15555,28 @@ function BaseToolbarContainer({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ import_react88.default.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ import_react88.default.createElement(
+  return /* @__PURE__ */ import_react89.default.createElement(
     "div",
     {
-      className: cx(
-        "n-flex n-items-center n-bg-sidebar-background n-flex-none n-relative",
-        enableAbsoluteBreakpoint && "n-@container/toolbar",
-        innerClassName
-      ),
-      style: {
-        flex: `0 0 ${cssVars.spacing.toolbarHeight}`
-      }
+      className: cx("n-flex n-flex-col", className),
+      style: toolbarTransparentStyle
     },
-    children
-  ), showDivider && /* @__PURE__ */ import_react88.default.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ import_react89.default.createElement(
+      "div",
+      {
+        className: cx(
+          "n-flex n-items-center n-bg-sidebar-background n-flex-none n-relative",
+          enableAbsoluteBreakpoint && "n-@container/toolbar",
+          innerClassName
+        ),
+        style: {
+          flex: `0 0 ${cssVars.spacing.toolbarHeight}`
+        }
+      },
+      children
+    ),
+    showDivider && /* @__PURE__ */ import_react89.default.createElement(Divider, { variant: "strong" })
+  );
 }
 function BaseToolbar({
   children,
@@ -15535,15 +15586,16 @@ function BaseToolbar({
   showDivider = true,
   className,
   innerClassName,
-  enableAbsoluteBreakpoint = true
+  enableAbsoluteBreakpoint = true,
+  enableContainerQuery = true
 }) {
   const childrenContainerClassName = cx(
     "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
-    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+    enableContainerQuery && "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
   );
-  const childrenElement = children && /* @__PURE__ */ import_react88.default.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
-  const leftElement = left && /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
-  return /* @__PURE__ */ import_react88.default.createElement(
+  const childrenElement = children && /* @__PURE__ */ import_react89.default.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
+  const leftElement = left && /* @__PURE__ */ import_react89.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
+  return /* @__PURE__ */ import_react89.default.createElement(
     BaseToolbarContainer,
     {
       showDivider,
@@ -15551,19 +15603,20 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, logo, /* @__PURE__ */ import_react88.default.createElement(DividerVertical, null)),
-    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
+    logo && /* @__PURE__ */ import_react89.default.createElement(import_react89.default.Fragment, null, logo, /* @__PURE__ */ import_react89.default.createElement(DividerVertical, null)),
+    /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10 }),
+    leftElement && !enableContainerQuery && /* @__PURE__ */ import_react89.default.createElement(import_react89.default.Fragment, null, leftElement, childrenElement && /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10 })),
     childrenElement,
-    leftElement && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, childrenElement && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ import_react88.default.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
-    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })
+    leftElement && enableContainerQuery && /* @__PURE__ */ import_react89.default.createElement(import_react89.default.Fragment, null, childrenElement && /* @__PURE__ */ import_react89.default.createElement(import_react89.default.Fragment, null, /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ import_react89.default.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ import_react89.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
+    /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: 10 })
   );
 }
 
 // src/components/StackNavigator.tsx
-var StackRenderContext = import_react89.default.createContext({});
+var StackRenderContext = import_react90.default.createContext({});
 function StackNavigator({
   items,
   onBack,
@@ -15577,15 +15630,15 @@ function StackNavigator({
   renderHeader
 }) {
   const top = items.at(-1);
-  const previousLengthRef = (0, import_react89.useRef)(items.length);
-  const direction = (0, import_react89.useMemo)(() => {
+  const previousLengthRef = (0, import_react90.useRef)(items.length);
+  const direction = (0, import_react90.useMemo)(() => {
     const previous = previousLengthRef.current;
     previousLengthRef.current = items.length;
     return items.length >= previous ? "forward" : "back";
   }, [items.length]);
-  const [cardSizes, setCardSizes] = (0, import_react89.useState)({});
-  const [containerSize, setContainerSize] = (0, import_react89.useState)();
-  const handleSizeChange = (0, import_react89.useCallback)((key, size) => {
+  const [cardSizes, setCardSizes] = (0, import_react90.useState)({});
+  const [containerSize, setContainerSize] = (0, import_react90.useState)();
+  const handleSizeChange = (0, import_react90.useCallback)((key, size) => {
     setCardSizes((prev) => {
       if ((0, import_noya_utils16.isDeepEqual)(prev[key], size)) {
         return prev;
@@ -15593,7 +15646,7 @@ function StackNavigator({
       return { ...prev, [key]: size };
     });
   }, []);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (!top) {
       setContainerSize(void 0);
       return;
@@ -15607,7 +15660,7 @@ function StackNavigator({
       return measuredSize;
     });
   }, [cardSizes, top]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     setCardSizes((prev) => {
       const next = {};
       let changed = false;
@@ -15625,7 +15678,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [items]);
-  const animationStyles = (0, import_react89.useMemo)(() => {
+  const animationStyles = (0, import_react90.useMemo)(() => {
     return {
       entering: {
         opacity: 0,
@@ -15645,7 +15698,7 @@ function StackNavigator({
     };
   }, [direction]);
   const shouldAnimateSize = containerSize !== void 0;
-  const contentStyle = (0, import_react89.useMemo)(() => {
+  const contentStyle = (0, import_react90.useMemo)(() => {
     if (!containerSize) return void 0;
     const style3 = {
       // width: containerSize.width,
@@ -15658,11 +15711,11 @@ function StackNavigator({
     }
     return style3;
   }, [containerSize, shouldAnimateSize]);
-  const [animationStates, setAnimationStates] = (0, import_react89.useState)({});
-  const [renderContentCache, setRenderContentCache] = (0, import_react89.useState)(
+  const [animationStates, setAnimationStates] = (0, import_react90.useState)({});
+  const [renderContentCache, setRenderContentCache] = (0, import_react90.useState)(
     () => Object.fromEntries(items.map((item) => [item.key, item.renderContent]))
   );
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     setRenderContentCache((prev) => {
       let changed = false;
       const next = { ...prev };
@@ -15680,7 +15733,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [animationStates, items]);
-  const handleChildStateChange = (0, import_react89.useCallback)(
+  const handleChildStateChange = (0, import_react90.useCallback)(
     (key, state) => {
       if (!key) return;
       setAnimationStates((prev) => {
@@ -15723,7 +15776,7 @@ function StackNavigator({
     }
     return defaultRenderHeader(headerProps);
   };
-  return /* @__PURE__ */ import_react89.default.createElement(
+  return /* @__PURE__ */ import_react90.default.createElement(
     "div",
     {
       className: cx("n-flex n-flex-col", className),
@@ -15739,13 +15792,13 @@ function StackNavigator({
       }
     },
     showHeader && renderHeaderContent(),
-    /* @__PURE__ */ import_react89.default.createElement(
+    /* @__PURE__ */ import_react90.default.createElement(
       "div",
       {
         className: cx("n-relative n-overflow-hidden", contentClassName),
         style: contentStyle
       },
-      /* @__PURE__ */ import_react89.default.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ import_react89.default.createElement(
+      /* @__PURE__ */ import_react90.default.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ import_react90.default.createElement(
         AnimatePresence,
         {
           duration: 200,
@@ -15754,7 +15807,7 @@ function StackNavigator({
           mode: "wait",
           onChildStateChange: handleChildStateChange
         },
-        /* @__PURE__ */ import_react89.default.createElement(
+        /* @__PURE__ */ import_react90.default.createElement(
           StackNavigatorCard,
           {
             key: top.key,
@@ -15774,15 +15827,15 @@ var StackNavigatorCard = ({
   style: style2,
   className
 }) => {
-  const ref = import_react89.default.useRef(null);
+  const ref = import_react90.default.useRef(null);
   const size = useSize(ref);
-  const renderContext = import_react89.default.useContext(StackRenderContext);
+  const renderContext = import_react90.default.useContext(StackRenderContext);
   const renderContent = renderContext?.[item.key] ?? item.renderContent;
-  import_react89.default.useEffect(() => {
+  import_react90.default.useEffect(() => {
     if (!size || size.width === 0 || size.height === 0) return;
     onSizeChange(item.key, size);
   }, [item.key, onSizeChange, size]);
-  return /* @__PURE__ */ import_react89.default.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
+  return /* @__PURE__ */ import_react90.default.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
 };
 function defaultRenderHeader({
   showDivider,
@@ -15791,13 +15844,14 @@ function defaultRenderHeader({
   right,
   title
 }) {
-  return /* @__PURE__ */ import_react89.default.createElement(
+  return /* @__PURE__ */ import_react90.default.createElement(
     BaseToolbar,
     {
       innerClassName: "n-px-1",
       showDivider,
       enableAbsoluteBreakpoint: false,
-      left: showBackButton && /* @__PURE__ */ import_react89.default.createElement(
+      enableContainerQuery: false,
+      left: showBackButton && /* @__PURE__ */ import_react90.default.createElement(
         Button,
         {
           className: "-n-mx-2",
@@ -15808,7 +15862,7 @@ function defaultRenderHeader({
       ),
       right
     },
-    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react89.default.createElement(Body, null, title) : title
+    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react90.default.createElement(Body, null, title) : title
   );
 }
 
@@ -15820,23 +15874,23 @@ var NavigatorScreen = Object.assign(
     [navigatorScreenIdentifier]: true
   }
 );
-var NavigatorScreenContext = import_react90.default.createContext(null);
+var NavigatorScreenContext = import_react91.default.createContext(null);
 function useNavigator() {
-  const context = import_react90.default.useContext(NavigatorScreenContext);
+  const context = import_react91.default.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigator must be used within a Navigator screen");
   }
   return context.navigation;
 }
 function useNavigatorRoute() {
-  const context = import_react90.default.useContext(NavigatorScreenContext);
+  const context = import_react91.default.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigatorRoute must be used within a Navigator screen");
   }
   return context.route;
 }
 function isNavigatorScreenElement(child) {
-  return (0, import_react90.isValidElement)(child) && Boolean(
+  return (0, import_react91.isValidElement)(child) && Boolean(
     child.type?.[navigatorScreenIdentifier]
   );
 }
@@ -15857,15 +15911,15 @@ function NavigatorImpl({
   showHeader,
   renderHeader
 }) {
-  const screens = (0, import_react90.useMemo)(() => {
+  const screens = (0, import_react91.useMemo)(() => {
     const configs = [];
-    import_react90.Children.forEach(children, (child) => {
+    import_react91.Children.forEach(children, (child) => {
       if (!isNavigatorScreenElement(child)) return;
       configs.push(child.props);
     });
     return configs;
   }, [children]);
-  const screenMap = (0, import_react90.useMemo)(() => {
+  const screenMap = (0, import_react91.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const screen of screens) {
       if (map.has(screen.name)) {
@@ -15877,8 +15931,8 @@ function NavigatorImpl({
     }
     return map;
   }, [screens]);
-  const keyRef = (0, import_react90.useRef)(0);
-  const createEntry = (0, import_react90.useCallback)(
+  const keyRef = (0, import_react91.useRef)(0);
+  const createEntry = (0, import_react91.useCallback)(
     (name, params) => ({
       key: `${String(name)}-${keyRef.current++}`,
       name,
@@ -15892,13 +15946,13 @@ function NavigatorImpl({
       `Navigator: initial route "${String(initialScreenName)}" is not registered as a screen.`
     );
   }
-  const [stack, setStack] = (0, import_react90.useState)(() => [
+  const [stack, setStack] = (0, import_react91.useState)(() => [
     createEntry(
       initialScreenName,
       initialRoute.params
     )
   ]);
-  const push = (0, import_react90.useCallback)(
+  const push = (0, import_react91.useCallback)(
     (...args) => {
       const [name, params] = args;
       const screen = screenMap.get(name);
@@ -15912,7 +15966,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const pop = (0, import_react90.useCallback)(() => {
+  const pop = (0, import_react91.useCallback)(() => {
     setStack((prev) => {
       if (prev.length <= 1) return prev;
       const nextStack = prev.slice(0, -1);
@@ -15928,7 +15982,7 @@ function NavigatorImpl({
       return updatedStack;
     });
   }, [createEntry]);
-  const replace = (0, import_react90.useCallback)(
+  const replace = (0, import_react91.useCallback)(
     (targetKey, name, params) => {
       const screen = screenMap.get(name);
       if (!screen) {
@@ -15954,7 +16008,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const items = (0, import_react90.useMemo)(() => {
+  const items = (0, import_react91.useMemo)(() => {
     return stack.flatMap((entry) => {
       const screen = screenMap.get(entry.name);
       if (!screen) return [];
@@ -15992,7 +16046,7 @@ function NavigatorImpl({
           onBack: headerProps.onBack
         }),
         renderContent: () => {
-          return /* @__PURE__ */ import_react90.default.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
+          return /* @__PURE__ */ import_react91.default.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
         }
       };
     });
@@ -16000,7 +16054,7 @@ function NavigatorImpl({
   const shouldShowHeader = evaluateOption(showHeader, {
     stack
   });
-  return /* @__PURE__ */ import_react90.default.createElement(
+  return /* @__PURE__ */ import_react91.default.createElement(
     StackNavigator,
     {
       items,
@@ -16040,7 +16094,7 @@ function ListNavigator({
   renderHeader,
   selectedIds
 }) {
-  return /* @__PURE__ */ import_react91.default.createElement(
+  return /* @__PURE__ */ import_react92.default.createElement(
     ListNavigatorInternal,
     {
       initialRoute: { name: "screen", params: { id: void 0 } },
@@ -16058,7 +16112,7 @@ function ListNavigator({
       className,
       style: style2
     },
-    /* @__PURE__ */ import_react91.default.createElement(
+    /* @__PURE__ */ import_react92.default.createElement(
       ListNavigatorInternal.Screen,
       {
         name: "screen",
@@ -16073,7 +16127,7 @@ function ListNavigator({
         const nestedItem = items.find(
           (item) => isSubMenuItem(item) && item.id === route.params.id
         );
-        return /* @__PURE__ */ import_react91.default.createElement(
+        return /* @__PURE__ */ import_react92.default.createElement(
           ListMenu,
           {
             items: nestedItem?.items ?? items,
@@ -16098,19 +16152,19 @@ function ListNavigator({
 
 // src/components/Message.tsx
 var import_noya_utils17 = require("@noya-app/noya-utils");
-var import_react92 = __toESM(require("react"));
-var Message = (0, import_react92.memo)(
-  (0, import_react92.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
+var import_react93 = __toESM(require("react"));
+var Message = (0, import_react93.memo)(
+  (0, import_react93.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = (0, import_noya_utils17.uuid)();
     const resolvedUserId = user?.authId ?? user?.connectionId ?? randomId;
     const userMessageBackgroundColor = colorFromString(resolvedUserId);
-    const styles3 = (0, import_react92.useMemo)(
+    const styles3 = (0, import_react93.useMemo)(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ import_react92.default.createElement(
+    return /* @__PURE__ */ import_react93.default.createElement(
       "div",
       {
         className: cx(
@@ -16118,15 +16172,15 @@ var Message = (0, import_react92.memo)(
           role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ import_react92.default.createElement(
+      role === "assistant" ? /* @__PURE__ */ import_react93.default.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ import_react92.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ import_react92.default.createElement(
+        /* @__PURE__ */ import_react93.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ import_react93.default.createElement(
         Avatar,
         {
           userId: resolvedUserId,
@@ -16135,7 +16189,7 @@ var Message = (0, import_react92.memo)(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ import_react92.default.createElement(
+      /* @__PURE__ */ import_react93.default.createElement(
         "div",
         {
           className: cx(
@@ -16155,9 +16209,9 @@ var Message = (0, import_react92.memo)(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 var import_noya_icons11 = require("@noya-app/noya-icons");
-var import_react93 = __toESM(require("react"));
+var import_react94 = __toESM(require("react"));
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ import_react93.default.createElement(
+  return /* @__PURE__ */ import_react94.default.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ import_react94.default.createElement(
     "a",
     {
       href: url,
@@ -16165,15 +16219,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "n-flex n-text-primary hover:n-opacity-80 n-border n-border-divider n-rounded-md"
     },
-    /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ import_react93.default.createElement(import_noya_icons11.Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
-    /* @__PURE__ */ import_react93.default.createElement(DividerVertical, null),
-    /* @__PURE__ */ import_react93.default.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
+    /* @__PURE__ */ import_react94.default.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ import_react94.default.createElement(import_noya_icons11.Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
+    /* @__PURE__ */ import_react94.default.createElement(DividerVertical, null),
+    /* @__PURE__ */ import_react94.default.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
+  return /* @__PURE__ */ import_react94.default.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -16187,7 +16241,7 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/ResizableContainer.tsx
-var import_react94 = __toESM(require("react"));
+var import_react95 = __toESM(require("react"));
 var ResizableContainer = ({
   children,
   minWidth,
@@ -16200,13 +16254,13 @@ var ResizableContainer = ({
   onChangeWidth,
   shouldResetWidthOnGestureEnd: shouldResetWidth
 }) => {
-  const containerRef = (0, import_react94.useRef)(null);
-  const resizeableRef = (0, import_react94.useRef)(null);
-  const handleRef = (0, import_react94.useRef)(null);
-  const clickCounter = (0, import_react94.useRef)(createClickCounter({ delay: 250 }));
-  const [width, setWidth] = (0, import_react94.useState)();
-  const [drag, setDrag] = (0, import_react94.useState)();
-  const handlePointerDown = (0, import_react94.useCallback)(
+  const containerRef = (0, import_react95.useRef)(null);
+  const resizeableRef = (0, import_react95.useRef)(null);
+  const handleRef = (0, import_react95.useRef)(null);
+  const clickCounter = (0, import_react95.useRef)(createClickCounter({ delay: 250 }));
+  const [width, setWidth] = (0, import_react95.useState)();
+  const [drag, setDrag] = (0, import_react95.useState)();
+  const handlePointerDown = (0, import_react95.useCallback)(
     (event) => {
       const containerWidth = containerRef.current?.getBoundingClientRect().width;
       const resizeableWidth = resizeableRef.current?.getBoundingClientRect().width;
@@ -16224,7 +16278,7 @@ var ResizableContainer = ({
     },
     [maxWidth, minWidth]
   );
-  const handlePointerMove = (0, import_react94.useCallback)(
+  const handlePointerMove = (0, import_react95.useCallback)(
     (event) => {
       if (!drag) return;
       const delta = event.clientX - drag.startX;
@@ -16240,7 +16294,7 @@ var ResizableContainer = ({
     },
     [drag, onChangeWidth]
   );
-  const handlePointerUp = (0, import_react94.useCallback)(
+  const handlePointerUp = (0, import_react95.useCallback)(
     (event) => {
       setDrag(void 0);
       handleRef.current?.releasePointerCapture(event.pointerId);
@@ -16256,7 +16310,7 @@ var ResizableContainer = ({
     },
     [shouldResetWidth]
   );
-  return /* @__PURE__ */ import_react94.default.createElement(
+  return /* @__PURE__ */ import_react95.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -16264,7 +16318,7 @@ var ResizableContainer = ({
       style: { position: "relative", ...style2 },
       className
     },
-    /* @__PURE__ */ import_react94.default.createElement(
+    /* @__PURE__ */ import_react95.default.createElement(
       "div",
       {
         ref: resizeableRef,
@@ -16275,7 +16329,7 @@ var ResizableContainer = ({
         }
       },
       typeof children === "function" ? children({ width }) : children,
-      /* @__PURE__ */ import_react94.default.createElement(
+      /* @__PURE__ */ import_react95.default.createElement(
         "div",
         {
           ref: handleRef,
@@ -16300,7 +16354,7 @@ var ResizableContainer = ({
           onPointerUp: handlePointerUp,
           onPointerCancel: handlePointerUp
         },
-        /* @__PURE__ */ import_react94.default.createElement(
+        /* @__PURE__ */ import_react95.default.createElement(
           "div",
           {
             style: {
@@ -16318,7 +16372,7 @@ var ResizableContainer = ({
           }
         )
       ),
-      drag && /* @__PURE__ */ import_react94.default.createElement(
+      drag && /* @__PURE__ */ import_react95.default.createElement(
         "div",
         {
           style: {
@@ -16341,7 +16395,7 @@ function clamp5(value, min, max) {
 
 // src/components/RingProgress.tsx
 var import_noya_utils18 = require("@noya-app/noya-utils");
-var React92 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 function RingProgress({
   value,
   dividedBy = 100,
@@ -16357,14 +16411,14 @@ function RingProgress({
   const safeDivisor = dividedBy > 0 ? dividedBy : 1;
   const clampedRaw = (0, import_noya_utils18.clamp)(value, 0, safeDivisor);
   const clampedPercent = clampedRaw / safeDivisor * 100;
-  const radius = React92.useMemo(() => (size - thickness) / 2, [size, thickness]);
-  const circumference = React92.useMemo(() => 2 * Math.PI * radius, [radius]);
-  const dashOffset = React92.useMemo(
+  const radius = React93.useMemo(() => (size - thickness) / 2, [size, thickness]);
+  const circumference = React93.useMemo(() => 2 * Math.PI * radius, [radius]);
+  const dashOffset = React93.useMemo(
     () => (100 - clampedPercent) / 100 * circumference,
     [circumference, clampedPercent]
   );
   const trackStroke = trackColor ?? "var(--n-input-background, rgba(0,0,0,0.08))";
-  const colorClass = React92.useMemo(() => {
+  const colorClass = React93.useMemo(() => {
     switch (colorScheme) {
       case "primary":
         return "n-stroke-primary";
@@ -16377,7 +16431,7 @@ function RingProgress({
         return "n-stroke-text";
     }
   }, [colorScheme]);
-  const computedStroke = React92.useMemo(() => {
+  const computedStroke = React93.useMemo(() => {
     if (color) return color;
     switch (colorScheme) {
       case "primary":
@@ -16391,7 +16445,7 @@ function RingProgress({
         return "var(--n-text, currentColor)";
     }
   }, [color, colorScheme]);
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "span",
     {
       className: cx("n-inline-flex n-items-center n-justify-center", className),
@@ -16402,7 +16456,7 @@ function RingProgress({
       "aria-valuemax": safeDivisor,
       "aria-label": ariaLabel
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "svg",
       {
         width: size,
@@ -16410,7 +16464,7 @@ function RingProgress({
         viewBox: `0 0 ${size} ${size}`,
         style: { display: "block" }
       },
-      /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React93.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16421,7 +16475,7 @@ function RingProgress({
           strokeWidth: thickness
         }
       ),
-      /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React93.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16445,13 +16499,13 @@ function RingProgress({
 }
 
 // src/components/ScrollableSidebar.tsx
-var import_react95 = __toESM(require("react"));
+var import_react96 = __toESM(require("react"));
 function ScrollableSidebar({ children }) {
-  return /* @__PURE__ */ import_react95.default.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ import_react95.default.createElement(ScrollArea, null, children));
+  return /* @__PURE__ */ import_react96.default.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ import_react96.default.createElement(ScrollArea, null, children));
 }
 
 // src/components/Section.tsx
-var import_react96 = __toESM(require("react"));
+var import_react97 = __toESM(require("react"));
 var titleIconStyle = {
   marginRight: "6px",
   alignSelf: "flex-start",
@@ -16472,14 +16526,14 @@ function SectionHeader({
   titleClassName,
   onClickTitle
 }) {
-  const headerStyle = (0, import_react96.useMemo)(
+  const headerStyle = (0, import_react97.useMemo)(
     () => ({
       minHeight: INPUT_HEIGHT,
       ...style2
     }),
     [style2]
   );
-  const titleElement = title ? /* @__PURE__ */ import_react96.default.createElement(
+  const titleElement = title ? /* @__PURE__ */ import_react97.default.createElement(
     InspectorPrimitives_exports.Title,
     {
       $textStyle: titleTextStyle,
@@ -16487,16 +16541,16 @@ function SectionHeader({
     },
     title
   ) : null;
-  return /* @__PURE__ */ import_react96.default.createElement(
+  return /* @__PURE__ */ import_react97.default.createElement(
     InspectorPrimitives_exports.SectionHeader,
     {
       style: headerStyle,
       className
     },
-    titleIcon && /* @__PURE__ */ import_react96.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
-    titleElement && /* @__PURE__ */ import_react96.default.createElement(import_react96.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react96.default.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
-    headerSeparator === "space" && /* @__PURE__ */ import_react96.default.createElement(Spacer.Horizontal, null),
-    headerSeparator === "dot" && /* @__PURE__ */ import_react96.default.createElement(
+    titleIcon && /* @__PURE__ */ import_react97.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
+    titleElement && /* @__PURE__ */ import_react97.default.createElement(import_react97.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react97.default.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
+    headerSeparator === "space" && /* @__PURE__ */ import_react97.default.createElement(Spacer.Horizontal, null),
+    headerSeparator === "dot" && /* @__PURE__ */ import_react97.default.createElement(
       Text,
       {
         variant: titleTextStyle,
@@ -16522,7 +16576,7 @@ var SectionInternal = ({
   titleClassName,
   headerStyle: headerStyleProp
 }) => {
-  const style2 = (0, import_react96.useMemo)(
+  const style2 = (0, import_react97.useMemo)(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -16533,15 +16587,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = import_react96.default.Children.toArray(children).some((child) => !!child);
-  const headerStyle = (0, import_react96.useMemo)(
+  const hasChildren = import_react97.default.Children.toArray(children).some((child) => !!child);
+  const headerStyle = (0, import_react97.useMemo)(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       ...headerStyleProp
     }),
     [hasChildren, headerStyleProp]
   );
-  return /* @__PURE__ */ import_react96.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react96.default.createElement(
+  return /* @__PURE__ */ import_react97.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react97.default.createElement(
     SectionHeader,
     {
       style: headerStyle,
@@ -16553,7 +16607,7 @@ var SectionInternal = ({
       right,
       headerSeparator
     }
-  ), /* @__PURE__ */ import_react96.default.createElement(IndentContext.Provider, { value: 0 }, children));
+  ), /* @__PURE__ */ import_react97.default.createElement(IndentContext.Provider, { value: 0 }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -16566,12 +16620,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ import_react96.default.createElement(
+  return /* @__PURE__ */ import_react97.default.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ import_react96.default.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ import_react96.default.createElement(
+      title: /* @__PURE__ */ import_react97.default.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ import_react97.default.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -16582,20 +16636,20 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = (0, import_react96.memo)(function InspectorSection({
+var Section = (0, import_react97.memo)(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ import_react96.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react96.default.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ import_react97.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react97.default.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 var import_radix_ui12 = require("radix-ui");
-var import_react97 = __toESM(require("react"));
-var SegmentedControlContext = (0, import_react97.createContext)({
+var import_react98 = __toESM(require("react"));
+var SegmentedControlContext = (0, import_react98.createContext)({
   colorScheme: "primary"
 });
-var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedControlItem2({
+var SegmentedControlItem = (0, import_react98.forwardRef)(function SegmentedControlItem2({
   value,
   tooltip,
   title,
@@ -16605,8 +16659,8 @@ var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedCont
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme } = (0, import_react97.useContext)(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ import_react97.default.createElement(
+  const { colorScheme } = (0, import_react98.useContext)(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ import_react98.default.createElement(
     import_radix_ui12.ToggleGroup.Item,
     {
       ref: forwardedRef,
@@ -16621,7 +16675,7 @@ var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedCont
         // font weight
         variant === "tabs" ? "n-font-semibold" : variant === "buttons" ? "n-font-medium" : "n-font-normal",
         // focus ring
-        variant === "tabs" ? "" : variant === "buttons" ? "focus-visible:n-ring-2 focus-visible:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all" : colorScheme === "secondary" ? "focus:n-ring-2 focus:n-ring-secondary focus:n-ring-offset-1" : "focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-1",
+        variant === "tabs" ? "" : variant === "buttons" ? "focus:n-ring-2 focus:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all" : colorScheme === "secondary" ? "focus:n-ring-2 focus:n-ring-secondary focus:n-ring-offset-1" : "focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-1",
         // checked
         variant === "tabs" ? "aria-checked:n-text-primary" : variant === "buttons" ? "active:n-text-button-text-active active:n-bg-button-background-active aria-checked:n-text-button-text-active aria-checked:n-bg-button-background-active" : colorScheme === "secondary" ? "aria-checked:n-bg-secondary aria-checked:n-text-white" : colorScheme === "primary" ? "aria-checked:n-bg-primary aria-checked:n-text-white" : "aria-checked:n-bg-segmented-control-item-active-background aria-checked:n-text-segmented-control-item-active-text",
         "focus:n-z-interactable",
@@ -16630,14 +16684,14 @@ var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedCont
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
-        variant === "default" ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0" : variant === "buttons" ? "n-px-1 n-rounded-sm n-max-w-fit" : "n-px-1.5 n-border-y-2 n-border-y-transparent aria-checked:n-border-b-primary",
+        variant === "default" ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0" : variant === "buttons" ? "n-px-1.5 n-rounded-sm n-max-w-fit" : "n-px-1.5 n-border-y-2 n-border-y-transparent aria-checked:n-border-b-primary",
         // icon only buttons
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
         className
       ),
       ...props
     },
-    /* @__PURE__ */ import_react97.default.createElement(
+    /* @__PURE__ */ import_react98.default.createElement(
       "span",
       {
         className: cx(
@@ -16649,7 +16703,7 @@ var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedCont
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ import_react97.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react98.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -16662,16 +16716,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = (0, import_react97.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = (0, import_react98.useMemo)(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = (0, import_react97.useCallback)(
+  const handleValueChange = (0, import_react98.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react97.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react97.default.createElement(
+  return /* @__PURE__ */ import_react98.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react98.default.createElement(
     import_radix_ui12.ToggleGroup.Root,
     {
       id,
@@ -16690,13 +16744,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ import_react97.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ import_react98.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
-var import_react98 = __toESM(require("react"));
+var import_react99 = __toESM(require("react"));
 var import_react_dom4 = require("react-dom");
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -16711,7 +16765,7 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = (0, import_react98.memo)(
+var SelectionToolbarContainer = (0, import_react99.memo)(
   function SelectionToolbarContainer2({
     rect,
     children,
@@ -16725,15 +16779,15 @@ var SelectionToolbarContainer = (0, import_react98.memo)(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = import_react98.default.useRef(null);
+    const containerRef = import_react99.default.useRef(null);
     const size = useSize(containerRef, "width");
-    const virtualRef = (0, import_react98.useMemo)(
+    const virtualRef = (0, import_react99.useMemo)(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ import_react98.default.createElement(
+    const popperContent = /* @__PURE__ */ import_react99.default.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16751,7 +16805,7 @@ var SelectionToolbarContainer = (0, import_react98.memo)(
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      /* @__PURE__ */ import_react98.default.createElement(
+      /* @__PURE__ */ import_react99.default.createElement(
         "div",
         {
           ref: containerRef,
@@ -16768,14 +16822,14 @@ var SelectionToolbarContainer = (0, import_react98.memo)(
         children
       )
     );
-    return /* @__PURE__ */ import_react98.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react98.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom4.createPortal)(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ import_react99.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react99.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom4.createPortal)(popperContent, portalContainer) : popperContent);
   }
 );
 
 // src/components/SelectMenu.tsx
 var import_noya_icons12 = require("@noya-app/noya-icons");
 var import_radix_ui13 = require("radix-ui");
-var import_react99 = __toESM(require("react"));
+var import_react100 = __toESM(require("react"));
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
@@ -16798,7 +16852,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelType = useLabelType();
-  return /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react99.default.createElement(
+  return /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react100.default.createElement(
     Button,
     {
       id,
@@ -16810,10 +16864,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-    label && labelType === "inset" && /* @__PURE__ */ import_react99.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react99.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Value, { placeholder })),
-    /* @__PURE__ */ import_react99.default.createElement(
+    icon && /* @__PURE__ */ import_react100.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
+    label && labelType === "inset" && /* @__PURE__ */ import_react100.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react100.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ import_react100.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.Value, { placeholder })),
+    /* @__PURE__ */ import_react100.default.createElement(
       import_noya_icons12.DropdownChevronIcon,
       {
         className: cx(
@@ -16850,7 +16904,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = (0, import_react99.useState)(open);
+  const [internalOpen, setInternalOpen] = (0, import_react100.useState)(open);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
@@ -16861,8 +16915,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = (0, import_react99.useMemo)(
-    () => /* @__PURE__ */ import_react99.default.createElement(
+  const readOnlyButton = (0, import_react100.useMemo)(
+    () => /* @__PURE__ */ import_react100.default.createElement(
       Button,
       {
         id,
@@ -16872,11 +16926,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ import_react100.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = (0, import_react99.useMemo)(() => {
+  const contentStyle = (0, import_react100.useMemo)(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -16884,7 +16938,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ import_react99.default.createElement(
+  const content = /* @__PURE__ */ import_react100.default.createElement(
     import_radix_ui13.Select.Root,
     {
       value,
@@ -16892,7 +16946,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ import_react99.default.createElement(
+    /* @__PURE__ */ import_react100.default.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -16907,7 +16961,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Portal, null, /* @__PURE__ */ import_react99.default.createElement(
+    /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.Portal, null, /* @__PURE__ */ import_react100.default.createElement(
       import_radix_ui13.Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16918,14 +16972,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react99.default.createElement(
+      /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react100.default.createElement(
         import_noya_icons12.ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
       )),
-      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Viewport, null, /* @__PURE__ */ import_react99.default.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react99.default.createElement(import_noya_icons12.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.Viewport, null, /* @__PURE__ */ import_react100.default.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ import_react100.default.createElement(import_radix_ui13.Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react100.default.createElement(import_noya_icons12.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -16933,12 +16987,12 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 var import_radix_ui14 = require("radix-ui");
-var import_react100 = __toESM(require("react"));
+var import_react101 = __toESM(require("react"));
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var Slider = (0, import_react100.memo)(function Slider2({
+var Slider = (0, import_react101.memo)(function Slider2({
   style: style2,
   className,
   value,
@@ -16952,21 +17006,21 @@ var Slider = (0, import_react100.memo)(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = (0, import_react100.useMemo)(
+  const arrayValue = (0, import_react101.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = (0, import_react100.useCallback)(
+  const handleValueChange = (0, import_react101.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
   const ratio = (arrayValue[0] - min) / (max - min);
-  return /* @__PURE__ */ import_react100.default.createElement(
+  return /* @__PURE__ */ import_react101.default.createElement(
     import_radix_ui14.Slider.Root,
     {
       min,
@@ -16984,7 +17038,7 @@ var Slider = (0, import_react100.memo)(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ import_react100.default.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react100.default.createElement(
+    /* @__PURE__ */ import_react101.default.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -16993,7 +17047,7 @@ var Slider = (0, import_react100.memo)(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
         }
       }
-    ), /* @__PURE__ */ import_react100.default.createElement(
+    ), /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -17003,7 +17057,7 @@ var Slider = (0, import_react100.memo)(function Slider2({
         }
       }
     )),
-    /* @__PURE__ */ import_react100.default.createElement(
+    /* @__PURE__ */ import_react101.default.createElement(
       import_radix_ui14.Slider.Thumb,
       {
         style: thumbStyle,
@@ -17021,28 +17075,28 @@ var Slider = (0, import_react100.memo)(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-var React99 = __toESM(require("react"));
+var React100 = __toESM(require("react"));
 function createSharedDrag() {
-  const dragRegistrationContext = React99.createContext(null);
-  const activeDragContext = React99.createContext(
+  const dragRegistrationContext = React100.createContext(null);
+  const activeDragContext = React100.createContext(
     null
   );
   const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
-  const Provider = (props) => /* @__PURE__ */ React99.createElement(SharedDragProvider, { sharedDragProps, ...props });
+  const Provider = (props) => /* @__PURE__ */ React100.createElement(SharedDragProvider, { sharedDragProps, ...props });
   return {
     Provider,
-    Sortable: (props) => /* @__PURE__ */ React99.createElement(Sortable, { sharedDragProps, ...props }),
+    Sortable: (props) => /* @__PURE__ */ React100.createElement(Sortable, { sharedDragProps, ...props }),
     props: sharedDragProps
   };
 }
 
 // src/components/Stepper.tsx
 var import_noya_utils19 = require("@noya-app/noya-utils");
-var import_react101 = __toESM(require("react"));
-var Stepper = (0, import_react101.memo)(function Stepper2({
+var import_react102 = __toESM(require("react"));
+var Stepper = (0, import_react102.memo)(function Stepper2({
   style: style2,
   className,
   value: valueProp,
@@ -17059,17 +17113,17 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const value = (0, import_react101.useMemo)(() => {
+  const value = (0, import_react102.useMemo)(() => {
     return (0, import_noya_utils19.clamp)(valueProp, min, max);
   }, [valueProp, min, max]);
-  const handleValueChange = (0, import_react101.useCallback)(
+  const handleValueChange = (0, import_react102.useCallback)(
     (value2) => {
       const newValue = (0, import_noya_utils19.clamp)(value2, min, max);
       onValueChange(newValue);
     },
     [onValueChange, min, max]
   );
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react102.default.createElement(
     "div",
     {
       id,
@@ -17081,7 +17135,7 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ import_react101.default.createElement(
+    /* @__PURE__ */ import_react102.default.createElement(
       InputField2.Root,
       {
         className: "n-flex-1",
@@ -17089,7 +17143,7 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
         startClassName: "-n-ml-[3px]",
         endWidth: 17,
         endClassName: "-n-mr-[3px]",
-        start: /* @__PURE__ */ import_react101.default.createElement(
+        start: /* @__PURE__ */ import_react102.default.createElement(
           IconButton,
           {
             iconName: "MinusIcon",
@@ -17103,7 +17157,7 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
             }
           }
         ),
-        end: /* @__PURE__ */ import_react101.default.createElement(
+        end: /* @__PURE__ */ import_react102.default.createElement(
           IconButton,
           {
             iconName: "PlusIcon",
@@ -17118,7 +17172,7 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ import_react101.default.createElement(
+      /* @__PURE__ */ import_react102.default.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -17133,7 +17187,7 @@ var Stepper = (0, import_react101.memo)(function Stepper2({
 
 // src/components/Switch.tsx
 var import_radix_ui15 = require("radix-ui");
-var React101 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -17145,7 +17199,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(
     import_radix_ui15.Switch.Root,
     {
       id,
@@ -17164,12 +17218,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React101.createElement(import_radix_ui15.Switch.Thumb, { className: "n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" })
+    /* @__PURE__ */ React102.createElement(import_radix_ui15.Switch.Thumb, { className: "n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" })
   );
 };
 
 // src/components/Tabs.tsx
-var React102 = __toESM(require("react"));
+var React103 = __toESM(require("react"));
 function Tabs({
   value,
   onValueChange,
@@ -17184,7 +17238,7 @@ function Tabs({
     value,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ React102.createElement("div", { ...props, className: cx("n-flex n-flex-col", props.className) }, /* @__PURE__ */ React102.createElement("div", { className: "n-flex n-flex-row n-px-3" }, /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement("div", { ...props, className: cx("n-flex n-flex-col", props.className) }, /* @__PURE__ */ React103.createElement("div", { className: "n-flex n-flex-row n-px-3" }, /* @__PURE__ */ React103.createElement(
     SegmentedControl,
     {
       className: "n-flex-1",
@@ -17193,11 +17247,11 @@ function Tabs({
       variant,
       items: selectableItems
     }
-  )), /* @__PURE__ */ React102.createElement(Divider, null), renderContent({ value: activeTab }));
+  )), /* @__PURE__ */ React103.createElement(Divider, null), renderContent({ value: activeTab }));
 }
 
 // src/components/UserPicker.tsx
-var import_react102 = __toESM(require("react"));
+var import_react103 = __toESM(require("react"));
 function UserPicker({
   users,
   value,
@@ -17207,27 +17261,27 @@ function UserPicker({
   placeholder = "Search users...",
   ...rest
 }) {
-  const sortedUsers = (0, import_react102.useMemo)(() => {
+  const sortedUsers = (0, import_react103.useMemo)(() => {
     return [...users].sort(
       (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
         sensitivity: "base"
       })
     );
   }, [users]);
-  const usersById = (0, import_react102.useMemo)(() => {
+  const usersById = (0, import_react103.useMemo)(() => {
     return new Map(sortedUsers.map((user) => [user.id, user]));
   }, [sortedUsers]);
-  const items = (0, import_react102.useMemo)(() => {
+  const items = (0, import_react103.useMemo)(() => {
     return sortedUsers.map(createUserMenuItem);
   }, [sortedUsers]);
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react102.useState)(defaultValue2);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react103.useState)(defaultValue2);
   const selectedUserId = isControlled ? value : uncontrolledValue;
-  const selectedItem = (0, import_react102.useMemo)(() => {
+  const selectedItem = (0, import_react103.useMemo)(() => {
     if (!selectedUserId) return void 0;
     return items.find((item) => item.value === selectedUserId);
   }, [items, selectedUserId]);
-  const updateSelectedUserId = (0, import_react102.useCallback)(
+  const updateSelectedUserId = (0, import_react103.useCallback)(
     (userId) => {
       if (!isControlled) {
         setUncontrolledValue(userId);
@@ -17236,14 +17290,14 @@ function UserPicker({
     },
     [isControlled, onChangeUserId]
   );
-  const handleSelectItem = (0, import_react102.useCallback)(
+  const handleSelectItem = (0, import_react103.useCallback)(
     (item) => {
       updateSelectedUserId(item.value);
       onSelectUser?.(usersById.get(item.value));
     },
     [updateSelectedUserId, onSelectUser, usersById]
   );
-  return /* @__PURE__ */ import_react102.default.createElement(
+  return /* @__PURE__ */ import_react103.default.createElement(
     Combobox,
     {
       ...rest,
@@ -17267,7 +17321,7 @@ function createUserMenuItem(user) {
   return {
     value: user.id,
     title,
-    icon: /* @__PURE__ */ import_react102.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react102.default.createElement(
+    icon: /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react103.default.createElement(
       Avatar,
       {
         size: 15 + overflow * 2,
@@ -17286,19 +17340,21 @@ function createUserMenuItem(user) {
 }
 
 // src/components/UserPointer.tsx
-var import_react103 = __toESM(require("react"));
-var UserPointerContainer = (0, import_react103.memo)(function UserPointerContainer2({
+var import_react104 = __toESM(require("react"));
+var UserPointerContainer = (0, import_react104.memo)(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(
     "div",
     {
       style: {
-        transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`,
+        ...point && {
+          transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`
+        },
         transition: "transform 0.075s, opacity 0.2s",
         ...style2
       },
@@ -17311,7 +17367,7 @@ var UserPointerContainer = (0, import_react103.memo)(function UserPointerContain
     children
   );
 });
-var UserNameTag = (0, import_react103.memo)(function UserNameTag2({
+var UserNameTag = (0, import_react104.memo)(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
@@ -17320,7 +17376,7 @@ var UserNameTag = (0, import_react103.memo)(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(
     "span",
     {
       className: cx(
@@ -17339,14 +17395,14 @@ var UserNameTag = (0, import_react103.memo)(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = (0, import_react103.memo)(function PointerIcon({
+var UserPointerIcon = (0, import_react104.memo)(function PointerIcon({
   size,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(
     "svg",
     {
       width: size,
@@ -17361,7 +17417,7 @@ var UserPointerIcon = (0, import_react103.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react103.default.createElement(
+    /* @__PURE__ */ import_react104.default.createElement(
       "polygon",
       {
         points,
@@ -17374,7 +17430,7 @@ var UserPointerIcon = (0, import_react103.memo)(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = (0, import_react103.memo)(function UserPointer2({
+var UserPointer = (0, import_react104.memo)(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -17387,22 +17443,22 @@ var UserPointer = (0, import_react103.memo)(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = (0, import_react103.useMemo)(
+  const userBackgroundColor = (0, import_react104.useMemo)(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = (0, import_react103.useMemo)(
+  const pointerOverlapStyle = (0, import_react104.useMemo)(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = (0, import_react103.useMemo)(
+  const nameTagOverlapStyle = (0, import_react104.useMemo)(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(
     UserPointerContainer,
     {
       point,
@@ -17410,14 +17466,14 @@ var UserPointer = (0, import_react103.memo)(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react103.default.createElement(
+    name && /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react104.default.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ import_react103.default.createElement(
+    ), /* @__PURE__ */ import_react104.default.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -17433,10 +17489,78 @@ var UserPointer = (0, import_react103.memo)(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
-var import_react110 = __toESM(require("react"));
+var import_react112 = __toESM(require("react"));
+
+// src/components/OverlayToolbar.tsx
+var import_react105 = __toESM(require("react"));
+var panelClassName = "n-pointer-events-auto n-inline-flex n-items-center n-gap-toolbar-separator n-rounded-3xl n-border n-border-divider n-bg-sidebar-background n-px-3 n-py-2.5 n-shadow-2xl";
+function OverlayToolbar({
+  left,
+  right,
+  overlayLayout = "bottomCenterTopRight",
+  className,
+  style: style2
+}) {
+  const resolvedLayout = overlayLayout === "topLeftTopRight" ? "topLeftTopRight" : "bottomCenterTopRight";
+  const panelStyle = (0, import_react105.useMemo)(
+    () => ({
+      ...toolbarTransparentStyle,
+      ...style2
+    }),
+    [style2]
+  );
+  const renderLeftPanel = (overlayId) => {
+    if (!left) return null;
+    return /* @__PURE__ */ import_react105.default.createElement(
+      "div",
+      {
+        className: panelClassName,
+        "data-embedded-overlay-id": overlayId,
+        style: panelStyle
+      },
+      left
+    );
+  };
+  return /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, resolvedLayout === "bottomCenterTopRight" ? /* @__PURE__ */ import_react105.default.createElement(
+    "div",
+    {
+      className: cx(
+        "n-pointer-events-none n-absolute n-bottom-0 n-left-0 n-right-0 n-flex n-justify-center n-px-6 n-pb-6",
+        className
+      )
+    },
+    renderLeftPanel("noya-toolbar-bottom-center")
+  ) : /* @__PURE__ */ import_react105.default.createElement(
+    "div",
+    {
+      className: cx(
+        "n-pointer-events-none n-absolute n-top-0 n-left-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+        className
+      )
+    },
+    renderLeftPanel("noya-toolbar-top-left")
+  ), right && /* @__PURE__ */ import_react105.default.createElement(
+    "div",
+    {
+      className: cx(
+        "n-pointer-events-none n-absolute n-top-0 n-right-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+        className
+      )
+    },
+    /* @__PURE__ */ import_react105.default.createElement(
+      "div",
+      {
+        className: panelClassName,
+        "data-embedded-overlay-id": "noya-toolbar-top-right",
+        style: panelStyle
+      },
+      right
+    )
+  ));
+}
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react107 = __toESM(require("react"));
+var import_react109 = __toESM(require("react"));
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -17445,17 +17569,17 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-var import_react106 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 
 // src/components/Toolbar.tsx
 var import_noya_keymap6 = require("@noya-app/noya-keymap");
-var import_react105 = __toESM(require("react"));
+var import_react107 = __toESM(require("react"));
 
 // src/components/ToolbarDrawer.tsx
-var import_react104 = __toESM(require("react"));
-var ToolbarDrawer = (0, import_react104.memo)(
-  (0, import_react104.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react104.default.createElement(
+var import_react106 = __toESM(require("react"));
+var ToolbarDrawer = (0, import_react106.memo)(
+  (0, import_react106.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
+    return /* @__PURE__ */ import_react106.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react106.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",
@@ -17471,25 +17595,26 @@ var ToolbarDrawer = (0, import_react104.memo)(
 
 // src/components/Toolbar.tsx
 var SIDE_OFFSET = 6;
-var ToolbarMenuContext = (0, import_react105.createContext)({});
+var ToolbarMenuContext = (0, import_react107.createContext)({});
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = import_react105.default.useState(false);
-  return /* @__PURE__ */ import_react105.default.createElement(
+  const [open, setOpen] = import_react107.default.useState(false);
+  return /* @__PURE__ */ import_react107.default.createElement(
     DropdownMenu,
     {
       open,
       onOpenChange: setOpen,
       items: item.items,
+      modal: false,
       onSelect: (value) => {
         if (onSelectMenuItem && value) {
           onSelectMenuItem(value);
         }
       }
     },
-    /* @__PURE__ */ import_react105.default.createElement(
+    /* @__PURE__ */ import_react107.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17505,7 +17630,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react105.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react105.default.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react107.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react107.default.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17519,8 +17644,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = import_react105.default.useState(false);
-  const content = /* @__PURE__ */ import_react105.default.createElement("span", null, /* @__PURE__ */ import_react105.default.createElement(
+  const [open, setOpen] = import_react107.default.useState(false);
+  const content = /* @__PURE__ */ import_react107.default.createElement("span", null, /* @__PURE__ */ import_react107.default.createElement(
     Popover,
     {
       open,
@@ -17529,7 +17654,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ import_react105.default.createElement(
+      trigger: /* @__PURE__ */ import_react107.default.createElement(
         Button,
         {
           disabled,
@@ -17542,7 +17667,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ import_react105.default.createElement(
+  return tooltip && !open ? /* @__PURE__ */ import_react107.default.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17562,7 +17687,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ import_react105.default.createElement(
+  const content = /* @__PURE__ */ import_react107.default.createElement(
     Button,
     {
       as,
@@ -17579,7 +17704,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_react105.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react105.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ import_react107.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react107.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17591,17 +17716,17 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   displayFilter,
   dividerOverflow: dividerOverflowProp
 }) {
-  const { dividerOverflow: contextDividerOverflow } = (0, import_react105.useContext)(ToolbarMenuContext);
+  const { dividerOverflow: contextDividerOverflow } = (0, import_react107.useContext)(ToolbarMenuContext);
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ import_react105.default.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ import_react107.default.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ import_react105.default.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ import_react107.default.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ import_react105.default.createElement(
+    return /* @__PURE__ */ import_react107.default.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17613,7 +17738,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ import_react105.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ import_react107.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17625,8 +17750,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ import_react105.default.createElement(
+  return /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react107.default.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17642,6 +17767,14 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
     );
   }));
 });
+function useBindKeyboardShortcutsForMenuItems(items, onSelectMenuItem) {
+  return (0, import_noya_keymap6.useKeyboardShortcuts)(
+    import_react107.default.useMemo(
+      () => onSelectMenuItem ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem) : {},
+      [items, onSelectMenuItem]
+    )
+  );
+}
 function Toolbar({
   children,
   logo,
@@ -17651,21 +17784,19 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = import_react105.default.useMemo(
+  const allMenuItems = import_react107.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
-  (0, import_noya_keymap6.useKeyboardShortcuts)(
-    import_react105.default.useMemo(
-      () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
-      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
-    )
+  useBindKeyboardShortcutsForMenuItems(
+    allMenuItems,
+    shouldBindKeyboardShortcuts ? onSelectMenuItem : void 0
   );
-  return /* @__PURE__ */ import_react105.default.createElement(
+  return /* @__PURE__ */ import_react107.default.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react105.default.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react107.default.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17673,7 +17804,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react105.default.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react107.default.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17694,19 +17825,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = (0, import_react106.useMemo)(() => {
+  const style2 = (0, import_react108.useMemo)(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ import_react106.default.createElement(
+  return /* @__PURE__ */ import_react108.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_react106.default.createElement(
+    /* @__PURE__ */ import_react108.default.createElement(
       ToolbarMenu,
       {
         items,
@@ -17734,12 +17865,12 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   onChangeLeftTab,
   compactDrawerMenu
 }) {
-  const portalContainer = (0, import_react107.useRef)(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react107.useState)({
+  const portalContainer = (0, import_react109.useRef)(null);
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react109.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = (0, import_react107.useMemo)(
+  const allTabItems = (0, import_react109.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17747,16 +17878,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = (0, import_react107.useMemo)(
+  const allSelectableTabItems = (0, import_react109.useMemo)(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = (0, import_react107.useMemo)(
+  const leftSelectableTabItems = (0, import_react109.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = (0, import_react107.useMemo)(
+  const rightSelectableTabItems = (0, import_react109.useMemo)(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -17793,14 +17924,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ import_react107.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, /* @__PURE__ */ import_react107.default.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react109.default.createElement(import_react109.default.Fragment, null, /* @__PURE__ */ import_react109.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17809,8 +17940,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ import_react107.default.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ import_react107.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_react107.default.createElement(
+    ), /* @__PURE__ */ import_react109.default.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ import_react109.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_react109.default.createElement(
       Button,
       {
         variant: "none",
@@ -17833,8 +17964,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react107.default.createElement(
+    /* @__PURE__ */ import_react109.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ import_react109.default.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
@@ -17855,7 +17986,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react107.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react109.default.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17881,7 +18012,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-var import_react108 = __toESM(require("react"));
+var import_react110 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/components/workspace/panelStorage.ts
@@ -18047,11 +18178,11 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   onChangeRightTab,
   compactDrawerMenu
 }) {
-  const panelGroupRef = (0, import_react108.useRef)(null);
+  const panelGroupRef = (0, import_react110.useRef)(null);
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = (0, import_react108.useMemo)(() => {
+  const autoSaveId = (0, import_react110.useMemo)(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -18078,7 +18209,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react108.useMemo)(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react110.useMemo)(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -18087,7 +18218,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       hasRightPanel
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
-  const handleLeftTabChange = (0, import_react108.useCallback)(
+  const handleLeftTabChange = (0, import_react110.useCallback)(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -18104,7 +18235,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = (0, import_react108.useCallback)(
+  const handleRightTabChange = (0, import_react110.useCallback)(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -18121,7 +18252,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = (0, import_react108.useCallback)(
+  const handleLayoutChange = (0, import_react110.useCallback)(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -18139,7 +18270,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__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react110.default.createElement(
     import_react_resizable_panels.PanelGroup,
     {
       ref: panelGroupRef,
@@ -18150,7 +18281,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react108.default.createElement(import_react108.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react108.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react110.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -18159,7 +18290,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react108.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react108.default.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react110.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react110.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -18172,8 +18303,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react108.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ import_react108.default.createElement(
+    ), /* @__PURE__ */ import_react110.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ import_react110.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: CONTENT_AREA_ID,
@@ -18184,7 +18315,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react108.default.createElement(import_react108.default.Fragment, null, /* @__PURE__ */ import_react108.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react108.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, /* @__PURE__ */ import_react110.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react110.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -18197,7 +18328,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react108.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react108.default.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react110.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react110.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -18219,11 +18350,11 @@ function renderPanelChildren(fn, props) {
 }
 
 // src/components/workspace/WorkspaceSideContext.tsx
-var import_react109 = require("react");
-var WorkspaceSideContext = (0, import_react109.createContext)({});
+var import_react111 = require("react");
+var WorkspaceSideContext = (0, import_react111.createContext)({});
 var WorkspaceSideProvider = WorkspaceSideContext.Provider;
 function useWorkspaceSide() {
-  return (0, import_react109.useContext)(WorkspaceSideContext);
+  return (0, import_react111.useContext)(WorkspaceSideContext);
 }
 
 // src/components/workspace/WorkspaceLayout.tsx
@@ -18257,6 +18388,10 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   className,
   style: style2,
   toolbar,
+  toolbarVariant = "default",
+  overlayToolbarLeft,
+  overlayToolbarRight,
+  overlayLayout,
   children,
   sideType = "auto",
   sideTypeBreakpoint = 800,
@@ -18286,7 +18421,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   theme,
   compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = import_react110.default.useRef(null);
+  const containerRef = import_react112.default.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -18317,8 +18452,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     rightSidebarMinPercentage,
     rightSidebarMaxPercentage
   );
-  const leftSidebarRef = (0, import_react110.useRef)(null);
-  const rightSidebarRef = (0, import_react110.useRef)(null);
+  const leftSidebarRef = (0, import_react112.useRef)(null);
+  const rightSidebarRef = (0, import_react112.useRef)(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -18329,7 +18464,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     onChange: onChangeRightTab,
     defaultValue: getFirstTabValue(rightTabItems, "")
   });
-  (0, import_react110.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react112.useImperativeHandle)(forwardedRef, () => ({
     setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -18387,56 +18522,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_react110.useCallback)(() => {
+  const closeLeftSidebar = (0, import_react112.useCallback)(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = (0, import_react110.useCallback)(() => {
+  const closeRightSidebar = (0, import_react112.useCallback)(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = (0, import_react110.useMemo)(() => {
+  const leftChildrenProps = (0, import_react112.useMemo)(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = (0, import_react110.useMemo)(() => {
+  const rightChildrenProps = (0, import_react112.useMemo)(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = (0, import_react110.useMemo)(() => {
+  const leftSidebarProviderValue = (0, import_react112.useMemo)(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = (0, import_react110.useMemo)(() => {
+  const rightSidebarProviderValue = (0, import_react112.useMemo)(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react110.default.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react112.default.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ import_react110.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ import_react112.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react110.default.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react112.default.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ import_react110.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ import_react112.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ import_react110.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = (0, import_react110.useMemo)(
+  const centerPanel = /* @__PURE__ */ import_react112.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = (0, import_react112.useMemo)(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -18454,7 +18589,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = (0, import_react110.useMemo)(
+  const rightSidebarOptions = (0, import_react112.useMemo)(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18474,7 +18609,8 @@ 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_react110.default.createElement(
+  const isOverlay = toolbarVariant === "overlay";
+  return /* @__PURE__ */ import_react112.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -18486,8 +18622,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       style: style2,
       "data-theme": theme
     },
-    toolbar,
-    /* @__PURE__ */ import_react110.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react110.default.createElement(
+    !isOverlay && toolbar,
+    /* @__PURE__ */ import_react112.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react112.default.createElement(import_react112.default.Fragment, null, /* @__PURE__ */ import_react112.default.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18507,15 +18643,22 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         rightSidebarRef,
         compactDrawerMenu
       }
-    ))
+    ), isOverlay && /* @__PURE__ */ import_react112.default.createElement(
+      OverlayToolbar,
+      {
+        left: overlayToolbarLeft,
+        right: overlayToolbarRight,
+        overlayLayout
+      }
+    )))
   );
 });
-var PanelInner = (0, import_react110.memo)(function PanelInner2({
+var PanelInner = (0, import_react112.memo)(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ import_react110.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     "div",
     {
       style: style2,
@@ -18530,22 +18673,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-var React111 = __toESM(require("react"));
-var ImageDataContext = React111.createContext(
+var React113 = __toESM(require("react"));
+var ImageDataContext = React113.createContext(
   void 0
 );
-var ImageDataProvider = React111.memo(function ImageDataProvider2({
+var ImageDataProvider = React113.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React111.useMemo(
+  const contextValue = React113.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React111.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React113.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React111.useContext(ImageDataContext);
+  const value = React113.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -18562,9 +18705,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-var import_react111 = require("react");
+var import_react113 = require("react");
 function useTheme() {
-  const [theme, setTheme] = (0, import_react111.useState)("light");
+  const [theme, setTheme] = (0, import_react113.useState)("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -18576,7 +18719,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react111.useEffect)(() => {
+  (0, import_react113.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -18596,6 +18739,24 @@ function useTheme() {
 
 // src/theme/proseTheme.ts
 var proseTheme = "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";
+var whiteboardProseTheme = (isDark) => [
+  "n-prose",
+  "n-prose-sm",
+  "n-max-w-none",
+  isDark ? "n-prose-invert n-text-white" : "",
+  "prose-p:n-m-0",
+  "prose-ul:n-m-0",
+  "prose-ol:n-m-0",
+  "prose-li:n-m-0",
+  "prose-li:n-p-0",
+  "prose-a:n-text-inherit",
+  "prose-strong:n-text-inherit",
+  "prose-em:n-italic",
+  "prose-ol:n-list-inside",
+  "prose-ul:n-list-inside",
+  "prose-ol:n-pl-0",
+  "prose-ul:n-pl-0"
+].join(" ");
 
 // src/utils/createSectionedMenu.ts
 function withSeparators(elements2, separator2) {
@@ -18699,11 +18860,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils21 = require("@noya-app/noya-utils");
-var React112 = __toESM(require("react"));
+var React114 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React112.memo(function DimensionInput2({
+var DimensionInput = React114.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -18713,15 +18874,15 @@ var DimensionInput = React112.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React112.useCallback(
+  const handleNudgeValue = React114.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React112.useCallback(
+  const handleSetValue = React114.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React112.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React112.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React114.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React114.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React114.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils21.round)(value, 2),
@@ -18748,8 +18909,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react112 = __toESM(require("react"));
-var Section2 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var import_react114 = __toESM(require("react"));
+var Section2 = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "div",
   {
     ref,
@@ -18757,8 +18918,8 @@ var Section2 = (0, import_react112.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader2 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = (0, import_react112.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var SectionHeader2 = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = (0, import_react114.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "div",
   {
     ref,
@@ -18769,7 +18930,7 @@ var Title = (0, import_react112.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var Row = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "div",
   {
     ref,
@@ -18777,7 +18938,7 @@ var Row = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @
     ...props
   }
 ));
-var Column = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var Column = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "div",
   {
     ref,
@@ -18785,7 +18946,7 @@ var Column = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var Checkbox3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var Checkbox3 = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "input",
   {
     ref,
@@ -18794,7 +18955,7 @@ var Checkbox3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var Text3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
+var Text3 = (0, import_react114.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react114.default.createElement(
   "span",
   {
     ref,
@@ -18802,14 +18963,14 @@ var Text3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react112.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react112.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react112.forwardRef)(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ import_react114.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react114.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react114.forwardRef)(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react112.default.createElement(
+  return /* @__PURE__ */ import_react114.default.createElement(
     "label",
     {
       ref,
@@ -18821,7 +18982,7 @@ var RowLabel = (0, import_react112.forwardRef)(function RowLabel2({
     }
   );
 });
-var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react114.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -18829,7 +18990,7 @@ var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react112.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react112.default.createElement(Column, null, /* @__PURE__ */ import_react112.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react112.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react112.default.createElement(Row, null, children)));
+  return /* @__PURE__ */ import_react114.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react114.default.createElement(Column, null, /* @__PURE__ */ import_react114.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react114.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react114.default.createElement(Row, null, children)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -18888,6 +19049,7 @@ var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   FullscreenDialog,
   GlobalInputBlurProvider,
   Grid,
+  GridBackground,
   GridView,
   Heading1,
   Heading2,
@@ -18923,6 +19085,7 @@ var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   Message,
   Navigator,
   OpenPortalsProvider,
+  OverlayToolbar,
   PipelineResultLayout,
   PipelineResultLink,
   Popover,
@@ -19025,8 +19188,10 @@ var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   separator,
   styles,
   textStyles,
+  toolbarTransparentStyle,
   updateSelection,
   useAutoResize,
+  useBindKeyboardShortcutsForMenuItems,
   useComboboxState,
   useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
@@ -19057,6 +19222,7 @@ var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   useTheme,
   useWorkspaceSide,
   validateDropIndicator,
+  whiteboardProseTheme,
   withDragProvider,
   withSeparatorElements
 });