@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/chunk-AB3X7QTE.js

@@ -0,0 +1,505 @@
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { effectCategoryOf } from './chunk-UXLE3IPR.js';
+import { useThemeScope, Box, useTapReveal, Typography, cn, domPassthrough, usePresence, useDialogBehavior, SurfaceBoundary, VStack, useTranslate } from './chunk-4YXBKHHM.js';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useId, useState, useRef, useLayoutEffect, useEffect } from 'react';
+import { getStdOperatorMeta } from '@almadar/std/registry';
+
+// src/lib/portalRoot.ts
+function getOrCreatePortalRoot() {
+  let root = document.getElementById("ui-slot-portal-root");
+  if (!root) {
+    root = document.createElement("div");
+    root.id = "ui-slot-portal-root";
+    root.style.position = "relative";
+    root.style.zIndex = "9999";
+    document.body.appendChild(root);
+  }
+  return root;
+}
+function ThemedPortal({ children, container }) {
+  const { theme, mode, vars } = useThemeScope();
+  const scoped = theme !== void 0 || vars !== void 0;
+  return createPortal(
+    scoped ? /* @__PURE__ */ jsx(Box, { "data-theme": theme, className: mode ? `contents ${mode}` : "contents", style: vars, children }) : children,
+    container ?? getOrCreatePortalRoot()
+  );
+}
+var TRIGGER_GAP = 8;
+var arrowClasses = {
+  top: "top-full left-1/2 -translate-x-1/2 border-t-primary border-l-transparent border-r-transparent border-b-transparent",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-primary border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-primary border-t-transparent border-b-transparent border-r-transparent",
+  right: "right-full top-1/2 -translate-y-1/2 border-r-primary border-t-transparent border-b-transparent border-l-transparent"
+};
+function computeTooltipStyle(position, triggerRect) {
+  switch (position) {
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2,
+        top: triggerRect.bottom + TRIGGER_GAP,
+        transform: "translateX(-50%)"
+      };
+    case "left":
+      return {
+        left: triggerRect.left - TRIGGER_GAP,
+        top: triggerRect.top + triggerRect.height / 2,
+        transform: "translate(-100%, -50%)"
+      };
+    case "right":
+      return {
+        left: triggerRect.right + TRIGGER_GAP,
+        top: triggerRect.top + triggerRect.height / 2,
+        transform: "translateY(-50%)"
+      };
+    case "top":
+    default:
+      return {
+        left: triggerRect.left + triggerRect.width / 2,
+        top: triggerRect.top - TRIGGER_GAP,
+        transform: "translate(-50%, -100%)"
+      };
+  }
+}
+var Tooltip = ({
+  content,
+  children,
+  position = "top",
+  delay = 200,
+  hideDelay = 0,
+  showArrow = true,
+  className,
+  ...rest
+}) => {
+  const tooltipId = useId();
+  const [isVisible, setIsVisible] = useState(false);
+  const [triggerRect, setTriggerRect] = useState(null);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const showTimeoutRef = useRef(null);
+  const hideTimeoutRef = useRef(null);
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+  };
+  const handleMouseEnter = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    updatePosition();
+    showTimeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, hideDelay);
+  };
+  const { triggerProps } = useTapReveal({
+    onReveal: handleMouseEnter,
+    onDismiss: handleMouseLeave,
+    refs: [triggerRef, tooltipRef]
+  });
+  useLayoutEffect(() => {
+    if (isVisible) {
+      updatePosition();
+    }
+  }, [isVisible]);
+  useEffect(() => {
+    if (!isVisible) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      setIsVisible(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isVisible]);
+  useEffect(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+  const triggerElement = React.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const child = triggerElement;
+  const childRef = child.props.ref ?? child.ref;
+  const setTriggerRef = (el) => {
+    triggerRef.current = el;
+    if (typeof childRef === "function") childRef(el);
+    else if (childRef) childRef.current = el;
+  };
+  const trigger = React.cloneElement(child, {
+    ref: setTriggerRef,
+    "aria-describedby": isVisible ? [child.props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : child.props["aria-describedby"],
+    onMouseEnter: (e) => {
+      child.props.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      child.props.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onFocus: (e) => {
+      child.props.onFocus?.(e);
+      handleMouseEnter();
+    },
+    onBlur: (e) => {
+      child.props.onBlur?.(e);
+      handleMouseLeave();
+    },
+    onPointerDown: (e) => {
+      triggerProps.onPointerDown(e);
+      child.props.onPointerDown?.(e);
+    }
+  });
+  const tooltipContent = isVisible && triggerRect ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tooltipRef,
+      ...domPassthrough(rest),
+      id: tooltipId,
+      className: cn(
+        "fixed z-50 px-3 py-2 max-w-xs",
+        "bg-primary text-primary-foreground",
+        "shadow-elevation-popover rounded-container",
+        "text-sm pointer-events-none",
+        "break-words whitespace-normal",
+        "h-auto min-h-fit",
+        className
+      ),
+      style: computeTooltipStyle(position, triggerRect),
+      role: "tooltip",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full break-words whitespace-normal h-auto", children: typeof content === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary-foreground break-words whitespace-normal", children: content }) : /* @__PURE__ */ jsx("div", { className: "break-words whitespace-normal", children: content }) }),
+        showArrow && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute w-0 h-0 border-heavy",
+              arrowClasses[position]
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    typeof window !== "undefined" && tooltipContent ? /* @__PURE__ */ jsx(ThemedPortal, { children: tooltipContent }) : tooltipContent
+  ] });
+};
+Tooltip.displayName = "Tooltip";
+var INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])';
+var HOVER_CLOSE_DELAY_MS = 150;
+var arrowClasses2 = {
+  top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-white border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
+  right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
+};
+var VIEWPORT_EDGE_PADDING = 8;
+var TRIGGER_GAP2 = 8;
+function placePopover(position, trigger, panel, viewport) {
+  const clamp = (value, size, extent) => Math.max(VIEWPORT_EDGE_PADDING, Math.min(value, Math.max(VIEWPORT_EDGE_PADDING, extent - size - VIEWPORT_EDGE_PADDING)));
+  if (position === "left" || position === "right") {
+    const rightLeft = trigger.right + TRIGGER_GAP2;
+    const leftLeft = trigger.left - panel.width - TRIGGER_GAP2;
+    const fitsRight = rightLeft + panel.width <= viewport.width - VIEWPORT_EDGE_PADDING;
+    const fitsLeft = leftLeft >= VIEWPORT_EDGE_PADDING;
+    const side2 = position === "right" ? fitsRight || !fitsLeft ? "right" : "left" : fitsLeft || !fitsRight ? "left" : "right";
+    const left2 = clamp(side2 === "right" ? rightLeft : leftLeft, panel.width, viewport.width);
+    const top2 = clamp(trigger.top + trigger.height / 2 - panel.height / 2, panel.height, viewport.height);
+    return { side: side2, left: left2, top: top2 };
+  }
+  const aboveTop = trigger.top - TRIGGER_GAP2 - panel.height;
+  const belowTop = trigger.bottom + TRIGGER_GAP2;
+  const fitsAbove = aboveTop >= VIEWPORT_EDGE_PADDING;
+  const fitsBelow = belowTop + panel.height <= viewport.height - VIEWPORT_EDGE_PADDING;
+  const side = position === "top" ? fitsAbove || !fitsBelow ? "top" : "bottom" : fitsBelow || !fitsAbove ? "bottom" : "top";
+  const left = clamp(trigger.left + trigger.width / 2 - panel.width / 2, panel.width, viewport.width);
+  const top = clamp(side === "top" ? aboveTop : belowTop, panel.height, viewport.height);
+  return { side, left, top };
+}
+var Popover = ({
+  content,
+  children,
+  position = "bottom",
+  trigger = "click",
+  showArrow = true,
+  open,
+  onOpenChange,
+  className,
+  ...rest
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpen = open !== void 0 ? open : uncontrolledOpen;
+  const setIsOpen = (next) => {
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const [triggerRect, setTriggerRect] = useState(null);
+  const [panelSize, setPanelSize] = useState({ width: 0, height: 0 });
+  const popoverWidth = panelSize.width;
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const { mounted, className: panelAnim, onAnimationEnd } = usePresence(isOpen, { animation: "popover" });
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+    if (popoverRef.current) {
+      setPanelSize({ width: popoverRef.current.offsetWidth, height: popoverRef.current.offsetHeight });
+    }
+  };
+  const handleOpen = () => {
+    updatePosition();
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    cancelHoverClose();
+    setIsOpen(false);
+  };
+  const closeTimer = useRef(null);
+  const cancelHoverClose = () => {
+    if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const scheduleHoverClose = () => {
+    cancelHoverClose();
+    closeTimer.current = setTimeout(handleClose, HOVER_CLOSE_DELAY_MS);
+  };
+  const hoverOpen = () => {
+    cancelHoverClose();
+    if (!isOpen) handleOpen();
+  };
+  useEffect(() => cancelHoverClose, []);
+  const panelId = useId();
+  const focusReturnRef = useRef(null);
+  useDialogBehavior({ open: isOpen, containerRef: popoverRef, onEscape: handleClose, modal: false, ...trigger === "click" ? { returnFocusRef: focusReturnRef } : {} });
+  const handleToggle = () => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    let raf = 0;
+    let lastTop = Number.NaN;
+    let lastLeft = Number.NaN;
+    const track = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect && (rect.top !== lastTop || rect.left !== lastLeft)) {
+        lastTop = rect.top;
+        lastLeft = rect.left;
+        updatePosition();
+      }
+      raf = requestAnimationFrame(track);
+    };
+    raf = requestAnimationFrame(track);
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!mounted) setPanelSize({ width: 0, height: 0 });
+  }, [mounted]);
+  useLayoutEffect(() => {
+    if (isOpen && popoverRef.current) {
+      const width = popoverRef.current.offsetWidth;
+      const height = popoverRef.current.offsetHeight;
+      if (width !== panelSize.width || height !== panelSize.height) {
+        setPanelSize({ width, height });
+      }
+    }
+  });
+  useEffect(() => {
+    if (trigger !== "click") {
+      return;
+    }
+    const handleClickOutside = (e) => {
+      if (isOpen && popoverRef.current && !popoverRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        handleClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, trigger]);
+  const { triggerProps: tapTriggerProps } = useTapReveal({
+    enabled: trigger === "hover",
+    onReveal: handleOpen,
+    onDismiss: handleClose,
+    refs: [triggerRef, popoverRef]
+  });
+  const handlerProps = trigger === "click" ? {
+    onClick: handleToggle
+  } : {
+    onMouseEnter: hoverOpen,
+    onMouseLeave: scheduleHoverClose,
+    onFocus: hoverOpen,
+    onBlur: scheduleHoverClose,
+    onPointerDown: tapTriggerProps.onPointerDown,
+    "data-popover-open": String(isOpen)
+  };
+  const wrapsContent = !React.isValidElement(children);
+  const [innerControl, setInnerControl] = useState(null);
+  useLayoutEffect(() => {
+    if (!wrapsContent || trigger !== "click") return;
+    setInnerControl(triggerRef.current?.querySelector(INTERACTIVE_SELECTOR) ?? null);
+  }, [wrapsContent, trigger, children]);
+  useLayoutEffect(() => {
+    focusReturnRef.current = innerControl ?? triggerRef.current;
+  });
+  useLayoutEffect(() => {
+    if (innerControl === null) return;
+    innerControl.setAttribute("aria-expanded", String(isOpen));
+    innerControl.setAttribute("aria-haspopup", "dialog");
+    if (mounted) innerControl.setAttribute("aria-controls", panelId);
+    else innerControl.removeAttribute("aria-controls");
+  }, [innerControl, isOpen, mounted, panelId]);
+  const triggerIsWrapper = innerControl === null;
+  const childElement = !wrapsContent ? children : trigger === "click" && triggerIsWrapper ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleToggle();
+        }
+      },
+      children
+    }
+  ) : /* @__PURE__ */ jsx("span", { children });
+  const childPointerDown = childElement.props.onPointerDown;
+  const triggerElement = React.cloneElement(
+    childElement,
+    {
+      ref: triggerRef,
+      ...handlerProps,
+      // Dialog semantics belong to a click-opened panel; a hover popover is a tooltip.
+      ...trigger === "click" && triggerIsWrapper ? {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        ...mounted ? { "aria-controls": panelId } : void 0
+      } : void 0,
+      ...trigger === "hover" ? {
+        onPointerDown: (e) => {
+          tapTriggerProps.onPointerDown(e);
+          childPointerDown?.(e);
+        }
+      } : void 0
+    }
+  );
+  const placement = triggerRect ? placePopover(position, triggerRect, panelSize, {
+    width: typeof window !== "undefined" ? window.innerWidth : 1024,
+    height: typeof window !== "undefined" ? window.innerHeight : 768
+  }) : null;
+  const panel = mounted && placement ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popoverRef,
+      className: cn(
+        "fixed z-50 p-4",
+        "bg-card surface-material rounded-container border-heavy border-border shadow-elevation-popover",
+        panelAnim,
+        className
+      ),
+      style: {
+        left: placement.left,
+        top: placement.top,
+        // Sized by its content, not by the room right of `left`: a placement-dependent width re-places it forever.
+        width: "max-content",
+        maxWidth: `calc(100vw - ${2 * VIEWPORT_EDGE_PADDING}px)`,
+        ...popoverWidth === 0 ? { visibility: "hidden" } : void 0
+      },
+      ...domPassthrough(rest),
+      id: panelId,
+      role: "dialog",
+      "aria-label": rest["aria-label"] ?? (typeof content === "string" ? content : void 0),
+      onAnimationEnd,
+      onMouseEnter: trigger === "hover" ? hoverOpen : void 0,
+      onMouseLeave: trigger === "hover" ? scheduleHoverClose : void 0,
+      children: [
+        typeof content === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: content }) : /* @__PURE__ */ jsx(SurfaceBoundary, { children: content }),
+        showArrow && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute w-0 h-0 border-heavy",
+              arrowClasses2[placement.side]
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerElement,
+    panel && typeof document !== "undefined" ? /* @__PURE__ */ jsx(ThemedPortal, { children: panel }) : panel
+  ] });
+};
+Popover.displayName = "Popover";
+var AvlExplain = ({ lines, note, code, children }) => {
+  if (note !== void 0 || code !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: "hover",
+        position: "top",
+        content: /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "max-w-sm", children: [
+          note?.title ? /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", children: note.title }) : null,
+          note ? /* @__PURE__ */ jsx(Typography, { variant: "small", children: note.body }) : null,
+          /* @__PURE__ */ jsx(VStack, { gap: "none", className: note ? "border-t border-border pt-1" : void 0, children: lines.map((line, i) => /* @__PURE__ */ jsx(Typography, { variant: "caption", color: i === 0 ? "inherit" : "muted", weight: i === 0 ? "semibold" : "normal", children: line }, i)) }),
+          code === void 0 ? null : /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "pre",
+              dir: "ltr",
+              "data-testid": "avl-explain-code",
+              className: "m-0 max-h-48 overflow-auto rounded-sm bg-muted px-2 py-1 font-mono text-xs whitespace-pre",
+              children: code
+            }
+          )
+        ] }),
+        children
+      }
+    );
+  }
+  if (lines.length === 0) return children;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      position: "top",
+      content: /* @__PURE__ */ jsx(VStack, { gap: "none", children: lines.map((line, i) => /* @__PURE__ */ jsx(Box, { as: "span", className: i === 0 ? "font-semibold" : "opacity-80", children: line }, i)) }),
+      children
+    }
+  );
+};
+AvlExplain.displayName = "AvlExplain";
+function useEffectLines(effectType) {
+  const { t } = useTranslate();
+  const category = effectCategoryOf(effectType);
+  const description = getStdOperatorMeta(effectType)?.description;
+  return [effectType, ...category ? [t(`avl.effectCategory.${category}`)] : [], ...description ? [description] : []];
+}
+var AvlEffectChip = ({ effectType, size = 16, note, code }) => {
+  const lines = useEffectLines(effectType);
+  const half = size / 2;
+  return /* @__PURE__ */ jsx(AvlExplain, { lines, note, code, children: /* @__PURE__ */ jsx(Box, { as: "span", role: "img", tabIndex: 0, "aria-label": effectType, "data-testid": "avl-effect-chip", className: "inline-flex shrink-0 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(AvlEffect, { x: half, y: half, effectType, size: half / 1.2 - 0.5, showBackground: true }) }) }) });
+};
+AvlEffectChip.displayName = "AvlEffectChip";
+
+export { AvlEffectChip, AvlExplain, Popover, ThemedPortal, Tooltip, getOrCreatePortalRoot, useEffectLines };