@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-app-shell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../app-shell/src/app-shell.ts", "../../app-shell/src/page-shell.ts", "../../app-shell/src/auth-shell.ts", "../../react-app-shell/src/app-shell.tsx", "../../react-app-shell/src/page-shell.tsx", "../../react-app-shell/src/auth-shell.tsx"],
+  "sourcesContent": ["import { generateId } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type BreakpointName = 'mobile' | 'tablet' | 'desktop'\n\nexport interface AppShellConfig {\n  /** Sidebar width when expanded (default '16rem') */\n  sidebarWidth?: string\n  /** Sidebar width when collapsed to icon-only (default '4rem') */\n  sidebarCollapsedWidth?: string\n  /** Header height (default '3.5rem') */\n  headerHeight?: string\n  /** Breakpoint below which layout is mobile (default 768) */\n  mobileBreakpoint?: number\n  /** Breakpoint below which layout is tablet (default 1024) */\n  tabletBreakpoint?: number\n  /** Sidebar position (default 'left') */\n  sidebarPosition?: 'left' | 'right'\n  /** Whether sidebar can be collapsed on desktop (default true) */\n  sidebarCollapsible?: boolean\n  /** Whether sidebar starts collapsed on desktop (default false) */\n  sidebarDefaultCollapsed?: boolean\n  /** Mobile nav position (default 'bottom') */\n  mobileNavPosition?: 'bottom' | 'none'\n}\n\nexport interface AppShellState {\n  /** On mobile: drawer open/closed */\n  sidebarOpen: boolean\n  /** On desktop: full/icon-only */\n  sidebarCollapsed: boolean\n  /** Current responsive breakpoint */\n  breakpoint: BreakpointName\n  /** Convenience: breakpoint === 'mobile' */\n  isMobile: boolean\n  /** Convenience: breakpoint === 'tablet' */\n  isTablet: boolean\n  /** Convenience: breakpoint === 'desktop' */\n  isDesktop: boolean\n}\n\nexport type AppShellSubscriber = (state: AppShellState) => void\n\nexport interface AppShellAPI {\n  /** Current state (snapshot — will not mutate) */\n  state: AppShellState\n  /** Resolved config with all defaults applied */\n  config: Required<AppShellConfig>\n\n  /** Mobile: open/close drawer. Desktop: collapse/expand sidebar. */\n  toggleSidebar(): void\n  /** Open sidebar (mobile drawer) */\n  openSidebar(): void\n  /** Close sidebar (mobile drawer) */\n  closeSidebar(): void\n  /** Collapse sidebar to icon-only (desktop) */\n  collapseSidebar(): void\n  /** Expand sidebar from icon-only (desktop) */\n  expandSidebar(): void\n  /** Update the current breakpoint */\n  setBreakpoint(bp: BreakpointName): void\n\n  /** CSS custom property map for layout dimensions */\n  getCSSVariables(): Record<string, string>\n\n  /** ARIA attributes for sidebar region */\n  sidebarAriaProps: Record<string, string>\n  /** ARIA attributes for main region */\n  mainAriaProps: Record<string, string>\n  /** ARIA attributes for header region */\n  headerAriaProps: Record<string, string>\n  /** ARIA attributes for mobile bottom nav */\n  mobileNavAriaProps: Record<string, string>\n  /** ARIA attributes for mobile sidebar overlay/backdrop */\n  overlayAriaProps: Record<string, string>\n\n  /** Subscribe to state changes. Returns unsubscribe function. */\n  subscribe(fn: AppShellSubscriber): () => void\n}\n\n// ---------------------------------------------------------------------------\n// Defaults\n// ---------------------------------------------------------------------------\n\nconst DEFAULTS: Required<AppShellConfig> = {\n  sidebarWidth: '16rem',\n  sidebarCollapsedWidth: '4rem',\n  headerHeight: '3.5rem',\n  mobileBreakpoint: 768,\n  tabletBreakpoint: 1024,\n  sidebarPosition: 'left',\n  sidebarCollapsible: true,\n  sidebarDefaultCollapsed: false,\n  mobileNavPosition: 'bottom',\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction resolveBreakpoint(\n  width: number,\n  mobileBp: number,\n  tabletBp: number,\n): BreakpointName {\n  if (width < mobileBp) return 'mobile'\n  if (width < tabletBp) return 'tablet'\n  return 'desktop'\n}\n\nfunction makeState(\n  sidebarOpen: boolean,\n  sidebarCollapsed: boolean,\n  breakpoint: BreakpointName,\n): AppShellState {\n  return {\n    sidebarOpen,\n    sidebarCollapsed,\n    breakpoint,\n    isMobile: breakpoint === 'mobile',\n    isTablet: breakpoint === 'tablet',\n    isDesktop: breakpoint === 'desktop',\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\nexport function createAppShell(config?: AppShellConfig): AppShellAPI {\n  const resolved: Required<AppShellConfig> = {\n    ...DEFAULTS,\n    ...(config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== undefined)) : {})\n  } as Required<AppShellConfig>\n\n  // Internal mutable state\n  let sidebarOpen = false\n  let sidebarCollapsed = resolved.sidebarDefaultCollapsed\n  let breakpoint: BreakpointName = 'desktop' // SSR default\n\n  const subscribers = new Set<AppShellSubscriber>()\n\n  const sidebarId = generateId('rfr-shell-sidebar')\n\n  function getState(): AppShellState {\n    return makeState(sidebarOpen, sidebarCollapsed, breakpoint)\n  }\n\n  function notify(): void {\n    const s = getState()\n    for (const fn of subscribers) {\n      fn(s)\n    }\n  }\n\n  function toggleSidebar(): void {\n    if (breakpoint === 'mobile') {\n      sidebarOpen = !sidebarOpen\n    } else if (resolved.sidebarCollapsible) {\n      sidebarCollapsed = !sidebarCollapsed\n    }\n    notify()\n  }\n\n  function openSidebar(): void {\n    sidebarOpen = true\n    notify()\n  }\n\n  function closeSidebar(): void {\n    sidebarOpen = false\n    notify()\n  }\n\n  function collapseSidebar(): void {\n    sidebarCollapsed = true\n    notify()\n  }\n\n  function expandSidebar(): void {\n    sidebarCollapsed = false\n    notify()\n  }\n\n  function setBreakpoint(bp: BreakpointName): void {\n    if (bp === breakpoint) return\n    breakpoint = bp\n    // Auto-close mobile drawer when moving to desktop\n    if (bp !== 'mobile') {\n      sidebarOpen = false\n    }\n    notify()\n  }\n\n  function getCSSVariables(): Record<string, string> {\n    const currentWidth = sidebarCollapsed\n      ? resolved.sidebarCollapsedWidth\n      : resolved.sidebarWidth\n    return {\n      '--shell-sidebar-width': currentWidth,\n      '--shell-sidebar-full-width': resolved.sidebarWidth,\n      '--shell-sidebar-collapsed-width': resolved.sidebarCollapsedWidth,\n      '--shell-header-height': resolved.headerHeight,\n    }\n  }\n\n  function subscribe(fn: AppShellSubscriber): () => void {\n    subscribers.add(fn)\n    return () => {\n      subscribers.delete(fn)\n    }\n  }\n\n  return {\n    get state() {\n      return getState()\n    },\n    config: resolved,\n\n    toggleSidebar,\n    openSidebar,\n    closeSidebar,\n    collapseSidebar,\n    expandSidebar,\n    setBreakpoint,\n\n    getCSSVariables,\n\n    sidebarAriaProps: {\n      role: 'navigation',\n      'aria-label': 'Sidebar',\n      id: sidebarId,\n    },\n    mainAriaProps: {\n      role: 'main',\n    },\n    headerAriaProps: {\n      role: 'banner',\n    },\n    mobileNavAriaProps: {\n      role: 'navigation',\n      'aria-label': 'Mobile navigation',\n    },\n    overlayAriaProps: {\n      'aria-hidden': 'true',\n    },\n\n    subscribe,\n  }\n}\n\nexport { resolveBreakpoint }\n", "// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface PageShellConfig {\n  /** Max width for contained sections (default '80rem') */\n  maxWidth?: string\n  /** Navigation bar height (default '4rem') */\n  navHeight?: string\n  /** Whether nav is transparent (for hero sections, default false) */\n  navTransparent?: boolean\n  /** Whether nav is sticky (default true) */\n  navSticky?: boolean\n  /** Number of footer columns (default 4) */\n  footerColumns?: number\n}\n\nexport interface SectionConfig {\n  /** Whether section spans edge-to-edge (default false) */\n  fullWidth?: boolean\n  /** Override max-width for this section */\n  maxWidth?: string\n  /** Whether section has padding (default true) */\n  padding?: boolean\n  /** Background variant */\n  background?: 'default' | 'muted' | 'primary' | 'none'\n}\n\nexport interface PageShellAPI {\n  /** Resolved config with all defaults applied */\n  config: Required<PageShellConfig>\n  /** ARIA attributes for the nav region */\n  navAriaProps: Record<string, string>\n  /** ARIA attributes for the footer region */\n  footerAriaProps: Record<string, string>\n  /** Returns Tailwind utility classes for a section */\n  getSectionClasses(sectionConfig?: SectionConfig): string\n  /** CSS custom property map */\n  getCSSVariables(): Record<string, string>\n}\n\n// ---------------------------------------------------------------------------\n// Defaults\n// ---------------------------------------------------------------------------\n\nconst DEFAULTS: Required<PageShellConfig> = {\n  maxWidth: '80rem',\n  navHeight: '4rem',\n  navTransparent: false,\n  navSticky: true,\n  footerColumns: 4,\n}\n\n// ---------------------------------------------------------------------------\n// Background class map\n// ---------------------------------------------------------------------------\n\nconst BACKGROUND_CLASSES: Record<NonNullable<SectionConfig['background']>, string> = {\n  default: '',\n  muted: 'bg-muted',\n  primary: 'bg-primary text-primary-foreground',\n  none: '',\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\nexport function createPageShell(config?: PageShellConfig): PageShellAPI {\n  const resolved: Required<PageShellConfig> = {\n    ...DEFAULTS,\n    ...(config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== undefined)) : {})\n  } as Required<PageShellConfig>\n\n  function getSectionClasses(sectionConfig?: SectionConfig): string {\n    const {\n      fullWidth = false,\n      maxWidth,\n      padding = true,\n      background = 'default',\n    } = sectionConfig ?? {}\n\n    const classes: string[] = []\n\n    if (!fullWidth) {\n      classes.push('mx-auto')\n      classes.push('w-full')\n      // Use custom max-width or fall through to CSS variable\n      if (maxWidth) {\n        classes.push(`max-w-${maxWidth}`)\n      } else {\n        classes.push('max-w-[var(--page-max-width)]')\n      }\n    }\n\n    if (padding) {\n      classes.push('px-4 sm:px-6 lg:px-8')\n    }\n\n    const bg = BACKGROUND_CLASSES[background]\n    if (bg) {\n      classes.push(bg)\n    }\n\n    return classes.join(' ')\n  }\n\n  function getCSSVariables(): Record<string, string> {\n    return {\n      '--page-max-width': resolved.maxWidth,\n      '--page-nav-height': resolved.navHeight,\n      '--page-footer-columns': String(resolved.footerColumns),\n    }\n  }\n\n  return {\n    config: resolved,\n    navAriaProps: {\n      role: 'navigation',\n      'aria-label': 'Main navigation',\n    },\n    footerAriaProps: {\n      role: 'contentinfo',\n    },\n    getSectionClasses,\n    getCSSVariables,\n  }\n}\n", "// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface AuthShellConfig {\n  /** Card max-width preset (default 'sm') */\n  maxWidth?: 'xs' | 'sm' | 'md'\n  /** Card position (default 'center') */\n  position?: 'center' | 'left'\n  /** Show decorative background pattern (default true) */\n  showBackground?: boolean\n}\n\nexport interface AuthShellAPI {\n  /** Resolved config with all defaults */\n  config: Required<AuthShellConfig>\n  /** Tailwind classes for the outer container */\n  containerClasses: string\n  /** Tailwind classes for the card */\n  cardClasses: string\n  /** ARIA attributes for the auth region */\n  ariaProps: Record<string, string>\n}\n\n// ---------------------------------------------------------------------------\n// Defaults\n// ---------------------------------------------------------------------------\n\nconst DEFAULTS: Required<AuthShellConfig> = {\n  maxWidth: 'sm',\n  position: 'center',\n  showBackground: true,\n}\n\n// ---------------------------------------------------------------------------\n// Class maps\n// ---------------------------------------------------------------------------\n\nconst MAX_WIDTH_CLASSES: Record<AuthShellConfig['maxWidth'] & string, string> = {\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\nexport function createAuthShell(config?: AuthShellConfig): AuthShellAPI {\n  const resolved: Required<AuthShellConfig> = {\n    ...DEFAULTS,\n    ...(config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== undefined)) : {})\n  } as Required<AuthShellConfig>\n\n  const containerParts: string[] = ['min-h-screen', 'flex', 'w-full']\n\n  if (resolved.position === 'center') {\n    containerParts.push('items-center', 'justify-center')\n  } else {\n    // left-aligned: vertically centered, padded from left\n    containerParts.push('items-center', 'justify-start', 'pl-8 sm:pl-16 lg:pl-24')\n  }\n\n  if (resolved.showBackground) {\n    containerParts.push('bg-muted')\n  }\n\n  const cardParts: string[] = [\n    'w-full',\n    MAX_WIDTH_CLASSES[resolved.maxWidth],\n    'rounded-lg',\n    'border',\n    'bg-card',\n    'p-6',\n    'shadow-sm',\n  ]\n\n  return {\n    config: resolved,\n    containerClasses: containerParts.join(' '),\n    cardClasses: cardParts.join(' '),\n    ariaProps: {\n      role: 'main',\n      'aria-label': 'Authentication',\n    },\n  }\n}\n", "import * as React from 'react'\nimport {\n  createAppShell,\n  resolveBreakpoint,\n  type AppShellConfig,\n  type AppShellState,\n  type AppShellAPI,\n} from '@refraction-ui/app-shell'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface AppShellContextValue {\n  api: AppShellAPI\n  state: AppShellState\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null)\n\nexport function useAppShell(): AppShellContextValue {\n  const ctx = React.useContext(AppShellContext)\n  if (!ctx) {\n    devWarn(\n      'react-app-shell/use-app-shell-outside-provider',\n      'useAppShell() was called outside of <AppShell>. Wrap the consuming component tree in <AppShell>.',\n    )\n    throw new Error('useAppShell must be used within <AppShell>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// AppShell (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface AppShellProps {\n  config?: AppShellConfig\n  children?: React.ReactNode\n  className?: string\n}\n\nconst AppShellRoot = React.forwardRef<HTMLDivElement, AppShellProps>(\n  function AppShell({ config, children, className }, ref) {\n  // Create the headless API once\n  const apiRef = React.useRef<AppShellAPI | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createAppShell(config)\n  }\n  const api = apiRef.current\n\n  // Track state reactively via subscribe\n  const [state, setState] = React.useState<AppShellState>(() => api.state)\n\n  React.useEffect(() => {\n    // Sync initial state\n    setState(api.state)\n    return api.subscribe((s) => setState(s))\n  }, [api])\n\n  // Listen to matchMedia for responsive breakpoints\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const { mobileBreakpoint, tabletBreakpoint } = api.config\n\n    const mobileQuery = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)\n    const tabletQuery = window.matchMedia(\n      `(min-width: ${mobileBreakpoint}px) and (max-width: ${tabletBreakpoint - 1}px)`,\n    )\n\n    function update() {\n      const width = window.innerWidth\n      const bp = resolveBreakpoint(width, mobileBreakpoint, tabletBreakpoint)\n      api.setBreakpoint(bp)\n    }\n\n    // Set initial breakpoint\n    update()\n\n    mobileQuery.addEventListener('change', update)\n    tabletQuery.addEventListener('change', update)\n\n    return () => {\n      mobileQuery.removeEventListener('change', update)\n      tabletQuery.removeEventListener('change', update)\n    }\n  }, [api])\n\n  const cssVars = api.getCSSVariables()\n\n  const ctxValue = React.useMemo<AppShellContextValue>(\n    () => ({ api, state }),\n    [api, state],\n  )\n\n  return React.createElement(\n    AppShellContext.Provider,\n    { value: ctxValue },\n    React.createElement(\n      'div',\n      {\n        ref,\n        className: cn('flex h-screen w-full overflow-hidden', className),\n        style: cssVars as React.CSSProperties,\n        'data-shell': '',\n      },\n      children,\n    ),\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.Sidebar\n// ---------------------------------------------------------------------------\n\nexport interface AppShellSidebarProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst Sidebar = React.forwardRef<HTMLElement, AppShellSidebarProps>(\n  function Sidebar({ children, className }, ref) {\n  const { api, state } = useAppShell()\n  const isRight = api.config.sidebarPosition === 'right'\n\n  // On mobile: off-canvas drawer via transform\n  // On desktop: static sidebar with variable width\n  const baseClasses = [\n    'flex flex-col shrink-0 overflow-y-auto overflow-x-hidden',\n    'bg-background border-r',\n    'transition-[width,transform] duration-200 ease-in-out',\n    'h-full',\n  ]\n\n  if (isRight) {\n    baseClasses[1] = 'flex flex-col shrink-0 overflow-y-auto overflow-x-hidden bg-background border-l'\n  }\n\n  const mobileClasses = state.isMobile\n    ? [\n        'fixed top-0 z-40',\n        isRight ? 'right-0' : 'left-0',\n        'w-[var(--shell-sidebar-full-width)]',\n        state.sidebarOpen\n          ? 'translate-x-0'\n          : isRight\n            ? 'translate-x-full'\n            : '-translate-x-full',\n      ]\n    : ['relative', 'w-[var(--shell-sidebar-width)]']\n\n  return React.createElement(\n    'aside',\n    {\n      ref,\n      ...api.sidebarAriaProps,\n      className: cn(baseClasses.join(' '), mobileClasses.join(' '), className),\n      'data-collapsed': state.sidebarCollapsed ? '' : undefined,\n      'data-open': state.sidebarOpen ? '' : undefined,\n    },\n    children,\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.Main\n// ---------------------------------------------------------------------------\n\nexport interface AppShellMainProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst Main = React.forwardRef<HTMLDivElement, AppShellMainProps>(\n  function Main({ children, className }, ref) {\n  return React.createElement(\n    'div',\n    {\n      ref,\n      className: cn('flex flex-1 flex-col min-w-0 h-full', className),\n    },\n    children,\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.Header\n// ---------------------------------------------------------------------------\n\nexport interface AppShellHeaderProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst Header = React.forwardRef<HTMLElement, AppShellHeaderProps>(\n  function Header({ children, className }, ref) {\n  const { api, state } = useAppShell()\n\n  const hamburger = state.isMobile\n    ? React.createElement(\n        'button',\n        {\n          type: 'button',\n          'aria-label': 'Toggle sidebar',\n          'aria-expanded': state.sidebarOpen,\n          'aria-controls': api.sidebarAriaProps.id,\n          onClick: () => api.toggleSidebar(),\n          className: 'inline-flex items-center justify-center p-2 mr-2',\n        },\n        React.createElement(\n          'svg',\n          {\n            xmlns: 'http://www.w3.org/2000/svg',\n            width: 24,\n            height: 24,\n            viewBox: '0 0 24 24',\n            fill: 'none',\n            stroke: 'currentColor',\n            strokeWidth: 2,\n            strokeLinecap: 'round',\n            strokeLinejoin: 'round',\n            'aria-hidden': 'true',\n          },\n          React.createElement('line', { x1: 3, y1: 6, x2: 21, y2: 6 }),\n          React.createElement('line', { x1: 3, y1: 12, x2: 21, y2: 12 }),\n          React.createElement('line', { x1: 3, y1: 18, x2: 21, y2: 18 }),\n        ),\n      )\n    : null\n\n  return React.createElement(\n    'header',\n    {\n      ref,\n      ...api.headerAriaProps,\n      className: cn(\n        'sticky top-0 z-30 flex items-center shrink-0',\n        'h-[var(--shell-header-height)]',\n        'border-b bg-background px-4',\n        className,\n      ),\n    },\n    hamburger,\n    children,\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.Content\n// ---------------------------------------------------------------------------\n\nexport interface AppShellContentProps {\n  children?: React.ReactNode\n  className?: string\n  /** Tailwind max-width class suffix, e.g. '6xl' -> max-w-6xl */\n  maxWidth?: string\n}\n\nconst Content = React.forwardRef<HTMLElement, AppShellContentProps>(\n  function Content({ children, className, maxWidth }, ref) {\n  const { api } = useAppShell()\n  const mwClass = maxWidth ? `max-w-${maxWidth}` : ''\n\n  return React.createElement(\n    'main',\n    {\n      ref,\n      ...api.mainAriaProps,\n      className: cn(\n        'flex-1 overflow-y-auto',\n        mwClass ? `${mwClass} mx-auto w-full` : '',\n        'px-4 sm:px-6 lg:px-8 py-6',\n        className,\n      ),\n    },\n    children,\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.MobileNav\n// ---------------------------------------------------------------------------\n\nexport interface AppShellMobileNavProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst MobileNav = React.forwardRef<HTMLElement, AppShellMobileNavProps>(\n  function MobileNav({ children, className }, ref) {\n  const { api, state } = useAppShell()\n\n  if (!state.isMobile) return null\n  if (api.config.mobileNavPosition === 'none') return null\n\n  return React.createElement(\n    'nav',\n    {\n      ref,\n      ...api.mobileNavAriaProps,\n      className: cn(\n        'fixed bottom-0 left-0 right-0 z-30',\n        'flex items-center justify-around',\n        'border-t bg-background',\n        'h-14',\n        className,\n      ),\n    },\n    children,\n  )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// AppShell.Overlay\n// ---------------------------------------------------------------------------\n\nexport interface AppShellOverlayProps {\n  className?: string\n}\n\nconst Overlay = React.forwardRef<HTMLDivElement, AppShellOverlayProps>(\n  function Overlay({ className }, ref) {\n  const { api, state } = useAppShell()\n\n  if (!state.isMobile || !state.sidebarOpen) return null\n\n  return React.createElement('div', {\n    ref,\n    ...api.overlayAriaProps,\n    className: cn(\n      'fixed inset-0 z-30 bg-black/50 transition-opacity',\n      className,\n    ),\n    onClick: () => api.closeSidebar(),\n    'data-shell-overlay': '',\n  })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Compound export\n// ---------------------------------------------------------------------------\n\nexport const AppShell = Object.assign(AppShellRoot, {\n  Sidebar,\n  Main,\n  Header,\n  Content,\n  MobileNav,\n  Overlay,\n})\n\nexport type { AppShellConfig, AppShellState, AppShellAPI }\n", "import * as React from 'react'\nimport {\n  createPageShell,\n  type PageShellConfig,\n  type SectionConfig,\n  type PageShellAPI,\n} from '@refraction-ui/app-shell'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface PageShellContextValue {\n  api: PageShellAPI\n}\n\nconst PageShellContext = React.createContext<PageShellContextValue | null>(null)\n\nfunction usePageShell(): PageShellContextValue {\n  const ctx = React.useContext(PageShellContext)\n  if (!ctx) {\n    devWarn(\n      'react-app-shell/page-shell-compound-outside-provider',\n      'A PageShell compound component was rendered outside of <PageShell>. Wrap it in <PageShell>.',\n    )\n    throw new Error('PageShell compound components must be used within <PageShell>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// PageShell (root)\n// ---------------------------------------------------------------------------\n\nexport interface PageShellProps {\n  config?: PageShellConfig\n  children?: React.ReactNode\n  className?: string\n}\n\nconst PageShellRoot = function PageShell({ config, children, className }: PageShellProps) {\n  const apiRef = React.useRef<PageShellAPI | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createPageShell(config)\n  }\n  const api = apiRef.current\n\n  const cssVars = api.getCSSVariables()\n\n  const ctxValue = React.useMemo<PageShellContextValue>(\n    () => ({ api }),\n    [api],\n  )\n\n  return React.createElement(\n    PageShellContext.Provider,\n    { value: ctxValue },\n    React.createElement(\n      'div',\n      {\n        className: cn('flex min-h-screen flex-col', className),\n        style: cssVars as React.CSSProperties,\n        'data-page-shell': '',\n      },\n      children,\n    ),\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PageShell.Nav\n// ---------------------------------------------------------------------------\n\nexport interface PageShellNavProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nfunction Nav({ children, className }: PageShellNavProps) {\n  const { api } = usePageShell()\n\n  const stickyClass = api.config.navSticky ? 'sticky top-0 z-40' : ''\n  const transparentClass = api.config.navTransparent ? 'bg-transparent' : 'bg-background border-b'\n\n  return React.createElement(\n    'nav',\n    {\n      ...api.navAriaProps,\n      className: cn(\n        'flex items-center h-[var(--page-nav-height)] px-4 sm:px-6 lg:px-8',\n        stickyClass,\n        transparentClass,\n        className,\n      ),\n    },\n    children,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PageShell.Section\n// ---------------------------------------------------------------------------\n\nexport interface PageShellSectionProps extends SectionConfig {\n  children?: React.ReactNode\n  className?: string\n}\n\nfunction Section({\n  children,\n  className,\n  fullWidth,\n  maxWidth,\n  padding,\n  background,\n}: PageShellSectionProps) {\n  const { api } = usePageShell()\n\n  const sectionClasses = api.getSectionClasses({ fullWidth, maxWidth, padding, background })\n\n  return React.createElement(\n    'section',\n    {\n      className: cn('py-12', sectionClasses, className),\n    },\n    children,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PageShell.Footer\n// ---------------------------------------------------------------------------\n\nexport interface PageShellFooterProps {\n  children?: React.ReactNode\n  className?: string\n  columns?: number\n}\n\nfunction Footer({ children, className, columns }: PageShellFooterProps) {\n  const { api } = usePageShell()\n  const cols = columns ?? api.config.footerColumns\n\n  return React.createElement(\n    'footer',\n    {\n      ...api.footerAriaProps,\n      className: cn(\n        'border-t bg-muted py-12 px-4 sm:px-6 lg:px-8',\n        className,\n      ),\n    },\n    React.createElement(\n      'div',\n      {\n        className: `mx-auto max-w-[var(--page-max-width)] grid gap-8`,\n        style: {\n          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n        },\n      },\n      children,\n    ),\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Compound export\n// ---------------------------------------------------------------------------\n\nexport const PageShell = Object.assign(PageShellRoot, {\n  Nav,\n  Section,\n  Footer,\n})\n\nexport type { PageShellConfig, SectionConfig, PageShellAPI }\n", "import * as React from 'react'\nimport {\n  createAuthShell,\n  type AuthShellConfig,\n  type AuthShellAPI,\n} from '@refraction-ui/app-shell'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface AuthShellContextValue {\n  api: AuthShellAPI\n}\n\nconst AuthShellContext = React.createContext<AuthShellContextValue | null>(null)\n\nfunction useAuthShell(): AuthShellContextValue {\n  const ctx = React.useContext(AuthShellContext)\n  if (!ctx) {\n    devWarn(\n      'react-app-shell/auth-shell-compound-outside-provider',\n      'An AuthShell compound component was rendered outside of <AuthShell>. Wrap it in <AuthShell>.',\n    )\n    throw new Error('AuthShell compound components must be used within <AuthShell>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// AuthShell (root)\n// ---------------------------------------------------------------------------\n\nexport interface AuthShellProps {\n  config?: AuthShellConfig\n  children?: React.ReactNode\n  className?: string\n}\n\nconst AuthShellRoot = function AuthShell({ config, children, className }: AuthShellProps) {\n  const apiRef = React.useRef<AuthShellAPI | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createAuthShell(config)\n  }\n  const api = apiRef.current\n\n  const ctxValue = React.useMemo<AuthShellContextValue>(\n    () => ({ api }),\n    [api],\n  )\n\n  return React.createElement(\n    AuthShellContext.Provider,\n    { value: ctxValue },\n    React.createElement(\n      'div',\n      {\n        ...api.ariaProps,\n        className: cn(api.containerClasses, className),\n        'data-auth-shell': '',\n      },\n      children,\n    ),\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AuthShell.Card\n// ---------------------------------------------------------------------------\n\nexport interface AuthShellCardProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nfunction AuthShellCard({ children, className }: AuthShellCardProps) {\n  const { api } = useAuthShell()\n\n  return React.createElement(\n    'div',\n    {\n      className: cn(api.cardClasses, className),\n      'data-auth-card': '',\n    },\n    children,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Compound export\n// ---------------------------------------------------------------------------\n\nexport const AuthShell = Object.assign(AuthShellRoot, {\n  Card: AuthShellCard,\n})\n\nexport type { AuthShellConfig, AuthShellAPI }\n"],
+  "mappings": ";;;;;;;;;;AAuFA,IAAM,WAAqC;EACzC,cAAc;EACd,uBAAuB;EACvB,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,iBAAiB;EACjB,oBAAoB;EACpB,yBAAyB;EACzB,mBAAmB;AACrB;AAMA,SAAS,kBACP,OACA,UACA,UACgB;AAChB,MAAI,QAAQ,SAAU,QAAO;AAC7B,MAAI,QAAQ,SAAU,QAAO;AAC7B,SAAO;AACT;AAEA,SAAS,UACP,aACA,kBACA,YACe;AACf,SAAO;IACL;IACA;IACA;IACA,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,WAAW,eAAe;EAAA;AAE9B;AAMO,SAAS,eAAe,QAAsC;AACnE,QAAM,WAAqC;IACzC,GAAG;IACH,GAAI,SAAS,OAAO,YAAY,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,MAAS,CAAC,IAAI,CAAA;EAAC;AAIjG,MAAI,cAAc;AAClB,MAAI,mBAAmB,SAAS;AAChC,MAAI,aAA6B;AAEjC,QAAM,cAAA,oBAAkB,IAAA;AAExB,QAAM,YAAY,WAAW,mBAAmB;AAEhD,WAAS,WAA0B;AACjC,WAAO,UAAU,aAAa,kBAAkB,UAAU;EAC5D;AAEA,WAAS,SAAe;AACtB,UAAM,IAAI,SAAA;AACV,eAAW,MAAM,aAAa;AAC5B,SAAG,CAAC;IACN;EACF;AAEA,WAAS,gBAAsB;AAC7B,QAAI,eAAe,UAAU;AAC3B,oBAAc,CAAC;IACjB,WAAW,SAAS,oBAAoB;AACtC,yBAAmB,CAAC;IACtB;AACA,WAAA;EACF;AAEA,WAAS,cAAoB;AAC3B,kBAAc;AACd,WAAA;EACF;AAEA,WAAS,eAAqB;AAC5B,kBAAc;AACd,WAAA;EACF;AAEA,WAAS,kBAAwB;AAC/B,uBAAmB;AACnB,WAAA;EACF;AAEA,WAAS,gBAAsB;AAC7B,uBAAmB;AACnB,WAAA;EACF;AAEA,WAAS,cAAc,IAA0B;AAC/C,QAAI,OAAO,WAAY;AACvB,iBAAa;AAEb,QAAI,OAAO,UAAU;AACnB,oBAAc;IAChB;AACA,WAAA;EACF;AAEA,WAAS,kBAA0C;AACjD,UAAM,eAAe,mBACjB,SAAS,wBACT,SAAS;AACb,WAAO;MACL,yBAAyB;MACzB,8BAA8B,SAAS;MACvC,mCAAmC,SAAS;MAC5C,yBAAyB,SAAS;IAAA;EAEtC;AAEA,WAAS,UAAU,IAAoC;AACrD,gBAAY,IAAI,EAAE;AAClB,WAAO,MAAM;AACX,kBAAY,OAAO,EAAE;IACvB;EACF;AAEA,SAAO;IACL,IAAI,QAAQ;AACV,aAAO,SAAA;IACT;IACA,QAAQ;IAER;IACA;IACA;IACA;IACA;IACA;IAEA;IAEA,kBAAkB;MAChB,MAAM;MACN,cAAc;MACd,IAAI;IAAA;IAEN,eAAe;MACb,MAAM;IAAA;IAER,iBAAiB;MACf,MAAM;IAAA;IAER,oBAAoB;MAClB,MAAM;MACN,cAAc;IAAA;IAEhB,kBAAkB;MAChB,eAAe;IAAA;IAGjB;EAAA;AAEJ;AC/MA,IAAMA,YAAsC;EAC1C,UAAU;EACV,WAAW;EACX,gBAAgB;EAChB,WAAW;EACX,eAAe;AACjB;AAMA,IAAM,qBAA+E;EACnF,SAAS;EACT,OAAO;EACP,SAAS;EACT,MAAM;AACR;AAMO,SAAS,gBAAgB,QAAwC;AACtE,QAAM,WAAsC;IAC1C,GAAGA;IACH,GAAI,SAAS,OAAO,YAAY,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,MAAS,CAAC,IAAI,CAAA;EAAC;AAGjG,WAAS,kBAAkB,eAAuC;AAChE,UAAM;MACJ,YAAY;MACZ;MACA,UAAU;MACV,aAAa;IAAA,IACX,iBAAiB,CAAA;AAErB,UAAM,UAAoB,CAAA;AAE1B,QAAI,CAAC,WAAW;AACd,cAAQ,KAAK,SAAS;AACtB,cAAQ,KAAK,QAAQ;AAErB,UAAI,UAAU;AACZ,gBAAQ,KAAK,SAAS,QAAQ,EAAE;MAClC,OAAO;AACL,gBAAQ,KAAK,+BAA+B;MAC9C;IACF;AAEA,QAAI,SAAS;AACX,cAAQ,KAAK,sBAAsB;IACrC;AAEA,UAAM,KAAK,mBAAmB,UAAU;AACxC,QAAI,IAAI;AACN,cAAQ,KAAK,EAAE;IACjB;AAEA,WAAO,QAAQ,KAAK,GAAG;EACzB;AAEA,WAAS,kBAA0C;AACjD,WAAO;MACL,oBAAoB,SAAS;MAC7B,qBAAqB,SAAS;MAC9B,yBAAyB,OAAO,SAAS,aAAa;IAAA;EAE1D;AAEA,SAAO;IACL,QAAQ;IACR,cAAc;MACZ,MAAM;MACN,cAAc;IAAA;IAEhB,iBAAiB;MACf,MAAM;IAAA;IAER;IACA;EAAA;AAEJ;ACnGA,IAAMA,YAAsC;EAC1C,UAAU;EACV,UAAU;EACV,gBAAgB;AAClB;AAMA,IAAM,oBAA0E;EAC9E,IAAI;EACJ,IAAI;EACJ,IAAI;AACN;AAMO,SAAS,gBAAgB,QAAwC;AACtE,QAAM,WAAsC;IAC1C,GAAGA;IACH,GAAI,SAAS,OAAO,YAAY,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,MAAS,CAAC,IAAI,CAAA;EAAC;AAGjG,QAAM,iBAA2B,CAAC,gBAAgB,QAAQ,QAAQ;AAElE,MAAI,SAAS,aAAa,UAAU;AAClC,mBAAe,KAAK,gBAAgB,gBAAgB;EACtD,OAAO;AAEL,mBAAe,KAAK,gBAAgB,iBAAiB,wBAAwB;EAC/E;AAEA,MAAI,SAAS,gBAAgB;AAC3B,mBAAe,KAAK,UAAU;EAChC;AAEA,QAAM,YAAsB;IAC1B;IACA,kBAAkB,SAAS,QAAQ;IACnC;IACA;IACA;IACA;IACA;EAAA;AAGF,SAAO;IACL,QAAQ;IACR,kBAAkB,eAAe,KAAK,GAAG;IACzC,aAAa,UAAU,KAAK,GAAG;IAC/B,WAAW;MACT,MAAM;MACN,cAAc;IAAA;EAChB;AAEJ;;;ACnEA,IAAM,kBAAwB,oBAA2C,IAAI;AAEtE,SAAS,cAAoC;AAClD,QAAM,MAAY,iBAAW,eAAe;AAC5C,MAAI,CAAC,KAAK;AACR;MACE;MACA;IAAA;AAEF,UAAM,IAAI,MAAM,4CAA4C;EAC9D;AACA,SAAO;AACT;AAYA,IAAM,eAAqB;EACzB,SAAS,SAAS,EAAE,QAAQ,UAAU,UAAA,GAAa,KAAK;AAExD,UAAM,SAAe,aAA2B,IAAI;AACpD,QAAI,OAAO,YAAY,MAAM;AAC3B,aAAO,UAAU,eAAe,MAAM;IACxC;AACA,UAAM,MAAM,OAAO;AAGnB,UAAM,CAAC,OAAO,QAAQ,IAAU,eAAwB,MAAM,IAAI,KAAK;AAEjE,IAAA,gBAAU,MAAM;AAEpB,eAAS,IAAI,KAAK;AAClB,aAAO,IAAI,UAAU,CAAC,MAAM,SAAS,CAAC,CAAC;IACzC,GAAG,CAAC,GAAG,CAAC;AAGF,IAAA,gBAAU,MAAM;AACpB,UAAI,OAAO,WAAW,YAAa;AAEnC,YAAM,EAAE,kBAAkB,iBAAA,IAAqB,IAAI;AAEnD,YAAM,cAAc,OAAO,WAAW,eAAe,mBAAmB,CAAC,KAAK;AAC9E,YAAM,cAAc,OAAO;QACzB,eAAe,gBAAgB,uBAAuB,mBAAmB,CAAC;MAAA;AAG5E,eAAS,SAAS;AAChB,cAAM,QAAQ,OAAO;AACrB,cAAM,KAAK,kBAAkB,OAAO,kBAAkB,gBAAgB;AACtE,YAAI,cAAc,EAAE;MACtB;AAGA,aAAA;AAEA,kBAAY,iBAAiB,UAAU,MAAM;AAC7C,kBAAY,iBAAiB,UAAU,MAAM;AAE7C,aAAO,MAAM;AACX,oBAAY,oBAAoB,UAAU,MAAM;AAChD,oBAAY,oBAAoB,UAAU,MAAM;MAClD;IACF,GAAG,CAAC,GAAG,CAAC;AAER,UAAM,UAAU,IAAI,gBAAA;AAEpB,UAAM,WAAiB;MACrB,OAAO,EAAE,KAAK,MAAA;MACd,CAAC,KAAK,KAAK;IAAA;AAGb,WAAa;MACX,gBAAgB;MAChB,EAAE,OAAO,SAAA;MACH;QACJ;QACA;UACE;UACA,WAAW,GAAG,wCAAwC,SAAS;UAC/D,OAAO;UACP,cAAc;QAAA;QAEhB;MAAA;IACF;EAEF;AACF;AAWA,IAAM,UAAgB;EACpB,SAASC,SAAQ,EAAE,UAAU,UAAA,GAAa,KAAK;AAC/C,UAAM,EAAE,KAAK,MAAA,IAAU,YAAA;AACvB,UAAM,UAAU,IAAI,OAAO,oBAAoB;AAI/C,UAAM,cAAc;MAClB;MACA;MACA;MACA;IAAA;AAGF,QAAI,SAAS;AACX,kBAAY,CAAC,IAAI;IACnB;AAEA,UAAM,gBAAgB,MAAM,WACxB;MACE;MACA,UAAU,YAAY;MACtB;MACA,MAAM,cACF,kBACA,UACE,qBACA;IAAA,IAER,CAAC,YAAY,gCAAgC;AAEjD,WAAa;MACX;MACA;QACE;QACA,GAAG,IAAI;QACP,WAAW,GAAG,YAAY,KAAK,GAAG,GAAG,cAAc,KAAK,GAAG,GAAG,SAAS;QACvE,kBAAkB,MAAM,mBAAmB,KAAK;QAChD,aAAa,MAAM,cAAc,KAAK;MAAA;MAExC;IAAA;EAEF;AACF;AAWA,IAAM,OAAa;EACjB,SAASC,MAAK,EAAE,UAAU,UAAA,GAAa,KAAK;AAC5C,WAAa;MACX;MACA;QACE;QACA,WAAW,GAAG,uCAAuC,SAAS;MAAA;MAEhE;IAAA;EAEF;AACF;AAWA,IAAM,SAAe;EACnB,SAASC,QAAO,EAAE,UAAU,UAAA,GAAa,KAAK;AAC9C,UAAM,EAAE,KAAK,MAAA,IAAU,YAAA;AAEvB,UAAM,YAAY,MAAM,WACd;MACJ;MACA;QACE,MAAM;QACN,cAAc;QACd,iBAAiB,MAAM;QACvB,iBAAiB,IAAI,iBAAiB;QACtC,SAAS,MAAM,IAAI,cAAA;QACnB,WAAW;MAAA;MAEP;QACJ;QACA;UACE,OAAO;UACP,OAAO;UACP,QAAQ;UACR,SAAS;UACT,MAAM;UACN,QAAQ;UACR,aAAa;UACb,eAAe;UACf,gBAAgB;UAChB,eAAe;QAAA;QAEX,oBAAc,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,IAAI,EAAA,CAAG;QACrD,oBAAc,QAAQ,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA,CAAI;QACvD,oBAAc,QAAQ,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA,CAAI;MAAA;IAC/D,IAEF;AAEJ,WAAa;MACX;MACA;QACE;QACA,GAAG,IAAI;QACP,WAAW;UACT;UACA;UACA;UACA;QAAA;MACF;MAEF;MACA;IAAA;EAEF;AACF;AAaA,IAAM,UAAgB;EACpB,SAASC,SAAQ,EAAE,UAAU,WAAW,SAAA,GAAY,KAAK;AACzD,UAAM,EAAE,IAAA,IAAQ,YAAA;AAChB,UAAM,UAAU,WAAW,SAAS,QAAQ,KAAK;AAEjD,WAAa;MACX;MACA;QACE;QACA,GAAG,IAAI;QACP,WAAW;UACT;UACA,UAAU,GAAG,OAAO,oBAAoB;UACxC;UACA;QAAA;MACF;MAEF;IAAA;EAEF;AACF;AAWA,IAAM,YAAkB;EACtB,SAASC,WAAU,EAAE,UAAU,UAAA,GAAa,KAAK;AACjD,UAAM,EAAE,KAAK,MAAA,IAAU,YAAA;AAEvB,QAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,QAAI,IAAI,OAAO,sBAAsB,OAAQ,QAAO;AAEpD,WAAa;MACX;MACA;QACE;QACA,GAAG,IAAI;QACP,WAAW;UACT;UACA;UACA;UACA;UACA;QAAA;MACF;MAEF;IAAA;EAEF;AACF;AAUA,IAAM,UAAgB;EACpB,SAASC,SAAQ,EAAE,UAAA,GAAa,KAAK;AACrC,UAAM,EAAE,KAAK,MAAA,IAAU,YAAA;AAEvB,QAAI,CAAC,MAAM,YAAY,CAAC,MAAM,YAAa,QAAO;AAElD,WAAa,oBAAc,OAAO;MAChC;MACA,GAAG,IAAI;MACP,WAAW;QACT;QACA;MAAA;MAEF,SAAS,MAAM,IAAI,aAAA;MACnB,sBAAsB;IAAA,CACvB;EACD;AACF;AAMO,IAAMC,YAAW,OAAO,OAAO,cAAc;EAClD;EACA;EACA;EACA;EACA;EACA;AACF,CAAC;ACrVD,IAAM,mBAAyBC,oBAA4C,IAAI;AAE/E,SAAS,eAAsC;AAC7C,QAAM,MAAYA,iBAAW,gBAAgB;AAC7C,MAAI,CAAC,KAAK;AACRC;MACE;MACA;IAAA;AAEF,UAAM,IAAI,MAAM,+DAA+D;EACjF;AACA,SAAO;AACT;AAYA,IAAM,gBAAgB,SAAS,UAAU,EAAE,QAAQ,UAAU,UAAA,GAA6B;AACxF,QAAM,SAAeD,aAA4B,IAAI;AACrD,MAAI,OAAO,YAAY,MAAM;AAC3B,WAAO,UAAU,gBAAgB,MAAM;EACzC;AACA,QAAM,MAAM,OAAO;AAEnB,QAAM,UAAU,IAAI,gBAAA;AAEpB,QAAM,WAAiB;IACrB,OAAO,EAAE,IAAA;IACT,CAAC,GAAG;EAAA;AAGN,SAAa;IACX,iBAAiB;IACjB,EAAE,OAAO,SAAA;IACH;MACJ;MACA;QACE,WAAWE,GAAG,8BAA8B,SAAS;QACrD,OAAO;QACP,mBAAmB;MAAA;MAErB;IAAA;EACF;AAEJ;AAWA,SAAS,IAAI,EAAE,UAAU,UAAA,GAAgC;AACvD,QAAM,EAAE,IAAA,IAAQ,aAAA;AAEhB,QAAM,cAAc,IAAI,OAAO,YAAY,sBAAsB;AACjE,QAAM,mBAAmB,IAAI,OAAO,iBAAiB,mBAAmB;AAExE,SAAa;IACX;IACA;MACE,GAAG,IAAI;MACP,WAAWA;QACT;QACA;QACA;QACA;MAAA;IACF;IAEF;EAAA;AAEJ;AAWA,SAAS,QAAQ;EACf;EACA;EACA;EACA;EACA;EACA;AACF,GAA0B;AACxB,QAAM,EAAE,IAAA,IAAQ,aAAA;AAEhB,QAAM,iBAAiB,IAAI,kBAAkB,EAAE,WAAW,UAAU,SAAS,WAAA,CAAY;AAEzF,SAAa;IACX;IACA;MACE,WAAWA,GAAG,SAAS,gBAAgB,SAAS;IAAA;IAElD;EAAA;AAEJ;AAYA,SAAS,OAAO,EAAE,UAAU,WAAW,QAAA,GAAiC;AACtE,QAAM,EAAE,IAAA,IAAQ,aAAA;AAChB,QAAM,OAAO,WAAW,IAAI,OAAO;AAEnC,SAAa;IACX;IACA;MACE,GAAG,IAAI;MACP,WAAWA;QACT;QACA;MAAA;IACF;IAEI;MACJ;MACA;QACE,WAAW;QACX,OAAO;UACL,qBAAqB,UAAU,IAAI;QAAA;MACrC;MAEF;IAAA;EACF;AAEJ;AAMO,IAAMC,aAAY,OAAO,OAAO,eAAe;EACpD;EACA;EACA;AACF,CAAC;AC9JD,IAAM,mBAAyBC,oBAA4C,IAAI;AAE/E,SAAS,eAAsC;AAC7C,QAAM,MAAYA,iBAAW,gBAAgB;AAC7C,MAAI,CAAC,KAAK;AACRH;MACE;MACA;IAAA;AAEF,UAAM,IAAI,MAAM,+DAA+D;EACjF;AACA,SAAO;AACT;AAYA,IAAM,gBAAgB,SAAS,UAAU,EAAE,QAAQ,UAAU,UAAA,GAA6B;AACxF,QAAM,SAAeG,aAA4B,IAAI;AACrD,MAAI,OAAO,YAAY,MAAM;AAC3B,WAAO,UAAU,gBAAgB,MAAM;EACzC;AACA,QAAM,MAAM,OAAO;AAEnB,QAAM,WAAiB;IACrB,OAAO,EAAE,IAAA;IACT,CAAC,GAAG;EAAA;AAGN,SAAa;IACX,iBAAiB;IACjB,EAAE,OAAO,SAAA;IACH;MACJ;MACA;QACE,GAAG,IAAI;QACP,WAAWF,GAAG,IAAI,kBAAkB,SAAS;QAC7C,mBAAmB;MAAA;MAErB;IAAA;EACF;AAEJ;AAWA,SAAS,cAAc,EAAE,UAAU,UAAA,GAAiC;AAClE,QAAM,EAAE,IAAA,IAAQ,aAAA;AAEhB,SAAa;IACX;IACA;MACE,WAAWA,GAAG,IAAI,aAAa,SAAS;MACxC,kBAAkB;IAAA;IAEpB;EAAA;AAEJ;AAMO,IAAMG,aAAY,OAAO,OAAO,eAAe;EACpD,MAAM;AACR,CAAC;",
+  "names": ["DEFAULTS", "Sidebar", "Main", "Header", "Content", "MobileNav", "Overlay", "AppShell", "React2", "devWarn", "cn", "PageShell", "React3", "AuthShell"]
+}

package/dist/react-audience-feature-card.js

@@ -0,0 +1,53 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-audience-feature-card/dist/index.js
+import * as React from "react";
+
+// ../audience-feature-card/dist/index.js
+function createAudienceFeatureCard(_props = {}) {
+  const ariaProps = {
+    role: "group"
+  };
+  const dataAttributes = {
+    "data-component": "audience-feature-card"
+  };
+  return { ariaProps, dataAttributes };
+}
+var audienceFeatureCardVariants = cva({
+  base: "flex h-full flex-col rounded-xl border border-border bg-card p-5",
+  variants: {},
+  defaultVariants: {}
+});
+var audienceFeatureCardKickerClass = "text-[10px] uppercase tracking-widest text-primary font-semibold";
+var audienceFeatureCardTitleClass = "mt-2 text-lg font-bold text-foreground";
+var audienceFeatureCardBodyClass = "mt-1 text-sm text-muted-foreground leading-relaxed";
+var audienceFeatureCardFooterClass = "mt-auto pt-4 text-xs";
+
+// ../react-audience-feature-card/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var AudienceFeatureCard = React.forwardRef(function AudienceFeatureCard2({ kicker, title, body, footer, className, ...props }, ref) {
+  const { ariaProps, dataAttributes } = createAudienceFeatureCard();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(audienceFeatureCardVariants(), className),
+      ...ariaProps,
+      ...dataAttributes,
+      ...props,
+      children: [
+        kicker != null && /* @__PURE__ */ jsx("p", { className: audienceFeatureCardKickerClass, children: kicker }),
+        /* @__PURE__ */ jsx("p", { className: audienceFeatureCardTitleClass, children: title }),
+        /* @__PURE__ */ jsx("p", { className: audienceFeatureCardBodyClass, children: body }),
+        footer != null && /* @__PURE__ */ jsx("div", { className: audienceFeatureCardFooterClass, children: footer })
+      ]
+    }
+  );
+});
+export {
+  AudienceFeatureCard
+};
+//# sourceMappingURL=react-audience-feature-card.js.map

package/dist/react-audience-feature-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../audience-feature-card/src/audience-feature-card.ts", "../../audience-feature-card/src/audience-feature-card.styles.ts", "../../react-audience-feature-card/src/audience-feature-card.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface AudienceFeatureCardProps {\n  /** Kicker text displayed above the title (e.g. \"For teams\"). */\n  kicker?: string\n  /** Main title — required. */\n  title: string\n  /** Body copy. */\n  body: string\n  /** Footer content (optional). */\n  footer?: string\n}\n\nexport interface AudienceFeatureCardAPI {\n  /** ARIA attributes to spread on the group element (`role=\"group\"`). */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic group props for an audience feature card.\n *\n * Returns `role=\"group\"` plus data attributes; adapters spread these onto\n * their container and render the kicker, title, body, and footer slots.\n */\nexport function createAudienceFeatureCard(\n  _props: Partial<AudienceFeatureCardProps> = {},\n): AudienceFeatureCardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'group',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'audience-feature-card',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Container — full-height flex column so footers align across a row. */\nexport const audienceFeatureCardVariants = cva({\n  base: 'flex h-full flex-col rounded-xl border border-border bg-card p-5',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** Kicker text above the title. */\nexport const audienceFeatureCardKickerClass =\n  'text-[10px] uppercase tracking-widest text-primary font-semibold'\n\n/** Main title. */\nexport const audienceFeatureCardTitleClass =\n  'mt-2 text-lg font-bold text-foreground'\n\n/** Body copy. */\nexport const audienceFeatureCardBodyClass =\n  'mt-1 text-sm text-muted-foreground leading-relaxed'\n\n/** Footer area — pushed to bottom via mt-auto. */\nexport const audienceFeatureCardFooterClass = 'mt-auto pt-4 text-xs'\n", "import * as React from 'react'\nimport {\n  createAudienceFeatureCard,\n  audienceFeatureCardVariants,\n  audienceFeatureCardKickerClass,\n  audienceFeatureCardTitleClass,\n  audienceFeatureCardBodyClass,\n  audienceFeatureCardFooterClass,\n} from '@refraction-ui/audience-feature-card'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface AudienceFeatureCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Kicker text displayed above the title (e.g. \"For teams\"). */\n  kicker?: React.ReactNode\n  /** Main title — required. */\n  title: React.ReactNode\n  /** Body copy. */\n  body: React.ReactNode\n  /** Footer slot — pushed to bottom of the card. */\n  footer?: React.ReactNode\n}\n\n/**\n * AudienceFeatureCard — a marketing feature/audience card.\n *\n * Full-height flex-col layout so footers align across a row of cards.\n * Accepts kicker, title, body, and an optional footer slot.\n * Spreads `role=\"group\"` from the headless core for accessibility.\n */\nexport const AudienceFeatureCard = React.forwardRef<\n  HTMLDivElement,\n  AudienceFeatureCardProps\n>(function AudienceFeatureCard({ kicker, title, body, footer, className, ...props }, ref) {\n  const { ariaProps, dataAttributes } = createAudienceFeatureCard()\n\n  return (\n    <div\n      ref={ref}\n      className={cn(audienceFeatureCardVariants(), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {kicker != null && (\n        <p className={audienceFeatureCardKickerClass}>{kicker}</p>\n      )}\n      <p className={audienceFeatureCardTitleClass}>{title}</p>\n      <p className={audienceFeatureCardBodyClass}>{body}</p>\n      {footer != null && (\n        <div className={audienceFeatureCardFooterClass}>{footer}</div>\n      )}\n    </div>\n  )\n})\n"],
+  "mappings": ";;;;;;;;;AA0BO,SAAS,0BACd,SAA4C,CAAA,GACpB;AACxB,QAAM,YAAyC;IAC7C,MAAM;EAAA;AAGR,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;ACnCO,IAAM,8BAA8B,IAAI;EAC7C,MAAM;EACN,UAAU,CAAA;EACV,iBAAiB,CAAA;AACnB,CAAC;AAGM,IAAM,iCACX;AAGK,IAAM,gCACX;AAGK,IAAM,+BACX;AAGK,IAAM,iCAAiC;;;;ACQvC,IAAM,sBAA4B,iBAGvC,SAASA,qBAAoB,EAAE,QAAQ,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAA,GAAS,KAAK;AACxF,QAAM,EAAE,WAAW,eAAA,IAAmB,0BAAA;AAEtC,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,4BAAA,GAA+B,SAAS;MACrD,GAAG;MACH,GAAG;MACH,GAAG;MAEH,UAAA;QAAA,UAAU,QACT,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,OAAA,CAAO;QAExD,oBAAC,KAAA,EAAE,WAAW,+BAAgC,UAAA,MAAA,CAAM;QACpD,oBAAC,KAAA,EAAE,WAAW,8BAA+B,UAAA,KAAA,CAAK;QACjD,UAAU,QACT,oBAAC,OAAA,EAAI,WAAW,gCAAiC,UAAA,OAAA,CAAO;MAAA;IAAA;EAAA;AAIhE,CAAC;",
+  "names": ["AudienceFeatureCard"]
+}

package/dist/react-audio-room.js

@@ -0,0 +1,166 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-audio-room/dist/index.js
+import * as React from "react";
+
+// ../audio-room/dist/index.js
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter((w) => /[A-Za-z]/.test(w));
+  if (words.length === 0) return "";
+  if (words.length === 1) return words[0][0].toUpperCase();
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+function orbColumns(count) {
+  if (count <= 1) return 1;
+  if (count <= 4) return 2;
+  if (count <= 9) return 3;
+  return 4;
+}
+function createAudioRoom() {
+  return {
+    ariaProps: { role: "group" },
+    dataAttributes: {
+      "data-component": "audio-room"
+    }
+  };
+}
+var audioRoomVariants = cva({
+  base: "grid place-items-center gap-6 p-6 w-full",
+  variants: {},
+  defaultVariants: {}
+});
+var audioRoomOrbCellVariants = cva({
+  base: "flex flex-col items-center gap-2",
+  variants: {},
+  defaultVariants: {}
+});
+var speakingOrbVariants = cva({
+  base: [
+    "relative inline-flex items-center justify-center",
+    "size-20 rounded-full",
+    "bg-muted text-muted-foreground font-semibold text-xl select-none",
+    "overflow-hidden",
+    "transition-shadow duration-300"
+  ].join(" "),
+  variants: {
+    speaking: {
+      true: [
+        "ring-4 ring-primary ring-offset-2 ring-offset-background",
+        "shadow-[0_0_0_4px_hsl(var(--primary)/0.25),0_0_16px_4px_hsl(var(--primary)/0.35)]"
+      ].join(" "),
+      false: "ring-2 ring-border"
+    },
+    muted: {
+      true: "opacity-60",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    speaking: "false",
+    muted: "false"
+  }
+});
+var audioRoomNameLabelClass = "text-sm font-medium text-foreground text-center max-w-[6rem] truncate";
+var audioRoomMutedBadgeClass = [
+  "absolute bottom-0 right-0",
+  "inline-flex items-center justify-center",
+  "size-6 rounded-full",
+  "bg-destructive text-destructive-foreground",
+  "text-[10px] leading-none",
+  "border-2 border-background",
+  "translate-x-1 translate-y-1"
+].join(" ");
+var audioRoomHandBadgeClass = [
+  "absolute top-0 right-0",
+  "inline-flex items-center justify-center",
+  "size-6 rounded-full",
+  "bg-warning text-warning-foreground",
+  "text-[12px] leading-none",
+  "border-2 border-background",
+  "translate-x-1 -translate-y-1"
+].join(" ");
+
+// ../react-audio-room/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var SpeakingOrb = React.forwardRef(
+  function SpeakingOrb2({
+    name,
+    avatarUrl,
+    speaking = false,
+    muted = false,
+    handRaised = false,
+    className,
+    ...props
+  }, ref) {
+    const initials = getInitials(name);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": name,
+        "data-speaking": speaking ? "true" : "false",
+        "data-muted": muted ? "true" : "false",
+        "data-hand-raised": handRaised ? "true" : "false",
+        className: cn(
+          speakingOrbVariants({
+            speaking: speaking ? "true" : "false",
+            muted: muted ? "true" : "false"
+          }),
+          className
+        ),
+        ...props,
+        children: [
+          avatarUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatarUrl,
+              alt: name,
+              className: "absolute inset-0 size-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }),
+          muted && /* @__PURE__ */ jsx("span", { className: audioRoomMutedBadgeClass, "aria-label": "Muted", children: "\u{1F507}" }),
+          handRaised && /* @__PURE__ */ jsx("span", { className: audioRoomHandBadgeClass, "aria-label": "Hand raised", children: "\u270B" })
+        ]
+      }
+    );
+  }
+);
+var AudioRoom = React.forwardRef(
+  function AudioRoom2({ participants, className, ...props }, ref) {
+    const cols = orbColumns(participants.length);
+    const { ariaProps, dataAttributes } = createAudioRoom();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(audioRoomVariants(), className),
+        style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+        ...ariaProps,
+        ...dataAttributes,
+        ...props,
+        children: participants.map((participant) => /* @__PURE__ */ jsxs("div", { className: audioRoomOrbCellVariants(), children: [
+          /* @__PURE__ */ jsx(
+            SpeakingOrb,
+            {
+              name: participant.name,
+              avatarUrl: participant.avatarUrl,
+              speaking: participant.speaking,
+              muted: participant.muted,
+              handRaised: participant.handRaised
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: audioRoomNameLabelClass, children: participant.name })
+        ] }, participant.id))
+      }
+    );
+  }
+);
+export {
+  AudioRoom,
+  SpeakingOrb
+};
+//# sourceMappingURL=react-audio-room.js.map

package/dist/react-audio-room.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../audio-room/src/audio-room.ts", "../../audio-room/src/audio-room.styles.ts", "../../react-audio-room/src/audio-room.tsx"],
+  "sourcesContent": ["/** A participant in an audio-only room. */\nexport interface AudioParticipant {\n  /** Unique participant identifier. */\n  id: string\n  /** Display name shown below the orb. */\n  name: string\n  /** Optional avatar image URL. Falls back to initials when absent. */\n  avatarUrl?: string\n  /** Whether this participant is currently speaking. */\n  speaking?: boolean\n  /** Whether this participant's microphone is muted. */\n  muted?: boolean\n  /** Whether this participant has raised their hand. */\n  handRaised?: boolean\n}\n\nexport interface AudioRoomAPI {\n  /** ARIA attributes to spread on the room container element. */\n  ariaProps: { role: 'group' }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Derive up to two uppercase initials from a display name.\n *\n * Examples: \"Alice\" → \"A\", \"Bob Smith\" → \"BS\", \"Dr. Jane Doe\" → \"JD\"\n * (only word-initial alphabetic characters are used).\n */\nexport function getInitials(name: string): string {\n  const words = name\n    .trim()\n    .split(/\\s+/)\n    .filter((w) => /[A-Za-z]/.test(w))\n  if (words.length === 0) return ''\n  if (words.length === 1) return words[0][0].toUpperCase()\n  return (words[0][0] + words[words.length - 1][0]).toUpperCase()\n}\n\n/**\n * Determine the number of grid columns for the orb grid.\n *\n * | Count  | Columns |\n * |--------|---------|\n * | 1      | 1       |\n * | 2–4    | 2       |\n * | 5–9    | 3       |\n * | 10+    | 4       |\n */\nexport function orbColumns(count: number): number {\n  if (count <= 1) return 1\n  if (count <= 4) return 2\n  if (count <= 9) return 3\n  return 4\n}\n\n/**\n * Build the framework-agnostic container props for an audio room.\n *\n * Returns `role=\"group\"` plus data attributes that adapters spread onto\n * their outermost container element.\n */\nexport function createAudioRoom(): AudioRoomAPI {\n  return {\n    ariaProps: { role: 'group' },\n    dataAttributes: {\n      'data-component': 'audio-room',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Grid container that lays out the speaking orbs.\n *\n * Column count and gap are applied via inline `gridTemplateColumns` in\n * adapters (dynamic count); this cva handles only the non-dynamic layout\n * concerns — display, alignment, and padding.\n */\nexport const audioRoomVariants = cva({\n  base: 'grid place-items-center gap-6 p-6 w-full',\n  variants: {},\n  defaultVariants: {},\n})\n\n/**\n * Wrapper cell for a single orb + name label combination.\n * Keeps the avatar and label centred as a column.\n */\nexport const audioRoomOrbCellVariants = cva({\n  base: 'flex flex-col items-center gap-2',\n  variants: {},\n  defaultVariants: {},\n})\n\n/**\n * The circular avatar / speaking indicator.\n *\n * - `speaking` adds an animated ring using the primary colour.\n * - `muted` dims the orb slightly to signal a silenced microphone.\n */\nexport const speakingOrbVariants = cva({\n  base: [\n    'relative inline-flex items-center justify-center',\n    'size-20 rounded-full',\n    'bg-muted text-muted-foreground font-semibold text-xl select-none',\n    'overflow-hidden',\n    'transition-shadow duration-300',\n  ].join(' '),\n  variants: {\n    speaking: {\n      true: [\n        'ring-4 ring-primary ring-offset-2 ring-offset-background',\n        'shadow-[0_0_0_4px_hsl(var(--primary)/0.25),0_0_16px_4px_hsl(var(--primary)/0.35)]',\n      ].join(' '),\n      false: 'ring-2 ring-border',\n    },\n    muted: {\n      true: 'opacity-60',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    speaking: 'false',\n    muted: 'false',\n  },\n})\n\n/** Name label rendered below each orb. */\nexport const audioRoomNameLabelClass =\n  'text-sm font-medium text-foreground text-center max-w-[6rem] truncate'\n\n/**\n * Muted badge — a small indicator overlaid at the bottom-right of the orb\n * to show the microphone is off.\n */\nexport const audioRoomMutedBadgeClass = [\n  'absolute bottom-0 right-0',\n  'inline-flex items-center justify-center',\n  'size-6 rounded-full',\n  'bg-destructive text-destructive-foreground',\n  'text-[10px] leading-none',\n  'border-2 border-background',\n  'translate-x-1 translate-y-1',\n].join(' ')\n\n/**\n * Hand-raise badge — shown at the top-right of the orb.\n */\nexport const audioRoomHandBadgeClass = [\n  'absolute top-0 right-0',\n  'inline-flex items-center justify-center',\n  'size-6 rounded-full',\n  'bg-warning text-warning-foreground',\n  'text-[12px] leading-none',\n  'border-2 border-background',\n  'translate-x-1 -translate-y-1',\n].join(' ')\n", "import * as React from 'react'\nimport {\n  createAudioRoom,\n  getInitials,\n  orbColumns,\n  audioRoomVariants,\n  audioRoomOrbCellVariants,\n  speakingOrbVariants,\n  audioRoomNameLabelClass,\n  audioRoomMutedBadgeClass,\n  audioRoomHandBadgeClass,\n  type AudioParticipant,\n} from '@refraction-ui/audio-room'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { AudioParticipant }\n\n// ── SpeakingOrb ──────────────────────────────────────────────────────────────\n\nexport interface SpeakingOrbProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** Participant display name; used for initials and aria-label. */\n  name: string\n  /** Optional avatar image URL. Falls back to initials when absent. */\n  avatarUrl?: string\n  /** Whether this participant is actively speaking. */\n  speaking?: boolean\n  /** Whether this participant is muted. */\n  muted?: boolean\n  /** Whether this participant has raised their hand. */\n  handRaised?: boolean\n}\n\n/**\n * SpeakingOrb — a circular avatar for one audio-room participant.\n *\n * Renders an avatar image (or initials fallback), an animated speaking ring\n * when `speaking` is true, a mic-muted badge when `muted` is true, and an\n * optional raised-hand badge. Fully accessible with `role=\"img\"` and an\n * `aria-label` set to the participant's name.\n */\nexport const SpeakingOrb = React.forwardRef<HTMLDivElement, SpeakingOrbProps>(\n  function SpeakingOrb(\n    {\n      name,\n      avatarUrl,\n      speaking = false,\n      muted = false,\n      handRaised = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const initials = getInitials(name)\n\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        aria-label={name}\n        data-speaking={speaking ? 'true' : 'false'}\n        data-muted={muted ? 'true' : 'false'}\n        data-hand-raised={handRaised ? 'true' : 'false'}\n        className={cn(\n          speakingOrbVariants({\n            speaking: speaking ? 'true' : 'false',\n            muted: muted ? 'true' : 'false',\n          }),\n          className,\n        )}\n        {...props}\n      >\n        {avatarUrl ? (\n          <img\n            src={avatarUrl}\n            alt={name}\n            className=\"absolute inset-0 size-full object-cover\"\n          />\n        ) : (\n          <span aria-hidden=\"true\">{initials}</span>\n        )}\n\n        {muted && (\n          <span className={audioRoomMutedBadgeClass} aria-label=\"Muted\">\n            🔇\n          </span>\n        )}\n\n        {handRaised && (\n          <span className={audioRoomHandBadgeClass} aria-label=\"Hand raised\">\n            ✋\n          </span>\n        )}\n      </div>\n    )\n  },\n)\n\n// ── AudioRoom ─────────────────────────────────────────────────────────────────\n\nexport interface AudioRoomProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** List of participants to render as speaking orbs. */\n  participants: AudioParticipant[]\n}\n\n/**\n * AudioRoom — a responsive grid of SpeakingOrbs for an audio-only meeting.\n *\n * Column count is derived from `orbColumns(n)` so the layout adapts\n * automatically as participants join or leave. The grid uses inline\n * `gridTemplateColumns` because the column count is dynamic.\n */\nexport const AudioRoom = React.forwardRef<HTMLDivElement, AudioRoomProps>(\n  function AudioRoom({ participants, className, ...props }, ref) {\n    const cols = orbColumns(participants.length)\n    const { ariaProps, dataAttributes } = createAudioRoom()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(audioRoomVariants(), className)}\n        style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {participants.map((participant) => (\n          <div key={participant.id} className={audioRoomOrbCellVariants()}>\n            <SpeakingOrb\n              name={participant.name}\n              avatarUrl={participant.avatarUrl}\n              speaking={participant.speaking}\n              muted={participant.muted}\n              handRaised={participant.handRaised}\n            />\n            <span className={audioRoomNameLabelClass}>{participant.name}</span>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SpeakingOrb", "AudioRoom"]
+}

package/dist/react-auth.js

@@ -0,0 +1,211 @@
+import {
+  devWarn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-auth/dist/index.js
+import * as React2 from "react";
+
+// ../auth/dist/index.js
+function createAuth(adapter, config = {}) {
+  const listeners = /* @__PURE__ */ new Set();
+  let state = { user: null, status: "loading" };
+  let unsubAuth = null;
+  let tokenRefreshTimer = null;
+  const { tokenRefreshInterval = 50, testMode = false, testUser } = config;
+  function setState(newState) {
+    state = newState;
+    for (const fn of listeners) {
+      fn(state);
+    }
+  }
+  function setUser(user) {
+    setState({
+      user,
+      status: user ? "authenticated" : "unauthenticated"
+    });
+  }
+  function startTokenRefresh() {
+    if (tokenRefreshTimer) clearInterval(tokenRefreshTimer);
+    tokenRefreshTimer = setInterval(
+      () => {
+        adapter.getToken().catch(() => {
+        });
+      },
+      tokenRefreshInterval * 60 * 1e3
+    );
+  }
+  if (testMode && testUser) {
+    setUser(testUser);
+  } else {
+    unsubAuth = adapter.onAuthStateChange((user) => {
+      setUser(user);
+      if (user) {
+        startTokenRefresh();
+      } else if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer);
+        tokenRefreshTimer = null;
+      }
+    });
+  }
+  return {
+    getState() {
+      return state;
+    },
+    async signIn(email, password) {
+      const user = await adapter.signIn(email, password);
+      setUser(user);
+      startTokenRefresh();
+      return user;
+    },
+    async signInWithOAuth(provider) {
+      const user = await adapter.signInWithOAuth(provider);
+      setUser(user);
+      startTokenRefresh();
+      return user;
+    },
+    async signUp(email, password, displayName) {
+      const user = await adapter.signUp(email, password, displayName);
+      setUser(user);
+      startTokenRefresh();
+      return user;
+    },
+    async signOut() {
+      await adapter.signOut();
+      if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer);
+        tokenRefreshTimer = null;
+      }
+      setUser(null);
+    },
+    async resetPassword(email) {
+      await adapter.resetPassword(email);
+    },
+    async getToken() {
+      return adapter.getToken();
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    },
+    destroy() {
+      listeners.clear();
+      unsubAuth?.();
+      if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer);
+      }
+    }
+  };
+}
+function hasRole(user, role) {
+  return user?.roles?.includes(role) ?? false;
+}
+function hasAnyRole(user, roles) {
+  if (!user?.roles) return false;
+  return roles.some((role) => user.roles.includes(role));
+}
+function hasAllRoles(user, roles) {
+  if (!user?.roles) return false;
+  return roles.every((role) => user.roles.includes(role));
+}
+function canAccessAdmin(user) {
+  return hasRole(user, "admin");
+}
+function canAccessReviewer(user) {
+  return hasAnyRole(user, ["admin", "reviewer"]);
+}
+function getDefaultPortal(roles) {
+  if (roles.includes("admin")) return "/admin";
+  if (roles.includes("reviewer")) return "/reviewer";
+  if (roles.includes("parent")) return "/parent";
+  if (roles.includes("student")) return "/student";
+  return "/";
+}
+function getAssignableRoles(user) {
+  if (!user) return [];
+  if (hasRole(user, "admin")) return ["admin", "reviewer", "parent", "student"];
+  if (hasRole(user, "reviewer")) return ["student"];
+  return [];
+}
+
+// ../react-auth/dist/index.js
+var AuthContext = React2.createContext(null);
+function AuthProvider({ children, ...config }) {
+  const authRef = React2.useRef(null);
+  if (!authRef.current) {
+    if (!config.adapter && !config.testMode) {
+      devWarn(
+        "react-auth/missing-adapter",
+        "<AuthProvider> was rendered without a required `adapter` prop (and not in `testMode`). Pass an auth adapter so the provider can create an auth instance."
+      );
+      throw new Error("[refraction-ui/react-auth] You must provide an `adapter` to AuthProvider.");
+    }
+    authRef.current = createAuth(config.adapter, config);
+  }
+  const [state, setState] = React2.useState(() => authRef.current.getState());
+  React2.useEffect(() => {
+    const unsub = authRef.current.subscribe(setState);
+    return () => {
+      unsub();
+      authRef.current.destroy();
+    };
+  }, []);
+  const value = React2.useMemo(
+    () => ({
+      user: state.user,
+      isLoading: state.status === "loading",
+      isAuthenticated: state.status === "authenticated",
+      signIn: (e, p) => authRef.current.signIn(e, p),
+      signInWithOAuth: (p) => authRef.current.signInWithOAuth(p),
+      signUp: (e, p, d) => authRef.current.signUp(e, p, d),
+      signOut: () => authRef.current.signOut(),
+      resetPassword: (e) => authRef.current.resetPassword(e),
+      getToken: () => authRef.current.getToken()
+    }),
+    [state.user, state.status]
+  );
+  return React2.createElement(AuthContext.Provider, { value }, children);
+}
+function useAuth() {
+  const ctx = React2.useContext(AuthContext);
+  if (!ctx) {
+    devWarn(
+      "react-auth/use-auth-outside-provider",
+      "useAuth() was called outside an <AuthProvider>. Wrap your app (or the consuming subtree) in <AuthProvider> so the auth context is available."
+    );
+    throw new Error("useAuth must be used within an <AuthProvider>");
+  }
+  return ctx;
+}
+function AuthGuard({
+  children,
+  fallback,
+  roles,
+  unauthorized
+}) {
+  const { isLoading, isAuthenticated, user } = useAuth();
+  if (isLoading) {
+    return React2.createElement(React2.Fragment, null, fallback ?? null);
+  }
+  if (!isAuthenticated) {
+    return React2.createElement(React2.Fragment, null, fallback ?? null);
+  }
+  if (roles && roles.length > 0 && !hasAnyRole(user, roles)) {
+    return React2.createElement(React2.Fragment, null, unauthorized ?? null);
+  }
+  return React2.createElement(React2.Fragment, null, children);
+}
+export {
+  AuthGuard,
+  AuthProvider,
+  canAccessAdmin,
+  canAccessReviewer,
+  getAssignableRoles,
+  getDefaultPortal,
+  hasAllRoles,
+  hasAnyRole,
+  hasRole,
+  useAuth
+};
+//# sourceMappingURL=react-auth.js.map

package/dist/react-auth.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../auth/src/auth-machine.ts", "../../auth/src/rbac.ts", "../../auth/src/adapters/mock.ts", "../../react-auth/src/auth-provider.tsx", "../../react-auth/src/auth-guard.tsx"],
+  "sourcesContent": ["import type { User, AuthState, AuthStatus, AuthConfig, AuthAdapter, OAuthProvider } from './types.js'\n\nexport interface AuthAPI {\n  getState(): AuthState\n  signIn(email: string, password: string): Promise<User>\n  signInWithOAuth(provider: OAuthProvider): Promise<User>\n  signUp(email: string, password: string, displayName: string): Promise<User>\n  signOut(): Promise<void>\n  resetPassword(email: string): Promise<void>\n  getToken(): Promise<string | null>\n  subscribe(fn: (state: AuthState) => void): () => void\n  destroy(): void\n}\n\nexport function createAuth(\n  adapter: AuthAdapter,\n  config: Omit<AuthConfig, 'adapter'> = {},\n): AuthAPI {\n  const listeners = new Set<(state: AuthState) => void>()\n  let state: AuthState = { user: null, status: 'loading' }\n  let unsubAuth: (() => void) | null = null\n  let tokenRefreshTimer: ReturnType<typeof setInterval> | null = null\n\n  const { tokenRefreshInterval = 50, testMode = false, testUser } = config\n\n  function setState(newState: AuthState) {\n    state = newState\n    for (const fn of listeners) {\n      fn(state)\n    }\n  }\n\n  function setUser(user: User | null) {\n    setState({\n      user,\n      status: user ? 'authenticated' : 'unauthenticated',\n    })\n  }\n\n  // Start token refresh timer\n  function startTokenRefresh() {\n    if (tokenRefreshTimer) clearInterval(tokenRefreshTimer)\n    tokenRefreshTimer = setInterval(\n      () => { adapter.getToken().catch(() => {}) },\n      tokenRefreshInterval * 60 * 1000,\n    )\n  }\n\n  // Initialize\n  if (testMode && testUser) {\n    setUser(testUser)\n  } else {\n    unsubAuth = adapter.onAuthStateChange((user) => {\n      setUser(user)\n      if (user) {\n        startTokenRefresh()\n      } else if (tokenRefreshTimer) {\n        clearInterval(tokenRefreshTimer)\n        tokenRefreshTimer = null\n      }\n    })\n  }\n\n  return {\n    getState() {\n      return state\n    },\n\n    async signIn(email, password) {\n      const user = await adapter.signIn(email, password)\n      setUser(user)\n      startTokenRefresh()\n      return user\n    },\n\n    async signInWithOAuth(provider) {\n      const user = await adapter.signInWithOAuth(provider)\n      setUser(user)\n      startTokenRefresh()\n      return user\n    },\n\n    async signUp(email, password, displayName) {\n      const user = await adapter.signUp(email, password, displayName)\n      setUser(user)\n      startTokenRefresh()\n      return user\n    },\n\n    async signOut() {\n      await adapter.signOut()\n      if (tokenRefreshTimer) {\n        clearInterval(tokenRefreshTimer)\n        tokenRefreshTimer = null\n      }\n      setUser(null)\n    },\n\n    async resetPassword(email) {\n      await adapter.resetPassword(email)\n    },\n\n    async getToken() {\n      return adapter.getToken()\n    },\n\n    subscribe(fn) {\n      listeners.add(fn)\n      return () => { listeners.delete(fn) }\n    },\n\n    destroy() {\n      listeners.clear()\n      unsubAuth?.()\n      if (tokenRefreshTimer) {\n        clearInterval(tokenRefreshTimer)\n      }\n    },\n  }\n}\n", "import type { User } from './types.js'\n\n/** Check if user has a specific role */\nexport function hasRole(user: User | null, role: string): boolean {\n  return user?.roles?.includes(role) ?? false\n}\n\n/** Check if user has any of the specified roles */\nexport function hasAnyRole(user: User | null, roles: string[]): boolean {\n  if (!user?.roles) return false\n  return roles.some((role) => user.roles.includes(role))\n}\n\n/** Check if user has all of the specified roles */\nexport function hasAllRoles(user: User | null, roles: string[]): boolean {\n  if (!user?.roles) return false\n  return roles.every((role) => user.roles.includes(role))\n}\n\n/** Convenience role checks */\nexport function canAccessAdmin(user: User | null): boolean {\n  return hasRole(user, 'admin')\n}\n\nexport function canAccessReviewer(user: User | null): boolean {\n  return hasAnyRole(user, ['admin', 'reviewer'])\n}\n\n/** Get the default portal URL based on highest-privilege role */\nexport function getDefaultPortal(roles: string[]): string {\n  if (roles.includes('admin')) return '/admin'\n  if (roles.includes('reviewer')) return '/reviewer'\n  if (roles.includes('parent')) return '/parent'\n  if (roles.includes('student')) return '/student'\n  return '/'\n}\n\n/** Get roles that the given user can assign to others */\nexport function getAssignableRoles(user: User | null): string[] {\n  if (!user) return []\n  if (hasRole(user, 'admin')) return ['admin', 'reviewer', 'parent', 'student']\n  if (hasRole(user, 'reviewer')) return ['student']\n  return []\n}\n", "import type { AuthAdapter, User } from '../types.js'\n\n/**\n * Mock auth adapter for testing and development.\n * No external dependencies. Stores state in memory.\n */\nexport function createMockAdapter(initialUser?: User): AuthAdapter {\n  let currentUser: User | null = initialUser ?? null\n  const listeners = new Set<(user: User | null) => void>()\n\n  function notify() {\n    for (const fn of listeners) {\n      fn(currentUser)\n    }\n  }\n\n  return {\n    async signIn(email, _password) {\n      currentUser = {\n        uid: 'mock-' + email,\n        email,\n        displayName: email.split('@')[0],\n        photoURL: null,\n        roles: ['student'],\n      }\n      notify()\n      return currentUser\n    },\n\n    async signInWithOAuth(_provider) {\n      currentUser = {\n        uid: 'mock-oauth',\n        email: 'oauth@example.com',\n        displayName: 'OAuth User',\n        photoURL: null,\n        roles: ['student'],\n      }\n      notify()\n      return currentUser\n    },\n\n    async signUp(email, _password, displayName) {\n      currentUser = {\n        uid: 'mock-' + email,\n        email,\n        displayName,\n        photoURL: null,\n        roles: ['student'],\n      }\n      notify()\n      return currentUser\n    },\n\n    async signOut() {\n      currentUser = null\n      notify()\n    },\n\n    async resetPassword(_email) {\n      // no-op in mock\n    },\n\n    async getToken() {\n      return currentUser ? 'mock-token-' + currentUser.uid : null\n    },\n\n    onAuthStateChange(callback) {\n      listeners.add(callback)\n      // Fire immediately with current state\n      callback(currentUser)\n      return () => { listeners.delete(callback) }\n    },\n  }\n}\n", "import * as React from 'react'\nimport { devWarn } from '@refraction-ui/shared'\nimport {\n  createAuth,\n  type AuthState,\n  type AuthConfig,\n  type AuthAPI,\n  type User,\n  type OAuthProvider,\n} from '@refraction-ui/auth'\n\nexport interface AuthContextValue {\n  user: User | null\n  isLoading: boolean\n  isAuthenticated: boolean\n  signIn: (email: string, password: string) => Promise<User>\n  signInWithOAuth: (provider: OAuthProvider) => Promise<User>\n  signUp: (email: string, password: string, displayName: string) => Promise<User>\n  signOut: () => Promise<void>\n  resetPassword: (email: string) => Promise<void>\n  getToken: () => Promise<string | null>\n}\n\nconst AuthContext = React.createContext<AuthContextValue | null>(null)\n\nexport interface AuthProviderProps extends AuthConfig {\n  children: React.ReactNode\n}\n\n/**\n * AuthProvider — wraps your app with auth context.\n * You must provide an AuthAdapter implementation.\n *\n * ```tsx\n * import { AuthProvider } from '@refraction-ui/react-auth'\n * import { myCustomAdapter } from './auth'\n * \n * <AuthProvider adapter={myCustomAdapter}>\n *   <App />\n * </AuthProvider>\n * ```\n */\nexport function AuthProvider({ children, ...config }: AuthProviderProps) {\n  const authRef = React.useRef<AuthAPI | null>(null)\n\n  if (!authRef.current) {\n    if (!config.adapter && !config.testMode) {\n      devWarn(\n        'react-auth/missing-adapter',\n        '<AuthProvider> was rendered without a required `adapter` prop (and not in `testMode`). Pass an auth adapter so the provider can create an auth instance.',\n      )\n      throw new Error('[refraction-ui/react-auth] You must provide an `adapter` to AuthProvider.')\n    }\n    authRef.current = createAuth(config.adapter, config)\n  }\n\n  const [state, setState] = React.useState<AuthState>(() => authRef.current!.getState())\n\n  React.useEffect(() => {\n    const unsub = authRef.current!.subscribe(setState)\n    return () => {\n      unsub()\n      authRef.current!.destroy()\n    }\n  }, [])\n\n  const value = React.useMemo<AuthContextValue>(\n    () => ({\n      user: state.user,\n      isLoading: state.status === 'loading',\n      isAuthenticated: state.status === 'authenticated',\n      signIn: (e, p) => authRef.current!.signIn(e, p),\n      signInWithOAuth: (p) => authRef.current!.signInWithOAuth(p),\n      signUp: (e, p, d) => authRef.current!.signUp(e, p, d),\n      signOut: () => authRef.current!.signOut(),\n      resetPassword: (e) => authRef.current!.resetPassword(e),\n      getToken: () => authRef.current!.getToken(),\n    }),\n    [state.user, state.status],\n  )\n\n  return React.createElement(AuthContext.Provider, { value }, children)\n}\n\n/**\n * useAuth — access auth state and methods.\n * Must be used within <AuthProvider>.\n */\nexport function useAuth(): AuthContextValue {\n  const ctx = React.useContext(AuthContext)\n  if (!ctx) {\n    devWarn(\n      'react-auth/use-auth-outside-provider',\n      'useAuth() was called outside an <AuthProvider>. Wrap your app (or the consuming subtree) in <AuthProvider> so the auth context is available.',\n    )\n    throw new Error('useAuth must be used within an <AuthProvider>')\n  }\n  return ctx\n}\n", "import * as React from 'react'\nimport { useAuth } from './auth-provider.js'\nimport { hasAnyRole } from '@refraction-ui/auth'\n\nexport interface AuthGuardProps {\n  children: React.ReactNode\n  /** Custom loading UI */\n  fallback?: React.ReactNode\n  /** URL to redirect to when unauthenticated (if using a router) */\n  redirectTo?: string\n  /** Roles required (if any) */\n  roles?: string[]\n  /** UI to show when user lacks required roles */\n  unauthorized?: React.ReactNode\n}\n\n/**\n * AuthGuard — wraps content that requires authentication.\n * Shows loading fallback while auth state resolves.\n * Optionally restricts by role.\n */\nexport function AuthGuard({\n  children,\n  fallback,\n  roles,\n  unauthorized,\n}: AuthGuardProps) {\n  const { isLoading, isAuthenticated, user } = useAuth()\n\n  if (isLoading) {\n    return React.createElement(React.Fragment, null, fallback ?? null)\n  }\n\n  if (!isAuthenticated) {\n    return React.createElement(React.Fragment, null, fallback ?? null)\n  }\n\n  if (roles && roles.length > 0 && !hasAnyRole(user, roles)) {\n    return React.createElement(React.Fragment, null, unauthorized ?? null)\n  }\n\n  return React.createElement(React.Fragment, null, children)\n}\n"],
+  "mappings": "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",
+  "names": ["React"]
+}