@noya-app/noya-designsystem 0.1.10 → 0.1.12

package/dist/index.js

@@ -6,8 +6,8 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+  for (var name3 in all)
+    __defProp(target, name3, { get: all[name3], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -33,6 +33,7 @@ __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
   ArrayController: () => ArrayController,
   Avatar: () => Avatar,
+  AvatarStack: () => AvatarStack,
   Body: () => Body,
   Button: () => Button,
   ButtonElement: () => ButtonElement,
@@ -51,6 +52,8 @@ __export(src_exports, {
   DropdownMenu: () => DropdownMenu,
   FillInputField: () => FillInputField,
   FillPreviewBackground: () => FillPreviewBackground,
+  FloatingWindow: () => FloatingWindow,
+  FloatingWindowProvider: () => FloatingWindowProvider,
   FullscreenDialog: () => FullscreenDialog,
   GlobalInputBlurProvider: () => GlobalInputBlurProvider,
   GradientPicker: () => GradientPicker,
@@ -108,9 +111,11 @@ __export(src_exports, {
   sketchColorToHex: () => sketchColorToHex,
   sketchColorToRgba: () => sketchColorToRgba,
   sketchColorToRgbaString: () => sketchColorToRgbaString,
+  useCurrentFloatingWindowInternal: () => useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration: () => useDesignSystemConfiguration,
   useDesignSystemTheme: () => useDesignSystemTheme,
   useDialogContainsElement: () => useDialogContainsElement,
+  useFloatingWindowManager: () => useFloatingWindowManager,
   useGlobalInputBlur: () => useGlobalInputBlur,
   useGlobalInputBlurListener: () => useGlobalInputBlurListener,
   useGlobalInputBlurTrigger: () => useGlobalInputBlurTrigger,
@@ -155,9 +160,94 @@ var ActivityIndicator = (0, import_react.memo)(function ActivityIndicator2({
 
 // src/components/Avatar.tsx
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_react2 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
+
+// src/components/Stack.tsx
+var import_react3 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
-var AvatarRoot = (0, import_styled_components2.default)(AvatarPrimitive.Root)(({ theme, size: size2, overflow }) => ({
+
+// src/utils/breakpoints.ts
+function mergeBreakpoints(breakpoints, transform) {
+  const breakpointMap = Array.isArray(breakpoints) ? breakpoints.reduce(
+    (result, item) => {
+      const [key, value] = item;
+      result[key] = result[key] ? { ...result[key], ...value } : value;
+      return result;
+    },
+    {}
+  ) : breakpoints;
+  const breakpointList = Object.entries(breakpointMap);
+  const transformedList = breakpointList.sort((a, b) => Number(b[0]) - Number(a[0])).map(([width, value]) => [
+    `@media screen and (max-width: ${width}px)`,
+    transform?.(value) ?? value
+  ]);
+  return Object.fromEntries(transformedList);
+}
+
+// src/utils/withSeparatorElements.ts
+var import_react2 = require("react");
+function createKey(key) {
+  return `s-${key}`;
+}
+function withSeparatorElements(elements2, separator) {
+  const childrenArray = import_react2.Children.toArray(elements2);
+  for (let i = childrenArray.length - 1; i > 0; i--) {
+    let sep = typeof separator === "function" ? separator() : (0, import_react2.isValidElement)(separator) ? (0, import_react2.cloneElement)(separator, { key: createKey(i) }) : separator;
+    if ((0, import_react2.isValidElement)(sep) && sep.key == null) {
+      sep = (0, import_react2.cloneElement)(sep, { key: createKey(i) });
+    }
+    if (!sep || typeof sep === "boolean")
+      continue;
+    childrenArray.splice(i, 0, sep);
+  }
+  return childrenArray;
+}
+
+// src/components/Stack.tsx
+var Element = import_styled_components2.default.div(({ styleProps, breakpoints }) => ({
+  ...styleProps,
+  ...mergeBreakpoints(breakpoints || [])
+}));
+var StackBase = (0, import_react3.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
+  const elements2 = separator ? withSeparatorElements(import_react3.Children.toArray(children), separator) : children;
+  const styleProps = {
+    display: "flex",
+    position: "relative",
+    alignItems: "stretch",
+    ...rest
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Element,
+    {
+      ref: forwardedRef,
+      id,
+      as,
+      styleProps,
+      breakpoints,
+      tabIndex,
+      ...href && { href }
+    },
+    elements2
+  );
+});
+var VerticalStack = (0, import_react3.memo)(
+  (0, import_react3.forwardRef)(function VStack(props, forwardedRef) {
+    return /* @__PURE__ */ import_react3.default.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
+  })
+);
+var HorizontalStack = (0, import_react3.memo)(
+  (0, import_react3.forwardRef)(function HStack(props, forwardedRef) {
+    return /* @__PURE__ */ import_react3.default.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
+  })
+);
+var Stack = {
+  V: VerticalStack,
+  H: HorizontalStack
+};
+
+// src/components/Avatar.tsx
+var AvatarRoot = (0, import_styled_components3.default)(AvatarPrimitive.Root)(({ theme, size: size2, overflow }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -168,17 +258,23 @@ var AvatarRoot = (0, import_styled_components2.default)(AvatarPrimitive.Root)(({
   height: size2,
   borderRadius: "100%",
   backgroundColor: theme.colors.secondaryLight,
+  outline: `1px solid ${theme.colors.secondary}`,
+  outlineOffset: "-1px",
   ...overflow && {
     margin: `-${overflow}px`
+  },
+  "&:hover": {
+    boxShadow: `0 0 0 2px ${theme.colors.sidebar.background}`,
+    opacity: 0.9
   }
 }));
-var AvatarImage = (0, import_styled_components2.default)(AvatarPrimitive.Image)({
+var AvatarImage = (0, import_styled_components3.default)(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   objectFit: "cover",
   borderRadius: "inherit"
 });
-var AvatarFallback = (0, import_styled_components2.default)(AvatarPrimitive.Fallback)(({ theme, size: size2 }) => ({
+var AvatarFallback = (0, import_styled_components3.default)(AvatarPrimitive.Fallback)(({ theme, size: size2 }) => ({
   fontSize: "0.8rem",
   fontWeight: 500,
   width: "100%",
@@ -189,25 +285,47 @@ var AvatarFallback = (0, import_styled_components2.default)(AvatarPrimitive.Fall
   color: "white",
   lineHeight: `${size2}px`
 }));
-function Avatar({
+var Avatar = (0, import_react4.forwardRef)(function Avatar2({
   image,
-  name,
+  name: name3,
   fallback,
   size: size2 = 19,
-  overflow = 0
+  overflow = 0,
+  ...props
+}, forwardedRef) {
+  return /* @__PURE__ */ import_react4.default.createElement(AvatarRoot, { ref: forwardedRef, size: size2, overflow, ...props }, /* @__PURE__ */ import_react4.default.createElement(AvatarImage, { src: image, alt: name3 }), /* @__PURE__ */ import_react4.default.createElement(AvatarFallback, { size: size2 }, fallback));
+});
+var AvatarStackItemWrapper = import_styled_components3.default.div(({ size: size2, theme }) => ({
+  position: "relative",
+  width: size2,
+  height: size2,
+  marginLeft: "-8px",
+  outline: `2px solid ${theme.colors.sidebar.background}`,
+  borderRadius: "50%"
+}));
+function AvatarStack({
+  size: size2 = 19,
+  children
 }) {
-  return /* @__PURE__ */ import_react2.default.createElement(AvatarRoot, { size: size2, overflow }, /* @__PURE__ */ import_react2.default.createElement(AvatarImage, { src: image, alt: name }), /* @__PURE__ */ import_react2.default.createElement(AvatarFallback, { size: size2 }, fallback));
+  const childrenArray = import_react4.default.Children.toArray(children).map((child) => {
+    return import_react4.default.cloneElement(child, { size: size2 });
+  });
+  return /* @__PURE__ */ import_react4.default.createElement(Stack.H, null, childrenArray.map((child, index) => {
+    if (index === 0)
+      return child;
+    return /* @__PURE__ */ import_react4.default.createElement(AvatarStackItemWrapper, { size: size2, key: index }, child);
+  }));
 }
 
 // src/components/Button.tsx
-var import_react4 = __toESM(require("react"));
-var import_styled_components4 = __toESM(require("styled-components"));
+var import_react6 = __toESM(require("react"));
+var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/components/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_react3 = __toESM(require("react"));
-var import_styled_components3 = __toESM(require("styled-components"));
-var Content2 = (0, import_styled_components3.default)(TooltipPrimitive.Content)(({ theme }) => ({
+var import_react5 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
+var Content2 = (0, import_styled_components4.default)(TooltipPrimitive.Content)(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.text,
   borderRadius: 3,
@@ -216,8 +334,8 @@ var Content2 = (0, import_styled_components3.default)(TooltipPrimitive.Content)(
   boxShadow: "0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)",
   border: `1px solid ${theme.colors.dividerStrong}`
 }));
-var Tooltip = (0, import_react3.memo)(function Tooltip2({ children, content }) {
-  return /* @__PURE__ */ import_react3.default.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ import_react3.default.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ import_react3.default.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react3.default.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ import_react3.default.createElement(
+var Tooltip = (0, import_react5.memo)(function Tooltip2({ children, content }) {
+  return /* @__PURE__ */ import_react5.default.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ import_react5.default.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ import_react5.default.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react5.default.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ import_react5.default.createElement(
     Content2,
     {
       side: "bottom",
@@ -230,7 +348,7 @@ var Tooltip = (0, import_react3.memo)(function Tooltip2({ children, content }) {
 });
 
 // src/components/Button.tsx
-var ButtonElement = import_styled_components4.default.button(
+var ButtonElement = import_styled_components5.default.button(
   ({
     theme,
     active,
@@ -240,7 +358,7 @@ var ButtonElement = import_styled_components4.default.button(
     flex,
     defaultBackground = theme.colors.inputBackground
   }) => ({
-    ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.small,
+    ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.button,
     textDecoration: "none",
     lineHeight: "1",
     flex: flex ?? "0 0 auto",
@@ -328,7 +446,7 @@ var ButtonElement = import_styled_components4.default.button(
     }
   })
 );
-var ButtonContent = import_styled_components4.default.span(({ theme }) => ({
+var ButtonContent = import_styled_components5.default.span(({ theme }) => ({
   // Line height of small text - maybe figure out better way to ensure
   // icons don't have a smaller height
   minHeight: "19px",
@@ -339,7 +457,7 @@ var ButtonContent = import_styled_components4.default.span(({ theme }) => ({
   // Helps with alignment with the default small text
   lineHeight: "15px"
 }));
-var Button = (0, import_react4.forwardRef)(function Button2({
+var Button = (0, import_react6.forwardRef)(function Button2({
   id,
   className,
   style: style3,
@@ -357,7 +475,7 @@ var Button = (0, import_react4.forwardRef)(function Button2({
   ...rest
   // Propagate any other props so this component works as a Slot
 }, forwardedRef) {
-  const buttonElement = /* @__PURE__ */ import_react4.default.createElement(
+  const buttonElement = /* @__PURE__ */ import_react6.default.createElement(
     ButtonElement,
     {
       ref: forwardedRef,
@@ -372,46 +490,46 @@ var Button = (0, import_react4.forwardRef)(function Button2({
       size: size2,
       defaultBackground,
       onClick,
-      onDoubleClick: (0, import_react4.useCallback)((event) => {
+      onDoubleClick: (0, import_react6.useCallback)((event) => {
         event.stopPropagation();
       }, []),
       ...rest
     },
-    /* @__PURE__ */ import_react4.default.createElement(ButtonContent, { style: contentStyle }, children)
+    /* @__PURE__ */ import_react6.default.createElement(ButtonContent, { style: contentStyle }, children)
   );
-  return tooltip ? /* @__PURE__ */ import_react4.default.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
+  return tooltip ? /* @__PURE__ */ import_react6.default.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 
 // src/components/Chip.tsx
 var import_noya_icons3 = require("@noya-app/noya-icons");
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/contexts/DesignSystemConfiguration.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_styled_components15 = require("styled-components");
 
 // src/components/Toast.tsx
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var import_react6 = __toESM(require("react"));
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_react8 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/components/IconButton.tsx
 var Icons = __toESM(require("@noya-app/noya-icons"));
-var import_react5 = __toESM(require("react"));
-var import_styled_components5 = require("styled-components");
-var IconButton = (0, import_react5.memo)(
-  (0, import_react5.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
-    const { icon: iconColor, iconSelected: iconSelectedColor } = (0, import_styled_components5.useTheme)().colors;
+var import_react7 = __toESM(require("react"));
+var import_styled_components6 = require("styled-components");
+var IconButton = (0, import_react7.memo)(
+  (0, import_react7.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+    const { icon: iconColor, iconSelected: iconSelectedColor } = (0, import_styled_components6.useTheme)().colors;
     const Icon = Icons[iconName];
-    const style3 = (0, import_react5.useMemo)(() => {
+    const style3 = (0, import_react7.useMemo)(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ import_react5.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react7.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react7.default.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -422,7 +540,7 @@ var IconButton = (0, import_react5.memo)(
 );
 
 // src/components/Toast.tsx
-var ToastViewport = (0, import_styled_components6.default)(ToastPrimitive.Viewport)({
+var ToastViewport = (0, import_styled_components7.default)(ToastPrimitive.Viewport)({
   position: "fixed",
   bottom: 0,
   right: 0,
@@ -437,7 +555,7 @@ var ToastViewport = (0, import_styled_components6.default)(ToastPrimitive.Viewpo
   zIndex: 2147483647,
   outline: "none"
 });
-var ToastRoot = (0, import_styled_components6.default)(ToastPrimitive.Root)(({ theme }) => ({
+var ToastRoot = (0, import_styled_components7.default)(ToastPrimitive.Root)(({ theme }) => ({
   borderRadius: 4,
   fontSize: 14,
   backgroundColor: theme.colors.popover.background,
@@ -450,19 +568,19 @@ var ToastRoot = (0, import_styled_components6.default)(ToastPrimitive.Root)(({ t
   columnGap: 10,
   alignItems: "center"
 }));
-var ToastTitle = (0, import_styled_components6.default)(ToastPrimitive.Title)(({ theme }) => ({
+var ToastTitle = (0, import_styled_components7.default)(ToastPrimitive.Title)(({ theme }) => ({
   gridArea: "title",
   marginBottom: 5,
   ...theme.textStyles.label,
   fontWeight: "bold",
   color: theme.colors.text
 }));
-var ToastDescription = (0, import_styled_components6.default)(ToastPrimitive.Description)(({ theme }) => ({
+var ToastDescription = (0, import_styled_components7.default)(ToastPrimitive.Description)(({ theme }) => ({
   gridArea: "description",
   ...theme.textStyles.small,
   color: theme.colors.textMuted
 }));
-var ToastAction = (0, import_styled_components6.default)(ToastPrimitive.Action)({
+var ToastAction = (0, import_styled_components7.default)(ToastPrimitive.Action)({
   gridArea: "action"
 });
 var Toast = ({
@@ -471,9 +589,9 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ import_react6.default.createElement(ToastTitle, null, title), /* @__PURE__ */ import_react6.default.createElement(ToastDescription, null, content), children && /* @__PURE__ */ import_react6.default.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ import_react6.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react6.default.createElement(IconButton, { iconName: "Cross1Icon" })));
+  return /* @__PURE__ */ import_react8.default.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ import_react8.default.createElement(ToastTitle, null, title), /* @__PURE__ */ import_react8.default.createElement(ToastDescription, null, content), children && /* @__PURE__ */ import_react8.default.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react8.default.createElement(IconButton, { iconName: "Cross1Icon" })));
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ import_react6.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react6.default.createElement(ToastViewport, null));
+var ToastProvider = ({ children }) => /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react8.default.createElement(ToastViewport, null));
 
 // src/contexts/DialogContext.tsx
 var import_react32 = __toESM(require("react"));
@@ -481,16 +599,16 @@ var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/Dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_react7 = __toESM(require("react"));
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_react9 = __toESM(require("react"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/Spacer.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
-var SpacerVertical = import_styled_components7.default.span(({ size: size2, inline }) => ({
+var import_styled_components8 = __toESM(require("styled-components"));
+var SpacerVertical = import_styled_components8.default.span(({ size: size2, inline }) => ({
   display: inline ? "inline-block" : "block",
   ...size2 === void 0 ? { flex: 1 } : { minHeight: size2 }
 }));
-var SpacerHorizontal = import_styled_components7.default.span(({ size: size2, inline }) => ({
+var SpacerHorizontal = import_styled_components8.default.span(({ size: size2, inline }) => ({
   display: inline ? "inline-block" : "block",
   ...size2 === void 0 ? { flex: 1 } : { minWidth: size2 }
 }));
@@ -501,12 +619,12 @@ var Spacer;
 })(Spacer || (Spacer = {}));
 
 // src/components/Dialog.tsx
-var StyledOverlay = (0, import_styled_components8.default)(DialogPrimitive.Overlay)({
+var StyledOverlay = (0, import_styled_components9.default)(DialogPrimitive.Overlay)({
   backgroundColor: "rgba(0,0,0,0.5)",
   position: "fixed",
   inset: 0
 });
-var StyledContent = (0, import_styled_components8.default)(DialogPrimitive.Content)(({ theme }) => ({
+var StyledContent = (0, import_styled_components9.default)(DialogPrimitive.Content)(({ theme }) => ({
   boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
   position: "fixed",
   top: "50%",
@@ -525,17 +643,17 @@ var StyledContent = (0, import_styled_components8.default)(DialogPrimitive.Conte
   pointerEvents: "all",
   zIndex: 1e3
 }));
-var StyledTitle = (0, import_styled_components8.default)(DialogPrimitive.Title)(({ theme }) => ({
+var StyledTitle = (0, import_styled_components9.default)(DialogPrimitive.Title)(({ theme }) => ({
   margin: 0,
   ...theme.textStyles.body,
   color: theme.colors.text
 }));
-var StyledDescription = (0, import_styled_components8.default)(DialogPrimitive.Description)(({ theme }) => ({
+var StyledDescription = (0, import_styled_components9.default)(DialogPrimitive.Description)(({ theme }) => ({
   margin: 0,
   ...theme.textStyles.small,
   color: theme.colors.textMuted
 }));
-var CloseButtonContainer = import_styled_components8.default.div(({ theme }) => ({
+var CloseButtonContainer = import_styled_components9.default.div(({ theme }) => ({
   position: "absolute",
   top: theme.sizes.dialog.padding,
   right: theme.sizes.dialog.padding,
@@ -546,7 +664,7 @@ var CloseButtonContainer = import_styled_components8.default.div(({ theme }) =>
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`
 }));
-var Dialog = (0, import_react7.forwardRef)(function Dialog2({
+var Dialog = (0, import_react9.forwardRef)(function Dialog2({
   children,
   title,
   description,
@@ -556,15 +674,15 @@ var Dialog = (0, import_react7.forwardRef)(function Dialog2({
   onOpenAutoFocus,
   closeOnInteractOutside = true
 }, forwardedRef) {
-  const contentRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useImperativeHandle)(forwardedRef, () => ({
+  const contentRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useImperativeHandle)(forwardedRef, () => ({
     containsElement(element) {
       if (!contentRef.current)
         return false;
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ import_react7.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react7.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react9.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react9.default.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -579,14 +697,14 @@ var Dialog = (0, import_react7.forwardRef)(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ import_react7.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react7.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react7.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react7.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react7.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react7.default.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ import_react9.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react9.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react9.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react9.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
-var FullscreenDialog = (0, import_react7.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react7.default.createElement(
+var FullscreenDialog = (0, import_react9.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react9.default.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -613,13 +731,13 @@ var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_noya_utils5 = require("@noya-app/noya-utils");
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useSize.ts
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 function useSize(refToObserve, dimensions = "both") {
-  const [size2, setSize] = React8.useState(void 0);
-  React8.useEffect(() => {
+  const [size2, setSize] = React9.useState(void 0);
+  React9.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -666,37 +784,37 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = (0, import_react8.memo)(function AutoSizer2({
+var AutoSizer = (0, import_react10.memo)(function AutoSizer2({
   children,
   className
 }) {
-  const containerRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ import_react10.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
-var SingleDimensionAutoSizer = (0, import_react8.memo)(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = (0, import_react10.memo)(function SingleDimensionAutoSizer2({
   children,
   dimension,
   className
 }) {
-  const containerRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ import_react10.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 function useFileDropTarget(dropEvent) {
-  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react9.useState)(false);
-  const handleDragEvent = (0, import_react9.useCallback)((event, on) => {
+  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react11.useState)(false);
+  const handleDragEvent = (0, import_react11.useCallback)((event, on) => {
     if (on !== void 0)
       setIsDropTargetActive(on);
     event.preventDefault();
   }, []);
-  const handleDropEvent = (0, import_react9.useCallback)(
+  const handleDropEvent = (0, import_react11.useCallback)(
     (event) => {
       dropEvent(event);
       setIsDropTargetActive(false);
@@ -719,12 +837,12 @@ function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
 var style2 = { display: "flex", flex: 1 };
-var FileDropTarget = (0, import_react10.memo)(function FileDropTarget2({
+var FileDropTarget = (0, import_react12.memo)(function FileDropTarget2({
   children,
   onDropFiles,
   supportedFileTypes
 }) {
-  const handleFile = (0, import_react10.useCallback)(
+  const handleFile = (0, import_react12.useCallback)(
     (event) => {
       event.preventDefault();
       const offsetPoint = {
@@ -757,51 +875,51 @@ var FileDropTarget = (0, import_react10.memo)(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ import_react12.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
 var import_noya_utils = require("@noya-app/noya-utils");
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
 var import_noya_utils2 = require("@noya-app/noya-utils");
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // ../noya-react-utils/src/hooks/useFetch.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // ../noya-react-utils/src/hooks/useIsMounted.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // ../noya-react-utils/src/hooks/usePersistentState.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 var import_noya_utils3 = require("@noya-app/noya-utils");
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -923,34 +1041,13 @@ function handleNudge(e) {
 var import_noya_icons = require("@noya-app/noya-icons");
 var import_noya_keymap2 = require("@noya-app/noya-keymap");
 var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_react26 = __toESM(require("react"));
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_react27 = __toESM(require("react"));
+var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/components/internal/Menu.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var import_react25 = __toESM(require("react"));
-var import_styled_components9 = __toESM(require("styled-components"));
-
-// src/utils/withSeparatorElements.ts
-var import_react24 = require("react");
-function createKey(key) {
-  return `s-${key}`;
-}
-function withSeparatorElements(elements2, separator) {
-  const childrenArray = import_react24.Children.toArray(elements2);
-  for (let i = childrenArray.length - 1; i > 0; i--) {
-    let sep = typeof separator === "function" ? separator() : (0, import_react24.isValidElement)(separator) ? (0, import_react24.cloneElement)(separator, { key: createKey(i) }) : separator;
-    if ((0, import_react24.isValidElement)(sep) && sep.key == null) {
-      sep = (0, import_react24.cloneElement)(sep, { key: createKey(i) });
-    }
-    if (!sep || typeof sep === "boolean")
-      continue;
-    childrenArray.splice(i, 0, sep);
-  }
-  return childrenArray;
-}
-
-// src/components/internal/Menu.tsx
+var import_react26 = __toESM(require("react"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
 var CHECKBOX_RIGHT_INSET = 3;
@@ -964,9 +1061,7 @@ var styles = {
     theme,
     disabled
   }) => ({
-    ...theme.textStyles.small,
-    fontWeight: 500,
-    fontSize: "0.8rem",
+    ...theme.textStyles.button,
     flex: "0 0 auto",
     userSelect: "none",
     cursor: "pointer",
@@ -1028,7 +1123,7 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
     menuItems.flatMap(getKeyboardShortcuts).map(([key, value]) => [key, () => onSelect(value)])
   );
 }
-var ShortcutElement = import_styled_components9.default.kbd(
+var ShortcutElement = import_styled_components10.default.kbd(
   ({
     theme,
     fixedWidth
@@ -1041,12 +1136,12 @@ var ShortcutElement = import_styled_components9.default.kbd(
     }
   })
 );
-var KeyboardShortcut = (0, import_react25.memo)(function KeyboardShortcut2({
+var KeyboardShortcut = (0, import_react26.memo)(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = (0, import_noya_keymap.getShortcutDisplayParts)(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ import_react25.default.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ import_react26.default.createElement(
     ShortcutElement,
     {
       key,
@@ -1054,24 +1149,24 @@ var KeyboardShortcut = (0, import_react25.memo)(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ import_react25.default.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ import_react26.default.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
 // src/components/DropdownMenu.tsx
-var SeparatorElement = (0, import_styled_components10.default)(RadixDropdownMenu.Separator)(
+var SeparatorElement = (0, import_styled_components11.default)(RadixDropdownMenu.Separator)(
   styles.separatorStyle
 );
-var ItemElement = (0, import_styled_components10.default)(RadixDropdownMenu.Item)(styles.itemStyle);
-var CheckboxItemElement = (0, import_styled_components10.default)(RadixDropdownMenu.CheckboxItem)(
+var ItemElement = (0, import_styled_components11.default)(RadixDropdownMenu.Item)(styles.itemStyle);
+var CheckboxItemElement = (0, import_styled_components11.default)(RadixDropdownMenu.CheckboxItem)(
   styles.itemStyle
 );
-var StyledItemIndicator = (0, import_styled_components10.default)(RadixDropdownMenu.ItemIndicator)(
+var StyledItemIndicator = (0, import_styled_components11.default)(RadixDropdownMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var DropdownMenuItem = (0, import_react26.memo)(function ContextMenuItem({
+var DropdownMenuItem = (0, import_react27.memo)(function ContextMenuItem({
   value,
   children,
   onSelect,
@@ -1082,27 +1177,27 @@ var DropdownMenuItem = (0, import_react26.memo)(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = (0, import_react26.useCallback)(() => {
+  const handleSelectItem = (0, import_react27.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react26.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react26.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react26.default.createElement(import_noya_icons.CheckIcon, null)),
-      icon && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, icon, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react27.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react27.default.createElement(import_noya_icons.CheckIcon, null)),
+      icon && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, icon, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react26.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, icon, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react26.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react26.default.createElement(import_noya_icons.ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ import_react27.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, icon, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react27.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react27.default.createElement(import_noya_icons.ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react26.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1116,9 +1211,9 @@ var DropdownMenuItem = (0, import_react26.memo)(function ContextMenuItem({
     return element;
   }
 });
-var Content5 = (0, import_styled_components10.default)(RadixDropdownMenu.Content)(styles.contentStyle);
-var SubContent2 = (0, import_styled_components10.default)(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2({
+var Content5 = (0, import_styled_components11.default)(RadixDropdownMenu.Content)(styles.contentStyle);
+var SubContent2 = (0, import_styled_components11.default)(RadixDropdownMenu.SubContent)(styles.contentStyle);
+var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1136,7 +1231,7 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react26.useMemo)(
+  const keymap = (0, import_react27.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -1144,8 +1239,8 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
   const RootComponent = isNested ? RadixDropdownMenu.Sub : RadixDropdownMenu.Root;
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
-  const contentStyle = (0, import_react26.useMemo)(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ import_react26.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react26.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react26.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react26.default.createElement(
+  const contentStyle = (0, import_react27.useMemo)(() => ({ zIndex: 1e3 }), []);
+  return /* @__PURE__ */ import_react27.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react27.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react27.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react27.default.createElement(
     ContentComponent,
     {
       side,
@@ -1157,7 +1252,7 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react26.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react26.default.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react27.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react27.default.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1175,14 +1270,14 @@ var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2
     )
   )));
 });
-var DropdownMenu = (0, import_react26.memo)(DropdownMenuRoot);
+var DropdownMenu = (0, import_react27.memo)(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/contexts/GlobalInputBlurContext.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1203,14 +1298,14 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = (0, import_react27.createContext)(defaultValue);
+var GlobalInputBlurContext = (0, import_react28.createContext)(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return (0, import_react27.useContext)(GlobalInputBlurContext);
+  return (0, import_react28.useContext)(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1222,8 +1317,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = (0, import_react28.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react28.default.createElement(
+var ReadOnlyTextInput = (0, import_react29.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react29.default.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1234,7 +1329,7 @@ var ReadOnlyTextInput = (0, import_react28.forwardRef)(function ReadOnlyTextInpu
     }
   );
 });
-var ControlledTextInput = (0, import_react28.forwardRef)(function ControlledTextInput2({
+var ControlledTextInput = (0, import_react29.forwardRef)(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1243,28 +1338,28 @@ var ControlledTextInput = (0, import_react28.forwardRef)(function ControlledText
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = (0, import_react28.useCallback)(
+  const handleBlur = (0, import_react29.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = (0, import_react28.useCallback)(
+  const handleFocusCapture = (0, import_react29.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      onChange: (0, import_react28.useCallback)(
+      onChange: (0, import_react29.useCallback)(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1273,7 +1368,7 @@ var ControlledTextInput = (0, import_react28.forwardRef)(function ControlledText
     }
   );
 });
-var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTextInput2({
+var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1284,16 +1379,16 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = import_react28.default.useRef(null);
-  const latestValue = (0, import_react28.useRef)(value);
+  const ref = import_react29.default.useRef(null);
+  const latestValue = (0, import_react29.useRef)(value);
   latestValue.current = value;
-  const userDidEdit = (0, import_react28.useRef)(false);
-  const isSubmitTriggeredByEscapeKey = (0, import_react28.useRef)(false);
-  const [internalValue, setInternalValue] = (0, import_react28.useState)("");
-  (0, import_react28.useLayoutEffect)(() => {
+  const userDidEdit = (0, import_react29.useRef)(false);
+  const isSubmitTriggeredByEscapeKey = (0, import_react29.useRef)(false);
+  const [internalValue, setInternalValue] = (0, import_react29.useState)("");
+  (0, import_react29.useLayoutEffect)(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = (0, import_react28.useCallback)(() => {
+  const handleSubmit = (0, import_react29.useCallback)(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1303,13 +1398,13 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    (0, import_react28.useCallback)(() => {
+    (0, import_react29.useCallback)(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react29.useCallback)(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1324,14 +1419,14 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = (0, import_react28.useCallback)(
+  const handleChange = (0, import_react29.useCallback)(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react28.useCallback)(
+  const handleBlur = (0, import_react29.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1339,19 +1434,19 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = (0, import_react28.useCallback)(
+  const handleFocusCapture = (0, import_react29.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = (0, import_react28.useRef)(
+  const autoSubmitTimeoutRef = (0, import_react29.useRef)(
     null
   );
-  const latestHandleSubmit = (0, import_react28.useRef)(handleSubmit);
+  const latestHandleSubmit = (0, import_react29.useRef)(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1368,7 +1463,7 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     "input",
     {
       ref: (0, import_react_compose_refs.composeRefs)(ref, forwardedRef),
@@ -1381,13 +1476,13 @@ var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTe
     }
   );
 });
-var TextInput_default = (0, import_react28.forwardRef)(function TextInput(props, forwardedRef) {
+var TextInput_default = (0, import_react29.forwardRef)(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: (0, import_react28.useCallback)(
+    onPointerDown: (0, import_react29.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: (0, import_react28.useCallback)(
+    onClick: (0, import_react29.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1400,19 +1495,19 @@ var TextInput_default = (0, import_react28.forwardRef)(function TextInput(props,
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ import_react28.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ import_react29.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ import_react28.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react29.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ import_react28.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react29.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_react29 = __toESM(require("react"));
-var import_styled_components11 = __toESM(require("styled-components"));
-var ContentElement = (0, import_styled_components11.default)(PopoverPrimitive.Content)(({ theme, variant }) => ({
+var import_react30 = __toESM(require("react"));
+var import_styled_components12 = __toESM(require("styled-components"));
+var ContentElement = (0, import_styled_components12.default)(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
   fontSize: 14,
   backgroundColor: theme.colors.popover.background,
@@ -1424,10 +1519,10 @@ var ContentElement = (0, import_styled_components11.default)(PopoverPrimitive.Co
   ...variant === "normal" && { width: "240px" },
   zIndex: 1e3
 }));
-var ArrowElement = (0, import_styled_components11.default)(PopoverPrimitive.Arrow)(({ theme }) => ({
+var ArrowElement = (0, import_styled_components12.default)(PopoverPrimitive.Arrow)(({ theme }) => ({
   fill: theme.colors.popover.background
 }));
-var PopoverClose = (0, import_styled_components11.default)(PopoverPrimitive.Close)(({ theme }) => ({
+var PopoverClose = (0, import_styled_components12.default)(PopoverPrimitive.Close)(({ theme }) => ({
   all: "unset",
   fontFamily: "inherit",
   borderRadius: "100%",
@@ -1457,7 +1552,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react30.default.createElement(
     ContentElement,
     {
       variant,
@@ -1478,75 +1573,11 @@ function Popover({
       }
     },
     children,
-    showArrow && /* @__PURE__ */ import_react29.default.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ import_react29.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react29.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ import_react30.default.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ import_react30.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react30.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
 
-// src/components/Stack.tsx
-var import_react30 = __toESM(require("react"));
-var import_styled_components12 = __toESM(require("styled-components"));
-
-// src/utils/breakpoints.ts
-function mergeBreakpoints(breakpoints, transform) {
-  const breakpointMap = Array.isArray(breakpoints) ? breakpoints.reduce(
-    (result, item) => {
-      const [key, value] = item;
-      result[key] = result[key] ? { ...result[key], ...value } : value;
-      return result;
-    },
-    {}
-  ) : breakpoints;
-  const breakpointList = Object.entries(breakpointMap);
-  const transformedList = breakpointList.sort((a, b) => Number(b[0]) - Number(a[0])).map(([width, value]) => [
-    `@media screen and (max-width: ${width}px)`,
-    transform?.(value) ?? value
-  ]);
-  return Object.fromEntries(transformedList);
-}
-
-// src/components/Stack.tsx
-var Element = import_styled_components12.default.div(({ styleProps, breakpoints }) => ({
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
-}));
-var StackBase = (0, import_react30.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
-  const elements2 = separator ? withSeparatorElements(import_react30.Children.toArray(children), separator) : children;
-  const styleProps = {
-    display: "flex",
-    position: "relative",
-    alignItems: "stretch",
-    ...rest
-  };
-  return /* @__PURE__ */ import_react30.default.createElement(
-    Element,
-    {
-      ref: forwardedRef,
-      id,
-      as,
-      styleProps,
-      breakpoints,
-      tabIndex,
-      ...href && { href }
-    },
-    elements2
-  );
-});
-var VerticalStack = (0, import_react30.memo)(
-  (0, import_react30.forwardRef)(function VStack(props, forwardedRef) {
-    return /* @__PURE__ */ import_react30.default.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
-  })
-);
-var HorizontalStack = (0, import_react30.memo)(
-  (0, import_react30.forwardRef)(function HStack(props, forwardedRef) {
-    return /* @__PURE__ */ import_react30.default.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
-  })
-);
-var Stack = {
-  V: VerticalStack,
-  H: HorizontalStack
-};
-
 // src/components/InputField.tsx
 var InputFieldContext = (0, import_react31.createContext)({
   labelPosition: "end",
@@ -2082,20 +2113,68 @@ function useDialogContainsElement() {
   return useDialog().containsElement;
 }
 
+// src/contexts/FloatingWindowContext.tsx
+var import_noya_utils6 = require("@noya-app/noya-utils");
+var import_react33 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var FloatingWindowContext = (0, import_react33.createContext)(void 0);
+var CurrentWindowContext = (0, import_react33.createContext)(void 0);
+var FloatingWindowProvider = ({
+  children
+}) => {
+  const [windows, setWindows] = (0, import_react33.useState)({});
+  const contextValue = (0, import_react33.useMemo)(() => {
+    const createWindow = (element) => {
+      const id = (0, import_noya_utils6.uuid)();
+      setWindows((windows2) => ({
+        ...windows2,
+        [id]: /* @__PURE__ */ import_react33.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+      }));
+      return id;
+    };
+    const closeWindow = (id) => {
+      setWindows((windows2) => {
+        const { [id]: _, ...rest } = windows2;
+        return rest;
+      });
+    };
+    return { createWindow, closeWindow };
+  }, []);
+  return /* @__PURE__ */ import_react33.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+    ([id, element]) => (0, import_react_dom.createPortal)(element, document.body, id)
+  ));
+};
+var useFloatingWindowManager = () => {
+  const context = (0, import_react33.useContext)(FloatingWindowContext);
+  if (!context) {
+    throw new Error(
+      "useFloatingWindow must be used within a FloatingWindowProvider"
+    );
+  }
+  return context;
+};
+var useCurrentFloatingWindowInternal = () => {
+  const context = (0, import_react33.useContext)(CurrentWindowContext);
+  if (!context) {
+    throw new Error("useCurrentWindow must be used within a FloatingWindow");
+  }
+  return context;
+};
+
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = (0, import_react33.createContext)(void 0);
-var DesignSystemConfigurationProvider = (0, import_react33.memo)(
+var DesignSystemConfigurationContext = (0, import_react34.createContext)(void 0);
+var DesignSystemConfigurationProvider = (0, import_react34.memo)(
   function DesignSystemConfigurationProvider2({
     children,
     theme,
     platform
   }) {
-    const contextValue = (0, import_react33.useMemo)(() => ({ platform }), [platform]);
-    return /* @__PURE__ */ import_react33.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react33.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react33.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react33.default.createElement(ToastProvider, null, children))));
+    const contextValue = (0, import_react34.useMemo)(() => ({ platform }), [platform]);
+    return /* @__PURE__ */ import_react34.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react34.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react34.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react34.default.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  const value = (0, import_react33.useContext)(DesignSystemConfigurationContext);
+  const value = (0, import_react34.useContext)(DesignSystemConfigurationContext);
   if (!value) {
     throw new Error("Missing DesignSystemConfigurationProvider");
   }
@@ -2106,7 +2185,7 @@ function useDesignSystemTheme() {
 }
 
 // src/hooks/useHover.ts
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2136,13 +2215,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React19.useState(false);
-  const state = React19.useRef({
+  const [isHovered, setHovered] = React20.useState(false);
+  const state = React20.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React19.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React19.useMemo(
+  React20.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React20.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -2283,7 +2362,7 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
     opacity: 0.85
   }
 }));
-var Chip = (0, import_react34.memo)(function Chip2({
+var Chip = (0, import_react35.memo)(function Chip2({
   colorScheme,
   children,
   deletable,
@@ -2304,7 +2383,7 @@ var Chip = (0, import_react34.memo)(function Chip2({
   });
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
   const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     ChipElement,
     {
       variant,
@@ -2316,7 +2395,7 @@ var Chip = (0, import_react34.memo)(function Chip2({
       isInteractive: !!handleClick,
       tabIndex
     },
-    addable && /* @__PURE__ */ import_react34.default.createElement(
+    addable && /* @__PURE__ */ import_react35.default.createElement(
       AddElement,
       {
         size: size2,
@@ -2329,7 +2408,7 @@ var Chip = (0, import_react34.memo)(function Chip2({
       }
     ),
     children,
-    deletable && /* @__PURE__ */ import_react34.default.createElement(
+    deletable && /* @__PURE__ */ import_react35.default.createElement(
       DeleteElement,
       {
         size: size2,
@@ -2348,7 +2427,7 @@ var Chip = (0, import_react34.memo)(function Chip2({
 var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_noya_keymap3 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_styled_components17 = __toESM(require("styled-components"));
 var SeparatorElement2 = (0, import_styled_components17.default)(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2360,7 +2439,7 @@ var CheckboxItemElement2 = (0, import_styled_components17.default)(RadixContextM
 var StyledItemIndicator2 = (0, import_styled_components17.default)(RadixContextMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var ContextMenuItem2 = (0, import_react35.memo)(function ContextMenuItem3({
+var ContextMenuItem2 = (0, import_react36.memo)(function ContextMenuItem3({
   value,
   children,
   onSelect,
@@ -2371,42 +2450,42 @@ var ContextMenuItem2 = (0, import_react35.memo)(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = (0, import_react35.useCallback)(
+  const handlePointerDown = (0, import_react36.useCallback)(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = (0, import_react35.useCallback)(() => {
+  const handleSelectItem = (0, import_react36.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react35.default.createElement(
+    return /* @__PURE__ */ import_react36.default.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react35.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react35.default.createElement(import_noya_icons4.CheckIcon, null)),
+      /* @__PURE__ */ import_react36.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react36.default.createElement(import_noya_icons4.CheckIcon, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react35.default.createElement(
+  const element = /* @__PURE__ */ import_react36.default.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, icon, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, icon, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react35.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react35.default.createElement(import_noya_icons4.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react36.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react36.default.createElement(import_noya_icons4.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react35.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react36.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2424,19 +2503,19 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react35.useMemo)(
+  const keymap = (0, import_react36.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   (0, import_noya_keymap3.useKeyboardShortcuts)(keymap);
-  const onPointerDown = (0, import_react35.useCallback)((event) => {
+  const onPointerDown = (0, import_react36.useCallback)((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ import_react35.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react35.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react35.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react35.default.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react35.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react36.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react36.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react36.default.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react36.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react36.default.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2453,26 +2532,26 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = (0, import_react35.memo)(ContextMenuRoot);
+var ContextMenu = (0, import_react36.memo)(ContextMenuRoot);
 
 // src/components/Divider.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_styled_components18 = __toESM(require("styled-components"));
 var DividerContainer = import_styled_components18.default.div(({ theme, variant = "normal", orientation, overflow = 0 }) => ({
   ...orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${overflow}px 0px` },
   background: variant === "strong" ? theme.colors.dividerStrong : variant === "subtle" ? theme.colors.dividerSubtle : theme.colors.divider,
   alignSelf: "stretch"
 }));
-var Divider = (0, import_react36.memo)(function Divider2(props) {
-  return /* @__PURE__ */ import_react36.default.createElement(DividerContainer, { orientation: "horizontal", ...props });
+var Divider = (0, import_react37.memo)(function Divider2(props) {
+  return /* @__PURE__ */ import_react37.default.createElement(DividerContainer, { orientation: "horizontal", ...props });
 });
-var DividerVertical = (0, import_react36.memo)(function DividerVertical2(props) {
-  return /* @__PURE__ */ import_react36.default.createElement(DividerContainer, { orientation: "vertical", ...props });
+var DividerVertical = (0, import_react37.memo)(function DividerVertical2(props) {
+  return /* @__PURE__ */ import_react37.default.createElement(DividerContainer, { orientation: "vertical", ...props });
 });
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var DotButtonElement = import_styled_components19.default.div(({ theme }) => ({
   cursor: "pointer",
@@ -2492,15 +2571,15 @@ var TriggerElement = import_styled_components19.default.div({
   pointerEvents: "none",
   height: "15px"
 });
-var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2({
+var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = (0, import_react37.useState)(false);
-  const [downPosition, setDownPosition] = import_react37.default.useState(null);
-  const handlePointerDownCapture = (0, import_react37.useCallback)(
+  const [open, setOpen] = (0, import_react38.useState)(false);
+  const [downPosition, setDownPosition] = import_react38.default.useState(null);
+  const handlePointerDownCapture = (0, import_react38.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2513,7 +2592,7 @@ var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2
     },
     [open]
   );
-  const handlePointerUp = (0, import_react37.useCallback)(
+  const handlePointerUp = (0, import_react38.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2529,14 +2608,14 @@ var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react37.useCallback)(
+  const handleOpenChange = (0, import_react38.useCallback)(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2546,7 +2625,7 @@ var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react37.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react38.default.createElement(
       DropdownMenu,
       {
         open,
@@ -2555,13 +2634,13 @@ var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react37.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react37.default.createElement(
+      /* @__PURE__ */ import_react38.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react38.default.createElement(
         import_noya_icons5.DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react37.default.createElement(
+    ) : /* @__PURE__ */ import_react38.default.createElement(
       import_noya_icons5.DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -2571,7 +2650,7 @@ var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2
 });
 
 // src/components/FillInputField.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // ../noya-file-format/src/types.ts
@@ -2897,26 +2976,26 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/contexts/ImageDataContext.tsx
-var import_react38 = __toESM(require("react"));
-var ImageDataContext = (0, import_react38.createContext)(
+var import_react39 = __toESM(require("react"));
+var ImageDataContext = (0, import_react39.createContext)(
   void 0
 );
-var ImageDataProvider = (0, import_react38.memo)(function ImageDataProvider2({
+var ImageDataProvider = (0, import_react39.memo)(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = (0, import_react38.useMemo)(
+  const contextValue = (0, import_react39.useMemo)(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ import_react38.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react39.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = (0, import_react38.useContext)(ImageDataContext);
+  const value = (0, import_react39.useContext)(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -2924,15 +3003,15 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react39.useMemo)(() => {
+  const objectURL = (0, import_react40.useMemo)(() => {
     if (object instanceof Blob)
       return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -2988,9 +3067,9 @@ var Background = import_styled_components20.default.span(({ background }) => ({
   position: "absolute",
   inset: 0
 }));
-var HorizontalDotsBackground = (0, import_react40.memo)(function HorizontalDotsBackground2() {
+var HorizontalDotsBackground = (0, import_react41.memo)(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = (0, import_styled_components20.useTheme)().colors;
-  const background = (0, import_react40.useMemo)(
+  const background = (0, import_react41.useMemo)(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -2999,7 +3078,7 @@ var HorizontalDotsBackground = (0, import_react40.memo)(function HorizontalDotsB
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -3013,7 +3092,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = (0, import_react40.memo)(function PatternPreviewBackground2({
+var PatternPreviewBackground = (0, import_react41.memo)(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -3021,7 +3100,7 @@ var PatternPreviewBackground = (0, import_react40.memo)(function PatternPreviewB
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = (0, import_react40.useMemo)(
+  const background = (0, import_react41.useMemo)(
     () => [
       size2,
       `url(${url})`,
@@ -3029,37 +3108,37 @@ var PatternPreviewBackground = (0, import_react40.memo)(function PatternPreviewB
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
 });
-var ColorPreviewBackground = (0, import_react40.memo)(function ColorPreviewBackground2({
+var ColorPreviewBackground = (0, import_react41.memo)(function ColorPreviewBackground2({
   color
 }) {
-  const background = (0, import_react40.useMemo)(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
+  const background = (0, import_react41.useMemo)(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
 });
-var GradientPreviewBackground = (0, import_react40.memo)(function GradientPreviewBackground2({
+var GradientPreviewBackground = (0, import_react41.memo)(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = (0, import_react40.useMemo)(
+  const background = (0, import_react41.useMemo)(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
 });
-var FillPreviewBackground = (0, import_react40.memo)(function FillPreviewBackground2({
+var FillPreviewBackground = (0, import_react41.memo)(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ import_react40.default.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ import_react41.default.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ import_react40.default.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ import_react41.default.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ import_react40.default.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ import_react41.default.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ import_react40.default.createElement(
+      return /* @__PURE__ */ import_react41.default.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3089,16 +3168,285 @@ var Container = import_styled_components21.default.button(
     flex
   })
 );
-var FillInputField = (0, import_react41.memo)(
-  (0, import_react41.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ import_react41.default.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ import_react41.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react42.memo)(
+  (0, import_react42.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ import_react42.default.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ import_react42.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
+// src/components/FloatingWindow.tsx
+var import_react43 = __toESM(require("react"));
+var styles2 = {
+  noSelect: {
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    MozUserSelect: "none",
+    msUserSelect: "none"
+  },
+  windowWrapper: {
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "4px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    overflow: "hidden"
+    // backdropFilter: "blur(10px)",
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    cursor: "move",
+    userSelect: "none",
+    minHeight: "43px"
+  },
+  closeButton: {
+    background: "none",
+    border: "none",
+    fontSize: "16px",
+    cursor: "pointer"
+  },
+  content: {
+    padding: "12px",
+    height: "calc(100% - 44px)",
+    // Adjust based on toolbar height
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column"
+  },
+  resizeHandle: {
+    position: "absolute"
+  }
+};
+var resizeHandlePositions = {
+  top: { top: "0", left: "0", right: "0", height: "5px", cursor: "ns-resize" },
+  right: {
+    top: "0",
+    right: "0",
+    bottom: "0",
+    width: "5px",
+    cursor: "ew-resize"
+  },
+  bottom: {
+    bottom: "0",
+    left: "0",
+    right: "0",
+    height: "5px",
+    cursor: "ns-resize"
+  },
+  left: { top: "0", left: "0", bottom: "0", width: "5px", cursor: "ew-resize" },
+  topLeft: {
+    top: "0",
+    left: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize"
+  },
+  topRight: {
+    top: "0",
+    right: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nesw-resize"
+  },
+  bottomLeft: {
+    bottom: "0",
+    left: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nesw-resize"
+  },
+  bottomRight: {
+    bottom: "0",
+    right: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize"
+  }
+};
+function defaultRenderToolbar({
+  title,
+  toolbarContent,
+  onClose
+}) {
+  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ import_react43.default.createElement(
+    IconButton,
+    {
+      iconName: "Cross3Icon",
+      onClick: onClose,
+      style: {
+        marginLeft: "6px",
+        marginRight: "-6px"
+      }
+    }
+  ));
+}
+var FloatingWindow = ({
+  title,
+  onClose,
+  children,
+  initialWidth = 300,
+  initialHeight = 200,
+  initialX = 100,
+  initialY = 100,
+  minWidth = 200,
+  minHeight = 100,
+  toolbarContent,
+  renderToolbar = defaultRenderToolbar
+}) => {
+  const [position, setPosition] = (0, import_react43.useState)({ x: initialX, y: initialY });
+  const [size2, setSize] = (0, import_react43.useState)({
+    width: initialWidth,
+    height: initialHeight
+  });
+  const [isDragging, setIsDragging] = (0, import_react43.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react43.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react43.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react43.useState)(null);
+  const wrapperRef = (0, import_react43.useRef)(null);
+  const toggleGlobalTextSelection = (disable) => {
+    if (disable) {
+      document.body.style.userSelect = "none";
+    } else {
+      document.body.style.userSelect = "";
+    }
+  };
+  const handleMouseDown = (0, import_react43.useCallback)((e) => {
+    if (!wrapperRef.current)
+      return;
+    const rect = wrapperRef.current.getBoundingClientRect();
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+    setIsDragging(true);
+  }, []);
+  const handleResizeStart = (0, import_react43.useCallback)(
+    (direction) => (e) => {
+      e.stopPropagation();
+      setIsResizing(true);
+      setResizeDirection(direction);
+      toggleGlobalTextSelection(true);
+    },
+    []
+  );
+  const handleMouseMove = (0, import_react43.useCallback)(
+    (e) => {
+      if (isDragging) {
+        setPosition({
+          x: e.clientX - dragOffset.x,
+          y: e.clientY - dragOffset.y
+        });
+      } else if (isResizing && resizeDirection) {
+        const rect = wrapperRef.current.getBoundingClientRect();
+        let newWidth = size2.width;
+        let newHeight = size2.height;
+        let newX = position.x;
+        let newY = position.y;
+        if (/right/i.test(resizeDirection)) {
+          newWidth = Math.max(e.clientX - rect.left, minWidth);
+        }
+        if (/bottom/i.test(resizeDirection)) {
+          newHeight = Math.max(e.clientY - rect.top, minHeight);
+        }
+        if (/left/i.test(resizeDirection)) {
+          const potentialWidth = rect.right - e.clientX;
+          if (potentialWidth <= minWidth) {
+            newWidth = minWidth;
+            newX = rect.right - minWidth;
+          } else {
+            newWidth = potentialWidth;
+            newX = e.clientX;
+          }
+        }
+        if (/top/i.test(resizeDirection)) {
+          const potentialHeight = rect.bottom - e.clientY;
+          if (potentialHeight <= minHeight) {
+            newHeight = minHeight;
+            newY = rect.bottom - minHeight;
+          } else {
+            newHeight = potentialHeight;
+            newY = e.clientY;
+          }
+        }
+        setSize({ width: newWidth, height: newHeight });
+        setPosition({ x: newX, y: newY });
+      }
+    },
+    [
+      isDragging,
+      isResizing,
+      dragOffset,
+      resizeDirection,
+      size2,
+      position,
+      minWidth,
+      minHeight
+    ]
+  );
+  const handleMouseUp = (0, import_react43.useCallback)((e) => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeDirection(null);
+    toggleGlobalTextSelection(false);
+  }, []);
+  import_react43.default.useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+  const theme = useDesignSystemTheme();
+  const floatingWindowManager = useFloatingWindowManager();
+  const currentFloatingWindow = useCurrentFloatingWindowInternal();
+  const handleClose = (0, import_react43.useCallback)(() => {
+    if (onClose)
+      onClose();
+    floatingWindowManager.closeWindow(currentFloatingWindow.id);
+  }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
+  return /* @__PURE__ */ import_react43.default.createElement(
+    "div",
+    {
+      ref: wrapperRef,
+      style: {
+        ...styles2.windowWrapper,
+        top: position.y,
+        left: position.x,
+        width: size2.width,
+        height: size2.height,
+        outline: `1px solid ${theme.colors.divider}`,
+        backgroundColor: theme.colors.canvas.background
+      }
+    },
+    /* @__PURE__ */ import_react43.default.createElement(
+      "div",
+      {
+        style: {
+          ...styles2.toolbar,
+          backgroundColor: theme.colors.sidebar.background
+        },
+        onMouseDown: handleMouseDown
+      },
+      renderToolbar({ title, toolbarContent, onClose: handleClose })
+    ),
+    /* @__PURE__ */ import_react43.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react43.default.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react43.default.createElement(
+      "div",
+      {
+        key: direction,
+        style: { ...styles2.resizeHandle, ...style3 },
+        onMouseDown: handleResizeStart(direction)
+      }
+    ))
+  );
+};
+
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var import_react42 = __toESM(require("react"));
-var GradientPicker = (0, import_react42.memo)(function GradientPicker2({
+var import_react44 = __toESM(require("react"));
+var GradientPicker = (0, import_react44.memo)(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -3107,7 +3455,7 @@ var GradientPicker = (0, import_react42.memo)(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = (0, import_react42.useMemo)(
+  const colorModel = (0, import_react44.useMemo)(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -3116,30 +3464,30 @@ var GradientPicker = (0, import_react42.memo)(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = (0, import_react42.useMemo)(
+  const rgbaColor = (0, import_react44.useMemo)(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = (0, import_react42.useCallback)(
+  const handleChangeColor = (0, import_react44.useCallback)(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = (0, import_react42.useCallback)(
+  const handleAddGradientStop = (0, import_react44.useCallback)(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -3150,12 +3498,12 @@ var GradientPicker = (0, import_react42.memo)(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -3187,12 +3535,12 @@ var Grid = import_styled_components22.default.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_styled_components23 = __toESM(require("styled-components"));
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = (0, import_styled_components23.default)(RadixScrollArea.Viewport)({
@@ -3220,18 +3568,18 @@ var Container2 = import_styled_components23.default.div({
   flex: "1 1 0px",
   minHeight: 0
 });
-var ScrollArea = (0, import_react43.memo)(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = (0, import_react43.useState)(null);
-  return /* @__PURE__ */ import_react43.default.createElement(Container2, null, /* @__PURE__ */ import_react43.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react43.default.createElement(
+var ScrollArea = (0, import_react45.memo)(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = (0, import_react45.useState)(null);
+  return /* @__PURE__ */ import_react45.default.createElement(Container2, null, /* @__PURE__ */ import_react45.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react45.default.createElement(
     StyledViewport,
     {
-      ref: (0, import_react43.useCallback)(
+      ref: (0, import_react45.useCallback)(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ import_react43.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react43.default.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ import_react45.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react45.default.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 
 // src/components/GridView.tsx
@@ -3411,7 +3759,7 @@ var Shimmer = import_styled_components24.default.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
+var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -3427,15 +3775,15 @@ var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = import_react44.default.useState(false);
+  const [hovered, setHovered] = import_react46.default.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = (0, import_react44.useContext)(GridViewContext);
-  const handleClick = (0, import_react44.useCallback)(
+  const { textPosition, bordered, disabled } = (0, import_react46.useContext)(GridViewContext);
+  const handleClick = (0, import_react46.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3444,7 +3792,7 @@ var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = (0, import_react44.useCallback)(
+  const handleKeyDown = (0, import_react46.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -3456,7 +3804,7 @@ var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ import_react44.default.createElement(
+  let element = /* @__PURE__ */ import_react46.default.createElement(
     ItemContainer,
     {
       id,
@@ -3465,7 +3813,7 @@ var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       ContentContainer,
       {
         disabled,
@@ -3479,25 +3827,25 @@ var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react44.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ import_react44.default.createElement(Shimmer, null, /* @__PURE__ */ import_react44.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react46.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ import_react46.default.createElement(Shimmer, null, /* @__PURE__ */ import_react46.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ import_react44.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ import_react46.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ import_react44.default.createElement(
+    element = /* @__PURE__ */ import_react46.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react44.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react46.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = (0, import_react44.createContext)({
+var GridViewContext = (0, import_react46.createContext)({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -3512,7 +3860,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = (0, import_react44.useCallback)(
+  const handleClick = (0, import_react46.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3520,7 +3868,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = (0, import_react44.useMemo)(
+  const contextValue = (0, import_react46.useMemo)(
     () => ({
       size: size2,
       textPosition,
@@ -3529,33 +3877,33 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ import_react44.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react44.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react44.default.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ import_react46.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react46.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react46.default.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
-  const { size: size2 } = (0, import_react44.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react44.default.createElement(Grid2, { size: size2, padding }, children);
+  const { size: size2 } = (0, import_react46.useContext)(GridViewContext);
+  return /* @__PURE__ */ import_react46.default.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ import_react44.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ import_react44.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ import_react44.default.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ import_react46.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ import_react46.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ import_react46.default.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = (0, import_react44.memo)(GridViewRoot);
-  GridView2.Item = (0, import_react44.memo)(GridViewItem);
-  GridView2.Section = (0, import_react44.memo)(GridViewSection);
-  GridView2.SectionHeader = (0, import_react44.memo)(GridViewSectionHeader);
+  GridView2.Root = (0, import_react46.memo)(GridViewRoot);
+  GridView2.Item = (0, import_react46.memo)(GridViewItem);
+  GridView2.Section = (0, import_react46.memo)(GridViewSection);
+  GridView2.SectionHeader = (0, import_react46.memo)(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/InputFieldWithCompletions.tsx
-var import_noya_utils8 = require("@noya-app/noya-utils");
-var import_react48 = __toESM(require("react"));
+var import_noya_utils9 = require("@noya-app/noya-utils");
+var import_react50 = __toESM(require("react"));
 var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/utils/fuzzyScorer.ts
@@ -3630,15 +3978,15 @@ function mergeRanges(ranges) {
 }
 
 // src/components/ListView.tsx
-var import_noya_utils7 = require("@noya-app/noya-utils");
+var import_noya_utils8 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react46 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_react_virtualized = require("react-virtualized");
 var import_react_window = require("react-window");
 var import_styled_components25 = __toESM(require("styled-components"));
 
 // src/hooks/mergeEventHandlers.ts
-var import_noya_utils6 = require("@noya-app/noya-utils");
+var import_noya_utils7 = require("@noya-app/noya-utils");
 var import_primitive = require("@radix-ui/primitive");
 function composeAllEventHandlers(...handlers) {
   const [first, ...rest] = handlers;
@@ -3648,7 +3996,7 @@ function composeAllEventHandlers(...handlers) {
   );
 }
 function mergeEventHandlers(...handlerMaps) {
-  const eventNames = (0, import_noya_utils6.unique)(handlerMaps.map(Object.keys).flat());
+  const eventNames = (0, import_noya_utils7.unique)(handlerMaps.map(Object.keys).flat());
   return Object.fromEntries(
     eventNames.map((eventName) => {
       const handlers = handlerMaps.flatMap((handlerMap) => {
@@ -3663,8 +4011,8 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var import_react45 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
+var import_react47 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -3677,7 +4025,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = (0, import_react45.createContext)({
+var SortableItemContext = (0, import_react47.createContext)({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -3699,7 +4047,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react45.useContext)(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react47.useContext)(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const {
     active,
@@ -3719,7 +4067,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = (0, import_react45.useCallback)((node) => setNodeRef(node), [setNodeRef]);
+  const ref = (0, import_react47.useCallback)((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -3750,22 +4098,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = (0, import_react45.useState)();
-  const activatorEvent = (0, import_react45.useRef)(null);
-  const setActivatorEvent = (0, import_react45.useCallback)((event) => {
+  const [activeIndex, setActiveIndex] = (0, import_react47.useState)();
+  const activatorEvent = (0, import_react47.useRef)(null);
+  const setActivatorEvent = (0, import_react47.useCallback)((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = (0, import_react45.useState)({ x: 0, y: 0 });
-  const handleDragStart = (0, import_react45.useCallback)(
+  const [position, setPosition] = (0, import_react47.useState)({ x: 0, y: 0 });
+  const handleDragStart = (0, import_react47.useCallback)(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = (0, import_react45.useCallback)((event) => {
+  const handleDragMove = (0, import_react47.useCallback)((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = (0, import_react45.useCallback)(
+  const handleDragEnd = (0, import_react47.useCallback)(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -3792,10 +4140,10 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     SortableItemContext.Provider,
     {
-      value: (0, import_react45.useMemo)(
+      value: (0, import_react47.useMemo)(
         () => ({
           keys,
           acceptsDrop,
@@ -3806,7 +4154,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -3815,9 +4163,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ import_react45.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
-      renderOverlay && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ import_react45.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+      /* @__PURE__ */ import_react47.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
+      renderOverlay && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ import_react47.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -3825,17 +4173,17 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = (0, import_react45.memo)(SortableItem);
-  Sortable2.Root = (0, import_react45.memo)(SortableRoot);
+  Sortable2.Item = (0, import_react47.memo)(SortableItem);
+  Sortable2.Root = (0, import_react47.memo)(SortableRoot);
 })(Sortable || (Sortable = {}));
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react46.createContext)({
+var DraggingContext = (0, import_react48.createContext)({
   indentation: 12
 });
-var ListRowContext = (0, import_react46.createContext)({
+var ListRowContext = (0, import_react48.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -3865,8 +4213,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useLayoutEffect)(() => {
+  const inputRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
       return;
@@ -3875,7 +4223,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -3997,7 +4345,7 @@ var ListViewDragIndicatorElement = import_styled_components25.default.div(({ the
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
+var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4030,12 +4378,12 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react46.useContext)(ListRowContext);
+  } = (0, import_react48.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react46.useContext)(DraggingContext);
-  const handlePress = (0, import_react46.useCallback)(
+  const { indentation, isDragging } = (0, import_react48.useContext)(DraggingContext);
+  const handlePress = (0, import_react48.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -4044,14 +4392,14 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react46.useCallback)(
+  const handleDoubleClick = (0, import_react48.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = (0, import_react46.useMemo)(() => {
+  const mergedStyle = (0, import_react48.useMemo)(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -4063,7 +4411,7 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
     relativeDropPosition,
     ...renderProps
   }, ref) => {
-    const element = /* @__PURE__ */ import_react46.default.createElement(
+    const element = /* @__PURE__ */ import_react48.default.createElement(
       RowContainer,
       {
         ref,
@@ -4094,7 +4442,7 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ import_react46.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react48.default.createElement(
         ListViewDragIndicatorElement,
         {
           colorScheme,
@@ -4103,11 +4451,11 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
           gap: listGap
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react46.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react48.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react46.default.createElement(
+      return /* @__PURE__ */ import_react48.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4120,21 +4468,21 @@ var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react46.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)));
+    return /* @__PURE__ */ import_react48.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = (0, import_react46.createContext)(
+var RenderItemContext = (0, import_react48.createContext)(
   () => null
 );
-var VirtualizedListRow = (0, import_react46.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react48.memo)(function VirtualizedListRow2({
   index,
   style: style3
 }) {
-  const renderItem = (0, import_react46.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react46.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  const renderItem = (0, import_react48.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react48.default.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = (0, import_react46.forwardRef)(function VirtualizedListInner2({
+var VirtualizedListInner = (0, import_react48.forwardRef)(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4142,20 +4490,20 @@ var VirtualizedListInner = (0, import_react46.forwardRef)(function VirtualizedLi
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = (0, import_react46.useMemo)(
+  const listStyle = (0, import_react48.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4163,18 +4511,18 @@ var VirtualizedListInner = (0, import_react46.forwardRef)(function VirtualizedLi
     }),
     []
   );
-  return /* @__PURE__ */ import_react46.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react48.default.createElement(
     import_react_virtualized.WindowScroller,
     {
       scrollElement,
-      style: (0, import_react46.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react48.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react46.useCallback)(
+    (0, import_react48.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react46.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react46.default.createElement(
+      }) => /* @__PURE__ */ import_react48.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react48.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -4204,7 +4552,7 @@ var VirtualizedListInner = (0, import_react46.forwardRef)(function VirtualizedLi
     )
   ));
 });
-var VirtualizedList = (0, import_react46.memo)(
+var VirtualizedList = (0, import_react48.memo)(
   VirtualizedListInner
 );
 var RootContainer2 = import_styled_components25.default.div(({ theme, scrollable, gap }) => ({
@@ -4215,7 +4563,7 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, scrollable
   color: theme.colors.textMuted,
   gap
 }));
-var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInner2({
+var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInner2({
   onPress,
   scrollable = false,
   expandable = true,
@@ -4234,7 +4582,7 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = (0, import_react46.useCallback)(
+  const handleClick = (0, import_react48.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4244,19 +4592,19 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
     },
     [onPress]
   );
-  const renderChild = (0, import_react46.useCallback)(
+  const renderChild = (0, import_react48.useCallback)(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = (0, import_react46.useCallback)(
+  const getItemContextValue = (0, import_react48.useCallback)(
     (i) => {
       const current = renderChild(i);
-      if (!(0, import_react46.isValidElement)(current))
+      if (!(0, import_react48.isValidElement)(current))
         return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react46.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react46.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react48.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react48.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -4308,26 +4656,26 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react46.useMemo)(
+  const draggingContextOverlayValue = (0, import_react48.useMemo)(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react46.useCallback)(
-    (index) => /* @__PURE__ */ import_react46.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react46.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = (0, import_react48.useCallback)(
+    (index) => /* @__PURE__ */ import_react48.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react48.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react46.useCallback)(
+  const renderWrappedChild = (0, import_react48.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react46.isValidElement)(current))
+      if (!contextValue || !(0, import_react48.isValidElement)(current))
         return null;
-      return /* @__PURE__ */ import_react46.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ import_react48.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react46.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react46.default.createElement(
+  const ids = (0, import_react48.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react48.default.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -4337,8 +4685,8 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react46.default.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = (0, import_react46.useCallback)(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = (0, import_react48.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4347,12 +4695,12 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
     },
     [getItemContextValue, variant]
   );
-  const getKey = (0, import_react46.useCallback)(
+  const getKey = (0, import_react48.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react46.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react46.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react46.default.createElement(
+  const draggingContextValue = (0, import_react48.useMemo)(() => ({ indentation }), [indentation]);
+  return /* @__PURE__ */ import_react48.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react48.default.createElement(
     RootContainer2,
     {
       ...{
@@ -4363,7 +4711,7 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react46.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react48.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -4374,47 +4722,47 @@ var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInne
             keyExtractor: getKey,
             renderItem: renderWrappedChild
           }
-        ) : (0, import_noya_utils7.range)(0, data.length).map(renderWrappedChild)
+        ) : (0, import_noya_utils8.range)(0, data.length).map(renderWrappedChild)
       )
     )
   ));
 });
-var ListViewRoot = (0, import_react46.memo)(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react46.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = (0, import_react46.useMemo)(
-    () => import_react46.Children.toArray(children).flatMap(
-      (child) => (0, import_react46.isValidElement)(child) ? [child] : []
+var ListViewRoot = (0, import_react48.memo)(ListViewRootInner);
+var ChildrenListViewInner = (0, import_react48.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = (0, import_react48.useMemo)(
+    () => import_react48.Children.toArray(children).flatMap(
+      (child) => (0, import_react48.isValidElement)(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react46.useCallback)(
+      keyExtractor: (0, import_react48.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react46.useCallback)((item) => item, [])
+      renderItem: (0, import_react48.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react46.memo)(ChildrenListViewInner);
-var SimpleListViewInner = (0, import_react46.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = (0, import_react48.memo)(ChildrenListViewInner);
+var SimpleListViewInner = (0, import_react48.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react46.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react48.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react46.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react48.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = (0, import_react46.memo)(SimpleListViewInner);
+var SimpleListView = (0, import_react48.memo)(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react46.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react46.memo)(ListViewEditableRowTitle);
-  ListView2.Row = (0, import_react46.memo)(ListViewRow);
+  ListView2.RowTitle = (0, import_react48.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react48.memo)(ListViewEditableRowTitle);
+  ListView2.Row = (0, import_react48.memo)(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -4427,7 +4775,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_styled_components26 = __toESM(require("styled-components"));
 var elements = {
   title: "h1",
@@ -4439,6 +4787,7 @@ var elements = {
   heading5: "h5",
   body: "p",
   small: "span",
+  button: "span",
   code: "code",
   label: "span"
 };
@@ -4448,7 +4797,7 @@ var StyledElement = import_styled_components26.default.span(({ theme, variant, s
   ...styleProps,
   ...mergeBreakpoints(breakpoints || [])
 }));
-var Text = (0, import_react47.forwardRef)(function Text2({
+var Text = (0, import_react49.forwardRef)(function Text2({
   as,
   variant,
   breakpoints,
@@ -4460,7 +4809,7 @@ var Text = (0, import_react47.forwardRef)(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     StyledElement,
     {
       ref: forwardedRef,
@@ -4476,28 +4825,28 @@ var Text = (0, import_react47.forwardRef)(function Text2({
     children
   );
 });
-var Heading1 = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "body" })
+var Body = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = (0, import_react47.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "small" })
+var Small = (0, import_react49.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ import_react47.default.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ import_react49.default.createElement(
   "span",
   {
     style: {
@@ -4509,9 +4858,9 @@ var Italic = ({ children }) => /* @__PURE__ */ import_react47.default.createElem
 
 // src/components/InputFieldWithCompletions.tsx
 function filterWithGroupedSections(items, query) {
-  const sections = (0, import_noya_utils8.chunkBy)(items, (a, b) => b.type !== "sectionHeader");
+  const sections = (0, import_noya_utils9.chunkBy)(items, (a, b) => b.type !== "sectionHeader");
   return sections.flatMap((section) => {
-    const [headers, regular] = (0, import_noya_utils8.partition)(
+    const [headers, regular] = (0, import_noya_utils9.partition)(
       section,
       (item) => item.type === "sectionHeader"
     );
@@ -4539,15 +4888,15 @@ var CompletionToken = import_styled_components27.default.span(
     whiteSpace: "pre"
   })
 );
-var CompletionMenu = (0, import_react48.memo)(
-  (0, import_react48.forwardRef)(function CompletionMenu2({
+var CompletionMenu = (0, import_react50.memo)(
+  (0, import_react50.forwardRef)(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react48.default.createElement(
+    return /* @__PURE__ */ import_react50.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -4559,13 +4908,13 @@ var CompletionMenu = (0, import_react48.memo)(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react48.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ import_react50.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react48.default.createElement(
+          return /* @__PURE__ */ import_react50.default.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -4577,16 +4926,16 @@ var CompletionMenu = (0, import_react48.memo)(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ import_react48.default.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ import_react50.default.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = (0, import_react48.memo)(
-  (0, import_react48.forwardRef)(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = (0, import_react50.memo)(
+  (0, import_react50.forwardRef)(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -4604,13 +4953,13 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = (0, import_react48.useRef)(null);
-    const [isFocused, setIsFocused] = (0, import_react48.useState)(false);
-    const [state, _setState] = (0, import_react48.useState)({
+    const ref = (0, import_react50.useRef)(null);
+    const [isFocused, setIsFocused] = (0, import_react50.useState)(false);
+    const [state, _setState] = (0, import_react50.useState)({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = (0, import_react48.useCallback)(
+    const updateState = (0, import_react50.useCallback)(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -4639,20 +4988,20 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = (0, import_react48.useRef)(initialValue);
-    (0, import_react48.useLayoutEffect)(() => {
+    const initialValueRef = (0, import_react50.useRef)(initialValue);
+    (0, import_react50.useLayoutEffect)(() => {
       if (initialValueRef.current === initialValue)
         return;
       initialValueRef.current = initialValue;
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = import_react48.default.useRef(null);
-    const filteredItems = (0, import_react48.useMemo)(
+    const listRef = import_react50.default.useRef(null);
+    const filteredItems = (0, import_react50.useMemo)(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
-    const [normalItems, sectionHeaderItems] = (0, import_noya_utils8.partition)(
+    const [normalItems, sectionHeaderItems] = (0, import_noya_utils9.partition)(
       filteredItems,
       (item) => item.type !== "sectionHeader"
     );
@@ -4664,13 +5013,13 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
       ),
       ListView.rowHeight * 10.5
     );
-    (0, import_react48.useEffect)(() => {
+    (0, import_react50.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = (0, import_react48.useRef)(void 0);
-    const selectItem = (0, import_react48.useCallback)(
+    const lastSubmittedValueRef = (0, import_react50.useRef)(void 0);
+    const selectItem = (0, import_react50.useCallback)(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -4686,17 +5035,17 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = (0, import_react48.useCallback)(
+    const handleChange = (0, import_react50.useCallback)(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = (0, import_react48.useCallback)(() => {
+    const handleBlur = (0, import_react50.useCallback)(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = (0, import_react48.useCallback)(
+    const handleFocus = (0, import_react50.useCallback)(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -4704,11 +5053,11 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = (0, import_react48.useCallback)(
+    const handleIndexChange = (0, import_react50.useCallback)(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = (0, import_react48.useCallback)(
+    const handleKeyDown = (0, import_react50.useCallback)(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -4772,7 +5121,7 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
     );
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
     const typeaheadValue = filteredItems[selectedIndex]?.name;
-    (0, import_react48.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react50.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
       },
@@ -4783,14 +5132,14 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ import_react48.default.createElement(
+    return /* @__PURE__ */ import_react50.default.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react48.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react48.default.createElement(
+          return /* @__PURE__ */ import_react50.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react50.default.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -4800,7 +5149,7 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ import_react48.default.createElement(
+          ) : /* @__PURE__ */ import_react50.default.createElement(
             Stack.V,
             {
               height: "100px",
@@ -4808,11 +5157,11 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ import_react48.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ import_react50.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(
         InputField.Input,
         {
           ref,
@@ -4836,9 +5185,9 @@ var InputFieldWithCompletions = (0, import_react48.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react48.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react50.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ import_react48.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ import_react50.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react50.default.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -4860,7 +5209,7 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/Label.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_styled_components28 = __toESM(require("styled-components"));
 var LabelLabel = import_styled_components28.default.label(
   ({ theme, selected }) => ({
@@ -4889,17 +5238,17 @@ var LabelContainer2 = import_styled_components28.default.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ import_react49.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react49.default.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ import_react51.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react51.default.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = (0, import_react49.memo)(LabelLabel);
-  _Label.Root = (0, import_react49.memo)(LabelRoot);
+  _Label.Label = (0, import_react51.memo)(LabelLabel);
+  _Label.Root = (0, import_react51.memo)(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_styled_components29 = __toESM(require("styled-components"));
 var Container4 = import_styled_components29.default.div(({ theme }) => ({
   display: "flex",
@@ -4918,24 +5267,24 @@ var Labels = import_styled_components29.default.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = (0, import_react50.memo)(function LabeledElementView2({
+var LabeledElementView = (0, import_react52.memo)(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = import_react50.Children.toArray(children).flatMap(
-    (child) => (0, import_react50.isValidElement)(child) && child.type === import_react50.Fragment ? child.props.children : [child]
+  const elementIds = import_react52.Children.toArray(children).flatMap(
+    (child) => (0, import_react52.isValidElement)(child) && child.type === import_react52.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react50.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react52.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react50.useRef)(null);
-  const refs = (0, import_react50.useMemo)(() => {
+  const containerRef = (0, import_react52.useRef)(null);
+  const refs = (0, import_react52.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react50.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react52.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react50.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react50.default.createElement(
+  const labelElements = (0, import_react52.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react52.default.createElement(
       "span",
       {
         key: id,
@@ -4948,7 +5297,7 @@ var LabeledElementView = (0, import_react50.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -5013,13 +5362,13 @@ var LabeledElementView = (0, import_react50.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react50.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react50.default.createElement(Tools, null, children), /* @__PURE__ */ import_react50.default.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ import_react52.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react52.default.createElement(Tools, null, children), /* @__PURE__ */ import_react52.default.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
-var import_noya_utils9 = require("@noya-app/noya-utils");
+var import_noya_utils10 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_styled_components30 = __toESM(require("styled-components"));
 function Progress({
   value,
@@ -5028,8 +5377,8 @@ function Progress({
   flex,
   variant = "normal"
 }) {
-  const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
-  return /* @__PURE__ */ import_react51.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react51.default.createElement(
+  const clampedValue = (0, import_noya_utils10.clamp)(value, 0, 100);
+  return /* @__PURE__ */ import_react53.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react53.default.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5054,7 +5403,7 @@ var ProgressIndicator = (0, import_styled_components30.default)(ProgressPrimitiv
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react52 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_styled_components31 = __toESM(require("styled-components"));
 var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Root).withConfig({
@@ -5107,9 +5456,9 @@ var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.It
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = (0, import_react52.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react52.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react52.default.createElement(
+var ToggleGroupItem = (0, import_react54.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react54.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react54.default.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5119,9 +5468,9 @@ var ToggleGroupItem = (0, import_react52.forwardRef)(function ToggleGroupItem2({
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ import_react52.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react54.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react52.createContext)({
+var RadioGroupContext = (0, import_react54.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5132,8 +5481,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = (0, import_react52.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react52.useCallback)(
+  const contextValue = (0, import_react54.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react54.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5141,7 +5490,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react52.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react54.default.createElement(
     StyledRoot,
     {
       id,
@@ -5155,30 +5504,30 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react52.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react52.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react54.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react54.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
-var import_noya_utils10 = require("@noya-app/noya-utils");
-var import_react53 = __toESM(require("react"));
+var import_noya_utils11 = require("@noya-app/noya-utils");
+var import_react55 = __toESM(require("react"));
 var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react53.createContext)(void 0);
-var SelectOption = (0, import_react53.memo)(function SelectOption2({
+var SelectContext = (0, import_react55.createContext)(void 0);
+var SelectOption = (0, import_react55.memo)(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = (0, import_react53.useContext)(SelectContext);
-  (0, import_react53.useEffect)(() => {
+  const { addListener, removeListener } = (0, import_react55.useContext)(SelectContext);
+  (0, import_react55.useEffect)(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react53.default.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ import_react55.default.createElement("option", { value }, title ?? value);
 });
-var createChevronSVGString = (0, import_noya_utils10.memoize)(
+var createChevronSVGString = (0, import_noya_utils11.memoize)(
   (color) => `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
     <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
@@ -5216,7 +5565,7 @@ var SelectElement = import_styled_components32.default.select(
     }
   })
 );
-var Select = (0, import_react53.memo)(function Select2({
+var Select = (0, import_react55.memo)(function Select2({
   id,
   flex,
   value,
@@ -5226,8 +5575,8 @@ var Select = (0, import_react53.memo)(function Select2({
   const getTitle = "options" in rest ? rest.getTitle : void 0;
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
-  const optionElements = (0, import_react53.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react53.default.createElement(
+  const optionElements = (0, import_react55.useMemo)(
+    () => options ? options.map((option, index) => /* @__PURE__ */ import_react55.default.createElement(
       SelectOption,
       {
         key: option,
@@ -5238,21 +5587,21 @@ var Select = (0, import_react53.memo)(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react53.useMemo)(
+  const listeners = (0, import_react55.useRef)(/* @__PURE__ */ new Map());
+  const contextValue = (0, import_react55.useMemo)(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ import_react53.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(
     SelectElement,
     {
       id,
       flex,
       value,
-      onChange: (0, import_react53.useCallback)(
+      onChange: (0, import_react55.useCallback)(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
@@ -5264,7 +5613,7 @@ var Select = (0, import_react53.memo)(function Select2({
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_styled_components33 = __toESM(require("styled-components"));
 var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   flex: "1",
@@ -5305,17 +5654,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react54.useMemo)(
+  const arrayValue = (0, import_react56.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react54.useCallback)(
+  const handleValueChange = (0, import_react56.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     StyledSlider,
     {
       min,
@@ -5324,14 +5673,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react54.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react54.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react54.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react56.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react56.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react56.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react55 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_styled_components34 = __toESM(require("styled-components"));
 var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
   all: "unset",
@@ -5367,7 +5716,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(
     SwitchRoot,
     {
       colorScheme,
@@ -5376,42 +5725,42 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react55.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react57.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react56 = __toESM(require("react"));
-var TreeRow = (0, import_react56.forwardRef)(function TreeRow2({
+var import_react58 = __toESM(require("react"));
+var TreeRow = (0, import_react58.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react56.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react56.useCallback)(
+  const { expandable } = (0, import_react58.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react58.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react56.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react58.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, icon, /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react56.memo)(TreeRow);
+  TreeView2.Row = (0, import_react58.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/hooks/usePlatform.ts
@@ -5442,6 +5791,7 @@ var dark_exports = {};
 __export(dark_exports, {
   colors: () => colors2,
   fonts: () => fonts,
+  name: () => name2,
   sizes: () => sizes2,
   textStyles: () => textStyles
 });
@@ -5452,9 +5802,11 @@ var light_exports = {};
 __export(light_exports, {
   colors: () => colors,
   fonts: () => fonts,
+  name: () => name,
   sizes: () => sizes2,
   textStyles: () => textStyles
 });
+var name = "light";
 var colors = {
   logo: {
     fill: "rgb(175,175,175)",
@@ -5609,6 +5961,13 @@ var textStyles = {
     fontWeight: 400,
     lineHeight: "1.4"
   },
+  button: {
+    fontFamily: fonts.normal,
+    fontSize: "0.8rem",
+    fontWeight: 500,
+    lineHeight: "1.4",
+    letterSpacing: "-0.2px"
+  },
   code: {
     fontFamily: fonts.monospace,
     fontSize: "90%",
@@ -5648,6 +6007,7 @@ var sizes2 = {
 };
 
 // src/theme/dark.ts
+var name2 = "dark";
 var colors2 = (0, import_immer.default)(colors, (colors3) => {
   colors3.logo.fill = "rgb(248,248,250)";
   colors3.logo.highlight = "rgb(248,248,250)";
@@ -5718,8 +6078,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 ];
 
 // src/components/ArrayController.tsx
-var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react58 = __toESM(require("react"));
+var import_noya_utils12 = require("@noya-app/noya-utils");
+var import_react60 = __toESM(require("react"));
 var import_styled_components36 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
@@ -5738,7 +6098,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react57 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var import_styled_components35 = __toESM(require("styled-components"));
 var Section = import_styled_components35.default.div(({ theme, padding = "10px", gap }) => ({
   flex: "0 0 auto",
@@ -5785,8 +6145,8 @@ var Checkbox = import_styled_components35.default.input(({ theme }) => ({
 var Text3 = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react57.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react59.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -5806,7 +6166,7 @@ var RowLabel = import_styled_components35.default.span(({ theme, textStyle }) =>
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react57.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react59.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -5814,13 +6174,13 @@ var LabeledRow = (0, import_react57.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react57.default.createElement(Row2, { id }, /* @__PURE__ */ import_react57.default.createElement(Column, null, /* @__PURE__ */ import_react57.default.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react57.default.createElement(Row2, { gap }, children)));
+  return /* @__PURE__ */ import_react59.default.createElement(Row2, { id }, /* @__PURE__ */ import_react59.default.createElement(Column, null, /* @__PURE__ */ import_react59.default.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react59.default.createElement(Row2, { gap }, children)));
 });
-var LabeledSliderRow = (0, import_react57.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react59.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react57.default.createElement(Row2, null, /* @__PURE__ */ import_react57.default.createElement(Column, null, /* @__PURE__ */ import_react57.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react57.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react59.default.createElement(Row2, null, /* @__PURE__ */ import_react59.default.createElement(Column, null, /* @__PURE__ */ import_react59.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react59.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -5833,7 +6193,7 @@ var ElementRow = import_styled_components36.default.div({
 var ItemContainer2 = import_styled_components36.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react58.memo)(function ArrayController2({
+var ArrayController = (0, import_react60.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -5851,12 +6211,12 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
 }) {
   const iconColor = (0, import_styled_components36.useTheme)().colors.icon;
   const primaryLightColor = (0, import_styled_components36.useTheme)().colors.primaryLight;
-  const keys = (0, import_react58.useMemo)(
+  const keys = (0, import_react60.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
-  const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react58.useCallback)(
+  const indexes = reversed ? (0, import_noya_utils12.range)(0, items.length).reverse() : (0, import_noya_utils12.range)(0, items.length);
+  const handleMoveItem = (0, import_react60.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -5873,11 +6233,11 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react58.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react60.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react58.default.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ import_react58.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react58.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react58.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react60.default.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ import_react60.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react60.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react60.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react58.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react60.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -5886,7 +6246,7 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react58.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react60.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -5895,7 +6255,7 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react58.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react60.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -5905,15 +6265,15 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react58.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react60.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react60.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react58.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react58.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react58.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react60.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react60.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react60.default.createElement(
       ListView.DragIndicator,
       {
         gap: 0,
@@ -5926,12 +6286,12 @@ var ArrayController = (0, import_react58.memo)(function ArrayController2({
 });
 
 // src/components/DimensionInput.tsx
-var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react59 = __toESM(require("react"));
+var import_noya_utils13 = require("@noya-app/noya-utils");
+var import_react61 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react59.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react61.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -5941,30 +6301,31 @@ var DimensionInput = (0, import_react59.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react59.useCallback)(
+  const handleNudgeValue = (0, import_react61.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react59.useCallback)(
+  const handleSetValue = (0, import_react61.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react59.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react61.default.createElement(
     InputField.NumberInput,
     {
-      value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
+      value: value === void 0 ? value : (0, import_noya_utils13.round)(value, 2),
       placeholder: value === void 0 ? placeholder : void 0,
       onNudge: handleNudgeValue,
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react59.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react61.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
   ArrayController,
   Avatar,
+  AvatarStack,
   Body,
   Button,
   ButtonElement,
@@ -5983,6 +6344,8 @@ var DimensionInput = (0, import_react59.memo)(function DimensionInput2({
   DropdownMenu,
   FillInputField,
   FillPreviewBackground,
+  FloatingWindow,
+  FloatingWindowProvider,
   FullscreenDialog,
   GlobalInputBlurProvider,
   GradientPicker,
@@ -6040,9 +6403,11 @@ var DimensionInput = (0, import_react59.memo)(function DimensionInput2({
   sketchColorToHex,
   sketchColorToRgba,
   sketchColorToRgbaString,
+  useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
   useDesignSystemTheme,
   useDialogContainsElement,
+  useFloatingWindowManager,
   useGlobalInputBlur,
   useGlobalInputBlurListener,
   useGlobalInputBlurTrigger,