@geomak/ui 7.3.3 → 7.4.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-5FQ64bx1.cjs';
+export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-BktppxXp.cjs';
 export { CreateIconOptions, Icon, IconComponent, IconProps, createIcon } from './icons/index.cjs';
 import * as react from 'react';
 import react__default from 'react';
@@ -2061,6 +2061,15 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Bounding element the EXPANDED state should overlay. When provided, the
+     * expanded content renders into a body portal positioned over this
+     * element's rect instead of growing in place — letting the container break
+     * out of a size-constrained wrapper (e.g. a flex item) whose normal-state
+     * sizing it should otherwise respect. Collapsing returns it to normal
+     * flow. Omit for the classic expand-in-place behaviour.
+     */
+    expandContainerRef?: react__default.RefObject<HTMLElement | null>;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
@@ -2089,7 +2098,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-5FQ64bx1.js';
+export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-BktppxXp.js';
 export { CreateIconOptions, Icon, IconComponent, IconProps, createIcon } from './icons/index.js';
 import * as react from 'react';
 import react__default from 'react';
@@ -2061,6 +2061,15 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Bounding element the EXPANDED state should overlay. When provided, the
+     * expanded content renders into a body portal positioned over this
+     * element's rect instead of growing in place — letting the container break
+     * out of a size-constrained wrapper (e.g. a flex item) whose normal-state
+     * sizing it should otherwise respect. Collapsing returns it to normal
+     * flow. Omit for the classic expand-in-place behaviour.
+     */
+    expandContainerRef?: react__default.RefObject<HTMLElement | null>;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
@@ -2089,7 +2098,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.js

@@ -1,6 +1,6 @@
 export { icons_default as Icon, createIcon } from './chunk-KAFJJO5O.js';
-import { colors_default } from './chunk-I2P4JJDB.js';
-export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
+import { colors_default } from './chunk-DXOWXLKK.js';
+export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-DXOWXLKK.js';
 import React30, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -4540,6 +4540,10 @@ function List2({
     );
   }) });
 }
+var rectOf = (el) => {
+  const r = el.getBoundingClientRect();
+  return { left: r.left, top: r.top, width: r.width, height: r.height };
+};
 var TOGGLE_POSITION_CLASS = {
   "top-left": "top-2 left-2",
   "top-right": "top-2 right-2",
@@ -4558,17 +4562,56 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
+  expandContainerRef,
   className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
+  const usePortal = expandContainerRef != null;
+  const [overlay, setOverlay] = useState("closed");
+  const [fromRect, setFromRect] = useState(null);
+  const [targetRect, setTargetRect] = useState(null);
+  const prevScaled = useRef(isScaled);
+  useEffect(() => {
+    if (!usePortal || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) {
+      const src = containerRef.current ? rectOf(containerRef.current) : null;
+      const tgt = expandContainerRef.current ? rectOf(expandContainerRef.current) : null;
+      if (src && tgt) {
+        setFromRect(src);
+        setTargetRect(tgt);
+        setOverlay("open");
+      }
+    } else if (containerRef.current) {
+      setTargetRect(rectOf(containerRef.current));
+      setOverlay("closing");
+    }
+  }, [isScaled, usePortal, expandContainerRef]);
+  useEffect(() => {
+    if (overlay !== "closing") return;
+    const t = window.setTimeout(() => setOverlay("closed"), reduced ? 0 : 360);
+    return () => window.clearTimeout(t);
+  }, [overlay, reduced]);
+  useEffect(() => {
+    if (overlay !== "open" || !expandContainerRef?.current) return;
+    const update = () => {
+      if (expandContainerRef.current) setTargetRect(rectOf(expandContainerRef.current));
+    };
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [overlay, expandContainerRef]);
   const onToggle = () => {
     const next = !isScaled;
     if (expanded === void 0) setInternalScaled(next);
     onExpandedChange?.(next);
-    if (next) {
+    if (next && !usePortal) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4576,50 +4619,79 @@ function ScalableContainer({
     }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
-  return /* @__PURE__ */ jsxs(
-    motion.div,
+  const overlayActive = usePortal && overlay !== "closed";
+  const toggleButton = (scaled) => /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: scaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
+    "button",
     {
-      ref: containerRef,
-      animate: {
-        width: isScaled ? expandedWidth : width,
-        height: isScaled ? expandedHeight : height
-      },
-      transition: reduced ? { duration: 0 } : {
-        width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
-      },
-      className: cx(
-        "relative rounded-lg overflow-hidden",
-        // OS-window aesthetic: subtle elevation at rest, lifted shadow
-        // when expanded. No background colour change.
-        isScaled ? "shadow-2xl" : "shadow-md",
-        "transition-shadow duration-300",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle,
-            "aria-label": isScaled ? "Collapse container" : "Expand container",
-            "aria-expanded": isScaled,
-            className: [
-              "absolute z-10",
-              TOGGLE_POSITION_CLASS[togglePosition],
-              "w-7 h-7 inline-flex items-center justify-center",
-              "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
-              "text-foreground-secondary hover:text-foreground hover:bg-surface",
-              "shadow-sm transition-colors duration-150",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-            ].join(" "),
-            children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: wrapperClass, children })
-      ]
+      type: "button",
+      onClick: onToggle,
+      "aria-label": scaled ? "Collapse container" : "Expand container",
+      "aria-expanded": scaled,
+      className: [
+        "absolute z-10",
+        TOGGLE_POSITION_CLASS[togglePosition],
+        "w-7 h-7 inline-flex items-center justify-center",
+        "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
+        "text-foreground-secondary hover:text-foreground hover:bg-surface",
+        "shadow-sm transition-colors duration-150",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      ].join(" "),
+      children: scaled ? collapseIcon ?? /* @__PURE__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
     }
-  );
+  ) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: containerRef,
+        animate: {
+          // Breakout mode never grows in place — the in-flow box stays
+          // at its resting size and acts as the collapse target.
+          width: isScaled && !usePortal ? expandedWidth : width,
+          height: isScaled && !usePortal ? expandedHeight : height
+        },
+        transition: reduced ? { duration: 0 } : {
+          width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        },
+        className: cx(
+          "relative rounded-lg overflow-hidden",
+          // OS-window aesthetic: subtle elevation at rest, lifted shadow
+          // when expanded. No background colour change.
+          isScaled && !usePortal ? "shadow-2xl" : "shadow-md",
+          "transition-shadow duration-300",
+          className
+        ),
+        children: [
+          !overlayActive && toggleButton(isScaled),
+          !overlayActive && /* @__PURE__ */ jsx("div", { className: wrapperClass, children })
+        ]
+      }
+    ),
+    overlayActive && fromRect && targetRect && createPortal(
+      /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { ...fromRect },
+          animate: { ...targetRect },
+          transition: reduced ? { duration: 0 } : { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          onAnimationComplete: () => {
+            if (overlay === "closing") setOverlay("closed");
+          },
+          style: { position: "fixed" },
+          className: cx(
+            "z-dropdown rounded-lg overflow-hidden bg-surface shadow-2xl",
+            className
+          ),
+          children: [
+            toggleButton(isScaled),
+            /* @__PURE__ */ jsx("div", { className: cx("h-full w-full", wrapperClass), children })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 function CollapseIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 9L4 4M9 9V4M9 9H4M15 9L20 4M15 9V4M15 9H20M9 15L4 20M9 15V20M9 15H4M15 15L20 20M15 15V20M15 15H20" }) });
@@ -7544,8 +7616,9 @@ function Dropdown({
               {
                 align: "start",
                 sideOffset: 4,
+                collisionPadding: 8,
                 style: { width: style?.width || 240 },
-                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
                 onInteractOutside: () => setOpen(false),
                 children: [
                   hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
@@ -7728,8 +7801,9 @@ function AutoComplete({
           {
             align: "start",
             sideOffset: 4,
+            collisionPadding: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
-            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-popover overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
             children: loading ? /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
               /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
               /* @__PURE__ */ jsx("span", { children: loadingText })
@@ -7913,8 +7987,9 @@ function TreeSelect({
           {
             align: "start",
             sideOffset: 4,
+            collisionPadding: 8,
             style: { width: style?.width || 280 },
-            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               listRef.current?.focus();
@@ -8362,7 +8437,8 @@ function DatePicker({
           {
             align: "start",
             sideOffset: 4,
-            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            collisionPadding: 8,
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
             },
@@ -9161,7 +9237,8 @@ function TimePicker({
         {
           align: "start",
           sideOffset: 4,
-          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
+          collisionPadding: 8,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
           children: [
             /* @__PURE__ */ jsx(
               Column,
@@ -9334,7 +9411,8 @@ function DateRangePicker({
       {
         align: "start",
         sideOffset: 4,
-        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex flex-col gap-3 sm:flex-row max-w-[calc(100vw-1rem)] max-h-[calc(100vh-2rem)] overflow-auto animate-in fade-in-0 zoom-in-95",
+        collisionPadding: 8,
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 flex flex-col gap-3 sm:flex-row max-w-[calc(100vw-1rem)] max-h-[calc(100vh-2rem)] overflow-auto animate-in fade-in-0 zoom-in-95",
         children: [
           presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 min-w-[120px] sm:pr-3 sm:border-r sm:border-border", children: presets.map((p) => /* @__PURE__ */ jsx(
             "button",
@@ -9457,7 +9535,8 @@ function ColorPicker({
         {
           align: "start",
           sideOffset: 4,
-          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 w-56 animate-in fade-in-0 zoom-in-95",
+          collisionPadding: 8,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 w-56 animate-in fade-in-0 zoom-in-95",
           children: [
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsx(
               "button",