@fayz-ai/ui 0.22.0 → 0.23.0

package/dist/chunk-UP7WVKSU.js

@@ -0,0 +1,631 @@
+import { usePageRailSlot, useModuleHeaderActionsSlot, useRegisterPageActions, useHasPageHeaderHost, useCrossModuleBack, useBackHandler, PageHeaderCrumb, usePageHeader, useHasPageHeaderBack, PageTitlePortal } from './chunk-RRNMNFLF.js';
+import { cn } from './chunk-OKZ6WQB3.js';
+import { ICON_MAP } from './chunk-OWN3GFDG.js';
+import * as React3 from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X, ChevronDown, ChevronRight, ChevronLeft, Crown } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { useTranslation } from '@fayz-ai/core';
+
+var STYLE_ID = "saas-sheet-styles";
+if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    @keyframes saas-sheet-fade-in { from { opacity: 0 } to { opacity: 1 } }
+    @keyframes saas-sheet-fade-out { from { opacity: 1 } to { opacity: 0 } }
+    @keyframes saas-sheet-slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }
+    @keyframes saas-sheet-slide-out { from { transform: translateX(0) } to { transform: translateX(100%) } }
+    .saas-sheet-overlay[data-state="open"] { animation: saas-sheet-fade-in 200ms ease-out }
+    .saas-sheet-overlay[data-state="closed"] { animation: saas-sheet-fade-out 150ms ease-in }
+    .saas-sheet-content[data-state="open"] { animation: saas-sheet-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) }
+    .saas-sheet-content[data-state="closed"] { animation: saas-sheet-slide-out 200ms ease-in }
+  `;
+  document.head.appendChild(style);
+}
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "saas-sheet-overlay fixed inset-0 z-[100] bg-black/40 backdrop-blur-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var SheetContent = React3.forwardRef(({ className, children, width, hideClose, overlay = "blur", onPointerDownOutside, onInteractOutside, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, { className: overlay === "none" ? "bg-transparent backdrop-blur-0" : overlay === "dim" ? "backdrop-blur-0" : void 0 }),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      onPointerDownOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onPointerDownOutside?.(e);
+      },
+      onInteractOutside: (e) => {
+        const target = e.target;
+        if (target.closest("[data-modal-passthrough]") || target.closest("[data-radix-popper-content-wrapper]")) {
+          e.preventDefault();
+        }
+        onInteractOutside?.(e);
+      },
+      className: cn(
+        "fayz-glass-surface saas-sheet-content fixed inset-y-0 right-0 z-[100] flex flex-col border-l bg-card shadow-2xl outline-none",
+        "w-full",
+        width ?? "max-w-md",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = "SheetContent";
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-1 px-5 py-4 border-b shrink-0", className),
+      ...props
+    }
+  );
+}
+SheetHeader.displayName = "SheetHeader";
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 px-5 py-3 border-t shrink-0", className),
+      ...props
+    }
+  );
+}
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-xs text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-5 py-5", className),
+      ...props
+    }
+  );
+}
+SheetBody.displayName = "SheetBody";
+function HeaderTabs({
+  tabs,
+  value,
+  onChange,
+  className,
+  fill,
+  anchorPrefix,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      className: cn(
+        "inline-flex max-w-full gap-5 overflow-x-auto scrollbar-none",
+        fill ? "items-stretch" : "items-center",
+        className
+      ),
+      children: tabs.map((tab) => {
+        const active = tab.value === value;
+        const Icon = tab.icon;
+        const box = cn(
+          "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap text-sm transition-colors",
+          fill ? "h-full" : "pb-1.5",
+          active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
+          tab.dim && "opacity-50 hover:opacity-100"
+        );
+        const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null,
+          /* @__PURE__ */ jsx("span", { children: tab.label }),
+          tab.count != null && /* @__PURE__ */ jsx("span", { className: cn(
+            "ml-0.5 rounded-full px-1.5 text-[11px] tabular-nums",
+            active ? "bg-muted text-foreground" : "bg-muted/70 text-muted-foreground"
+          ), children: tab.count }),
+          tab.badge
+        ] });
+        const underline = active ? /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground" }) : null;
+        if (!tab.trailing) {
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "data-tour": anchorPrefix ? `${anchorPrefix}.${tab.value}` : void 0,
+              onClick: () => onChange(tab.value),
+              className: box,
+              children: [
+                inner,
+                underline
+              ]
+            },
+            tab.value
+          );
+        }
+        return /* @__PURE__ */ jsxs("div", { className: box, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "data-tour": anchorPrefix ? `${anchorPrefix}.${tab.value}` : void 0,
+              onClick: () => onChange(tab.value),
+              className: "flex items-center gap-1.5 whitespace-nowrap",
+              children: inner
+            }
+          ),
+          tab.trailing,
+          underline
+        ] }, tab.value);
+      })
+    }
+  );
+}
+function PageTabs({ actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { background: "var(--page-surface, hsl(var(--background)))" },
+      className: cn(
+        "sticky top-0 z-20 -mx-3 -mt-3 mb-4 flex flex-wrap items-end justify-between gap-3 border-b border-border px-3 pt-2 md:-mx-6 md:-mt-4 md:px-6",
+        // 48px no desktop, a mesma altura do subcabeçalho dos painéis do
+        // assistente à direita (TasksFilterBar, NotebookPanel). Eram 34 aqui e
+        // 48 lá: os dois fios que fecham as duas faixas paravam em alturas
+        // diferentes, lado a lado na mesma tela. `min-h` e não `h` porque a
+        // faixa QUEBRA — doze abas no Financeiro — e uma altura fixa cortaria a
+        // segunda linha.
+        "md:min-h-[2.5rem]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
+        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pb-1.5", children: actions })
+      ]
+    }
+  );
+}
+var SIZE = {
+  sm: { container: "h-[26px]", segment: "px-2.5 text-xs" },
+  md: { container: "h-[30px]", segment: "px-3 text-sm" }
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const items = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      className: cn(
+        // `fz-segmented`: gancho para a faixa do cabeçalho trocar este chrome
+        // de cartão pelo de faixa (ver .fz-on-band em styles.css).
+        "fz-segmented inline-flex items-center rounded-button border border-border bg-card p-0.5 shadow-button",
+        SIZE[size].container,
+        className
+      ),
+      children: items.map((item) => {
+        const active = item.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "flex h-full items-center rounded-button font-semibold transition-colors",
+              SIZE[size].segment,
+              active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted/60"
+            ),
+            children: item.label
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+var NavTransitionContext = React3.createContext("slide");
+function NavTransitionProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
+}
+function useNavTransition() {
+  return React3.useContext(NavTransitionContext);
+}
+function resolveTransitionClass(transition, direction) {
+  if (transition === "none") return "";
+  if (transition === "fade") return "saas-page-enter";
+  if (direction === "back") return "saas-nav-back";
+  if (direction === "forward") return "saas-nav-forward";
+  return "saas-page-enter";
+}
+function PageTransition({
+  transitionKey,
+  direction,
+  className,
+  children
+}) {
+  const transition = useNavTransition();
+  const animClass = resolveTransitionClass(transition, direction);
+  return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), children }, transitionKey);
+}
+function PageRail({ children }) {
+  const slot = usePageRailSlot();
+  if (slot) return createPortal(children, slot);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function PageHeaderActions({ children }) {
+  const slot = useModuleHeaderActionsSlot();
+  useRegisterPageActions();
+  if (slot) return createPortal(children, slot);
+  return /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-end gap-2", children });
+}
+function PremiumBadge({ className }) {
+  const t = useTranslation();
+  const tip = t("upgrade.badgeTooltip");
+  return /* @__PURE__ */ jsx("span", { title: tip, "aria-label": tip, className: cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
+}
+var ModuleLayoutContext = React3.createContext("rail");
+function ModuleLayoutProvider({ variant, children }) {
+  return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
+}
+function useModuleLayout() {
+  return React3.useContext(ModuleLayoutContext);
+}
+function RailNavItem({ item }) {
+  const [expanded, setExpanded] = React3.useState(true);
+  const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
+  const hasChildren = item.children && item.children.length > 0;
+  const hasActiveChild = hasChildren && item.children.some((c) => c.active);
+  const isActive = item.active || hasActiveChild;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-tour": `modnav.${item.id}`,
+        onClick: () => hasChildren ? setExpanded(!expanded) : item.onClick?.(),
+        className: cn(
+          "flex items-center gap-2 w-full rounded-md px-2.5 py-1.5 text-sm transition-colors",
+          isActive ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+        ),
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: item.label }),
+          item.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" }),
+          hasChildren && (expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }))
+        ]
+      }
+    ),
+    hasChildren && expanded && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l pl-2", children: item.children.map((child) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-tour": `modnav.${child.id}`,
+        onClick: child.onClick,
+        className: cn(
+          "flex items-center w-full rounded-md px-2.5 py-1 text-xs transition-colors",
+          child.active ? "text-primary font-medium bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: child.label }),
+          child.premium && /* @__PURE__ */ jsx(PremiumBadge, { className: "ml-1" })
+        ]
+      },
+      child.id
+    )) })
+  ] });
+}
+function defaultChildOf(item) {
+  const kids = (item.children ?? []).filter((c) => c.kind !== "action");
+  return kids.find((c) => c.defaultChild) ?? kids.find((c) => /(^|-)list$/i.test(c.id)) ?? kids.find((c) => !/(^|-)(new|novo|nova|create)$/i.test(c.id)) ?? kids[0];
+}
+function MobileTabs({ nav }) {
+  const scrollRef = React3.useRef(null);
+  const [expandedId, setExpandedId] = React3.useState(null);
+  React3.useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const activeEl = container.querySelector('[data-active="true"]');
+    if (activeEl) {
+      const left = activeEl.offsetLeft - container.offsetWidth / 2 + activeEl.offsetWidth / 2;
+      container.scrollTo({ left: Math.max(0, left), behavior: "smooth" });
+    }
+  }, [nav]);
+  return /* @__PURE__ */ jsxs("div", { className: "md:hidden -mx-1 mb-4 no-print", children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none", children: nav.map((item) => {
+      const Icon = item.icon ? ICON_MAP[item.icon] ?? null : null;
+      const hasChildren = item.children && item.children.length > 0;
+      const isActive = item.active || item.children?.some((c) => c.active);
+      const isExpanded = expandedId === item.id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-active": isActive || void 0,
+          onClick: () => {
+            if (hasChildren) {
+              if (!isExpanded) defaultChildOf(item)?.onClick?.();
+              setExpandedId(isExpanded ? null : item.id);
+            } else {
+              item.onClick?.();
+              setExpandedId(null);
+            }
+          },
+          className: cn(
+            // This strip is the most-tapped control in most modules and it
+            // was 28px tall — a third under the comfortable minimum. Height
+            // and text step up on touch; the desktop rail is unaffected.
+            "flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-sm font-medium transition-colors",
+            "min-h-[2.75rem] active:scale-[0.98]",
+            isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+            item.label,
+            item.premium && /* @__PURE__ */ jsx(PremiumBadge, {}),
+            hasChildren && /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-2.5 w-2.5 transition-transform", isExpanded && "rotate-180") })
+          ]
+        },
+        item.id
+      );
+    }) }),
+    expandedId && (() => {
+      const item = nav.find((n) => n.id === expandedId);
+      const shown = (item?.children ?? []).filter((c) => c.kind !== "action");
+      if (shown.length < 2) return null;
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: shown.map((child) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            child.onClick?.();
+            setExpandedId(null);
+          },
+          className: cn(
+            "whitespace-nowrap rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors shrink-0",
+            child.active ? "bg-foreground/10 text-foreground" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            child.label,
+            child.premium && /* @__PURE__ */ jsx(PremiumBadge, {})
+          ]
+        },
+        child.id
+      )) });
+    })()
+  ] });
+}
+var BackStyleContext = React3.createContext("link");
+function BackStyleProvider({ style, children }) {
+  return /* @__PURE__ */ jsx(BackStyleContext.Provider, { value: style, children });
+}
+function useBackStyle() {
+  return React3.useContext(BackStyleContext);
+}
+function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle, inline }) {
+  const t = useTranslation();
+  const appStyle = useBackStyle();
+  const hasShellBar = useHasPageHeaderHost() && !inline;
+  const cross = useCrossModuleBack(onBack, parentLabel);
+  const effectiveOnBack = inline ? onBack : cross.onBack;
+  const effectiveParentLabel = inline ? parentLabel : cross.parentLabel;
+  useBackHandler(effectiveOnBack);
+  const Icon = icon ? ICON_MAP[icon] ?? null : null;
+  if (inline && effectiveOnBack) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel: effectiveParentLabel, onBack: effectiveOnBack }),
+        actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
+    ] });
+  }
+  if (hasShellBar) {
+    return /* @__PURE__ */ jsx(
+      ShellSubpageHeader,
+      {
+        title,
+        subtitle,
+        icon: Icon,
+        onBack: effectiveOnBack,
+        parentLabel: effectiveParentLabel,
+        actions
+      }
+    );
+  }
+  const style = !effectiveOnBack ? "icon" : backStyle ?? appStyle;
+  const effectiveStyle = style !== "icon" && !effectiveParentLabel ? "icon" : style;
+  const titleBlock = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      effectiveStyle === "icon" && effectiveOnBack && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: effectiveOnBack,
+          className: "flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
+  ] });
+  if (effectiveStyle === "breadcrumb") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("button", { onClick: effectiveOnBack, className: "hover:text-foreground transition-colors", children: effectiveParentLabel }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: title })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground -mt-2", children: subtitle })
+    ] });
+  }
+  if (effectiveStyle === "link") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: effectiveOnBack,
+          className: "inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+            t("crud.detail.backTo", { entities: effectiveParentLabel })
+          ]
+        }
+      ),
+      titleBlock
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4 mb-6", children: titleBlock });
+}
+function ShellSubpageHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  onBack,
+  parentLabel,
+  actions
+}) {
+  usePageHeader(true, { back: !!onBack });
+  const crumb = /* @__PURE__ */ jsx(PageTitlePortal, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    Icon && !onBack && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel, onBack })
+  ] }) });
+  if (!actions) return crumb;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    crumb,
+    /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions }) })
+  ] });
+}
+function ModuleHeader({ nav }) {
+  function defaultChild(item) {
+    const kids2 = (item.children ?? []).filter((c) => c.kind !== "action");
+    return kids2.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids2[kids2.length - 1];
+  }
+  const activeItem = nav.find((item) => item.active || item.children?.some((c) => c.active));
+  const tabs = nav.map((item) => ({
+    value: item.id,
+    label: item.label,
+    icon: item.icon ? ICON_MAP[item.icon] ?? void 0 : void 0,
+    // Plan-gated views keep their upgrade marker — dropping it would hide the
+    // only signal that the tab costs an upgrade.
+    badge: item.premium ? /* @__PURE__ */ jsx(PremiumBadge, {}) : void 0
+  }));
+  const onChange = (id) => {
+    const item = nav.find((n) => n.id === id);
+    if (!item) return;
+    const hasChildren = item.children && item.children.length > 0;
+    if (hasChildren) defaultChild(item)?.onClick?.();
+    else item.onClick?.();
+  };
+  const kids = (activeItem?.children ?? []).filter((c) => c.kind !== "action");
+  const activeKid = kids.find((c) => c.active)?.id ?? kids[0]?.id;
+  const childControl = kids.length > 1 ? /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "sm",
+      "aria-label": activeItem?.label,
+      options: kids.map((c) => ({ value: c.id, label: c.label })),
+      value: activeKid ?? "",
+      onChange: (id) => kids.find((c) => c.id === id)?.onClick?.()
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    PageTabs,
+    {
+      tabs,
+      value: activeItem?.id ?? nav[0]?.id ?? "",
+      onChange,
+      actions: childControl,
+      anchorPrefix: "modnav"
+    }
+  );
+}
+function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
+  const ctxVariant = useModuleLayout();
+  const variant = navVariant ?? ctxVariant;
+  const transitionKey = viewKey ?? "view";
+  const onSubpage = useHasPageHeaderBack();
+  if (variant === "sidebar") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
+      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
+    ] });
+  }
+  if (variant === "tabs") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      !onSubpage && /* @__PURE__ */ jsx(ModuleHeader, { nav }),
+      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
+      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsx(PageRail, { children: /* @__PURE__ */ jsxs("div", { className: "hidden w-48 shrink-0 flex-col overflow-y-auto border-r border-border p-3 no-print md:flex", children: [
+      /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: nav.map((item) => /* @__PURE__ */ jsx(RailNavItem, { item }, item.id)) }),
+      sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: sidebarFooter })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
+      !onSubpage && /* @__PURE__ */ jsx(MobileTabs, { nav }),
+      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, children })
+    ] })
+  ] });
+}
+
+export { BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageRail, PageTabs, PageTransition, RailNavItem, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SubpageHeader, useBackStyle, useModuleLayout, useNavTransition };
+//# sourceMappingURL=chunk-UP7WVKSU.js.map
+//# sourceMappingURL=chunk-UP7WVKSU.js.map