@noya-app/noya-designsystem 0.1.28 → 0.1.30

package/.turbo/turbo-build.log

@@ -6,13 +6,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     597.93 KB
-CJS dist/index.js.map 1.07 MB
-CJS ⚡️ Build success in 115ms
-ESM dist/index.mjs     579.92 KB
+ESM dist/index.mjs     576.66 KB
 ESM dist/index.mjs.map 1.06 MB
-ESM ⚡️ Build success in 115ms
+ESM ⚡️ Build success in 279ms
+CJS dist/index.js     594.29 KB
+CJS dist/index.js.map 1.06 MB
+CJS ⚡️ Build success in 290ms
 DTS Build start
-DTS ⚡️ Build success in 9960ms
-DTS dist/index.d.ts  63.28 KB
-DTS dist/index.d.mts 63.28 KB
+DTS ⚡️ Build success in 13178ms
+DTS dist/index.d.ts  62.68 KB
+DTS dist/index.d.mts 62.68 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @noya-app/noya-designsystem
 
+## 0.1.30
+
+### Patch Changes
+
+- 94941e9: Added visual regression testing and JSDoc comments to design system component APIs
+
+## 0.1.29
+
+### Patch Changes
+
+- b022ce3: Improve standalone component usage. Don't save to localStorage by default
+
 ## 0.1.28
 
 ### Patch Changes

package/dist/index.d.mts

@@ -528,9 +528,11 @@ interface InputFieldRootProps {
     flex?: string;
     children?: ReactNode;
     width?: number;
+    /** @default end */
     labelPosition?: LabelPosition;
     labelSize?: number;
     hasDropdown?: boolean;
+    /** @default medium */
     size?: InputFieldSize;
     renderPopoverContent?: (options: {
         width: number;
@@ -661,6 +663,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     id?: string;
     tabIndex?: number;
     selected?: boolean;
+    /** @default 0 */
     depth?: number;
     disabled?: boolean;
     hovered?: boolean;
@@ -847,6 +850,7 @@ interface Props$b {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
+    /** @default primary */
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -995,6 +999,7 @@ type SwitchColorScheme = "normal" | "primary" | "secondary";
 interface Props$4 {
     value: boolean;
     onChange: (value: boolean) => void;
+    /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
 }
@@ -1379,27 +1384,6 @@ declare function sketchColorToRgbaString(value: Sketch.Color): string;
 declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
 declare function sketchColorToHex(value: Sketch.Color): string;
 
-interface ArrayControllerProps<Item> {
-    id: string;
-    items: Item[];
-    title: ReactNode;
-    sortable?: boolean;
-    reversed?: boolean;
-    expanded?: boolean;
-    getKey?: (item: Item) => string;
-    onMoveItem?: (sourceIndex: number, destinationIndex: number) => void;
-    onClickPlus?: () => void;
-    onClickTrash?: () => void;
-    onClickExpand?: () => void;
-    renderItem: (props: {
-        item: Item;
-        index: number;
-    }) => ReactNode;
-    renderExpandedContent?: () => ReactNode;
-    padding?: number;
-}
-declare const ArrayController: <Item>(props: ArrayControllerProps<Item>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
 type SetNumberMode = "replace" | "adjust";
 declare function getNewValue(value: number, mode: SetNumberMode, delta?: number): number;
 type DimensionValue = number | undefined;
@@ -1468,4 +1452,4 @@ declare module "react" {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
-export { ActivityIndicator, ArrayController, type ArrayControllerProps, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };

package/dist/index.d.ts

@@ -528,9 +528,11 @@ interface InputFieldRootProps {
     flex?: string;
     children?: ReactNode;
     width?: number;
+    /** @default end */
     labelPosition?: LabelPosition;
     labelSize?: number;
     hasDropdown?: boolean;
+    /** @default medium */
     size?: InputFieldSize;
     renderPopoverContent?: (options: {
         width: number;
@@ -661,6 +663,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     id?: string;
     tabIndex?: number;
     selected?: boolean;
+    /** @default 0 */
     depth?: number;
     disabled?: boolean;
     hovered?: boolean;
@@ -847,6 +850,7 @@ interface Props$b {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
+    /** @default primary */
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -995,6 +999,7 @@ type SwitchColorScheme = "normal" | "primary" | "secondary";
 interface Props$4 {
     value: boolean;
     onChange: (value: boolean) => void;
+    /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
 }
@@ -1379,27 +1384,6 @@ declare function sketchColorToRgbaString(value: Sketch.Color): string;
 declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
 declare function sketchColorToHex(value: Sketch.Color): string;
 
-interface ArrayControllerProps<Item> {
-    id: string;
-    items: Item[];
-    title: ReactNode;
-    sortable?: boolean;
-    reversed?: boolean;
-    expanded?: boolean;
-    getKey?: (item: Item) => string;
-    onMoveItem?: (sourceIndex: number, destinationIndex: number) => void;
-    onClickPlus?: () => void;
-    onClickTrash?: () => void;
-    onClickExpand?: () => void;
-    renderItem: (props: {
-        item: Item;
-        index: number;
-    }) => ReactNode;
-    renderExpandedContent?: () => ReactNode;
-    padding?: number;
-}
-declare const ArrayController: <Item>(props: ArrayControllerProps<Item>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
 type SetNumberMode = "replace" | "adjust";
 declare function getNewValue(value: number, mode: SetNumberMode, delta?: number): number;
 type DimensionValue = number | undefined;
@@ -1468,4 +1452,4 @@ declare module "react" {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 
-export { ActivityIndicator, ArrayController, type ArrayControllerProps, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };

package/dist/index.js

@@ -1416,7 +1416,6 @@ var require_slicedToArray = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
-  ArrayController: () => ArrayController,
   AutoResizingTextArea: () => AutoResizingTextArea,
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
@@ -5473,44 +5472,44 @@ var sizes2 = {
     gap: 32
   }
 };
-var Grid2 = import_styled_components24.default.div(({ theme, size: size3, padding }) => {
+var Grid2 = import_styled_components24.default.div(({ theme, $size, $padding }) => {
   return {
     color: theme.colors.text,
     display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes2[size3].itemWidth}px, 1fr))`,
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes2[$size].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes2[size3].gap}px`,
+    gap: `${sizes2[$size].gap}px`,
     // gridTemplateColumns: `repeat(auto-fill, minmax(
     //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
     // , 1fr))`,
     // gridAutoRows:
     //   size === 'large' ? '280px' : size === 'small' ? '170px' : '116px',
     // gap: size === 'large' || size === 'small' ? `20px` : `12px`,
-    padding
+    padding: $padding
   };
 });
 var Container3 = import_styled_components24.default.div(
-  ({ theme, scrollable }) => ({
-    flex: scrollable ? "1" : "0 0 auto",
+  ({ theme, $scrollable }) => ({
+    flex: $scrollable ? "1" : "0 0 auto",
     display: "flex",
     flexDirection: "column"
   })
 );
-var ContentContainer = import_styled_components24.default.div(({ theme, selected, hovered, bordered, disabled }) => ({
+var ContentContainer = import_styled_components24.default.div(({ theme, $selected, $hovered, $bordered, $disabled }) => ({
   display: "flex",
   flex: "1",
   backgroundColor: theme.colors.sidebar.background,
   alignItems: "center",
   justifyContent: "center",
   borderRadius: "2px",
-  border: `1px solid ${selected ? theme.colors.primary : (
+  border: `1px solid ${$selected ? theme.colors.primary : (
     // : hovered
     // ? `rgb(132, 63, 255, 0.5)`
-    bordered ? theme.colors.divider : "transparent"
+    $bordered ? theme.colors.divider : "transparent"
   )}`,
   overflow: "hidden",
   cursor: "pointer",
-  ...disabled ? { opacity: 0.5 } : {
+  ...$disabled ? { opacity: 0.5 } : {
     "&:hover": { opacity: 0.85 },
     "&:active": { opacity: 0.7 }
   }
@@ -5525,7 +5524,7 @@ var ItemContainer = import_styled_components24.default.div(({ theme }) => ({
   }
 }));
 var ItemTitle = import_styled_components24.default.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     lineHeight: "1",
     color: theme.colors.text,
@@ -5534,7 +5533,7 @@ var ItemTitle = import_styled_components24.default.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5544,7 +5543,7 @@ var ItemTitle = import_styled_components24.default.span(
   })
 );
 var ItemDescription = import_styled_components24.default.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     fontSize: "0.7rem",
     lineHeight: "1",
@@ -5553,7 +5552,7 @@ var ItemDescription = import_styled_components24.default.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5674,10 +5673,10 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     /* @__PURE__ */ import_react48.default.createElement(
       ContentContainer,
       {
-        disabled,
-        bordered,
-        selected,
-        hovered: !disabled && hovered,
+        $disabled: disabled,
+        $bordered: bordered,
+        $selected: selected,
+        $hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
@@ -5685,8 +5684,8 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
       },
       children2
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: false }, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: true }, subtitle)),
     loading && /* @__PURE__ */ import_react48.default.createElement(Shimmer, null, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
@@ -5696,7 +5695,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     element = /* @__PURE__ */ import_react48.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react48.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react48.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: false }, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: false }, subtitle))
       },
       element
     );
@@ -5735,14 +5734,14 @@ function GridViewRoot({
     }),
     [bordered, disabled, size3, textPosition]
   );
-  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children2) : children2));
+  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement(Container3, { onClick: handleClick, $scrollable: scrollable }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children2) : children2));
 }
 function GridViewSection({
   children: children2,
   padding = "20px"
 }) {
   const { size: size3 } = (0, import_react48.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react48.default.createElement(Grid2, { size: size3, padding }, children2);
+  return /* @__PURE__ */ import_react48.default.createElement(Grid2, { $size: size3, $padding: padding }, children2);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
@@ -5819,14 +5818,14 @@ function mergeRanges(ranges) {
   const merged = [];
   const sorted = [...ranges].sort((a, b) => a.start - b.start);
   let current;
-  for (const range3 of sorted) {
+  for (const range2 of sorted) {
     if (!current) {
-      current = range3;
-    } else if (range3.start <= current.end) {
-      current.end = Math.max(current.end, range3.end);
+      current = range2;
+    } else if (range2.start <= current.end) {
+      current.end = Math.max(current.end, range2.end);
     } else {
       merged.push(current);
-      current = range3;
+      current = range2;
     }
   }
   if (current) {
@@ -10467,7 +10466,7 @@ var PositionCache = /* @__PURE__ */ function() {
     // Render all cells visible within the viewport range defined.
   }, {
     key: "range",
-    value: function range3(scrollTop, clientHeight, renderCallback) {
+    value: function range2(scrollTop, clientHeight, renderCallback) {
       var _this = this;
       this._intervalTree.queryInterval(scrollTop, scrollTop + clientHeight, function(_ref) {
         var _ref2 = (0, import_slicedToArray.default)(_ref, 3), top = _ref2[0], _ = _ref2[1], index = _ref2[2];
@@ -15141,7 +15140,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react66.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function WorkspaceLayoutWithTheme2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -15322,6 +15321,9 @@ var WorkspaceLayout = (0, import_react66.forwardRef)(function WorkspaceLayout2({
     )
   );
 });
+var WorkspaceLayout = (0, import_react66.forwardRef)(function WorkspaceLayout2(props, forwardedRef) {
+  return /* @__PURE__ */ import_react66.default.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ import_react66.default.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef }));
+});
 
 // src/hooks/usePlatform.ts
 function usePlatform() {
@@ -15363,10 +15365,41 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
   ""
 ];
 
-// src/components/ArrayController.tsx
+// src/components/DimensionInput.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react68 = __toESM(require("react"));
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_react67 = __toESM(require("react"));
+function getNewValue(value, mode, delta) {
+  return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
+}
+var DimensionInput = (0, import_react67.memo)(function DimensionInput2({
+  id,
+  value,
+  onSetValue,
+  label,
+  size: size3,
+  placeholder = "multi",
+  disabled,
+  trigger = "submit"
+}) {
+  const handleNudgeValue = (0, import_react67.useCallback)(
+    (value2) => onSetValue(value2, "adjust"),
+    [onSetValue]
+  );
+  const handleSetValue = (0, import_react67.useCallback)(
+    (value2) => onSetValue(value2, "replace"),
+    [onSetValue]
+  );
+  return /* @__PURE__ */ import_react67.default.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ import_react67.default.createElement(
+    InputField.NumberInput,
+    {
+      value: value === void 0 ? value : (0, import_noya_utils11.round)(value, 2),
+      placeholder: value === void 0 ? placeholder : void 0,
+      onNudge: handleNudgeValue,
+      disabled,
+      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
+    }
+  ), label && /* @__PURE__ */ import_react67.default.createElement(InputField.Label, null, label));
+});
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -15384,7 +15417,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_styled_components37 = __toESM(require("styled-components"));
 var Section2 = import_styled_components37.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -15431,8 +15464,8 @@ var Checkbox = import_styled_components37.default.input(({ theme }) => ({
 var Text3 = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Vertical, { size: (0, import_styled_components37.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components37.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react68.default.createElement(Spacer.Vertical, { size: (0, import_styled_components37.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components37.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -15452,7 +15485,7 @@ var RowLabel = import_styled_components37.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react68.memo)(function LabeledRow2({
   id,
   children: children2,
   label,
@@ -15460,156 +15493,17 @@ var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react67.default.createElement(Row2, { id }, /* @__PURE__ */ import_react67.default.createElement(Column2, null, /* @__PURE__ */ import_react67.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react67.default.createElement(Row2, { $gap: gap }, children2)));
+  return /* @__PURE__ */ import_react68.default.createElement(Row2, { id }, /* @__PURE__ */ import_react68.default.createElement(Column2, null, /* @__PURE__ */ import_react68.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react68.default.createElement(Row2, { $gap: gap }, children2)));
 });
-var LabeledSliderRow = (0, import_react67.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react68.memo)(function LabeledRow3({
   children: children2,
   label
 }) {
-  return /* @__PURE__ */ import_react67.default.createElement(Row2, null, /* @__PURE__ */ import_react67.default.createElement(Column2, null, /* @__PURE__ */ import_react67.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react67.default.createElement(Row2, null, children2)));
-});
-
-// src/components/ArrayController.tsx
-var ElementRow = import_styled_components38.default.div({
-  flex: "0 0 auto",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center"
-});
-var ItemContainer2 = import_styled_components38.default.div({
-  position: "relative"
-});
-var ArrayController = (0, import_react68.memo)(function ArrayController2({
-  id,
-  items,
-  title,
-  sortable = false,
-  reversed = true,
-  expanded = false,
-  getKey,
-  onMoveItem,
-  onClickPlus,
-  onClickTrash,
-  onClickExpand,
-  renderItem,
-  renderExpandedContent,
-  padding = 10
-}) {
-  const iconColor = (0, import_styled_components38.useTheme)().colors.icon;
-  const primaryLightColor = (0, import_styled_components38.useTheme)().colors.primaryLight;
-  const keys = (0, import_react68.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_react68.useCallback)(
-    (sourceIndex, destinationIndex, position) => {
-      if (reversed) {
-        if (position === "above") {
-          position = "below";
-        } else if (position === "below") {
-          position = "above";
-        }
-      }
-      onMoveItem?.(
-        sourceIndex,
-        position === "below" ? destinationIndex + 1 : destinationIndex
-      );
-    },
-    [onMoveItem, reversed]
-  );
-  const renderRow = (index) => {
-    return /* @__PURE__ */ import_react68.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
-  };
-  return /* @__PURE__ */ import_react68.default.createElement(Section2, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react68.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react68.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react68.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
-    [
-      onClickTrash && /* @__PURE__ */ import_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-trash`,
-          iconName: "TrashIcon",
-          color: iconColor,
-          onClick: onClickTrash
-        }
-      ),
-      onClickExpand && /* @__PURE__ */ import_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-gear`,
-          iconName: "GearIcon",
-          color: expanded ? primaryLightColor : iconColor,
-          onClick: onClickExpand
-        }
-      ),
-      onClickPlus && /* @__PURE__ */ import_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-add`,
-          iconName: "PlusIcon",
-          color: iconColor,
-          onClick: onClickPlus
-        }
-      )
-    ],
-    /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react68.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react68.default.createElement(
-    Sortable.Root,
-    {
-      keys,
-      renderOverlay: renderRow,
-      onMoveItem: handleMoveItem
-    },
-    indexes.map((index) => /* @__PURE__ */ import_react68.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react68.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react68.default.createElement(
-      ListView.DragIndicator,
-      {
-        $gap: 0,
-        $colorScheme: "primary",
-        $relativeDropPosition: relativeDropPosition,
-        $offsetLeft: 0
-      }
-    ))))
-  ) : indexes.map(renderRow)), expanded && renderExpandedContent?.());
-});
-
-// src/components/DimensionInput.tsx
-var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react69 = __toESM(require("react"));
-function getNewValue(value, mode, delta) {
-  return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
-}
-var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
-  id,
-  value,
-  onSetValue,
-  label,
-  size: size3,
-  placeholder = "multi",
-  disabled,
-  trigger = "submit"
-}) {
-  const handleNudgeValue = (0, import_react69.useCallback)(
-    (value2) => onSetValue(value2, "adjust"),
-    [onSetValue]
-  );
-  const handleSetValue = (0, import_react69.useCallback)(
-    (value2) => onSetValue(value2, "replace"),
-    [onSetValue]
-  );
-  return /* @__PURE__ */ import_react69.default.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ import_react69.default.createElement(
-    InputField.NumberInput,
-    {
-      value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
-      placeholder: value === void 0 ? placeholder : void 0,
-      onNudge: handleNudgeValue,
-      disabled,
-      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
-    }
-  ), label && /* @__PURE__ */ import_react69.default.createElement(InputField.Label, null, label));
+  return /* @__PURE__ */ import_react68.default.createElement(Row2, null, /* @__PURE__ */ import_react68.default.createElement(Column2, null, /* @__PURE__ */ import_react68.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react68.default.createElement(Row2, null, children2)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
-  ArrayController,
   AutoResizingTextArea,
   Avatar,
   AvatarStack,