@fayz-ai/ui 0.9.0 → 0.10.0

package/src/layout/ContentSplit.tsx

@@ -1,153 +0,0 @@
-import * as React from 'react'
-import { PanelRight, PanelRightClose, PanelRightOpen } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import {
-  Sheet, SheetContent, SheetHeader, SheetBody, SheetTitle, SheetDescription,
-} from '../primitives/sheet'
-
-// ---------------------------------------------------------------------------
-// ContentSplit — main content with a right-aligned companion panel, mobile
-// first. Below `lg` the aside lives in a right Sheet (opened by a trigger the
-// host places wherever fits — typically SubpageHeader actions, via
-// <ContentSplitTrigger/>). From `lg` up it docks as a sticky right column.
-//
-// Pairs with SubpageHeader/ModulePage: the page keeps its own back-button
-// header; ContentSplit only owns the columns below it. Reuse for any
-// "document + operational panel" page (script + shooting checklist, form +
-// help, detail + activity feed).
-// ---------------------------------------------------------------------------
-
-interface ContentSplitContextValue {
-  open: boolean
-  setOpen: (open: boolean) => void
-}
-
-const ContentSplitContext = React.createContext<ContentSplitContextValue | null>(null)
-
-export interface ContentSplitProps {
-  /** Main column (the document). */
-  children: React.ReactNode
-  /** Companion panel content (the checklist / help / activity). */
-  aside: React.ReactNode
-  /** Panel title — Sheet header on mobile, card header on desktop. */
-  asideTitle: React.ReactNode
-  /** Optional subtitle under the title. */
-  asideDescription?: React.ReactNode
-  /** Desktop column width (defaults to 20rem). */
-  asideWidth?: string
-  /** Controlled mobile-sheet state; uncontrolled when omitted. */
-  asideOpen?: boolean
-  onAsideOpenChange?: (open: boolean) => void
-  /** Desktop column can collapse into a slim reopen rail. */
-  collapsible?: boolean
-  /** Initial desktop collapsed state (e.g. expand only on the relevant day). */
-  defaultCollapsed?: boolean
-  className?: string
-}
-
-export function ContentSplit({
-  children,
-  aside,
-  asideTitle,
-  asideDescription,
-  asideWidth = '20rem',
-  asideOpen,
-  onAsideOpenChange,
-  collapsible = false,
-  defaultCollapsed = false,
-  className,
-}: ContentSplitProps) {
-  const [internalOpen, setInternalOpen] = React.useState(false)
-  const open = asideOpen ?? internalOpen
-  const setOpen = onAsideOpenChange ?? setInternalOpen
-  const [collapsed, setCollapsed] = React.useState(collapsible && defaultCollapsed)
-
-  return (
-    <ContentSplitContext.Provider value={{ open, setOpen }}>
-      <div
-        className={cn('lg:grid lg:items-start lg:gap-6', className)}
-        style={{ gridTemplateColumns: `minmax(0, 1fr) ${collapsed ? 'auto' : asideWidth}` }}
-      >
-        <div className="min-w-0">{children}</div>
-
-        {/* Desktop: docked sticky column (or slim reopen rail when collapsed) */}
-        <aside className="hidden lg:block lg:sticky lg:top-4">
-          {collapsed ? (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCollapsed(false)}
-              className="h-9 w-9 p-0"
-              aria-label={typeof asideTitle === 'string' ? asideTitle : undefined}
-              title={typeof asideTitle === 'string' ? asideTitle : undefined}
-            >
-              <PanelRightOpen className="h-4 w-4" />
-            </Button>
-          ) : (
-            <div className="rounded-card border border-border bg-card">
-              <div className="flex items-start justify-between gap-2 border-b border-border px-4 py-3">
-                <div className="min-w-0">
-                  <p className="text-sm font-semibold text-foreground">{asideTitle}</p>
-                  {asideDescription && (
-                    <p className="mt-0.5 text-xs text-muted-foreground">{asideDescription}</p>
-                  )}
-                </div>
-                {collapsible && (
-                  <button
-                    type="button"
-                    onClick={() => setCollapsed(true)}
-                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
-                    aria-label="collapse"
-                  >
-                    <PanelRightClose className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-              <div className="p-4">{aside}</div>
-            </div>
-          )}
-        </aside>
-      </div>
-
-      {/* Mobile: right sheet */}
-      <div className="lg:hidden">
-        <Sheet open={open} onOpenChange={setOpen}>
-          <SheetContent width="max-w-sm">
-            <SheetHeader>
-              <SheetTitle>{asideTitle}</SheetTitle>
-              {asideDescription && <SheetDescription>{asideDescription}</SheetDescription>}
-            </SheetHeader>
-            <SheetBody>{aside}</SheetBody>
-          </SheetContent>
-        </Sheet>
-      </div>
-    </ContentSplitContext.Provider>
-  )
-}
-
-export interface ContentSplitTriggerProps {
-  /** Accessible label; also the visible text unless `iconOnly`. */
-  label: React.ReactNode
-  iconOnly?: boolean
-  className?: string
-}
-
-/** Opens the mobile aside sheet. Renders nothing from `lg` up (the panel is
- *  already docked). Place inside SubpageHeader `actions` or any toolbar. */
-export function ContentSplitTrigger({ label, iconOnly, className }: ContentSplitTriggerProps) {
-  const ctx = React.useContext(ContentSplitContext)
-  if (!ctx) return null
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={() => ctx.setOpen(true)}
-      className={cn('lg:hidden', className)}
-      aria-label={typeof label === 'string' ? label : undefined}
-    >
-      <PanelRight className={cn('h-4 w-4', !iconOnly && 'mr-1.5')} />
-      {!iconOnly && label}
-    </Button>
-  )
-}

package/src/layout/ModulePage.tsx

@@ -1,466 +0,0 @@
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-import { ChevronDown, ChevronRight, ChevronLeft, Crown } from 'lucide-react'
-import { useTranslation } from '@fayz-ai/core'
-import { cn } from '../utils/cn'
-import { ICON_MAP } from './Topbar'
-import { useModuleHeaderSlot, useModuleHeaderActionsSlot } from './AppShell'
-import { PageTransition } from './PageTransition'
-import { useBackHandler } from './SaveBar'
-import { useCrossModuleBack } from './useCrossModuleBack'
-
-// ---------------------------------------------------------------------------
-// PageHeaderActions — portals a page's primary action button(s) into the shell
-// top-bar's right-aligned actions slot. Falls back to a right-aligned inline row
-// when there's no slot (e.g. topbar layout). Any page can use it:
-//   <PageHeaderActions><Button>New campaign</Button></PageHeaderActions>
-// ---------------------------------------------------------------------------
-
-export function PageHeaderActions({ children }: { children: React.ReactNode }) {
-  const slot = useModuleHeaderActionsSlot()
-  if (slot) return createPortal(children, slot)
-  return <div className="mb-4 flex items-center justify-end gap-2">{children}</div>
-}
-
-export interface ModuleNavItem {
-  id: string
-  label: string
-  icon?: string
-  active?: boolean
-  onClick?: () => void
-  /** Feature id for the access gate. When set, `useModuleNavAccess` (in
-   *  @fayz-ai/saas) resolves this link's role (hide) and plan (Crown) state. */
-  feature?: string
-  /** Freemium discovery: the user's role allows this link but their plan does
-   *  not entitle `feature`. Renders a small Crown badge (same vocabulary as the
-   *  Sidebar top-level nav); the click still navigates and the gated CONTENT
-   *  shows the UpgradePrompt. Typically set by `useModuleNavAccess`. */
-  premium?: boolean
-  children?: ModuleNavItem[]
-}
-
-// ---------------------------------------------------------------------------
-// PremiumBadge — the small Crown affordance shared by every module-nav renderer
-// (rail, mobile tabs, GHL header). Same vocabulary as the Sidebar top-level nav
-// so a plan-gated sub-module link reads identically wherever it appears.
-// ---------------------------------------------------------------------------
-
-function PremiumBadge({ className }: { className?: string }) {
-  const t = useTranslation()
-  const tip = t('upgrade.badgeTooltip')
-  return (
-    <span title={tip} aria-label={tip} className={cn('inline-flex shrink-0', className)}>
-      <Crown className="h-3.5 w-3.5 text-amber-500" aria-hidden />
-    </span>
-  )
-}
-
-export interface ModulePageProps {
-  title: string
-  subtitle?: string
-  nav: ModuleNavItem[]
-  children: React.ReactNode
-  className?: string
-  /** Optional action element rendered next to the title (e.g. settings gear) */
-  headerAction?: React.ReactNode
-  /** Show the title/subtitle header. Default: true */
-  showHeader?: boolean
-  /** Optional content pinned to the bottom of the sidebar (e.g. "Powered by X") */
-  sidebarFooter?: React.ReactNode
-  /** How the module-internal nav renders. Falls back to the ModuleLayout context
-   *  (set by the app shell from its layout), then 'rail'. */
-  navVariant?: ModuleNavVariant
-  /** Active sub-view id — drives the SDK page transition when it changes.
-   *  Plugins pass their `useModuleNavigation().view`; they no longer animate themselves. */
-  viewKey?: string
-  /** Navigation direction for the transition (from `useModuleNavigation`). */
-  direction?: 'forward' | 'back'
-}
-
-// ---------------------------------------------------------------------------
-// ModuleLayout context — lets the app shell decide how every module's internal
-// navigation renders ('rail' for topbar products, 'tabs' for sidebar/GHL-style
-// products), so plugins stay agnostic and products feel distinct.
-// ---------------------------------------------------------------------------
-
-export type ModuleNavVariant = 'rail' | 'tabs'
-
-const ModuleLayoutContext = React.createContext<ModuleNavVariant>('rail')
-
-export function ModuleLayoutProvider({ variant, children }: { variant: ModuleNavVariant; children: React.ReactNode }) {
-  return <ModuleLayoutContext.Provider value={variant}>{children}</ModuleLayoutContext.Provider>
-}
-
-export function useModuleLayout(): ModuleNavVariant {
-  return React.useContext(ModuleLayoutContext)
-}
-
-function NavItem({ item }: { item: ModuleNavItem }) {
-  const [expanded, setExpanded] = React.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 (
-    <div>
-      <button
-        type="button"
-        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'
-        )}
-      >
-        {Icon && <Icon className="h-4 w-4 shrink-0" />}
-        <span className="flex-1 text-left truncate">{item.label}</span>
-        {item.premium && <PremiumBadge className="ml-1" />}
-        {hasChildren && (
-          expanded
-            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
-            : <ChevronRight className="h-3.5 w-3.5 shrink-0 opacity-50" />
-        )}
-      </button>
-      {hasChildren && expanded && (
-        <div className="ml-4 mt-0.5 space-y-0.5 border-l pl-2">
-          {item.children!.map((child) => (
-            <button
-              key={child.id}
-              type="button"
-              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'
-              )}
-            >
-              <span className="flex-1 text-left truncate">{child.label}</span>
-              {child.premium && <PremiumBadge className="ml-1" />}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-/** Horizontal scrollable tabs for mobile — with expandable children */
-function MobileTabs({ nav }: { nav: ModuleNavItem[] }) {
-  const scrollRef = React.useRef<HTMLDivElement>(null)
-  const [expandedId, setExpandedId] = React.useState<string | null>(null)
-
-  // Auto-scroll to active tab on mount
-  React.useEffect(() => {
-    const container = scrollRef.current
-    if (!container) return
-    const activeEl = container.querySelector('[data-active="true"]') as HTMLElement
-    if (activeEl) {
-      const left = activeEl.offsetLeft - container.offsetWidth / 2 + activeEl.offsetWidth / 2
-      container.scrollTo({ left: Math.max(0, left), behavior: 'smooth' })
-    }
-  }, [nav])
-
-  return (
-    <div className="md:hidden -mx-1 mb-4 no-print">
-      <div ref={scrollRef} className="flex gap-1 px-1 pb-2 overflow-x-auto scrollbar-none">
-        {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 (
-            <button
-              key={item.id}
-              type="button"
-              data-active={isActive || undefined}
-              onClick={() => {
-                if (hasChildren) {
-                  setExpandedId(isExpanded ? null : item.id)
-                } else {
-                  item.onClick?.()
-                  setExpandedId(null)
-                }
-              }}
-              className={cn(
-                'flex items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium transition-colors shrink-0',
-                isActive
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted text-muted-foreground hover:text-foreground'
-              )}
-            >
-              {Icon && <Icon className="h-3 w-3" />}
-              {item.label}
-              {item.premium && <PremiumBadge />}
-              {hasChildren && <ChevronDown className={cn('h-2.5 w-2.5 transition-transform', isExpanded && 'rotate-180')} />}
-            </button>
-          )
-        })}
-      </div>
-
-      {/* Expanded children dropdown */}
-      {expandedId && (() => {
-        const item = nav.find((n) => n.id === expandedId)
-        if (!item?.children) return null
-        return (
-          <div className="flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1">
-            {item.children.map((child) => (
-              <button
-                key={child.id}
-                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'
-                )}
-              >
-                {child.label}
-                {child.premium && <PremiumBadge />}
-              </button>
-            ))}
-          </div>
-        )
-      })()}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// SubpageHeader
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Back-button style — the SINGLE, app-wide affordance for returning from a
-// detail/subpage. Set once by the product via <BackStyleProvider>, NOT chosen
-// per-plugin (mirrors NavTransitionProvider for page transitions). Plugins just
-// pass `onBack` + `parentLabel` to SubpageHeader and inherit whatever style the
-// app picked:
-//   'link'       → subtle "← Back to {parent}" above the title (default)
-//   'breadcrumb' → "{parent} › Title"
-//   'icon'       → square chevron button beside the title
-// ---------------------------------------------------------------------------
-
-export type BackButtonStyle = 'link' | 'breadcrumb' | 'icon'
-
-const BackStyleContext = React.createContext<BackButtonStyle>('link')
-
-export function BackStyleProvider({ style, children }: { style: BackButtonStyle; children: React.ReactNode }) {
-  return <BackStyleContext.Provider value={style}>{children}</BackStyleContext.Provider>
-}
-
-export function useBackStyle(): BackButtonStyle {
-  return React.useContext(BackStyleContext)
-}
-
-export interface SubpageHeaderProps {
-  /** Page title */
-  title: string
-  /** Short description */
-  subtitle?: string
-  /** Lucide icon name */
-  icon?: string
-  /** Back button handler */
-  onBack?: () => void
-  /** Parent label (e.g. "Invoices") — used by every back style ("Back to Invoices", breadcrumb root, etc.) */
-  parentLabel?: string
-  /** Actions rendered on the right */
-  actions?: React.ReactNode
-  /** Override the app-wide back style for this one header. Rarely needed. */
-  backStyle?: BackButtonStyle
-}
-
-export function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle }: SubpageHeaderProps) {
-  const t = useTranslation()
-  const appStyle = useBackStyle()
-
-  // Defer to the global navigation history when the user came from another
-  // module, so the back link points at the actual previous page. Within the
-  // same module the page's own onBack/parentLabel pass through unchanged.
-  const { onBack: effectiveOnBack, parentLabel: effectiveParentLabel } = useCrossModuleBack(onBack, parentLabel)
-
-  // Wire this page's back action into the app-wide Escape key (no per-plugin code).
-  useBackHandler(effectiveOnBack)
-  const Icon = icon ? (ICON_MAP[icon] ?? null) : null
-  // Breadcrumb/link need a parent label; without one we fall back to the icon button.
-  const style: BackButtonStyle = !effectiveOnBack ? 'icon' : (backStyle ?? appStyle)
-  const effectiveStyle: BackButtonStyle = style !== 'icon' && !effectiveParentLabel ? 'icon' : style
-
-  const titleBlock = (
-    <div className="flex items-center justify-between gap-4">
-      <div className="flex items-center gap-3">
-        {effectiveStyle === 'icon' && effectiveOnBack && (
-          <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"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-        )}
-        {Icon && (
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-muted">
-            <Icon className="h-5 w-5 text-muted-foreground" />
-          </div>
-        )}
-        <div>
-          <h2 className="text-xl font-bold">{title}</h2>
-          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-        </div>
-      </div>
-      {actions && <div className="no-print">{actions}</div>}
-    </div>
-  )
-
-  if (effectiveStyle === 'breadcrumb') {
-    return (
-      <div className="space-y-4 mb-6">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <button onClick={effectiveOnBack} className="hover:text-foreground transition-colors">{effectiveParentLabel}</button>
-            <ChevronRight className="h-3.5 w-3.5" />
-            <span className="text-foreground font-medium">{title}</span>
-          </div>
-          {actions && <div className="no-print">{actions}</div>}
-        </div>
-        {subtitle && <p className="text-sm text-muted-foreground -mt-2">{subtitle}</p>}
-      </div>
-    )
-  }
-
-  if (effectiveStyle === 'link') {
-    return (
-      <div className="space-y-3 mb-6">
-        <button
-          onClick={effectiveOnBack}
-          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          {t('crud.detail.backTo', { entities: effectiveParentLabel as string })}
-        </button>
-        {titleBlock}
-      </div>
-    )
-  }
-
-  // icon (default fallback)
-  return <div className="space-y-4 mb-6">{titleBlock}</div>
-}
-
-// ---------------------------------------------------------------------------
-// ModuleHeader — GoHighLevel-style module header (title + horizontal sub-nav),
-// portalled into the shell's top-of-page header slot. Active tab's children
-// render as a secondary pill row. Falls back to inline if no slot is present.
-// ---------------------------------------------------------------------------
-
-function ModuleHeader({ nav }: { nav: ModuleNavItem[] }) {
-  const slot = useModuleHeaderSlot()
-
-  // Tabs are flat: a parent with children navigates straight to its default
-  // "list" view (sub-actions like "New" live as a button inside that list).
-  function defaultChild(item: ModuleNavItem) {
-    const kids = item.children ?? []
-    return kids.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids[kids.length - 1]
-  }
-
-  const content = (
-    <div className="flex w-full min-w-0 items-center gap-4">
-      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none">
-        {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)
-          return (
-            <button
-              key={item.id}
-              type="button"
-              onClick={() => (hasChildren ? defaultChild(item)?.onClick?.() : item.onClick?.())}
-              className={cn(
-                'flex shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-2.5 py-1.5 text-sm font-medium transition-colors',
-                isActive
-                  ? 'border-primary text-foreground'
-                  : 'border-transparent text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {Icon && <Icon className="h-4 w-4" />}
-              {item.label}
-              {item.premium && <PremiumBadge />}
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-
-  if (slot) return createPortal(content, slot)
-  // Fallback: render inline above content when no shell header slot exists.
-  return <div className="mb-5 border-b border-border pb-2">{content}</div>
-}
-
-// ---------------------------------------------------------------------------
-// ModulePage
-// ---------------------------------------------------------------------------
-
-export function ModulePage({ title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }: ModulePageProps) {
-  const ctxVariant = useModuleLayout()
-  const variant = navVariant ?? ctxVariant
-  const transitionKey = viewKey ?? 'view'
-
-  // Tabs variant — the module sub-nav renders in the shell's top-of-page header
-  // container and actions in its right slot (GoHighLevel style); the content
-  // area holds only the view (the shell owns the page title).
-  if (variant === 'tabs') {
-    return (
-      <>
-        <ModuleHeader nav={nav} />
-        {/* Header actions belong to the module overview only; internal sub-views
-            (showHeader=false) carry their own actions. */}
-        {showHeader && headerAction && <PageHeaderActions>{headerAction}</PageHeaderActions>}
-        <PageTransition transitionKey={transitionKey} direction={direction} className={cn('min-w-0', className)}>
-          {children}
-        </PageTransition>
-      </>
-    )
-  }
-
-  // Rail variant (default) — left sub-nav column.
-  return (
-    <div className={cn('flex gap-6 -mt-2', className)}>
-      {/* Side navigation — hidden on mobile + print */}
-      <div className="w-48 shrink-0 hidden md:block no-print">
-        <div className={cn(sidebarFooter && 'sticky top-4 flex flex-col')} style={sidebarFooter ? { height: 'calc(100vh - 8rem)' } : undefined}>
-          <div>
-            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2.5 mb-2">{title}</p>
-            <nav className="space-y-0.5">
-              {nav.map((item) => (
-                <NavItem key={item.id} item={item} />
-              ))}
-            </nav>
-          </div>
-          {sidebarFooter && <div className="mt-auto">{sidebarFooter}</div>}
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        {showHeader && (
-          <div className="mb-6 flex items-start justify-between gap-3">
-            <div>
-              <h1 className="text-2xl font-bold">{title}</h1>
-              {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-            </div>
-            {headerAction}
-          </div>
-        )}
-        {/* Mobile tabs */}
-        <MobileTabs nav={nav} />
-        <PageTransition transitionKey={transitionKey} direction={direction}>
-          {children}
-        </PageTransition>
-      </div>
-    </div>
-  )
-}

package/src/layout/PageTransition.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-
-// ---------------------------------------------------------------------------
-// PageTransition — the single, SDK-owned animation applied to every nested
-// navigation (route changes in the shell + module-internal view changes).
-// Plugins never implement transitions themselves; they render content and the
-// shell/ModulePage wrap it in <PageTransition>. The style is provided app-wide
-// via NavTransitionProvider so different products/repos can ship a different
-// feel (slide | fade | none | future custom) without touching plugins.
-// ---------------------------------------------------------------------------
-
-export type NavTransition = 'slide' | 'fade' | 'none'
-
-const NavTransitionContext = React.createContext<NavTransition>('slide')
-
-export function NavTransitionProvider({ value, children }: { value: NavTransition; children: React.ReactNode }) {
-  return <NavTransitionContext.Provider value={value}>{children}</NavTransitionContext.Provider>
-}
-
-export function useNavTransition(): NavTransition {
-  return React.useContext(NavTransitionContext)
-}
-
-function resolveTransitionClass(transition: NavTransition, direction?: 'forward' | 'back'): string {
-  if (transition === 'none') return ''
-  if (transition === 'fade') return 'saas-page-enter'
-  // slide (default) — direction-aware, falls back to a plain enter.
-  if (direction === 'back') return 'saas-nav-back'
-  if (direction === 'forward') return 'saas-nav-forward'
-  return 'saas-page-enter'
-}
-
-/**
- * Wraps content and re-fires the active transition whenever `transitionKey`
- * changes (the key swap forces the node to remount, restarting the CSS
- * animation). Direction is optional and only used by the 'slide' transition.
- */
-export function PageTransition({
-  transitionKey,
-  direction,
-  className,
-  children,
-}: {
-  transitionKey: string | number
-  direction?: 'forward' | 'back'
-  className?: string
-  children: React.ReactNode
-}) {
-  const transition = useNavTransition()
-  const animClass = resolveTransitionClass(transition, direction)
-  return (
-    <div key={transitionKey} className={cn(animClass, className)}>
-      {children}
-    </div>
-  )
-}