@noya-app/noya-designsystem 0.1.29 → 0.1.30

package/dist/index.mjs

@@ -5446,44 +5446,44 @@ var sizes2 = {
     gap: 32
   }
 };
-var Grid2 = styled22.div(({ theme, size: size3, padding }) => {
+var Grid2 = styled22.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 = styled22.div(
-  ({ theme, scrollable }) => ({
-    flex: scrollable ? "1" : "0 0 auto",
+  ({ theme, $scrollable }) => ({
+    flex: $scrollable ? "1" : "0 0 auto",
     display: "flex",
     flexDirection: "column"
   })
 );
-var ContentContainer = styled22.div(({ theme, selected, hovered, bordered, disabled }) => ({
+var ContentContainer = styled22.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 }
   }
@@ -5498,7 +5498,7 @@ var ItemContainer = styled22.div(({ theme }) => ({
   }
 }));
 var ItemTitle = styled22.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     lineHeight: "1",
     color: theme.colors.text,
@@ -5507,7 +5507,7 @@ var ItemTitle = styled22.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5517,7 +5517,7 @@ var ItemTitle = styled22.span(
   })
 );
 var ItemDescription = styled22.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     fontSize: "0.7rem",
     lineHeight: "1",
@@ -5526,7 +5526,7 @@ var ItemDescription = styled22.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5647,10 +5647,10 @@ var GridViewItem = forwardRef12(function GridViewItem2({
     /* @__PURE__ */ React33.createElement(
       ContentContainer,
       {
-        disabled,
-        bordered,
-        selected,
-        hovered: !disabled && hovered,
+        $disabled: disabled,
+        $bordered: bordered,
+        $selected: selected,
+        $hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
@@ -5658,8 +5658,8 @@ var GridViewItem = forwardRef12(function GridViewItem2({
       },
       children2
     ),
-    textPosition === "below" && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React33.createElement(TextOverlay, null, title && /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    textPosition === "below" && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React33.createElement(ItemTitle, { $showBackground: false }, title || " "), /* @__PURE__ */ React33.createElement(ItemDescription, { $showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React33.createElement(TextOverlay, null, title && /* @__PURE__ */ React33.createElement(ItemTitle, { $showBackground: true }, title), subtitle && /* @__PURE__ */ React33.createElement(ItemDescription, { $showBackground: true }, subtitle)),
     loading && /* @__PURE__ */ React33.createElement(Shimmer, null, /* @__PURE__ */ React33.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
@@ -5669,7 +5669,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
     element = /* @__PURE__ */ React33.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React33.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ React33.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React33.createElement(ItemTitle, { $showBackground: false }, title), /* @__PURE__ */ React33.createElement(ItemDescription, { $showBackground: false }, subtitle))
       },
       element
     );
@@ -5708,14 +5708,14 @@ function GridViewRoot({
     }),
     [bordered, disabled, size3, textPosition]
   );
-  return /* @__PURE__ */ React33.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React33.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children2) : children2));
+  return /* @__PURE__ */ React33.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React33.createElement(Container3, { onClick: handleClick, $scrollable: scrollable }, scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children2) : children2));
 }
 function GridViewSection({
   children: children2,
   padding = "20px"
 }) {
   const { size: size3 } = useContext7(GridViewContext);
-  return /* @__PURE__ */ React33.createElement(Grid2, { size: size3, padding }, children2);
+  return /* @__PURE__ */ React33.createElement(Grid2, { $size: size3, $padding: padding }, children2);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
@@ -5802,14 +5802,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) {
@@ -10462,7 +10462,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];
@@ -15048,7 +15048,7 @@ var TreeView;
 
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React71, { forwardRef as forwardRef20, memo as memo32, useImperativeHandle as useImperativeHandle4, useRef as useRef22 } from "react";
+import React71, { forwardRef as forwardRef20, useImperativeHandle as useImperativeHandle4, useRef as useRef22 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -15370,8 +15370,8 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
     )
   );
 });
-var WorkspaceLayout = memo32(function WorkspaceLayout2(props) {
-  return /* @__PURE__ */ React71.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ React71.createElement(WorkspaceLayoutWithTheme, { ...props }));
+var WorkspaceLayout = forwardRef20(function WorkspaceLayout2(props, forwardedRef) {
+  return /* @__PURE__ */ React71.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ React71.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef }));
 });
 
 // src/hooks/usePlatform.ts
@@ -15414,10 +15414,41 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
   ""
 ];
 
-// src/components/ArrayController.tsx
-import { range as range2 } from "@noya-app/noya-utils";
-import React73, { memo as memo34, useCallback as useCallback27, useMemo as useMemo24 } from "react";
-import styled36, { useTheme as useTheme5 } from "styled-components";
+// src/components/DimensionInput.tsx
+import { round } from "@noya-app/noya-utils";
+import React72, { 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 = memo32(function DimensionInput2({
+  id,
+  value,
+  onSetValue,
+  label,
+  size: size3,
+  placeholder = "multi",
+  disabled,
+  trigger = "submit"
+}) {
+  const handleNudgeValue = useCallback27(
+    (value2) => onSetValue(value2, "adjust"),
+    [onSetValue]
+  );
+  const handleSetValue = useCallback27(
+    (value2) => onSetValue(value2, "replace"),
+    [onSetValue]
+  );
+  return /* @__PURE__ */ React72.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React72.createElement(
+    InputField.NumberInput,
+    {
+      value: value === void 0 ? value : round(value, 2),
+      placeholder: value === void 0 ? placeholder : void 0,
+      onNudge: handleNudgeValue,
+      disabled,
+      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
+    }
+  ), label && /* @__PURE__ */ React72.createElement(InputField.Label, null, label));
+});
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -15435,7 +15466,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React72, { memo as memo33 } from "react";
+import React73, { memo as memo33 } from "react";
 import styled35, { useTheme as useTheme4 } from "styled-components";
 var Section2 = styled35.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -15482,8 +15513,8 @@ var Checkbox = styled35.input(({ theme }) => ({
 var Text3 = styled35.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ React73.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React73.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = styled35.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -15511,155 +15542,16 @@ var LabeledRow = memo33(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React72.createElement(Row2, { id }, /* @__PURE__ */ React72.createElement(Column2, null, /* @__PURE__ */ React72.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React72.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React72.createElement(Row2, { $gap: gap }, children2)));
+  return /* @__PURE__ */ React73.createElement(Row2, { id }, /* @__PURE__ */ React73.createElement(Column2, null, /* @__PURE__ */ React73.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React73.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React73.createElement(Row2, { $gap: gap }, children2)));
 });
 var LabeledSliderRow = memo33(function LabeledRow3({
   children: children2,
   label
 }) {
-  return /* @__PURE__ */ React72.createElement(Row2, null, /* @__PURE__ */ React72.createElement(Column2, null, /* @__PURE__ */ React72.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React72.createElement(Row2, null, children2)));
-});
-
-// src/components/ArrayController.tsx
-var ElementRow = styled36.div({
-  flex: "0 0 auto",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center"
-});
-var ItemContainer2 = styled36.div({
-  position: "relative"
-});
-var ArrayController = memo34(function ArrayController2({
-  id,
-  items,
-  title,
-  sortable = false,
-  reversed = true,
-  expanded = false,
-  getKey,
-  onMoveItem,
-  onClickPlus,
-  onClickTrash,
-  onClickExpand,
-  renderItem,
-  renderExpandedContent,
-  padding = 10
-}) {
-  const iconColor = useTheme5().colors.icon;
-  const primaryLightColor = useTheme5().colors.primaryLight;
-  const keys = useMemo24(
-    () => items.map((item, index) => getKey?.(item) ?? index.toString()),
-    [getKey, items]
-  );
-  const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
-  const handleMoveItem = useCallback27(
-    (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__ */ React73.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
-  };
-  return /* @__PURE__ */ React73.createElement(Section2, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React73.createElement(SectionHeader, null, /* @__PURE__ */ React73.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React73.createElement(Title3, null, title)), /* @__PURE__ */ React73.createElement(Spacer.Horizontal, null), withSeparatorElements(
-    [
-      onClickTrash && /* @__PURE__ */ React73.createElement(
-        IconButton,
-        {
-          id: `${id}-trash`,
-          iconName: "TrashIcon",
-          color: iconColor,
-          onClick: onClickTrash
-        }
-      ),
-      onClickExpand && /* @__PURE__ */ React73.createElement(
-        IconButton,
-        {
-          id: `${id}-gear`,
-          iconName: "GearIcon",
-          color: expanded ? primaryLightColor : iconColor,
-          onClick: onClickExpand
-        }
-      ),
-      onClickPlus && /* @__PURE__ */ React73.createElement(
-        IconButton,
-        {
-          id: `${id}-add`,
-          iconName: "PlusIcon",
-          color: iconColor,
-          onClick: onClickPlus
-        }
-      )
-    ],
-    /* @__PURE__ */ React73.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React73.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React73.createElement(
-    Sortable.Root,
-    {
-      keys,
-      renderOverlay: renderRow,
-      onMoveItem: handleMoveItem
-    },
-    indexes.map((index) => /* @__PURE__ */ React73.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React73.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React73.createElement(
-      ListView.DragIndicator,
-      {
-        $gap: 0,
-        $colorScheme: "primary",
-        $relativeDropPosition: relativeDropPosition,
-        $offsetLeft: 0
-      }
-    ))))
-  ) : indexes.map(renderRow)), expanded && renderExpandedContent?.());
-});
-
-// src/components/DimensionInput.tsx
-import { round } from "@noya-app/noya-utils";
-import React74, { memo as memo35, useCallback as useCallback28 } from "react";
-function getNewValue(value, mode, delta) {
-  return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
-}
-var DimensionInput = memo35(function DimensionInput2({
-  id,
-  value,
-  onSetValue,
-  label,
-  size: size3,
-  placeholder = "multi",
-  disabled,
-  trigger = "submit"
-}) {
-  const handleNudgeValue = useCallback28(
-    (value2) => onSetValue(value2, "adjust"),
-    [onSetValue]
-  );
-  const handleSetValue = useCallback28(
-    (value2) => onSetValue(value2, "replace"),
-    [onSetValue]
-  );
-  return /* @__PURE__ */ React74.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React74.createElement(
-    InputField.NumberInput,
-    {
-      value: value === void 0 ? value : round(value, 2),
-      placeholder: value === void 0 ? placeholder : void 0,
-      onNudge: handleNudgeValue,
-      disabled,
-      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
-    }
-  ), label && /* @__PURE__ */ React74.createElement(InputField.Label, null, label));
+  return /* @__PURE__ */ React73.createElement(Row2, null, /* @__PURE__ */ React73.createElement(Column2, null, /* @__PURE__ */ React73.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React73.createElement(Row2, null, children2)));
 });
 export {
   ActivityIndicator,
-  ArrayController,
   AutoResizingTextArea,
   Avatar,
   AvatarStack,