@noya-app/noya-designsystem 0.1.16 → 0.1.18

package/dist/index.mjs

@@ -489,6 +489,17 @@ var Toast = ({
 };
 var ToastProvider = ({ children }) => /* @__PURE__ */ React7.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React7.createElement(ToastViewport, null));
 
+// src/theme/dark.ts
+var dark_exports = {};
+__export(dark_exports, {
+  colors: () => colors2,
+  fonts: () => fonts,
+  name: () => name2,
+  sizes: () => sizes,
+  textStyles: () => textStyles
+});
+import produce from "immer";
+
 // src/theme/light.ts
 var light_exports = {};
 __export(light_exports, {
@@ -574,7 +585,8 @@ var colors = {
     grid: "rgba(0,0,0,0.05)"
   },
   sidebar: {
-    background: "rgba(252,252,252,0.85)"
+    background: "rgb(252,252,252)",
+    backgroundTransparent: "rgba(252,252,252,0.85)"
   },
   popover: {
     background: "rgb(252,252,252)",
@@ -714,6 +726,47 @@ var sizes = {
   }
 };
 
+// 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)";
+  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
 import React18, {
   createContext as createContext3,
@@ -2343,7 +2396,7 @@ var DesignSystemConfigurationContext = createContext5({
 var DesignSystemConfigurationProvider = memo10(
   function DesignSystemConfigurationProvider2({
     children,
-    theme = light_exports,
+    theme,
     platform
   }) {
     const [internalPlatform, setInternalPlatform] = useState13(
@@ -2360,7 +2413,8 @@ var DesignSystemConfigurationProvider = memo10(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React20.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React20.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React20.createElement(DialogProvider, null, /* @__PURE__ */ React20.createElement(ToastProvider, null, /* @__PURE__ */ React20.createElement(FloatingWindowProvider, null, children)))));
+    const resolvedTheme = theme === "light" ? light_exports : theme === "dark" ? dark_exports : theme ?? light_exports;
+    return /* @__PURE__ */ React20.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React20.createElement(ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ React20.createElement(DialogProvider, null, /* @__PURE__ */ React20.createElement(ToastProvider, null, /* @__PURE__ */ React20.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
@@ -5497,8 +5551,41 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
   return nextIndex;
 }
 
+// src/components/InspectorContainer.tsx
+import React37, { forwardRef as forwardRef15, memo as memo24 } from "react";
+var InspectorContainer = memo24(
+  forwardRef15(function InspectorContainer2({
+    header,
+    children,
+    fallback,
+    showDividers,
+    id,
+    className,
+    style: style3
+  }, forwardedRef) {
+    const theme = useDesignSystemTheme();
+    return /* @__PURE__ */ React37.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        id,
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          background: theme.colors.sidebar.background,
+          ...style3
+        }
+      },
+      header,
+      children ? /* @__PURE__ */ React37.createElement(ScrollArea, null, /* @__PURE__ */ React37.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React37.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React37.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
+    );
+  })
+);
+
 // src/components/Label.tsx
-import React37, { memo as memo24 } from "react";
+import React38, { memo as memo25 } from "react";
 import styled26 from "styled-components";
 var LabelLabel = styled26.label(
   ({ theme, $selected }) => ({
@@ -5527,22 +5614,22 @@ var LabelContainer2 = styled26.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ React37.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React37.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ React38.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React38.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = memo24(LabelLabel);
-  _Label.Root = memo24(LabelRoot);
+  _Label.Label = memo25(LabelLabel);
+  _Label.Root = memo25(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React38, {
+import React39, {
   Children as Children5,
   createRef,
   Fragment,
   isValidElement as isValidElement4,
-  memo as memo25,
+  memo as memo26,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo20,
   useRef as useRef17
@@ -5565,7 +5652,7 @@ var Labels = styled27.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = memo25(function LabeledElementView2({
+var LabeledElementView = memo26(function LabeledElementView2({
   children,
   renderLabel
 }) {
@@ -5582,7 +5669,7 @@ var LabeledElementView = memo25(function LabeledElementView2({
     );
   }, [serializedIds]);
   const labelElements = useMemo20(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React38.createElement(
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React39.createElement(
       "span",
       {
         key: id,
@@ -5660,13 +5747,13 @@ var LabeledElementView = memo25(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React38.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React38.createElement(Tools, null, children), /* @__PURE__ */ React38.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ React39.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React39.createElement(Tools, null, children), /* @__PURE__ */ React39.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React39 from "react";
+import React40 from "react";
 import styled28 from "styled-components";
 function Progress({
   value,
@@ -5676,7 +5763,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ React39.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React40.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5701,10 +5788,10 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
 
 // src/components/RadioGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React40, {
+import React41, {
   createContext as createContext10,
-  forwardRef as forwardRef15,
-  memo as memo26,
+  forwardRef as forwardRef16,
+  memo as memo27,
   useCallback as useCallback22,
   useContext as useContext10,
   useMemo as useMemo21
@@ -5761,9 +5848,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 = forwardRef15(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+var ToggleGroupItem = forwardRef16(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
   const { colorScheme } = useContext10(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ React40.createElement(
+  const itemElement = /* @__PURE__ */ React41.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5773,7 +5860,7 @@ var ToggleGroupItem = forwardRef15(function ToggleGroupItem2({ value, tooltip, c
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ React40.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React41.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var RadioGroupContext = createContext10({
   colorScheme: "primary"
@@ -5795,7 +5882,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React40.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React41.createElement(
     StyledRoot,
     {
       id,
@@ -5809,15 +5896,15 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = memo26(ToggleGroupRoot);
-  RadioGroup2.Item = memo26(ToggleGroupItem);
+  RadioGroup2.Root = memo27(ToggleGroupRoot);
+  RadioGroup2.Item = memo27(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
 import { memoize } from "@noya-app/noya-utils";
-import React41, {
+import React42, {
   createContext as createContext11,
-  memo as memo27,
+  memo as memo28,
   useCallback as useCallback23,
   useContext as useContext11,
   useEffect as useEffect15,
@@ -5826,7 +5913,7 @@ import React41, {
 } from "react";
 import styled30 from "styled-components";
 var SelectContext = createContext11(void 0);
-var SelectOption = memo27(function SelectOption2({
+var SelectOption = memo28(function SelectOption2({
   value,
   title,
   onSelect
@@ -5838,7 +5925,7 @@ var SelectOption = memo27(function SelectOption2({
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ React41.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ React42.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = memoize(
   (color) => `
@@ -5900,7 +5987,7 @@ var SelectLabel = styled30.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = memo27(function Select2({
+var Select = memo28(function Select2({
   id,
   flex,
   value,
@@ -5912,7 +5999,7 @@ var Select = memo27(function Select2({
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
   const optionElements = useMemo22(
-    () => options ? options.map((option, index) => /* @__PURE__ */ React41.createElement(
+    () => options ? options.map((option, index) => /* @__PURE__ */ React42.createElement(
       SelectOption,
       {
         key: option,
@@ -5931,7 +6018,7 @@ var Select = memo27(function Select2({
     }),
     []
   );
-  return /* @__PURE__ */ React41.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React41.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React42.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React42.createElement(
     SelectElement,
     {
       id,
@@ -5944,12 +6031,12 @@ var Select = memo27(function Select2({
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ React41.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ React42.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React42, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
+import React43, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
 import styled31 from "styled-components";
 var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
@@ -6000,7 +6087,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     StyledSlider,
     {
       min,
@@ -6009,14 +6096,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React42.createElement(StyledTrack, null, /* @__PURE__ */ React42.createElement(StyledRange, null)),
-    /* @__PURE__ */ React42.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React43.createElement(StyledTrack, null, /* @__PURE__ */ React43.createElement(StyledRange, null)),
+    /* @__PURE__ */ React43.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React43 from "react";
+import React44 from "react";
 import styled32 from "styled-components";
 var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
@@ -6051,7 +6138,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6060,18 +6147,18 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React43.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React44.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-import React44, {
-  forwardRef as forwardRef16,
-  memo as memo28,
+import React45, {
+  forwardRef as forwardRef17,
+  memo as memo29,
   useCallback as useCallback25,
   useContext as useContext12
 } from "react";
-var TreeRow = forwardRef16(function TreeRow2({
+var TreeRow = forwardRef17(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
@@ -6086,23 +6173,320 @@ var TreeRow = forwardRef16(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React44.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React44.createElement(React44.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React45.createElement(React45.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React45.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, icon, /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React45.createElement(React45.Fragment, null, icon, /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = memo28(TreeRow);
+  TreeView2.Row = memo29(TreeRow);
 })(TreeView || (TreeView = {}));
 
+// src/components/WorkspaceLayout.tsx
+import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
+import React47, { forwardRef as forwardRef18, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle
+} from "react-resizable-panels";
+
+// src/hooks/usePreservePanelSize.tsx
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef19 } from "react";
+
+// src/hooks/useWindowSize.tsx
+import { useEffect as useEffect16, useState as useState20 } from "react";
+function useWindowSize() {
+  const [size2, setSize] = useState20(
+    typeof window === "undefined" ? { width: 0, height: 0 } : {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  );
+  useEffect16(() => {
+    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 = useRef19();
+  useLayoutEffect9(() => {
+    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]);
+  useLayoutEffect9(() => {
+    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 = forwardRef18(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 = useRef20(null);
+  const leftSidebarRef = useRef20(null);
+  const rightSidebarRef = useRef20(null);
+  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const theme = useDesignSystemTheme();
+  useImperativeHandle4(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();
+      }
+    }
+  }));
+  useKeyboardShortcuts3({
+    "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__ */ React47.createElement(Stack.H, { flex: "1" }, /* @__PURE__ */ React47.createElement(
+    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__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+      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__ */ React47.createElement(
+      PanelResizeHandle,
+      {
+        style: {
+          cursor: "col-resize",
+          width: "1px",
+          height: "100%",
+          backgroundColor: theme.colors.divider
+        }
+      }
+    )),
+    /* @__PURE__ */ React47.createElement(
+      Panel,
+      {
+        id: CONTENT_AREA_ID,
+        order: 2,
+        minSize: 10,
+        style: {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      centerPanelContent
+    ),
+    hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+      PanelResizeHandle,
+      {
+        style: {
+          cursor: "col-resize",
+          width: "1px",
+          height: "100%",
+          backgroundColor: theme.colors.divider
+        }
+      }
+    ), /* @__PURE__ */ React47.createElement(
+      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;
@@ -6112,55 +6496,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
-});
-import produce from "immer";
-var name2 = "dark";
-var colors2 = produce(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 = "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 = [];
@@ -6194,7 +6529,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React46, { memo as memo30, useCallback as useCallback26, useMemo as useMemo24 } from "react";
+import React49, { memo as memo31, useCallback as useCallback26, useMemo as useMemo24 } from "react";
 import styled34, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
@@ -6213,7 +6548,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React45, { memo as memo29 } from "react";
+import React48, { memo as memo30 } from "react";
 import styled33, { useTheme as useTheme4 } from "styled-components";
 var Section = styled33.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -6260,8 +6595,8 @@ var Checkbox = styled33.input(({ theme }) => ({
 var Text3 = styled33.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React45.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ React48.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = styled33.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -6281,7 +6616,7 @@ var RowLabel = styled33.span(({ theme, $textStyle }) => ({
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = memo29(function LabeledRow2({
+var LabeledRow = memo30(function LabeledRow2({
   id,
   children,
   label,
@@ -6289,13 +6624,13 @@ var LabeledRow = memo29(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React45.createElement(Row2, { id }, /* @__PURE__ */ React45.createElement(Column, null, /* @__PURE__ */ React45.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React45.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React45.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ React48.createElement(Row2, { id }, /* @__PURE__ */ React48.createElement(Column, null, /* @__PURE__ */ React48.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React48.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React48.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = memo29(function LabeledRow3({
+var LabeledSliderRow = memo30(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React45.createElement(Row2, null, /* @__PURE__ */ React45.createElement(Column, null, /* @__PURE__ */ React45.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React45.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React48.createElement(Row2, null, /* @__PURE__ */ React48.createElement(Column, null, /* @__PURE__ */ React48.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React48.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -6308,7 +6643,7 @@ var ElementRow = styled34.div({
 var ItemContainer2 = styled34.div({
   position: "relative"
 });
-var ArrayController = memo30(function ArrayController2({
+var ArrayController = memo31(function ArrayController2({
   id,
   items,
   title,
@@ -6348,11 +6683,11 @@ var ArrayController = memo30(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React46.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React49.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React46.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React46.createElement(SectionHeader, null, /* @__PURE__ */ React46.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React46.createElement(Title3, null, title)), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ React49.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React49.createElement(SectionHeader, null, /* @__PURE__ */ React49.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React49.createElement(Title3, null, title)), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ React46.createElement(
+      onClickTrash && /* @__PURE__ */ React49.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6361,7 +6696,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React46.createElement(
+      onClickExpand && /* @__PURE__ */ React49.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6370,7 +6705,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React46.createElement(
+      onClickPlus && /* @__PURE__ */ React49.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6380,15 +6715,15 @@ var ArrayController = memo30(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React46.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React49.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React49.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React46.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React46.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React46.createElement(
+    indexes.map((index) => /* @__PURE__ */ React49.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React49.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React49.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6402,11 +6737,11 @@ var ArrayController = memo30(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React47, { memo as memo31, useCallback as useCallback27 } from "react";
+import React50, { memo as memo32, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo31(function DimensionInput2({
+var DimensionInput = memo32(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6424,7 +6759,7 @@ var DimensionInput = memo31(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React47.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React50.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React50.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -6433,7 +6768,7 @@ var DimensionInput = memo31(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React47.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React50.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,
@@ -6475,6 +6810,7 @@ export {
   InputElement,
   InputField,
   InputFieldWithCompletions,
+  InspectorContainer,
   InspectorPrimitives_exports as InspectorPrimitives,
   Italic,
   KeyboardShortcut,
@@ -6503,6 +6839,7 @@ export {
   ToastProvider,
   Tooltip,
   TreeView,
+  WorkspaceLayout,
   createSectionedMenu,
   dark_exports as darkTheme,
   fuzzyFilter,