@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/app-shell/app-shell.ts

@@ -0,0 +1,252 @@
+import { generateId } from '../shared/index.ts'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type BreakpointName = 'mobile' | 'tablet' | 'desktop'
+
+export interface AppShellConfig {
+  /** Sidebar width when expanded (default '16rem') */
+  sidebarWidth?: string
+  /** Sidebar width when collapsed to icon-only (default '4rem') */
+  sidebarCollapsedWidth?: string
+  /** Header height (default '3.5rem') */
+  headerHeight?: string
+  /** Breakpoint below which layout is mobile (default 768) */
+  mobileBreakpoint?: number
+  /** Breakpoint below which layout is tablet (default 1024) */
+  tabletBreakpoint?: number
+  /** Sidebar position (default 'left') */
+  sidebarPosition?: 'left' | 'right'
+  /** Whether sidebar can be collapsed on desktop (default true) */
+  sidebarCollapsible?: boolean
+  /** Whether sidebar starts collapsed on desktop (default false) */
+  sidebarDefaultCollapsed?: boolean
+  /** Mobile nav position (default 'bottom') */
+  mobileNavPosition?: 'bottom' | 'none'
+}
+
+export interface AppShellState {
+  /** On mobile: drawer open/closed */
+  sidebarOpen: boolean
+  /** On desktop: full/icon-only */
+  sidebarCollapsed: boolean
+  /** Current responsive breakpoint */
+  breakpoint: BreakpointName
+  /** Convenience: breakpoint === 'mobile' */
+  isMobile: boolean
+  /** Convenience: breakpoint === 'tablet' */
+  isTablet: boolean
+  /** Convenience: breakpoint === 'desktop' */
+  isDesktop: boolean
+}
+
+export type AppShellSubscriber = (state: AppShellState) => void
+
+export interface AppShellAPI {
+  /** Current state (snapshot — will not mutate) */
+  state: AppShellState
+  /** Resolved config with all defaults applied */
+  config: Required<AppShellConfig>
+
+  /** Mobile: open/close drawer. Desktop: collapse/expand sidebar. */
+  toggleSidebar(): void
+  /** Open sidebar (mobile drawer) */
+  openSidebar(): void
+  /** Close sidebar (mobile drawer) */
+  closeSidebar(): void
+  /** Collapse sidebar to icon-only (desktop) */
+  collapseSidebar(): void
+  /** Expand sidebar from icon-only (desktop) */
+  expandSidebar(): void
+  /** Update the current breakpoint */
+  setBreakpoint(bp: BreakpointName): void
+
+  /** CSS custom property map for layout dimensions */
+  getCSSVariables(): Record<string, string>
+
+  /** ARIA attributes for sidebar region */
+  sidebarAriaProps: Record<string, string>
+  /** ARIA attributes for main region */
+  mainAriaProps: Record<string, string>
+  /** ARIA attributes for header region */
+  headerAriaProps: Record<string, string>
+  /** ARIA attributes for mobile bottom nav */
+  mobileNavAriaProps: Record<string, string>
+  /** ARIA attributes for mobile sidebar overlay/backdrop */
+  overlayAriaProps: Record<string, string>
+
+  /** Subscribe to state changes. Returns unsubscribe function. */
+  subscribe(fn: AppShellSubscriber): () => void
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<AppShellConfig> = {
+  sidebarWidth: '16rem',
+  sidebarCollapsedWidth: '4rem',
+  headerHeight: '3.5rem',
+  mobileBreakpoint: 768,
+  tabletBreakpoint: 1024,
+  sidebarPosition: 'left',
+  sidebarCollapsible: true,
+  sidebarDefaultCollapsed: false,
+  mobileNavPosition: 'bottom',
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function resolveBreakpoint(
+  width: number,
+  mobileBp: number,
+  tabletBp: number,
+): BreakpointName {
+  if (width < mobileBp) return 'mobile'
+  if (width < tabletBp) return 'tablet'
+  return 'desktop'
+}
+
+function makeState(
+  sidebarOpen: boolean,
+  sidebarCollapsed: boolean,
+  breakpoint: BreakpointName,
+): AppShellState {
+  return {
+    sidebarOpen,
+    sidebarCollapsed,
+    breakpoint,
+    isMobile: breakpoint === 'mobile',
+    isTablet: breakpoint === 'tablet',
+    isDesktop: breakpoint === 'desktop',
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createAppShell(config?: AppShellConfig): AppShellAPI {
+  const resolved: Required<AppShellConfig> = { ...DEFAULTS, ...config }
+
+  // Internal mutable state
+  let sidebarOpen = false
+  let sidebarCollapsed = resolved.sidebarDefaultCollapsed
+  let breakpoint: BreakpointName = 'desktop' // SSR default
+
+  const subscribers = new Set<AppShellSubscriber>()
+
+  const sidebarId = generateId('rfr-shell-sidebar')
+
+  function getState(): AppShellState {
+    return makeState(sidebarOpen, sidebarCollapsed, breakpoint)
+  }
+
+  function notify(): void {
+    const s = getState()
+    for (const fn of subscribers) {
+      fn(s)
+    }
+  }
+
+  function toggleSidebar(): void {
+    if (breakpoint === 'mobile') {
+      sidebarOpen = !sidebarOpen
+    } else if (resolved.sidebarCollapsible) {
+      sidebarCollapsed = !sidebarCollapsed
+    }
+    notify()
+  }
+
+  function openSidebar(): void {
+    sidebarOpen = true
+    notify()
+  }
+
+  function closeSidebar(): void {
+    sidebarOpen = false
+    notify()
+  }
+
+  function collapseSidebar(): void {
+    sidebarCollapsed = true
+    notify()
+  }
+
+  function expandSidebar(): void {
+    sidebarCollapsed = false
+    notify()
+  }
+
+  function setBreakpoint(bp: BreakpointName): void {
+    if (bp === breakpoint) return
+    breakpoint = bp
+    // Auto-close mobile drawer when moving to desktop
+    if (bp !== 'mobile') {
+      sidebarOpen = false
+    }
+    notify()
+  }
+
+  function getCSSVariables(): Record<string, string> {
+    const currentWidth = sidebarCollapsed
+      ? resolved.sidebarCollapsedWidth
+      : resolved.sidebarWidth
+    return {
+      '--shell-sidebar-width': currentWidth,
+      '--shell-sidebar-full-width': resolved.sidebarWidth,
+      '--shell-sidebar-collapsed-width': resolved.sidebarCollapsedWidth,
+      '--shell-header-height': resolved.headerHeight,
+    }
+  }
+
+  function subscribe(fn: AppShellSubscriber): () => void {
+    subscribers.add(fn)
+    return () => {
+      subscribers.delete(fn)
+    }
+  }
+
+  return {
+    get state() {
+      return getState()
+    },
+    config: resolved,
+
+    toggleSidebar,
+    openSidebar,
+    closeSidebar,
+    collapseSidebar,
+    expandSidebar,
+    setBreakpoint,
+
+    getCSSVariables,
+
+    sidebarAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Sidebar',
+      id: sidebarId,
+    },
+    mainAriaProps: {
+      role: 'main',
+    },
+    headerAriaProps: {
+      role: 'banner',
+    },
+    mobileNavAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Mobile navigation',
+    },
+    overlayAriaProps: {
+      'aria-hidden': 'true',
+    },
+
+    subscribe,
+  }
+}
+
+export { resolveBreakpoint }

package/dist/app-shell/auth-shell.ts

@@ -0,0 +1,84 @@
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AuthShellConfig {
+  /** Card max-width preset (default 'sm') */
+  maxWidth?: 'xs' | 'sm' | 'md'
+  /** Card position (default 'center') */
+  position?: 'center' | 'left'
+  /** Show decorative background pattern (default true) */
+  showBackground?: boolean
+}
+
+export interface AuthShellAPI {
+  /** Resolved config with all defaults */
+  config: Required<AuthShellConfig>
+  /** Tailwind classes for the outer container */
+  containerClasses: string
+  /** Tailwind classes for the card */
+  cardClasses: string
+  /** ARIA attributes for the auth region */
+  ariaProps: Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<AuthShellConfig> = {
+  maxWidth: 'sm',
+  position: 'center',
+  showBackground: true,
+}
+
+// ---------------------------------------------------------------------------
+// Class maps
+// ---------------------------------------------------------------------------
+
+const MAX_WIDTH_CLASSES: Record<AuthShellConfig['maxWidth'] & string, string> = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createAuthShell(config?: AuthShellConfig): AuthShellAPI {
+  const resolved: Required<AuthShellConfig> = { ...DEFAULTS, ...config }
+
+  const containerParts: string[] = ['min-h-screen', 'flex', 'w-full']
+
+  if (resolved.position === 'center') {
+    containerParts.push('items-center', 'justify-center')
+  } else {
+    // left-aligned: vertically centered, padded from left
+    containerParts.push('items-center', 'justify-start', 'pl-8 sm:pl-16 lg:pl-24')
+  }
+
+  if (resolved.showBackground) {
+    containerParts.push('bg-muted')
+  }
+
+  const cardParts: string[] = [
+    'w-full',
+    MAX_WIDTH_CLASSES[resolved.maxWidth],
+    'rounded-lg',
+    'border',
+    'bg-card',
+    'p-6',
+    'shadow-sm',
+  ]
+
+  return {
+    config: resolved,
+    containerClasses: containerParts.join(' '),
+    cardClasses: cardParts.join(' '),
+    ariaProps: {
+      role: 'main',
+      'aria-label': 'Authentication',
+    },
+  }
+}

package/dist/app-shell/index.ts

@@ -0,0 +1,22 @@
+export {
+  createAppShell,
+  resolveBreakpoint,
+  type BreakpointName,
+  type AppShellConfig,
+  type AppShellState,
+  type AppShellSubscriber,
+  type AppShellAPI,
+} from './app-shell.js'
+
+export {
+  createPageShell,
+  type PageShellConfig,
+  type SectionConfig,
+  type PageShellAPI,
+} from './page-shell.js'
+
+export {
+  createAuthShell,
+  type AuthShellConfig,
+  type AuthShellAPI,
+} from './auth-shell.js'

package/dist/app-shell/page-shell.ts

@@ -0,0 +1,125 @@
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageShellConfig {
+  /** Max width for contained sections (default '80rem') */
+  maxWidth?: string
+  /** Navigation bar height (default '4rem') */
+  navHeight?: string
+  /** Whether nav is transparent (for hero sections, default false) */
+  navTransparent?: boolean
+  /** Whether nav is sticky (default true) */
+  navSticky?: boolean
+  /** Number of footer columns (default 4) */
+  footerColumns?: number
+}
+
+export interface SectionConfig {
+  /** Whether section spans edge-to-edge (default false) */
+  fullWidth?: boolean
+  /** Override max-width for this section */
+  maxWidth?: string
+  /** Whether section has padding (default true) */
+  padding?: boolean
+  /** Background variant */
+  background?: 'default' | 'muted' | 'primary' | 'none'
+}
+
+export interface PageShellAPI {
+  /** Resolved config with all defaults applied */
+  config: Required<PageShellConfig>
+  /** ARIA attributes for the nav region */
+  navAriaProps: Record<string, string>
+  /** ARIA attributes for the footer region */
+  footerAriaProps: Record<string, string>
+  /** Returns Tailwind utility classes for a section */
+  getSectionClasses(sectionConfig?: SectionConfig): string
+  /** CSS custom property map */
+  getCSSVariables(): Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<PageShellConfig> = {
+  maxWidth: '80rem',
+  navHeight: '4rem',
+  navTransparent: false,
+  navSticky: true,
+  footerColumns: 4,
+}
+
+// ---------------------------------------------------------------------------
+// Background class map
+// ---------------------------------------------------------------------------
+
+const BACKGROUND_CLASSES: Record<NonNullable<SectionConfig['background']>, string> = {
+  default: '',
+  muted: 'bg-muted',
+  primary: 'bg-primary text-primary-foreground',
+  none: '',
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createPageShell(config?: PageShellConfig): PageShellAPI {
+  const resolved: Required<PageShellConfig> = { ...DEFAULTS, ...config }
+
+  function getSectionClasses(sectionConfig?: SectionConfig): string {
+    const {
+      fullWidth = false,
+      maxWidth,
+      padding = true,
+      background = 'default',
+    } = sectionConfig ?? {}
+
+    const classes: string[] = []
+
+    if (!fullWidth) {
+      classes.push('mx-auto')
+      classes.push('w-full')
+      // Use custom max-width or fall through to CSS variable
+      if (maxWidth) {
+        classes.push(`max-w-${maxWidth}`)
+      } else {
+        classes.push('max-w-[var(--page-max-width)]')
+      }
+    }
+
+    if (padding) {
+      classes.push('px-4 sm:px-6 lg:px-8')
+    }
+
+    const bg = BACKGROUND_CLASSES[background]
+    if (bg) {
+      classes.push(bg)
+    }
+
+    return classes.join(' ')
+  }
+
+  function getCSSVariables(): Record<string, string> {
+    return {
+      '--page-max-width': resolved.maxWidth,
+      '--page-nav-height': resolved.navHeight,
+      '--page-footer-columns': String(resolved.footerColumns),
+    }
+  }
+
+  return {
+    config: resolved,
+    navAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Main navigation',
+    },
+    footerAriaProps: {
+      role: 'contentinfo',
+    },
+    getSectionClasses,
+    getCSSVariables,
+  }
+}

package/dist/astro-accordion/Button.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createButton,
+  buttonVariants,
+  getButtonType,
+  type ButtonVariant,
+  type ButtonSize,
+} from '../button/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  loading?: boolean
+  disabled?: boolean
+}
+
+const { variant, size, loading, disabled, class: className, ...props } = Astro.props
+const api = createButton({ variant, size, disabled, loading, type: props.type as string })
+const classes = cn(buttonVariants({ variant, size }), className)
+---
+
+<button
+  type={getButtonType({ type: props.type as string }) as any}
+  class={classes}
+  disabled={disabled || loading}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  {loading && (
+    <svg
+      class="animate-spin h-4 w-4"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )}
+  <slot />
+</button>

package/dist/astro-accordion/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-ai/AIScript.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * AIScript — injects a <script> that initializes the AI client on the page.
+ * Exposes `window.__rfr_ai` for other scripts to call generateText / generateJSON.
+ *
+ * Props mirror AIConfig from @refraction-ui/ai.
+ */
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Default provider name */
+  default?: string
+  /** Fallback chain of provider names */
+  fallback?: string[]
+}
+
+const { default: defaultProvider, fallback, ...props } = Astro.props
+
+const configJSON = JSON.stringify({
+  default: defaultProvider,
+  fallback,
+})
+---
+
+<script
+  data-rfr-ai-config={configJSON}
+  {...props}
+  is:inline
+>
+  ;(function () {
+    // Only initialize once
+    if (window.__rfr_ai) return
+
+    // We cannot import ES modules from an inline script, so we stash the config
+    // and let the consumer call the init function from their own module script.
+    // This inline script sets up the namespace and a deferred init helper.
+    var configEl = document.querySelector('[data-rfr-ai-config]')
+    var config = {}
+    if (configEl) {
+      try { config = JSON.parse(configEl.getAttribute('data-rfr-ai-config') || '{}') } catch (_) { /* */ }
+    }
+
+    // Placeholder that will be replaced once createAI is called
+    window.__rfr_ai = {
+      _config: config,
+      _api: null,
+      _ready: false,
+      init: function (createAI, providers) {
+        var api = createAI(config)
+        if (providers) {
+          Object.keys(providers).forEach(function (name) {
+            api.addProvider(name, providers[name])
+          })
+        }
+        window.__rfr_ai._api = api
+        window.__rfr_ai._ready = true
+        window.__rfr_ai.generateText = api.generateText.bind(api)
+        window.__rfr_ai.generateJSON = api.generateJSON.bind(api)
+        window.__rfr_ai.addProvider = api.addProvider.bind(api)
+        window.__rfr_ai.removeProvider = api.removeProvider.bind(api)
+        window.__rfr_ai.providers = api.providers
+      },
+      generateText: function () { throw new Error('AI not initialized. Call window.__rfr_ai.init(createAI, providers) first.') },
+      generateJSON: function () { throw new Error('AI not initialized. Call window.__rfr_ai.init(createAI, providers) first.') },
+      addProvider: function () { throw new Error('AI not initialized.') },
+      removeProvider: function () { throw new Error('AI not initialized.') },
+      providers: [],
+    }
+  })()
+</script>

package/dist/astro-ai/TTSScript.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * TTSScript — injects a <script> that initializes TTS on the page.
+ * Exposes `window.__rfr_tts` for other scripts to call speak / stop.
+ *
+ * Props mirror TTSConfig from @refraction-ui/ai.
+ */
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Default TTS provider name */
+  default?: string
+}
+
+const { default: defaultProvider, ...props } = Astro.props
+
+const configJSON = JSON.stringify({
+  default: defaultProvider,
+})
+---
+
+<script
+  data-rfr-tts-config={configJSON}
+  {...props}
+  is:inline
+>
+  ;(function () {
+    if (window.__rfr_tts) return
+
+    var configEl = document.querySelector('[data-rfr-tts-config]')
+    var config = {}
+    if (configEl) {
+      try { config = JSON.parse(configEl.getAttribute('data-rfr-tts-config') || '{}') } catch (_) { /* */ }
+    }
+
+    window.__rfr_tts = {
+      _config: config,
+      _api: null,
+      _ready: false,
+      init: function (createTTS, providers) {
+        var api = createTTS(config)
+        if (providers) {
+          Object.keys(providers).forEach(function (name) {
+            api.addProvider(name, providers[name])
+          })
+        }
+        window.__rfr_tts._api = api
+        window.__rfr_tts._ready = true
+        window.__rfr_tts.speak = api.speak.bind(api)
+        window.__rfr_tts.stop = api.stop.bind(api)
+        window.__rfr_tts.addProvider = api.addProvider.bind(api)
+        window.__rfr_tts.providers = api.providers
+      },
+      speak: function () { throw new Error('TTS not initialized. Call window.__rfr_tts.init(createTTS, providers) first.') },
+      stop: function () { throw new Error('TTS not initialized.') },
+      addProvider: function () { throw new Error('TTS not initialized.') },
+      providers: [],
+      isSpeaking: false,
+    }
+  })()
+</script>

package/dist/astro-ai/index.ts

@@ -0,0 +1,16 @@
+export { default as AIScript } from './AIScript.astro'
+export { default as TTSScript } from './TTSScript.astro'
+
+// Re-export core types and factories for convenience
+export {
+  createAI,
+  createTTS,
+  type AIConfig,
+  type TTSConfig,
+  type AIAPI,
+  type TTSAPI,
+  type AIProvider,
+  type TTSProvider,
+  type GenerateOptions,
+  type TTSOptions,
+} from '../ai/index.ts'