@tapizlabs/ui 0.1.5 → 0.1.6

package/dist/index.d.ts

@@ -408,9 +408,10 @@ interface PageHeaderProps {
     subtitle?: string;
     action?: ReactNode;
     icon?: ReactNode;
+    banner?: ReactNode;
     className?: string;
 }
-declare function PageHeader({ title, subtitle, action, icon, className }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, subtitle, action, icon, banner, className }: PageHeaderProps): react.JSX.Element;
 
 interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
     value: string;

package/dist/index.js

@@ -992,7 +992,7 @@ function Toast({ message, ok, durationMs = 5e3 }) {
   const borderColor = ok ? "var(--color-good)" : "var(--color-warn)";
   const accentColor = ok ? "var(--color-good)" : "var(--color-warn)";
   return createPortal(
-    /* @__PURE__ */ jsx20("div", { className: "pointer-events-none fixed bottom-20 left-4 right-4 z-60 flex justify-center sm:bottom-auto sm:left-auto sm:right-5 sm:top-5 sm:justify-end", children: /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx20("div", { className: "pointer-events-none fixed bottom-20 left-4 right-4 z-9999 flex justify-center min-[600px]:bottom-auto min-[600px]:left-auto min-[600px]:right-5 min-[600px]:top-5 min-[600px]:justify-end", children: /* @__PURE__ */ jsxs13(
       "div",
       {
         className: `${transform} pointer-events-auto relative flex w-full max-w-sm items-center gap-2.5 overflow-hidden px-4 py-3 text-sm font-medium transition-all duration-300 sm:w-auto sm:max-w-xs`,
@@ -1095,33 +1095,82 @@ function DefaultErrorFallback({
   label = "Tapiz UI \xB7 Runtime Error",
   reloadLabel = "Reload page"
 }) {
-  return /* @__PURE__ */ jsxs16("div", { className: "fixed inset-0 flex flex-col items-center justify-center overflow-hidden bg-ink-100 px-6", children: [
-    /* @__PURE__ */ jsx23(GridBg, {}),
-    /* @__PURE__ */ jsx23(Spotlight, { color: "rgba(255,100,100,0.06)" }),
-    /* @__PURE__ */ jsxs16("div", { className: "relative z-10 flex w-full max-w-sm animate-fade-in-up flex-col items-center gap-6 text-center", children: [
-      /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx23("div", { className: "font-mono text-[clamp(72px,16vw,120px)] font-bold leading-none tracking-[-0.04em] text-border-hi", children: "500" }),
-        /* @__PURE__ */ jsx23("div", { className: "mt-1 h-0.5 w-full opacity-35 [background:linear-gradient(90deg,transparent,var(--color-warn),transparent)]" })
-      ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx23("p", { className: "text-base font-semibold text-txt-1", children: title }),
-        /* @__PURE__ */ jsx23("p", { className: "font-mono text-[11px] leading-relaxed text-txt-3", children: description })
-      ] }),
-      /* @__PURE__ */ jsx23("div", { className: "bg-[rgba(255,180,0,0.04)] px-2 py-1 font-mono text-[9px] uppercase tracking-[.2em] text-warn [border:1px_solid_rgba(255,180,0,0.2)]", children: label }),
-      /* @__PURE__ */ jsx23("div", { className: "w-full", children: /* @__PURE__ */ jsxs16(
-        "button",
-        {
-          type: "button",
-          onClick: () => window.location.reload(),
-          className: "btn-primary w-full py-2.5 text-xs",
-          children: [
-            reloadLabel,
-            " \u2192"
-          ]
-        }
-      ) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: "fixed inset-0 flex flex-col items-center justify-center overflow-hidden px-6",
+      style: { background: "var(--color-ink-100)" },
+      children: [
+        /* @__PURE__ */ jsx23(GridBg, {}),
+        /* @__PURE__ */ jsx23(Spotlight, { color: "rgba(255,100,100,0.06)" }),
+        /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            className: "relative z-10 flex w-full max-w-sm flex-col items-center gap-6 text-center",
+            style: { animation: "var(--animate-fade-in-up)" },
+            children: [
+              /* @__PURE__ */ jsxs16("div", { children: [
+                /* @__PURE__ */ jsx23(
+                  "div",
+                  {
+                    className: "font-mono font-bold leading-none",
+                    style: { fontSize: "clamp(72px,16vw,120px)", color: "var(--color-border-hi)", letterSpacing: "-0.04em" },
+                    children: "500"
+                  }
+                ),
+                /* @__PURE__ */ jsx23(
+                  "div",
+                  {
+                    className: "mt-1 h-0.5 w-full",
+                    style: { background: "linear-gradient(90deg,transparent,rgba(255,80,80,0.7),transparent)", opacity: 0.5 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx23("p", { className: "text-base font-semibold", style: { color: "var(--color-txt-1)" }, children: title }),
+                /* @__PURE__ */ jsx23("p", { className: "font-mono text-[11px] leading-relaxed", style: { color: "var(--color-txt-3)" }, children: description })
+              ] }),
+              /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  className: "font-mono text-[9px] uppercase px-2 py-1",
+                  style: {
+                    letterSpacing: ".2em",
+                    color: "rgba(255,80,80,0.9)",
+                    border: "1px solid rgba(255,80,80,0.25)",
+                    background: "rgba(255,80,80,0.05)"
+                  },
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsx23("div", { className: "w-full", children: /* @__PURE__ */ jsxs16(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => window.location.reload(),
+                  style: {
+                    width: "100%",
+                    padding: "10px",
+                    fontSize: "12px",
+                    background: "var(--color-primary-300)",
+                    color: "var(--color-ink-100)",
+                    border: "none",
+                    cursor: "pointer",
+                    fontFamily: "var(--font-mono)",
+                    letterSpacing: "0.05em"
+                  },
+                  children: [
+                    reloadLabel,
+                    " \u2192"
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function GridBg() {
   return /* @__PURE__ */ jsx23("div", { className: "pointer-events-none absolute inset-0 opacity-50 bg-[linear-gradient(var(--color-border)_1px,transparent_1px),linear-gradient(90deg,var(--color-border)_1px,transparent_1px)] bg-size-[32px_32px]" });
@@ -1312,11 +1361,12 @@ function Tooltip({ text, children, position = "top", align = "center", width = "
     /* @__PURE__ */ jsxs19(
       "span",
       {
-        className: `pointer-events-none absolute ${alignClass} z-60 ${width} w-max px-2.5 py-1.5
+        className: `pointer-events-none absolute ${alignClass} ${width} w-max px-2.5 py-1.5
           text-center text-[11px] leading-snug
           opacity-0 group-hover:opacity-100 transition-opacity duration-150
           ${position === "top" ? "bottom-full mb-2" : "top-full mt-2"}`,
         style: {
+          zIndex: 60,
           background: "var(--color-ink-300)",
           border: "1px solid var(--color-border-hi)",
           color: "var(--color-txt-2)",
@@ -1477,7 +1527,7 @@ function InfoBanner(props) {
     const { text, variant = "info", className: className2 = "" } = props;
     const styles = variant === "warn" ? "bg-warn/8 border-warn/25 text-warn" : variant === "lock" ? "bg-warn/8 border-warn/30 text-warn" : "bg-primary-500/10 border-primary-100 text-primary-500";
     const icon = variant === "lock" ? /* @__PURE__ */ jsx32(LockIcon, { size: 14, className: "mt-1 shrink-0" }) : /* @__PURE__ */ jsx32(Info, { size: 14, className: "mt-1 shrink-0" });
-    return /* @__PURE__ */ jsxs22("div", { className: `flex items-start gap-2 border px-3 py-2.5 text-[13px] ${styles} ${className2}`, children: [
+    return /* @__PURE__ */ jsxs22("div", { className: `app-info-banner flex items-start gap-2 border px-3 py-2.5 text-[13px] ${styles} ${className2}`, children: [
       icon,
       /* @__PURE__ */ jsx32("p", { style: { fontFamily: "var(--font-mono)" }, children: text })
     ] });
@@ -1486,7 +1536,7 @@ function InfoBanner(props) {
   return /* @__PURE__ */ jsxs22(
     "div",
     {
-      className: `px-4 py-3 ${className}`,
+      className: `app-info-banner px-4 py-3 ${className}`,
       style: {
         background: "rgba(94,231,255,0.04)",
         border: "1px solid rgba(94,231,255,0.12)",
@@ -1509,20 +1559,23 @@ function InfoBanner(props) {
 
 // src/components/shared/PageHeader.tsx
 import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-function PageHeader({ title, subtitle, action, icon, className = "" }) {
+function PageHeader({ title, subtitle, action, icon, banner, className = "" }) {
   return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: `mb-5 flex flex-col gap-3 border-b border-border pb-4 animate-fade-in-up sm:flex-row sm:items-start sm:justify-between ${className}`.trim(),
+      className: `page-header mb-5 flex flex-col gap-3 border-b border-border pb-4 animate-fade-in-up ${className}`.trim(),
       children: [
-        /* @__PURE__ */ jsxs23("div", { children: [
-          subtitle ? /* @__PURE__ */ jsx33("div", { className: "kicker mb-1.5 text-primary-300!", children: subtitle }) : null,
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5", children: [
-            icon ? /* @__PURE__ */ jsx33("span", { className: "text-primary-300", children: icon }) : null,
-            /* @__PURE__ */ jsx33("h2", { className: "font-(--font-display) text-[22px] tracking-[-0.03em] text-txt-1", children: title })
-          ] })
+        /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs23("div", { children: [
+            subtitle ? /* @__PURE__ */ jsx33("div", { className: "kicker mb-1.5", children: subtitle }) : null,
+            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5", children: [
+              icon ? /* @__PURE__ */ jsx33("span", { className: "text-primary-300", children: icon }) : null,
+              /* @__PURE__ */ jsx33("h2", { className: "font-(--font-display) text-[22px] tracking-[-0.03em] text-txt-1", children: title })
+            ] })
+          ] }),
+          action ? /* @__PURE__ */ jsx33("div", { children: action }) : null
         ] }),
-        action ? /* @__PURE__ */ jsx33("div", { children: action }) : null
+        banner ? banner : null
       ]
     }
   );
@@ -1663,7 +1716,8 @@ function StatusBadge({ label, variant = "default", className = "" }) {
 }
 
 // src/components/shared/ActionMenu.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
 import { Fragment, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultMenuStyle = {
   background: "var(--color-ink-200)",
@@ -1680,23 +1734,117 @@ function ActionMenu({
   buttonSize = "sm",
   buttonVariant = "secondary",
   buttonClassName = "",
-  menuClassName = "absolute bottom-full right-0 z-50 mb-1 w-[min(20rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] overflow-auto sm:min-w-52 sm:w-auto",
+  menuClassName,
   menuStyle,
   fullWidth = false,
   closeLabel
 }) {
   const [open, setOpen] = useState5(false);
-  const rootRef = useRef2(null);
+  const [pos, setPos] = useState5(null);
+  const btnRef = useRef2(null);
+  const menuRef = useRef2(null);
+  useLayoutEffect(() => {
+    if (!open || !btnRef.current) return;
+    const updatePosition = () => {
+      const buttonElement = btnRef.current;
+      if (!buttonElement) return;
+      const rect = buttonElement.getBoundingClientRect();
+      const viewportPadding = 8;
+      const menuOffset = 4;
+      const menuW = Math.min(320, window.innerWidth - viewportPadding * 2);
+      const left = Math.max(
+        viewportPadding,
+        Math.min(rect.right - menuW, window.innerWidth - menuW - viewportPadding)
+      );
+      const estimatedMenuHeight = Math.min(320, items.length * 44 + 16);
+      const spaceAbove = Math.max(0, rect.top - viewportPadding - menuOffset);
+      const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - viewportPadding - menuOffset);
+      const preferBelow = spaceBelow >= estimatedMenuHeight || spaceBelow >= spaceAbove;
+      if (preferBelow) {
+        setPos({
+          top: Math.min(rect.bottom + menuOffset, window.innerHeight - viewportPadding),
+          left,
+          width: menuW,
+          maxHeight: Math.max(120, spaceBelow)
+        });
+        return;
+      }
+      setPos({
+        bottom: Math.max(window.innerHeight - rect.top + menuOffset, viewportPadding),
+        left,
+        width: menuW,
+        maxHeight: Math.max(120, spaceAbove)
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    document.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [items.length, open]);
   useEffect2(() => {
-    function handleOutside(event) {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
-        setOpen(false);
+    if (!open) return;
+    function handle(e) {
+      if (e instanceof KeyboardEvent) {
+        if (e.key === "Escape") setOpen(false);
+        return;
       }
+      const target = e.target;
+      if (btnRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setOpen(false);
     }
-    document.addEventListener("mousedown", handleOutside);
-    return () => document.removeEventListener("mousedown", handleOutside);
-  }, []);
-  return /* @__PURE__ */ jsxs26("div", { ref: rootRef, className: "relative", children: [
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handle);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handle);
+    };
+  }, [open]);
+  const menuNode = open && pos ? /* @__PURE__ */ jsxs26(Fragment, { children: [
+    /* @__PURE__ */ jsx38("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref: menuRef,
+        className: menuClassName ?? "overflow-auto",
+        style: {
+          position: "fixed",
+          top: pos.top !== void 0 ? pos.top : void 0,
+          bottom: pos.bottom !== void 0 ? pos.bottom : void 0,
+          left: pos.left,
+          width: pos.width,
+          maxWidth: "calc(100vw - 16px)",
+          zIndex: 9999,
+          ...defaultMenuStyle,
+          maxHeight: pos.maxHeight ?? defaultMenuStyle.maxHeight,
+          ...menuStyle
+        },
+        children: items.map((item, index) => /* @__PURE__ */ jsxs26("div", { children: [
+          index > 0 && item.danger ? /* @__PURE__ */ jsx38("div", { style: { borderTop: "1px solid var(--color-border)" } }) : null,
+          /* @__PURE__ */ jsxs26(
+            "button",
+            {
+              type: "button",
+              className: itemBaseClass,
+              style: { color: item.danger ? "var(--color-warn)" : "var(--color-txt-2)" },
+              disabled: item.disabled || item.loading,
+              onClick: () => {
+                setOpen(false);
+                item.onSelect();
+              },
+              children: [
+                item.loading ? /* @__PURE__ */ jsx38(Spinner, { color: "text-[var(--color-txt-3)]" }) : /* @__PURE__ */ jsx38("span", { className: item.danger ? "shrink-0 text-warn" : "shrink-0 text-primary-300", children: item.icon }),
+                /* @__PURE__ */ jsx38("span", { children: item.label })
+              ]
+            }
+          )
+        ] }, item.key))
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsxs26("div", { ref: btnRef, className: fullWidth ? "relative w-full" : "relative inline-block max-w-full", children: [
     /* @__PURE__ */ jsx38(
       Button,
       {
@@ -1710,37 +1858,7 @@ function ActionMenu({
         children: label
       }
     ),
-    open ? /* @__PURE__ */ jsxs26(Fragment, { children: [
-      /* @__PURE__ */ jsx38(
-        "button",
-        {
-          type: "button",
-          className: "fixed inset-0 z-40 bg-black/10 backdrop-blur-[3px]",
-          "aria-label": closeLabel ?? label,
-          onClick: () => setOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsx38("div", { className: menuClassName, style: { ...defaultMenuStyle, ...menuStyle }, children: items.map((item, index) => /* @__PURE__ */ jsxs26("div", { children: [
-        index > 0 && item.danger ? /* @__PURE__ */ jsx38("div", { style: { borderTop: "1px solid var(--color-border)" } }) : null,
-        /* @__PURE__ */ jsxs26(
-          "button",
-          {
-            type: "button",
-            className: itemBaseClass,
-            style: { color: item.danger ? "var(--color-warn)" : "var(--color-txt-2)" },
-            disabled: item.disabled || item.loading,
-            onClick: () => {
-              setOpen(false);
-              item.onSelect();
-            },
-            children: [
-              item.loading ? /* @__PURE__ */ jsx38(Spinner, { color: "text-[var(--color-txt-3)]" }) : /* @__PURE__ */ jsx38("span", { className: item.danger ? "shrink-0 text-warn" : "shrink-0 text-primary-300", children: item.icon }),
-              /* @__PURE__ */ jsx38("span", { children: item.label })
-            ]
-          }
-        )
-      ] }, item.key)) })
-    ] }) : null
+    typeof document !== "undefined" ? createPortal4(menuNode, document.body) : null
   ] });
 }