@noya-app/noya-designsystem 0.1.61 → 0.1.63

package/dist/index.mjs

@@ -318,6 +318,26 @@ import { useEffect as useEffect7, useState as useState9 } from "react";
 import { decodeQueryParameters } from "@noya-app/noya-utils";
 import { useEffect as useEffect8, useState as useState10 } from "react";
 
+// ../noya-react-utils/src/hooks/useWindowSize.ts
+import { useEffect as useEffect9, useState as useState11 } from "react";
+function useWindowSize() {
+  const [size2, setSize] = useState11(
+    typeof window === "undefined" ? { width: 0, height: 0 } : {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  );
+  useEffect9(() => {
+    const handleResize = () => setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return size2;
+}
+
 // ../emitter/src/index.ts
 var Emitter = class {
   constructor(options = {}) {
@@ -472,21 +492,6 @@ function getClosestPortalScope(element) {
   return closest.dataset[portalScopeDataSetName];
 }
 
-// src/components/internal/Menu.tsx
-import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React24, { memo as memo10 } from "react";
-
-// src/contexts/DesignSystemConfiguration.tsx
-import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import * as React23 from "react";
-
-// src/components/Toast.tsx
-import * as ToastPrimitive from "@radix-ui/react-toast";
-import React13 from "react";
-
-// src/components/IconButton.tsx
-import * as React12 from "react";
-
 // src/components/Button.tsx
 import React11, {
   forwardRef as forwardRef4,
@@ -707,29 +712,33 @@ var Italic = ({ children }) => /* @__PURE__ */ React9.createElement(
 var Tooltip = React10.memo(function Tooltip2({
   children,
   content,
-  sideOffset = 2
+  sideOffset = 2,
+  side = "bottom",
+  portalContainer
 }) {
   const portalScopeId = usePortalScopeId();
-  return /* @__PURE__ */ React10.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React10.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React10.createElement(TooltipPrimitive.Portal, { container: portalContainer }, /* @__PURE__ */ React10.createElement(
     TooltipPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
-      side: "bottom",
+      side,
       align: "center",
       sideOffset,
       collisionPadding: 8,
-      className: `${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-popover border border-solid border-divider-strong z-menu`
+      className: `${textStyles.small} text-text rounded-sm p-2 bg-popover-background shadow-tooltip z-menu`
     },
     content
   ))));
 });
 
 // src/components/Button.tsx
+var colorSchemeStyles = {
+  default: "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active",
+  primary: "bg-primary text-white hover:bg-primary-light active:bg-primary",
+  secondary: "bg-secondary text-white hover:bg-secondary-light active:bg-secondary"
+};
 var variantStyles = {
-  normal: "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
-  primary: "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
-  secondary: "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
-  secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
+  normal: "",
   floating: "bg-floating-button text-text shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:opacity-80 active:opacity-90",
   thin: "bg-transparent text-text hover:bg-input-background-light",
   none: "bg-transparent text-text hover:bg-input-background-light"
@@ -752,6 +761,7 @@ var Button = forwardRef4(function Button2({
   tooltip,
   active = false,
   disabled = false,
+  colorScheme: colorSchemeProp,
   variant = "normal",
   size: size2 = "normal",
   contentStyle,
@@ -760,12 +770,16 @@ var Button = forwardRef4(function Button2({
   as: Component = "button",
   ...rest
 }, forwardedRef) {
+  const colorScheme = colorSchemeProp ?? "default";
   const baseClassName = cx(
     "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
-    active ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]" : variantStyles[variant],
-    sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size2 !== "small" ? "floating" : variant === "none" ? "none" : size2]
+    active ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover" : variantStyles[variant],
+    sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size2 !== "small" ? "floating" : variant === "none" ? "none" : size2],
+    variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
+    colorSchemeStyles[colorScheme],
+    !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
   );
   const buttonClassName = useMemo4(() => {
     return className ? mergeConflictingClassNames([baseClassName, className], {
@@ -804,7 +818,20 @@ var Button = forwardRef4(function Button2({
 });
 var Button_default = Button;
 
+// src/components/internal/Menu.tsx
+import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
+import React24, { memo as memo10 } from "react";
+
+// src/contexts/DesignSystemConfiguration.tsx
+import { getCurrentPlatform } from "@noya-app/noya-keymap";
+import * as React23 from "react";
+
+// src/components/Toast.tsx
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import React13 from "react";
+
 // src/components/IconButton.tsx
+import * as React12 from "react";
 var IconButton = React12.memo(
   React12.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
@@ -861,11 +888,11 @@ var ToastProvider = ({ children }) => /* @__PURE__ */ React13.createElement(Toas
 // src/contexts/DialogContext.tsx
 import React21, {
   createContext as createContext5,
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useContext as useContext5,
   useMemo as useMemo8,
   useRef as useRef12,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/components/Dialog.tsx
@@ -991,11 +1018,11 @@ import React20, {
   createContext as createContext4,
   forwardRef as forwardRef9,
   memo as memo8,
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useContext as useContext4,
   useId as useId2,
   useMemo as useMemo7,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/hooks/useLabel.ts
@@ -1011,12 +1038,12 @@ var useLabel = ({ label, fieldId }) => {
     fieldId: fieldId ?? fieldIdFromContext
   };
 };
-var LabelPositionContext = React15.createContext({
-  position: "start"
+var LabelTypeContext = React15.createContext({
+  type: "start"
 });
-var useLabelPosition = () => {
-  const { position } = React15.useContext(LabelPositionContext);
-  return position;
+var useLabelType = () => {
+  const { type } = React15.useContext(LabelTypeContext);
+  return type;
 };
 var LabelWidthContext = React15.createContext({
   width: 100
@@ -1065,14 +1092,14 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import React16, {
   forwardRef as forwardRef7,
   useCallback as useCallback11,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
-  useState as useState11
+  useState as useState12
 } from "react";
 
 // src/contexts/GlobalInputBlurContext.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect9 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect10 } from "react";
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1099,7 +1126,7 @@ var useGlobalInputBlur = () => {
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  useEffect9(() => {
+  useEffect10(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1189,7 +1216,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   latestValue.current = value;
   const userDidEdit = useRef10(false);
   const isSubmitTriggeredByEscapeKey = useRef10(false);
-  const [internalValue, setInternalValue] = useState11("");
+  const [internalValue, setInternalValue] = useState12("");
   useLayoutEffect3(() => {
     setInternalValue(value);
   }, [value]);
@@ -1251,7 +1278,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   );
   const latestHandleSubmit = useRef10(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  useEffect10(() => {
+  useEffect11(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1337,7 +1364,12 @@ var Label = memo6(
 
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React19, { useEffect as useEffect11, useId, useRef as useRef11 } from "react";
+import React19, {
+  useCallback as useCallback12,
+  useEffect as useEffect12,
+  useId,
+  useRef as useRef11
+} from "react";
 
 // src/contexts/OpenPortalsContext.tsx
 import * as React18 from "react";
@@ -1415,8 +1447,9 @@ function Popover({
     onChange: onOpenChange,
     defaultValue: false
   });
+  const close = useCallback12(() => setIsOpen(false), [setIsOpen]);
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isOpen) return;
     addOpenPortal(portalScopeId || defaultId);
     return () => {
@@ -1453,7 +1486,7 @@ function Popover({
       collisionPadding: 8,
       arrowPadding: 2
     },
-    children,
+    typeof children === "function" ? children({ close }) : children,
     showArrow && /* @__PURE__ */ React19.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
     closable && /* @__PURE__ */ React19.createElement(
       PopoverPrimitive.Close,
@@ -1525,7 +1558,7 @@ var InputFieldButton = memo8(
       ...rest
     } = props;
     const { size: size2, inputRef } = useInputFieldContext();
-    const defaultHandleClick = useCallback12(
+    const defaultHandleClick = useCallback13(
       (event) => {
         if (inputRef && typeof inputRef !== "function") {
           inputRef.current?.focus();
@@ -1536,7 +1569,7 @@ var InputFieldButton = memo8(
       },
       [inputRef]
     );
-    const handlePointerDown = useCallback12(
+    const handlePointerDown = useCallback13(
       (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -1639,7 +1672,7 @@ var InputElement = forwardRef9(
 var InputFieldInput = forwardRef9(function InputFieldInput2({ textAlign, variant, ...rest }, forwardedRef) {
   const { onFocusChange, inputRef } = useInputFieldContext();
   const ref = useMergeRefs(inputRef, forwardedRef);
-  const handleFocusChange = useCallback12(
+  const handleFocusChange = useCallback13(
     (isFocused) => {
       onFocusChange(isFocused);
     },
@@ -1686,8 +1719,8 @@ function InputFieldNumberInput(props) {
   const { value, placeholder, onNudge, onBlur, readOnly, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
-  const [internalValue, setInternalValue] = useState13();
-  const handleSubmit = useCallback12(
+  const [internalValue, setInternalValue] = useState14();
+  const handleSubmit = useCallback13(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -1696,7 +1729,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = useCallback12(
+  const handleKeyDown = useCallback13(
     (event) => {
       const amount = handleNudge(event);
       if (!amount) return;
@@ -1707,7 +1740,7 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = useCallback12(
+  const handleChange = useCallback13(
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
@@ -1725,7 +1758,7 @@ function InputFieldNumberInput(props) {
     },
     [onChange]
   );
-  const handleBlur = useCallback12(
+  const handleBlur = useCallback13(
     (event) => {
       setInternalValue(void 0);
       onBlur?.(event);
@@ -1783,10 +1816,10 @@ function InputFieldRoot({
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
   const { label } = useLabel({ fieldId: id });
   const endStyles = getInsetEndStyles(size2);
-  const handleFocusChange = useCallback12(
+  const handleFocusChange = useCallback13(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
@@ -1819,7 +1852,7 @@ function InputFieldRoot({
       ref: endRef,
       className: cx(endStyles, label && end && "gap-1.5", endClassName)
     },
-    labelProp ? insetLabel : label && labelPosition === "inset" && insetLabel,
+    labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
     end
   ));
   const measuredWidthObject = useMemo7(
@@ -1947,9 +1980,9 @@ var DialogContext = createContext5(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = useState14();
+  const [contents, setContents] = useState15();
   const isOpen = !!contents;
-  const close = useCallback13(() => {
+  const close = useCallback14(() => {
     if (contents) {
       if (contents.type === "input") {
         contents.resolve(void 0);
@@ -1961,12 +1994,12 @@ var DialogProvider = function DialogProvider2({
   }, [contents]);
   const closeRef = useRef12(close);
   closeRef.current = close;
-  const submit = useCallback13(() => {
+  const submit = useCallback14(() => {
     if (!contents || contents.type !== "input") return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = useCallback13((options) => {
+  const open = useCallback14((options) => {
     const { promise, resolve } = createDeferredPromise();
     const { title, description, initialValue, placeholder, style: style2, className } = typeof options === "string" ? { title: options } : options;
     setContents({
@@ -1984,7 +2017,7 @@ var DialogProvider = function DialogProvider2({
     });
     return promise;
   }, []);
-  const openConfirmation = useCallback13((options) => {
+  const openConfirmation = useCallback14((options) => {
     const { promise, resolve } = createDeferredPromise();
     const {
       title,
@@ -2009,7 +2042,7 @@ var DialogProvider = function DialogProvider2({
     });
     return promise;
   }, []);
-  const openCustomDialog = useCallback13(
+  const openCustomDialog = useCallback14(
     (options) => {
       const { promise, resolve } = createDeferredPromise();
       const { title, description, style: style2, className } = options;
@@ -2030,7 +2063,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback14(
     (event) => {
       if (event.key !== "Enter") return;
       event.stopPropagation();
@@ -2041,7 +2074,7 @@ var DialogProvider = function DialogProvider2({
   );
   const inputRef = useRef12(null);
   const dialogRef = useRef12(null);
-  const containsElement = useCallback13((element) => {
+  const containsElement = useCallback14((element) => {
     if (!dialogRef.current) return false;
     return dialogRef.current.containsElement(element);
   }, []);
@@ -2068,7 +2101,7 @@ var DialogProvider = function DialogProvider2({
       open: isOpen,
       style: contents?.style,
       className: contents?.className,
-      onOpenChange: useCallback13(
+      onOpenChange: useCallback14(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -2076,7 +2109,7 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: useCallback13(
+      onOpenAutoFocus: useCallback14(
         (event) => {
           event.stopPropagation();
           event.preventDefault();
@@ -2156,14 +2189,14 @@ function useOpenDialog() {
 
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React22, { createContext as createContext6, useContext as useContext6, useMemo as useMemo9, useState as useState15 } from "react";
+import React22, { createContext as createContext6, useContext as useContext6, useMemo as useMemo9, useState as useState16 } from "react";
 import { createPortal } from "react-dom";
 var FloatingWindowContext = createContext6(void 0);
 var CurrentWindowContext = createContext6(void 0);
 var FloatingWindowProvider = ({
   children
 }) => {
-  const [windows, setWindows] = useState15({});
+  const [windows, setWindows] = useState16({});
   const contextValue = useMemo9(() => {
     const createWindow = (element) => {
       const id = uuid();
@@ -2273,6 +2306,7 @@ var isSelectableMenuItem = (item) => {
 var isNonSelectableMenuItem = (item) => !isSelectableMenuItem(item);
 var isMenuItemSectionHeader = (item) => item.type === "sectionHeader";
 var isSelectableMenuItemWithScore = (item) => isSelectableMenuItem(item) && "index" in item && "score" in item;
+var isPopoverMenuItem = (item) => item.type === "popover";
 var getMenuItemKey = (item, index) => {
   switch (item.type) {
     case "separator":
@@ -2281,6 +2315,8 @@ var getMenuItemKey = (item, index) => {
       return item.id;
     case "submenu":
       return item.id;
+    case "popover":
+      return item.id;
     default:
       return item.value;
   }
@@ -2311,6 +2347,7 @@ var styles = {
 function getKeyboardShortcuts(item) {
   if (item.type === "separator") return [];
   if (item.type === "sectionHeader") return [];
+  if (item.type === "popover") return [];
   if (item.type === "submenu") return item.items.flatMap(getKeyboardShortcuts);
   if (item.disabled || !item.value || !item.shortcut) return [];
   return [[item.shortcut, item.value]];
@@ -2389,7 +2426,7 @@ import { ChevronRightIcon } from "@noya-app/noya-icons";
 import React26 from "react";
 
 // src/components/internal/SelectItem.tsx
-import React25, { useCallback as useCallback14 } from "react";
+import React25, { useCallback as useCallback15 } from "react";
 var SelectItem = React25.forwardRef(
   ({
     children,
@@ -2404,11 +2441,11 @@ var SelectItem = React25.forwardRef(
     testSelected,
     ...props
   }, forwardedRef) => {
-    const handleSelectItem = useCallback14(() => {
+    const handleSelectItem = useCallback15(() => {
       if (!value) return;
       onSelect?.(value);
     }, [onSelect, value]);
-    const cancelClickPropagation = useCallback14(
+    const cancelClickPropagation = useCallback15(
       (event) => {
         event.stopPropagation();
       },
@@ -2486,7 +2523,7 @@ var MenuViewport = ({
 }) => {
   const portalScopeId = usePortalScopeId();
   const hasCheckedItem = items.some(
-    (item) => item.type !== "separator" && item.type !== "sectionHeader" && item.checked
+    (item) => isSelectableMenuItem(item) && item.checked
   );
   return /* @__PURE__ */ React26.createElement(React26.Fragment, null, items.map((item, index) => {
     switch (item.type) {
@@ -2508,6 +2545,8 @@ var MenuViewport = ({
             indented: hasCheckedItem
           }
         );
+      case "popover":
+        return null;
       case "submenu":
         if (item.items && Components4.Sub && Components4.SubTrigger && Components4.SubContent && Components4.Portal) {
           return /* @__PURE__ */ React26.createElement(Components4.Sub, { key: item.id }, /* @__PURE__ */ React26.createElement(
@@ -2595,7 +2634,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     onSelect,
     shouldBindKeyboardShortcuts,
     onOpenChange,
-    open,
+    open: openProp,
     onCloseAutoFocus,
     side,
     sideOffset = 4,
@@ -2603,8 +2642,15 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     alignOffset,
     collisionPadding = 8,
     emptyState,
-    contentStyle
+    contentStyle,
+    title,
+    icon
   } = props;
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
   const portalScopeId = usePortalScopeId();
   const keymap = useMemo11(
     () => shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
@@ -2619,13 +2665,13 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     }),
     [contentStyle]
   );
-  return /* @__PURE__ */ React27.createElement(RadixDropdownMenu.Root, { onOpenChange, open }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React27.createElement(RadixDropdownMenu.Root, { onOpenChange: setOpen, open }, /* @__PURE__ */ React27.createElement(
     RadixDropdownMenu.Trigger,
     {
       ref: forwardedRef,
       asChild: true
     },
-    children
+    typeof children === "function" ? children({ open }) : children || /* @__PURE__ */ React27.createElement(Button_default, { icon, active: open, iconRight: "DropdownChevronIcon" }, title)
   ), /* @__PURE__ */ React27.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React27.createElement(
     RadixDropdownMenu.Content,
     {
@@ -3002,13 +3048,13 @@ import React33, { forwardRef as forwardRef13 } from "react";
 import React32, {
   forwardRef as forwardRef12,
   memo as memo12,
-  useCallback as useCallback15,
-  useEffect as useEffect13,
+  useCallback as useCallback16,
+  useEffect as useEffect14,
   useRef as useRef13
 } from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef13(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (value === void 0) return;
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
@@ -3029,14 +3075,14 @@ var TextArea = memo12(
     const autoResizeRef = useAutoResize(
       autoResize ? value || rest.placeholder || "" : void 0
     );
-    const handleChange = useCallback15(
+    const handleChange = useCallback16(
       (event) => {
         onChangeText?.(event.target.value);
         onChange?.(event);
       },
       [onChangeText, onChange]
     );
-    const handleRef = useCallback15(
+    const handleRef = useCallback16(
       (value2) => {
         if (autoResize) {
           autoResizeRef.current = value2;
@@ -3140,11 +3186,11 @@ import { isDeepEqual as isDeepEqual3 } from "@noya-app/noya-utils";
 import React34, {
   Children as Children2,
   isValidElement as isValidElement2,
-  useCallback as useCallback16,
-  useEffect as useEffect14,
+  useCallback as useCallback17,
+  useEffect as useEffect15,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef14,
-  useState as useState17
+  useState as useState18
 } from "react";
 var defaultDuration = 150;
 var defaultAnimationStyles = {
@@ -3170,7 +3216,7 @@ var PresenceChild = ({
   skipInitialAnimation,
   className
 }) => {
-  const [animationState, setAnimationState] = useState17(
+  const [animationState, setAnimationState] = useState18(
     () => skipInitialAnimation && isPresent ? "entered" : isPresent ? "entering" : "exited"
   );
   const timeoutRef = useRef14();
@@ -3227,11 +3273,11 @@ var AnimatePresence = ({
   mode = "wait",
   className
 }) => {
-  const [mountedChildren, setMountedChildren] = useState17([]);
+  const [mountedChildren, setMountedChildren] = useState18([]);
   const previousChildrenRef = useRef14([]);
   const removingChildrenRef = useRef14(/* @__PURE__ */ new Set());
   const waitingToEnterRef = useRef14([]);
-  useEffect14(() => {
+  useEffect15(() => {
     const newChildren = Children2.toArray(children).filter(
       isValidElement2
     );
@@ -3274,7 +3320,7 @@ var AnimatePresence = ({
       return [...updated, ...newMounted];
     });
   }, [children, skipInitialAnimation, mode]);
-  const removeChild = useCallback16((childKey) => {
+  const removeChild = useCallback17((childKey) => {
     if (!removingChildrenRef.current.has(childKey)) return;
     removingChildrenRef.current.delete(childKey);
     setMountedChildren((prev) => {
@@ -3377,7 +3423,7 @@ var BreadcrumbSlash = () => {
 
 // src/components/Checkbox.tsx
 import * as React37 from "react";
-var colorSchemeStyles = {
+var colorSchemeStyles2 = {
   normal: "text-text-subtle",
   primary: "text-primary",
   secondary: "text-secondary"
@@ -3390,7 +3436,7 @@ var Checkbox = React37.memo(
       {
         className: cx(
           "flex-none relative inline-flex w-[19px] h-[19px]",
-          colorSchemeStyles[colorScheme],
+          colorSchemeStyles2[colorScheme],
           className
         ),
         style: style2
@@ -3687,7 +3733,7 @@ var Chip = memo14(
 import React52 from "react";
 
 // src/components/Grid.tsx
-import React44, { useImperativeHandle as useImperativeHandle3, useRef as useRef17, useState as useState21 } from "react";
+import React44, { useImperativeHandle as useImperativeHandle3, useRef as useRef17, useState as useState22 } from "react";
 
 // src/utils/selection.ts
 function updateSelection(allIds, selectedIds, clickedId, event) {
@@ -3718,11 +3764,11 @@ function updateSelection(allIds, selectedIds, clickedId, event) {
 import React40, {
   forwardRef as forwardRef17,
   memo as memo15,
-  useCallback as useCallback17,
-  useEffect as useEffect16,
+  useCallback as useCallback18,
+  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef16,
-  useState as useState19
+  useState as useState20
 } from "react";
 var defaultRenderPreview = (props) => /* @__PURE__ */ React40.createElement(BreadcrumbText, { ...props });
 var EditableText = memo15(
@@ -3744,16 +3790,16 @@ var EditableText = memo15(
     tabIndex = 0,
     ...props
   }, ref) {
-    const [inputValue, setInputValue] = useState19(value);
-    useEffect16(() => {
+    const [inputValue, setInputValue] = useState20(value);
+    useEffect17(() => {
       setInputValue(value);
     }, [value]);
-    const [focusedInternal, setFocused] = useState19(false);
+    const [focusedInternal, setFocused] = useState20(false);
     const focused = focusedProp ?? focusedInternal;
     const inputRef = useRef16(null);
     const previewRef = useRef16(null);
     const ignoreNextBlur = useRef16(false);
-    const handleKeyDown = useCallback17(
+    const handleKeyDown = useCallback18(
       (event) => {
         if (event.key === "Escape") {
           setInputValue(value);
@@ -3781,7 +3827,7 @@ var EditableText = memo15(
       inputRef.current?.focus();
       inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
     }
-    useEffect16(() => {
+    useEffect17(() => {
       if (testFocused) return;
       if (focused) {
         setTimeout(focusInput, 1);
@@ -3850,7 +3896,7 @@ import React43, {
   createContext as createContext8,
   forwardRef as forwardRef18,
   memo as memo17,
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext8,
   useMemo as useMemo17
 } from "react";
@@ -3858,7 +3904,7 @@ import React43, {
 // src/components/ContextMenu.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React41, { useCallback as useCallback18, useMemo as useMemo16 } from "react";
+import React41, { useCallback as useCallback19, useMemo as useMemo16 } from "react";
 var Components2 = {
   Separator: RadixContextMenu.Separator,
   ItemText: React41.Fragment,
@@ -3883,10 +3929,10 @@ function ContextMenuRoot({
   );
   const portalScopeId = usePortalScopeId();
   useKeyboardShortcuts2(keymap);
-  const onPointerDown = useCallback18((event) => {
+  const onPointerDown = useCallback19((event) => {
     event.preventDefault();
   }, []);
-  const handleSelectItem = useCallback18(
+  const handleSelectItem = useCallback19(
     (value) => {
       if (!value) return;
       onSelect(value);
@@ -4005,7 +4051,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     onHoverChange
   });
   const { textPosition, bordered, disabled } = useContext8(GridViewContext);
-  const handleClick = useCallback20(
+  const handleClick = useCallback21(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4014,7 +4060,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     },
     [onClick, onSelect]
   );
-  const handleKeyDown = useCallback20(
+  const handleKeyDown = useCallback21(
     (event) => {
       onKeyDown?.(event);
       if (event.key === "Enter" || event.key === " ") {
@@ -4108,7 +4154,7 @@ var GridViewRoot = forwardRef18(function GridViewRoot2({
   contentClassName,
   ...props
 }, forwardedRef) {
-  const handleClick = useCallback20(
+  const handleClick = useCallback21(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4255,9 +4301,9 @@ var Grid = memoGeneric(
       renderEmptyState
       // getDropTargetParentIndex,
     } = props;
-    const [hoveredId, setHoveredId] = useState21();
-    const [internalRenamingId, setRenamingId] = useState21();
-    const [dropdownOpenId, setDropdownOpenId] = useState21();
+    const [hoveredId, setHoveredId] = useState22();
+    const [internalRenamingId, setRenamingId] = useState22();
+    const [dropdownOpenId, setDropdownOpenId] = useState22();
     useImperativeHandle3(ref, () => ({
       editName: (id) => {
         setRenamingId(id);
@@ -4430,7 +4476,7 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React51, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState23 } from "react";
+import React51, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState24 } from "react";
 
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
@@ -4441,7 +4487,7 @@ import React49, {
   forwardRef as forwardRef19,
   isValidElement as isValidElement3,
   memo as memo18,
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useContext as useContext11,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect5,
@@ -5360,7 +5406,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     onHoverChange
   });
   const { indentation, isDragOverlay } = useContext11(ListViewDraggingContext);
-  const handlePress = useCallback23(
+  const handlePress = useCallback24(
     (event) => {
       event.preventDefault();
       if (event.button !== 0) return;
@@ -5368,7 +5414,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = useCallback23(
+  const handleDoubleClick = useCallback24(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
@@ -5508,7 +5554,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
       scrollElement,
       style: useMemo21(() => ({ flex: "1 1 auto" }), [])
     },
-    useCallback23(
+    useCallback24(
       ({
         registerChild,
         onChildScroll,
@@ -5581,7 +5627,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   sharedDragProps,
   sortableId
 }, forwardedRef) {
-  const handleClick = useCallback23(
+  const handleClick = useCallback24(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -5591,7 +5637,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = useCallback23(
+  const renderChild = useCallback24(
     (index) => renderItem(data[index], index, { isDragOverlay: false }),
     [data, renderItem]
   );
@@ -5620,7 +5666,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       sectionHeaderVariant
     ]
   );
-  const getItemContextValue = useCallback23(
+  const getItemContextValue = useCallback24(
     (i) => {
       if (variant === "bare" || variant === "normal")
         return defaultContextValue;
@@ -5686,11 +5732,11 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     () => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
-  const renderOverlay = useCallback23(
+  const renderOverlay = useCallback24(
     (index) => /* @__PURE__ */ React49.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React49.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = useCallback23(
+  const renderWrappedChild = useCallback24(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
@@ -5714,7 +5760,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     children
   ) : children;
   const withScrollable = (children) => scrollable ? /* @__PURE__ */ React49.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = useCallback23(
+  const getItemHeight = useCallback24(
     (index) => {
       const child = getItemContextValue(index);
       const height = child?.isSectionHeader && child.sectionHeaderVariant === "label" ? SECTION_HEADER_LABEL_HEIGHT : ROW_HEIGHT;
@@ -5722,7 +5768,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [getItemContextValue]
   );
-  const getKey = useCallback23(
+  const getKey = useCallback24(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
@@ -5787,11 +5833,11 @@ var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ child
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: useCallback23(
+      keyExtractor: useCallback24(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: useCallback23((item) => item, [])
+      renderItem: useCallback24((item) => item, [])
     }
   );
 });
@@ -5824,7 +5870,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React50, { useCallback as useCallback24, useContext as useContext12 } from "react";
+import React50, { useCallback as useCallback25, useContext as useContext12 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -5834,7 +5880,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   ...rest
 }, forwardedRef) {
   const { expandable } = useContext12(ListView.RowContext);
-  const handleClickChevron = useCallback24(
+  const handleClickChevron = useCallback25(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
@@ -5906,9 +5952,9 @@ var List = memoGeneric(
       sortableId,
       sharedDragProps
     } = props;
-    const [internalHoveredId, setHoveredId] = useState23();
-    const [internalRenamingId, setRenamingId] = useState23();
-    const [dropdownOpenId, setDropdownOpenId] = useState23();
+    const [internalHoveredId, setHoveredId] = useState24();
+    const [internalRenamingId, setRenamingId] = useState24();
+    const [dropdownOpenId, setDropdownOpenId] = useState24();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
     const handleSelect = (itemId, event) => {
@@ -6254,12 +6300,12 @@ function ColorSwatchControl(props) {
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
 import React56, {
-  useCallback as useCallback25,
-  useEffect as useEffect19,
+  useCallback as useCallback26,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo23,
   useRef as useRef21,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // src/utils/combobox.ts
@@ -6729,7 +6775,7 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
-    const [comboboxState] = useState24(
+    const [comboboxState] = useState25(
       () => new ComboboxState(
         items,
         initialValueString,
@@ -6737,26 +6783,26 @@ var Combobox = memoGeneric(
       )
     );
     const state = useComboboxState(comboboxState);
-    const [isFocused, setIsFocused] = useState24(false);
+    const [isFocused, setIsFocused] = useState25(false);
     const listRef = useRef21(null);
-    const [shouldBlur, setShouldBlur] = useState24(false);
+    const [shouldBlur, setShouldBlur] = useState25(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    useEffect19(() => {
+    useEffect20(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    useEffect19(() => {
+    useEffect20(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    useEffect19(() => {
+    useEffect20(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const handleBlur = useCallback25(() => {
+    const handleBlur = useCallback26(() => {
       ref.current?.blur();
       comboboxState.reset(initialValueString);
       if (props.mode === "string") {
@@ -6775,7 +6821,7 @@ var Combobox = memoGeneric(
       }
       setIsFocused(false);
     }, [filter, initialValueString, props, state, comboboxState]);
-    const handleFocus = useCallback25(
+    const handleFocus = useCallback26(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
@@ -6789,7 +6835,7 @@ var Combobox = memoGeneric(
       },
       [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
-    const handleUpdateSelection = useCallback25(
+    const handleUpdateSelection = useCallback26(
       (item) => {
         if (item.type !== void 0) return;
         const selectedItem = comboboxState.selectCurrentItem(item);
@@ -6805,7 +6851,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleIndexChange = useCallback25(
+    const handleIndexChange = useCallback26(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
@@ -6821,7 +6867,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleChange = useCallback25(
+    const handleChange = useCallback26(
       (value) => {
         if (readOnly) return;
         comboboxState.setFilter(value);
@@ -6836,7 +6882,7 @@ var Combobox = memoGeneric(
       },
       [readOnly, props, comboboxState]
     );
-    const handleKeyDown = useCallback25(
+    const handleKeyDown = useCallback26(
       (event) => {
         let handled = false;
         const item = comboboxState.getSelectedItem();
@@ -6944,7 +6990,7 @@ var Combobox = memoGeneric(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    const handleChevronClick = useCallback25(
+    const handleChevronClick = useCallback26(
       (event) => {
         event.stopPropagation();
         if (shouldShowMenu) {
@@ -6964,7 +7010,7 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    useEffect19(() => {
+    useEffect20(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
@@ -7087,12 +7133,12 @@ import React59, { memo as memo21 } from "react";
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React58, {
   forwardRef as forwardRef21,
-  useCallback as useCallback26,
-  useEffect as useEffect20,
+  useCallback as useCallback27,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo24,
   useRef as useRef22,
-  useState as useState25
+  useState as useState26
 } from "react";
 
 // src/components/Divider.tsx
@@ -7156,14 +7202,14 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
   testSelectedIndex,
   testSearch
 }, forwardedRef) {
-  const [state, setState] = useState25({
+  const [state, setState] = useState26({
     search: testSearch ?? "",
     index: 0
   });
   const { index, search } = state;
   const listRef = React58.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  useEffect20(() => {
+  useEffect21(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
   const results = useMemo24(
@@ -7178,13 +7224,13 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     })),
     [items, search]
   );
-  const setSearch = useCallback26((search2) => {
+  const setSearch = useCallback27((search2) => {
     setState((state2) => ({ ...state2, search: search2, index: 0 }));
   }, []);
-  const setIndex = useCallback26((index2) => {
+  const setIndex = useCallback27((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const searchHeight = 31;
@@ -7199,14 +7245,14 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     width: listSize.width,
     height: searchHeight + listSize.height
   };
-  const selectAndClose = useCallback26(
+  const selectAndClose = useCallback27(
     (item) => {
       onSelect(item);
       onClose();
     },
     [onSelect, onClose]
   );
-  const handleKeyDown = useCallback26(
+  const handleKeyDown = useCallback27(
     (event) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform2(navigator), {
         ArrowUp: () => {
@@ -7365,18 +7411,25 @@ var ConnectedUsersMenuLayout = ({
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React61, { useCallback as useCallback27, useState as useState26 } from "react";
+import React61, { useCallback as useCallback28, useState as useState27 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
+  open: openProp,
+  onOpenChange: onOpenChangeProp,
   items,
   onSelect,
   onClick,
   isVisible = true,
   className,
-  style: style2
+  style: style2,
+  ...rest
 }) {
-  const [open, setOpen] = useState26(false);
-  const [downPosition, setDownPosition] = useState26(null);
-  const handlePointerDownCapture = useCallback27(
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChangeProp,
+    defaultValue: false
+  });
+  const [downPosition, setDownPosition] = useState27(null);
+  const handlePointerDownCapture = useCallback28(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -7389,7 +7442,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = useCallback27(
+  const handlePointerUp = useCallback28(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -7403,9 +7456,9 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
       }
       setDownPosition(null);
     },
-    [downPosition, open]
+    [downPosition, open, setOpen]
   );
-  const handleOpenChange = useCallback27(
+  const handleOpenChange = useCallback28(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
@@ -7414,6 +7467,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   return /* @__PURE__ */ React61.createElement(
     "div",
     {
+      ...rest,
       className: cx(
         "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
         className
@@ -7573,15 +7627,18 @@ var FileExplorerLayout = ({
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
+  isUploading,
   children
 }) => /* @__PURE__ */ React64.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React64.createElement(
-  IconButton,
+  Button,
   {
-    iconName: "UploadIcon",
+    icon: isUploading ? /* @__PURE__ */ React64.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
     onClick: onUpload,
-    "aria-label": "Upload media",
-    tooltip: "Upload media"
-  }
+    "aria-label": "Upload file",
+    tooltip: "Upload file",
+    disabled: isUploading
+  },
+  "Upload"
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
@@ -8127,7 +8184,7 @@ var FillInputField = memo25(
 );
 
 // src/components/FloatingWindow.tsx
-import React68, { useCallback as useCallback28, useRef as useRef23, useState as useState27 } from "react";
+import React68, { useCallback as useCallback29, useRef as useRef23, useState as useState28 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -8247,15 +8304,15 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = useState27({ x: initialX, y: initialY });
-  const [size2, setSize] = useState27({
+  const [position, setPosition] = useState28({ x: initialX, y: initialY });
+  const [size2, setSize] = useState28({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = useState27(false);
-  const [isResizing, setIsResizing] = useState27(false);
-  const [dragOffset, setDragOffset] = useState27({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = useState27(null);
+  const [isDragging, setIsDragging] = useState28(false);
+  const [isResizing, setIsResizing] = useState28(false);
+  const [dragOffset, setDragOffset] = useState28({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState28(null);
   const wrapperRef = useRef23(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
@@ -8264,7 +8321,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = useCallback28((e) => {
+  const handleMouseDown = useCallback29((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -8273,7 +8330,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = useCallback28(
+  const handleResizeStart = useCallback29(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -8282,7 +8339,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = useCallback28(
+  const handleMouseMove = useCallback29(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -8336,7 +8393,7 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = useCallback28((_e) => {
+  const handleMouseUp = useCallback29((_e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
@@ -8352,7 +8409,7 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = useCallback28(() => {
+  const handleClose = useCallback29(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
@@ -8612,18 +8669,18 @@ var useIndent = () => {
 };
 
 // src/components/LabeledField.tsx
-var labeledFieldStyles = (labelPosition) => cx(
+var labeledFieldStyles = (labelType) => cx(
   "flex flex-row flex-1 flex-wrap items-center gap-x-1.5",
-  labelPosition === "end" && "flex-row-reverse justify-end",
-  labelPosition === "above" && "flex-col items-stretch justify-start"
+  labelType === "end" && "flex-row-reverse justify-end",
+  labelType === "above" && "flex-col items-stretch justify-start"
 );
-var labelPositionInset = {
-  position: "inset"
+var labelTypeInset = {
+  type: "inset"
 };
 var LabeledField = memo29(function LabeledField2({
   children,
   label,
-  labelPosition: labelPositionProp,
+  labelType: labelTypeProp,
   fieldId,
   minWidth = 100,
   className,
@@ -8634,11 +8691,11 @@ var LabeledField = memo29(function LabeledField2({
   const indentLevel = useIndent();
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
-  const labelPositionFromContext = useLabelPosition();
-  const labelPosition = labelPositionProp ?? labelPositionFromContext ?? "start";
+  const labelTypeFromContext = useLabelType();
+  const labelType = labelTypeProp ?? labelTypeFromContext;
   const labeledFieldClasses = useMemo30(
-    () => labeledFieldStyles(labelPosition),
-    [labelPosition]
+    () => labeledFieldStyles(labelType),
+    [labelType]
   );
   const labelContextValue = useMemo30(
     () => ({ fieldId, label }),
@@ -8666,16 +8723,16 @@ var LabeledField = memo29(function LabeledField2({
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React73.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React73.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React73.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React73.createElement("div", { style: indentStyle }), /* @__PURE__ */ React73.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React73.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React73.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React73.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React73.createElement("div", { style: indentStyle }), /* @__PURE__ */ React73.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React73.createElement(
     Label,
     {
       htmlFor: fieldId,
-      className: labelPosition === "start" || labelPosition === "end" ? "self-start" : void 0,
+      className: labelType === "start" || labelType === "end" ? "self-start" : void 0,
       style: labelStyle,
       ...props
     },
     label
-  ), labelPosition === "start" ? /* @__PURE__ */ React73.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ React73.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/MediaThumbnail.tsx
@@ -11427,7 +11484,7 @@ import * as ToggleGroupPrimitive2 from "@radix-ui/react-toggle-group";
 import React79, {
   createContext as createContext13,
   forwardRef as forwardRef26,
-  useCallback as useCallback30,
+  useCallback as useCallback31,
   useContext as useContext14,
   useMemo as useMemo35
 } from "react";
@@ -11470,7 +11527,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       {
         className: cx(
           "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
-          variant === "tabs" && "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+          variant === "tabs" && "group-focus-visible:ring-2 group-focus-visible:ring-primary-pastel group-focus-visible:ring-offset-2"
         )
       },
       icon && renderIcon(icon),
@@ -11492,7 +11549,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
 }) {
   const contextValue = useMemo35(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = useCallback30(
+  const handleValueChange = useCallback31(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
@@ -11542,7 +11599,13 @@ var SelectionToolbarContainer = memo33(
   function SelectionToolbarContainer2({
     rect,
     children,
-    portalContainer
+    portalContainer,
+    side = "top",
+    sideOffset = 10,
+    align = "center",
+    containerClassName,
+    containerStyle,
+    transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React80.useRef(null);
@@ -11557,16 +11620,16 @@ var SelectionToolbarContainer = memo33(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
-        side: "top",
-        sideOffset: 10,
-        align: "center",
+        side,
+        sideOffset,
+        align,
         avoidCollisions: true,
         collisionPadding: 10,
         contentEditable: false,
         style: {
           zIndex: 1e3,
           opacity: size2 ? 1 : 0,
-          transition: "opacity 0.2s ease-in-out",
+          transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
@@ -11575,7 +11638,11 @@ var SelectionToolbarContainer = memo33(
         "div",
         {
           ref: containerRef,
-          className: "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+          className: cx(
+            "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+            containerClassName
+          ),
+          style: containerStyle,
           onClick: (e) => e.stopPropagation(),
           onMouseDown: (e) => e.stopPropagation(),
           onPointerDown: (e) => e.stopPropagation(),
@@ -11597,7 +11664,7 @@ import {
 import * as Select from "@radix-ui/react-select";
 import React81, {
   useMemo as useMemo37,
-  useState as useState28
+  useState as useState29
 } from "react";
 var readOnlyStyle = {
   justifyContent: "flex-start",
@@ -11628,7 +11695,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     label: props.label,
     fieldId: props.id
   });
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
   return /* @__PURE__ */ React81.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React81.createElement(
     Button,
     {
@@ -11642,7 +11709,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       disabled
     },
     icon && /* @__PURE__ */ React81.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
-    label && labelPosition === "inset" && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React81.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
+    label && labelType === "inset" && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React81.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
     /* @__PURE__ */ React81.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React81.createElement(Select.Value, { placeholder })),
     /* @__PURE__ */ React81.createElement(
       DropdownChevronIcon3,
@@ -11681,7 +11748,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = useState28(open);
+  const [internalOpen, setInternalOpen] = useState29(open);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
@@ -11764,7 +11831,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React82, { memo as memo34, useCallback as useCallback31, useMemo as useMemo38 } from "react";
+import React82, { memo as memo34, useCallback as useCallback32, useMemo as useMemo38 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
@@ -11790,7 +11857,7 @@ var Slider = memo34(function Slider2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = useCallback31(
+  const handleValueChange = useCallback32(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
@@ -11818,7 +11885,7 @@ var Slider = memo34(function Slider2({
     /* @__PURE__ */ React82.createElement("div", { className: "relative flex-grow h-[3px] overflow-hidden" }, /* @__PURE__ */ React82.createElement(
       "div",
       {
-        className: "absolute h-full rounded-l bg-primary",
+        className: "absolute h-full rounded-l bg-slider-active-background",
         style: {
           left: 0,
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
@@ -11907,8 +11974,35 @@ var Switch = function Switch2({
   );
 };
 
+// src/components/Tabs.tsx
+import * as React85 from "react";
+function Tabs({
+  value,
+  onValueChange,
+  items,
+  renderContent,
+  ...props
+}) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+  const [activeTab, setActiveTab] = useControlledOrUncontrolled({
+    defaultValue: selectableItems.at(0)?.value ?? "",
+    value,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ React85.createElement("div", { ...props, className: cx("flex flex-col", props.className) }, /* @__PURE__ */ React85.createElement("div", { className: "flex flex-row px-3" }, /* @__PURE__ */ React85.createElement(
+    SegmentedControl,
+    {
+      className: "flex-1",
+      value: activeTab,
+      onValueChange: setActiveTab,
+      variant: "tabs",
+      items: selectableItems
+    }
+  )), /* @__PURE__ */ React85.createElement(Divider, null), renderContent({ value: activeTab }));
+}
+
 // src/components/UserPointer.tsx
-import React85, { memo as memo35, useMemo as useMemo39 } from "react";
+import React86, { memo as memo35, useMemo as useMemo39 } from "react";
 var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
@@ -11916,7 +12010,7 @@ var UserPointerContainer = memo35(function UserPointerContainer2({
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "div",
     {
       style: {
@@ -11939,7 +12033,7 @@ var UserNameTag = memo35(function UserNameTag2({
   style: style2,
   children
 }) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "span",
     {
       className: cx(
@@ -11962,7 +12056,7 @@ var UserPointerIcon = memo35(function PointerIcon({
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "svg",
     {
       width: size2,
@@ -11977,7 +12071,7 @@ var UserPointerIcon = memo35(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "polygon",
       {
         points,
@@ -12014,7 +12108,7 @@ var UserPointer = memo35(function UserPointer2({
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     UserPointerContainer,
     {
       point,
@@ -12022,14 +12116,14 @@ var UserPointer = memo35(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React85.createElement("div", { className: "relative" }, /* @__PURE__ */ React85.createElement(
+    name && /* @__PURE__ */ React86.createElement("div", { className: "relative" }, /* @__PURE__ */ React86.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React85.createElement(
+    ), /* @__PURE__ */ React86.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -12041,38 +12135,17 @@ var UserPointer = memo35(function UserPointer2({
 });
 
 // src/components/workspace/WorkspaceLayout.tsx
-import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React89, {
-  forwardRef as forwardRef27,
-  memo as memo38,
-  useCallback as useCallback32,
+import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
+import React92, {
+  memo as memo36,
+  useCallback as useCallback33,
   useImperativeHandle as useImperativeHandle9,
   useRef as useRef28,
   useState as useState31
 } from "react";
 
-// src/hooks/useWindowSize.tsx
-import { useEffect as useEffect21, useState as useState29 } from "react";
-function useWindowSize() {
-  const [size2, setSize] = useState29(
-    typeof window === "undefined" ? { width: 0, height: 0 } : {
-      width: window.innerWidth,
-      height: window.innerHeight
-    }
-  );
-  useEffect21(() => {
-    const handleResize = () => setSize({
-      width: window.innerWidth,
-      height: window.innerHeight
-    });
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return size2;
-}
-
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React87, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
+import React88, { useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef25 } from "react";
@@ -12212,7 +12285,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
+var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   leftPanel,
   leftSidebarRef,
   rightPanel,
@@ -12233,14 +12306,14 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
   }, [handleChangeLayoutState, mounted]);
   const leftSidebarCollapsed = internalLayoutState?.leftSidebarCollapsed ?? false;
   const rightSidebarCollapsed = internalLayoutState?.rightSidebarCollapsed ?? false;
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "flex flex-1 relative focus:outline-none"
     },
-    leftPanel && /* @__PURE__ */ React87.createElement(
+    leftPanel && /* @__PURE__ */ React88.createElement(
       Drawer,
       {
         id: LEFT_SIDEBAR_ID,
@@ -12261,7 +12334,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
       leftPanel
     ),
     centerPanel,
-    rightPanel && /* @__PURE__ */ React87.createElement(
+    rightPanel && /* @__PURE__ */ React88.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12285,13 +12358,262 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React88, { memo as memo37, useRef as useRef27 } from "react";
+import React91, { useRef as useRef27 } from "react";
 import {
   Panel,
   PanelGroup,
   PanelResizeHandle
 } from "react-resizable-panels";
-var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
+
+// src/components/Toolbar.tsx
+import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
+import React90 from "react";
+
+// src/components/BaseToolbar.tsx
+import React89 from "react";
+var toolbarStyle = {
+  [cssVarNames.colors.buttonBackground]: "transparent",
+  [cssVarNames.colors.inputBackground]: "transparent"
+};
+function BaseToolbar({
+  children,
+  left,
+  right,
+  logo,
+  showDivider = true
+}) {
+  return /* @__PURE__ */ React89.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React89.createElement(
+    "div",
+    {
+      className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
+      style: {
+        flex: `0 0 ${cssVars.spacing.toolbarHeight}`
+      }
+    },
+    logo && /* @__PURE__ */ React89.createElement(React89.Fragment, null, logo, /* @__PURE__ */ React89.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React89.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React89.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ React89.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React89.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "all"
+        }
+      },
+      children
+    )),
+    /* @__PURE__ */ React89.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React89.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React89.createElement("div", { className: "flex gap-toolbar-separator" }, right)
+  ), showDivider && /* @__PURE__ */ React89.createElement(Divider, { variant: "strong" }));
+}
+
+// src/components/Toolbar.tsx
+var SIDE_OFFSET = 6;
+var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
+  item,
+  onSelectMenuItem
+}) {
+  const [open, setOpen] = React90.useState(false);
+  return /* @__PURE__ */ React90.createElement(
+    DropdownMenu,
+    {
+      open,
+      onOpenChange: setOpen,
+      items: item.items,
+      onSelect: (value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }
+    },
+    /* @__PURE__ */ React90.createElement(
+      Button,
+      {
+        disabled: item.disabled,
+        active: item.checked || open,
+        icon: item.icon,
+        iconRight: "DropdownChevronIcon"
+      },
+      item.title
+    )
+  );
+});
+var ToolbarShortcut = ({
+  shortcut,
+  label
+}) => {
+  return /* @__PURE__ */ React90.createElement("div", { className: "flex items-center" }, label, /* @__PURE__ */ React90.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React90.createElement(KeyboardShortcut, { shortcut }));
+};
+var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
+  item,
+  portalContainer
+}) {
+  const {
+    disabled,
+    icon,
+    title,
+    tooltip,
+    content: itemContent,
+    checked
+  } = item;
+  const [open, setOpen] = React90.useState(false);
+  const content = /* @__PURE__ */ React90.createElement("span", null, /* @__PURE__ */ React90.createElement(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      side: "top",
+      showArrow: false,
+      sideOffset: SIDE_OFFSET,
+      portalContainer,
+      trigger: /* @__PURE__ */ React90.createElement(
+        Button,
+        {
+          disabled,
+          active: checked || open,
+          icon,
+          iconRight: "DropdownChevronIcon"
+        },
+        title
+      )
+    },
+    typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
+  ));
+  return tooltip && !open ? /* @__PURE__ */ React90.createElement(
+    Tooltip,
+    {
+      sideOffset: SIDE_OFFSET,
+      side: "top",
+      content: tooltip,
+      portalContainer
+    },
+    content
+  ) : content;
+});
+var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
+  item,
+  onSelectMenuItem,
+  as,
+  activeValue,
+  tooltipSide
+}) {
+  const content = /* @__PURE__ */ React90.createElement(
+    Button,
+    {
+      as,
+      disabled: item.disabled,
+      active: item.checked || activeValue === item.value,
+      icon: item.icon,
+      ...as === "a" && { href: item.value },
+      onClick: () => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }
+    },
+    item.title
+  );
+  return item.tooltip ? /* @__PURE__ */ React90.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: item.tooltip, side: tooltipSide }, content) : content;
+});
+var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
+  item,
+  onSelectMenuItem,
+  buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer
+}) {
+  if (item.type === "sectionHeader") return null;
+  if (item.type === "separator") {
+    return /* @__PURE__ */ React90.createElement(DividerVertical, { overflow: 4 });
+  }
+  if (item.type === "popover") {
+    return /* @__PURE__ */ React90.createElement(ToolbarMenuPopover, { item, portalContainer });
+  }
+  if (isSelectableMenuItem(item)) {
+    return /* @__PURE__ */ React90.createElement(
+      ToolbarMenuButton,
+      {
+        item,
+        onSelectMenuItem,
+        as: buttonAs,
+        activeValue,
+        tooltipSide
+      }
+    );
+  }
+  return /* @__PURE__ */ React90.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+});
+var ToolbarMenu = memoGeneric(function ToolbarMenu2({
+  items,
+  onSelectMenuItem,
+  buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer
+}) {
+  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React90.createElement(
+      ToolbarMenuItem,
+      {
+        key: i,
+        item,
+        onSelectMenuItem,
+        buttonAs,
+        activeValue,
+        tooltipSide,
+        portalContainer
+      }
+    );
+  }));
+});
+function Toolbar({
+  children,
+  logo,
+  leftMenuItems = [],
+  rightMenuItems = [],
+  onSelectMenuItem,
+  shouldBindKeyboardShortcuts = true
+}) {
+  const allMenuItems = React90.useMemo(
+    () => [...leftMenuItems, ...rightMenuItems],
+    [leftMenuItems, rightMenuItems]
+  );
+  useKeyboardShortcuts3(
+    React90.useMemo(
+      () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
+      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
+    )
+  );
+  return /* @__PURE__ */ React90.createElement(
+    BaseToolbar,
+    {
+      logo,
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React90.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React90.createElement(
+        ToolbarMenu,
+        {
+          items: leftMenuItems,
+          onSelectMenuItem
+        }
+      )),
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React90.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React90.createElement(
+        ToolbarMenu,
+        {
+          items: rightMenuItems,
+          onSelectMenuItem
+        }
+      ))
+    },
+    children
+  );
+}
+
+// src/components/workspace/PanelWorkspaceLayout.tsx
+var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -12302,11 +12624,17 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
   internalLayoutState,
   leftSidebarRef,
   rightSidebarRef,
+  leftTabItems,
+  rightTabItems,
+  leftTabValue,
+  rightTabValue,
+  onChangeLeftTab,
+  onChangeRightTab,
   handleChangeLayoutState
 }) {
   const panelGroupRef = useRef27(null);
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React91.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -12315,7 +12643,29 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
       direction: "horizontal",
       autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
     },
-    leftPanel && /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(
+    leftPanel && /* @__PURE__ */ React91.createElement(React91.Fragment, null, leftTabItems && /* @__PURE__ */ React91.createElement(
+      VerticalTabMenu,
+      {
+        tooltipSide: "right",
+        items: leftTabItems,
+        activeValue: leftTabValue,
+        isSidebarCollapsed: internalLayoutState?.leftSidebarCollapsed ?? false,
+        onChange: (value) => {
+          if (value === leftTabValue) {
+            if (leftSidebarRef.current?.isExpanded()) {
+              leftSidebarRef.current?.collapse();
+            } else {
+              leftSidebarRef.current?.expand();
+            }
+          } else {
+            if (!leftSidebarRef.current?.isExpanded()) {
+              leftSidebarRef.current?.expand();
+            }
+            onChangeLeftTab?.(value);
+          }
+        }
+      }
+    ), leftTabItems && !internalLayoutState?.leftSidebarCollapsed && /* @__PURE__ */ React91.createElement(DividerVertical, { className: "h-full" }), /* @__PURE__ */ React91.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -12328,8 +12678,8 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
         collapsible: true
       },
       internalLayoutState?.leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React88.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
-    /* @__PURE__ */ React88.createElement(
+    ), /* @__PURE__ */ React91.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
+    /* @__PURE__ */ React91.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -12340,7 +12690,7 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React88.createElement(
+    rightPanel && /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React91.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12353,15 +12703,94 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
         collapsible: true
       },
       internalLayoutState?.rightSidebarCollapsed ? null : rightPanel
+    ), rightTabItems && !internalLayoutState?.rightSidebarCollapsed && /* @__PURE__ */ React91.createElement(DividerVertical, { className: "h-full" }), rightTabItems && /* @__PURE__ */ React91.createElement(
+      VerticalTabMenu,
+      {
+        tooltipSide: "left",
+        items: rightTabItems,
+        activeValue: rightTabValue,
+        isSidebarCollapsed: internalLayoutState?.rightSidebarCollapsed ?? false,
+        onChange: (value) => {
+          if (value === rightTabValue) {
+            if (rightSidebarRef.current?.isExpanded()) {
+              rightSidebarRef.current?.collapse();
+            } else {
+              rightSidebarRef.current?.expand();
+            }
+          } else {
+            if (!rightSidebarRef.current?.isExpanded()) {
+              rightSidebarRef.current?.expand();
+            }
+            onChangeRightTab?.(value);
+          }
+        }
+      }
     ))
   );
 });
+function VerticalTabMenu({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide
+}) {
+  return /* @__PURE__ */ React91.createElement(
+    "div",
+    {
+      className: "w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3",
+      style: {
+        [cssVarNames.colors.inputBackground]: "transparent",
+        [cssVarNames.colors.buttonBackground]: "transparent"
+      }
+    },
+    /* @__PURE__ */ React91.createElement(
+      ToolbarMenu,
+      {
+        items,
+        activeValue: isSidebarCollapsed ? void 0 : activeValue,
+        onSelectMenuItem: onChange,
+        tooltipSide
+      }
+    )
+  );
+}
+
+// src/components/workspace/renderPanelChildren.tsx
+function renderPanelChildren(fn, activeTabValue) {
+  if (typeof fn === "function") {
+    return fn({ activeTabValue });
+  }
+  return fn;
+}
 
 // src/components/workspace/WorkspaceLayout.tsx
-var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
+var defaultLeftTabItems = [
+  {
+    title: "",
+    value: "default",
+    icon: "BorderLeftIcon",
+    tooltip: "Sidebar"
+  }
+];
+var defaultRightTabItems = [
+  {
+    title: "",
+    value: "default",
+    icon: "BorderRightIcon",
+    tooltip: "Sidebar"
+  }
+];
+var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   autoSavePrefix,
   left,
+  leftTabItems = defaultLeftTabItems,
+  leftTabValue: leftTabValueProp,
+  onChangeLeftTab,
   right,
+  rightTabItems = defaultRightTabItems,
+  rightTabValue: rightTabValueProp,
+  onChangeRightTab,
   id,
   className,
   style: style2,
@@ -12377,7 +12806,8 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     initialSize: leftInitialSize = 280,
     resizable: leftResizable = true,
     style: leftStyle,
-    className: leftClassName
+    className: leftClassName,
+    defaultCollapsed: leftDefaultCollapsed = false
   } = {},
   rightOptions: {
     minSize: rightMinSize = 200,
@@ -12385,11 +12815,12 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     initialSize: rightInitialSize = 280,
     resizable: rightResizable = true,
     style: rightStyle,
-    className: rightClassName
+    className: rightClassName,
+    defaultCollapsed: rightDefaultCollapsed = false
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = React89.useRef(null);
+  const containerRef = React92.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -12422,8 +12853,21 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   );
   const leftSidebarRef = useRef28(null);
   const rightSidebarRef = useRef28(null);
-  const [internalLayoutState, setInternalLayoutState] = useState31(null);
-  const handleChangeLayoutState = useCallback32(
+  const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
+    value: leftTabValueProp,
+    onChange: onChangeLeftTab,
+    defaultValue: getFirstTabValue(leftTabItems, "")
+  });
+  const [rightTabValue, setRightTabValue] = useControlledOrUncontrolled({
+    value: rightTabValueProp,
+    onChange: onChangeRightTab,
+    defaultValue: getFirstTabValue(rightTabItems, "")
+  });
+  const [internalLayoutState, setInternalLayoutState] = useState31({
+    leftSidebarCollapsed: leftDefaultCollapsed,
+    rightSidebarCollapsed: rightDefaultCollapsed
+  });
+  const handleChangeLayoutState = useCallback33(
     (state) => {
       setInternalLayoutState(state);
       onChangeLayoutState?.(state);
@@ -12473,7 +12917,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
       }
     }
   }));
-  useKeyboardShortcuts3({
+  useKeyboardShortcuts4({
     "Mod-.": () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
@@ -12487,23 +12931,23 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left ? /* @__PURE__ */ React89.createElement(
+  const leftPanel = left ? /* @__PURE__ */ React92.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("bg-sidebar-background flex-col", leftClassName)
     },
-    left
+    leftTabValue ? renderPanelChildren(left, leftTabValue) : null
   ) : null;
-  const rightPanel = right ? /* @__PURE__ */ React89.createElement(
+  const rightPanel = right ? /* @__PURE__ */ React92.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("bg-sidebar-background flex-col", rightClassName)
     },
-    right
+    rightTabValue ? renderPanelChildren(right, rightTabValue) : null
   ) : null;
-  const centerPanel = /* @__PURE__ */ React89.createElement(PanelInner, { className: "bg-canvas-background" }, children);
+  const centerPanel = /* @__PURE__ */ React92.createElement(PanelInner, { className: "bg-canvas-background" }, children);
   const leftSidebarOptions = {
     minSize: leftSidebarMinPercentage,
     maxSize: leftSidebarMaxPercentage,
@@ -12518,7 +12962,7 @@ var WorkspaceLayout = forwardRef27(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__ */ React89.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "div",
     {
       ref: containerRef,
@@ -12528,12 +12972,18 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React89.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React92.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React92.createElement(
       LayoutComponent,
       {
         leftPanel,
         rightPanel,
         centerPanel,
+        leftTabItems,
+        leftTabValue,
+        onChangeLeftTab: setLeftTabValue,
+        rightTabItems,
+        rightTabValue,
+        onChangeRightTab: setRightTabValue,
         leftSidebarOptions,
         rightSidebarOptions,
         centerPanelPercentage,
@@ -12546,13 +12996,17 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = memo38(function PanelInner2({
+var PanelInner = memo36(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React89.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
+  return /* @__PURE__ */ React92.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
 });
+function getFirstTabValue(items, defaultValue2) {
+  const firstItem = items.at(0);
+  return firstItem?.type === void 0 ? firstItem?.value ?? defaultValue2 : defaultValue2;
+}
 
 // src/hooks/usePlatform.ts
 function usePlatform() {
@@ -12628,6 +13082,12 @@ function createSectionedMenu(...sections) {
   }).flat();
 }
 
+// src/utils/editableBlockStyles.ts
+var editableBlockStyles = (viewType = "editable") => cx(
+  "relative outline-primary focus:outline focus:outline-1",
+  viewType !== "preview" && "hover:outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:outline"
+);
+
 // src/utils/moveTreeItem.ts
 import { isDeepEqual as isDeepEqual4 } from "@noya-app/noya-utils";
 function moveTreeItem({
@@ -12706,11 +13166,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import * as React90 from "react";
+import * as React93 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React90.memo(function DimensionInput2({
+var DimensionInput = React93.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12720,15 +13180,15 @@ var DimensionInput = React90.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React90.useCallback(
+  const handleNudgeValue = React93.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React90.useCallback(
+  const handleSetValue = React93.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React90.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React90.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React93.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React93.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React93.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -12755,11 +13215,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title4,
   VerticalSeparator: () => VerticalSeparator
 });
-import React91, {
-  forwardRef as forwardRef28,
-  memo as memo40
+import React94, {
+  forwardRef as forwardRef27,
+  memo as memo38
 } from "react";
-var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var Section2 = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "div",
   {
     ref,
@@ -12767,8 +13227,8 @@ var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
-var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var SectionHeader3 = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
+var Title4 = forwardRef27(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "div",
   {
     ref,
@@ -12779,7 +13239,7 @@ var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var Row = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "div",
   {
     ref,
@@ -12787,7 +13247,7 @@ var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91
     ...props
   }
 ));
-var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var Column = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "div",
   {
     ref,
@@ -12795,7 +13255,7 @@ var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var Checkbox3 = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "input",
   {
     ref,
@@ -12804,7 +13264,7 @@ var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
+var Text3 = forwardRef27(({ className, ...props }, ref) => /* @__PURE__ */ React94.createElement(
   "span",
   {
     ref,
@@ -12812,14 +13272,14 @@ var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React91.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = forwardRef28(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ React94.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React94.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = forwardRef27(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React94.createElement(
     "label",
     {
       ref,
@@ -12831,7 +13291,7 @@ var RowLabel = forwardRef28(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo40(function LabeledRow2({
+var LabeledRow = memo38(function LabeledRow2({
   id,
   children,
   label,
@@ -12839,190 +13299,8 @@ var LabeledRow = memo40(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React91.createElement(Row, { id, className }, /* @__PURE__ */ React91.createElement(Column, null, /* @__PURE__ */ React91.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React91.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React91.createElement(Row, null, children)));
-});
-
-// src/components/BaseToolbar.tsx
-import React92 from "react";
-var toolbarStyle = {
-  [cssVarNames.colors.buttonBackground]: "transparent",
-  [cssVarNames.colors.inputBackground]: "transparent"
-};
-function BaseToolbar({
-  children,
-  left,
-  right,
-  logo,
-  showDivider = true
-}) {
-  return /* @__PURE__ */ React92.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React92.createElement(
-    "div",
-    {
-      className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
-      style: {
-        flex: `0 0 ${cssVars.spacing.toolbarHeight}`
-      }
-    },
-    logo && /* @__PURE__ */ React92.createElement(React92.Fragment, null, logo, /* @__PURE__ */ React92.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React92.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React92.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "all"
-        }
-      },
-      children
-    )),
-    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React92.createElement("div", { className: "flex gap-toolbar-separator" }, right)
-  ), showDivider && /* @__PURE__ */ React92.createElement(Divider, { variant: "strong" }));
-}
-
-// src/components/Toolbar.tsx
-import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React93 from "react";
-var iconButtonStyle = {
-  height: 27,
-  width: 27,
-  minWidth: 27
-};
-var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
-  item,
-  onSelectMenuItem
-}) {
-  const [open, setOpen] = React93.useState(false);
-  return /* @__PURE__ */ React93.createElement(
-    DropdownMenu,
-    {
-      open,
-      onOpenChange: setOpen,
-      items: item.items,
-      onSelect: (value) => {
-        if (onSelectMenuItem && value) {
-          onSelectMenuItem(value);
-        }
-      }
-    },
-    /* @__PURE__ */ React93.createElement(
-      Button,
-      {
-        disabled: item.disabled,
-        active: item.checked || open,
-        icon: item.icon,
-        iconRight: "DropdownChevronIcon"
-      },
-      item.title
-    )
-  );
-});
-var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
-  item,
-  onSelectMenuItem,
-  as
-}) {
-  const content = /* @__PURE__ */ React93.createElement(
-    Button,
-    {
-      as,
-      disabled: item.disabled,
-      active: item.checked,
-      icon: item.icon,
-      style: item.icon && !item.title ? iconButtonStyle : void 0,
-      ...as === "a" && { href: item.value },
-      onClick: () => {
-        if (onSelectMenuItem && item.value) {
-          onSelectMenuItem(item.value);
-        }
-      }
-    },
-    item.title
-  );
-  return item.tooltip ? /* @__PURE__ */ React93.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+  return /* @__PURE__ */ React94.createElement(Row, { id, className }, /* @__PURE__ */ React94.createElement(Column, null, /* @__PURE__ */ React94.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React94.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React94.createElement(Row, null, children)));
 });
-var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
-  item,
-  onSelectMenuItem,
-  buttonAs
-}) {
-  if (item.type === "sectionHeader") return null;
-  if (item.type === "separator") {
-    return /* @__PURE__ */ React93.createElement(DividerVertical, { overflow: 4 });
-  }
-  if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React93.createElement(
-      ToolbarMenuButton,
-      {
-        item,
-        onSelectMenuItem,
-        as: buttonAs
-      }
-    );
-  }
-  return /* @__PURE__ */ React93.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
-});
-var ToolbarMenu = memoGeneric(function ToolbarMenu2({
-  items,
-  onSelectMenuItem,
-  buttonAs
-}) {
-  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React93.createElement(
-      ToolbarMenuItem,
-      {
-        key: i,
-        item,
-        onSelectMenuItem,
-        buttonAs
-      }
-    );
-  }));
-});
-function Toolbar({
-  children,
-  logo,
-  leftMenuItems = [],
-  rightMenuItems = [],
-  onSelectMenuItem,
-  shouldBindKeyboardShortcuts = true
-}) {
-  const allMenuItems = React93.useMemo(
-    () => [...leftMenuItems, ...rightMenuItems],
-    [leftMenuItems, rightMenuItems]
-  );
-  useKeyboardShortcuts4(
-    React93.useMemo(
-      () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
-      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
-    )
-  );
-  return /* @__PURE__ */ React93.createElement(
-    BaseToolbar,
-    {
-      logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React93.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React93.createElement(
-        ToolbarMenu,
-        {
-          items: leftMenuItems,
-          onSelectMenuItem
-        }
-      )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React93.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React93.createElement(
-        ToolbarMenu,
-        {
-          items: rightMenuItems,
-          onSelectMenuItem
-        }
-      ))
-    },
-    children
-  );
-}
 export {
   AIAssistantInput,
   AIAssistantLayout,
@@ -13097,7 +13375,7 @@ export {
   LEFT_SIDEBAR_ID,
   Label,
   LabelContext,
-  LabelPositionContext,
+  LabelTypeContext,
   LabelWidthContext,
   LabeledElementView,
   LabeledField,
@@ -13131,6 +13409,7 @@ export {
   SortableItemContext,
   Spacer,
   Switch,
+  Tabs,
   Text,
   TextArea,
   TextAreaRow,
@@ -13141,6 +13420,8 @@ export {
   ToolbarMenuButton,
   ToolbarMenuDropdown,
   ToolbarMenuItem,
+  ToolbarMenuPopover,
+  ToolbarShortcut,
   Tooltip,
   TreeView,
   UserAvatar,
@@ -13158,6 +13439,7 @@ export {
   cx,
   defaultAcceptsDrop,
   dragItemKeySeparator,
+  editableBlockStyles,
   filterWithGroupedSections,
   fuzzyFilter,
   fuzzyScore,
@@ -13175,6 +13457,7 @@ export {
   getThumbnailColors,
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
+  isPopoverMenuItem,
   isSelectableMenuItem,
   isSelectableMenuItemWithScore,
   labeledFieldStyles,
@@ -13213,7 +13496,7 @@ export {
   useIndent,
   useInputFieldContext,
   useLabel,
-  useLabelPosition,
+  useLabelType,
   useLabelWidth,
   useOpenConfirmationDialog,
   useOpenDialog,