entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/PropertyInspector/PropertyRow.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
+import { useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -34,6 +33,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -89,9 +89,16 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import { cx } from '../../../utils/cx.js';
 import { usePropertyPanelContext } from './PropertyPanel.js';
-import { modifiedDot, controlRatioVar, splitRatioVar, fullWidthLabel, fullWidthControl, rowLabel, rowControl, resetButton, RESET_BUTTON_CLASS, rowRoot } from './PropertyRow.css.js';
+import { modifiedDot, labelTooltipTarget, controlRatioVar, splitRatioVar, fullWidthLabel, fullWidthControl, rowLabel, rowControl, resetButton, RESET_BUTTON_CLASS, rowRoot } from './PropertyRow.css.js';
 
 const ROW_SIZE_MAP = {
     sm: {
@@ -110,18 +117,25 @@ const ROW_SIZE_MAP = {
         resetIconSize: 14,
     },
 };
+const DENSITY_MAP = {
+    compact: { minHeightDelta: -4, paddingBlock: 0 },
+    normal: { minHeightDelta: 0, paddingBlock: 2 },
+    spacious: { minHeightDelta: 6, paddingBlock: 5 },
+};
 // --- Component ---
 const PropertyRow = ({ label, tooltip, children, fullWidth = false, splitRatio = [40, 60], modified = false, disabled = false, visible = true, size: sizeProp, action, onLabelContextMenu, onReset, className, style, testId, ref, ...rest }) => {
     const panelCtx = usePropertyPanelContext();
     const size = sizeProp ?? panelCtx?.size ?? 'md';
     const sizeConfig = ROW_SIZE_MAP[size];
+    const densityConfig = DENSITY_MAP[panelCtx?.density ?? 'normal'];
+    const rowMinHeight = sizeConfig.minHeight + densityConfig.minHeightDelta;
     const handleResetClick = useCallback((e) => {
         e.stopPropagation();
         onReset?.();
     }, [onReset]);
     const modifiedDotEl = modified ? (jsx("span", { className: modifiedDot, "aria-label": "Modified", "data-testid": "modified-dot" })) : null;
     const labelText = jsx("span", { children: label });
-    const labelElement = tooltip ? (jsx(Tooltip, { title: tooltip, children: jsxs("span", { style: { display: 'contents' }, children: [modifiedDotEl, labelText] }) })) : (jsxs(Fragment, { children: [modifiedDotEl, labelText] }));
+    const labelElement = tooltip ? (jsx(Tooltip, { title: tooltip, children: jsxs("span", { className: labelTooltipTarget, children: [modifiedDotEl, labelText] }) })) : (jsxs(Fragment, { children: [modifiedDotEl, labelText] }));
     const inlineVars = assignInlineVars({
         [splitRatioVar]: `${splitRatio[0]}%`,
         [controlRatioVar]: `${splitRatio[1]}%`,
@@ -132,7 +146,9 @@ const PropertyRow = ({ label, tooltip, children, fullWidth = false, splitRatio =
             display: visible ? 'flex' : 'none',
             flexDirection: fullWidth ? 'column' : 'row',
             alignItems: fullWidth ? 'stretch' : 'center',
-            minHeight: `${sizeConfig.minHeight}px`,
+            minHeight: `${rowMinHeight}px`,
+            paddingTop: `${densityConfig.paddingBlock}px`,
+            paddingBottom: `${densityConfig.paddingBlock}px`,
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         }, "data-testid": testId, ...rest, children: [fullWidth ? (jsxs(Fragment, { children: [jsx("div", { className: fullWidthLabel, onContextMenu: onLabelContextMenu, style: {

package/dist/esm/components/editor/PropertyInspector/PropertyRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyRow.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyRow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;AAEO;AAoBL;;AAEA;AAEA;;;AAIE;;AAYF;AAEA;;;;AAiBC;AAED;AAKM;AACA;;;;AAIA;;;;;AAcM;AACE;AACA;;;AAcF;AACE;AACA;;AAmBJ;;AAEE;;AAEJ;AAQV;AAEA;;"}
+{"version":3,"file":"PropertyRow.js","sources":["src/components/editor/PropertyInspector/PropertyRow.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback } from 'react';\n\nimport { UndoIcon } from '@/components/Icons';\nimport { Tooltip } from '@/components/primitives/Tooltip';\nimport { cx } from '@/utils/cx';\n\nimport { usePropertyPanelContext } from './PropertyPanel';\nimport {\n  RESET_BUTTON_CLASS,\n  splitRatioVar,\n  controlRatioVar,\n  rowRoot,\n  rowLabel,\n  fullWidthLabel,\n  labelTooltipTarget,\n  modifiedDot,\n  rowControl,\n  fullWidthControl,\n  resetButton,\n} from './PropertyRow.css';\n\nimport type {\n  PropertyDensity,\n  PropertyInspectorSize,\n  PropertyRowProps,\n} from './PropertyInspector.types';\n\n// --- Size maps ---\n\ninterface RowSizeConfig {\n  minHeight: number;\n  fontSize: string;\n  resetIconSize: number;\n}\n\nconst ROW_SIZE_MAP: Record<PropertyInspectorSize, RowSizeConfig> = {\n  sm: {\n    minHeight: 22,\n    fontSize: 'var(--etui-font-size-md)',\n    resetIconSize: 10,\n  },\n  md: {\n    minHeight: 26,\n    fontSize: 'var(--etui-font-size-md)',\n    resetIconSize: 12,\n  },\n  lg: {\n    minHeight: 30,\n    fontSize: 'var(--etui-font-size-lg)',\n    resetIconSize: 14,\n  },\n};\n\n// --- Density maps ---\n\ninterface DensityConfig {\n  /** Adjustment applied to the size-based min-height (px). */\n  minHeightDelta: number;\n  /** Vertical padding above/below the row content (px). */\n  paddingBlock: number;\n}\n\nconst DENSITY_MAP: Record<PropertyDensity, DensityConfig> = {\n  compact: { minHeightDelta: -4, paddingBlock: 0 },\n  normal: { minHeightDelta: 0, paddingBlock: 2 },\n  spacious: { minHeightDelta: 6, paddingBlock: 5 },\n};\n\n// --- Component ---\n\nexport const PropertyRow: React.FC<PropertyRowProps> = ({\n  label,\n  tooltip,\n  children,\n  fullWidth = false,\n  splitRatio = [40, 60],\n  modified = false,\n  disabled = false,\n  visible = true,\n  size: sizeProp,\n  action,\n  onLabelContextMenu,\n  onReset,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const panelCtx = usePropertyPanelContext();\n  const size = sizeProp ?? panelCtx?.size ?? 'md';\n  const sizeConfig = ROW_SIZE_MAP[size];\n  const densityConfig = DENSITY_MAP[panelCtx?.density ?? 'normal'];\n  const rowMinHeight = sizeConfig.minHeight + densityConfig.minHeightDelta;\n\n  const handleResetClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onReset?.();\n    },\n    [onReset]\n  );\n\n  const modifiedDotEl = modified ? (\n    <span\n      className={modifiedDot}\n      aria-label=\"Modified\"\n      data-testid=\"modified-dot\"\n    />\n  ) : null;\n\n  const labelText = <span>{label}</span>;\n\n  const labelElement = tooltip ? (\n    <Tooltip title={tooltip}>\n      <span className={labelTooltipTarget}>\n        {modifiedDotEl}\n        {labelText}\n      </span>\n    </Tooltip>\n  ) : (\n    <>\n      {modifiedDotEl}\n      {labelText}\n    </>\n  );\n\n  const inlineVars = assignInlineVars({\n    [splitRatioVar]: `${splitRatio[0]}%`,\n    [controlRatioVar]: `${splitRatio[1]}%`,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={cx(rowRoot, className)}\n      style={{\n        ...style,\n        ...inlineVars,\n        display: visible ? 'flex' : 'none',\n        flexDirection: fullWidth ? 'column' : 'row',\n        alignItems: fullWidth ? 'stretch' : 'center',\n        minHeight: `${rowMinHeight}px`,\n        paddingTop: `${densityConfig.paddingBlock}px`,\n        paddingBottom: `${densityConfig.paddingBlock}px`,\n        opacity: disabled ? 0.5 : 1,\n        pointerEvents: disabled ? 'none' : 'auto',\n      }}\n      data-testid={testId}\n      {...rest}\n    >\n      {fullWidth ? (\n        <>\n          <div\n            className={fullWidthLabel}\n            onContextMenu={onLabelContextMenu}\n            style={{\n              fontSize: sizeConfig.fontSize,\n              fontWeight: modified\n                ? 'var(--etui-font-weight-medium)'\n                : 'var(--etui-font-weight-normal)',\n            }}\n          >\n            {labelElement}\n          </div>\n          <div className={fullWidthControl}>{children}</div>\n        </>\n      ) : (\n        <>\n          <div\n            className={rowLabel}\n            onContextMenu={onLabelContextMenu}\n            style={{\n              fontSize: sizeConfig.fontSize,\n              fontWeight: modified\n                ? 'var(--etui-font-weight-medium)'\n                : 'var(--etui-font-weight-normal)',\n            }}\n          >\n            {labelElement}\n          </div>\n          <div className={rowControl}>{children}</div>\n        </>\n      )}\n\n      {action}\n\n      {onReset && (\n        <span\n          className={cx(RESET_BUTTON_CLASS, resetButton)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Reset to default\"\n          onClick={handleResetClick}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              onReset();\n            }\n          }}\n          data-testid=\"reset-button\"\n        >\n          <UndoIcon size={sizeConfig.resetIconSize} decorative />\n        </span>\n      )}\n    </div>\n  );\n};\n\nPropertyRow.displayName = 'PropertyRow';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAYH;;;;;AAMA;AAEO;AAoBL;;AAEA;;;AAIA;;;AAIE;;AAYF;AAEA;;;;AAiBC;AAED;AAKM;AACA;;;;;AAKA;AACA;;;;;AAcM;AACE;AACA;;;AAcF;AACE;AACA;;AAmBJ;;AAEE;;AAEJ;AAQV;AAEA;;"}

package/dist/esm/components/editor/PropertyInspector/PropertySection.css.js

@@ -1,15 +1,16 @@
-import './../../../assets/src/components/editor/PropertyInspector/PropertySection.css.ts.vanilla-DK12opZc.css';
+import './../../../assets/src/components/editor/PropertyInspector/PropertySection.css.ts.vanilla-6MWWAqyd.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var actionsArea = 'PropertySection_actionsArea__1xiu0w6d';
-var chevron = 'PropertySection_chevron__1xiu0w69';
-var chevronExpanded = 'PropertySection_chevronExpanded__1xiu0w6a';
-var contentInner = 'PropertySection_contentInner__1xiu0w6h';
-var contentWrapper = createRuntimeFn({defaultClassName:'PropertySection_contentWrapper__1xiu0w6e',variantClassNames:{expanded:{true:'PropertySection_contentWrapper_expanded_true__1xiu0w6f',false:'PropertySection_contentWrapper_expanded_false__1xiu0w6g'}},defaultVariants:{expanded:false},compoundVariants:[]});
-var iconArea = 'PropertySection_iconArea__1xiu0w6b';
-var sectionLabel = 'PropertySection_sectionLabel__1xiu0w6c';
+var chevron = 'PropertySection_chevron__1xiu0w6f';
+var chevronExpanded = 'PropertySection_chevronExpanded__1xiu0w6g';
+var contentInner = 'PropertySection_contentInner__1xiu0w6n';
+var contentWrapper = createRuntimeFn({defaultClassName:'PropertySection_contentWrapper__1xiu0w6k',variantClassNames:{expanded:{true:'PropertySection_contentWrapper_expanded_true__1xiu0w6l',false:'PropertySection_contentWrapper_expanded_false__1xiu0w6m'}},defaultVariants:{expanded:false},compoundVariants:[]});
+var headerControls = 'PropertySection_headerControls__1xiu0w6j';
+var iconArea = 'PropertySection_iconArea__1xiu0w6h';
+var sectionHeader = createRuntimeFn({defaultClassName:'PropertySection_sectionHeader__1xiu0w61',variantClassNames:{size:{sm:'PropertySection_sectionHeader_size_sm__1xiu0w62',md:'PropertySection_sectionHeader_size_md__1xiu0w63',lg:'PropertySection_sectionHeader_size_lg__1xiu0w64'},disabled:{true:'PropertySection_sectionHeader_disabled_true__1xiu0w65',false:'PropertySection_sectionHeader_disabled_false__1xiu0w66'},expanded:{true:'PropertySection_sectionHeader_expanded_true__1xiu0w67',false:'PropertySection_sectionHeader_expanded_false__1xiu0w68'}},defaultVariants:{size:'md',disabled:false,expanded:false},compoundVariants:[]});
+var sectionLabel = 'PropertySection_sectionLabel__1xiu0w6i';
 var sectionRoot = 'PropertySection_sectionRoot__1xiu0w60';
-var sectionTrigger = createRuntimeFn({defaultClassName:'PropertySection_sectionTrigger__1xiu0w61',variantClassNames:{size:{sm:'PropertySection_sectionTrigger_size_sm__1xiu0w62',md:'PropertySection_sectionTrigger_size_md__1xiu0w63',lg:'PropertySection_sectionTrigger_size_lg__1xiu0w64'},disabled:{true:'PropertySection_sectionTrigger_disabled_true__1xiu0w65',false:'PropertySection_sectionTrigger_disabled_false__1xiu0w66'},expanded:{true:'PropertySection_sectionTrigger_expanded_true__1xiu0w67',false:'PropertySection_sectionTrigger_expanded_false__1xiu0w68'}},defaultVariants:{size:'md',disabled:false,expanded:false},compoundVariants:[]});
+var sectionTrigger = createRuntimeFn({defaultClassName:'PropertySection_sectionTrigger__1xiu0w69',variantClassNames:{size:{sm:'PropertySection_sectionTrigger_size_sm__1xiu0w6a',md:'PropertySection_sectionTrigger_size_md__1xiu0w6b',lg:'PropertySection_sectionTrigger_size_lg__1xiu0w6c'},disabled:{true:'PropertySection_sectionTrigger_disabled_true__1xiu0w6d',false:'PropertySection_sectionTrigger_disabled_false__1xiu0w6e'}},defaultVariants:{size:'md',disabled:false},compoundVariants:[]});
 
-export { actionsArea, chevron, chevronExpanded, contentInner, contentWrapper, iconArea, sectionLabel, sectionRoot, sectionTrigger };
+export { chevron, chevronExpanded, contentInner, contentWrapper, headerControls, iconArea, sectionHeader, sectionLabel, sectionRoot, sectionTrigger };
 //# sourceMappingURL=PropertySection.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertySection.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertySection.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"PropertySection.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/editor/PropertyInspector/PropertySection.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useState, useCallback } from 'react';
-import { cx } from '../../../utils/cx.js';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -33,6 +32,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -88,8 +88,16 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { Switch } from '../../primitives/Switch/Switch.js';
+import { cx } from '../../../utils/cx.js';
 import { usePropertyPanelContext } from './PropertyPanel.js';
-import { chevronExpanded, chevron, iconArea, sectionLabel, actionsArea, sectionTrigger, contentInner, contentWrapper, sectionRoot } from './PropertySection.css.js';
+import { chevronExpanded, chevron, iconArea, sectionLabel, sectionTrigger, headerControls, sectionHeader, contentInner, contentWrapper, sectionRoot } from './PropertySection.css.js';
 
 const TRIGGER_SIZE_MAP = {
     sm: { chevronSize: 10 },
@@ -97,7 +105,7 @@ const TRIGGER_SIZE_MAP = {
     lg: { chevronSize: 14 },
 };
 // --- Component ---
-const PropertySection = ({ title, icon, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, keepMounted = false, disabled = false, size: sizeProp, indicator, onContextMenu, children, className, style, testId, ref, ...rest }) => {
+const PropertySection = ({ title, icon, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, keepMounted = false, disabled = false, checkable = false, checked: checkedProp, defaultChecked = true, onCheckedChange, checkLabel, size: sizeProp, indicator, onContextMenu, children, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const triggerId = `property-section-${autoId}-trigger`;
     const contentId = `property-section-${autoId}-content`;
@@ -107,6 +115,11 @@ const PropertySection = ({ title, icon, actions, expanded: expandedProp, default
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     const isControlled = expandedProp !== undefined;
     const resolvedExpanded = isControlled ? expandedProp : internalExpanded;
+    // Enable/disable toggle state (controlled or uncontrolled), mirroring the
+    // expanded-state bridge above. Independent of the collapse state.
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isCheckedControlled = checkedProp !== undefined;
+    const resolvedChecked = isCheckedControlled ? checkedProp : internalChecked;
     const handleToggle = useCallback(() => {
         if (disabled)
             return;
@@ -116,18 +129,26 @@ const PropertySection = ({ title, icon, actions, expanded: expandedProp, default
         }
         onExpandedChange?.(nextExpanded);
     }, [disabled, resolvedExpanded, isControlled, onExpandedChange]);
-    const handleActionsClick = useCallback((e) => {
-        e.stopPropagation();
-    }, []);
+    const handleCheckedChange = useCallback((next) => {
+        if (!isCheckedControlled) {
+            setInternalChecked(next);
+        }
+        onCheckedChange?.(next);
+    }, [isCheckedControlled, onCheckedChange]);
+    // When the section is checkable and switched off, the body is dimmed and made
+    // non-interactive but stays mounted (so its state is preserved).
+    const isBodyDisabled = checkable && !resolvedChecked;
     const showIndicator = indicator !== null;
-    return (jsxs("div", { ref: ref, className: cx(sectionRoot, className), style: style, "data-testid": testId, ...rest, children: [jsxs("button", { type: "button", id: triggerId, "aria-expanded": resolvedExpanded, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, onContextMenu: onContextMenu, className: sectionTrigger({
+    return (jsxs("div", { ref: ref, className: cx(sectionRoot, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: sectionHeader({
                     size,
                     disabled,
                     expanded: resolvedExpanded,
-                }), children: [showIndicator && (jsx("span", { className: cx(chevron, resolvedExpanded && chevronExpanded), style: {
-                            width: `${sizeConfig.chevronSize}px`,
-                            height: `${sizeConfig.chevronSize}px`,
-                        }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { className: sectionLabel, children: title }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }), (resolvedExpanded || keepMounted) && (jsx("div", { className: contentWrapper({ expanded: resolvedExpanded }), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedExpanded || undefined, children: jsx("div", { className: contentInner, children: children }) }))] }));
+                }), children: [jsxs("button", { type: "button", id: triggerId, "aria-expanded": resolvedExpanded, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, onContextMenu: onContextMenu, className: sectionTrigger({ size, disabled }), children: [showIndicator && (jsx("span", { className: cx(chevron, resolvedExpanded && chevronExpanded), style: {
+                                    width: `${sizeConfig.chevronSize}px`,
+                                    height: `${sizeConfig.chevronSize}px`,
+                                }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { className: sectionLabel, children: title })] }), (checkable || actions) && (jsxs("span", { className: headerControls, children: [checkable && (jsx(Switch, { size: size, checked: resolvedChecked, onChange: handleCheckedChange, disabled: disabled, "aria-label": checkLabel ?? title, testId: "section-toggle" })), actions] }))] }), (resolvedExpanded || keepMounted) && (jsx("div", { className: contentWrapper({ expanded: resolvedExpanded }), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedExpanded || undefined, children: jsx("div", { className: contentInner, style: isBodyDisabled
+                        ? { opacity: 0.5, pointerEvents: 'none' }
+                        : undefined, "aria-disabled": isBodyDisabled || undefined, children: children }) }))] }));
 };
 PropertySection.displayName = 'PropertySection';
 

package/dist/esm/components/editor/PropertyInspector/PropertySection.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertySection.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertySection.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;AACE;AACA;AACA;;AAGF;AAEO;AAoBL;AACA;AACA;AAEA;;AAEA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;;;AAIA;;;;AAsBQ;AACD;AAMK;AACA;;AA8Bd;AAEA;;"}
+{"version":3,"file":"PropertySection.js","sources":["src/components/editor/PropertyInspector/PropertySection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useId, useState } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons';\nimport { Switch } from '@/components/primitives/Switch';\nimport { cx } from '@/utils/cx';\n\nimport { usePropertyPanelContext } from './PropertyPanel';\nimport {\n  sectionRoot,\n  sectionHeader,\n  sectionTrigger,\n  chevron,\n  chevronExpanded,\n  iconArea,\n  sectionLabel,\n  headerControls,\n  contentWrapper,\n  contentInner,\n} from './PropertySection.css';\n\nimport type {\n  PropertyInspectorSize,\n  PropertySectionProps,\n} from './PropertyInspector.types';\n\n// --- Size maps ---\n\ninterface TriggerSizeConfig {\n  chevronSize: number;\n}\n\nconst TRIGGER_SIZE_MAP: Record<PropertyInspectorSize, TriggerSizeConfig> = {\n  sm: { chevronSize: 10 },\n  md: { chevronSize: 12 },\n  lg: { chevronSize: 14 },\n};\n\n// --- Component ---\n\nexport const PropertySection: React.FC<PropertySectionProps> = ({\n  title,\n  icon,\n  actions,\n  expanded: expandedProp,\n  defaultExpanded = true,\n  onExpandedChange,\n  keepMounted = false,\n  disabled = false,\n  checkable = false,\n  checked: checkedProp,\n  defaultChecked = true,\n  onCheckedChange,\n  checkLabel,\n  size: sizeProp,\n  indicator,\n  onContextMenu,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n  const triggerId = `property-section-${autoId}-trigger`;\n  const contentId = `property-section-${autoId}-content`;\n\n  const panelCtx = usePropertyPanelContext();\n  const size = sizeProp ?? panelCtx?.size ?? 'md';\n  const sizeConfig = TRIGGER_SIZE_MAP[size];\n\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const isControlled = expandedProp !== undefined;\n  const resolvedExpanded = isControlled ? expandedProp : internalExpanded;\n\n  // Enable/disable toggle state (controlled or uncontrolled), mirroring the\n  // expanded-state bridge above. Independent of the collapse state.\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const isCheckedControlled = checkedProp !== undefined;\n  const resolvedChecked = isCheckedControlled ? checkedProp : internalChecked;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    const nextExpanded = !resolvedExpanded;\n\n    if (!isControlled) {\n      setInternalExpanded(nextExpanded);\n    }\n\n    onExpandedChange?.(nextExpanded);\n  }, [disabled, resolvedExpanded, isControlled, onExpandedChange]);\n\n  const handleCheckedChange = useCallback(\n    (next: boolean) => {\n      if (!isCheckedControlled) {\n        setInternalChecked(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isCheckedControlled, onCheckedChange]\n  );\n\n  // When the section is checkable and switched off, the body is dimmed and made\n  // non-interactive but stays mounted (so its state is preserved).\n  const isBodyDisabled = checkable && !resolvedChecked;\n\n  const showIndicator = indicator !== null;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(sectionRoot, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <div\n        className={sectionHeader({\n          size,\n          disabled,\n          expanded: resolvedExpanded,\n        })}\n      >\n        <button\n          type=\"button\"\n          id={triggerId}\n          aria-expanded={resolvedExpanded}\n          aria-controls={contentId}\n          aria-disabled={disabled || undefined}\n          disabled={disabled}\n          onClick={handleToggle}\n          onContextMenu={onContextMenu}\n          className={sectionTrigger({ size, disabled })}\n        >\n          {showIndicator && (\n            <span\n              className={cx(chevron, resolvedExpanded && chevronExpanded)}\n              style={{\n                width: `${sizeConfig.chevronSize}px`,\n                height: `${sizeConfig.chevronSize}px`,\n              }}\n            >\n              {indicator ?? (\n                <ChevronRightIcon size={sizeConfig.chevronSize} decorative />\n              )}\n            </span>\n          )}\n          {icon && <span className={iconArea}>{icon}</span>}\n          <span className={sectionLabel}>{title}</span>\n        </button>\n        {(checkable || actions) && (\n          <span className={headerControls}>\n            {checkable && (\n              <Switch\n                size={size}\n                checked={resolvedChecked}\n                onChange={handleCheckedChange}\n                disabled={disabled}\n                aria-label={checkLabel ?? title}\n                testId=\"section-toggle\"\n              />\n            )}\n            {actions}\n          </span>\n        )}\n      </div>\n\n      {(resolvedExpanded || keepMounted) && (\n        <div\n          className={contentWrapper({ expanded: resolvedExpanded })}\n          role=\"region\"\n          id={contentId}\n          aria-labelledby={triggerId}\n          hidden={!resolvedExpanded || undefined}\n        >\n          <div\n            className={contentInner}\n            style={\n              isBodyDisabled\n                ? { opacity: 0.5, pointerEvents: 'none' }\n                : undefined\n            }\n            aria-disabled={isBodyDisabled || undefined}\n          >\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nPropertySection.displayName = 'PropertySection';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;AACE;AACA;AACA;;AAGF;AAEO;AAyBL;AACA;AACA;AAEA;;AAEA;;AAGA;;;;;AAMA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;;;;AAKI;AACF;;;AAMF;AAEA;;;;AAcQ;;AAkBM;AACA;AACD;;AAwCC;AAUhB;AAEA;;"}

package/dist/esm/components/editor/PropertyInspector/usePropertyUndo.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePropertyUndo.js","sources":["../../../../../../src/components/editor/PropertyInspector/usePropertyUndo.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAsBA;AAIE;;AAEI;;;;;AAKE;AACA;;;;AAIF;AAAkC;AAClC;;;;;;;AASA;AAAkC;AAClC;;;;;;AAQF;;AAEA;AACE;;AAEN;AAEA;AAEA;;;AAGG;AACG;AAGJ;;AAGE;AACA;AACD;AAED;AAEI;AACE;;;AAGD;AACH;AAIF;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;;;;;;AAOA;AACA;;;;AAIJ;;"}
+{"version":3,"file":"usePropertyUndo.js","sources":["src/components/editor/PropertyInspector/usePropertyUndo.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useReducer } from 'react';\n\nimport type {\n  PropertyUndoEntry,\n  UsePropertyUndoOptions,\n  UsePropertyUndoReturn,\n} from './PropertyInspector.types';\n\n// --- Reducer ---\n\ninterface UndoState<T> {\n  undoStack: PropertyUndoEntry<T>[];\n  redoStack: PropertyUndoEntry<T>[];\n}\n\ntype UndoAction<T> =\n  | { type: 'RECORD'; entry: PropertyUndoEntry<T>; maxHistory: number }\n  | { type: 'UNDO' }\n  | { type: 'REDO' }\n  | { type: 'CLEAR' };\n\nfunction undoReducer<T>(\n  state: UndoState<T>,\n  action: UndoAction<T>\n): UndoState<T> {\n  switch (action.type) {\n    case 'RECORD': {\n      const newStack = [...state.undoStack, action.entry];\n      if (newStack.length > action.maxHistory) {\n        newStack.shift();\n      }\n      return {\n        undoStack: newStack,\n        redoStack: [],\n      };\n    }\n    case 'UNDO': {\n      if (state.undoStack.length === 0) return state;\n      const entry = state.undoStack[\n        state.undoStack.length - 1\n      ] as PropertyUndoEntry<T>;\n      return {\n        undoStack: state.undoStack.slice(0, -1),\n        redoStack: [...state.redoStack, entry],\n      };\n    }\n    case 'REDO': {\n      if (state.redoStack.length === 0) return state;\n      const entry = state.redoStack[\n        state.redoStack.length - 1\n      ] as PropertyUndoEntry<T>;\n      return {\n        undoStack: [...state.undoStack, entry],\n        redoStack: state.redoStack.slice(0, -1),\n      };\n    }\n    case 'CLEAR':\n      return { undoStack: [], redoStack: [] };\n    default:\n      return state;\n  }\n}\n\n// --- Hook ---\n\n/**\n * Lightweight undo/redo stack for property changes.\n * Records entries with property identifiers and values for precise undo control.\n */\nexport function usePropertyUndo<T = unknown>(\n  options?: UsePropertyUndoOptions\n): UsePropertyUndoReturn<T> {\n  const maxHistory = options?.maxHistory ?? 50;\n\n  const [state, dispatch] = useReducer(undoReducer<T>, {\n    undoStack: [],\n    redoStack: [],\n  });\n\n  const record = useCallback(\n    (entry: Omit<PropertyUndoEntry<T>, 'timestamp'>) => {\n      dispatch({\n        type: 'RECORD',\n        entry: { ...entry, timestamp: Date.now() },\n        maxHistory,\n      });\n    },\n    [maxHistory]\n  );\n\n  const undo = useCallback((): PropertyUndoEntry<T> | null => {\n    if (state.undoStack.length === 0) return null;\n    const entry = state.undoStack[\n      state.undoStack.length - 1\n    ] as PropertyUndoEntry<T>;\n    dispatch({ type: 'UNDO' });\n    return entry;\n  }, [state.undoStack]);\n\n  const redo = useCallback((): PropertyUndoEntry<T> | null => {\n    if (state.redoStack.length === 0) return null;\n    const entry = state.redoStack[\n      state.redoStack.length - 1\n    ] as PropertyUndoEntry<T>;\n    dispatch({ type: 'REDO' });\n    return entry;\n  }, [state.redoStack]);\n\n  const clear = useCallback(() => {\n    dispatch({ type: 'CLEAR' });\n  }, []);\n\n  return {\n    record,\n    undo,\n    redo,\n    canUndo: state.undoStack.length > 0,\n    canRedo: state.redoStack.length > 0,\n    history: state.undoStack,\n    clear,\n  };\n}\n"],"names":[],"mappings":";;;AAuBA;AAIE;;AAEI;;;;;AAKE;AACA;;;;AAIF;AAAkC;AAClC;;;;;;;AASA;AAAkC;AAClC;;;;;;AAQF;;AAEA;AACE;;AAEN;AAEA;AAEA;;;AAGG;AACG;AAGJ;;AAGE;AACA;AACD;AAED;AAEI;AACE;;;AAGD;AACH;AAIF;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;;;;;;AAOA;AACA;;;;AAIJ;;"}

package/dist/esm/components/editor/Timeline/Timeline.css.js

@@ -0,0 +1,23 @@
+import './../../../assets/src/components/editor/Timeline/Timeline.css.ts.vanilla-DDX6Zalo.css';
+
+var ariaLiveRegionStyle = 'Timeline_ariaLiveRegionStyle__1c3scxy4';
+var timelineBodyStyle = 'Timeline_timelineBodyStyle__1c3scxy1';
+var timelineCanvasStyle = 'Timeline_timelineCanvasStyle__1c3scxy2';
+var timelineFooterStyle = 'Timeline_timelineFooterStyle__1c3scxyg';
+var timelineHeaderColumnStyle = 'Timeline_timelineHeaderColumnStyle__1c3scxy6';
+var timelineHeaderDropIndicatorStyle = 'Timeline_timelineHeaderDropIndicatorStyle__1c3scxyh';
+var timelineHeaderGroupRowStyle = 'Timeline_timelineHeaderGroupRowStyle__1c3scxya';
+var timelineHeaderLabelStyle = 'Timeline_timelineHeaderLabelStyle__1c3scxyd';
+var timelineHeaderRowStyle = 'Timeline_timelineHeaderRowStyle__1c3scxy9';
+var timelineHeaderRowsViewportStyle = 'Timeline_timelineHeaderRowsViewportStyle__1c3scxy8';
+var timelineHeaderSpacerStyle = 'Timeline_timelineHeaderSpacerStyle__1c3scxy7';
+var timelineHeaderSwatchStyle = 'Timeline_timelineHeaderSwatchStyle__1c3scxyc';
+var timelineHeaderToggleStyle = 'Timeline_timelineHeaderToggleStyle__1c3scxyb';
+var timelineMainRowStyle = 'Timeline_timelineMainRowStyle__1c3scxy5';
+var timelineMinimapStyle = 'Timeline_timelineMinimapStyle__1c3scxye';
+var timelineOverlayLayerStyle = 'Timeline_timelineOverlayLayerStyle__1c3scxy3';
+var timelineShellStyle = 'Timeline_timelineShellStyle__1c3scxy0';
+var timelineToolbarStyle = 'Timeline_timelineToolbarStyle__1c3scxyf';
+
+export { ariaLiveRegionStyle, timelineBodyStyle, timelineCanvasStyle, timelineFooterStyle, timelineHeaderColumnStyle, timelineHeaderDropIndicatorStyle, timelineHeaderGroupRowStyle, timelineHeaderLabelStyle, timelineHeaderRowStyle, timelineHeaderRowsViewportStyle, timelineHeaderSpacerStyle, timelineHeaderSwatchStyle, timelineHeaderToggleStyle, timelineMainRowStyle, timelineMinimapStyle, timelineOverlayLayerStyle, timelineShellStyle, timelineToolbarStyle };
+//# sourceMappingURL=Timeline.css.js.map

package/dist/esm/components/editor/Timeline/Timeline.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}