28 copyable Liquid Glass app surfaces.

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const metrics = [
  ['Monthly revenue', '$184,240', '+12.8%'],
  ['Active accounts', '2,846', '+8.2%'],
  ['Net retention', '118.4%', '+3.1%'],
];

const activity = [
  ['Northstar Labs', 'Expansion', '$18,400'],
  ['Lumen Systems', 'Renewal', '$12,800'],
  ['Fieldwork AI', 'New business', '$9,600'],
];

export function SaasDashboardShell() {
  return (
    <section className="ag-light-recipe" aria-labelledby="revenue-command" style={{ gap: 18 }}><style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div><GlassBadge variant="primary">Revenue workspace</GlassBadge><h1 id="revenue-command" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 40px)', letterSpacing: '-0.04em' }}>Revenue command</h1><p style={{ margin: 0, color: '#526071' }}>A clear view of growth, retention, and the deals moving this week.</p></div>
        <GlassButton size="sm">Open forecast</GlassButton>
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 190px), 1fr))', gap: 12 }}>
        {metrics.map(([label, value, delta]) => <GlassCard key={label} depth="medium" tint="neutral"><p style={{ margin: 0, color: '#526071', fontSize: 13 }}>{label}</p><strong style={{ display: 'block', marginTop: 8, fontSize: 28, letterSpacing: '-0.03em' }}>{value}</strong><span style={{ color: '#176b4d', fontSize: 13 }}>{delta} this month</span></GlassCard>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: 12 }}>
        <GlassCard depth="medium" tint="neutral"><div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}><div><h2 style={{ margin: 0, fontSize: 18 }}>Revenue momentum</h2><p style={{ margin: '4px 0 0', color: '#526071', fontSize: 13 }}>Trailing six months</p></div><strong>$1.02M</strong></div><div aria-label="Revenue grew steadily from March to August" style={{ display: 'flex', alignItems: 'end', gap: 8, height: 128, marginTop: 18 }}>{[38, 52, 47, 68, 76, 92].map((height, index) => <div key={index} style={{ flex: 1, height: height + '%', minWidth: 12, borderRadius: '8px 8px 4px 4px', background: 'linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.16))', border: '1px solid rgba(62,101,190,.5)' }} />)}</div></GlassCard>
        <GlassCard depth="medium" tint="neutral"><h2 style={{ margin: '0 0 12px', fontSize: 18 }}>Pipeline activity</h2>{activity.map(([name, stage, value]) => <div key={name} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 8, padding: '10px 0', borderTop: '1px solid rgba(86,104,126,.16)' }}><span><strong style={{ display: 'block' }}>{name}</strong><small style={{ color: '#526071' }}>{stage}</small></span><strong>{value}</strong></div>)}</GlassCard>
      </div>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const models = [
  ['Atlas Reasoning', 'Healthy', '842 ms'],
  ['Prism Search', 'Healthy', '216 ms'],
  ['Canvas Vision', 'Review', '1.4 s'],
];

export function AiCommandCenter() {
  return (
    <section className="ag-light-recipe" aria-labelledby="ai-operations"><style>{lightRecipeCss}</style>
      <header><GlassBadge variant="primary">AI operations</GlassBadge><h1 id="ai-operations" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>Model command center</h1><p style={{ margin: 0, color: '#526071' }}>Monitor quality, latency, and every production workflow from one surface.</p></header>
      <GlassCard depth="strong" tint="neutral"><label htmlFor="ai-command" style={{ display: 'block', marginBottom: 8, fontWeight: 650 }}>Run a workspace command</label><div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}><input id="ai-command" placeholder="Ask about latency, quality, or spend" style={{ flex: '1 1 230px', minWidth: 0, boxSizing: 'border-box', padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit', outlineColor: '#3269d8' }} /><GlassButton size="sm">Run command</GlassButton></div></GlassCard>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 190px), 1fr))', gap: 12 }}>
        <GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Grounded answers</small><strong style={{ display: 'block', fontSize: 28, marginTop: 8 }}>98.4%</strong><span style={{ color: '#176b4d' }}>+1.8% this week</span></GlassCard>
        <GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Requests today</small><strong style={{ display: 'block', fontSize: 28, marginTop: 8 }}>24,892</strong><span style={{ color: '#526071' }}>71% of daily budget</span></GlassCard>
        <GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Median latency</small><strong style={{ display: 'block', fontSize: 28, marginTop: 8 }}>684 ms</strong><span style={{ color: '#176b4d' }}>Within target</span></GlassCard>
      </div>
      <GlassCard depth="medium" tint="neutral"><h2 style={{ margin: '0 0 8px', fontSize: 18 }}>Model fleet</h2>{models.map(([name, state, latency]) => <div key={name} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto auto', alignItems: 'center', gap: 12, padding: '12px 0', borderTop: '1px solid rgba(86,104,126,.16)' }}><strong>{name}</strong><span style={{ color: state === 'Healthy' ? '#176b4d' : '#8a5611' }}>{state}</span><span style={{ color: '#526071' }}>{latency}</span></div>)}</GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
import { GlassImageViewer, GlassMusicVisualizer, LiquidGlassMediaControls } from 'aura-glass';

export function MediaPlayerSurface() {
  return (
    <section className="ag-light-recipe ag-media-player" aria-label="Media player">
      <style>{lightRecipeCss}</style>
      <GlassImageViewer className="ag-media-preview" contained compact height={280} />
      <LiquidGlassMediaControls compact playing currentTime={42} duration={180} />
      <GlassMusicVisualizer className="ag-media-visualizer" compact contained realTimeAnalysis={false} />
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
import { GlassButton, GlassCard, GlassDataChart, GlassHeatmap } from 'aura-glass';

const growthSeries = [
  {
    id: 'monthly-recurring-revenue',
    label: 'Monthly recurring revenue',
    formatType: 'currency',
    data: [
      { x: 'Mar', y: 184000 },
      { x: 'Apr', y: 196000 },
      { x: 'May', y: 211000 },
      { x: 'Jun', y: 228000 },
      { x: 'Jul', y: 247000 },
      { x: 'Aug', y: 263000 },
    ],
  },
];

const cohortHealth = [
  [68, 72, 76, 79, 82, 84],
  [64, 69, 73, 77, 80, 83],
  [61, 66, 71, 75, 79, 81],
  [58, 63, 68, 72, 76, 79],
];

export function AnalyticsOverview() {
  return (
    <section className="ag-light-recipe ag-recipe-chart" aria-label="Analytics overview">
      <style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
        <div><p style={{ margin: '0 0 5px', color: '#526071', fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase' }}>Executive pulse · August</p><h1 style={{ margin: 0, padding: '2px 0 3px', fontSize: 'clamp(28px, 4vw, 42px)', letterSpacing: '-.045em', lineHeight: 1.08, overflow: 'visible' }}>Growth overview</h1><p style={{ margin: '5px 0 0', color: '#526071' }}>Revenue, retention, and product adoption across 1,284 active accounts.</p></div>
        <GlassButton size="sm">Export report</GlassButton>
      </header>
      <div className="recipe-analytics-metrics" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 170px), 1fr))', gap: 12 }}>
        {[
          ['Monthly revenue', '$263k', '+18.6% YoY'],
          ['Net retention', '112.4%', '+3.8 pts'],
          ['Active accounts', '1,284', '+74 this month'],
          ['Expansion pipeline', '$481k', '63% qualified'],
        ].map(([label, value, note]) => <GlassCard key={label} depth="medium" tint="neutral"><small style={{ color: '#526071', fontWeight: 650 }}>{label}</small><strong style={{ display: 'block', margin: '8px 0 5px', fontSize: 'clamp(24px, 3vw, 32px)', letterSpacing: '-.035em' }}>{value}</strong><span style={{ color: '#526071', fontSize: 13 }}>{note}</span></GlassCard>)}
      </div>
      <GlassCard depth="medium" tint="neutral">
        <GlassDataChart title="Revenue trajectory" subtitle="Recognized monthly recurring revenue · Mar–Aug" datasets={growthSeries} variant="area" width="100%" height={300} glassVariant="clear" palette={['#53657d']} showToolbar={false} allowDownload={false} legend={{ show: false, position: 'top', align: 'start', style: 'compact', glassEffect: false }} />
      </GlassCard>
      <GlassCard depth="medium" tint="neutral">
        <div style={{ marginBottom: 14 }}><h2 style={{ margin: 0, fontSize: 19, letterSpacing: '-.02em' }}>Cohort activation</h2><p style={{ margin: '5px 0 0', color: '#526071', fontSize: 14 }}>Weekly activation rate by signup cohort and lifecycle week.</p></div>
        <GlassHeatmap data={cohortHealth} xAxis={{ title: 'Lifecycle week', labels: ['1', '2', '3', '4', '5', '6'] }} yAxis={{ title: 'Signup cohort', labels: ['May 6', 'May 13', 'May 20', 'May 27'] }} colorScale={{ min: '#f1f5f9', mid: '#cbd5e1', max: '#94a3b8', steps: 6 }} cellSize={20} cellGap={8} contained maxHeight={290} showValues showLegend legendPosition="bottom" animated={false} />
      </GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

export function SettingsBillingPage() {
  return (
    <section className="ag-light-recipe" aria-labelledby="billing-settings"><style>{lightRecipeCss}</style>
      <header><GlassBadge variant="primary">Account settings</GlassBadge><h1 id="billing-settings" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>Billing &amp; plan</h1><p style={{ margin: 0, color: '#526071' }}>Manage your workspace plan, payment details, and invoices.</p></header>
      <nav aria-label="Settings sections" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{['Profile', 'Team', 'Billing', 'Security'].map(label => <button key={label} type="button" aria-current={label === 'Billing' ? 'page' : undefined} style={{ padding: '9px 14px', color: '#172033', background: label === 'Billing' ? 'rgba(255,255,255,.35)' : 'rgba(255,255,255,.16)', border: '1px solid rgba(80,102,130,.22)', borderRadius: 999, font: 'inherit', fontWeight: 650 }}>{label}</button>)}</nav>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 270px), 1fr))', gap: 12 }}>
        <GlassCard depth="medium" tint="neutral"><div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}><div><small style={{ color: '#526071' }}>Current plan</small><h2 style={{ margin: '6px 0 2px', fontSize: 22 }}>Studio</h2><p style={{ margin: 0, color: '#526071' }}>$48 / member / month</p></div><GlassBadge variant="primary">Active</GlassBadge></div><p style={{ margin: '18px 0 8px' }}>18 of 25 seats in use</p><div style={{ height: 8, overflow: 'hidden', borderRadius: 99, background: 'rgba(70,91,117,.16)' }}><div style={{ width: '72%', height: '100%', background: '#4677d8', borderRadius: 99 }} /></div></GlassCard>
        <GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Next invoice</small><strong style={{ display: 'block', marginTop: 6, fontSize: 26 }}>$864.00</strong><p style={{ color: '#526071' }}>Due September 12 · Visa ending 4242</p><GlassButton size="sm">View invoices</GlassButton></GlassCard>
      </div>
      <GlassCard depth="medium" tint="neutral"><h2 style={{ margin: '0 0 14px', fontSize: 20 }}>Payment method</h2><form style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 210px), 1fr))', gap: 12 }}><label style={{ fontWeight: 650 }}>Name on card<input defaultValue="Morgan Chen" style={{ display: 'block', width: '100%', boxSizing: 'border-box', marginTop: 7, padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /></label><label style={{ fontWeight: 650 }}>Billing email<input type="email" defaultValue="billing@northstar.co" style={{ display: 'block', width: '100%', boxSizing: 'border-box', marginTop: 7, padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /></label></form><div style={{ marginTop: 16 }}><GlassButton>Save billing details</GlassButton></div></GlassCard>
    </section>
  );
}

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" className="ag-recipe-surface ag-recipe-kanban">
      <GlassKanbanBoard
        columns={columns}
        compact
        contained
        enableDrag={false}
        showActions={false}
        maxHeight={360}
      />
    </GlassCard>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
import { GlassButton, GlassCalendar, GlassCard } from 'aura-glass';

export function CalendarSchedulePage() {
  return (
    <section className="ag-light-recipe ag-recipe-calendar" aria-label="Calendar schedule">
      <style>{lightRecipeCss}</style>
      <GlassCard depth="medium" tint="neutral">
      <header>
        <h2>Launch schedule</h2>
        <GlassButton size="sm">Create event</GlassButton>
      </header>
        <GlassCalendar compact contained maxRows={4} maxHeight={420} />
      </GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
import { CollaborativeGlassWorkspace, GlassBadge, GlassButton, GlassCard, GlassMetricChip, GlassUserPresence } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const collaborators = [
  { id: 'maya', name: 'Maya Chen', status: 'online' as const, role: 'admin' as const, activity: 'Refining launch narrative' },
  { id: 'jon', name: 'Jon Bell', status: 'online' as const, role: 'member' as const, activity: 'Reviewing prototype notes' },
  { id: 'priya', name: 'Priya Shah', status: 'away' as const, role: 'member' as const, activity: 'Back at 2:30 PM' },
];

const activity = [
  ['Launch brief', 'Maya edited 4 min ago'],
  ['Prototype review', '12 comments resolved'],
  ['Research synthesis', 'Jon added 3 insights'],
];

export function CollaborativeWorkspace() {
  return (
    <section className="ag-light-recipe ag-collab-recipe" aria-labelledby="collaborative-workspace-title">
      <style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end', justifyContent: 'space-between', gap: 12 }}>
        <div>
          <GlassBadge variant="secondary">Product studio</GlassBadge>
          <h1 id="collaborative-workspace-title" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 40px)', letterSpacing: '-0.04em', lineHeight: 1.08 }}>Launch workspace</h1>
          <p style={{ margin: 0, color: '#526071' }}>A shared room for the brief, prototype decisions, and today’s review.</p>
        </div>
        <GlassButton size="sm">Share workspace</GlassButton>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))', gap: 12 }}>
        <GlassMetricChip label="Teammates" value="3 online" delta="1 away" intent="default" />
        <GlassMetricChip label="Decisions" value="8" delta="2 need review" intent="default" />
        <GlassMetricChip label="Comments" value="12 resolved" delta="4 open" intent="default" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 16, alignItems: 'start' }}>
        <GlassCard depth="medium" tint="neutral" className="ag-recipe-surface" style={{ padding: 16 }}>
          <h2 style={{ margin: '0 0 4px', fontSize: 18 }}>Today’s activity</h2>
          <p style={{ margin: '0 0 14px', color: '#526071', fontSize: 14 }}>The latest changes, collected in one calm view.</p>
          <div style={{ display: 'grid', gap: 10 }}>
            {activity.map(([title, detail]) => (
              <div key={title} style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '4px 12px', padding: '11px 12px', border: '1px solid rgba(255,255,255,.32)', borderRadius: 14, background: 'rgba(255,255,255,.18)' }}>
                <strong>{title}</strong><small style={{ color: '#526071' }}>{detail}</small>
              </div>
            ))}
          </div>
        </GlassCard>
        <GlassUserPresence users={collaborators} compact showRoles showActivities maxUsers={3} />
      </div>

      <GlassCard depth="medium" tint="neutral" className="ag-recipe-surface ag-recipe-collaboration" style={{ padding: 12, overflow: 'hidden' }}>
        <CollaborativeGlassWorkspace
          workspaceId="launch-workspace"
          userId="maya"
          userName="Maya Chen"
          userEmail="maya@example.com"
          userRole="admin"
          aria-label="Collaborative launch canvas"
          compact
          contained
          maxHeight={300}
          theme="light"
          enableRealTimeSync={false}
          enableVoiceChat={false}
          enableVersionControl={false}
          showMiniMap={false}
          showOnlineUsers={false}
          showCursors={false}
        />
      </GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const users = [
  ['Avery Stone', 'avery@northstar.co', 'Admin', 'Active'],
  ['Nina Patel', 'nina@northstar.co', 'Analyst', 'Active'],
  ['Theo Grant', 'theo@northstar.co', 'Viewer', 'Invited'],
  ['Maya Lin', 'maya@northstar.co', 'Manager', 'Active'],
];

export function AdminDataTable() {
  return (
    <section className="ag-light-recipe" aria-labelledby="team-directory"><style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end', justifyContent: 'space-between', gap: 12 }}><div><GlassBadge variant="primary">Workspace admin</GlassBadge><h1 id="team-directory" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>Team directory</h1><p style={{ margin: 0, color: '#526071' }}>Review access, roles, and pending invitations.</p></div><GlassButton size="sm">Invite user</GlassButton></header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 170px), 1fr))', gap: 12 }}><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Active members</small><strong style={{ display: 'block', fontSize: 26, marginTop: 6 }}>128</strong></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Pending invites</small><strong style={{ display: 'block', fontSize: 26, marginTop: 6 }}>6</strong></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Admin seats</small><strong style={{ display: 'block', fontSize: 26, marginTop: 6 }}>8</strong></GlassCard></div>
      <GlassCard depth="medium" tint="neutral"><label htmlFor="user-search" style={{ fontWeight: 650 }}>Search directory</label><input id="user-search" type="search" placeholder="Name, email, or role" style={{ display: 'block', width: '100%', boxSizing: 'border-box', margin: '8px 0 14px', padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /><div role="table" aria-label="Workspace members" style={{ minWidth: 0 }}>{users.map(([name, email, role, state]) => <div role="row" key={email} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,.65fr) minmax(0,.55fr)', gap: 8, alignItems: 'center', padding: '12px 0', borderTop: '1px solid rgba(86,104,126,.16)', fontSize: 14 }}><span role="cell" style={{ minWidth: 0 }}><strong style={{ display: 'block' }}>{name}</strong><small style={{ display: 'block', overflowWrap: 'anywhere', color: '#526071' }}>{email}</small></span><span role="cell" style={{ overflowWrap: 'anywhere' }}>{role}</span><span role="cell" style={{ overflowWrap: 'anywhere', color: state === 'Active' ? '#176b4d' : '#8a5611' }}>{state}</span></div>)}</div></GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const products = [
  { id: 'studio-headphones', name: 'Studio headphones', detail: 'Spatial audio · 32-hour battery', price: '$249', mark: 'SH' },
  { id: 'travel-case', name: 'Travel case', detail: 'Recycled shell · Magnetic close', price: '$49', mark: 'TC' },
  { id: 'charging-stand', name: 'Charging stand', detail: 'Fast wireless charging', price: '$89', mark: 'CS' },
];

const commerceCss = `
  .ag-commerce-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(270px,.75fr); gap: 16px; align-items: start; }
  .ag-commerce-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .ag-commerce-product { display: grid; gap: 10px; min-width: 0; padding: 12px; }
  .ag-commerce-visual { display: grid; place-items: center; aspect-ratio: 4 / 3; min-height: 112px; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12); color: rgba(30,41,59,.92); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
  .ag-commerce-product h3 { margin: 0; font-size: .94rem; line-height: 1.3; }
  .ag-commerce-product p { margin: 0; min-height: 2.7em; color: #4b5a70; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
  .ag-commerce-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .ag-commerce-price > * { min-width: 0; }
  .ag-commerce-cart { display: grid; gap: 14px; position: sticky; top: 12px; }
  .ag-commerce-cart-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid rgba(100,116,139,.18); }
  .ag-commerce-cart-line strong, .ag-commerce-cart-line small { display: block; overflow-wrap: anywhere; }
  .ag-commerce-cart-line small { margin-top: 3px; color: #4b5a70; }
  .ag-commerce-total { display: flex; justify-content: space-between; gap: 12px; font-size: 1.05rem; }
  @media (max-width: 820px) { .ag-commerce-layout { grid-template-columns: minmax(0,1fr); } .ag-commerce-cart { position: static; } }
  @media (max-width: 560px) { .ag-commerce-products { grid-template-columns: minmax(0,1fr); } .ag-commerce-visual { aspect-ratio: 16 / 7; min-height: 94px; } .ag-commerce-product p { min-height: 0; } .ag-commerce-price { flex-wrap: wrap; } .ag-commerce-price button { flex: 0 0 auto; max-width: 100%; } }
  @media (max-width: 350px) { .ag-commerce-price { display: grid; align-items: stretch; } .ag-commerce-price > [data-glass-component="true"] { display: block; width: 100%; } .ag-commerce-price button { width: 100%; } }
`;

export function EcommerceProductPanel() {
  return (
    <section className="ag-light-recipe ag-recipe-commerce" aria-labelledby="featured-essentials"><style>{lightRecipeCss + commerceCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ minWidth: 0 }}><GlassBadge variant="primary">Studio collection</GlassBadge><h1 id="featured-essentials" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px,4vw,40px)', lineHeight: 1.08, letterSpacing: '-.045em' }}>Featured essentials</h1><p style={{ margin: 0, color: '#4b5a70', lineHeight: 1.5 }}>Purposeful accessories for a focused, beautifully organized workspace.</p></div>
        <GlassButton size="sm">View collection</GlassButton>
      </header>
      <div className="ag-commerce-layout">
        <div className="ag-commerce-products" aria-label="Featured products">
          {products.map((product) => <GlassCard key={product.id} depth="medium" tint="neutral" className="ag-commerce-product"><div className="ag-commerce-visual" aria-hidden="true">{product.mark}</div><div><h3>{product.name}</h3><p>{product.detail}</p></div><div className="ag-commerce-price"><strong>{product.price}</strong><GlassButton size="sm" aria-label={'Add ' + product.name + ' to cart'}>Add</GlassButton></div></GlassCard>)}
        </div>
        <GlassCard depth="medium" tint="neutral" className="ag-commerce-cart" aria-labelledby="cart-summary">
          <div><GlassBadge variant="secondary">2 items</GlassBadge><h2 id="cart-summary" style={{ margin: '9px 0 3px', fontSize: '1.25rem', letterSpacing: '-.025em' }}>Cart summary</h2><p style={{ margin: 0, color: '#4b5a70', fontSize: '.86rem', lineHeight: 1.45 }}>Complimentary delivery and returns.</p></div>
          <div><div className="ag-commerce-cart-line"><span><strong>Studio headphones</strong><small>Graphite · Qty 1</small></span><strong>$249</strong></div><div className="ag-commerce-cart-line"><span><strong>Travel case</strong><small>Stone · Qty 1</small></span><strong>$49</strong></div></div>
          <div className="ag-commerce-total"><strong>Total</strong><strong>$298</strong></div>
          <GlassButton style={{ width: '100%' }}>Secure checkout</GlassButton>
          <small style={{ color: '#4b5a70', textAlign: 'center', lineHeight: 1.4 }}>Taxes calculated at checkout.</small>
        </GlassCard>
      </div>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, 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 className="recipe-polish saas-admin-shell" density="compact"
      topBar={<GlassTopBar brand={<span><strong style={{ display: 'block', lineHeight: 1.2 }}>Northstar</strong><small style={{ display: 'block', color: 'rgba(51,65,85,.92)', lineHeight: 1.3 }}>Growth workspace</small></span>} actions={<GlassButton size="sm">Invite member</GlassButton>} />}
      sidebar={<GlassSidebarRail items={nav} />}
      statusBar={<div style={{ padding: 4, minWidth: 0 }}><GlassStatusBar className="glass-flex-wrap glass-py-1 glass-leading-5"><span>Production workspace ready</span><span>Synced moments ago</span></GlassStatusBar></div>}
    >
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <style>{`
        .saas-admin-shell { min-height: 0 !important; width: 100%; max-width: 100%; overflow: hidden; }
        .saas-admin-shell .glass-top-bar__brand { min-width: 0; }
        .saas-admin-shell .glass-sidebar-rail button { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.72) !important; color: rgba(30,41,59,.94) !important; }
        .saas-admin-shell .admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
        .saas-admin-shell .admin-metric { min-width: 0; }
        .saas-admin-shell .admin-metric small, .saas-admin-shell .admin-account small { display: block; color: rgba(51,65,85,.92); line-height: 1.4; }
        .saas-admin-shell .admin-metric strong { display: block; margin-top: 6px; font-size: clamp(1.35rem,3vw,1.8rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
        .saas-admin-shell .admin-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr); gap: 12px; align-items: start; }
        .saas-admin-shell .admin-chart { display: flex; align-items: end; gap: 8px; height: 148px; margin-top: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: rgba(255,255,255,.18); }
        .saas-admin-shell .admin-chart span { flex: 1; min-width: 8px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.18)); border: 1px solid rgba(255,255,255,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 14px rgba(71,85,105,.11); }
        .saas-admin-shell .admin-account { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(100,116,139,.18); }
        .saas-admin-shell .admin-account strong { display: block; overflow-wrap: anywhere; }
        @media (max-width: 760px) { .saas-admin-shell .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .saas-admin-shell .admin-grid { grid-template-columns: minmax(0,1fr); } }
        @media (max-width: 600px) { .saas-admin-shell { width: 100% !important; margin-left: 0 !important; } .saas-admin-shell .glass-app-shell__body { grid-template-columns: minmax(0,1fr) !important; } .saas-admin-shell .glass-sidebar-rail { width: 100% !important; flex-direction: row !important; justify-content: center; } .saas-admin-shell .glass-status-bar { align-items: flex-start; flex-direction: column; gap: 2px; padding-top: 8px; padding-bottom: 8px; } .saas-admin-shell .glass-top-bar { align-items: center; } .saas-admin-shell .glass-top-bar__actions { flex-shrink: 0; } }
        @media (max-width: 360px) { .saas-admin-shell .admin-metrics { grid-template-columns: minmax(0,1fr); } .saas-admin-shell .glass-top-bar { flex-wrap: wrap; } .saas-admin-shell .glass-top-bar__actions { width: 100%; margin-left: 0; } }
      `}</style>
      <GlassMain>
        <GlassPage>
          <GlassPageHeader eyebrow="Revenue operations" title="Good morning, Maya" description="Monitor account health, expansion, and activation from one calm operating view." actions={<GlassButton size="sm">Export report</GlassButton>} />
          <div className="admin-metrics">
            {[['Monthly revenue','$428K','+12.4% this quarter'],['Active accounts','1,284','38 added this month'],['Net retention','118%','4 points above plan'],['Open pipeline','$2.4M','128 qualified accounts']].map(([label,value,note]) => <GlassCard key={label} depth="medium" tint="neutral" className="admin-metric"><small>{label}</small><strong>{value}</strong><small>{note}</small></GlassCard>)}
          </div>
          <div className="admin-grid">
            <GlassCard depth="medium" tint="neutral"><div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'start', justifyContent: 'space-between', gap: 10 }}><div><h2 className="recipe-section-title">Pipeline health</h2><p className="recipe-copy" style={{ marginTop: 5 }}>$2.4M weighted pipeline across 128 accounts.</p></div><GlassBadge variant="secondary">Last 8 weeks</GlassBadge></div><div className="admin-chart" role="img" aria-label="Pipeline increased steadily over the last eight weeks">{[38,49,44,62,58,76,72,88].map((height,index) => <span key={index} style={{ height: height + '%' }} />)}</div></GlassCard>
            <GlassCard depth="medium" tint="neutral"><div><h2 className="recipe-section-title">Accounts to watch</h2><p className="recipe-copy" style={{ marginTop: 5 }}>Signals requiring a focused follow-up.</p></div><div style={{ marginTop: 10 }}>{[['Acme Studio','Renewal in 12 days','At plan'],['Orbital Labs','Usage up 24%','Expansion'],['River & Co.','2 seats inactive','Review']].map(([name,note,state]) => <div key={name} className="admin-account"><span><strong>{name}</strong><small>{note}</small></span><GlassBadge variant="secondary">{state}</GlassBadge></div>)}</div></GlassCard>
          </div>
        </GlassPage>
      </GlassMain>
    </GlassAppShell>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

export function AiProductConsole() {
  return (
    <section className="ag-light-recipe" aria-labelledby="ai-product"><style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'start', gap: 12 }}><div><GlassBadge variant="primary">Production · Live</GlassBadge><h1 id="ai-product" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>AI product console</h1><p style={{ margin: 0, color: '#526071' }}>Inspect response quality, knowledge coverage, and recent evaluations.</p></div><GlassButton size="sm">New evaluation</GlassButton></header>
      <GlassCard depth="strong" tint="neutral"><label htmlFor="product-prompt" style={{ fontWeight: 650 }}>Test a production prompt</label><div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8 }}><input id="product-prompt" placeholder="Summarize workspace telemetry" style={{ flex: '1 1 220px', minWidth: 0, boxSizing: 'border-box', padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /><GlassButton size="sm">Generate</GlassButton></div></GlassCard>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 190px), 1fr))', gap: 12 }}><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Grounded responses</small><strong style={{ display: 'block', fontSize: 28, marginTop: 7 }}>98.0%</strong><span style={{ color: '#176b4d' }}>42 sources indexed</span></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Evaluation pass rate</small><strong style={{ display: 'block', fontSize: 28, marginTop: 7 }}>94.6%</strong><span style={{ color: '#176b4d' }}>+2.4% this release</span></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Cost per answer</small><strong style={{ display: 'block', fontSize: 28, marginTop: 7 }}>$0.018</strong><span style={{ color: '#526071' }}>Within budget</span></GlassCard></div>
      <GlassCard depth="medium" tint="neutral"><div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 8 }}><div><h2 style={{ margin: 0, fontSize: 18 }}>Latest evaluation</h2><p style={{ margin: '4px 0 0', color: '#526071' }}>Workspace assistant · 120 test cases</p></div><strong style={{ color: '#176b4d' }}>Passed</strong></div><div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 16 }}>{[['Accuracy','96%'],['Safety','100%'],['Tone','92%']].map(([label,value]) => <div key={label} style={{ padding: 12, textAlign: 'center', borderRadius: 14, background: 'rgba(255,255,255,.24)', border: '1px solid rgba(80,102,130,.16)' }}><strong style={{ display: 'block', fontSize: 20 }}>{value}</strong><small style={{ color: '#526071' }}>{label}</small></div>)}</div></GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
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 (
    <section className="ag-light-recipe ag-media-review" aria-label="Media review workspace">
      <style>{lightRecipeCss}</style>
      <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 compact playing currentTime={42} duration={180} />
        <GlassTimelineRail label="Timeline"><span><PlayIcon /> Intro sequence</span><GlassMusicVisualizer className="ag-media-visualizer" compact contained realTimeAnalysis={false} /></GlassTimelineRail>
      </GlassWorkspace>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassButton, GlassCard, GlassProductRecommendations, GlassSmartShoppingCart } from 'aura-glass';
import { SuccessIcon, WarningIcon } from 'aura-glass/icons/status';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const commerceOperationsCss = `
  .ag-recipe-commerce-ops { box-sizing: border-box; min-width: 0; width: 100%; overflow: hidden; }
  .ag-recipe-commerce-ops > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .ag-recipe-commerce-ops > p { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; }
  .ag-recipe-commerce-ops :where(.optimized-glass-surface, [class*="product"], [class*="recommend"], [class*="cart"]) { min-width: 0 !important; max-width: 100% !important; }
  .ag-recipe-commerce-ops :where(h1,h2,h3,p,span,strong,small) { overflow-wrap: anywhere; }
  @media (max-width: 350px) {
    .ag-recipe-commerce-ops { padding: 12px !important; }
    .ag-recipe-commerce-ops > header { display: grid; justify-items: start; }
    .ag-recipe-commerce-ops :where([class*="grid"], [class*="products"], [class*="recommend"]) { grid-template-columns: minmax(0,1fr) !important; }
    .ag-recipe-commerce-ops :where(.glass-flex, [class*="flex"]) { flex-wrap: wrap !important; }
    .ag-recipe-commerce-ops .glass-foundation-basic { padding: 12px !important; }
    .ag-recipe-commerce-ops .glass-foundation-basic img { display: none !important; }
    .ag-recipe-commerce-ops .glass-foundation-basic :where(.glass-flex-1, .glass-min-glass-w-0) { width: 100% !important; min-width: 0 !important; }
    .ag-recipe-commerce-ops .glass-foundation-basic :where(.glass-truncate, h3, p) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; }
    .ag-recipe-commerce-ops .glass-mt-6 > .glass-flex { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  }
`;

export function CommerceOperationsPanel() {
  return (
    <GlassCard depth="medium" tint="neutral" className="ag-light-recipe ag-recipe-surface ag-recipe-commerce ag-recipe-commerce-ops">
      <style>{lightRecipeCss + commerceOperationsCss}</style>
      <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 title="Inventory watch" variant="compact" showQuickActions={false} products={[
        { id: 'studio-headphones', name: 'Studio headphones', price: 249, rating: 4.8, reviewCount: 128, stock: 12, availability: 'in-stock', images: [] },
        { id: 'travel-case', name: 'Travel case', price: 49, rating: 4.7, reviewCount: 64, stock: 24, availability: 'in-stock', images: [] },
      ]} />
      <GlassSmartShoppingCart compact contained />
    </GlassCard>
  );
}

import 'aura-glass/styles';
import { CollaborativeGlassWorkspace, GlassBadge, GlassButton, GlassCard, GlassMetricChip, GlassUserPresence } from 'aura-glass';
import { GlassInspectorPanel, GlassWorkspace } from 'aura-glass/workspace';
import { UsersIcon } from 'aura-glass/icons/collaboration';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const teammates = [
  { id: 'elena', name: 'Elena Park', status: 'online' as const, role: 'admin' as const, activity: 'Facilitating weekly review' },
  { id: 'marcus', name: 'Marcus Reed', status: 'online' as const, role: 'member' as const, activity: 'Updating mobile handoff' },
  { id: 'noor', name: 'Noor Ali', status: 'busy' as const, role: 'member' as const, activity: 'Finalizing research summary' },
  { id: 'sam', name: 'Sam Rivera', status: 'away' as const, role: 'guest' as const, activity: 'Back at 3:00 PM' },
];

const priorities = [
  ['Mobile handoff', 'Owner · Marcus', 'Due today'],
  ['Research synthesis', 'Owner · Noor', 'Review tomorrow'],
  ['Launch readiness', 'Owner · Elena', '8 of 10 complete'],
];

export function TeamCollaborationHub() {
  return (
    <section className="ag-light-recipe ag-collab-recipe" aria-labelledby="team-hub-title">
      <style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end', justifyContent: 'space-between', gap: 12 }}>
        <div>
          <GlassBadge variant="secondary">Weekly team room</GlassBadge>
          <h1 id="team-hub-title" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 40px)', letterSpacing: '-0.04em', lineHeight: 1.08 }}>Collaboration hub</h1>
          <p style={{ margin: 0, color: '#526071' }}>Presence, priorities, and shared work for the launch team.</p>
        </div>
        <GlassButton size="sm">Invite teammate</GlassButton>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))', gap: 12 }}>
        <GlassMetricChip label="Online now" value="3" delta="1 away" intent="default" icon={<UsersIcon />} />
        <GlassMetricChip label="Open tasks" value="7" delta="3 due today" intent="default" />
        <GlassMetricChip label="Review queue" value="4" delta="2 assigned" intent="default" />
      </div>

      <GlassWorkspace
        className="ag-recipe-workspace"
        inspector={
          <GlassInspectorPanel title="Team presence">
            <p style={{ margin: '0 0 12px', color: '#526071', fontSize: 14 }}><UsersIcon /> Four teammates are in this room.</p>
            <GlassUserPresence users={teammates} compact showRoles showActivities maxUsers={4} />
          </GlassInspectorPanel>
        }
      >
        <div style={{ display: 'grid', gap: 16 }}>
          <GlassCard depth="medium" tint="neutral" className="ag-recipe-surface" style={{ padding: 16 }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 10, marginBottom: 14 }}>
              <div><h2 style={{ margin: 0, fontSize: 18 }}>Priority board</h2><p style={{ margin: '4px 0 0', color: '#526071', fontSize: 14 }}>The work that needs a decision next.</p></div>
              <GlassButton size="sm" variant="secondary">View all tasks</GlassButton>
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              {priorities.map(([title, owner, state]) => (
                <div key={title} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 10, padding: '11px 12px', border: '1px solid rgba(255,255,255,.32)', borderRadius: 14, background: 'rgba(255,255,255,.18)' }}>
                  <strong>{title}</strong><small style={{ color: '#526071', textAlign: 'right' }}>{owner}<br />{state}</small>
                </div>
              ))}
            </div>
          </GlassCard>
          <GlassCard depth="medium" tint="neutral" className="ag-recipe-surface ag-recipe-collaboration" style={{ padding: 12, overflow: 'hidden' }}>
            <CollaborativeGlassWorkspace
              workspaceId="team-collaboration-hub"
              userId="elena"
              userName="Elena Park"
              userEmail="elena@example.com"
              userRole="admin"
              aria-label="Team collaboration canvas"
              compact
              contained
              maxHeight={300}
              theme="light"
              enableRealTimeSync={false}
              enableVoiceChat={false}
              enableVersionControl={false}
              showMiniMap={false}
              showOnlineUsers={false}
              showCursors={false}
            />
          </GlassCard>
        </div>
      </GlassWorkspace>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

export function SettingsAndBillingSuite() {
  return (
    <section className="ag-light-recipe" aria-labelledby="settings-suite"><style>{lightRecipeCss}</style>
      <header><GlassBadge variant="primary">Workspace controls</GlassBadge><h1 id="settings-suite" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>Settings and billing</h1><p style={{ margin: 0, color: '#526071' }}>Account controls, plan state, and billing workflow in one calm workspace.</p></header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 12 }}>
        <GlassCard depth="medium" tint="neutral"><h2 style={{ margin: '0 0 4px', fontSize: 20 }}>Workspace identity</h2><p style={{ margin: '0 0 14px', color: '#526071' }}>Shown to everyone in Northstar.</p><label style={{ display: 'block', fontWeight: 650 }}>Workspace name<input defaultValue="Northstar Studio" style={{ display: 'block', width: '100%', boxSizing: 'border-box', marginTop: 7, padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /></label><label style={{ display: 'block', marginTop: 12, fontWeight: 650 }}>Billing email<input type="email" defaultValue="finance@northstar.co" style={{ display: 'block', width: '100%', boxSizing: 'border-box', marginTop: 7, padding: '12px 14px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /></label></GlassCard>
        <GlassCard depth="strong" tint="neutral"><div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}><div><small style={{ color: '#526071' }}>Studio annual</small><h2 style={{ margin: '6px 0 2px', fontSize: 24 }}>$10,368 / year</h2></div><GlassBadge variant="primary">Active</GlassBadge></div><p style={{ color: '#526071' }}>Renews September 12, 2027 · 18 seats</p><div style={{ display: 'grid', gap: 10, margin: '18px 0' }}>{[['Payment method','Visa ···· 4242'],['Next invoice','$864.00'],['Usage','18 of 25 seats']].map(([label,value]) => <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, paddingTop: 10, borderTop: '1px solid rgba(86,104,126,.16)' }}><span style={{ color: '#526071' }}>{label}</span><strong>{value}</strong></div>)}</div><GlassButton size="sm">Manage plan</GlassButton></GlassCard>
      </div>
      <GlassCard depth="medium" tint="neutral"><h2 style={{ margin: '0 0 12px', fontSize: 20 }}>Invoice delivery</h2><div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}><p style={{ margin: 0, color: '#526071' }}>Monthly invoices and renewal reminders go to finance@northstar.co.</p><GlassButton>Save settings</GlassButton></div></GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
import { GlassCard, GlassDataChart, GlassHeatmap } from 'aura-glass';
import { GlassCommandDock, GlassPage, GlassPageHeader } from 'aura-glass/app-shell';
import { DatabaseIcon, SearchIcon } from 'aura-glass/icons/data';

const revenueAndRetention = [
  { id: 'revenue', label: 'Revenue index', formatType: 'number', data: [{ x: 'Mar', y: 71 }, { x: 'Apr', y: 76 }, { x: 'May', y: 82 }, { x: 'Jun', y: 88 }, { x: 'Jul', y: 94 }, { x: 'Aug', y: 100 }] },
  { id: 'retention', label: 'Retention index', formatType: 'number', data: [{ x: 'Mar', y: 78 }, { x: 'Apr', y: 80 }, { x: 'May', y: 83 }, { x: 'Jun', y: 86 }, { x: 'Jul', y: 89 }, { x: 'Aug', y: 92 }] },
];

const usageByDay = [
  [42, 56, 63, 69, 73, 58, 46],
  [49, 61, 68, 74, 78, 64, 51],
  [53, 66, 72, 79, 84, 70, 57],
  [57, 70, 77, 83, 88, 74, 61],
];

export function AnalyticsCommandCenter() {
  return (
    <section className="ag-light-recipe ag-recipe-chart" aria-label="Analytics command center">
      <style>{lightRecipeCss}</style>
      <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>} />
        <div className="recipe-metrics" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 170px), 1fr))', gap: 12 }}>
          {[
            ['Revenue', '$263k', '+18.6%'],
            ['Net retention', '112.4%', '+3.8 pts'],
            ['Weekly active', '18,420', '+9.2%'],
            ['Risked revenue', '$38k', '14 accounts'],
          ].map(([label, value, note]) => <GlassCard key={label} depth="medium" tint="neutral"><small style={{ color: '#526071', fontWeight: 650 }}>{label}</small><strong style={{ display: 'block', margin: '7px 0 4px', fontSize: 'clamp(22px, 3vw, 30px)', letterSpacing: '-.035em' }}>{value}</strong><span style={{ color: '#526071', fontSize: 13 }}>{note}</span></GlassCard>)}
        </div>
        <GlassCard depth="medium" tint="neutral"><GlassDataChart title="Momentum index" subtitle="Normalized revenue and retention · Mar–Aug" datasets={revenueAndRetention} variant="line" width="100%" height={300} glassVariant="clear" palette={['#42546d', '#91a0b2']} showToolbar={false} allowDownload={false} legend={{ show: true, position: 'top', align: 'start', style: 'compact', glassEffect: false }} /></GlassCard>
        <GlassCard depth="medium" tint="neutral"><div style={{ marginBottom: 14 }}><h2 style={{ margin: 0, fontSize: 19, letterSpacing: '-.02em' }}>Workspace engagement</h2><p style={{ margin: '5px 0 0', color: '#526071', fontSize: 14 }}>Active-session intensity for the last four operating weeks.</p></div><GlassHeatmap data={usageByDay} xAxis={{ title: 'Day', labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'] }} yAxis={{ title: 'Week', labels: ['Jul 15', 'Jul 22', 'Jul 29', 'Aug 5'] }} colorScale={{ min: '#f1f5f9', mid: '#cbd5e1', max: '#94a3b8', steps: 7 }} cellSize={18} cellGap={8} contained maxHeight={290} showValues showLegend legendPosition="bottom" animated={false} /></GlassCard>
      </GlassPage>
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
import { GlassButton, GlassCalendar, GlassCard } from 'aura-glass';
import { GlassWorkspacePanel } from 'aura-glass/workspace';
import { CalendarIcon } from 'aura-glass/icons/navigation';

export function CalendarOperationsBoard() {
  return (
    <section className="ag-light-recipe ag-recipe-calendar" aria-label="Calendar operations board">
      <style>{lightRecipeCss}</style>
      <GlassWorkspacePanel title="Launch calendar" actions={<GlassButton size="sm">New event</GlassButton>}>
        <p><CalendarIcon /> May launch sequence</p>
        <GlassCard depth="medium" tint="neutral"><GlassCalendar compact contained maxRows={4} maxHeight={420} /></GlassCard>
      </GlassWorkspacePanel>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard } from 'aura-glass';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";

const tickets = [
  ['#8421', 'Onboarding import failed', 'Urgent', 'Maya Lin'],
  ['#8418', 'Invoice total looks incorrect', 'High', 'Noah Kim'],
  ['#8412', 'Add SSO domain', 'Normal', 'Avery Stone'],
];

export function CustomerSupportConsole() {
  return (
    <section className="ag-light-recipe" aria-labelledby="support-queue"><style>{lightRecipeCss}</style>
      <header style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'end', gap: 12 }}><div><GlassBadge variant="primary">Support operations</GlassBadge><h1 id="support-queue" style={{ margin: '10px 0 4px', fontSize: 'clamp(26px, 4vw, 38px)', letterSpacing: '-0.04em' }}>Customer support queue</h1><p style={{ margin: 0, color: '#526071' }}>Prioritize escalations and keep response times on target.</p></div><GlassButton size="sm">Create ticket</GlassButton></header>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 175px), 1fr))', gap: 12 }}><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Open tickets</small><strong style={{ display: 'block', marginTop: 6, fontSize: 28 }}>64</strong><span style={{ color: '#8a5611' }}>12 escalated</span></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>Resolved today</small><strong style={{ display: 'block', marginTop: 6, fontSize: 28 }}>48</strong><span style={{ color: '#176b4d' }}>+14% vs average</span></GlassCard><GlassCard depth="medium" tint="neutral"><small style={{ color: '#526071' }}>First response</small><strong style={{ display: 'block', marginTop: 6, fontSize: 28 }}>7m 42s</strong><span style={{ color: '#176b4d' }}>Within SLA</span></GlassCard></div>
      <GlassCard depth="medium" tint="neutral"><div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 10, marginBottom: 12 }}><div><h2 style={{ margin: 0, fontSize: 20 }}>Priority tickets</h2><p style={{ margin: '4px 0 0', color: '#526071' }}>Sorted by urgency and customer impact.</p></div><input type="search" aria-label="Search tickets" placeholder="Search tickets" style={{ flex: '0 1 230px', minWidth: 0, boxSizing: 'border-box', padding: '10px 12px', color: '#172033', background: 'rgba(255,255,255,.3)', border: '1px solid rgba(80,102,130,.28)', borderRadius: 12, font: 'inherit' }} /></div>{tickets.map(([id, subject, priority, owner]) => <div key={id} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 10, padding: '12px 0', borderTop: '1px solid rgba(86,104,126,.16)' }}><span style={{ minWidth: 0 }}><strong style={{ display: 'block', overflowWrap: 'anywhere' }}>{id} · {subject}</strong><small style={{ color: '#526071' }}>Assigned to {owner}</small></span><strong style={{ color: priority === 'Urgent' ? '#9b3137' : priority === 'High' ? '#8a5611' : '#526071' }}>{priority}</strong></div>)}</GlassCard>
    </section>
  );
}

import 'aura-glass/styles';
const lightRecipeCss = "\n.ag-light-recipe {\n  --glass-theme-text: #172033;\n  --glass-text-primary: #172033;\n  --typography-text-primary: #172033;\n  --aura-color-global-text-primary: #172033;\n  --aura-color-global-text-secondary: #4b5a70;\n  color: #172033;\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.ag-light-recipe :where(h1, h2, h3, h4, p, span, label) { color: inherit; }\n.ag-light-recipe :where(.optimized-glass-surface, .glass-workspace-panel, .glass-action-bar, .glass-canvas-area, .glass-timeline-rail, .glass-command-dock, .glass-music-visualizer) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border-color: rgba(255,255,255,.92) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 14px 36px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where(.optimized-glass-surface, .glass-music-visualizer) { max-width: 100%; min-width: 0; }\n.ag-light-recipe :where(.glass-music-visualizer) { overflow: hidden !important; }\n.ag-light-recipe :where(.glass-music-visualizer canvas) {\n  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.16)) !important;\n  border-color: rgba(109,132,160,.22) !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.18)) !important;\n  border: 1px solid rgba(255,255,255,.94) !important;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 12px 30px rgba(86,107,135,.14) !important;\n  color: #172033 !important;\n  max-width: 100%;\n}\n.ag-light-recipe :where(.liquid-glass-media-controls span) { color: #334155 !important; text-shadow: none !important; }\n.ag-light-recipe :where(input[type=\"range\"]) { height: 12px !important; min-height: 12px; }\n.ag-light-recipe :where(canvas, svg) { max-width: 100%; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) {\n  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.2)) !important;\n  color: #172033 !important;\n}\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) * { color: #4b5a70 !important; }\n.ag-light-recipe :where([class*=\"emptyState\"], [class*=\"empty-state\"]) :where(h1,h2,h3,strong) { color: #172033 !important; }\n.ag-recipe-chart, .ag-recipe-chart * { box-sizing: border-box; min-width: 0; }\n.ag-recipe-chart :where(.optimized-glass-surface) { width: 100%; max-width: 100%; overflow: hidden !important; }\n.ag-recipe-chart :where(.optimized-glass-surface > *) { max-width: 100%; }\n.ag-recipe-chart :where(canvas) { width: 100% !important; }\n.ag-recipe-calendar :where(header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]) {\n  box-sizing: border-box;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  border: 1px solid rgba(93,112,136,.2) !important;\n  border-radius: 12px !important;\n  color: #243149 !important;\n  transform: none !important;\n}\n.ag-recipe-calendar :where([aria-label^=\"Select date\"]:hover, [aria-label^=\"Select date\"]:focus-visible) {\n  transform: none !important;\n  background: rgba(255,255,255,.35) !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell [aria-hidden=\"true\"]) {\n  color: #243149 !important;\n  text-shadow: none !important;\n}\n.ag-recipe-calendar :where(.glass-calendar-shell .glass-grid) { row-gap: 8px !important; }\n.ag-recipe-calendar :where(.glass-touch-target) { min-width: 0; }\n.ag-recipe-calendar :where(.overflow-hidden) { overflow: hidden !important; }\n.ag-media-review .glass-canvas-area { min-height: clamp(210px, 36vw, 360px); }\n.ag-media-player .ag-media-visualizer,\n.ag-media-review .ag-media-visualizer {\n  max-height: none !important;\n  overflow: visible !important;\n}\n.ag-collab-recipe .truncate,\n.ag-collab-recipe .glass-truncate {\n  white-space: normal !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n  overflow-wrap: anywhere;\n}\n.ag-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }\n.ag-creator-grid > * { min-width: 0; }\n.ag-creator-studio .ag-media-visualizer { max-height: none !important; }\n.ag-creator-studio .glass-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }\n@media (max-width: 640px) {\n  .ag-light-recipe { gap: 12px; }\n  .ag-creator-grid { grid-template-columns: minmax(0, 1fr); }\n  .ag-recipe-calendar :where(.glass-p-4) { padding: 10px; }\n  .ag-recipe-calendar :where(.glass-gap-2) { gap: 8px; }\n  .ag-recipe-calendar :where(.glass-aspect-square) { min-width: 0; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"]) { min-width: 0 !important; min-height: 0 !important; }\n  .ag-recipe-calendar :where([aria-label^=\"Select date\"] .glass-touch-target) { min-width: 0 !important; min-height: 0 !important; }\n}\n";
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 (
    <section className="ag-light-recipe ag-creator-studio" aria-label="Creator studio dashboard">
      <style>{lightRecipeCss}</style>
      <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} />
          <div className="ag-creator-grid">
            <GlassImageViewer className="ag-media-preview" contained compact height={260} />
            <GlassMusicVisualizer className="ag-media-visualizer" compact contained maxHeight={280} realTimeAnalysis={false} />
          </div>
        </GlassCard>
      </GlassWorkflowShell>
    </section>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassButton, GlassCard, GlassErrorState, 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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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="recipe-metrics 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} />
        <ul className="recipe-list" aria-label="Provider telemetry readiness">
          <li className="recipe-row"><span>Credentials</span><small>Not connected</small></li>
          <li className="recipe-row"><span>Usage polling</span><small>Paused safely</small></li>
        </ul>
      </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, 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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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>
        <ul className="recipe-list" aria-label="Relevance defaults">
          <li className="recipe-row"><span>Score threshold</span><small>0.78 recommended</small></li>
          <li className="recipe-row"><span>Chunk window</span><small>800 tokens</small></li>
          <li className="recipe-row"><span>Source weighting</span><small>Balanced</small></li>
        </ul>
      </GlassCard>
    </GlassPage>
  );
}

import 'aura-glass/styles';
import { GlassBadge, GlassCard, GlassEmptyState, GlassErrorState, GlassFileUpload } 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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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}
          />
          <div className="recipe-row" role="status"><span>No image selected</span><small>PNG, JPG, or WebP</small></div>
        </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>}
          />
          <ul className="recipe-list" aria-label="Analysis queue">
            <li className="recipe-row"><span>OCR extraction</span><small>Waiting</small></li>
            <li className="recipe-row"><span>Object labels</span><small>Waiting</small></li>
            <li className="recipe-row"><span>Safety review</span><small>Waiting</small></li>
          </ul>
          <GlassEmptyState variant="compact" title="No OCR results" description="Run analysis after provider setup." icon={<ImageIcon />} />
          <p className="recipe-note"><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 className="ag-recipe-workspace ag-recipe-room" inspector={<GlassInspectorPanel title="Room presence"><UsersIcon /> {participants.length} observers</GlassInspectorPanel>}>
      <style>{`
        .ag-recipe-room { min-width: 0; }
        .ag-recipe-room .ag-room-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
        .ag-recipe-room .ag-room-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
        .ag-recipe-room .ag-room-metrics > * { min-width: 0; width: 100%; }
        .ag-recipe-room .ag-room-status { padding: 10px 12px; }
        .ag-recipe-room .ag-room-status-content { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; min-width: 0; }
        .ag-recipe-room .ag-room-status-content > span { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
        .ag-recipe-room .ag-room-status-content > strong { grid-column: 1; }
        .ag-recipe-room .ag-room-status-content > small { grid-column: 2; text-align: right; }
        .ag-recipe-room .ag-room-status small { overflow-wrap: anywhere; }
        .ag-recipe-room :where(.truncate, .glass-truncate) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
        @media (max-width: 350px) {
          .ag-recipe-room .ag-room-header { display: grid; justify-items: start; }
          .ag-recipe-room .ag-room-metrics { grid-template-columns: minmax(0,1fr); }
          .ag-recipe-room .ag-room-metrics > * { grid-column: 1 / -1; }
        }
      `}</style>
      <section className="glass-grid glass-gap-4">
        <GlassCard depth="medium" tint="neutral" className="ag-recipe-surface glass-space-y-4 glass-p-4">
          <header className="ag-room-header">
            <h2>Collaboration room</h2>
            <GlassBadge variant="warning"><BellIcon /> Editing unsupported</GlassBadge>
          </header>
          <div className="ag-room-metrics">
            <GlassCard depth="low" tint="neutral" className="ag-room-status"><div className="ag-room-status-content"><span><UsersIcon /> Presence</span><strong>Static</strong><small>No WebSocket</small></div></GlassCard>
            <GlassCard depth="low" tint="neutral" className="ag-room-status"><div className="ag-room-status-content"><span>Selections</span><strong>Read-only</strong><small>3 watchers</small></div></GlassCard>
          </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, 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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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="recipe-metrics 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>
        <ul className="recipe-list" aria-label="Priority support queue">
          <li className="recipe-row"><span>AG-1842 · Login recovery</span><small>12 min to SLA</small></li>
          <li className="recipe-row"><span>AG-1839 · Billing mismatch</span><small>Enterprise · High</small></li>
          <li className="recipe-row"><span>AG-1835 · Export delayed</span><small>Assigned · Maya</small></li>
        </ul>
      </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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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="recipe-metrics 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} />
        <ul className="recipe-list" aria-label="Release checklist">
          {checklist.map((item, index) => <li className="recipe-row" key={item}><span><CheckIcon /> {item}</span><small>{index === 2 ? 'In review' : 'Complete'}</small></li>)}
        </ul>
        <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 } 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 className="recipe-polish">
      <style>{`
  .recipe-polish {
    --glass-text-primary: rgba(17, 24, 39, .96);
    --glass-text-secondary: rgba(51, 65, 85, .92);
    --glass-theme-text: rgba(17, 24, 39, .96);
    --glass-theme-text-secondary: rgba(51, 65, 85, .92);
    color: rgba(17, 24, 39, .96);
  }
  .recipe-polish .optimized-glass-surface,
  .recipe-polish .glass-top-bar,
  .recipe-polish .glass-sidebar-rail,
  .recipe-polish .glass-main,
  .recipe-polish .glass-status-bar,
  .recipe-polish .glass-command-dock {
    background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.22)) !important;
    border-color: rgba(255,255,255,.86) !important;
    color: rgba(17,24,39,.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 12px rgba(255,255,255,.12), 0 10px 28px rgba(71,85,105,.13) !important;
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) contrast(1.05) !important;
  }
  .recipe-polish [class*="glass-text-secondary"],
  .recipe-polish [class*="glass-text-primary-opacity"],
  .recipe-polish [class*="glass-text-primary-glass-opacity"] { color: rgba(51,65,85,.92) !important; }
  .recipe-polish [class*="text-amber"],
  .recipe-polish [class*="text-emerald"],
  .recipe-polish [class*="glass-text-success"] { color: rgba(30,41,59,.96) !important; }
  .recipe-polish :where(h1, h2, h3, h4, strong) { color: rgba(17,24,39,.96) !important; }
  .recipe-polish :where(p, li, label, small) { color: rgba(51,65,85,.94) !important; }
  .recipe-polish .recipe-section-title { margin: 0; color: rgba(17,24,39,.96) !important; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .recipe-polish .recipe-copy { margin: 0; color: rgba(51,65,85,.9); font-size: .875rem; line-height: 1.5; }
  .recipe-polish .recipe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .recipe-polish .recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(255,255,255,.30); }
  .recipe-polish .recipe-row > span:first-child { min-width: 0; font-weight: 600; }
  .recipe-polish .recipe-row small { color: rgba(51,65,85,.82); text-align: right; }
  .recipe-polish .recipe-code { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.30); color: rgba(30,41,59,.94); font-size: .78rem; line-height: 1.45; }
  .recipe-polish .recipe-docs-nav { margin-top: 12px !important; }
  .recipe-polish .recipe-note { color: rgba(30,41,59,.94) !important; }
  .recipe-polish .recipe-metrics > * { min-width: 0; }
  @media (max-width: 600px) {
    .recipe-polish { width: calc(100% + 32px) !important; margin-left: -16px !important; gap: 14px !important; }
    .recipe-polish .glass-page-header { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
    .recipe-polish .glass-page-header > div:last-child { justify-self: start; max-width: 100%; }
    .recipe-polish .glass-page-header h1 { font-size: 1.65rem !important; line-height: 1.08 !important; }
    .recipe-polish .glass-page-header p { font-size: .875rem !important; line-height: 1.45 !important; }
    .recipe-polish .recipe-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .recipe-polish .recipe-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recipe-polish .recipe-row { align-items: flex-start; padding: 11px 12px; }
    .recipe-polish .recipe-row small { max-width: 48%; }
  }
  @media (max-width: 350px) {
    .recipe-polish .recipe-metrics { grid-template-columns: minmax(0,1fr) !important; }
    .recipe-polish .recipe-metrics > * { grid-column: 1 / -1 !important; width: 100%; }
  }
`}</style>
      <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} />
        <nav className="recipe-docs-nav glass-flex glass-flex-wrap glass-gap-2" aria-label="Documentation sections">
          <GlassButton size="sm">Install</GlassButton>
          <GlassButton size="sm" variant="secondary">Components</GlassButton>
          <GlassButton size="sm" variant="secondary">Recipes</GlassButton>
        </nav>
        <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 className="recipe-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="ag-marketing-launch-kit glass-min-h-screen glass-text-primary">
      <section className="glass-relative glass-overflow-hidden glass-p-8 md:glass-p-12">
        <AuroraBackground className="ag-aurora-background--light" 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>
  );
}