@noya-app/noya-designsystem 0.1.89 → 0.1.91

package/dist/index.mjs

@@ -17,11 +17,11 @@ var require_use_sync_external_store_shim_production = __commonJS({
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useState80 = React325.useState;
     var useEffect61 = React325.useEffect;
-    var useLayoutEffect12 = React325.useLayoutEffect;
+    var useLayoutEffect13 = React325.useLayoutEffect;
     var useDebugValue2 = React325.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
       var value = getSnapshot(), _useState = useState80({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect12(
+      useLayoutEffect13(
         function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
@@ -82,7 +82,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect12(
+        useLayoutEffect13(
           function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
@@ -116,7 +116,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React325 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React325.useState, useEffect61 = React325.useEffect, useLayoutEffect12 = React325.useLayoutEffect, useDebugValue2 = React325.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React325 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React325.useState, useEffect61 = React325.useEffect, useLayoutEffect13 = React325.useLayoutEffect, useDebugValue2 = React325.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React325.useSyncExternalStore ? React325.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -146,12 +146,12 @@ var require_with_selector_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useSyncExternalStore3 = shim.useSyncExternalStore;
-    var useRef94 = React325.useRef;
+    var useRef95 = React325.useRef;
     var useEffect61 = React325.useEffect;
     var useMemo156 = React325.useMemo;
     var useDebugValue2 = React325.useDebugValue;
     exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-      var instRef = useRef94(null);
+      var instRef = useRef95(null);
       if (null === instRef.current) {
         var inst = { hasValue: false, value: null };
         instRef.current = inst;
@@ -213,9 +213,9 @@ var require_with_selector_development = __commonJS({
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React325 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef94 = React325.useRef, useEffect61 = React325.useEffect, useMemo156 = React325.useMemo, useDebugValue2 = React325.useDebugValue;
+      var React325 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef95 = React325.useRef, useEffect61 = React325.useEffect, useMemo156 = React325.useMemo, useDebugValue2 = React325.useDebugValue;
       exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef94(null);
+        var instRef = useRef95(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
@@ -19692,7 +19692,10 @@ var StyledBackdrop = forwardRef49(({ className, ...props }, ref) => /* @__PURE__
   index_parts_exports4.Backdrop,
   {
     ref,
-    className: cx(`n-fixed n-inset-0 n-bg-[rgba(0,0,0,0.5)]`, className),
+    className: cx(
+      `n-fixed n-inset-0 n-z-[999] n-bg-[rgba(0,0,0,0.5)]`,
+      className
+    ),
     ...props
   }
 ));
@@ -30729,6 +30732,7 @@ function BaseToolbar({
   left,
   right,
   logo,
+  showLogoDivider = true,
   showDivider = true,
   className,
   innerClassName,
@@ -30749,7 +30753,7 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ React229.createElement(React229.Fragment, null, logo, /* @__PURE__ */ React229.createElement(DividerVertical, null)),
+    logo && /* @__PURE__ */ React229.createElement(React229.Fragment, null, logo, showLogoDivider && /* @__PURE__ */ React229.createElement(DividerVertical, null)),
     /* @__PURE__ */ React229.createElement(Spacer.Horizontal, { size: 10 }),
     leftElement && !enableContainerQuery && /* @__PURE__ */ React229.createElement(React229.Fragment, null, leftElement, childrenElement && /* @__PURE__ */ React229.createElement(Spacer.Horizontal, { size: 10 })),
     childrenElement,
@@ -41580,23 +41584,28 @@ var UserPointer = memo38(function UserPointer2({
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
 import React321, {
   memo as memo40,
-  useCallback as useCallback74,
+  useCallback as useCallback75,
   useImperativeHandle as useImperativeHandle18,
   useMemo as useMemo154,
-  useRef as useRef93
+  useRef as useRef94
 } from "react";
 
 // src/components/OverlayToolbar.tsx
-import React312, { useMemo as useMemo150 } from "react";
+import React312, { useCallback as useCallback71, useLayoutEffect as useLayoutEffect12, useMemo as useMemo150, useRef as useRef90 } from "react";
 var panelClassName = "n-pointer-events-auto n-inline-flex n-items-center n-gap-toolbar-separator n-rounded-3xl n-border n-border-divider n-bg-sidebar-background n-px-3 n-py-2.5 n-shadow-2xl";
 function OverlayToolbar({
   left,
   right,
   overlayLayout = "bottomCenterTopRight",
   className,
-  style: style2
+  style: style2,
+  onRectsChange
 }) {
   const resolvedLayout = overlayLayout === "topLeftTopRight" ? "topLeftTopRight" : "bottomCenterTopRight";
+  const leftPanelRef = useRef90(null);
+  const rightPanelRef = useRef90(null);
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
   const panelStyle = useMemo150(
     () => ({
       ...toolbarTransparentStyle,
@@ -41604,11 +41613,68 @@ function OverlayToolbar({
     }),
     [style2]
   );
+  const emitRects = useCallback71(() => {
+    if (!onRectsChange) return;
+    const panels = [
+      {
+        id: resolvedLayout === "topLeftTopRight" ? "noya-toolbar-top-left" : "noya-toolbar-bottom-center",
+        element: leftPanelRef.current
+      },
+      {
+        id: "noya-toolbar-top-right",
+        element: rightPanelRef.current
+      }
+    ];
+    onRectsChange(
+      panels.flatMap(({ id, element }) => {
+        if (!element) return [];
+        const rect = element.getBoundingClientRect();
+        const containerRect = element.closest("[data-workspace-content]")?.getBoundingClientRect();
+        return [
+          {
+            id,
+            rect: {
+              x: rect.x - (containerRect?.x ?? 0),
+              y: rect.y - (containerRect?.y ?? 0),
+              width: rect.width,
+              height: rect.height
+            }
+          }
+        ];
+      })
+    );
+  }, [onRectsChange, resolvedLayout]);
+  useLayoutEffect12(() => {
+    if (!onRectsChange) return;
+    let animationFrame;
+    const scheduleEmit = () => {
+      if (animationFrame !== void 0) {
+        cancelAnimationFrame(animationFrame);
+      }
+      animationFrame = requestAnimationFrame(emitRects);
+    };
+    emitRects();
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(scheduleEmit);
+    const panels = [leftPanelRef.current, rightPanelRef.current];
+    panels.forEach((panel) => panel && resizeObserver?.observe(panel));
+    window.addEventListener("resize", scheduleEmit);
+    window.addEventListener("scroll", scheduleEmit, true);
+    return () => {
+      if (animationFrame !== void 0) {
+        cancelAnimationFrame(animationFrame);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleEmit);
+      window.removeEventListener("scroll", scheduleEmit, true);
+      onRectsChange([]);
+    };
+  }, [emitRects, hasLeft, hasRight, onRectsChange]);
   const renderLeftPanel = (overlayId) => {
     if (!left) return null;
     return /* @__PURE__ */ React312.createElement(
       "div",
       {
+        ref: leftPanelRef,
         className: panelClassName,
         "data-embedded-overlay-id": overlayId,
         style: panelStyle
@@ -41645,6 +41711,7 @@ function OverlayToolbar({
     /* @__PURE__ */ React312.createElement(
       "div",
       {
+        ref: rightPanelRef,
         className: panelClassName,
         "data-embedded-overlay-id": "noya-toolbar-top-right",
         style: panelStyle
@@ -42103,7 +42170,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       )
     ), /* @__PURE__ */ React315.createElement(Divider, null)),
-    compactTabItem && /* @__PURE__ */ React315.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, /* @__PURE__ */ React315.createElement(
+    compactTabItem && /* @__PURE__ */ React315.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, /* @__PURE__ */ React315.createElement(
       Button,
       {
         "aria-label": typeof compactTabItem.title === "string" ? compactTabItem.title : "Toggle sidebar",
@@ -42124,7 +42191,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React320, { useCallback as useCallback73, useMemo as useMemo153, useRef as useRef92, useState as useState78 } from "react";
+import React320, { useCallback as useCallback74, useMemo as useMemo153, useRef as useRef93, useState as useState78 } from "react";
 
 // src/components/resizablePanels/Panel.tsx
 import React316, {
@@ -42227,11 +42294,11 @@ var Panel = forwardRef127(
 // src/components/resizablePanels/PanelGroup.tsx
 import React317, {
   forwardRef as forwardRef128,
-  useCallback as useCallback71,
+  useCallback as useCallback72,
   useEffect as useEffect59,
   useImperativeHandle as useImperativeHandle17,
   useMemo as useMemo152,
-  useRef as useRef90,
+  useRef as useRef91,
   useState as useState77
 } from "react";
 function getStorageKey(autoSaveId) {
@@ -42253,11 +42320,11 @@ function saveSizes(autoSaveId, sizes) {
 }
 var PanelGroup = forwardRef128(
   function PanelGroup2({ id, className, direction, autoSaveId, onLayout, children }, ref) {
-    const containerRef = useRef90(null);
+    const containerRef = useRef91(null);
     const containerSize = useSize(containerRef);
     const containerWidth = containerSize?.width ?? 0;
     const [panels, setPanels] = useState77(/* @__PURE__ */ new Map());
-    const panelsRef = useRef90(panels);
+    const panelsRef = useRef91(panels);
     panelsRef.current = panels;
     const [resizing, setResizing] = useState77(null);
     const sortedPanels = useMemo152(() => {
@@ -42271,7 +42338,7 @@ var PanelGroup = forwardRef128(
       }
       return null;
     }, [sortedPanels]);
-    const calculateLayout = useCallback71(
+    const calculateLayout = useCallback72(
       (panelStates, width) => {
         if (width === 0) return panelStates;
         const sorted = Array.from(panelStates.values()).sort(
@@ -42307,7 +42374,7 @@ var PanelGroup = forwardRef128(
         onLayout(sizes);
       }
     }, [onLayout, sortedPanels]);
-    const registerPanel = useCallback71(
+    const registerPanel = useCallback72(
       (panel) => {
         setPanels((prev) => {
           const savedSizes = loadSavedSizes(autoSaveId);
@@ -42332,26 +42399,26 @@ var PanelGroup = forwardRef128(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const unregisterPanel = useCallback71((panelId) => {
+    const unregisterPanel = useCallback72((panelId) => {
       setPanels((prev) => {
         const newPanels = new Map(prev);
         newPanels.delete(panelId);
         return newPanels;
       });
     }, []);
-    const getPanelSize = useCallback71(
+    const getPanelSize = useCallback72(
       (panelId) => {
         return panels.get(panelId)?.size ?? 0;
       },
       [panels]
     );
-    const getPanelIndex = useCallback71(
+    const getPanelIndex = useCallback72(
       (panelId) => {
         return sortedPanels.findIndex((p) => p.id === panelId);
       },
       [sortedPanels]
     );
-    const setPanelSize = useCallback71(
+    const setPanelSize = useCallback72(
       (panelId, size4) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42379,7 +42446,7 @@ var PanelGroup = forwardRef128(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const expandPanel = useCallback71(
+    const expandPanel = useCallback72(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42404,7 +42471,7 @@ var PanelGroup = forwardRef128(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const collapsePanel = useCallback71(
+    const collapsePanel = useCallback72(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42428,14 +42495,14 @@ var PanelGroup = forwardRef128(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const isPanelExpanded = useCallback71(
+    const isPanelExpanded = useCallback72(
       (panelId) => {
         const panel = panels.get(panelId);
         return panel ? !panel.collapsed : false;
       },
       [panels]
     );
-    const startResize = useCallback71(
+    const startResize = useCallback72(
       (handleIndex, startX) => {
         const startSizes = sortedPanels.map((p) => p.size);
         setResizing({
@@ -42597,15 +42664,15 @@ var PanelGroup = forwardRef128(
 );
 
 // src/components/resizablePanels/PanelResizeHandle.tsx
-import React318, { useCallback as useCallback72, useContext as useContext65, useRef as useRef91 } from "react";
+import React318, { useCallback as useCallback73, useContext as useContext65, useRef as useRef92 } from "react";
 function PanelResizeHandle({
   className,
   disabled: disabled2,
   index: index2
 }) {
   const context = useContext65(PanelGroupContext);
-  const handleRef = useRef91(null);
-  const handleMouseDown = useCallback72(
+  const handleRef = useRef92(null);
+  const handleMouseDown = useCallback73(
     (e) => {
       if (disabled2 || !context) return;
       e.preventDefault();
@@ -42691,8 +42758,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   onRightSidebarStateChange,
   shouldAutoSave = true
 }) {
-  const panelGroupRef = useRef92(null);
-  const containerRef = useRef92(null);
+  const panelGroupRef = useRef93(null);
+  const containerRef = useRef93(null);
   const autoSaveId = useMemo153(() => {
     if (!shouldAutoSave) return void 0;
     return autoSavePrefix ? `${autoSavePrefix}--v5--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
@@ -42703,9 +42770,9 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState78(
     rightSidebarOptions.defaultCollapsed ?? false
   );
-  const prevLeftSidebarState = useRef92(null);
-  const prevRightSidebarState = useRef92(null);
-  const handleLayoutChange = useCallback73(
+  const prevLeftSidebarState = useRef93(null);
+  const prevRightSidebarState = useRef93(null);
+  const handleLayoutChange = useCallback74(
     (sizes) => {
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? leftPanel ? 2 : 1 : -1;
@@ -42736,7 +42803,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftPanel, rightPanel, onLeftSidebarStateChange, onRightSidebarStateChange]
   );
-  const handleLeftTabChange = useCallback73(
+  const handleLeftTabChange = useCallback74(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -42753,7 +42820,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = useCallback73(
+  const handleRightTabChange = useCallback74(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -42900,6 +42967,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   overlayToolbarLeft,
   overlayToolbarRight,
   overlayLayout,
+  contentTopInset = 0,
+  onOverlayToolbarRectsChange,
   children,
   sideType = "auto",
   sideTypeBreakpoint = 800,
@@ -42948,8 +43017,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   const rightSidebarMinPixels = toPixels(rightMinSize);
   const rightSidebarMaxPixels = toPixels(rightMaxSize);
   const rightSidebarInitialPixels = toPixels(rightInitialSize) ?? 280;
-  const leftSidebarRef = useRef93(null);
-  const rightSidebarRef = useRef93(null);
+  const leftSidebarRef = useRef94(null);
+  const rightSidebarRef = useRef94(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -43017,12 +43086,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     }
   });
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = useCallback74(() => {
+  const closeLeftSidebar = useCallback75(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = useCallback74(() => {
+  const closeRightSidebar = useCallback75(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
@@ -43118,36 +43187,45 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     !isOverlay && toolbar,
-    /* @__PURE__ */ React321.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React321.createElement(React321.Fragment, null, /* @__PURE__ */ React321.createElement(
-      LayoutComponent,
-      {
-        leftPanel,
-        rightPanel,
-        centerPanel,
-        leftTabItems,
-        leftTabValue,
-        onChangeLeftTab: setLeftTabValue,
-        rightTabItems,
-        rightTabValue,
-        onChangeRightTab: setRightTabValue,
-        leftSidebarOptions,
-        rightSidebarOptions,
-        autoSavePrefix,
-        leftSidebarRef,
-        rightSidebarRef,
-        compactDrawerMenu,
-        onLeftSidebarStateChange,
-        onRightSidebarStateChange,
-        shouldAutoSave
-      }
-    ), isOverlay && /* @__PURE__ */ React321.createElement(
-      OverlayToolbar,
+    /* @__PURE__ */ React321.createElement(
+      "div",
       {
-        left: overlayToolbarLeft,
-        right: overlayToolbarRight,
-        overlayLayout
-      }
-    )))
+        className: "n-flex n-flex-row n-flex-1 n-min-h-0 n-relative",
+        "data-workspace-content": true,
+        style: contentTopInset > 0 ? { paddingTop: contentTopInset } : void 0
+      },
+      readyToRender && /* @__PURE__ */ React321.createElement(React321.Fragment, null, /* @__PURE__ */ React321.createElement(
+        LayoutComponent,
+        {
+          leftPanel,
+          rightPanel,
+          centerPanel,
+          leftTabItems,
+          leftTabValue,
+          onChangeLeftTab: setLeftTabValue,
+          rightTabItems,
+          rightTabValue,
+          onChangeRightTab: setRightTabValue,
+          leftSidebarOptions,
+          rightSidebarOptions,
+          autoSavePrefix,
+          leftSidebarRef,
+          rightSidebarRef,
+          compactDrawerMenu,
+          onLeftSidebarStateChange,
+          onRightSidebarStateChange,
+          shouldAutoSave
+        }
+      ), isOverlay && /* @__PURE__ */ React321.createElement(
+        OverlayToolbar,
+        {
+          left: overlayToolbarLeft,
+          right: overlayToolbarRight,
+          overlayLayout,
+          onRectsChange: onOverlayToolbarRectsChange
+        }
+      ))
+    )
   );
 });
 var PanelInner = memo40(function PanelInner2({