28 copyable Liquid Glass app surfaces.

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassDashboard, GlassDataChart, GlassSidebar } from 'aura-glass';

export function SaasDashboardShell() {
  return (
    <GlassDashboard title="Revenue command" compact contained showToolbar>
      <GlassSidebar contained compact showToggle={false} />
      <GlassCard depth="medium" tint="neutral">
        <h2>Pipeline</h2>
        <p>$2.1M forecasted this quarter</p>
        <GlassButton size="sm">Open report</GlassButton>
      </GlassCard>
      <GlassCard depth="medium" tint="neutral">
        <GlassDataChart />
      </GlassCard>
    </GlassDashboard>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassCard, GlassCommandPalette, GlassDataGrid } from 'aura-glass';

export function AiCommandCenter() {
  return (
    <GlassCard depth="strong" tint="neutral">
      <GlassBadge variant="primary">AI operations</GlassBadge>
      <GlassCommandPalette contained compact open showFooter={false} />
      <GlassDataGrid />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassImageViewer, GlassMusicVisualizer, LiquidGlassMediaControls } from 'aura-glass';

export function MediaPlayerSurface() {
  return (
    <section aria-label="Media player">
      <GlassImageViewer contained compact height={280} />
      <LiquidGlassMediaControls playing currentTime={42} duration={180} />
      <GlassMusicVisualizer compact contained realTimeAnalysis={false} />
    </section>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassDataChart, GlassHeatmap } from 'aura-glass';

export function AnalyticsOverview() {
  return (
    <section aria-label="Analytics overview">
      <GlassCard depth="medium" tint="neutral">
        <h2>Growth overview</h2>
        <p>MRR is up 18.6% across expansion accounts.</p>
        <GlassButton size="sm">Export report</GlassButton>
      </GlassCard>
      <GlassCard depth="medium" tint="neutral">
        <GlassDataChart />
      </GlassCard>
      <GlassCard depth="medium" tint="neutral">
        <GlassHeatmap />
      </GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassForm, GlassTabs } from 'aura-glass';

export function SettingsBillingPage() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassTabs value="billing" />
      <GlassForm />
      <GlassButton>Save changes</GlassButton>
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassCard, GlassKanbanBoard } from 'aura-glass';

const columns = [
  {
    id: 'planned',
    title: 'Planned',
    color: '#38bdf8',
    cards: [{ id: 'brief', title: 'Brief launch page', priority: 'medium' as const, tags: ['docs'] }],
  },
  {
    id: 'active',
    title: 'Active',
    color: '#a3e635',
    cards: [{ id: 'qa', title: 'Run visual QA', priority: 'high' as const, tags: ['qa'] }],
  },
  {
    id: 'done',
    title: 'Done',
    color: '#f59e0b',
    cards: [{ id: 'tokens', title: 'Token audit', priority: 'low' as const, tags: ['tokens'] }],
  },
];

export function KanbanWorkspace() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassKanbanBoard
        columns={columns}
        compact
        contained
        enableDrag={false}
        showActions={false}
        maxHeight={360}
      />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCalendar, GlassCard } from 'aura-glass';

export function CalendarSchedulePage() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <header>
        <h2>Launch schedule</h2>
        <GlassButton size="sm">Create event</GlassButton>
      </header>
      <GlassCalendar />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { CollaborativeGlassWorkspace, GlassCard } from 'aura-glass';

export function CollaborativeWorkspace() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <CollaborativeGlassWorkspace compact contained />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassDataGrid, GlassDataTable } from 'aura-glass';

export function AdminDataTable() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassButton size="sm">Invite user</GlassButton>
      <GlassDataGrid />
      <GlassDataTable />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassCard, GlassProductRecommendations, GlassSmartShoppingCart } from 'aura-glass';

export function EcommerceProductPanel() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassProductRecommendations />
      <GlassSmartShoppingCart />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard } from 'aura-glass';
import { GlassAppShell, GlassMain, GlassPage, GlassPageHeader, GlassSidebarRail, GlassStatusBar, GlassTopBar } from 'aura-glass/app-shell';
import { DashboardIcon, SettingsIcon, UsersIcon } from 'aura-glass/icons/navigation';

export function SaasAdminShell() {
  const nav = [
    { id: 'dash', label: 'Dashboard', icon: <DashboardIcon />, active: true },
    { id: 'users', label: 'Users', icon: <UsersIcon /> },
    { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
  ];

  return (
    <GlassAppShell
      topBar={<GlassTopBar brand="AuraGlass Admin" actions={<GlassButton size="sm">Invite</GlassButton>} />}
      sidebar={<GlassSidebarRail items={nav} />}
      statusBar={<GlassStatusBar>Production workspace ready</GlassStatusBar>}
    >
      <GlassMain>
        <GlassPage>
          <GlassPageHeader title="Revenue operations" description="Monitor account health, expansion, and activation without external app chrome." />
          <GlassCard depth="medium" tint="neutral">
            <h2>Pipeline health</h2>
            <p>$2.4M weighted pipeline across 128 accounts.</p>
          </GlassCard>
        </GlassPage>
      </GlassMain>
    </GlassAppShell>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassCard } from 'aura-glass';
import { GlassAppShell, GlassCommandDock, GlassMain, GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { SearchIcon, SparkIcon } from 'aura-glass/icons/ai';

export function AiProductConsole() {
  return (
    <GlassAppShell>
      <GlassMain>
        <GlassPage>
          <GlassPageHeader title="AI command center" description="A dependency-free AI product console with model telemetry and command search." actions={<GlassBadge variant="primary">Live</GlassBadge>} />
          <GlassCommandDock input={<label><span className="sr-only">Ask AuraGlass</span><SearchIcon /> <input placeholder="Summarize workspace telemetry" /></label>} actions={<SparkIcon />} />
          <GlassCard depth="medium" tint="neutral">
            <h2>Model quality</h2>
            <p>98% grounded responses across the last 42 docs.</p>
          </GlassCard>
        </GlassPage>
      </GlassMain>
    </GlassAppShell>
  );
}

import 'aura-glass/styles';
import { LiquidGlassMediaControls, GlassMusicVisualizer } from 'aura-glass';
import { GlassCanvasArea, GlassTimelineRail, GlassWorkspace, GlassWorkspaceHeader } from 'aura-glass/workspace';
import { PlayIcon, VideoIcon } from 'aura-glass/icons/media';

export function MediaReviewWorkspace() {
  return (
    <GlassWorkspace header={<GlassWorkspaceHeader title="Media review" description="Review clips, notes, and audio intensity from one glass workspace." />}>
      <GlassCanvasArea><VideoIcon size={48} /><p>Hero cut preview</p></GlassCanvasArea>
      <LiquidGlassMediaControls playing currentTime={42} duration={180} />
      <GlassTimelineRail label="Timeline"><span><PlayIcon /> Intro sequence</span><GlassMusicVisualizer compact contained realTimeAnalysis={false} /></GlassTimelineRail>
    </GlassWorkspace>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassProductRecommendations, GlassSmartShoppingCart } from 'aura-glass';
import { SuccessIcon, WarningIcon } from 'aura-glass/icons/status';

export function CommerceOperationsPanel() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <header><h2>Commerce operations</h2><GlassButton size="sm">Review orders</GlassButton></header>
      <p><SuccessIcon /> 94 orders cleared fulfillment.</p>
      <p><WarningIcon /> 6 carts need payment follow-up.</p>
      <GlassProductRecommendations />
      <GlassSmartShoppingCart />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { CollaborativeGlassWorkspace, GlassCard } from 'aura-glass';
import { GlassInspectorPanel, GlassWorkspace } from 'aura-glass/workspace';
import { UsersIcon } from 'aura-glass/icons/collaboration';

export function TeamCollaborationHub() {
  return (
    <GlassWorkspace inspector={<GlassInspectorPanel title="Presence"><UsersIcon /> 8 teammates online</GlassInspectorPanel>}>
      <GlassCard depth="medium" tint="neutral">
        <CollaborativeGlassWorkspace compact contained />
      </GlassCard>
    </GlassWorkspace>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassForm, GlassTabs } from 'aura-glass';
import { GlassWorkflowShell } from 'aura-glass/workspace';
import { SettingsIcon } from 'aura-glass/icons/navigation';

export function SettingsAndBillingSuite() {
  return (
    <GlassWorkflowShell title="Settings and billing" description="Account controls, plan state, and billing workflow without external form chrome." actions={<SettingsIcon />}>
      <GlassCard depth="medium" tint="neutral">
        <GlassTabs value="billing" />
        <GlassForm />
        <GlassButton>Save billing settings</GlassButton>
      </GlassCard>
    </GlassWorkflowShell>
  );
}

import 'aura-glass/styles';
import { GlassCard, GlassDataChart, GlassHeatmap } from 'aura-glass';
import { GlassCommandDock, GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { DatabaseIcon, SearchIcon } from 'aura-glass/icons/data';

export function AnalyticsCommandCenter() {
  return (
    <GlassPage>
      <GlassPageHeader title="Analytics command center" description="Filter revenue, retention, and usage from one command surface." actions={<DatabaseIcon />} />
      <GlassCommandDock input={<span><SearchIcon /> Ask for cohort performance</span>} />
      <GlassCard depth="medium" tint="neutral"><GlassDataChart /><GlassHeatmap /></GlassCard>
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCalendar, GlassCard } from 'aura-glass';
import { GlassWorkspacePanel } from 'aura-glass/workspace';
import { CalendarIcon } from 'aura-glass/icons/navigation';

export function CalendarOperationsBoard() {
  return (
    <GlassWorkspacePanel title="Launch calendar" actions={<GlassButton size="sm">New event</GlassButton>}>
      <p><CalendarIcon /> May launch sequence</p>
      <GlassCard depth="medium" tint="neutral"><GlassCalendar /></GlassCard>
    </GlassWorkspacePanel>
  );
}

import 'aura-glass/styles';
import { GlassCard, GlassDataGrid, GlassDataTable, GlassNotificationCenter } from 'aura-glass';
import { AlertCircleIcon, SuccessIcon } from 'aura-glass/icons/status';

export function CustomerSupportConsole() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <h2>Support queue</h2>
      <p><AlertCircleIcon /> 12 escalations</p>
      <p><SuccessIcon /> 48 tickets resolved today</p>
      <GlassDataGrid />
      <GlassDataTable />
      <GlassNotificationCenter />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { GlassCard, GlassFileUpload, GlassImageViewer, GlassMusicVisualizer } from 'aura-glass';
import { GlassWorkflowShell } from 'aura-glass/workspace';
import { ImageIcon, VideoIcon } from 'aura-glass/icons/media';

export function CreatorStudioDashboard() {
  return (
    <GlassWorkflowShell title="Creator studio" description="Plan, upload, preview, and review media in one glass-native studio.">
      <GlassCard depth="medium" tint="neutral">
        <p><ImageIcon /> Asset library</p>
        <p><VideoIcon /> Review queue</p>
        <GlassFileUpload compact contained showActions={false} />
        <GlassImageViewer contained compact height={260} />
        <GlassMusicVisualizer compact contained realTimeAnalysis={false} />
      </GlassCard>
    </GlassWorkflowShell>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassErrorState, GlassLoadingState, GlassMetricChip, GlassProgress } from 'aura-glass';
import { GlassCommandDock, GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { CommandIcon, SparkIcon, ZapIcon } from 'aura-glass/icons/ai';
import { AlertTriangleIcon, InfoIcon } from 'aura-glass/icons/status';

const safetyReviews = ['PII redaction', 'Prompt injection scan', 'Grounding evidence'];

export function AiOpsControlRoom() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="AI ops control room"
        description="Track provider readiness, spend, rate limits, and prompt-safety review without assuming hosted credentials are present."
        actions={<GlassBadge variant="warning"><AlertTriangleIcon /> Provider unconfigured</GlassBadge>}
      />
      <GlassCommandDock input={<span><CommandIcon /> Review usage policy</span>} actions={<SparkIcon />} />
      <section className="glass-grid glass-gap-4 md:glass-grid-cols-3" aria-label="AI operations metrics">
        <GlassMetricChip label="Daily spend" value="$0.00" delta="No provider key" intent="warning" icon={<InfoIcon />} />
        <GlassMetricChip label="Rate limit" value="Paused" delta="Fail-closed" intent="warning" icon={<ZapIcon />} />
        <GlassMetricChip label="Prompt reviews" value={safetyReviews.length} delta="Manual queue" intent="success" icon={<SparkIcon />} />
      </section>
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
        <h2>Cost budget</h2>
        <GlassProgress value={18} variant="warning" label="Monthly AI budget reserved" showValue animated={false} />
        <GlassLoadingState label="Waiting for provider telemetry" description="Usage polling starts only after credentials and API auth are configured." variant="skeleton" rows={3} />
      </GlassCard>
      <GlassErrorState
        severity="warning"
        title="AI provider is not configured"
        description="Set provider credentials and hosted-runtime auth before enabling generation, semantic search, or vision actions."
        details={<code>OPENAI_API_KEY and provider feature flags are unset.</code>}
      />
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-3 glass-p-4">
        <h2>Prompt safety review</h2>
        {safetyReviews.map((item) => <p key={item}><SparkIcon /> {item}</p>)}
        <GlassButton size="sm" disabled>Run review after provider setup</GlassButton>
      </GlassCard>
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassDataGrid, GlassEmptyState, GlassErrorState, GlassLoadingState, GlassSearchField } from 'aura-glass';
import { GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { DatabaseIcon, FileIcon, SearchIcon } from 'aura-glass/icons/data';

export function SemanticSearchConsole() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="Semantic search console"
        description="Inspect indexed documents, run safe query tests, and tune relevance once provider-backed search is configured."
        actions={<GlassBadge variant="secondary"><DatabaseIcon /> 0 indexed docs</GlassBadge>}
      />
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
        <GlassSearchField label="Test query" placeholder="Search indexed documentation" value="" onChange={() => undefined} />
        <GlassErrorState
          severity="warning"
          title="Search provider unconfigured"
          description="Connect embeddings and vector index credentials before query execution. The UI stays fail-closed until then."
          details={<code>Embeddings and vector index are disabled.</code>}
        />
      </GlassCard>
      <section className="glass-grid glass-gap-4 md:glass-grid-cols-2" aria-label="Search readiness">
        <GlassLoadingState label="Index readiness" description="Waiting for a configured indexing provider." variant="progress" progress={0} />
        <GlassEmptyState
          variant="search"
          title="No indexed documents"
          description="Upload or index documents after the provider route returns ready."
          icon={<FileIcon />}
        />
      </section>
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-3 glass-p-4">
        <h2><SearchIcon /> Relevance tuning</h2>
        <p>Score threshold, chunk size, and source weighting controls should connect only to authenticated hosted routes.</p>
        <GlassButton size="sm" disabled>Run query after setup</GlassButton>
        <GlassDataGrid />
      </GlassCard>
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassCard, GlassEmptyState, GlassErrorState, GlassFileUpload, GlassImageViewer, GlassLoadingState } from 'aura-glass';
import { GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { ImageIcon } from 'aura-glass/icons/media';
import { AlertCircleIcon, InfoIcon } from 'aura-glass/icons/status';

export function VisionReviewWorkbench() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="Vision review workbench"
        description="Review images, OCR, object labels, and safe-search output after provider-backed vision routes are configured."
        actions={<GlassBadge variant="warning"><AlertCircleIcon /> Vision offline</GlassBadge>}
      />
      <section className="glass-grid glass-gap-4 lg:glass-grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
        <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
          <GlassFileUpload
            accept="image/*"
            compact
            contained
            disabled
            instruction="Image upload is disabled until the hosted vision provider is configured."
            showActions={false}
          />
          <GlassImageViewer contained compact height={260} />
        </GlassCard>
        <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
          <GlassErrorState
            severity="warning"
            title="Vision provider not configured"
            description="OCR, object detection, and safe-search analysis remain unavailable until credentials are connected."
            details={<code>VISION_PROVIDER_READY=false</code>}
          />
          <GlassLoadingState label="Analysis queue" description="No analysis jobs are running." variant="skeleton" rows={3} />
          <GlassEmptyState variant="compact" title="No OCR results" description="Run analysis after provider setup." icon={<ImageIcon />} />
          <p><InfoIcon /> Keep manual review available for images that cannot be sent to provider APIs.</p>
        </GlassCard>
      </section>
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassErrorState, GlassMetricChip, GlassUserPresence } from 'aura-glass';
import { GlassInspectorPanel, GlassWorkspace } from 'aura-glass/workspace';
import { BellIcon, UsersIcon } from 'aura-glass/icons/collaboration';

const participants = [
  { id: 'design', name: 'Design lead', status: 'online' as const },
  { id: 'frontend', name: 'Frontend engineer', status: 'away' as const },
  { id: 'release', name: 'Release owner', status: 'busy' as const },
];

export function CollaborationRoomConsole() {
  return (
    <GlassWorkspace inspector={<GlassInspectorPanel title="Room presence"><UsersIcon /> {participants.length} observers</GlassInspectorPanel>}>
      <section className="glass-grid glass-gap-4">
        <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
          <header className="glass-flex glass-items-center glass-justify-between glass-gap-3">
            <h2>Collaboration room</h2>
            <GlassBadge variant="warning"><BellIcon /> Editing unsupported</GlassBadge>
          </header>
          <div className="glass-flex glass-flex-wrap glass-gap-2">
            <GlassMetricChip label="Presence" value="Static" delta="No WebSocket" intent="warning" icon={<UsersIcon />} />
            <GlassMetricChip label="Selections" value="Read-only" delta="3 watchers" intent="default" />
          </div>
          <GlassUserPresence users={participants} compact showRoles={false} />
          <GlassErrorState
            severity="warning"
            title="Realtime editing is not enabled"
            description="This recipe displays room and selection state, but document editing must stay read-only until the hosted collaboration runtime ships CRDT/OT support."
            details={<code>Collaboration transport is disconnected by default.</code>}
          />
          <GlassButton size="sm" disabled>Start editing after runtime setup</GlassButton>
        </GlassCard>
        <GlassEmptyState
          variant="compact"
          title="No live cursor stream"
          description="Cursor and selection events appear here after authenticated WebSocket support is enabled."
          icon={<UsersIcon />}
        />
      </section>
    </GlassWorkspace>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassDataGrid, GlassDataTable, GlassErrorState, GlassMetricChip, GlassNotificationCenter } from 'aura-glass';
import { GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { SearchIcon } from 'aura-glass/icons/data';
import { AlertCircleIcon, SuccessIcon } from 'aura-glass/icons/status';

export function SupportTriageWorkspace() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="Support triage workspace"
        description="Prioritize escalations, SLA risk, and account context with AI summaries disabled until providers are configured."
        actions={<GlassBadge variant="warning"><AlertCircleIcon /> 4 SLA risks</GlassBadge>}
      />
      <section className="glass-grid glass-gap-4 md:glass-grid-cols-3" aria-label="Support queue summary">
        <GlassMetricChip label="Open tickets" value="128" delta="+9 today" intent="warning" icon={<AlertCircleIcon />} />
        <GlassMetricChip label="Resolved" value="47" delta="24h" intent="success" icon={<SuccessIcon />} />
        <GlassMetricChip label="AI summaries" value="Off" delta="Provider missing" intent="warning" icon={<SearchIcon />} />
      </section>
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
        <GlassErrorState
          severity="warning"
          title="AI summary action is fail-closed"
          description="Agents can triage manually. Summaries become available only after authenticated provider-backed routes are ready."
          details={<code>POST /api/ai/summarize returns provider-unconfigured.</code>}
        />
        <GlassButton size="sm" disabled>Generate summary after setup</GlassButton>
        <GlassDataGrid />
        <GlassDataTable />
      </GlassCard>
      <GlassNotificationCenter />
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassMetricChip, GlassProgress, GlassTimeline } from 'aura-glass';
import { GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { CheckIcon, DownloadIcon, RefreshIcon } from 'aura-glass/icons/action';
import { AlertTriangleIcon, SuccessIcon } from 'aura-glass/icons/status';

const checklist = ['Package dry run', 'Recipe render evidence', 'A11y signoff', 'Rollback note'];
const releaseEvents = [
  { id: 'pack', title: 'Package dry run', subtitle: 'npm pack evidence attached', time: '09:00' },
  { id: 'recipes', title: 'Recipe render gate', subtitle: 'Screenshots captured for 3.3 recipes', time: '10:30' },
  { id: 'rollout', title: 'Canary rollout', subtitle: '25% staged publish window', time: '12:00' },
];

export function ReleaseCommandCenter() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="Release command center"
        description="Coordinate launch readiness, staged rollout, changelog review, evidence links, and rollback controls."
        actions={<GlassBadge variant="success"><SuccessIcon /> 3.3 candidate</GlassBadge>}
      />
      <section className="glass-grid glass-gap-4 md:glass-grid-cols-3" aria-label="Release metrics">
        <GlassMetricChip label="Checklist" value="3/4" delta="Manual QA left" intent="warning" icon={<CheckIcon />} />
        <GlassMetricChip label="Rollout" value="25%" delta="Canary" intent="success" icon={<RefreshIcon />} />
        <GlassMetricChip label="Evidence" value="Linked" delta="3.3 reports" intent="default" icon={<DownloadIcon />} />
      </section>
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
        <h2>Rollout status</h2>
        <GlassProgress value={25} variant="success" label="Canary rollout" showValue animated={false} />
        {checklist.map((item) => <p key={item}><CheckIcon /> {item}</p>)}
        <GlassTimeline items={releaseEvents} />
      </GlassCard>
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-3 glass-p-4">
        <h2>Changelog preview</h2>
        <p>3.3 adds provider-safe recipes, theme preset guidance, and marketing launch surfaces.</p>
        <GlassButton size="sm">Open evidence</GlassButton>
        <GlassButton size="sm" variant="secondary"><AlertTriangleIcon /> Prepare rollback</GlassButton>
      </GlassCard>
      <GlassEmptyState variant="compact" title="No rollout incidents" description="Incident links appear here if release monitoring reports failures." />
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassSearchField, GlassTabs } from 'aura-glass';
import { GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { FileIcon, SearchIcon } from 'aura-glass/icons/data';

const entrypoints = ['aura-glass', 'aura-glass/theme', 'aura-glass/app-shell', 'aura-glass/registry'];

export function DeveloperDocsPortal() {
  return (
    <GlassPage>
      <GlassPageHeader
        title="Developer docs portal"
        description="Document stable package entrypoints, recipes, examples, and release evidence from one glass-native docs shell."
        actions={<GlassBadge variant="primary"><FileIcon /> 3.3 docs</GlassBadge>}
      />
      <GlassCard depth="medium" tint="neutral" className="glass-space-y-4 glass-p-4">
        <GlassSearchField label="Search docs" placeholder="Find components, recipes, or entrypoints" value="" onChange={() => undefined} />
        <GlassTabs value="install" />
        <div className="glass-grid glass-gap-3 md:glass-grid-cols-2">
          {entrypoints.map((entrypoint) => (
            <GlassCard key={entrypoint} depth="subtle" tint="neutral" className="glass-p-3">
              <h3>{entrypoint}</h3>
              <code>import &#123; GlassButton &#125; from '{entrypoint}';</code>
            </GlassCard>
          ))}
        </div>
        <GlassButton size="sm"><SearchIcon /> Browse examples</GlassButton>
      </GlassCard>
      <GlassEmptyState
        variant="compact"
        title="No private imports required"
        description="3.3 docs should show public root and subpath imports only."
        icon={<FileIcon />}
      />
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { AuroraBackground, DisplayText, FeatureTile, GlassButton, InstallCommand, LogoMark, ShowcaseCard } from 'aura-glass';

const features = [
  ['App UI', 'Production shell, workflow, and data surfaces for real product screens.'],
  ['Theme presets', 'Documented density, motion, and contrast policy starters.'],
  ['Safe AI recipes', 'Provider-unconfigured UI states before hosted credentials are wired.'],
];

export function MarketingLaunchKit() {
  return (
    <main className="glass-min-h-screen glass-bg-slate-950 glass-text-primary">
      <section className="glass-relative glass-overflow-hidden glass-p-8 md:glass-p-12">
        <AuroraBackground particles={12} grain vignette reducedMotion seed="auraglass-33-launch" />
        <div className="glass-relative glass-mx-auto glass-grid glass-max-w-6xl glass-gap-8">
          <LogoMark label="AuraGlass" animated={false} />
          <DisplayText as="h1" size="hero" gradient="aurora" balance>
            AuraGlass 3.3 launch kit
          </DisplayText>
          <p className="glass-max-w-2xl glass-text-lg glass-text-secondary">
            Build launch pages that pair premium Liquid Glass marketing surfaces with production package evidence.
          </p>
          <div className="glass-flex glass-flex-wrap glass-gap-3">
            <GlassButton variant="aurora">Start building</GlassButton>
            <InstallCommand packageManager="npm" />
          </div>
          <div className="glass-grid glass-gap-4 md:glass-grid-cols-3">
            {features.map(([title, description], index) => (
              <FeatureTile key={title} index={index + 1} title={title} description={description} tone="aurora" />
            ))}
          </div>
          <ShowcaseCard intensity="strong" glow="aurora" floating={false}>
            <h2>Launch proof</h2>
            <p>Link visual baselines, recipe render evidence, changelog notes, and accessibility signoff before publishing.</p>
          </ShowcaseCard>
        </div>
      </section>
    </main>
  );
}