@noya-app/noya-designsystem 0.1.76 → 0.1.77

package/dist/index.mjs

@@ -5956,7 +5956,8 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     emptyState,
     contentStyle,
     title,
-    icon
+    icon,
+    modal = true
   } = props;
   const [open, setOpen] = useControlledOrUncontrolled({
     value: openProp,
@@ -5977,7 +5978,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     }),
     [contentStyle]
   );
-  return /* @__PURE__ */ React29.createElement(RadixDropdownMenu.Root, { onOpenChange: setOpen, open }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(RadixDropdownMenu.Root, { onOpenChange: setOpen, open, modal }, /* @__PURE__ */ React29.createElement(
     RadixDropdownMenu.Trigger,
     {
       ref: forwardedRef,
@@ -10609,17 +10610,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
 import { angleUnitToDegrees, normalizeAngle } from "@noya-app/noya-geometry";
@@ -15132,8 +15138,40 @@ var FloatingWindow = ({
   );
 };
 
+// src/components/GridBackground.tsx
+import { AffineTransform } from "@noya-app/noya-geometry";
+import React80 from "react";
+var GridBackground = ({
+  transform = 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__ */ React80.createElement("div", { className: "n-absolute n-inset-0 n-pointer-events-none n-overflow-hidden" }, /* @__PURE__ */ React80.createElement(
+    "svg",
+    {
+      className: "n-absolute n-inset-0 n-w-full n-h-full",
+      style: { opacity: 0.5 }
+    },
+    /* @__PURE__ */ React80.createElement("defs", null, /* @__PURE__ */ React80.createElement(
+      "pattern",
+      {
+        id: "dot-pattern",
+        width: gridSize,
+        height: gridSize,
+        patternUnits: "userSpaceOnUse",
+        patternTransform: `translate(${transform.tx % gridSize} ${transform.ty % gridSize})`
+      },
+      /* @__PURE__ */ React80.createElement("rect", { x: 0, y: 0, width: dotSize, height: dotSize, fill: "#9ca3af" })
+    )),
+    /* @__PURE__ */ React80.createElement("rect", { width: "100%", height: "100%", fill: "url(#dot-pattern)" })
+  ));
+};
+
 // src/components/InspectorContainer.tsx
-import React80, { forwardRef as forwardRef25, memo as memo26 } from "react";
+import React81, { forwardRef as forwardRef25, memo as memo26 } from "react";
 var InspectorContainer = memo26(
   forwardRef25(function InspectorContainer2({
     header,
@@ -15144,7 +15182,7 @@ var InspectorContainer = memo26(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React80.createElement(
+    return /* @__PURE__ */ React81.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -15159,32 +15197,32 @@ var InspectorContainer = memo26(
         }
       },
       header,
-      children ? /* @__PURE__ */ React80.createElement(ScrollArea, null, /* @__PURE__ */ React80.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React80.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React80.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
+      children ? /* @__PURE__ */ React81.createElement(ScrollArea, null, /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React81.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React81 from "react";
-var LabeledElementView = React81.memo(function LabeledElementView2({
+import * as React82 from "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,
@@ -15197,7 +15235,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();
@@ -15259,17 +15297,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
-import React83, { memo as memo28, useMemo as useMemo33 } from "react";
+import React84, { memo as memo28, useMemo as useMemo33 } from "react";
 
 // src/hooks/useIndent.ts
-import React82 from "react";
-var IndentContext = React82.createContext(0);
+import React83 from "react";
+var IndentContext = React83.createContext(0);
 var useIndent = () => {
-  return React82.useContext(IndentContext);
+  return React83.useContext(IndentContext);
 };
 
 // src/components/LabeledField.tsx
@@ -15327,7 +15365,7 @@ var LabeledField = memo28(function LabeledField2({
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React83.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React83.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React83.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React83.createElement("div", { style: indentStyle }), /* @__PURE__ */ React83.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React84.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React84.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React84.createElement("div", { style: indentStyle }), /* @__PURE__ */ React84.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React84.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -15336,13 +15374,13 @@ var LabeledField = memo28(function LabeledField2({
       ...props
     },
     label
-  ), labelType === "start" ? /* @__PURE__ */ React83.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ React84.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/ListMenu.tsx
 import { ArrowRightIcon } from "@noya-app/noya-icons";
 import { chunkBy as chunkBy2 } from "@noya-app/noya-utils";
-import React84 from "react";
+import React85 from "react";
 function getItemId(item) {
   if (item.type === "submenu") {
     return item.id;
@@ -15371,7 +15409,7 @@ function ListMenu({
     const regularItems = chunk.filter(
       (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
     );
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       List,
       {
         key: regularItems.map(getItemId).join("-"),
@@ -15383,23 +15421,23 @@ function ListMenu({
         getName: (item) => item.title.toString(),
         selectedIds,
         renderRight,
-        renderThumbnail: ({ item }) => /* @__PURE__ */ React84.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__ */ React84.createElement(ArrowRightIcon, null),
+        renderThumbnail: ({ item }) => /* @__PURE__ */ React85.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__ */ React85.createElement(ArrowRightIcon, null),
         onClickItem: (itemId) => onSelect(itemId)
       }
     );
   });
   return withSeparatorElements(
     lists,
-    /* @__PURE__ */ React84.createElement(Divider, { overflow: 12, className: "n-my-1" })
+    /* @__PURE__ */ React85.createElement(Divider, { overflow: 12, className: "n-my-1" })
   );
 }
 
 // src/components/ListNavigator.tsx
-import React88 from "react";
+import React89 from "react";
 
 // src/components/Navigator.tsx
-import React87, {
+import React88, {
   Children as Children4,
   isValidElement as isValidElement5,
   useCallback as useCallback33,
@@ -15410,7 +15448,7 @@ import React87, {
 
 // src/components/StackNavigator.tsx
 import { isDeepEqual as isDeepEqual4 } from "@noya-app/noya-utils";
-import React86, {
+import React87, {
   useCallback as useCallback32,
   useEffect as useEffect22,
   useMemo as useMemo34,
@@ -15419,8 +15457,8 @@ import React86, {
 } from "react";
 
 // src/components/BaseToolbar.tsx
-import React85 from "react";
-var toolbarStyle = {
+import React86 from "react";
+var toolbarTransparentStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -15431,20 +15469,28 @@ function BaseToolbarContainer({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ React85.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.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__ */ React85.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ React86.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__ */ React86.createElement(Divider, { variant: "strong" })
+  );
 }
 function BaseToolbar({
   children,
@@ -15454,15 +15500,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__ */ React85.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
-  const leftElement = left && /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
-  return /* @__PURE__ */ React85.createElement(
+  const childrenElement = children && /* @__PURE__ */ React86.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ React86.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
+  const leftElement = left && /* @__PURE__ */ React86.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
+  return /* @__PURE__ */ React86.createElement(
     BaseToolbarContainer,
     {
       showDivider,
@@ -15470,19 +15517,20 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ React85.createElement(React85.Fragment, null, logo, /* @__PURE__ */ React85.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
+    logo && /* @__PURE__ */ React86.createElement(React86.Fragment, null, logo, /* @__PURE__ */ React86.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 }),
+    leftElement && !enableContainerQuery && /* @__PURE__ */ React86.createElement(React86.Fragment, null, leftElement, childrenElement && /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 })),
     childrenElement,
-    leftElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, childrenElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ React85.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })
+    leftElement && enableContainerQuery && /* @__PURE__ */ React86.createElement(React86.Fragment, null, childrenElement && /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ React86.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React86.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 })
   );
 }
 
 // src/components/StackNavigator.tsx
-var StackRenderContext = React86.createContext({});
+var StackRenderContext = React87.createContext({});
 function StackNavigator({
   items,
   onBack,
@@ -15642,7 +15690,7 @@ function StackNavigator({
     }
     return defaultRenderHeader(headerProps);
   };
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "div",
     {
       className: cx("n-flex n-flex-col", className),
@@ -15658,13 +15706,13 @@ function StackNavigator({
       }
     },
     showHeader && renderHeaderContent(),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.createElement(
       "div",
       {
         className: cx("n-relative n-overflow-hidden", contentClassName),
         style: contentStyle
       },
-      /* @__PURE__ */ React86.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React86.createElement(
+      /* @__PURE__ */ React87.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React87.createElement(
         AnimatePresence,
         {
           duration: 200,
@@ -15673,7 +15721,7 @@ function StackNavigator({
           mode: "wait",
           onChildStateChange: handleChildStateChange
         },
-        /* @__PURE__ */ React86.createElement(
+        /* @__PURE__ */ React87.createElement(
           StackNavigatorCard,
           {
             key: top.key,
@@ -15693,15 +15741,15 @@ var StackNavigatorCard = ({
   style: style2,
   className
 }) => {
-  const ref = React86.useRef(null);
+  const ref = React87.useRef(null);
   const size = useSize(ref);
-  const renderContext = React86.useContext(StackRenderContext);
+  const renderContext = React87.useContext(StackRenderContext);
   const renderContent = renderContext?.[item.key] ?? item.renderContent;
-  React86.useEffect(() => {
+  React87.useEffect(() => {
     if (!size || size.width === 0 || size.height === 0) return;
     onSizeChange(item.key, size);
   }, [item.key, onSizeChange, size]);
-  return /* @__PURE__ */ React86.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
+  return /* @__PURE__ */ React87.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
 };
 function defaultRenderHeader({
   showDivider,
@@ -15710,13 +15758,14 @@ function defaultRenderHeader({
   right,
   title
 }) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     BaseToolbar,
     {
       innerClassName: "n-px-1",
       showDivider,
       enableAbsoluteBreakpoint: false,
-      left: showBackButton && /* @__PURE__ */ React86.createElement(
+      enableContainerQuery: false,
+      left: showBackButton && /* @__PURE__ */ React87.createElement(
         Button,
         {
           className: "-n-mx-2",
@@ -15727,7 +15776,7 @@ function defaultRenderHeader({
       ),
       right
     },
-    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React86.createElement(Body, null, title) : title
+    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React87.createElement(Body, null, title) : title
   );
 }
 
@@ -15739,16 +15788,16 @@ var NavigatorScreen = Object.assign(
     [navigatorScreenIdentifier]: true
   }
 );
-var NavigatorScreenContext = React87.createContext(null);
+var NavigatorScreenContext = React88.createContext(null);
 function useNavigator() {
-  const context = React87.useContext(NavigatorScreenContext);
+  const context = React88.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigator must be used within a Navigator screen");
   }
   return context.navigation;
 }
 function useNavigatorRoute() {
-  const context = React87.useContext(NavigatorScreenContext);
+  const context = React88.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigatorRoute must be used within a Navigator screen");
   }
@@ -15911,7 +15960,7 @@ function NavigatorImpl({
           onBack: headerProps.onBack
         }),
         renderContent: () => {
-          return /* @__PURE__ */ React87.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
+          return /* @__PURE__ */ React88.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
         }
       };
     });
@@ -15919,7 +15968,7 @@ function NavigatorImpl({
   const shouldShowHeader = evaluateOption(showHeader, {
     stack
   });
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     StackNavigator,
     {
       items,
@@ -15959,7 +16008,7 @@ function ListNavigator({
   renderHeader,
   selectedIds
 }) {
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(
     ListNavigatorInternal,
     {
       initialRoute: { name: "screen", params: { id: void 0 } },
@@ -15977,7 +16026,7 @@ function ListNavigator({
       className,
       style: style2
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       ListNavigatorInternal.Screen,
       {
         name: "screen",
@@ -15992,7 +16041,7 @@ function ListNavigator({
         const nestedItem = items.find(
           (item) => isSubMenuItem(item) && item.id === route.params.id
         );
-        return /* @__PURE__ */ React88.createElement(
+        return /* @__PURE__ */ React89.createElement(
           ListMenu,
           {
             items: nestedItem?.items ?? items,
@@ -16017,7 +16066,7 @@ function ListNavigator({
 
 // src/components/Message.tsx
 import { uuid as uuid2 } from "@noya-app/noya-utils";
-import React89, { forwardRef as forwardRef26, memo as memo29, useMemo as useMemo36 } from "react";
+import React90, { forwardRef as forwardRef26, memo as memo29, useMemo as useMemo36 } from "react";
 var Message = memo29(
   forwardRef26(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = uuid2();
@@ -16029,7 +16078,7 @@ var Message = memo29(
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React89.createElement(
+    return /* @__PURE__ */ React90.createElement(
       "div",
       {
         className: cx(
@@ -16037,15 +16086,15 @@ var Message = memo29(
           role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React89.createElement(
+      role === "assistant" ? /* @__PURE__ */ React90.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React89.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React89.createElement(
+        /* @__PURE__ */ React90.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React90.createElement(
         Avatar,
         {
           userId: resolvedUserId,
@@ -16054,7 +16103,7 @@ var Message = memo29(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React89.createElement(
+      /* @__PURE__ */ React90.createElement(
         "div",
         {
           className: cx(
@@ -16074,9 +16123,9 @@ var Message = memo29(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React90 from "react";
+import React91 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React91.createElement(
     "a",
     {
       href: url,
@@ -16084,15 +16133,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__ */ React90.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ React90.createElement(Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
-    /* @__PURE__ */ React90.createElement(DividerVertical, null),
-    /* @__PURE__ */ React90.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
+    /* @__PURE__ */ React91.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ React91.createElement(Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
+    /* @__PURE__ */ React91.createElement(DividerVertical, null),
+    /* @__PURE__ */ React91.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
+  return /* @__PURE__ */ React91.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -16106,7 +16155,7 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/ResizableContainer.tsx
-import React91, { useCallback as useCallback34, useRef as useRef27, useState as useState33 } from "react";
+import React92, { useCallback as useCallback34, useRef as useRef27, useState as useState33 } from "react";
 var ResizableContainer = ({
   children,
   minWidth,
@@ -16175,7 +16224,7 @@ var ResizableContainer = ({
     },
     [shouldResetWidth]
   );
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "div",
     {
       ref: containerRef,
@@ -16183,7 +16232,7 @@ var ResizableContainer = ({
       style: { position: "relative", ...style2 },
       className
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "div",
       {
         ref: resizeableRef,
@@ -16194,7 +16243,7 @@ var ResizableContainer = ({
         }
       },
       typeof children === "function" ? children({ width }) : children,
-      /* @__PURE__ */ React91.createElement(
+      /* @__PURE__ */ React92.createElement(
         "div",
         {
           ref: handleRef,
@@ -16219,7 +16268,7 @@ var ResizableContainer = ({
           onPointerUp: handlePointerUp,
           onPointerCancel: handlePointerUp
         },
-        /* @__PURE__ */ React91.createElement(
+        /* @__PURE__ */ React92.createElement(
           "div",
           {
             style: {
@@ -16237,7 +16286,7 @@ var ResizableContainer = ({
           }
         )
       ),
-      drag && /* @__PURE__ */ React91.createElement(
+      drag && /* @__PURE__ */ React92.createElement(
         "div",
         {
           style: {
@@ -16260,7 +16309,7 @@ function clamp5(value, min, max) {
 
 // src/components/RingProgress.tsx
 import { clamp as clamp6 } from "@noya-app/noya-utils";
-import * as React92 from "react";
+import * as React93 from "react";
 function RingProgress({
   value,
   dividedBy = 100,
@@ -16276,14 +16325,14 @@ function RingProgress({
   const safeDivisor = dividedBy > 0 ? dividedBy : 1;
   const clampedRaw = clamp6(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";
@@ -16296,7 +16345,7 @@ function RingProgress({
         return "n-stroke-text";
     }
   }, [colorScheme]);
-  const computedStroke = React92.useMemo(() => {
+  const computedStroke = React93.useMemo(() => {
     if (color) return color;
     switch (colorScheme) {
       case "primary":
@@ -16310,7 +16359,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),
@@ -16321,7 +16370,7 @@ function RingProgress({
       "aria-valuemax": safeDivisor,
       "aria-label": ariaLabel
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "svg",
       {
         width: size,
@@ -16329,7 +16378,7 @@ function RingProgress({
         viewBox: `0 0 ${size} ${size}`,
         style: { display: "block" }
       },
-      /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React93.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16340,7 +16389,7 @@ function RingProgress({
           strokeWidth: thickness
         }
       ),
-      /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React93.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16364,13 +16413,13 @@ function RingProgress({
 }
 
 // src/components/ScrollableSidebar.tsx
-import React93 from "react";
+import React94 from "react";
 function ScrollableSidebar({ children }) {
-  return /* @__PURE__ */ React93.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ React93.createElement(ScrollArea, null, children));
+  return /* @__PURE__ */ React94.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ React94.createElement(ScrollArea, null, children));
 }
 
 // src/components/Section.tsx
-import React94, { memo as memo30, useMemo as useMemo38 } from "react";
+import React95, { memo as memo30, useMemo as useMemo38 } from "react";
 var titleIconStyle = {
   marginRight: "6px",
   alignSelf: "flex-start",
@@ -16398,7 +16447,7 @@ function SectionHeader({
     }),
     [style2]
   );
-  const titleElement = title ? /* @__PURE__ */ React94.createElement(
+  const titleElement = title ? /* @__PURE__ */ React95.createElement(
     InspectorPrimitives_exports.Title,
     {
       $textStyle: titleTextStyle,
@@ -16406,16 +16455,16 @@ function SectionHeader({
     },
     title
   ) : null;
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     InspectorPrimitives_exports.SectionHeader,
     {
       style: headerStyle,
       className
     },
-    titleIcon && /* @__PURE__ */ React94.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
-    titleElement && /* @__PURE__ */ React94.createElement(React94.Fragment, null, onClickTitle ? /* @__PURE__ */ React94.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
-    headerSeparator === "space" && /* @__PURE__ */ React94.createElement(Spacer.Horizontal, null),
-    headerSeparator === "dot" && /* @__PURE__ */ React94.createElement(
+    titleIcon && /* @__PURE__ */ React95.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
+    titleElement && /* @__PURE__ */ React95.createElement(React95.Fragment, null, onClickTitle ? /* @__PURE__ */ React95.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
+    headerSeparator === "space" && /* @__PURE__ */ React95.createElement(Spacer.Horizontal, null),
+    headerSeparator === "dot" && /* @__PURE__ */ React95.createElement(
       Text,
       {
         variant: titleTextStyle,
@@ -16452,7 +16501,7 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React94.Children.toArray(children).some((child) => !!child);
+  const hasChildren = React95.Children.toArray(children).some((child) => !!child);
   const headerStyle = useMemo38(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
@@ -16460,7 +16509,7 @@ var SectionInternal = ({
     }),
     [hasChildren, headerStyleProp]
   );
-  return /* @__PURE__ */ React94.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React95.createElement(
     SectionHeader,
     {
       style: headerStyle,
@@ -16472,7 +16521,7 @@ var SectionInternal = ({
       right,
       headerSeparator
     }
-  ), /* @__PURE__ */ React94.createElement(IndentContext.Provider, { value: 0 }, children));
+  ), /* @__PURE__ */ React95.createElement(IndentContext.Provider, { value: 0 }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -16485,12 +16534,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React94.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React94.createElement(
+      title: /* @__PURE__ */ React95.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React95.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -16505,12 +16554,12 @@ var Section = memo30(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React94.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React94.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React95.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React95.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import { ToggleGroup as ToggleGroupPrimitive2 } from "radix-ui";
-import React95, {
+import React96, {
   createContext as createContext13,
   forwardRef as forwardRef27,
   useCallback as useCallback35,
@@ -16531,7 +16580,7 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
   ...props
 }, forwardedRef) {
   const { colorScheme } = useContext14(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React95.createElement(
+  const itemElement = /* @__PURE__ */ React96.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -16546,7 +16595,7 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
         // 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",
@@ -16555,14 +16604,14 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
         // 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__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       "span",
       {
         className: cx(
@@ -16574,7 +16623,7 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ React95.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React96.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -16596,7 +16645,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React95.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React96.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -16615,13 +16664,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ React95.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ React96.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React96, { memo as memo31, useMemo as useMemo40 } from "react";
+import React97, { memo as memo31, useMemo as useMemo40 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -16650,7 +16699,7 @@ var SelectionToolbarContainer = memo31(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React96.useRef(null);
+    const containerRef = React97.useRef(null);
     const size = useSize(containerRef, "width");
     const virtualRef = useMemo40(
       () => ({
@@ -16658,7 +16707,7 @@ var SelectionToolbarContainer = memo31(
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React96.createElement(
+    const popperContent = /* @__PURE__ */ React97.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16676,7 +16725,7 @@ var SelectionToolbarContainer = memo31(
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      /* @__PURE__ */ React96.createElement(
+      /* @__PURE__ */ React97.createElement(
         "div",
         {
           ref: containerRef,
@@ -16693,7 +16742,7 @@ var SelectionToolbarContainer = memo31(
         children
       )
     );
-    return /* @__PURE__ */ React96.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React96.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ React97.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React97.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
   }
 );
 
@@ -16704,7 +16753,7 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import { Select } from "radix-ui";
-import React97, {
+import React98, {
   useMemo as useMemo41,
   useState as useState34
 } from "react";
@@ -16730,7 +16779,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelType = useLabelType();
-  return /* @__PURE__ */ React97.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React98.createElement(
     Button,
     {
       id,
@@ -16742,10 +16791,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React97.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-    label && labelType === "inset" && /* @__PURE__ */ React97.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React97.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React97.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ React97.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React97.createElement(
+    icon && /* @__PURE__ */ React98.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
+    label && labelType === "inset" && /* @__PURE__ */ React98.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React98.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ React98.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ React98.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ React98.createElement(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -16794,7 +16843,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     setInternalOpen(open2);
   };
   const readOnlyButton = useMemo41(
-    () => /* @__PURE__ */ React97.createElement(
+    () => /* @__PURE__ */ React98.createElement(
       Button,
       {
         id,
@@ -16804,7 +16853,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React97.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React98.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
@@ -16816,7 +16865,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React97.createElement(
+  const content = /* @__PURE__ */ React98.createElement(
     Select.Root,
     {
       value,
@@ -16824,7 +16873,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -16839,7 +16888,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React97.createElement(Select.Portal, null, /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(Select.Portal, null, /* @__PURE__ */ React98.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16850,14 +16899,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React97.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React97.createElement(
+      /* @__PURE__ */ React98.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React98.createElement(
         ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
       )),
-      /* @__PURE__ */ React97.createElement(Select.Viewport, null, /* @__PURE__ */ React97.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React97.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React97.createElement(ChevronDownIcon, null))
+      /* @__PURE__ */ React98.createElement(Select.Viewport, null, /* @__PURE__ */ React98.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ React98.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React98.createElement(ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -16865,7 +16914,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import { Slider as RadixSlider } from "radix-ui";
-import React98, { memo as memo32, useCallback as useCallback36, useMemo as useMemo42 } from "react";
+import React99, { memo as memo32, useCallback as useCallback36, useMemo as useMemo42 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
@@ -16898,7 +16947,7 @@ var Slider = memo32(function Slider2({
     [onValueChange]
   );
   const ratio = (arrayValue[0] - min) / (max - min);
-  return /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement(
     RadixSlider.Root,
     {
       min,
@@ -16916,7 +16965,7 @@ var Slider = memo32(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React98.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React98.createElement(
+    /* @__PURE__ */ React99.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React99.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -16925,7 +16974,7 @@ var Slider = memo32(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
         }
       }
-    ), /* @__PURE__ */ React98.createElement(
+    ), /* @__PURE__ */ React99.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -16935,7 +16984,7 @@ var Slider = memo32(function Slider2({
         }
       }
     )),
-    /* @__PURE__ */ React98.createElement(
+    /* @__PURE__ */ React99.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -16953,27 +17002,27 @@ var Slider = memo32(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-import * as React99 from "react";
+import * as React100 from "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
 import { clamp as clamp7 } from "@noya-app/noya-utils";
-import React100, { memo as memo33, useCallback as useCallback37, useMemo as useMemo43 } from "react";
+import React101, { memo as memo33, useCallback as useCallback37, useMemo as useMemo43 } from "react";
 var Stepper = memo33(function Stepper2({
   style: style2,
   className,
@@ -17001,7 +17050,7 @@ var Stepper = memo33(function Stepper2({
     },
     [onValueChange, min, max]
   );
-  return /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(
     "div",
     {
       id,
@@ -17013,7 +17062,7 @@ var Stepper = memo33(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement(
       InputField2.Root,
       {
         className: "n-flex-1",
@@ -17021,7 +17070,7 @@ var Stepper = memo33(function Stepper2({
         startClassName: "-n-ml-[3px]",
         endWidth: 17,
         endClassName: "-n-mr-[3px]",
-        start: /* @__PURE__ */ React100.createElement(
+        start: /* @__PURE__ */ React101.createElement(
           IconButton,
           {
             iconName: "MinusIcon",
@@ -17035,7 +17084,7 @@ var Stepper = memo33(function Stepper2({
             }
           }
         ),
-        end: /* @__PURE__ */ React100.createElement(
+        end: /* @__PURE__ */ React101.createElement(
           IconButton,
           {
             iconName: "PlusIcon",
@@ -17050,7 +17099,7 @@ var Stepper = memo33(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ React100.createElement(
+      /* @__PURE__ */ React101.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -17065,7 +17114,7 @@ var Stepper = memo33(function Stepper2({
 
 // src/components/Switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import * as React101 from "react";
+import * as React102 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -17077,7 +17126,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -17096,12 +17145,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React101.createElement(SwitchPrimitive.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(SwitchPrimitive.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
-import * as React102 from "react";
+import * as React103 from "react";
 function Tabs({
   value,
   onValueChange,
@@ -17116,7 +17165,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",
@@ -17125,11 +17174,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
-import React103, { useCallback as useCallback38, useMemo as useMemo44, useState as useState35 } from "react";
+import React104, { useCallback as useCallback38, useMemo as useMemo44, useState as useState35 } from "react";
 function UserPicker({
   users,
   value,
@@ -17175,7 +17224,7 @@ function UserPicker({
     },
     [updateSelectedUserId, onSelectUser, usersById]
   );
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     Combobox,
     {
       ...rest,
@@ -17199,7 +17248,7 @@ function createUserMenuItem(user) {
   return {
     value: user.id,
     title,
-    icon: /* @__PURE__ */ React103.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ React103.createElement(
+    icon: /* @__PURE__ */ React104.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ React104.createElement(
       Avatar,
       {
         size: 15 + overflow * 2,
@@ -17218,7 +17267,7 @@ function createUserMenuItem(user) {
 }
 
 // src/components/UserPointer.tsx
-import React104, { memo as memo34, useMemo as useMemo45 } from "react";
+import React105, { memo as memo34, useMemo as useMemo45 } from "react";
 var UserPointerContainer = memo34(function UserPointerContainer2({
   point,
   visible,
@@ -17226,11 +17275,13 @@ var UserPointerContainer = memo34(function UserPointerContainer2({
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.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
       },
@@ -17252,7 +17303,7 @@ var UserNameTag = memo34(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(
     "span",
     {
       className: cx(
@@ -17278,7 +17329,7 @@ var UserPointerIcon = memo34(function PointerIcon({
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(
     "svg",
     {
       width: size,
@@ -17293,7 +17344,7 @@ var UserPointerIcon = memo34(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React104.createElement(
+    /* @__PURE__ */ React105.createElement(
       "polygon",
       {
         points,
@@ -17334,7 +17385,7 @@ var UserPointer = memo34(function UserPointer2({
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(
     UserPointerContainer,
     {
       point,
@@ -17342,14 +17393,14 @@ var UserPointer = memo34(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React104.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React104.createElement(
+    name && /* @__PURE__ */ React105.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React105.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React104.createElement(
+    ), /* @__PURE__ */ React105.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -17365,16 +17416,84 @@ var UserPointer = memo34(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React110, {
+import React112, {
   memo as memo36,
   useCallback as useCallback40,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo49,
+  useMemo as useMemo50,
   useRef as useRef30
 } from "react";
 
+// src/components/OverlayToolbar.tsx
+import React106, { useMemo as useMemo46 } from "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 = useMemo46(
+    () => ({
+      ...toolbarTransparentStyle,
+      ...style2
+    }),
+    [style2]
+  );
+  const renderLeftPanel = (overlayId) => {
+    if (!left) return null;
+    return /* @__PURE__ */ React106.createElement(
+      "div",
+      {
+        className: panelClassName,
+        "data-embedded-overlay-id": overlayId,
+        style: panelStyle
+      },
+      left
+    );
+  };
+  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, resolvedLayout === "bottomCenterTopRight" ? /* @__PURE__ */ React106.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__ */ React106.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__ */ React106.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__ */ React106.createElement(
+      "div",
+      {
+        className: panelClassName,
+        "data-embedded-overlay-id": "noya-toolbar-top-right",
+        style: panelStyle
+      },
+      right
+    )
+  ));
+}
+
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React108, { useMemo as useMemo47, useRef as useRef28, useState as useState36 } from "react";
+import React110, { useMemo as useMemo48, useRef as useRef28, useState as useState36 } from "react";
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -17383,20 +17502,20 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-import React107, { useMemo as useMemo46 } from "react";
+import React109, { useMemo as useMemo47 } from "react";
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React106, {
+import React108, {
   createContext as createContext15,
   useContext as useContext15
 } from "react";
 
 // src/components/ToolbarDrawer.tsx
-import React105, { forwardRef as forwardRef28, memo as memo35 } from "react";
+import React107, { forwardRef as forwardRef28, memo as memo35 } from "react";
 var ToolbarDrawer = memo35(
   forwardRef28(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ React105.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React105.createElement(
+    return /* @__PURE__ */ React107.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React107.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",
@@ -17417,20 +17536,21 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React106.useState(false);
-  return /* @__PURE__ */ React106.createElement(
+  const [open, setOpen] = React108.useState(false);
+  return /* @__PURE__ */ React108.createElement(
     DropdownMenu,
     {
       open,
       onOpenChange: setOpen,
       items: item.items,
+      modal: false,
       onSelect: (value) => {
         if (onSelectMenuItem && value) {
           onSelectMenuItem(value);
         }
       }
     },
-    /* @__PURE__ */ React106.createElement(
+    /* @__PURE__ */ React108.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17446,7 +17566,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React106.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React106.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ React108.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React108.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React108.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17460,8 +17580,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = React106.useState(false);
-  const content = /* @__PURE__ */ React106.createElement("span", null, /* @__PURE__ */ React106.createElement(
+  const [open, setOpen] = React108.useState(false);
+  const content = /* @__PURE__ */ React108.createElement("span", null, /* @__PURE__ */ React108.createElement(
     Popover,
     {
       open,
@@ -17470,7 +17590,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ React106.createElement(
+      trigger: /* @__PURE__ */ React108.createElement(
         Button,
         {
           disabled,
@@ -17483,7 +17603,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ React106.createElement(
+  return tooltip && !open ? /* @__PURE__ */ React108.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17503,7 +17623,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ React106.createElement(
+  const content = /* @__PURE__ */ React108.createElement(
     Button,
     {
       as,
@@ -17520,7 +17640,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__ */ React106.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React106.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ React108.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React108.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17536,13 +17656,13 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React106.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ React108.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ React106.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ React108.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React106.createElement(
+    return /* @__PURE__ */ React108.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17554,7 +17674,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ React106.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React108.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17566,8 +17686,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React108.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17583,6 +17703,14 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
     );
   }));
 });
+function useBindKeyboardShortcutsForMenuItems(items, onSelectMenuItem) {
+  return useKeyboardShortcuts3(
+    React108.useMemo(
+      () => onSelectMenuItem ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem) : {},
+      [items, onSelectMenuItem]
+    )
+  );
+}
 function Toolbar({
   children,
   logo,
@@ -17592,21 +17720,19 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = React106.useMemo(
+  const allMenuItems = React108.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
-  useKeyboardShortcuts3(
-    React106.useMemo(
-      () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
-      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
-    )
+  useBindKeyboardShortcutsForMenuItems(
+    allMenuItems,
+    shouldBindKeyboardShortcuts ? onSelectMenuItem : void 0
   );
-  return /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React108.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React106.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React108.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React108.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17614,7 +17740,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React106.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React108.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React108.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17635,19 +17761,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = useMemo46(() => {
+  const style2 = useMemo47(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React109.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__ */ React107.createElement(
+    /* @__PURE__ */ React109.createElement(
       ToolbarMenu,
       {
         items,
@@ -17680,7 +17806,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = useMemo47(
+  const allTabItems = useMemo48(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17688,16 +17814,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = useMemo47(
+  const allSelectableTabItems = useMemo48(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = useMemo47(
+  const leftSelectableTabItems = useMemo48(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo47(
+  const rightSelectableTabItems = useMemo48(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -17734,14 +17860,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React110.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17750,8 +17876,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ React108.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__ */ React108.createElement(
+    ), /* @__PURE__ */ React110.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ React110.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__ */ React110.createElement(
       Button,
       {
         variant: "none",
@@ -17774,8 +17900,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__PURE__ */ React108.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React110.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ React110.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
@@ -17796,7 +17922,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ React108.createElement(
+    rightPanel && /* @__PURE__ */ React110.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17822,7 +17948,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React109, { useCallback as useCallback39, useMemo as useMemo48, useRef as useRef29 } from "react";
+import React111, { useCallback as useCallback39, useMemo as useMemo49, useRef as useRef29 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -17996,7 +18122,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = useMemo48(() => {
+  const autoSaveId = useMemo49(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -18023,7 +18149,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo48(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo49(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -18084,7 +18210,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__ */ React109.createElement(
+  return /* @__PURE__ */ React111.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -18095,7 +18221,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React109.createElement(React109.Fragment, null, showLeftTabs && /* @__PURE__ */ React109.createElement(
+    leftPanel && /* @__PURE__ */ React111.createElement(React111.Fragment, null, showLeftTabs && /* @__PURE__ */ React111.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -18104,7 +18230,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React109.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React109.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React111.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React111.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -18117,8 +18243,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React109.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React111.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ React111.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -18129,7 +18255,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React109.createElement(
+    rightPanel && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React111.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -18142,7 +18268,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React109.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React109.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React111.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React111.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -18202,6 +18328,10 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   className,
   style: style2,
   toolbar,
+  toolbarVariant = "default",
+  overlayToolbarLeft,
+  overlayToolbarRight,
+  overlayLayout,
   children,
   sideType = "auto",
   sideTypeBreakpoint = 800,
@@ -18231,7 +18361,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   theme,
   compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = React110.useRef(null);
+  const containerRef = React112.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -18342,46 +18472,46 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = useMemo49(() => {
+  const leftChildrenProps = useMemo50(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = useMemo49(() => {
+  const rightChildrenProps = useMemo50(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = useMemo49(() => {
+  const leftSidebarProviderValue = useMemo50(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = useMemo49(() => {
+  const rightSidebarProviderValue = useMemo50(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React110.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React112.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ React110.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ React112.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React110.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React112.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ React110.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ React112.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ React110.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = useMemo49(
+  const centerPanel = /* @__PURE__ */ React112.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = useMemo50(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -18399,7 +18529,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo49(
+  const rightSidebarOptions = useMemo50(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18419,7 +18549,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__ */ React110.createElement(
+  const isOverlay = toolbarVariant === "overlay";
+  return /* @__PURE__ */ React112.createElement(
     "div",
     {
       ref: containerRef,
@@ -18431,8 +18562,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       style: style2,
       "data-theme": theme
     },
-    toolbar,
-    /* @__PURE__ */ React110.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React110.createElement(
+    !isOverlay && toolbar,
+    /* @__PURE__ */ React112.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18452,7 +18583,14 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         rightSidebarRef,
         compactDrawerMenu
       }
-    ))
+    ), isOverlay && /* @__PURE__ */ React112.createElement(
+      OverlayToolbar,
+      {
+        left: overlayToolbarLeft,
+        right: overlayToolbarRight,
+        overlayLayout
+      }
+    )))
   );
 });
 var PanelInner = memo36(function PanelInner2({
@@ -18460,7 +18598,7 @@ var PanelInner = memo36(function PanelInner2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React112.createElement(
     "div",
     {
       style: style2,
@@ -18475,22 +18613,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-import * as React111 from "react";
-var ImageDataContext = React111.createContext(
+import * as React113 from "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");
   }
@@ -18541,6 +18679,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) {
@@ -18644,11 +18800,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round as round2 } from "@noya-app/noya-utils";
-import * as React112 from "react";
+import * as React114 from "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,
@@ -18658,15 +18814,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 : round2(value, 2),
@@ -18693,11 +18849,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-import React113, {
+import React115, {
   forwardRef as forwardRef29,
   memo as memo39
 } from "react";
-var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "div",
   {
     ref,
@@ -18705,8 +18861,8 @@ var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "div",
   {
     ref,
@@ -18717,7 +18873,7 @@ var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "div",
   {
     ref,
@@ -18725,7 +18881,7 @@ var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React11
     ...props
   }
 ));
-var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "div",
   {
     ref,
@@ -18733,7 +18889,7 @@ var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "input",
   {
     ref,
@@ -18742,7 +18898,7 @@ var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
+var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React115.createElement(
   "span",
   {
     ref,
@@ -18750,14 +18906,14 @@ var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React113.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React113.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var VerticalSeparator = () => /* @__PURE__ */ React115.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React115.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
 var RowLabel = forwardRef29(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React113.createElement(
+  return /* @__PURE__ */ React115.createElement(
     "label",
     {
       ref,
@@ -18777,7 +18933,7 @@ var LabeledRow = memo39(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React113.createElement(Row, { id, className }, /* @__PURE__ */ React113.createElement(Column, null, /* @__PURE__ */ React113.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React113.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React113.createElement(Row, null, children)));
+  return /* @__PURE__ */ React115.createElement(Row, { id, className }, /* @__PURE__ */ React115.createElement(Column, null, /* @__PURE__ */ React115.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React115.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React115.createElement(Row, null, children)));
 });
 export {
   AIAssistantInput,
@@ -18835,6 +18991,7 @@ export {
   FullscreenDialog,
   GlobalInputBlurProvider,
   Grid,
+  GridBackground,
   GridView,
   Heading1,
   Heading2,
@@ -18870,6 +19027,7 @@ export {
   Message,
   Navigator,
   OpenPortalsProvider,
+  OverlayToolbar,
   PipelineResultLayout,
   PipelineResultLink,
   Popover,
@@ -18972,8 +19130,10 @@ export {
   separator,
   styles,
   textStyles,
+  toolbarTransparentStyle,
   updateSelection,
   useAutoResize,
+  useBindKeyboardShortcutsForMenuItems,
   useComboboxState,
   useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
@@ -19004,6 +19164,7 @@ export {
   useTheme,
   useWorkspaceSide,
   validateDropIndicator,
+  whiteboardProseTheme,
   withDragProvider,
   withSeparatorElements
 };