gridsmith-ui 0.9.0 → 0.9.1

package/dist/chunk-Z37HO5NU.js

@@ -0,0 +1,950 @@
+import { useReturnFocus, focusInitial, useOverlayLayer, useFocusTrap, OVERLAY_CLOSE_ATTR, useNonModalDialog } from './chunk-RLUK575N.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
+import { Tooltip, useTextOverflow } from './chunk-CQADS7JZ.js';
+import { useLatest } from './chunk-WH2FUFAC.js';
+import { Icon } from './chunk-X4CNZFWC.js';
+import { cn, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-4KVFH5KC.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useState, useCallback, useRef, useEffect, isValidElement, useMemo, useId, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+var sizes = {
+  sm: "h-4 w-4 border-[1.5px]",
+  md: "h-6 w-6 border-2",
+  lg: "h-8 w-8 border-[2.5px]"
+};
+function Spinner({ size = "md", color = "default", label = "Loading", className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(
+        "inline-block rounded-[var(--ds-radius-full)] animate-spin",
+        color === "inherit" ? "border-current/30 border-t-current" : "border-[var(--ds-bg-emphasis)] border-t-[var(--ds-accent-primary)]",
+        sizes[size],
+        className
+      )
+    }
+  );
+}
+var ControlSizeContext = createContext(null);
+var ButtonSizeContext = ControlSizeContext;
+var variantStyles = {
+  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
+  secondary: "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
+  tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
+  outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
+  ghost: "bg-transparent text-[var(--ds-text-primary)] border-transparent hover:bg-[var(--ds-bg-muted)] shadow-none",
+  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)] border-transparent hover:opacity-90",
+  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)] border-transparent hover:opacity-90",
+  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)] border-transparent hover:opacity-90",
+  link: "bg-transparent text-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary-hover)] hover:underline"
+};
+var sizeStyles = {
+  // xs / icon-xs: dense tool chrome (builder toolbars, inline row actions).
+  xs: "h-ds-6 px-ds-3 py-0 text-xs",
+  sm: "h-[var(--ds-control-height-sm)] px-ds-4 py-ds-1 text-xs",
+  md: "h-[var(--ds-control-height-md)] px-ds-6 py-ds-2 text-sm",
+  lg: "h-[var(--ds-control-height-lg)] px-ds-8 py-ds-3 text-base",
+  "icon-xs": "h-ds-6 w-ds-6 p-0",
+  "icon-sm": "h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] p-0",
+  icon: "h-[var(--ds-control-height-md)] w-[var(--ds-control-height-md)] p-0",
+  "icon-lg": "h-[var(--ds-control-height-lg)] w-[var(--ds-control-height-lg)] p-0"
+};
+var linkSizeStyles = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  "icon-xs": "text-xs",
+  "icon-sm": "text-xs",
+  icon: "text-sm",
+  "icon-lg": "text-base"
+};
+var iconPaddingReduce = {
+  xs: 2,
+  sm: 2,
+  md: 4,
+  lg: 6
+};
+var HOVER_SCALE_CAP = { "--_btn-scale": "min(var(--ds-hover-scale), 1.02)" };
+var Button = forwardRef(function Button2({ variant = "default", size: sizeProp, iconLeft, iconRight, loading, className, children, disabled, style, onClick, ...props }, ref) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
+  const isLink = variant === "link";
+  const spinnerSize = size === "lg" || size === "icon-lg" ? "md" : "sm";
+  let paddingStyle;
+  const isIconSize = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
+  if (!isIconSize && !isLink && (iconLeft || iconRight)) {
+    const reduce = iconPaddingReduce[size];
+    paddingStyle = {};
+    if (iconLeft) paddingStyle.paddingLeft = `calc(${getCssPadding(size)} - ${reduce}px)`;
+    if (iconRight) paddingStyle.paddingRight = `calc(${getCssPadding(size)} - ${reduce}px)`;
+  }
+  const isLoading = loading && !disabled;
+  const isDisabled = !!disabled;
+  const handleClick = isLoading ? (e) => {
+    e.preventDefault();
+  } : onClick;
+  const ariaLabel = props["aria-label"];
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      "data-variant": variant,
+      className: cn(
+        "relative inline-flex items-center justify-center gap-ds-2 whitespace-nowrap font-medium",
+        isLink ? cn(
+          "px-0 py-ds-0.5 h-auto",
+          linkSizeStyles[size],
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          "focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] focus-visible:outline-offset-2",
+          "cursor-pointer",
+          "active:text-[var(--ds-accent-primary-active)]"
+        ) : cn(
+          "border-[length:var(--ds-border-width)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-button)]",
+          "hover:scale-[var(--_btn-scale)] hover:-translate-y-[var(--ds-hover-lift)]",
+          "active:shadow-[var(--ds-shadow-button-pressed)] active:translate-x-[var(--ds-press-depth)] active:translate-y-[var(--ds-press-depth)]",
+          "[transition:var(--ds-transition-interactive)]",
+          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
+          sizeStyles[size]
+        ),
+        variantStyles[variant],
+        isLoading && !isLink && "cursor-wait pointer-events-none",
+        className
+      ),
+      disabled: isDisabled,
+      "aria-busy": isLoading || void 0,
+      "aria-disabled": isLoading && !disabled ? true : void 0,
+      onClick: handleClick,
+      style: isLink ? style : { ...HOVER_SCALE_CAP, ...paddingStyle, ...style },
+      ...props,
+      children: [
+        loading && !isLink && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) }),
+        /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-ds-2 min-w-0", loading && !isLink && "invisible"), children: [
+          iconLeft,
+          children,
+          iconRight
+        ] })
+      ]
+    }
+  );
+  if (isIconSize && ariaLabel) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: ariaLabel, children: btn });
+  }
+  return btn;
+});
+function getCssPadding(size) {
+  switch (size) {
+    case "xs":
+      return "var(--ds-space-3)";
+    case "sm":
+      return "var(--ds-space-4)";
+    case "md":
+      return "var(--ds-space-6)";
+    case "lg":
+      return "var(--ds-space-8)";
+  }
+}
+function transitionMs(el) {
+  const cs = getComputedStyle(el);
+  const parse = (list) => list.split(",").map((raw) => {
+    const s = raw.trim();
+    if (!s) return 0;
+    const n = parseFloat(s);
+    if (Number.isNaN(n)) return 0;
+    return s.endsWith("ms") ? n : n * 1e3;
+  });
+  const durations = parse(cs.transitionDuration || "0s");
+  const delays = parse(cs.transitionDelay || "0s");
+  let max = 0;
+  durations.forEach((d, i) => {
+    const total = d + (delays[i] ?? delays[0] ?? 0);
+    if (total > max) max = total;
+  });
+  return max;
+}
+function useCloseSettle(open, elRef, onSettled) {
+  const cb = useLatest(onSettled);
+  useEffect(() => {
+    if (open) return;
+    const el = elRef.current;
+    const ms = el ? transitionMs(el) : 0;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      cb.current();
+    };
+    if (!el || ms === 0) {
+      const t2 = setTimeout(finish, 0);
+      return () => clearTimeout(t2);
+    }
+    const onEnd = (e) => {
+      if (e.target === el) finish();
+    };
+    el.addEventListener("transitionend", onEnd);
+    const t = setTimeout(finish, ms + 50);
+    return () => {
+      el.removeEventListener("transitionend", onEnd);
+      clearTimeout(t);
+    };
+  }, [open, elRef, cb]);
+}
+function Sheet({ open, onClose, title, children, footer, confirm, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
+  const titleId = useId();
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = useState(open);
+  const [hidden, setHidden] = useState(!open);
+  const [snapIdx, setSnapIdx] = useState(0);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const dragStartY = useRef(0);
+  const startHeight = useRef(0);
+  const onCloseRef = useLatest(onClose);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setMounted(true);
+      setHidden(false);
+      setSnapIdx(0);
+      setDragOffset(0);
+    }
+  }
+  const viewportHeight = useCallback(
+    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
+    [container]
+  );
+  useCloseSettle(open, panelRef, () => {
+    if (keepMounted) setHidden(true);
+    else setMounted(false);
+  });
+  useReturnFocus(open);
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
+  const isTopLayer = useOverlayLayer(open);
+  useFocusTrap(panelRef, open, isTopLayer);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, container, onCloseRef, isTopLayer]);
+  const handlePointerDown = useCallback((e) => {
+    setDragging(true);
+    dragStartY.current = e.clientY;
+    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * viewportHeight();
+    setDragOffset(0);
+    e.target.setPointerCapture(e.pointerId);
+  }, [snapIdx, snapPoints, viewportHeight]);
+  const handlePointerMove = useCallback((e) => {
+    if (!dragging) return;
+    const delta = dragStartY.current - e.clientY;
+    setDragOffset(delta);
+  }, [dragging]);
+  const handlePointerUp = useCallback(() => {
+    if (!dragging) return;
+    setDragging(false);
+    const currentHeightPx = startHeight.current + dragOffset;
+    const currentFraction = currentHeightPx / viewportHeight();
+    if (currentFraction < snapPoints[0] * 0.6) {
+      onClose();
+      setDragOffset(0);
+      return;
+    }
+    let bestIdx = 0;
+    let bestDist = Math.abs(currentFraction - snapPoints[0]);
+    for (let i = 1; i < snapPoints.length; i++) {
+      const dist = Math.abs(currentFraction - snapPoints[i]);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestIdx = i;
+      }
+    }
+    setSnapIdx(bestIdx);
+    setDragOffset(0);
+  }, [dragging, dragOffset, snapPoints, onClose, viewportHeight]);
+  if (!mounted) return null;
+  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
+  const heightUnit = container ? "%" : "vh";
+  const dragPx = dragging ? dragOffset : 0;
+  const positionClass = container ? "absolute" : "fixed";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        hidden: keepMounted && hidden ? true : void 0,
+        className: cn(
+          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
+          open ? "pointer-events-auto" : "pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
+                open ? "opacity-100" : "opacity-0"
+              ),
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              id,
+              role: "dialog",
+              "data-gs": "sheet",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : labelledBy,
+              "data-ds-sheet": "",
+              className: cn(
+                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                "rounded-t-[var(--ds-radius-xl)]",
+                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                open ? "translate-y-0" : "translate-y-full"
+              ),
+              style: {
+                containerType: "inline-size",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
+                    onPointerDown: handlePointerDown,
+                    onPointerMove: handlePointerMove,
+                    onPointerUp: handlePointerUp,
+                    onPointerCancel: handlePointerUp,
+                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                confirm,
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
+var STEP = 16;
+var BIG_STEP = 64;
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function ResizeEdge({ edge, width, min, max, defaultWidth, onResize, label, onDraggingChange, className }) {
+  const [dragging, setDragging] = useState(false);
+  const start = useRef(null);
+  const latestOnResize = useLatest(onResize);
+  const direction = edge === "left" ? -1 : 1;
+  const onPointerDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      start.current = { x: e.clientX, width };
+      setDragging(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [width]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!start.current) return;
+      const next = clamp(start.current.width + direction * (e.clientX - start.current.x), min, max());
+      latestOnResize.current(next);
+    },
+    [direction, min, max, latestOnResize]
+  );
+  const endDrag = useCallback(() => {
+    start.current = null;
+    setDragging(false);
+  }, []);
+  const latestOnDraggingChange = useLatest(onDraggingChange);
+  useEffect(() => {
+    latestOnDraggingChange.current?.(dragging);
+  }, [dragging, latestOnDraggingChange]);
+  useEffect(() => {
+    if (!dragging) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || !start.current) return;
+      latestOnResize.current(start.current.width);
+      endDrag();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [dragging, endDrag, latestOnResize]);
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? BIG_STEP : STEP;
+    let next = null;
+    if (e.key === "ArrowLeft") next = width - direction * step;
+    else if (e.key === "ArrowRight") next = width + direction * step;
+    else if (e.key === "Home") next = min;
+    else if (e.key === "End") next = max();
+    else if (e.key === "Enter") next = defaultWidth;
+    if (next === null) return;
+    e.preventDefault();
+    onResize(clamp(next, min, max()));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max(),
+      "aria-valuenow": Math.round(width),
+      "data-resize-edge": edge,
+      "data-dragging": dragging || void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onDoubleClick: () => onResize(clamp(defaultWidth, min, max())),
+      onKeyDown,
+      className: cn(
+        // A narrow absolutely-positioned strip over the edge — never a flex child that takes width.
+        "group/edge absolute top-0 bottom-0 z-10 w-ds-2 cursor-col-resize touch-none select-none outline-none",
+        edge === "left" ? "-left-ds-1" : "-right-ds-1",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "absolute top-0 bottom-0 left-1/2 w-px -translate-x-1/2 transition-[width,background-color] duration-[var(--ds-transition-speed)]",
+            "group-hover/edge:w-[3px] group-hover/edge:bg-[var(--ds-accent-primary)]",
+            "group-focus-visible/edge:w-[3px] group-focus-visible/edge:bg-[var(--ds-accent-primary)]",
+            dragging && "w-[3px] bg-[var(--ds-accent-primary)]"
+          )
+        }
+      )
+    }
+  );
+}
+var remembered = /* @__PURE__ */ new Map();
+function useRememberedWidth(key) {
+  const [width, setWidth] = useState(() => key ? remembered.get(key) ?? null : null);
+  const remember = useCallback(
+    (w) => {
+      setWidth(w);
+      if (!key) return;
+      if (w === null) remembered.delete(key);
+      else remembered.set(key, w);
+    },
+    [key]
+  );
+  return [width, remember];
+}
+function pxOf(length) {
+  if (!length) return null;
+  const m = /^(\d+(?:\.\d+)?)px$/.exec(length.trim());
+  return m ? parseFloat(m[1]) : null;
+}
+function defaultMaxWidth(container) {
+  const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
+  return Math.round(base * 0.6);
+}
+function useDirtyGuard(dirty, onClose, onDiscard) {
+  const [wantsConfirm, setWantsConfirm] = useState(false);
+  const confirming = wantsConfirm && !!dirty;
+  const requestClose = useCallback(() => {
+    if (!dirty) {
+      onClose();
+      return;
+    }
+    setWantsConfirm((c) => !c);
+  }, [dirty, onClose]);
+  const keep = useCallback(() => setWantsConfirm(false), []);
+  const discard = useCallback(() => {
+    setWantsConfirm(false);
+    onDiscard?.();
+    onClose();
+  }, [onClose, onDiscard]);
+  return { confirming, requestClose, keep, discard };
+}
+function DiscardConfirm({ open, onKeep, onDiscard }) {
+  const keepRef = useRef(null);
+  const returnTo = useRef(null);
+  const overlay = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
+    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
+    keepRef.current?.focus();
+    return () => {
+      if (document.activeElement !== document.body) return;
+      const back = returnTo.current;
+      if (back && back.isConnected) {
+        back.focus();
+        return;
+      }
+      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
+      (first ?? overlay.current)?.focus();
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Unsaved changes",
+      "data-discard-confirm": "",
+      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
+      style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+          /* @__PURE__ */ jsx(Button, { ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
+          /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
+        ] })
+      ]
+    }
+  );
+}
+var DrawerFooterCtx = createContext(null);
+var slideClasses = {
+  right: {
+    panel: "top-0 right-0 h-full",
+    open: "translate-x-0",
+    closed: "translate-x-full"
+  },
+  left: {
+    panel: "top-0 left-0 h-full",
+    open: "translate-x-0",
+    closed: "-translate-x-full"
+  },
+  bottom: {
+    panel: "bottom-0 left-0 right-0",
+    open: "translate-y-0",
+    closed: "translate-y-full"
+  }
+};
+var borderByPosition = {
+  right: "border-l-[length:var(--ds-border-width)] border-l-[var(--ds-border-default)]",
+  left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
+  bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
+};
+function Drawer(props) {
+  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush, keepMounted, id, labelledBy, dirty, onDiscard } = props;
+  const isPhone = useBreakpoint("sm");
+  const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
+  const guard = useDirtyGuard(dirty, onClose, onDiscard);
+  const confirm = /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard });
+  const [actionsMap, setActionsMap] = useState(/* @__PURE__ */ new Map());
+  const registerActions = useCallback((formId, acts) => {
+    setActionsMap((prev) => new Map(prev).set(formId, acts));
+  }, []);
+  const unregisterActions = useCallback((formId) => {
+    setActionsMap((prev) => {
+      const next = new Map(prev);
+      next.delete(formId);
+      return next;
+    });
+  }, []);
+  const registeredActions = actionsMap.size > 0 ? /* @__PURE__ */ jsx(Fragment, { children: Array.from(actionsMap.values()) }) : null;
+  const effectiveFooter = footer ?? registeredActions;
+  const footerCtx = useMemo(
+    () => ({ registerActions, unregisterActions }),
+    [registerActions, unregisterActions]
+  );
+  if (isPhone && mobileMode === "sheet") {
+    return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(Sheet, { open, onClose: guard.requestClose, title, footer: effectiveFooter, confirm, container, flush, snapPoints, keepMounted, id, labelledBy, children }) });
+  }
+  return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(DrawerPanel, { ...props, footer: effectiveFooter, onClose: guard.requestClose, confirm }) });
+}
+function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth, confirm }) {
+  const nonModal = !modal;
+  const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
+  const canResize = nonModal && resizable && position !== "bottom";
+  const effectiveWidth = canResize && chosen !== null ? `${chosen}px` : width;
+  const minPx = pxOf(width) ?? 320;
+  const maxPx = () => pxOf(maxWidth) ?? defaultMaxWidth(container instanceof Element ? container : null);
+  const titleId = useId();
+  const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
+  const isMobile = useBreakpoint("sm");
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = useState(open);
+  const [hidden, setHidden] = useState(!open);
+  const onCloseRef = useLatest(onClose);
+  if (open && !mounted) setMounted(true);
+  if (open && hidden) setHidden(false);
+  const isTopLayer = useOverlayLayer(open);
+  useEffect(() => {
+    if (!open || nonModal) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, nonModal, container, onCloseRef, isTopLayer]);
+  useReturnFocus(open && !nonModal);
+  useFocusTrap(panelRef, open && !topOffset && !nonModal, isTopLayer);
+  useEffect(() => {
+    if (!open || !mounted || nonModal) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted, nonModal]);
+  useNonModalDialog(panelRef, open && mounted && nonModal, onClose, isTopLayer);
+  useCloseSettle(open, panelRef, () => {
+    if (keepMounted) setHidden(true);
+    else setMounted(false);
+  });
+  if (!mounted) return null;
+  const slide = slideClasses[position];
+  const isHorizontal = position === "left" || position === "right";
+  const positionClass = container ? "absolute" : "fixed";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        hidden: keepMounted && hidden ? true : void 0,
+        className: cn(
+          `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
+          // A non-modal panel never intercepts the page: the wrapper is inert to the
+          // pointer and only the panel itself accepts events.
+          nonModal ? "z-[var(--ds-z-overlay)] pointer-events-none" : cn("z-[var(--ds-z-modal)]", open ? "pointer-events-auto" : "pointer-events-none"),
+          topOffset ? "left-0 right-0 bottom-0" : "inset-0"
+        ),
+        style: topOffset ? { top: topOffset } : void 0,
+        children: [
+          !nonModal && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 transition-opacity duration-[var(--ds-transition-speed)]",
+                lightBackdrop ? "bg-black/15" : cn("bg-black/50", "[backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]"),
+                open ? "opacity-100" : "opacity-0"
+              ),
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              id,
+              role: "dialog",
+              "data-gs": "drawer",
+              "aria-modal": nonModal ? void 0 : "true",
+              "aria-labelledby": title ? titleId : labelledBy,
+              style: {
+                containerType: "inline-size",
+                width: isHorizontal ? effectiveWidth : void 0,
+                maxWidth: isHorizontal ? "100%" : void 0,
+                height: isMobile ? "100%" : void 0,
+                maxHeight: !isMobile && !isHorizontal ? "80vh" : void 0
+              },
+              className: cn(
+                `${positionClass} z-10 flex flex-col`,
+                nonModal && "pointer-events-auto",
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                // flush drops the edge border for children that draw their own (the mobile
+                // menu's Sidebar); a non-modal panel has no backdrop to separate it from
+                // the page, so it always keeps the border.
+                (!flush || nonModal) && borderByPosition[position],
+                "transition-transform duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                isHorizontal && position === "left" && "rounded-r-[var(--ds-radius-lg)] overflow-hidden",
+                isHorizontal && position === "right" && "rounded-l-[var(--ds-radius-lg)] overflow-hidden",
+                !isHorizontal && "rounded-t-[var(--ds-radius-lg)] overflow-hidden",
+                (lightBackdrop || nonModal) && "shadow-[var(--ds-shadow-overlay)]",
+                slide.panel,
+                open ? slide.open : slide.closed
+              ),
+              children: [
+                canResize && open && /* @__PURE__ */ jsx(
+                  ResizeEdge,
+                  {
+                    edge: position === "right" ? "left" : "right",
+                    width: chosen ?? minPx,
+                    min: minPx,
+                    max: maxPx,
+                    defaultWidth: minPx,
+                    onResize: (w) => remember(w === minPx ? null : w),
+                    label: "Resize panel"
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: {
+                      padding: "var(--ds-space-3) var(--ds-space-6)",
+                      minHeight: "calc(var(--ds-space-unit) * 6 + 1.75rem + 2px + var(--ds-border-width))"
+                    },
+                    children: [
+                      titleTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                confirm,
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
+function SkipLink({ href = "#main", children = "Skip to content", className }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: cn(
+        "sr-only focus:not-sr-only focus:fixed focus:top-[var(--ds-space-2)] focus:left-[var(--ds-space-2)] focus:z-[var(--ds-z-tooltip)]",
+        "focus:px-[var(--ds-space-3)] focus:py-[var(--ds-space-2)] focus:rounded-[var(--ds-radius-md)] focus:text-sm focus:font-medium",
+        "focus:bg-[var(--ds-bg-surface-elevated)] focus:text-[var(--ds-text-primary)] focus:shadow-[var(--ds-shadow-md)]",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--ds-accent-primary)]",
+        className
+      ),
+      children
+    }
+  );
+}
+var AppShellContext = createContext(null);
+function useAppShell() {
+  return useContext(AppShellContext);
+}
+var AppShell = forwardRef(function AppShell2({
+  layout = "sidebar",
+  sidebar,
+  mobileMenu,
+  mobileMenuWidth,
+  mobileMenuLightBackdrop,
+  mobileMenuFlush = true,
+  navbar,
+  mobileNav,
+  footer,
+  skipLink = true,
+  mainId = "main",
+  aside,
+  asideSide = "right",
+  launcher,
+  children,
+  className,
+  scrollable = true,
+  theme,
+  currentPath,
+  homePath = "/"
+}, ref) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [asideOpen, setAsideOpen] = useState(false);
+  const [asideFloating, setAsideFloating] = useState(false);
+  const isMobile = useBreakpoint("md");
+  const isSmallMobile = useBreakpoint("sm");
+  const isTablet = isMobile && !isSmallMobile;
+  const autoCollapsed = useBreakpoint("lg");
+  const [userCollapsed, setUserCollapsed] = useState(null);
+  const sidebarCollapsed = userCollapsed ?? autoCollapsed;
+  const hasSidebar = (layout === "sidebar" || layout === "sidebar-header") && sidebar != null;
+  const hasMobileMenu = mobileMenu != null;
+  const hasMobileNav = mobileNav != null;
+  const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
+  const [shellEl, setShellEl] = useState(null);
+  const [chrome, setChrome] = useState({});
+  const registerChrome = useCallback((kind, position) => {
+    setChrome((c) => c[kind] === position ? c : { ...c, [kind]: position });
+    return () => setChrome((c) => {
+      if (!(kind in c)) return c;
+      const next = { ...c };
+      delete next[kind];
+      return next;
+    });
+  }, []);
+  const navbarFloating = (chrome.navbar ?? theme?.navbarPosition) === "floating";
+  const sidebarFloating = hasSidebar && !isMobile && (chrome.sidebar ?? theme?.sidebarPosition) === "floating";
+  const isHome = currentPath != null && currentPath === homePath;
+  const hasFooter = footer != null && scrollable;
+  const mainRef = useRef(null);
+  useEffect(() => {
+    const main = mainRef.current;
+    if (!hasFooter || !shellEl || !main || typeof ResizeObserver === "undefined") {
+      shellEl?.style.removeProperty("--ds-main-height");
+      return;
+    }
+    const ro = new ResizeObserver(() => shellEl.style.setProperty("--ds-main-height", `${main.clientHeight}px`));
+    ro.observe(main);
+    return () => {
+      ro.disconnect();
+      shellEl.style.removeProperty("--ds-main-height");
+    };
+  }, [hasFooter, shellEl]);
+  const hasLauncher = !!launcher && !isSmallMobile;
+  const launcherProps = isValidElement(launcher) ? launcher.props : null;
+  const launcherCorner = !hasLauncher ? null : launcherProps?.variant === "ribbon" ? null : launcherProps?.edge === "bottom-left" ? "bottom-left" : launcherProps?.edge === "right" || launcherProps?.edge === "left" || launcherProps?.edge === "bottom" ? null : "bottom-right";
+  return /* @__PURE__ */ jsx(
+    AppShellContext,
+    {
+      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, hasFooter },
+      children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
+        setShellEl(el);
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
+        skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
+        layout === "sidebar-header" && navbar,
+        layout === "multi-column" && navbar,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
+          hasSidebar && !isMobile && /* @__PURE__ */ jsx("div", { className: "shrink-0 h-full", children: sidebar }),
+          aside && asideSide === "left" && aside,
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
+            layout === "sidebar" && navbar,
+            layout === "stacked" && navbar,
+            /* @__PURE__ */ jsx(
+              "main",
+              {
+                ref: mainRef,
+                id: mainId,
+                tabIndex: -1,
+                className: cn(
+                  "flex-1 min-h-0 focus:outline-none",
+                  scrollable ? "overflow-y-auto" : "relative",
+                  layout === "multi-column" && "flex"
+                ),
+                style: { containerType: "inline-size" },
+                children: scrollable ? footer ? /* @__PURE__ */ jsxs("div", { className: "min-h-full flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+                  footer
+                ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
+              }
+            )
+          ] }),
+          aside && asideSide === "right" && aside
+        ] }),
+        showMobileDrawer && isMobile && /* @__PURE__ */ jsx(
+          Drawer,
+          {
+            open: sidebarOpen,
+            onClose: () => setSidebarOpen(false),
+            position: "left",
+            width: mobileMenuWidth ?? "var(--ds-drawer-width)",
+            container: shellEl ?? void 0,
+            flush: mobileMenuFlush,
+            lightBackdrop: mobileMenuLightBackdrop,
+            topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
+            children: mobileMenu
+          }
+        ),
+        isSmallMobile && mobileNav && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-[var(--ds-z-sticky)]", children: mobileNav }),
+        !isSmallMobile && launcher
+      ] })
+    }
+  );
+});
+function useCompact(ref, breakpoint) {
+  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
+  const width = useElementWidth(ref);
+  return width > 0 && width < px;
+}
+function useElementWidth(ref) {
+  const [width, setWidth] = useState(0);
+  const check = useCallback(() => {
+    const next = ref.current?.offsetWidth ?? 0;
+    if (next > 0) setWidth(next);
+  }, [ref]);
+  useLayoutEffect(() => {
+    check();
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [check, ref]);
+  return width;
+}
+
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, DiscardConfirm, Drawer, DrawerFooterCtx, ResizeEdge, Sheet, SkipLink, Spinner, defaultMaxWidth, pxOf, useAppShell, useCloseSettle, useCompact, useDirtyGuard, useElementWidth, useRememberedWidth };
+//# sourceMappingURL=chunk-Z37HO5NU.js.map
+//# sourceMappingURL=chunk-Z37HO5NU.js.map