npm - @noya-app/noya-designsystem - Versions diffs - 0.1.10 → 0.1.12 - Mend

@noya-app/noya-designsystem 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/.turbo/turbo-build.log +9 -9
package/CHANGELOG.md +17 -0
package/dist/index.d.mts +51 -9
package/dist/index.d.ts +51 -9
package/dist/index.js +981 -616
package/dist/index.js.map +1 -1
package/dist/index.mjs +898 -538
package/dist/index.mjs.map +1 -1
package/package.json +3 -3
package/src/components/Avatar.tsx +85 -34
package/src/components/Button.tsx +1 -1
package/src/components/FloatingWindow.tsx +315 -0
package/src/components/Text.tsx +2 -1
package/src/components/internal/Menu.tsx +1 -3
package/src/contexts/DesignSystemConfiguration.tsx +12 -9
package/src/contexts/FloatingWindowContext.tsx +85 -0
package/src/index.tsx +3 -1
package/src/theme/dark.ts +2 -0
package/src/theme/light.ts +9 -0

package/dist/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 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 });
 };
 // src/components/ActivityIndicator.tsx
@@ -36,9 +36,98 @@ var ActivityIndicator = memo(function ActivityIndicator2({
 // src/components/Avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import React2 from "react";
+import React3, { forwardRef as forwardRef2 } from "react";
+import styled3 from "styled-components";
+// src/components/Stack.tsx
+import React2, {
+  Children as Children2,
+  forwardRef,
+  memo as memo2
+} from "react";
 import styled2 from "styled-components";
-var AvatarRoot = styled2(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
+import { Children, cloneElement, isValidElement } from "react";
+function createKey(key) {
+  return `s-${key}`;
+}
+function withSeparatorElements(elements2, separator) {
+  const childrenArray = Children.toArray(elements2);
+  for (let i = childrenArray.length - 1; i > 0; i--) {
+    let sep = typeof separator === "function" ? separator() : isValidElement(separator) ? cloneElement(separator, { key: createKey(i) }) : separator;
+    if (isValidElement(sep) && sep.key == null) {
+      sep = cloneElement(sep, { key: createKey(i) });
+    }
+    if (!sep || typeof sep === "boolean")
+      continue;
+    childrenArray.splice(i, 0, sep);
+  }
+  return childrenArray;
+}
+// src/components/Stack.tsx
+var Element = styled2.div(({ styleProps, breakpoints }) => ({
+  ...styleProps,
+  ...mergeBreakpoints(breakpoints || [])
+}));
+var StackBase = forwardRef(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
+  const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
+  const styleProps = {
+    display: "flex",
+    position: "relative",
+    alignItems: "stretch",
+    ...rest
+  };
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      ref: forwardedRef,
+      id,
+      as,
+      styleProps,
+      breakpoints,
+      tabIndex,
+      ...href && { href }
+    },
+    elements2
+  );
+});
+var VerticalStack = memo2(
+  forwardRef(function VStack(props, forwardedRef) {
+    return /* @__PURE__ */ React2.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
+  })
+);
+var HorizontalStack = memo2(
+  forwardRef(function HStack(props, forwardedRef) {
+    return /* @__PURE__ */ React2.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
+  })
+);
+var Stack = {
+  V: VerticalStack,
+  H: HorizontalStack
+};
+// src/components/Avatar.tsx
+var AvatarRoot = styled3(AvatarPrimitive.Root)(({ theme, size: size2, overflow }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -49,17 +138,23 @@ var AvatarRoot = styled2(AvatarPrimitive.Root)(({ theme, size: size2, overflow }
   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 = styled2(AvatarPrimitive.Image)({
+var AvatarImage = styled3(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   objectFit: "cover",
   borderRadius: "inherit"
 });
-var AvatarFallback = styled2(AvatarPrimitive.Fallback)(({ theme, size: size2 }) => ({
+var AvatarFallback = styled3(AvatarPrimitive.Fallback)(({ theme, size: size2 }) => ({
   fontSize: "0.8rem",
   fontWeight: 500,
   width: "100%",
@@ -70,28 +165,50 @@ var AvatarFallback = styled2(AvatarPrimitive.Fallback)(({ theme, size: size2 })
   color: "white",
   lineHeight: `${size2}px`
 }));
-function Avatar({
+var Avatar = forwardRef2(function Avatar2({
   image,
-  name,
+  name: name3,
   fallback,
   size: size2 = 19,
-  overflow = 0
+  overflow = 0,
+  ...props
+}, forwardedRef) {
+  return /* @__PURE__ */ React3.createElement(AvatarRoot, { ref: forwardedRef, size: size2, overflow, ...props }, /* @__PURE__ */ React3.createElement(AvatarImage, { src: image, alt: name3 }), /* @__PURE__ */ React3.createElement(AvatarFallback, { size: size2 }, fallback));
+});
+var AvatarStackItemWrapper = styled3.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__ */ React2.createElement(AvatarRoot, { size: size2, overflow }, /* @__PURE__ */ React2.createElement(AvatarImage, { src: image, alt: name }), /* @__PURE__ */ React2.createElement(AvatarFallback, { size: size2 }, fallback));
+  const childrenArray = React3.Children.toArray(children).map((child) => {
+    return React3.cloneElement(child, { size: size2 });
+  });
+  return /* @__PURE__ */ React3.createElement(Stack.H, null, childrenArray.map((child, index) => {
+    if (index === 0)
+      return child;
+    return /* @__PURE__ */ React3.createElement(AvatarStackItemWrapper, { size: size2, key: index }, child);
+  }));
 }
 // src/components/Button.tsx
-import React4, {
-  forwardRef,
+import React5, {
+  forwardRef as forwardRef3,
   useCallback
 } from "react";
-import styled4 from "styled-components";
+import styled5 from "styled-components";
 // src/components/Tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import React3, { memo as memo2 } from "react";
-import styled3 from "styled-components";
-var Content2 = styled3(TooltipPrimitive.Content)(({ theme }) => ({
+import React4, { memo as memo3 } from "react";
+import styled4 from "styled-components";
+var Content2 = styled4(TooltipPrimitive.Content)(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.text,
   borderRadius: 3,
@@ -100,8 +217,8 @@ var Content2 = styled3(TooltipPrimitive.Content)(({ theme }) => ({
   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 = memo2(function Tooltip2({ children, content }) {
-  return /* @__PURE__ */ React3.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React3.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React3.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React3.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React3.createElement(
+var Tooltip = memo3(function Tooltip2({ children, content }) {
+  return /* @__PURE__ */ React4.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React4.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React4.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React4.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React4.createElement(
     Content2,
     {
       side: "bottom",
@@ -114,7 +231,7 @@ var Tooltip = memo2(function Tooltip2({ children, content }) {
 });
 // src/components/Button.tsx
-var ButtonElement = styled4.button(
+var ButtonElement = styled5.button(
   ({
     theme,
     active,
@@ -124,7 +241,7 @@ var ButtonElement = styled4.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",
@@ -212,7 +329,7 @@ var ButtonElement = styled4.button(
     }
   })
 );
-var ButtonContent = styled4.span(({ theme }) => ({
+var ButtonContent = styled5.span(({ theme }) => ({
   // Line height of small text - maybe figure out better way to ensure
   // icons don't have a smaller height
   minHeight: "19px",
@@ -223,7 +340,7 @@ var ButtonContent = styled4.span(({ theme }) => ({
   // Helps with alignment with the default small text
   lineHeight: "15px"
 }));
-var Button = forwardRef(function Button2({
+var Button = forwardRef3(function Button2({
   id,
   className,
   style: style3,
@@ -241,7 +358,7 @@ var Button = forwardRef(function Button2({
   ...rest
   // Propagate any other props so this component works as a Slot
 }, forwardedRef) {
-  const buttonElement = /* @__PURE__ */ React4.createElement(
+  const buttonElement = /* @__PURE__ */ React5.createElement(
     ButtonElement,
     {
       ref: forwardedRef,
@@ -261,40 +378,40 @@ var Button = forwardRef(function Button2({
       }, []),
       ...rest
     },
-    /* @__PURE__ */ React4.createElement(ButtonContent, { style: contentStyle }, children)
+    /* @__PURE__ */ React5.createElement(ButtonContent, { style: contentStyle }, children)
   );
-  return tooltip ? /* @__PURE__ */ React4.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
+  return tooltip ? /* @__PURE__ */ React5.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React20, { memo as memo11 } from "react";
+import React21, { memo as memo11 } from "react";
 import styled14 from "styled-components";
 // src/contexts/DesignSystemConfiguration.tsx
-import React18, {
-  createContext as createContext4,
+import React19, {
+  createContext as createContext5,
   memo as memo10,
-  useContext as useContext4,
-  useMemo as useMemo8
+  useContext as useContext5,
+  useMemo as useMemo9
 } from "react";
 import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
 // src/components/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React6 from "react";
-import styled5 from "styled-components";
+import React7 from "react";
+import styled6 from "styled-components";
 // src/components/IconButton.tsx
 import * as Icons from "@noya-app/noya-icons";
-import React5, {
-  forwardRef as forwardRef2,
-  memo as memo3,
+import React6, {
+  forwardRef as forwardRef4,
+  memo as memo4,
   useMemo
 } from "react";
 import { useTheme } from "styled-components";
-var IconButton = memo3(
-  forwardRef2(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+var IconButton = memo4(
+  forwardRef4(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = useTheme().colors;
     const Icon = Icons[iconName];
     const style3 = useMemo(() => {
@@ -304,7 +421,7 @@ var IconButton = memo3(
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React5.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React6.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -315,7 +432,7 @@ var IconButton = memo3(
 );
 // src/components/Toast.tsx
-var ToastViewport = styled5(ToastPrimitive.Viewport)({
+var ToastViewport = styled6(ToastPrimitive.Viewport)({
   position: "fixed",
   bottom: 0,
   right: 0,
@@ -330,7 +447,7 @@ var ToastViewport = styled5(ToastPrimitive.Viewport)({
   zIndex: 2147483647,
   outline: "none"
 });
-var ToastRoot = styled5(ToastPrimitive.Root)(({ theme }) => ({
+var ToastRoot = styled6(ToastPrimitive.Root)(({ theme }) => ({
   borderRadius: 4,
   fontSize: 14,
   backgroundColor: theme.colors.popover.background,
@@ -343,19 +460,19 @@ var ToastRoot = styled5(ToastPrimitive.Root)(({ theme }) => ({
   columnGap: 10,
   alignItems: "center"
 }));
-var ToastTitle = styled5(ToastPrimitive.Title)(({ theme }) => ({
+var ToastTitle = styled6(ToastPrimitive.Title)(({ theme }) => ({
   gridArea: "title",
   marginBottom: 5,
   ...theme.textStyles.label,
   fontWeight: "bold",
   color: theme.colors.text
 }));
-var ToastDescription = styled5(ToastPrimitive.Description)(({ theme }) => ({
+var ToastDescription = styled6(ToastPrimitive.Description)(({ theme }) => ({
   gridArea: "description",
   ...theme.textStyles.small,
   color: theme.colors.textMuted
 }));
-var ToastAction = styled5(ToastPrimitive.Action)({
+var ToastAction = styled6(ToastPrimitive.Action)({
   gridArea: "action"
 });
 var Toast = ({
@@ -364,9 +481,9 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React6.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ React6.createElement(ToastTitle, null, title), /* @__PURE__ */ React6.createElement(ToastDescription, null, content), children && /* @__PURE__ */ React6.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ React6.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React6.createElement(IconButton, { iconName: "Cross1Icon" })));
+  return /* @__PURE__ */ React7.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ React7.createElement(ToastTitle, null, title), /* @__PURE__ */ React7.createElement(ToastDescription, null, content), children && /* @__PURE__ */ React7.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ React7.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React7.createElement(IconButton, { iconName: "Cross1Icon" })));
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ React6.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React6.createElement(ToastViewport, null));
+var ToastProvider = ({ children }) => /* @__PURE__ */ React7.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React7.createElement(ToastViewport, null));
 // src/contexts/DialogContext.tsx
 import React17, {
@@ -381,20 +498,20 @@ import styled13 from "styled-components";
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React7, {
-  forwardRef as forwardRef3,
+import React8, {
+  forwardRef as forwardRef5,
   useImperativeHandle,
   useRef
 } from "react";
-import styled7 from "styled-components";
+import styled8 from "styled-components";
 // src/components/Spacer.tsx
-import styled6 from "styled-components";
-var SpacerVertical = styled6.span(({ size: size2, inline }) => ({
+import styled7 from "styled-components";
+var SpacerVertical = styled7.span(({ size: size2, inline }) => ({
   display: inline ? "inline-block" : "block",
   ...size2 === void 0 ? { flex: 1 } : { minHeight: size2 }
 }));
-var SpacerHorizontal = styled6.span(({ size: size2, inline }) => ({
+var SpacerHorizontal = styled7.span(({ size: size2, inline }) => ({
   display: inline ? "inline-block" : "block",
   ...size2 === void 0 ? { flex: 1 } : { minWidth: size2 }
 }));
@@ -405,12 +522,12 @@ var Spacer;
 })(Spacer || (Spacer = {}));
 // src/components/Dialog.tsx
-var StyledOverlay = styled7(DialogPrimitive.Overlay)({
+var StyledOverlay = styled8(DialogPrimitive.Overlay)({
   backgroundColor: "rgba(0,0,0,0.5)",
   position: "fixed",
   inset: 0
 });
-var StyledContent = styled7(DialogPrimitive.Content)(({ theme }) => ({
+var StyledContent = styled8(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%",
@@ -429,17 +546,17 @@ var StyledContent = styled7(DialogPrimitive.Content)(({ theme }) => ({
   pointerEvents: "all",
   zIndex: 1e3
 }));
-var StyledTitle = styled7(DialogPrimitive.Title)(({ theme }) => ({
+var StyledTitle = styled8(DialogPrimitive.Title)(({ theme }) => ({
   margin: 0,
   ...theme.textStyles.body,
   color: theme.colors.text
 }));
-var StyledDescription = styled7(DialogPrimitive.Description)(({ theme }) => ({
+var StyledDescription = styled8(DialogPrimitive.Description)(({ theme }) => ({
   margin: 0,
   ...theme.textStyles.small,
   color: theme.colors.textMuted
 }));
-var CloseButtonContainer = styled7.div(({ theme }) => ({
+var CloseButtonContainer = styled8.div(({ theme }) => ({
   position: "absolute",
   top: theme.sizes.dialog.padding,
   right: theme.sizes.dialog.padding,
@@ -450,7 +567,7 @@ var CloseButtonContainer = styled7.div(({ theme }) => ({
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`
 }));
-var Dialog = forwardRef3(function Dialog2({
+var Dialog = forwardRef5(function Dialog2({
   children,
   title,
   description,
@@ -468,7 +585,7 @@ var Dialog = forwardRef3(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React7.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React7.createElement(StyledOverlay, null), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React8.createElement(StyledOverlay, null), /* @__PURE__ */ React8.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -483,14 +600,14 @@ var Dialog = forwardRef3(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ React7.createElement(CloseButtonContainer, null, /* @__PURE__ */ React7.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React7.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(StyledTitle, null, title), /* @__PURE__ */ React7.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React7.createElement(StyledDescription, null, description), /* @__PURE__ */ React7.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ React8.createElement(CloseButtonContainer, null, /* @__PURE__ */ React8.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React8.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(StyledTitle, null, title), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React8.createElement(StyledDescription, null, description), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
-var FullscreenDialog = forwardRef3(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React7.createElement(
+var FullscreenDialog = forwardRef5(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React8.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -517,13 +634,13 @@ import { CaretDownIcon } from "@noya-app/noya-icons";
 import { memoize } from "@noya-app/noya-utils";
 // ../noya-react-utils/src/components/AutoSizer.tsx
-import React9, { memo as memo4, useRef as useRef2 } from "react";
+import React10, { memo as memo5, useRef as useRef2 } from "react";
 // ../noya-react-utils/src/hooks/useSize.ts
-import * as React8 from "react";
+import * as React9 from "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) => {
@@ -570,27 +687,27 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = memo4(function AutoSizer2({
+var AutoSizer = memo5(function AutoSizer2({
   children,
   className
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
-var SingleDimensionAutoSizer = memo4(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
   children,
   dimension,
   className
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ React9.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-import React10, {
-  memo as memo5,
+import React11, {
+  memo as memo6,
   useCallback as useCallback3
 } from "react";
@@ -626,7 +743,7 @@ function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
 var style2 = { display: "flex", flex: 1 };
-var FileDropTarget = memo5(function FileDropTarget2({
+var FileDropTarget = memo6(function FileDropTarget2({
   children,
   onDropFiles,
   supportedFileTypes
@@ -664,7 +781,7 @@ var FileDropTarget = memo5(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ React10.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ React11.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -807,7 +924,7 @@ function assignRef(ref, value) {
 import React16, {
   Children as Children3,
   createContext as createContext2,
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   isValidElement as isValidElement2,
   memo as memo9,
   useCallback as useCallback11,
@@ -847,39 +964,18 @@ function handleNudge(e) {
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React12, {
-  forwardRef as forwardRef4,
-  memo as memo7,
+import React13, {
+  forwardRef as forwardRef6,
+  memo as memo8,
   useCallback as useCallback9,
   useMemo as useMemo5
 } from "react";
-import styled9 from "styled-components";
+import styled10 from "styled-components";
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React11, { memo as memo6 } from "react";
-import styled8 from "styled-components";
-// src/utils/withSeparatorElements.ts
-import { Children, cloneElement, isValidElement } from "react";
-function createKey(key) {
-  return `s-${key}`;
-}
-function withSeparatorElements(elements2, separator) {
-  const childrenArray = Children.toArray(elements2);
-  for (let i = childrenArray.length - 1; i > 0; i--) {
-    let sep = typeof separator === "function" ? separator() : isValidElement(separator) ? cloneElement(separator, { key: createKey(i) }) : separator;
-    if (isValidElement(sep) && sep.key == null) {
-      sep = cloneElement(sep, { key: createKey(i) });
-    }
-    if (!sep || typeof sep === "boolean")
-      continue;
-    childrenArray.splice(i, 0, sep);
-  }
-  return childrenArray;
-}
-// src/components/internal/Menu.tsx
+import React12, { memo as memo7 } from "react";
+import styled9 from "styled-components";
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
 var CHECKBOX_RIGHT_INSET = 3;
@@ -893,9 +989,7 @@ var styles = {
     theme,
     disabled
   }) => ({
-    ...theme.textStyles.small,
-    fontWeight: 500,
-    fontSize: "0.8rem",
+    ...theme.textStyles.button,
     flex: "0 0 auto",
     userSelect: "none",
     cursor: "pointer",
@@ -957,7 +1051,7 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
     menuItems.flatMap(getKeyboardShortcuts).map(([key, value]) => [key, () => onSelect(value)])
   );
 }
-var ShortcutElement = styled8.kbd(
+var ShortcutElement = styled9.kbd(
   ({
     theme,
     fixedWidth
@@ -970,12 +1064,12 @@ var ShortcutElement = styled8.kbd(
     }
   })
 );
-var KeyboardShortcut = memo6(function KeyboardShortcut2({
+var KeyboardShortcut = memo7(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React11.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React12.createElement(
     ShortcutElement,
     {
       key,
@@ -983,24 +1077,24 @@ var KeyboardShortcut = memo6(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React11.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ React12.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 // src/components/DropdownMenu.tsx
-var SeparatorElement = styled9(RadixDropdownMenu.Separator)(
+var SeparatorElement = styled10(RadixDropdownMenu.Separator)(
   styles.separatorStyle
 );
-var ItemElement = styled9(RadixDropdownMenu.Item)(styles.itemStyle);
-var CheckboxItemElement = styled9(RadixDropdownMenu.CheckboxItem)(
+var ItemElement = styled10(RadixDropdownMenu.Item)(styles.itemStyle);
+var CheckboxItemElement = styled10(RadixDropdownMenu.CheckboxItem)(
   styles.itemStyle
 );
-var StyledItemIndicator = styled9(RadixDropdownMenu.ItemIndicator)(
+var StyledItemIndicator = styled10(RadixDropdownMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var DropdownMenuItem = memo7(function ContextMenuItem({
+var DropdownMenuItem = memo8(function ContextMenuItem({
   value,
   children,
   onSelect,
@@ -1017,21 +1111,21 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React12.createElement(StyledItemIndicator, null, /* @__PURE__ */ React12.createElement(CheckIcon, null)),
-      icon && /* @__PURE__ */ React12.createElement(React12.Fragment, null, icon, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ React13.createElement(StyledItemIndicator, null, /* @__PURE__ */ React13.createElement(CheckIcon, null)),
+      icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ React12.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React12.createElement(React12.Fragment, null, icon, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React12.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React12.createElement(ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ React13.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React13.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React13.createElement(ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1045,9 +1139,9 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
     return element;
   }
 });
-var Content5 = styled9(RadixDropdownMenu.Content)(styles.contentStyle);
-var SubContent2 = styled9(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
+var Content5 = styled10(RadixDropdownMenu.Content)(styles.contentStyle);
+var SubContent2 = styled10(RadixDropdownMenu.SubContent)(styles.contentStyle);
+var DropdownMenuRoot = forwardRef6(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1074,7 +1168,7 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
   const contentStyle = useMemo5(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ React12.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React12.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React12.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React13.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React13.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React13.createElement(
     ContentComponent,
     {
       side,
@@ -1086,7 +1180,7 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React12.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React12.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React13.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React13.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1104,12 +1198,12 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
     )
   )));
 });
-var DropdownMenu = memo7(DropdownMenuRoot);
+var DropdownMenu = memo8(DropdownMenuRoot);
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React13, {
-  forwardRef as forwardRef5,
+import React14, {
+  forwardRef as forwardRef7,
   useCallback as useCallback10,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect3,
@@ -1158,8 +1252,8 @@ function useGlobalInputBlurTrigger() {
 }
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = forwardRef5(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React13.createElement(
+var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React14.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1170,7 +1264,7 @@ var ReadOnlyTextInput = forwardRef5(function ReadOnlyTextInput2({ onKeyDown, onF
     }
   );
 });
-var ControlledTextInput = forwardRef5(function ControlledTextInput2({
+var ControlledTextInput = forwardRef7(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1193,7 +1287,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1209,7 +1303,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
     }
   );
 });
-var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
+var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1220,7 +1314,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = React13.useRef(null);
+  const ref = React14.useRef(null);
   const latestValue = useRef9(value);
   latestValue.current = value;
   const userDidEdit = useRef9(false);
@@ -1304,7 +1398,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -1317,7 +1411,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     }
   );
 });
-var TextInput_default = forwardRef5(function TextInput(props, forwardedRef) {
+var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
   const commonProps = {
     onPointerDown: useCallback10(
       (event) => event.stopPropagation(),
@@ -1336,19 +1430,19 @@ var TextInput_default = forwardRef5(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React13.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React14.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React13.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React14.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React13.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React14.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React14 from "react";
-import styled10 from "styled-components";
-var ContentElement = styled10(PopoverPrimitive.Content)(({ theme, variant }) => ({
+import React15 from "react";
+import styled11 from "styled-components";
+var ContentElement = styled11(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
   fontSize: 14,
   backgroundColor: theme.colors.popover.background,
@@ -1360,10 +1454,10 @@ var ContentElement = styled10(PopoverPrimitive.Content)(({ theme, variant }) =>
   ...variant === "normal" && { width: "240px" },
   zIndex: 1e3
 }));
-var ArrowElement = styled10(PopoverPrimitive.Arrow)(({ theme }) => ({
+var ArrowElement = styled11(PopoverPrimitive.Arrow)(({ theme }) => ({
   fill: theme.colors.popover.background
 }));
-var PopoverClose = styled10(PopoverPrimitive.Close)(({ theme }) => ({
+var PopoverClose = styled11(PopoverPrimitive.Close)(({ theme }) => ({
   all: "unset",
   fontFamily: "inherit",
   borderRadius: "100%",
@@ -1393,7 +1487,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ React14.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React14.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React15.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React15.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React15.createElement(
     ContentElement,
     {
       variant,
@@ -1414,79 +1508,11 @@ function Popover({
       }
     },
     children,
-    showArrow && /* @__PURE__ */ React14.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ React14.createElement(PopoverClose, null, /* @__PURE__ */ React14.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ React15.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ React15.createElement(PopoverClose, null, /* @__PURE__ */ React15.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
-// src/components/Stack.tsx
-import React15, {
-  Children as Children2,
-  forwardRef as forwardRef6,
-  memo as memo8
-} from "react";
-import styled11 from "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 = styled11.div(({ styleProps, breakpoints }) => ({
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
-}));
-var StackBase = forwardRef6(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
-  const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
-  const styleProps = {
-    display: "flex",
-    position: "relative",
-    alignItems: "stretch",
-    ...rest
-  };
-  return /* @__PURE__ */ React15.createElement(
-    Element,
-    {
-      ref: forwardedRef,
-      id,
-      as,
-      styleProps,
-      breakpoints,
-      tabIndex,
-      ...href && { href }
-    },
-    elements2
-  );
-});
-var VerticalStack = memo8(
-  forwardRef6(function VStack(props, forwardedRef) {
-    return /* @__PURE__ */ React15.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
-  })
-);
-var HorizontalStack = memo8(
-  forwardRef6(function HStack(props, forwardedRef) {
-    return /* @__PURE__ */ React15.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
-  })
-);
-var Stack = {
-  V: VerticalStack,
-  H: HorizontalStack
-};
 // src/components/InputField.tsx
 var InputFieldContext = createContext2({
   labelPosition: "end",
@@ -1517,7 +1543,7 @@ var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointe
   }
 }));
 var InputFieldLabel = memo9(
-  forwardRef7(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+  forwardRef8(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
     const ref = useRef10(null);
     useLayoutEffect4(() => {
@@ -1677,7 +1703,7 @@ var InputElement = styled12(TextInput_default).withConfig({
     }
   })
 );
-var InputFieldInput = forwardRef7(function InputFieldInput2(props, forwardedRef) {
+var InputFieldInput = forwardRef8(function InputFieldInput2(props, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -2022,20 +2048,68 @@ function useDialogContainsElement() {
   return useDialog().containsElement;
 }
+// src/contexts/FloatingWindowContext.tsx
+import { uuid } from "@noya-app/noya-utils";
+import React18, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
+import { createPortal } from "react-dom";
+var FloatingWindowContext = createContext4(void 0);
+var CurrentWindowContext = createContext4(void 0);
+var FloatingWindowProvider = ({
+  children
+}) => {
+  const [windows, setWindows] = useState12({});
+  const contextValue = useMemo8(() => {
+    const createWindow = (element) => {
+      const id = uuid();
+      setWindows((windows2) => ({
+        ...windows2,
+        [id]: /* @__PURE__ */ React18.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+      }));
+      return id;
+    };
+    const closeWindow = (id) => {
+      setWindows((windows2) => {
+        const { [id]: _, ...rest } = windows2;
+        return rest;
+      });
+    };
+    return { createWindow, closeWindow };
+  }, []);
+  return /* @__PURE__ */ React18.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+    ([id, element]) => createPortal(element, document.body, id)
+  ));
+};
+var useFloatingWindowManager = () => {
+  const context = useContext4(FloatingWindowContext);
+  if (!context) {
+    throw new Error(
+      "useFloatingWindow must be used within a FloatingWindowProvider"
+    );
+  }
+  return context;
+};
+var useCurrentFloatingWindowInternal = () => {
+  const context = useContext4(CurrentWindowContext);
+  if (!context) {
+    throw new Error("useCurrentWindow must be used within a FloatingWindow");
+  }
+  return context;
+};
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = createContext4(void 0);
+var DesignSystemConfigurationContext = createContext5(void 0);
 var DesignSystemConfigurationProvider = memo10(
   function DesignSystemConfigurationProvider2({
     children,
     theme,
     platform
   }) {
-    const contextValue = useMemo8(() => ({ platform }), [platform]);
-    return /* @__PURE__ */ React18.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React18.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React18.createElement(DialogProvider, null, /* @__PURE__ */ React18.createElement(ToastProvider, null, children))));
+    const contextValue = useMemo9(() => ({ platform }), [platform]);
+    return /* @__PURE__ */ React19.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React19.createElement(DialogProvider, null, /* @__PURE__ */ React19.createElement(ToastProvider, null, /* @__PURE__ */ React19.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  const value = useContext4(DesignSystemConfigurationContext);
+  const value = useContext5(DesignSystemConfigurationContext);
   if (!value) {
     throw new Error("Missing DesignSystemConfigurationProvider");
   }
@@ -2046,7 +2120,7 @@ function useDesignSystemTheme() {
 }
 // src/hooks/useHover.ts
-import * as React19 from "react";
+import * as React20 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2076,13 +2150,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) {
@@ -2244,7 +2318,7 @@ var Chip = memo11(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__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     ChipElement,
     {
       variant,
@@ -2256,7 +2330,7 @@ var Chip = memo11(function Chip2({
       isInteractive: !!handleClick,
       tabIndex
     },
-    addable && /* @__PURE__ */ React20.createElement(
+    addable && /* @__PURE__ */ React21.createElement(
       AddElement,
       {
         size: size2,
@@ -2269,7 +2343,7 @@ var Chip = memo11(function Chip2({
       }
     ),
     children,
-    deletable && /* @__PURE__ */ React20.createElement(
+    deletable && /* @__PURE__ */ React21.createElement(
       DeleteElement,
       {
         size: size2,
@@ -2288,10 +2362,10 @@ var Chip = memo11(function Chip2({
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React21, {
+import React22, {
   memo as memo12,
   useCallback as useCallback13,
-  useMemo as useMemo10
+  useMemo as useMemo11
 } from "react";
 import styled15 from "styled-components";
 var SeparatorElement2 = styled15(RadixContextMenu.Separator)(
@@ -2325,32 +2399,32 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React21.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React21.createElement(CheckIcon2, null)),
+      /* @__PURE__ */ React22.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React22.createElement(CheckIcon2, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ React21.createElement(
+  const element = /* @__PURE__ */ React22.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ React21.createElement(React21.Fragment, null, icon, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ React22.createElement(React22.Fragment, null, icon, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React21.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React21.createElement(ChevronRightIcon2, null))
+    shortcut && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React22.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React22.createElement(ChevronRightIcon2, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React21.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ React22.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2368,7 +2442,7 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = useMemo10(
+  const keymap = useMemo11(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -2379,8 +2453,8 @@ function ContextMenuRoot({
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ React21.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React21.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React21.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React21.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React21.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React22.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React22.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React22.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React22.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React22.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2400,7 +2474,7 @@ function ContextMenuRoot({
 var ContextMenu = memo12(ContextMenuRoot);
 // src/components/Divider.tsx
-import React22, { memo as memo13 } from "react";
+import React23, { memo as memo13 } from "react";
 import styled16 from "styled-components";
 var DividerContainer = styled16.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` },
@@ -2408,15 +2482,15 @@ var DividerContainer = styled16.div(({ theme, variant = "normal", orientation, o
   alignSelf: "stretch"
 }));
 var Divider = memo13(function Divider2(props) {
-  return /* @__PURE__ */ React22.createElement(DividerContainer, { orientation: "horizontal", ...props });
+  return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "horizontal", ...props });
 });
 var DividerVertical = memo13(function DividerVertical2(props) {
-  return /* @__PURE__ */ React22.createElement(DividerContainer, { orientation: "vertical", ...props });
+  return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "vertical", ...props });
 });
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React23, { memo as memo14, useCallback as useCallback14, useState as useState13 } from "react";
+import React24, { memo as memo14, useCallback as useCallback14, useState as useState14 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2442,8 +2516,8 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = useState13(false);
-  const [downPosition, setDownPosition] = React23.useState(null);
+  const [open, setOpen] = useState14(false);
+  const [downPosition, setDownPosition] = React24.useState(null);
   const handlePointerDownCapture = useCallback14(
     (event) => {
       if (open) {
@@ -2480,7 +2554,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2490,7 +2564,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React23.createElement(
+    items && onSelect ? /* @__PURE__ */ React24.createElement(
       DropdownMenu,
       {
         open,
@@ -2499,13 +2573,13 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React23.createElement(TriggerElement, null, /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React24.createElement(TriggerElement, null, /* @__PURE__ */ React24.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React23.createElement(
+    ) : /* @__PURE__ */ React24.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -2515,7 +2589,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 });
 // src/components/FillInputField.tsx
-import React26, { forwardRef as forwardRef8, memo as memo17 } from "react";
+import React27, { forwardRef as forwardRef9, memo as memo17 } from "react";
 import styled19 from "styled-components";
 // ../noya-file-format/src/types.ts
@@ -2841,31 +2915,31 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 // src/components/FillPreviewBackground.tsx
-import React25, { memo as memo16, useMemo as useMemo13 } from "react";
+import React26, { memo as memo16, useMemo as useMemo14 } from "react";
 import styled18, { useTheme as useTheme3 } from "styled-components";
 // src/contexts/ImageDataContext.tsx
-import React24, {
-  createContext as createContext5,
+import React25, {
+  createContext as createContext6,
   memo as memo15,
-  useContext as useContext5,
-  useMemo as useMemo11
+  useContext as useContext6,
+  useMemo as useMemo12
 } from "react";
-var ImageDataContext = createContext5(
+var ImageDataContext = createContext6(
   void 0
 );
 var ImageDataProvider = memo15(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = useMemo11(
+  const contextValue = useMemo12(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React24.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React25.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = useContext5(ImageDataContext);
+  const value = useContext6(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -2873,9 +2947,9 @@ function useImageData(ref) {
 }
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo12 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo13 } from "react";
 function useObjectURL(object) {
-  const objectURL = useMemo12(() => {
+  const objectURL = useMemo13(() => {
     if (object instanceof Blob)
       return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
@@ -2943,7 +3017,7 @@ var Background = styled18.span(({ background }) => ({
 }));
 var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = useTheme3().colors;
-  const background = useMemo13(
+  const background = useMemo14(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -2952,7 +3026,7 @@ var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ React25.createElement(Background, { background });
+  return /* @__PURE__ */ React26.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -2974,7 +3048,7 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = useMemo13(
+  const background = useMemo14(
     () => [
       size2,
       `url(${url})`,
@@ -2982,37 +3056,37 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ React25.createElement(Background, { background });
+  return /* @__PURE__ */ React26.createElement(Background, { background });
 });
 var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
   color
 }) {
-  const background = useMemo13(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ React25.createElement(Background, { background });
+  const background = useMemo14(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ React26.createElement(Background, { background });
 });
 var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = useMemo13(
+  const background = useMemo14(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ React25.createElement(Background, { background });
+  return /* @__PURE__ */ React26.createElement(Background, { background });
 });
 var FillPreviewBackground = memo16(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ React25.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ React26.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React25.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React26.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React25.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React26.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ React25.createElement(
+      return /* @__PURE__ */ React26.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3043,11 +3117,280 @@ var Container = styled19.button(
   })
 );
 var FillInputField = memo17(
-  forwardRef8(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React26.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ React26.createElement(FillPreviewBackground, { value }));
+  forwardRef9(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ React27.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ React27.createElement(FillPreviewBackground, { value }));
   })
 );
+// src/components/FloatingWindow.tsx
+import React28, { useCallback as useCallback15, useRef as useRef13, useState as useState15 } from "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__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React28.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] = useState15({ x: initialX, y: initialY });
+  const [size2, setSize] = useState15({
+    width: initialWidth,
+    height: initialHeight
+  });
+  const [isDragging, setIsDragging] = useState15(false);
+  const [isResizing, setIsResizing] = useState15(false);
+  const [dragOffset, setDragOffset] = useState15({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState15(null);
+  const wrapperRef = useRef13(null);
+  const toggleGlobalTextSelection = (disable) => {
+    if (disable) {
+      document.body.style.userSelect = "none";
+    } else {
+      document.body.style.userSelect = "";
+    }
+  };
+  const handleMouseDown = useCallback15((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 = useCallback15(
+    (direction) => (e) => {
+      e.stopPropagation();
+      setIsResizing(true);
+      setResizeDirection(direction);
+      toggleGlobalTextSelection(true);
+    },
+    []
+  );
+  const handleMouseMove = useCallback15(
+    (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 = useCallback15((e) => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeDirection(null);
+    toggleGlobalTextSelection(false);
+  }, []);
+  React28.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 = useCallback15(() => {
+    if (onClose)
+      onClose();
+    floatingWindowManager.closeWindow(currentFloatingWindow.id);
+  }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
+  return /* @__PURE__ */ React28.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__ */ React28.createElement(
+      "div",
+      {
+        style: {
+          ...styles2.toolbar,
+          backgroundColor: theme.colors.sidebar.background
+        },
+        onMouseDown: handleMouseDown
+      },
+      renderToolbar({ title, toolbarContent, onClose: handleClose })
+    ),
+    /* @__PURE__ */ React28.createElement(Divider, null),
+    /* @__PURE__ */ React28.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React28.createElement(
+      "div",
+      {
+        key: direction,
+        style: { ...styles2.resizeHandle, ...style3 },
+        onMouseDown: handleResizeStart(direction)
+      }
+    ))
+  );
+};
 // src/components/GradientPicker.tsx
 import {
   Alpha,
@@ -3059,7 +3402,7 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React27, { memo as memo18, useCallback as useCallback15, useMemo as useMemo14 } from "react";
+import React29, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
 var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
@@ -3069,7 +3412,7 @@ var GradientPicker = memo18(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = useMemo14(
+  const colorModel = useMemo15(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva2,
@@ -3078,30 +3421,30 @@ var GradientPicker = memo18(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = useMemo14(
+  const rgbaColor = useMemo15(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = useCallback15(
+  const handleChangeColor = useCallback16(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = useCallback15(
+  const handleAddGradientStop = useCallback16(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React29.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React29.createElement(
       Gradient,
       {
         gradients: value,
@@ -3112,12 +3455,12 @@ var GradientPicker = memo18(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React27.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React27.createElement(Saturation, null),
-    /* @__PURE__ */ React27.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React27.createElement(Hue, null),
-    /* @__PURE__ */ React27.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React27.createElement(Alpha, null)
+    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React29.createElement(Saturation, null),
+    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React29.createElement(Hue, null),
+    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React29.createElement(Alpha, null)
   );
 });
@@ -3149,19 +3492,19 @@ var Grid = styled20.div((props) => ({
 }));
 // src/components/GridView.tsx
-import React29, {
-  createContext as createContext6,
-  forwardRef as forwardRef9,
+import React31, {
+  createContext as createContext7,
+  forwardRef as forwardRef10,
   memo as memo20,
-  useCallback as useCallback17,
-  useContext as useContext6,
-  useMemo as useMemo15
+  useCallback as useCallback18,
+  useContext as useContext7,
+  useMemo as useMemo16
 } from "react";
 import styled22, { keyframes as keyframes2 } from "styled-components";
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React28, { memo as memo19, useCallback as useCallback16, useState as useState14 } from "react";
+import React30, { memo as memo19, useCallback as useCallback17, useState as useState16 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3190,17 +3533,17 @@ var Container2 = styled21.div({
   minHeight: 0
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = useState14(null);
-  return /* @__PURE__ */ React28.createElement(Container2, null, /* @__PURE__ */ React28.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React28.createElement(
+  const [scrollElementRef, setScrollElementRef] = useState16(null);
+  return /* @__PURE__ */ React30.createElement(Container2, null, /* @__PURE__ */ React30.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React30.createElement(
     StyledViewport,
     {
-      ref: useCallback16(
+      ref: useCallback17(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React28.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React28.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ React30.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React30.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 // src/components/GridView.tsx
@@ -3380,7 +3723,7 @@ var Shimmer = styled22.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = forwardRef9(function GridViewItem2({
+var GridViewItem = forwardRef10(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -3396,15 +3739,15 @@ var GridViewItem = forwardRef9(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = React29.useState(false);
+  const [hovered, setHovered] = React31.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = useContext6(GridViewContext);
-  const handleClick = useCallback17(
+  const { textPosition, bordered, disabled } = useContext7(GridViewContext);
+  const handleClick = useCallback18(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3413,7 +3756,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = useCallback17(
+  const handleKeyDown = useCallback18(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -3425,7 +3768,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ React29.createElement(
+  let element = /* @__PURE__ */ React31.createElement(
     ItemContainer,
     {
       id,
@@ -3434,7 +3777,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React31.createElement(
       ContentContainer,
       {
         disabled,
@@ -3448,25 +3791,25 @@ var GridViewItem = forwardRef9(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React29.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React29.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React29.createElement(TextOverlay, null, title && /* @__PURE__ */ React29.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React29.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ React29.createElement(Shimmer, null, /* @__PURE__ */ React29.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React31.createElement(TextOverlay, null, title && /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ React31.createElement(Shimmer, null, /* @__PURE__ */ React31.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React29.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ React31.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React29.createElement(
+    element = /* @__PURE__ */ React31.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React29.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React29.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React29.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ React31.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = createContext6({
+var GridViewContext = createContext7({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -3481,7 +3824,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = useCallback17(
+  const handleClick = useCallback18(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3489,7 +3832,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = useMemo15(
+  const contextValue = useMemo16(
     () => ({
       size: size2,
       textPosition,
@@ -3498,20 +3841,20 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ React29.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React29.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React29.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ React31.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React31.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
-  const { size: size2 } = useContext6(GridViewContext);
-  return /* @__PURE__ */ React29.createElement(Grid2, { size: size2, padding }, children);
+  const { size: size2 } = useContext7(GridViewContext);
+  return /* @__PURE__ */ React31.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React29.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React29.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React29.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React31.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React31.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React31.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
@@ -3524,16 +3867,16 @@ var GridView;
 // src/components/InputFieldWithCompletions.tsx
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import React33, {
-  forwardRef as forwardRef12,
+import React35, {
+  forwardRef as forwardRef13,
   memo as memo23,
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo18,
-  useRef as useRef15,
-  useState as useState16
+  useMemo as useMemo19,
+  useRef as useRef16,
+  useState as useState18
 } from "react";
 import styled25 from "styled-components";
@@ -3611,18 +3954,18 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React31, {
+import React33, {
   Children as Children4,
-  createContext as createContext8,
-  forwardRef as forwardRef10,
+  createContext as createContext9,
+  forwardRef as forwardRef11,
   isValidElement as isValidElement3,
   memo as memo22,
-  useCallback as useCallback19,
-  useContext as useContext8,
+  useCallback as useCallback20,
+  useContext as useContext9,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo17,
-  useRef as useRef14
+  useMemo as useMemo18,
+  useRef as useRef15
 } from "react";
 import { WindowScroller } from "react-virtualized";
 import { VariableSizeList } from "react-window";
@@ -3665,16 +4008,16 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import React30, {
-  createContext as createContext7,
+import React32, {
+  createContext as createContext8,
   memo as memo21,
-  useCallback as useCallback18,
-  useContext as useContext7,
-  useMemo as useMemo16,
-  useRef as useRef13,
-  useState as useState15
+  useCallback as useCallback19,
+  useContext as useContext8,
+  useMemo as useMemo17,
+  useRef as useRef14,
+  useState as useState17
 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -3687,7 +4030,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = createContext7({
+var SortableItemContext = createContext8({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -3709,7 +4052,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = useContext7(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = useContext8(SortableItemContext);
   const sortable = useSortable({ id, disabled });
   const {
     active,
@@ -3729,7 +4072,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = useCallback18((node) => setNodeRef(node), [setNodeRef]);
+  const ref = useCallback19((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -3760,22 +4103,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = useState15();
-  const activatorEvent = useRef13(null);
-  const setActivatorEvent = useCallback18((event) => {
+  const [activeIndex, setActiveIndex] = useState17();
+  const activatorEvent = useRef14(null);
+  const setActivatorEvent = useCallback19((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = useState15({ x: 0, y: 0 });
-  const handleDragStart = useCallback18(
+  const [position, setPosition] = useState17({ x: 0, y: 0 });
+  const handleDragStart = useCallback19(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = useCallback18((event) => {
+  const handleDragMove = useCallback19((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = useCallback18(
+  const handleDragEnd = useCallback19(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -3802,10 +4145,10 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(
     SortableItemContext.Provider,
     {
-      value: useMemo16(
+      value: useMemo17(
         () => ({
           keys,
           acceptsDrop,
@@ -3816,7 +4159,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement(
       DndContext,
       {
         sensors,
@@ -3825,9 +4168,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React30.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
-      renderOverlay && createPortal(
-        /* @__PURE__ */ React30.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+      /* @__PURE__ */ React32.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
+      renderOverlay && createPortal2(
+        /* @__PURE__ */ React32.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -3842,10 +4185,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = createContext8({
+var DraggingContext = createContext9({
   indentation: 12
 });
-var ListRowContext = createContext8({
+var ListRowContext = createContext9({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -3875,7 +4218,7 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = useRef14(null);
+  const inputRef = useRef15(null);
   useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
@@ -3885,7 +4228,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4007,7 +4350,7 @@ var ListViewDragIndicatorElement = styled23.div(({ theme, relativeDropPosition,
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = forwardRef10(function ListViewRow2({
+var ListViewRow = forwardRef11(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4040,12 +4383,12 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = useContext8(ListRowContext);
+  } = useContext9(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = useContext8(DraggingContext);
-  const handlePress = useCallback19(
+  const { indentation, isDragging } = useContext9(DraggingContext);
+  const handlePress = useCallback20(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -4054,14 +4397,14 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = useCallback19(
+  const handleDoubleClick = useCallback20(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = useMemo17(() => {
+  const mergedStyle = useMemo18(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -4073,7 +4416,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     relativeDropPosition,
     ...renderProps
   }, ref) => {
-    const element = /* @__PURE__ */ React31.createElement(
+    const element = /* @__PURE__ */ React33.createElement(
       RowContainer,
       {
         ref,
@@ -4104,7 +4447,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ React31.createElement(
+      relativeDropPosition && /* @__PURE__ */ React33.createElement(
         ListViewDragIndicatorElement,
         {
           colorScheme,
@@ -4113,11 +4456,11 @@ var ListViewRow = forwardRef10(function ListViewRow2({
           gap: listGap
         }
       ),
-      depth > 0 && /* @__PURE__ */ React31.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React33.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React31.createElement(
+      return /* @__PURE__ */ React33.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4130,21 +4473,21 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React31.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, composeRefs2(sortableRef, forwardedRef)));
+    return /* @__PURE__ */ React33.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, composeRefs2(sortableRef, forwardedRef)));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = createContext8(
+var RenderItemContext = createContext9(
   () => null
 );
 var VirtualizedListRow = memo22(function VirtualizedListRow2({
   index,
   style: style3
 }) {
-  const renderItem = useContext8(RenderItemContext);
-  return /* @__PURE__ */ React31.createElement("div", { key: index, style: style3 }, renderItem(index));
+  const renderItem = useContext9(RenderItemContext);
+  return /* @__PURE__ */ React33.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
+var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4152,7 +4495,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = useRef14(null);
+  const listRef = useRef15(null);
   useImperativeHandle2(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
@@ -4165,7 +4508,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = useMemo17(
+  const listStyle = useMemo18(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4173,18 +4516,18 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React31.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React33.createElement(
     WindowScroller,
     {
       scrollElement,
-      style: useMemo17(() => ({ flex: "1 1 auto" }), [])
+      style: useMemo18(() => ({ flex: "1 1 auto" }), [])
     },
-    useCallback19(
+    useCallback20(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React31.createElement("div", { ref: registerChild }, /* @__PURE__ */ React31.createElement(
+      }) => /* @__PURE__ */ React33.createElement("div", { ref: registerChild }, /* @__PURE__ */ React33.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -4225,7 +4568,7 @@ var RootContainer2 = styled23.div(({ theme, scrollable, gap }) => ({
   color: theme.colors.textMuted,
   gap
 }));
-var ListViewRootInner = forwardRef10(function ListViewRootInner2({
+var ListViewRootInner = forwardRef11(function ListViewRootInner2({
   onPress,
   scrollable = false,
   expandable = true,
@@ -4244,7 +4587,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = useCallback19(
+  const handleClick = useCallback20(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4254,11 +4597,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = useCallback19(
+  const renderChild = useCallback20(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = useCallback19(
+  const getItemContextValue = useCallback20(
     (i) => {
       const current = renderChild(i);
       if (!isValidElement3(current))
@@ -4318,26 +4661,26 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
       gap
     ]
   );
-  const draggingContextOverlayValue = useMemo17(
+  const draggingContextOverlayValue = useMemo18(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = useCallback19(
-    (index) => /* @__PURE__ */ React31.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React31.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = useCallback20(
+    (index) => /* @__PURE__ */ React33.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = useCallback19(
+  const renderWrappedChild = useCallback20(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current))
         return null;
-      return /* @__PURE__ */ React31.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React33.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = useMemo17(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React31.createElement(
+  const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React33.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -4347,8 +4690,8 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = useCallback19(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = useCallback20(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4357,12 +4700,12 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [getItemContextValue, variant]
   );
-  const getKey = useCallback19(
+  const getKey = useCallback20(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = useMemo17(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ React31.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React31.createElement(
+  const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
+  return /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React33.createElement(
     RootContainer2,
     {
       ...{
@@ -4373,7 +4716,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React31.createElement(
+        virtualized ? /* @__PURE__ */ React33.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -4390,33 +4733,33 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
   ));
 });
 var ListViewRoot = memo22(ListViewRootInner);
-var ChildrenListViewInner = forwardRef10(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = useMemo17(
+var ChildrenListViewInner = forwardRef11(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = useMemo18(
     () => Children4.toArray(children).flatMap(
       (child) => isValidElement3(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: useCallback19(
+      keyExtractor: useCallback20(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: useCallback19((item) => item, [])
+      renderItem: useCallback20((item) => item, [])
     }
   );
 });
 var ChildrenListView = memo22(ChildrenListViewInner);
-var SimpleListViewInner = forwardRef10(function SimpleListViewInner2(props, forwardedRef) {
+var SimpleListViewInner = forwardRef11(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React31.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React33.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React31.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React33.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memo22(SimpleListViewInner);
@@ -4437,7 +4780,7 @@ var ListView;
 })(ListView || (ListView = {}));
 // src/components/Text.tsx
-import React32, { forwardRef as forwardRef11 } from "react";
+import React34, { forwardRef as forwardRef12 } from "react";
 import styled24 from "styled-components";
 var elements = {
   title: "h1",
@@ -4449,6 +4792,7 @@ var elements = {
   heading5: "h5",
   body: "p",
   small: "span",
+  button: "span",
   code: "code",
   label: "span"
 };
@@ -4458,7 +4802,7 @@ var StyledElement = styled24.span(({ theme, variant, styleProps, breakpoints, co
   ...styleProps,
   ...mergeBreakpoints(breakpoints || [])
 }));
-var Text = forwardRef11(function Text2({
+var Text = forwardRef12(function Text2({
   as,
   variant,
   breakpoints,
@@ -4470,7 +4814,7 @@ var Text = forwardRef11(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(
     StyledElement,
     {
       ref: forwardedRef,
@@ -4486,28 +4830,28 @@ var Text = forwardRef11(function Text2({
     children
   );
 });
-var Heading1 = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "body" })
+var Body = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = forwardRef11(
-  (props, ref) => /* @__PURE__ */ React32.createElement(Text, { ref, ...props, variant: "small" })
+var Small = forwardRef12(
+  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ React32.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ React34.createElement(
   "span",
   {
     style: {
@@ -4550,14 +4894,14 @@ var CompletionToken = styled25.span(
   })
 );
 var CompletionMenu = memo23(
-  forwardRef12(function CompletionMenu2({
+  forwardRef13(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React35.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -4569,13 +4913,13 @@ var CompletionMenu = memo23(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React33.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ React35.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ React33.createElement(
+          return /* @__PURE__ */ React35.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -4587,8 +4931,8 @@ var CompletionMenu = memo23(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ React33.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ React35.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
@@ -4596,7 +4940,7 @@ var CompletionMenu = memo23(
   })
 );
 var InputFieldWithCompletions = memo23(
-  forwardRef12(function InputFieldWithCompletions2({
+  forwardRef13(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -4614,13 +4958,13 @@ var InputFieldWithCompletions = memo23(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = useRef15(null);
-    const [isFocused, setIsFocused] = useState16(false);
-    const [state, _setState] = useState16({
+    const ref = useRef16(null);
+    const [isFocused, setIsFocused] = useState18(false);
+    const [state, _setState] = useState18({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = useCallback20(
+    const updateState = useCallback21(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -4649,7 +4993,7 @@ var InputFieldWithCompletions = memo23(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = useRef15(initialValue);
+    const initialValueRef = useRef16(initialValue);
     useLayoutEffect7(() => {
       if (initialValueRef.current === initialValue)
         return;
@@ -4657,8 +5001,8 @@ var InputFieldWithCompletions = memo23(
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = React33.useRef(null);
-    const filteredItems = useMemo18(
+    const listRef = React35.useRef(null);
+    const filteredItems = useMemo19(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
@@ -4679,8 +5023,8 @@ var InputFieldWithCompletions = memo23(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = useRef15(void 0);
-    const selectItem = useCallback20(
+    const lastSubmittedValueRef = useRef16(void 0);
+    const selectItem = useCallback21(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -4696,17 +5040,17 @@ var InputFieldWithCompletions = memo23(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = useCallback20(
+    const handleChange = useCallback21(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = useCallback20(() => {
+    const handleBlur = useCallback21(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = useCallback20(
+    const handleFocus = useCallback21(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -4714,11 +5058,11 @@ var InputFieldWithCompletions = memo23(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = useCallback20(
+    const handleIndexChange = useCallback21(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = useCallback20(
+    const handleKeyDown = useCallback21(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -4793,14 +5137,14 @@ var InputFieldWithCompletions = memo23(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React35.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ React33.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React33.createElement(
+          return /* @__PURE__ */ React35.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React35.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -4810,7 +5154,7 @@ var InputFieldWithCompletions = memo23(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ React33.createElement(
+          ) : /* @__PURE__ */ React35.createElement(
             Stack.V,
             {
               height: "100px",
@@ -4818,11 +5162,11 @@ var InputFieldWithCompletions = memo23(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ React33.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ React35.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React35.createElement(
         InputField.Input,
         {
           ref,
@@ -4846,9 +5190,9 @@ var InputFieldWithCompletions = memo23(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React33.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React35.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ React33.createElement(InputField.Label, null, /* @__PURE__ */ React33.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ React35.createElement(InputField.Label, null, /* @__PURE__ */ React35.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -4870,7 +5214,7 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 // src/components/Label.tsx
-import React34, { memo as memo24 } from "react";
+import React36, { memo as memo24 } from "react";
 import styled26 from "styled-components";
 var LabelLabel = styled26.label(
   ({ theme, selected }) => ({
@@ -4899,7 +5243,7 @@ var LabelContainer2 = styled26.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ React34.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React34.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ React36.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React36.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
@@ -4909,15 +5253,15 @@ var Label;
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React35, {
+import React37, {
   Children as Children5,
   createRef,
   Fragment,
   isValidElement as isValidElement4,
   memo as memo25,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo19,
-  useRef as useRef16
+  useMemo as useMemo20,
+  useRef as useRef17
 } from "react";
 import styled27 from "styled-components";
 var Container4 = styled27.div(({ theme }) => ({
@@ -4947,14 +5291,14 @@ var LabeledElementView = memo25(function LabeledElementView2({
     (child) => isValidElement4(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = useRef16(null);
-  const refs = useMemo19(() => {
+  const containerRef = useRef17(null);
+  const refs = useMemo20(() => {
     return Object.fromEntries(
       serializedIds.split(",").map((id) => [id, createRef()])
     );
   }, [serializedIds]);
-  const labelElements = useMemo19(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React35.createElement(
+  const labelElements = useMemo20(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React37.createElement(
       "span",
       {
         key: id,
@@ -5032,13 +5376,13 @@ var LabeledElementView = memo25(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React35.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React35.createElement(Tools, null, children), /* @__PURE__ */ React35.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ React37.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React37.createElement(Tools, null, children), /* @__PURE__ */ React37.createElement(Labels, null, labelElements));
 });
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React36 from "react";
+import React38 from "react";
 import styled28 from "styled-components";
 function Progress({
   value,
@@ -5048,7 +5392,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ React36.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React38.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React38.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5073,13 +5417,13 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
 // src/components/RadioGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React37, {
-  createContext as createContext9,
-  forwardRef as forwardRef13,
+import React39, {
+  createContext as createContext10,
+  forwardRef as forwardRef14,
   memo as memo26,
-  useCallback as useCallback21,
-  useContext as useContext9,
-  useMemo as useMemo20
+  useCallback as useCallback22,
+  useContext as useContext10,
+  useMemo as useMemo21
 } from "react";
 import styled29 from "styled-components";
 var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
@@ -5133,9 +5477,9 @@ var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = forwardRef13(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = useContext9(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ React37.createElement(
+var ToggleGroupItem = forwardRef14(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = useContext10(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ React39.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5145,9 +5489,9 @@ var ToggleGroupItem = forwardRef13(function ToggleGroupItem2({ value, tooltip, c
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ React37.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React39.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = createContext9({
+var RadioGroupContext = createContext10({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5158,8 +5502,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = useMemo20(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = useCallback21(
+  const contextValue = useMemo21(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = useCallback22(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5167,7 +5511,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React37.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React39.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React39.createElement(
     StyledRoot,
     {
       id,
@@ -5187,30 +5531,30 @@ var RadioGroup;
 // src/components/Select.tsx
 import { memoize as memoize2 } from "@noya-app/noya-utils";
-import React38, {
-  createContext as createContext10,
+import React40, {
+  createContext as createContext11,
   memo as memo27,
-  useCallback as useCallback22,
-  useContext as useContext10,
+  useCallback as useCallback23,
+  useContext as useContext11,
   useEffect as useEffect13,
-  useMemo as useMemo21,
-  useRef as useRef17
+  useMemo as useMemo22,
+  useRef as useRef18
 } from "react";
 import styled30 from "styled-components";
-var SelectContext = createContext10(void 0);
+var SelectContext = createContext11(void 0);
 var SelectOption = memo27(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = useContext10(SelectContext);
+  const { addListener, removeListener } = useContext11(SelectContext);
   useEffect13(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ React38.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ React40.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = memoize2(
   (color) => `
@@ -5260,8 +5604,8 @@ var Select = memo27(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 = useMemo21(
-    () => options ? options.map((option, index) => /* @__PURE__ */ React38.createElement(
+  const optionElements = useMemo22(
+    () => options ? options.map((option, index) => /* @__PURE__ */ React40.createElement(
       SelectOption,
       {
         key: option,
@@ -5272,21 +5616,21 @@ var Select = memo27(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = useRef17(/* @__PURE__ */ new Map());
-  const contextValue = useMemo21(
+  const listeners = useRef18(/* @__PURE__ */ new Map());
+  const contextValue = useMemo22(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ React38.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React40.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
     SelectElement,
     {
       id,
       flex,
       value,
-      onChange: useCallback22(
+      onChange: useCallback23(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
@@ -5298,7 +5642,7 @@ var Select = memo27(function Select2({
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React39, { useCallback as useCallback23, useMemo as useMemo22 } from "react";
+import React41, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
 import styled31 from "styled-components";
 var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
@@ -5339,17 +5683,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = useMemo22(
+  const arrayValue = useMemo23(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = useCallback23(
+  const handleValueChange = useCallback24(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React41.createElement(
     StyledSlider,
     {
       min,
@@ -5358,14 +5702,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React39.createElement(StyledTrack, null, /* @__PURE__ */ React39.createElement(StyledRange, null)),
-    /* @__PURE__ */ React39.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React41.createElement(StyledTrack, null, /* @__PURE__ */ React41.createElement(StyledRange, null)),
+    /* @__PURE__ */ React41.createElement(StyledThumb2, null)
   );
 };
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React40 from "react";
+import React42 from "react";
 import styled32 from "styled-components";
 var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
   all: "unset",
@@ -5401,7 +5745,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement(
     SwitchRoot,
     {
       colorScheme,
@@ -5410,40 +5754,40 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React40.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React42.createElement(SwitchThumb, null)
   );
 };
 // src/components/TreeView.tsx
-import React41, {
-  forwardRef as forwardRef14,
+import React43, {
+  forwardRef as forwardRef15,
   memo as memo28,
-  useCallback as useCallback24,
-  useContext as useContext11
+  useCallback as useCallback25,
+  useContext as useContext12
 } from "react";
-var TreeRow = forwardRef14(function TreeRow2({
+var TreeRow = forwardRef15(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = useContext11(ListView.RowContext);
-  const handleClickChevron = useCallback24(
+  const { expandable } = useContext12(ListView.RowContext);
+  const handleClickChevron = useCallback25(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React41.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React41.createElement(React41.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React41.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React43.createElement(React43.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React43.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React41.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React41.createElement(React41.Fragment, null, icon, /* @__PURE__ */ React41.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React43.createElement(React43.Fragment, null, icon, /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -5481,6 +5825,7 @@ var dark_exports = {};
 __export(dark_exports, {
   colors: () => colors2,
   fonts: () => fonts,
+  name: () => name2,
   sizes: () => sizes2,
   textStyles: () => textStyles
 });
@@ -5491,9 +5836,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)",
@@ -5648,6 +5995,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%",
@@ -5687,6 +6041,7 @@ var sizes2 = {
 };
 // src/theme/dark.ts
+var name2 = "dark";
 var colors2 = produce(colors, (colors3) => {
   colors3.logo.fill = "rgb(248,248,250)";
   colors3.logo.highlight = "rgb(248,248,250)";
@@ -5758,7 +6113,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React43, { memo as memo30, useCallback as useCallback25, useMemo as useMemo23 } from "react";
+import React45, { memo as memo30, useCallback as useCallback26, useMemo as useMemo24 } from "react";
 import styled34, { useTheme as useTheme5 } from "styled-components";
 // src/components/InspectorPrimitives.tsx
@@ -5777,7 +6132,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React42, { memo as memo29 } from "react";
+import React44, { memo as memo29 } from "react";
 import styled33, { useTheme as useTheme4 } from "styled-components";
 var Section = styled33.div(({ theme, padding = "10px", gap }) => ({
   flex: "0 0 auto",
@@ -5824,8 +6179,8 @@ var Checkbox = styled33.input(({ theme }) => ({
 var Text3 = styled33.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React42.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React42.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = styled33.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -5853,13 +6208,13 @@ var LabeledRow = memo29(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React42.createElement(Row2, { id }, /* @__PURE__ */ React42.createElement(Column, null, /* @__PURE__ */ React42.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React42.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React42.createElement(Row2, { gap }, children)));
+  return /* @__PURE__ */ React44.createElement(Row2, { id }, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React44.createElement(Row2, { gap }, children)));
 });
 var LabeledSliderRow = memo29(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React42.createElement(Row2, null, /* @__PURE__ */ React42.createElement(Column, null, /* @__PURE__ */ React42.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React42.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React44.createElement(Row2, null, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React44.createElement(Row2, null, children)));
 });
 // src/components/ArrayController.tsx
@@ -5890,12 +6245,12 @@ var ArrayController = memo30(function ArrayController2({
 }) {
   const iconColor = useTheme5().colors.icon;
   const primaryLightColor = useTheme5().colors.primaryLight;
-  const keys = useMemo23(
+  const keys = useMemo24(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
-  const handleMoveItem = useCallback25(
+  const handleMoveItem = useCallback26(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -5912,11 +6267,11 @@ var ArrayController = memo30(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React43.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React45.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React43.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ React43.createElement(SectionHeader, null, /* @__PURE__ */ React43.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React43.createElement(Title3, null, title)), /* @__PURE__ */ React43.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ React45.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ React45.createElement(SectionHeader, null, /* @__PURE__ */ React45.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React45.createElement(Title3, null, title)), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ React43.createElement(
+      onClickTrash && /* @__PURE__ */ React45.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -5925,7 +6280,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React43.createElement(
+      onClickExpand && /* @__PURE__ */ React45.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -5934,7 +6289,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React43.createElement(
+      onClickPlus && /* @__PURE__ */ React45.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -5944,15 +6299,15 @@ var ArrayController = memo30(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React43.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React45.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React45.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React43.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React43.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React43.createElement(
+    indexes.map((index) => /* @__PURE__ */ React45.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React45.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React45.createElement(
       ListView.DragIndicator,
       {
         gap: 0,
@@ -5966,7 +6321,7 @@ var ArrayController = memo30(function ArrayController2({
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React44, { memo as memo31, useCallback as useCallback26 } from "react";
+import React46, { memo as memo31, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
@@ -5980,15 +6335,15 @@ var DimensionInput = memo31(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = useCallback26(
+  const handleNudgeValue = useCallback27(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = useCallback26(
+  const handleSetValue = useCallback27(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React44.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React46.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React46.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -5997,12 +6352,13 @@ var DimensionInput = memo31(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React44.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React46.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,
   ArrayController,
   Avatar,
+  AvatarStack,
   Body,
   Button,
   ButtonElement,
@@ -6021,6 +6377,8 @@ export {
   DropdownMenu,
   FillInputField,
   FillPreviewBackground,
+  FloatingWindow,
+  FloatingWindowProvider,
   FullscreenDialog,
   GlobalInputBlurProvider,
   GradientPicker,
@@ -6078,9 +6436,11 @@ export {
   sketchColorToHex,
   sketchColorToRgba,
   sketchColorToRgbaString,
+  useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
   useDesignSystemTheme,
   useDialogContainsElement,
+  useFloatingWindowManager,
   useGlobalInputBlur,
   useGlobalInputBlurListener,
   useGlobalInputBlurTrigger,