@noya-app/noya-designsystem 0.1.17 → 0.1.18

package/dist/index.js

@@ -69,6 +69,7 @@ __export(src_exports, {
   InputElement: () => InputElement,
   InputField: () => InputField,
   InputFieldWithCompletions: () => InputFieldWithCompletions,
+  InspectorContainer: () => InspectorContainer,
   InspectorPrimitives: () => InspectorPrimitives_exports,
   Italic: () => Italic,
   KeyboardShortcut: () => KeyboardShortcut,
@@ -97,6 +98,7 @@ __export(src_exports, {
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
+  WorkspaceLayout: () => WorkspaceLayout,
   createSectionedMenu: () => createSectionedMenu,
   darkTheme: () => dark_exports,
   fuzzyFilter: () => fuzzyFilter,
@@ -596,6 +598,17 @@ var Toast = ({
 };
 var ToastProvider = ({ children }) => /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react8.default.createElement(ToastViewport, null));
 
+// src/theme/dark.ts
+var dark_exports = {};
+__export(dark_exports, {
+  colors: () => colors2,
+  fonts: () => fonts,
+  name: () => name2,
+  sizes: () => sizes,
+  textStyles: () => textStyles
+});
+var import_immer = __toESM(require("immer"));
+
 // src/theme/light.ts
 var light_exports = {};
 __export(light_exports, {
@@ -822,6 +835,47 @@ var sizes = {
   }
 };
 
+// src/theme/dark.ts
+var name2 = "dark";
+var colors2 = (0, import_immer.default)(colors, (colors3) => {
+  colors3.logo.fill = "rgb(248,248,250)";
+  colors3.logo.highlight = "rgb(248,248,250)";
+  colors3.text = "rgb(248,248,250)";
+  colors3.textMuted = "rgb(180,179,182)";
+  colors3.textDisabled = "rgb(100,99,102)";
+  colors3.inputBackground = "rgba(181,178,255,0.08)";
+  colors3.inputBackgroundLight = "rgba(181,178,255,0.10)";
+  colors3.codeBackground = "rgb(20,19,23)";
+  colors3.dividerSubtle = "rgba(255,255,255,0.04)";
+  colors3.divider = "rgba(255,255,255,0.08)";
+  colors3.dividerStrong = "rgba(0,0,0,1)";
+  colors3.primary = "rgb(119, 66, 255)";
+  colors3.primaryLight = "rgb(134, 86, 255)";
+  colors3.secondaryBright = "#36fe91";
+  colors3.canvas.background = "rgb(20,19,23)";
+  colors3.canvas.sliceOutline = "rgb(150,150,150)";
+  colors3.canvas.grid = "rgba(0,0,0,0.1)";
+  colors3.sidebar.background = "rgb(34,33,39)";
+  colors3.sidebar.backgroundTransparent = "rgba(34,33,39,0.95)";
+  colors3.popover.background = "rgba(34,33,39,1)";
+  colors3.popover.divider = colors3.divider;
+  colors3.listView.raisedBackground = "rgba(181,178,255,0.1)";
+  colors3.listView.editingBackground = "#000";
+  colors3.slider.background = "#BBB";
+  colors3.radioGroup.background = colors3.inputBackground;
+  colors3.mask = "rgb(102,187,106)";
+  colors3.transparentChecker = "rgba(255,255,255,0.3)";
+  colors3.scrollbar = "rgba(199,199,199,0.2)";
+  colors3.placeholderDots = "rgba(255,255,255,0.3)";
+  colors3.dragOutline = "white";
+  colors3.activeBackground = "rgba(181,178,255,0.08)";
+  colors3.thumbnailBackground = "#1f1d33";
+  colors3.thumbnailShadow = "#1f1d3366";
+  colors3.breadcrumb.text = colors3.textMuted;
+  colors3.breadcrumb.textHover = colors3.textSubtle;
+  colors3.breadcrumb.icon = colors3.icon;
+});
+
 // src/contexts/DialogContext.tsx
 var import_react33 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -2408,7 +2462,7 @@ var DesignSystemConfigurationContext = (0, import_react35.createContext)({
 var DesignSystemConfigurationProvider = (0, import_react35.memo)(
   function DesignSystemConfigurationProvider2({
     children,
-    theme = light_exports,
+    theme,
     platform
   }) {
     const [internalPlatform, setInternalPlatform] = (0, import_react35.useState)(
@@ -2425,7 +2479,8 @@ var DesignSystemConfigurationProvider = (0, import_react35.memo)(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ import_react35.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react35.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react35.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react35.default.createElement(FloatingWindowProvider, null, children)))));
+    const resolvedTheme = theme === "light" ? light_exports : theme === "dark" ? dark_exports : theme ?? light_exports;
+    return /* @__PURE__ */ import_react35.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ import_react35.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react35.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react35.default.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
@@ -5491,8 +5546,41 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
   return nextIndex;
 }
 
-// src/components/Label.tsx
+// src/components/InspectorContainer.tsx
 var import_react52 = __toESM(require("react"));
+var InspectorContainer = (0, import_react52.memo)(
+  (0, import_react52.forwardRef)(function InspectorContainer2({
+    header,
+    children,
+    fallback,
+    showDividers,
+    id,
+    className,
+    style: style3
+  }, forwardedRef) {
+    const theme = useDesignSystemTheme();
+    return /* @__PURE__ */ import_react52.default.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        id,
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          background: theme.colors.sidebar.background,
+          ...style3
+        }
+      },
+      header,
+      children ? /* @__PURE__ */ import_react52.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react52.default.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react52.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react52.default.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
+    );
+  })
+);
+
+// src/components/Label.tsx
+var import_react53 = __toESM(require("react"));
 var import_styled_components28 = __toESM(require("styled-components"));
 var LabelLabel = import_styled_components28.default.label(
   ({ theme, $selected }) => ({
@@ -5521,17 +5609,17 @@ var LabelContainer2 = import_styled_components28.default.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ import_react52.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react52.default.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ import_react53.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react53.default.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = (0, import_react52.memo)(LabelLabel);
-  _Label.Root = (0, import_react52.memo)(LabelRoot);
+  _Label.Label = (0, import_react53.memo)(LabelLabel);
+  _Label.Root = (0, import_react53.memo)(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_styled_components29 = __toESM(require("styled-components"));
 var Container4 = import_styled_components29.default.div(({ theme }) => ({
   display: "flex",
@@ -5550,24 +5638,24 @@ var Labels = import_styled_components29.default.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = (0, import_react53.memo)(function LabeledElementView2({
+var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = import_react53.Children.toArray(children).flatMap(
-    (child) => (0, import_react53.isValidElement)(child) && child.type === import_react53.Fragment ? child.props.children : [child]
+  const elementIds = import_react54.Children.toArray(children).flatMap(
+    (child) => (0, import_react54.isValidElement)(child) && child.type === import_react54.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react53.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react54.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react53.useRef)(null);
-  const refs = (0, import_react53.useMemo)(() => {
+  const containerRef = (0, import_react54.useRef)(null);
+  const refs = (0, import_react54.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react53.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react54.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react53.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react53.default.createElement(
+  const labelElements = (0, import_react54.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react54.default.createElement(
       "span",
       {
         key: id,
@@ -5580,7 +5668,7 @@ var LabeledElementView = (0, import_react53.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -5645,13 +5733,13 @@ var LabeledElementView = (0, import_react53.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react53.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react53.default.createElement(Tools, null, children), /* @__PURE__ */ import_react53.default.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ import_react54.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react54.default.createElement(Tools, null, children), /* @__PURE__ */ import_react54.default.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
 var import_noya_utils9 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_styled_components30 = __toESM(require("styled-components"));
 function Progress({
   value,
@@ -5661,7 +5749,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
-  return /* @__PURE__ */ import_react54.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react55.default.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5686,7 +5774,7 @@ var ProgressIndicator = (0, import_styled_components30.default)(ProgressPrimitiv
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_styled_components31 = __toESM(require("styled-components"));
 var ignoredProps2 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Root).withConfig({
@@ -5739,9 +5827,9 @@ var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.It
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = (0, import_react55.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react55.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react55.default.createElement(
+var ToggleGroupItem = (0, import_react56.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react56.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react56.default.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5751,9 +5839,9 @@ var ToggleGroupItem = (0, import_react55.forwardRef)(function ToggleGroupItem2({
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ import_react55.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react56.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react55.createContext)({
+var RadioGroupContext = (0, import_react56.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5764,8 +5852,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = (0, import_react55.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react55.useCallback)(
+  const contextValue = (0, import_react56.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react56.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5773,7 +5861,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react55.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react56.default.createElement(
     StyledRoot,
     {
       id,
@@ -5787,28 +5875,28 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react55.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react55.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react56.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react56.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
 var import_noya_utils10 = require("@noya-app/noya-utils");
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react56.createContext)(void 0);
-var SelectOption = (0, import_react56.memo)(function SelectOption2({
+var SelectContext = (0, import_react57.createContext)(void 0);
+var SelectOption = (0, import_react57.memo)(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = (0, import_react56.useContext)(SelectContext);
-  (0, import_react56.useEffect)(() => {
+  const { addListener, removeListener } = (0, import_react57.useContext)(SelectContext);
+  (0, import_react57.useEffect)(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react56.default.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ import_react57.default.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = (0, import_noya_utils10.memoize)(
   (color) => `
@@ -5870,7 +5958,7 @@ var SelectLabel = import_styled_components32.default.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = (0, import_react56.memo)(function Select2({
+var Select = (0, import_react57.memo)(function Select2({
   id,
   flex,
   value,
@@ -5881,8 +5969,8 @@ var Select = (0, import_react56.memo)(function Select2({
   const getTitle = "options" in rest ? rest.getTitle : void 0;
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
-  const optionElements = (0, import_react56.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react56.default.createElement(
+  const optionElements = (0, import_react57.useMemo)(
+    () => options ? options.map((option, index) => /* @__PURE__ */ import_react57.default.createElement(
       SelectOption,
       {
         key: option,
@@ -5893,33 +5981,33 @@ var Select = (0, import_react56.memo)(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = (0, import_react56.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react56.useMemo)(
+  const listeners = (0, import_react57.useRef)(/* @__PURE__ */ new Map());
+  const contextValue = (0, import_react57.useMemo)(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ import_react56.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react56.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react57.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react57.default.createElement(
     SelectElement,
     {
       id,
       $flex: flex,
       value,
-      onChange: (0, import_react56.useCallback)(
+      onChange: (0, import_react57.useCallback)(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ import_react56.default.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ import_react57.default.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_styled_components33 = __toESM(require("styled-components"));
 var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   flex: "1",
@@ -5960,17 +6048,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react57.useMemo)(
+  const arrayValue = (0, import_react58.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react57.useCallback)(
+  const handleValueChange = (0, import_react58.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react57.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(
     StyledSlider,
     {
       min,
@@ -5979,14 +6067,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react57.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react57.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react57.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react58.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react58.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react58.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var import_styled_components34 = __toESM(require("styled-components"));
 var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
@@ -6021,7 +6109,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6030,44 +6118,337 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react58.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react59.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react59 = __toESM(require("react"));
-var TreeRow = (0, import_react59.forwardRef)(function TreeRow2({
+var import_react60 = __toESM(require("react"));
+var TreeRow = (0, import_react60.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react59.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react59.useCallback)(
+  const { expandable } = (0, import_react60.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react60.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react59.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react60.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, icon, /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, icon, /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react59.memo)(TreeRow);
+  TreeView2.Row = (0, import_react60.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
+// src/components/WorkspaceLayout.tsx
+var import_noya_keymap5 = require("@noya-app/noya-keymap");
+var import_react63 = __toESM(require("react"));
+var import_react_resizable_panels = require("react-resizable-panels");
+
+// src/hooks/usePreservePanelSize.tsx
+var import_react62 = require("react");
+
+// src/hooks/useWindowSize.tsx
+var import_react61 = require("react");
+function useWindowSize() {
+  const [size2, setSize] = (0, import_react61.useState)(
+    typeof window === "undefined" ? { width: 0, height: 0 } : {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  );
+  (0, import_react61.useEffect)(() => {
+    const handleResize = () => setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return size2;
+}
+
+// src/hooks/usePreservePanelSize.tsx
+var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+var LEFT_SIDEBAR_ID = "editor-left-sidebar";
+var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
+var CONTENT_AREA_ID = "editor-content-area";
+function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
+  const windowSize = useWindowSize();
+  const layoutRef = (0, import_react62.useRef)();
+  (0, import_react62.useLayoutEffect)(() => {
+    const panelGroup = document.querySelector(
+      `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
+    );
+    function observePanels() {
+      const panels = [
+        ...panelGroup.querySelectorAll("[data-panel]")
+      ];
+      const panelObserver = new ResizeObserver(() => {
+        const layout = {
+          windowWidth: panelGroup.offsetWidth,
+          panelPercentages: panelGroupRef.current?.getLayout() ?? []
+        };
+        layoutRef.current = layout;
+        const leftSidebar = panels.find(
+          (panel) => panel.id === LEFT_SIDEBAR_ID
+        );
+        const rightSidebar = panels.find(
+          (panel) => panel.id === RIGHT_SIDEBAR_ID
+        );
+        setPanelLayoutState?.({
+          leftSidebarCollapsed: leftSidebar?.offsetWidth === 0,
+          rightSidebarCollapsed: rightSidebar?.offsetWidth === 0
+        });
+      });
+      panels.forEach((panel) => panelObserver.observe(panel));
+      return () => {
+        panelObserver.disconnect();
+      };
+    }
+    let disconnectPanelObserver = observePanels();
+    const panelGroupObserver = new MutationObserver(() => {
+      disconnectPanelObserver();
+      disconnectPanelObserver = observePanels();
+    });
+    panelGroupObserver.observe(panelGroup, {
+      childList: true
+    });
+    return () => {
+      disconnectPanelObserver();
+      panelGroupObserver.disconnect();
+    };
+  }, [panelGroupRef, setPanelLayoutState]);
+  (0, import_react62.useLayoutEffect)(() => {
+    if (!layoutRef.current)
+      return;
+    const {
+      windowWidth: oldWindowWidth,
+      panelPercentages: oldPanelPercentages
+    } = layoutRef.current;
+    if (oldPanelPercentages.some(
+      (value) => typeof value !== "number" || isNaN(value)
+    ) || oldWindowWidth === 0) {
+      return;
+    }
+    const currentLayout = panelGroupRef.current?.getLayout();
+    if (!currentLayout || currentLayout.length !== oldPanelPercentages.length) {
+      return;
+    }
+    if (currentLayout.length === 3) {
+      const leftSidebarWidth = oldPanelPercentages[0] / 100 * oldWindowWidth;
+      const rightSidebarWidth = oldPanelPercentages[2] / 100 * oldWindowWidth;
+      const newLeftSidebarPercentage = leftSidebarWidth / windowSize.width * 100;
+      const newRightSidebarPercentage = rightSidebarWidth / windowSize.width * 100;
+      const newLayout = [
+        newLeftSidebarPercentage,
+        100 - newLeftSidebarPercentage - newRightSidebarPercentage,
+        newRightSidebarPercentage
+      ];
+      try {
+        panelGroupRef.current?.setLayout(newLayout);
+      } catch (e) {
+        console.error(e);
+        console.info("snapshot on error", {
+          oldWindowWidth,
+          oldPanelPercentages,
+          newLayout,
+          currentLayout
+        });
+      }
+    } else if (currentLayout.length === 2) {
+      const leftSidebarWidth = oldPanelPercentages[0] / 100 * oldWindowWidth;
+      const newLeftSidebarPercentage = leftSidebarWidth / windowSize.width * 100;
+      const newLayout = [
+        newLeftSidebarPercentage,
+        100 - newLeftSidebarPercentage
+      ];
+      try {
+        panelGroupRef.current?.setLayout(newLayout);
+      } catch (e) {
+        console.error(e);
+        console.info("snapshot on error", {
+          oldWindowWidth,
+          oldPanelPercentages,
+          newLayout,
+          currentLayout
+        });
+      }
+    }
+  }, [panelGroupRef, windowSize.width]);
+}
+
+// src/components/WorkspaceLayout.tsx
+var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
+  autoSavePrefix,
+  leftSidebarContent: leftPanelContent,
+  children: centerPanelContent,
+  rightSidebarContent: rightPanelContent,
+  hasLeftSidebar = !!leftPanelContent,
+  hasRightSidebar = !!rightPanelContent,
+  onChangeLayoutState,
+  leftSidebarInitialSize = 280,
+  rightSidebarInitialSize = 400,
+  leftSidebarCanResize = false
+}, forwardedRef) {
+  const windowSize = useWindowSize();
+  const leftSidebarPercentage = leftSidebarInitialSize / windowSize.width * 100;
+  const rightSidebarPercentage = rightSidebarInitialSize / windowSize.width * 100;
+  const panelGroupRef = (0, import_react63.useRef)(null);
+  const leftSidebarRef = (0, import_react63.useRef)(null);
+  const rightSidebarRef = (0, import_react63.useRef)(null);
+  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const theme = useDesignSystemTheme();
+  (0, import_react63.useImperativeHandle)(forwardedRef, () => ({
+    setLeftSidebarExpanded: (expanded) => {
+      if (expanded) {
+        leftSidebarRef.current?.expand();
+      } else {
+        leftSidebarRef.current?.collapse();
+      }
+    },
+    setRightSidebarExpanded: (expanded) => {
+      if (expanded) {
+        rightSidebarRef.current?.expand();
+      } else {
+        rightSidebarRef.current?.collapse();
+      }
+    },
+    toggleAllSidebars: () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+      if (isLeftSidebarExpanded || isRightSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+        rightSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+        rightSidebarRef.current?.expand();
+      }
+    },
+    toggleLeftSidebar: () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+      if (isLeftSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+      }
+    },
+    toggleRightSidebar: () => {
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+      if (isRightSidebarExpanded) {
+        rightSidebarRef.current?.collapse();
+      } else {
+        rightSidebarRef.current?.expand();
+      }
+    }
+  }));
+  (0, import_noya_keymap5.useKeyboardShortcuts)({
+    "Mod-.": () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+      if (isLeftSidebarExpanded || isRightSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+        rightSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+        rightSidebarRef.current?.expand();
+      }
+    }
+  });
+  return /* @__PURE__ */ import_react63.default.createElement(Stack.H, { flex: "1" }, /* @__PURE__ */ import_react63.default.createElement(
+    import_react_resizable_panels.PanelGroup,
+    {
+      ref: panelGroupRef,
+      id: EDITOR_PANEL_GROUP_ID,
+      direction: "horizontal",
+      autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : EDITOR_PANEL_GROUP_ID,
+      style: { flex: "1" }
+    },
+    hasLeftSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+      import_react_resizable_panels.Panel,
+      {
+        id: LEFT_SIDEBAR_ID,
+        order: 1,
+        ref: leftSidebarRef,
+        defaultSize: leftSidebarPercentage,
+        minSize: leftSidebarPercentage,
+        ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
+        collapsible: true,
+        style: {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      leftPanelContent
+    ), /* @__PURE__ */ import_react63.default.createElement(
+      import_react_resizable_panels.PanelResizeHandle,
+      {
+        style: {
+          cursor: "col-resize",
+          width: "1px",
+          height: "100%",
+          backgroundColor: theme.colors.divider
+        }
+      }
+    )),
+    /* @__PURE__ */ import_react63.default.createElement(
+      import_react_resizable_panels.Panel,
+      {
+        id: CONTENT_AREA_ID,
+        order: 2,
+        minSize: 10,
+        style: {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      centerPanelContent
+    ),
+    hasRightSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+      import_react_resizable_panels.PanelResizeHandle,
+      {
+        style: {
+          cursor: "col-resize",
+          width: "1px",
+          height: "100%",
+          backgroundColor: theme.colors.divider
+        }
+      }
+    ), /* @__PURE__ */ import_react63.default.createElement(
+      import_react_resizable_panels.Panel,
+      {
+        id: RIGHT_SIDEBAR_ID,
+        order: 3,
+        ref: rightSidebarRef,
+        minSize: rightSidebarPercentage,
+        defaultSize: rightSidebarPercentage,
+        collapsible: true,
+        style: {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      rightPanelContent
+    ))
+  ));
+});
+
 // src/hooks/usePlatform.ts
 function usePlatform() {
   return useDesignSystemConfiguration().platform;
@@ -6077,56 +6458,6 @@ function usePlatformModKey() {
   return platform === "mac" ? "metaKey" : "ctrlKey";
 }
 
-// src/theme/dark.ts
-var dark_exports = {};
-__export(dark_exports, {
-  colors: () => colors2,
-  fonts: () => fonts,
-  name: () => name2,
-  sizes: () => sizes,
-  textStyles: () => textStyles
-});
-var import_immer = __toESM(require("immer"));
-var name2 = "dark";
-var colors2 = (0, import_immer.default)(colors, (colors3) => {
-  colors3.logo.fill = "rgb(248,248,250)";
-  colors3.logo.highlight = "rgb(248,248,250)";
-  colors3.text = "rgb(248,248,250)";
-  colors3.textMuted = "rgb(180,179,182)";
-  colors3.textDisabled = "rgb(100,99,102)";
-  colors3.inputBackground = "rgba(181,178,255,0.08)";
-  colors3.inputBackgroundLight = "rgba(181,178,255,0.10)";
-  colors3.codeBackground = "rgb(20,19,23)";
-  colors3.dividerSubtle = "rgba(255,255,255,0.04)";
-  colors3.divider = "rgba(255,255,255,0.08)";
-  colors3.dividerStrong = "rgba(0,0,0,1)";
-  colors3.primary = "rgb(119, 66, 255)";
-  colors3.primaryLight = "rgb(134, 86, 255)";
-  colors3.secondaryBright = "#36fe91";
-  colors3.canvas.background = "rgb(20,19,23)";
-  colors3.canvas.sliceOutline = "rgb(150,150,150)";
-  colors3.canvas.grid = "rgba(0,0,0,0.1)";
-  colors3.sidebar.background = "rgb(34,33,39)";
-  colors3.sidebar.backgroundTransparent = "rgba(34,33,39,0.95)";
-  colors3.popover.background = "rgba(34,33,39,1)";
-  colors3.popover.divider = colors3.divider;
-  colors3.listView.raisedBackground = "rgba(181,178,255,0.1)";
-  colors3.listView.editingBackground = "#000";
-  colors3.slider.background = "#BBB";
-  colors3.radioGroup.background = colors3.inputBackground;
-  colors3.mask = "rgb(102,187,106)";
-  colors3.transparentChecker = "rgba(255,255,255,0.3)";
-  colors3.scrollbar = "rgba(199,199,199,0.2)";
-  colors3.placeholderDots = "rgba(255,255,255,0.3)";
-  colors3.dragOutline = "white";
-  colors3.activeBackground = "rgba(181,178,255,0.08)";
-  colors3.thumbnailBackground = "#1f1d33";
-  colors3.thumbnailShadow = "#1f1d3366";
-  colors3.breadcrumb.text = colors3.textMuted;
-  colors3.breadcrumb.textHover = colors3.textSubtle;
-  colors3.breadcrumb.icon = colors3.icon;
-});
-
 // src/utils/createSectionedMenu.ts
 function withSeparators(elements2, separator) {
   const result = [];
@@ -6160,7 +6491,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react61 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_styled_components36 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
@@ -6179,7 +6510,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react60 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_styled_components35 = __toESM(require("styled-components"));
 var Section = import_styled_components35.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -6226,8 +6557,8 @@ var Checkbox = import_styled_components35.default.input(({ theme }) => ({
 var Text3 = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react60.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react64.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react64.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -6247,7 +6578,7 @@ var RowLabel = import_styled_components35.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react60.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react64.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6255,13 +6586,13 @@ var LabeledRow = (0, import_react60.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react60.default.createElement(Row2, { id }, /* @__PURE__ */ import_react60.default.createElement(Column, null, /* @__PURE__ */ import_react60.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react60.default.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ import_react64.default.createElement(Row2, { id }, /* @__PURE__ */ import_react64.default.createElement(Column, null, /* @__PURE__ */ import_react64.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react64.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react64.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react60.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react64.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react60.default.createElement(Row2, null, /* @__PURE__ */ import_react60.default.createElement(Column, null, /* @__PURE__ */ import_react60.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react60.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react64.default.createElement(Row2, null, /* @__PURE__ */ import_react64.default.createElement(Column, null, /* @__PURE__ */ import_react64.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react64.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -6274,7 +6605,7 @@ var ElementRow = import_styled_components36.default.div({
 var ItemContainer2 = import_styled_components36.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react61.memo)(function ArrayController2({
+var ArrayController = (0, import_react65.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6292,12 +6623,12 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
 }) {
   const iconColor = (0, import_styled_components36.useTheme)().colors.icon;
   const primaryLightColor = (0, import_styled_components36.useTheme)().colors.primaryLight;
-  const keys = (0, import_react61.useMemo)(
+  const keys = (0, import_react65.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react61.useCallback)(
+  const handleMoveItem = (0, import_react65.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6314,11 +6645,11 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react61.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react65.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react61.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react61.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react61.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react61.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react65.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react65.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react65.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react65.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react61.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react65.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6327,7 +6658,7 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react61.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react65.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6336,7 +6667,7 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react61.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react65.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6346,15 +6677,15 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react61.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react61.default.createElement(
+    /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react65.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react65.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react61.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react61.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react61.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react65.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react65.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react65.default.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6368,11 +6699,11 @@ var ArrayController = (0, import_react61.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react62 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6382,15 +6713,15 @@ var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react62.useCallback)(
+  const handleNudgeValue = (0, import_react66.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react62.useCallback)(
+  const handleSetValue = (0, import_react66.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react62.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react66.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -6399,7 +6730,7 @@ var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react62.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react66.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -6442,6 +6773,7 @@ var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
   InputElement,
   InputField,
   InputFieldWithCompletions,
+  InspectorContainer,
   InspectorPrimitives,
   Italic,
   KeyboardShortcut,
@@ -6470,6 +6802,7 @@ var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
   ToastProvider,
   Tooltip,
   TreeView,
+  WorkspaceLayout,
   createSectionedMenu,
   darkTheme,
   fuzzyFilter,