@geomak/ui 6.20.0 → 6.21.0

package/dist/index.js

@@ -1,9 +1,10 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React24, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React26, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -692,7 +693,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React24.forwardRef(function Button2({
+var Button = React26.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -749,6 +750,80 @@ var Button = React24.forwardRef(function Button2({
 });
 Button.displayName = "Button";
 var Button_default = Button;
+var Chevron = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    className: "h-4 w-4 transition-transform duration-150 group-data-[state=open]:rotate-180",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
+  }
+);
+function MenuButton({
+  label,
+  items,
+  variant = "secondary",
+  size = "md",
+  icon,
+  hideChevron = false,
+  disabled,
+  align = "start",
+  side = "bottom",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button_default,
+      {
+        variant,
+        size,
+        icon,
+        disabled,
+        className: `group ${className}`.trim(),
+        content: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          label,
+          !hideChevron && /* @__PURE__ */ jsx(Chevron, {})
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      {
+        align,
+        side,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: [
+          "z-[400] min-w-[10rem] rounded-lg border border-border bg-surface p-1 shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+        ].join(" "),
+        children: items.map((item) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenu.Item,
+            {
+              disabled: item.disabled,
+              onSelect: () => item.onSelect?.(),
+              className: [
+                "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
+                "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+                item.danger ? "text-status-error data-[highlighted]:bg-status-error/10" : "text-foreground data-[highlighted]:bg-surface-raised"
+              ].join(" "),
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+              ]
+            }
+          )
+        ] }, item.key))
+      }
+    ) })
+  ] });
+}
 var SIZE_MAP = {
   sm: 400,
   md: 600,
@@ -1092,7 +1167,7 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
   const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
   const overflowing = scrollable && (edges.start || edges.end);
   return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
-    scrollable && edges.start && /* @__PURE__ */ jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
+    scrollable && edges.start && /* @__PURE__ */ jsx(Chevron2, { side: "start", orientation, onClick: () => nudge(-1) }),
     /* @__PURE__ */ jsx(
       TabsPrimitive.List,
       {
@@ -1103,11 +1178,11 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
         children
       }
     ),
-    scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) }),
+    scrollable && edges.end && /* @__PURE__ */ jsx(Chevron2, { side: "end", orientation, onClick: () => nudge(1) }),
     overflowing && /* @__PURE__ */ jsx(OverflowMenu, {})
   ] });
 }
-function Chevron({ side, orientation, onClick }) {
+function Chevron2({ side, orientation, onClick }) {
   const horizontal = orientation === "horizontal";
   const rotate = horizontal ? side === "start" ? "rotate-180" : "" : side === "start" ? "-rotate-90" : "rotate-90";
   return /* @__PURE__ */ jsx(
@@ -1459,7 +1534,7 @@ function Accordion2({
     }
   );
 }
-var Chevron2 = /* @__PURE__ */ jsx(
+var Chevron3 = /* @__PURE__ */ jsx(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1491,7 +1566,7 @@ function AccordionItem({ value, title, icon, children, disabled, className = ""
             children: [
               icon && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center text-foreground-muted group-data-[state=open]/acc:text-accent", children: icon }),
               /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", children: title }),
-              Chevron2
+              Chevron3
             ]
           }
         ) }),
@@ -1661,6 +1736,156 @@ function Badge({
     !hidden && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex", children: indicator })
   ] });
 }
+var SIZES = {
+  sm: { box: "h-7 w-7 text-xs", center: 14, title: "text-xs", desc: "text-[11px]" },
+  md: { box: "h-9 w-9 text-sm", center: 18, title: "text-sm", desc: "text-xs" }
+};
+var Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, "aria-hidden": "true", className: "h-1/2 w-1/2 animate-check-pop", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 6L9 17l-5-5" }) });
+var Cross = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, "aria-hidden": "true", className: "h-1/2 w-1/2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6 6 18M6 6l12 12" }) });
+var Spinner = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-1/2 w-1/2 animate-spin", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z" }) });
+function Indicator({ state, index, step, sizeKey }) {
+  const reduced = useReducedMotion();
+  const s = SIZES[sizeKey];
+  const base = `relative z-10 flex flex-shrink-0 items-center justify-center rounded-full font-semibold transition-colors ${s.box}`;
+  const tone = {
+    completed: "bg-accent text-accent-fg",
+    active: "border-2 border-accent bg-surface text-accent",
+    loading: "border-2 border-accent bg-surface text-accent",
+    error: "bg-status-error text-white",
+    pending: "border border-border bg-surface text-foreground-muted"
+  };
+  const content = step.icon ?? (state === "completed" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? /* @__PURE__ */ jsx(Cross, {}) : state === "loading" ? /* @__PURE__ */ jsx(Spinner, {}) : index + 1);
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: `${base} ${tone[state]}`,
+      initial: false,
+      animate: reduced ? void 0 : { scale: state === "active" || state === "loading" ? 1.06 : 1 },
+      transition: { type: "spring", stiffness: 320, damping: 24 },
+      "aria-current": state === "active" || state === "loading" ? "step" : void 0,
+      children: content
+    }
+  );
+}
+function VConnector({ filled, reduced }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative my-1 w-0.5 flex-1 bg-border", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-0 bg-accent",
+      style: { originY: 0 },
+      initial: false,
+      animate: { scaleY: filled ? 1 : 0 },
+      transition: reduced ? { duration: 0 } : { duration: 0.35, ease: [0.16, 1, 0.3, 1] }
+    }
+  ) });
+}
+function Stepper({
+  steps,
+  current,
+  status = "active",
+  orientation = "horizontal",
+  responsive = true,
+  onStepClick,
+  size = "md",
+  className = ""
+}) {
+  const reduced = useReducedMotion();
+  const [forcedVertical, setForcedVertical] = useState(false);
+  useEffect(() => {
+    if (!responsive || orientation === "vertical") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    const apply = (e) => setForcedVertical(e.matches);
+    apply(mq);
+    const handler = (e) => apply(e);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [responsive, orientation]);
+  const vertical = orientation === "vertical" || forcedVertical;
+  const s = SIZES[size];
+  const stateOf = (i) => i < current ? "completed" : i === current ? status : "pending";
+  const Label = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
+    step.description && /* @__PURE__ */ jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
+  ] });
+  const clickable = (i) => Boolean(onStepClick) && i <= current;
+  const stepButton = (i, node) => clickable(i) ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onStepClick?.(i), className: "rounded-md text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-accent", children: node }) : node;
+  if (vertical) {
+    return /* @__PURE__ */ jsx("ol", { className: ["flex flex-col", className].filter(Boolean).join(" "), children: steps.map((step, i) => {
+      const state = stateOf(i);
+      const last = i === steps.length - 1;
+      return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center self-stretch", children: [
+          stepButton(i, /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size })),
+          !last && /* @__PURE__ */ jsx(VConnector, { filled: i < current, reduced })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label, { step, state, align: "left" })) })
+      ] }, step.key);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: ["flex items-start", className].filter(Boolean).join(" "), children: steps.map((step, i) => {
+    const state = stateOf(i);
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex flex-1 flex-col items-center last:flex-none", children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-1/2 h-0.5 w-full bg-border", style: { top: s.center - 1 }, children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "absolute inset-0 bg-accent",
+          style: { originX: 0 },
+          initial: false,
+          animate: { scaleX: i <= current ? 1 : 0 },
+          transition: reduced ? { duration: 0 } : { duration: 0.35, ease: [0.16, 1, 0.3, 1] }
+        }
+      ) }),
+      stepButton(i, /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size }),
+        /* @__PURE__ */ jsx(Label, { step, state, align: "center" })
+      ] }))
+    ] }, step.key);
+  }) });
+}
+var Check2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, "aria-hidden": "true", className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 6L9 17l-5-5" }) });
+var Cross2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, "aria-hidden": "true", className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6 6 18M6 6l12 12" }) });
+var NODE = {
+  complete: "bg-accent text-accent-fg border-accent",
+  current: "bg-surface text-accent border-accent",
+  upcoming: "bg-surface text-transparent border-border",
+  error: "bg-status-error text-white border-status-error"
+};
+function Timeline({ events, current, className = "" }) {
+  const statusOf = (e, i) => {
+    if (e.status) return e.status;
+    if (current == null) return "upcoming";
+    return i < current ? "complete" : i === current ? "current" : "upcoming";
+  };
+  return /* @__PURE__ */ jsx("ol", { className: ["flex flex-col", className].filter(Boolean).join(" "), children: events.map((event, i) => {
+    const status = statusOf(event, i);
+    const last = i === events.length - 1;
+    const railFilled = status === "complete";
+    return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center self-stretch", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: [
+              "relative z-10 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+              NODE[status]
+            ].join(" "),
+            children: [
+              status === "current" && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-breathe rounded-full ring-2 ring-accent/40", "aria-hidden": "true" }),
+              event.icon ?? (status === "complete" ? /* @__PURE__ */ jsx(Check2, {}) : status === "error" ? /* @__PURE__ */ jsx(Cross2, {}) : /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${status === "current" ? "bg-accent" : "bg-border"}` }))
+            ]
+          }
+        ),
+        !last && /* @__PURE__ */ jsx("span", { className: `my-1 w-0.5 flex-1 ${railFilled ? "bg-accent" : "bg-border"}` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: last ? "pb-0" : "pb-6", children: [
+        /* @__PURE__ */ jsx("div", { className: `text-sm font-medium leading-tight ${status === "upcoming" ? "text-foreground-muted" : "text-foreground"}`, children: event.title }),
+        event.description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs leading-snug text-foreground-secondary", children: event.description }),
+        event.timestamp && /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] uppercase tracking-wide text-foreground-muted", children: event.timestamp })
+      ] })
+    ] }, event.key);
+  }) });
+}
 var SIZE3 = {
   sm: "h-5 min-w-[20px] px-1.5 text-[11px]",
   md: "h-6 min-w-[24px] px-2 text-xs"
@@ -1675,7 +1900,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1767,7 +1992,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React24.Children.toArray(children);
+  const slides = React26.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1822,7 +2047,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React24.Children.toArray(children);
+  const slides = React26.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -2315,7 +2540,7 @@ function EmptyCart({
   );
 }
 var defaultFormat = (v) => `${v < 0 ? "-" : ""}$${Math.abs(v).toFixed(2)}`;
-var Stepper = ({
+var Stepper2 = ({
   quantity,
   max,
   onChange
@@ -2348,7 +2573,7 @@ function Cart({
         /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: it.name }),
         it.meta && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-foreground-muted mt-0.5", children: it.meta }),
         /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Stepper, { quantity: it.quantity, max: it.max, onChange: (q) => onQuantityChange?.(it.id, Math.max(1, q)) }),
+          /* @__PURE__ */ jsx(Stepper2, { quantity: it.quantity, max: it.max, onChange: (q) => onQuantityChange?.(it.id, Math.max(1, q)) }),
           onRemove && /* @__PURE__ */ jsx(
             "button",
             {
@@ -4316,7 +4541,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React24.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React26.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4817,7 +5042,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5361,8 +5586,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
 }
-var elementsOfType = (children, type) => React24.Children.toArray(children).filter(
-  (c) => React24.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React26.Children.toArray(children).filter(
+  (c) => React26.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -5399,9 +5624,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React24.Children.toArray(panel.props.children);
+  const nodes = React26.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React24.isValidElement(node)) return null;
+    if (!React26.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -5591,6 +5816,101 @@ function AppShell({
     ] })
   ] });
 }
+function parseJwt(token) {
+  try {
+    const part = token.split(".")[1];
+    if (!part || typeof atob === "undefined") return null;
+    const json = decodeURIComponent(
+      atob(part.replace(/-/g, "+").replace(/_/g, "/")).split("").map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
+    );
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function tokenValid(token) {
+  const payload = parseJwt(token);
+  if (!payload) return false;
+  const exp = typeof payload.exp === "number" ? payload.exp : null;
+  if (exp == null) return true;
+  return exp * 1e3 > Date.now();
+}
+var has = (have, need, all) => all ? need.every((n) => have?.includes(n)) : need.some((n) => have?.includes(n));
+var Spinner2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-6 w-6 animate-spin text-accent", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z" }) });
+function SecureLayout({
+  children,
+  isAuthenticated,
+  token,
+  roles,
+  requiredRoles,
+  requireAllRoles,
+  permissions,
+  requiredPermissions,
+  requireAllPermissions,
+  canAccess,
+  loadingFallback,
+  fallback,
+  onDeny,
+  className = ""
+}) {
+  const reduced = useReducedMotion();
+  const [state, setState] = useState("checking");
+  const rolesKey = JSON.stringify(roles);
+  const requiredRolesKey = JSON.stringify(requiredRoles);
+  const permissionsKey = JSON.stringify(permissions);
+  const requiredPermissionsKey = JSON.stringify(requiredPermissions);
+  useEffect(() => {
+    let cancelled = false;
+    setState("checking");
+    const evaluate = async () => {
+      let authed = isAuthenticated;
+      if (authed === void 0 && token !== void 0) authed = tokenValid(token);
+      if (authed === void 0) authed = true;
+      if (!authed) return false;
+      if (requiredRoles?.length && !has(roles, requiredRoles, requireAllRoles)) return false;
+      if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
+      if (canAccess && !await canAccess()) return false;
+      return true;
+    };
+    evaluate().then((ok) => {
+      if (cancelled) return;
+      setState(ok ? "granted" : "denied");
+      if (!ok) onDeny?.();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isAuthenticated,
+    token,
+    requireAllRoles,
+    requireAllPermissions,
+    canAccess,
+    rolesKey,
+    requiredRolesKey,
+    permissionsKey,
+    requiredPermissionsKey
+  ]);
+  if (state === "checking") {
+    return /* @__PURE__ */ jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback ?? /* @__PURE__ */ jsx(Spinner2, {}) });
+  }
+  if (state === "denied") {
+    return /* @__PURE__ */ jsx("div", { className: className || void 0, children: fallback ?? /* @__PURE__ */ jsxs("div", { className: "flex min-h-[8rem] flex-col items-center justify-center gap-1 rounded-xl border border-border bg-surface p-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: "Access denied" }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground-muted", children: "You don\u2019t have permission to view this content." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: className || void 0,
+      initial: reduced ? false : { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: reduced ? 0 : 0.2, ease: "easeOut" },
+      children
+    }
+  );
+}
 function px(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
@@ -5694,7 +6014,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React24.useId().replace(/:/g, "");
+  const id = React26.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -7630,7 +7950,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -8210,6 +8530,6 @@ function ColorPicker({
   ] });
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map