@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

package/src/modules/design_system/gallery/components/colorPreview.ts

@@ -0,0 +1,63 @@
+type Rgb = [number, number, number]
+
+export function normalizeHex(input: string): string | null {
+  const value = input.trim().replace(/^#/, '')
+  if (/^[\da-f]{3}$/i.test(value)) {
+    return `#${[...value].map((digit) => digit.repeat(2)).join('').toUpperCase()}`
+  }
+  return /^[\da-f]{6}$/i.test(value) ? `#${value.toUpperCase()}` : null
+}
+
+function channels(hex: string): Rgb {
+  return [
+    Number.parseInt(hex.slice(1, 3), 16),
+    Number.parseInt(hex.slice(3, 5), 16),
+    Number.parseInt(hex.slice(5, 7), 16),
+  ]
+}
+
+function luminance(hex: string): number {
+  const linear = channels(hex).map((channel) => {
+    const normalized = channel / 255
+    return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4
+  })
+  return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722
+}
+
+export function contrastRatio(first: string, second: string): number {
+  const normalizedFirst = normalizeHex(first)
+  const normalizedSecond = normalizeHex(second)
+  if (!normalizedFirst || !normalizedSecond) return 1
+  const firstLuminance = luminance(normalizedFirst)
+  const secondLuminance = luminance(normalizedSecond)
+  return (Math.max(firstLuminance, secondLuminance) + 0.05) / (Math.min(firstLuminance, secondLuminance) + 0.05)
+}
+
+function mix(color: string, target: string, amount: number): string {
+  const targetChannels = channels(target)
+  return `#${channels(color).map((channel, index) => (
+    Math.round(channel + (targetChannels[index] - channel) * amount).toString(16).padStart(2, '0')
+  )).join('').toUpperCase()}`
+}
+
+function readableForeground(background: string): string {
+  return contrastRatio(background, '#000000') >= contrastRatio(background, '#FFFFFF') ? '#000000' : '#FFFFFF'
+}
+
+function readableAccent(color: string, surface: string): string {
+  const target = readableForeground(surface)
+  for (let step = 0; step <= 20; step += 1) {
+    const candidate = mix(color, target, step / 20)
+    if (contrastRatio(candidate, surface) >= 4.5) return candidate
+  }
+  return target
+}
+
+export function createAccentPalette(hex: string, surface: string) {
+  const color = normalizeHex(hex) ?? '#000000'
+  const normalizedSurface = normalizeHex(surface) ?? '#FFFFFF'
+  const foreground = readableForeground(color)
+  const hover = mix(color, foreground === '#FFFFFF' ? '#000000' : '#FFFFFF', 0.08)
+  const soft = mix(normalizedSurface, color, 0.1)
+  return { color, foreground, hover, soft, softForeground: readableAccent(color, soft) }
+}

package/src/modules/design_system/gallery/components/colorStudio.ts

@@ -0,0 +1,260 @@
+import { contrastRatio, normalizeHex } from './colorPreview'
+
+export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+export type NeutralTone = 'neutral' | 'warm' | 'cool'
+export type Harmony = 'analogous' | 'triadic' | 'split'
+export type ColorStop = { step: Shade; hex: string }
+export type StudioTheme = {
+  tokens: Record<string, string>
+  actionStep: Shade
+  pairs: Array<{
+    id: 'action' | 'hover' | 'body' | 'muted' | 'selection' | 'focus'
+    foreground: string
+    background: string
+    ratio: number
+    minimum: number
+  }>
+}
+export type ColorStudio = {
+  seeds: { primary: string; secondary: string; tertiary: string }
+  scale: ColorStop[]
+  secondaryScale: ColorStop[]
+  tertiaryScale: ColorStop[]
+  neutralScale: ColorStop[]
+  light: StudioTheme
+  dark: StudioTheme
+}
+
+type Rgb = [number, number, number]
+type Oklch = { lightness: number; chroma: number; hue: number }
+const STEPS: Shade[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+const LIGHTNESS = [0.98, 0.95, 0.9, 0.83, 0.74, 0.64, 0.54, 0.44, 0.35, 0.26, 0.18]
+
+function linearChannel(channel: number): number {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
+}
+
+function toOklch(hex: string): Oklch {
+  const [red, green, blue] = [1, 3, 5].map((offset) => linearChannel(Number.parseInt(hex.slice(offset, offset + 2), 16) / 255))
+  const long = Math.cbrt(0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue)
+  const medium = Math.cbrt(0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue)
+  const short = Math.cbrt(0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue)
+  const lightness = 0.2104542553 * long + 0.793617785 * medium - 0.0040720468 * short
+  const axisA = 1.9779984951 * long - 2.428592205 * medium + 0.4505937099 * short
+  const axisB = 0.0259040371 * long + 0.7827717662 * medium - 0.808675766 * short
+  return { lightness, chroma: Math.hypot(axisA, axisB), hue: Math.atan2(axisB, axisA) }
+}
+
+function toLinearRgb({ lightness, chroma, hue }: Oklch): Rgb {
+  const axisA = chroma * Math.cos(hue)
+  const axisB = chroma * Math.sin(hue)
+  const long = (lightness + 0.3963377774 * axisA + 0.2158037573 * axisB) ** 3
+  const medium = (lightness - 0.1055613458 * axisA - 0.0638541728 * axisB) ** 3
+  const short = (lightness - 0.0894841775 * axisA - 1.291485548 * axisB) ** 3
+  return [
+    4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short,
+    -1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short,
+    -0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short,
+  ]
+}
+
+function inGamut(channels: Rgb): boolean {
+  return channels.every((channel) => channel >= -0.0000001 && channel <= 1.0000001)
+}
+
+function toHex(color: Oklch): string {
+  let channels = toLinearRgb(color)
+  if (!inGamut(channels)) {
+    let low = 0
+    let high = color.chroma
+    for (let iteration = 0; iteration < 24; iteration += 1) {
+      const chroma = (low + high) / 2
+      if (inGamut(toLinearRgb({ ...color, chroma }))) low = chroma
+      else high = chroma
+    }
+    channels = toLinearRgb({ ...color, chroma: low })
+  }
+  return `#${channels.map((channel) => {
+    const clamped = Math.max(0, Math.min(1, channel))
+    const encoded = clamped <= 0.0031308 ? clamped * 12.92 : 1.055 * clamped ** (1 / 2.4) - 0.055
+    return Math.round(encoded * 255).toString(16).padStart(2, '0')
+  }).join('').toUpperCase()}`
+}
+
+function subtleSurface(surface: string, accent: string): string {
+  const base = toOklch(surface)
+  const tint = toOklch(accent)
+  const amount = 0.15
+  const axisA = base.chroma * Math.cos(base.hue) * (1 - amount) + tint.chroma * Math.cos(tint.hue) * amount
+  const axisB = base.chroma * Math.sin(base.hue) * (1 - amount) + tint.chroma * Math.sin(tint.hue) * amount
+  return toHex({
+    lightness: base.lightness * (1 - amount) + tint.lightness * amount,
+    chroma: Math.hypot(axisA, axisB),
+    hue: Math.atan2(axisB, axisA),
+  })
+}
+
+function accentScale(hex: string): ColorStop[] {
+  const seed = toOklch(hex)
+  const anchor = LIGHTNESS.reduce((closest, value, index) => (
+    Math.abs(value - seed.lightness) < Math.abs(LIGHTNESS[closest] - seed.lightness) ? index : closest
+  ), 0)
+  const seedEnvelope = Math.max(0.25, Math.sin(Math.PI * seed.lightness) ** 0.8)
+  return STEPS.map((step, index) => {
+    if (index === anchor) return { step, hex }
+    const lightness = LIGHTNESS[index]
+    const chroma = seed.chroma < 0.00001 ? 0 : Math.min(0.32, seed.chroma * Math.sin(Math.PI * lightness) ** 0.8 / seedEnvelope)
+    return { step, hex: toHex({ lightness, chroma, hue: seed.hue }) }
+  })
+}
+
+function neutralScale(tone: NeutralTone): ColorStop[] {
+  const hue = (tone === 'warm' ? 75 : 255) * Math.PI / 180
+  return STEPS.map((step, index) => ({
+    step,
+    hex: toHex({ lightness: LIGHTNESS[index], chroma: tone === 'neutral' ? 0 : 0.014 * Math.sin(Math.PI * LIGHTNESS[index]), hue }),
+  }))
+}
+
+function atShade(scale: ColorStop[], shade: Shade): string {
+  return scale.find((stop) => stop.step === shade)!.hex
+}
+
+function foregroundFor(background: string): string {
+  return contrastRatio('#000000', background) >= contrastRatio('#FFFFFF', background) ? '#000000' : '#FFFFFF'
+}
+
+function nearestReadable(scale: ColorStop[], target: Shade, background: string, minimum: number): string {
+  const targetIndex = STEPS.indexOf(target)
+  return scale.filter((stop) => contrastRatio(stop.hex, background) >= minimum)
+    .sort((first, second) => Math.abs(STEPS.indexOf(first.step) - targetIndex) - Math.abs(STEPS.indexOf(second.step) - targetIndex))[0]?.hex ?? foregroundFor(background)
+}
+
+function themeFor(scale: ColorStop[], neutrals: ColorStop[], dark: boolean, actionStep: Shade, secondary: ColorStop[], tertiary: ColorStop[]): StudioTheme {
+  const background = atShade(neutrals, dark ? 950 : 50)
+  const card = dark ? atShade(neutrals, 900) : '#FFFFFF'
+  const foreground = atShade(neutrals, dark ? 50 : 950)
+  const muted = atShade(neutrals, dark ? 800 : 100)
+  const mutedForeground = nearestReadable(neutrals, dark ? 300 : 600, muted, 4.5)
+  const primary = atShade(scale, actionStep)
+  const primaryForeground = foregroundFor(primary)
+  const actionIndex = STEPS.indexOf(actionStep)
+  const hoverIndex = Math.max(0, Math.min(STEPS.length - 1, actionIndex + (primaryForeground === '#FFFFFF' ? 1 : -1)))
+  const hoverCandidate = scale[hoverIndex].hex
+  const hover = contrastRatio(primaryForeground, hoverCandidate) >= 4.5 ? hoverCandidate : primary
+  const accent = dark ? subtleSurface(card, primary) : atShade(scale, 100)
+  const accentForeground = nearestReadable(scale, dark ? 200 : 800, accent, 4.5)
+  const focus = nearestReadable(scale, actionStep, background, 3)
+  const input = atShade(neutrals, dark ? 600 : 300)
+  const selection = scale.filter((stop) => contrastRatio(stop.hex, input) >= 3 && contrastRatio(stop.hex, background) >= 3)
+    .sort((first, second) => Math.abs(STEPS.indexOf(first.step) - actionIndex) - Math.abs(STEPS.indexOf(second.step) - actionIndex))[0]?.hex ?? foregroundFor(background)
+  const selectionForeground = foregroundFor(selection)
+  const categoryTokens = (name: string, colors: ColorStop[]) => {
+    const strong = atShade(colors, dark ? 400 : 600)
+    const soft = dark ? subtleSurface(card, strong) : atShade(colors, 100)
+    return {
+      [`--studio-${name}`]: strong,
+      [`--studio-${name}-foreground`]: foregroundFor(strong),
+      [`--studio-${name}-soft`]: soft,
+      [`--studio-${name}-soft-foreground`]: nearestReadable(colors, dark ? 200 : 800, soft, 4.5),
+    }
+  }
+  const tokens: Record<string, string> = {
+    ...categoryTokens('secondary', secondary),
+    ...categoryTokens('tertiary', tertiary),
+    '--background': background,
+    '--foreground': foreground,
+    '--card': card,
+    '--card-foreground': foreground,
+    '--popover': card,
+    '--popover-foreground': foreground,
+    '--muted': muted,
+    '--muted-foreground': mutedForeground,
+    '--secondary': muted,
+    '--secondary-foreground': foreground,
+    '--border': atShade(neutrals, dark ? 700 : 200),
+    '--input': input,
+    '--bg-disabled': muted,
+    '--text-disabled': atShade(neutrals, dark ? 500 : 400),
+    '--border-disabled': atShade(neutrals, dark ? 700 : 200),
+    '--primary': primary,
+    '--primary-foreground': primaryForeground,
+    '--primary-hover': hover,
+    '--accent': accent,
+    '--accent-foreground': accentForeground,
+    '--accent-indigo': selection,
+    '--accent-indigo-foreground': selectionForeground,
+    '--ring': focus,
+    '--focus-ring-inner': background,
+    '--focus-ring-outer': focus,
+  }
+  const pair = (id: StudioTheme['pairs'][number]['id'], text: string, surface: string, minimum = 4.5) => ({
+    id, foreground: text, background: surface, ratio: contrastRatio(text, surface), minimum,
+  })
+  return {
+    tokens,
+    actionStep,
+    pairs: [
+      pair('action', primaryForeground, primary),
+      pair('hover', primaryForeground, hover),
+      pair('body', foreground, background),
+      pair('muted', mutedForeground, muted),
+      pair('selection', accentForeground, accent),
+      pair('focus', focus, background, 3),
+    ],
+  }
+}
+
+export function createHarmonySeeds(seed: string, harmony: Harmony): { secondary: string; tertiary: string } {
+  const color = toOklch(normalizeHex(seed) ?? '#F4700D')
+  const offset = ({ analogous: 30, triadic: 120, split: 150 }[harmony]) * Math.PI / 180
+  const lightness = Math.max(0.55, Math.min(0.72, color.lightness))
+  const chroma = Math.max(0.1, Math.min(0.18, color.chroma))
+  const hue = color.chroma < 0.00001 ? 0 : color.hue
+  return {
+    secondary: toHex({ lightness, chroma, hue: hue + offset }),
+    tertiary: toHex({ lightness, chroma, hue: hue - offset }),
+  }
+}
+
+export function createColorStudio(
+  seed: string,
+  neutral: NeutralTone,
+  actionShades: { light?: Shade; dark?: Shade } = {},
+  colors: { secondary?: string; tertiary?: string; harmony?: Harmony } = {},
+): ColorStudio {
+  const primary = normalizeHex(seed) ?? '#F4700D'
+  const derived = createHarmonySeeds(primary, colors.harmony ?? 'triadic')
+  const seeds = {
+    primary,
+    secondary: normalizeHex(colors.secondary ?? '') ?? derived.secondary,
+    tertiary: normalizeHex(colors.tertiary ?? '') ?? derived.tertiary,
+  }
+  const scale = accentScale(primary)
+  const secondary = accentScale(seeds.secondary)
+  const tertiary = accentScale(seeds.tertiary)
+  const neutrals = neutralScale(neutral)
+  return {
+    seeds,
+    scale,
+    secondaryScale: secondary,
+    tertiaryScale: tertiary,
+    neutralScale: neutrals,
+    light: themeFor(scale, neutrals, false, actionShades.light ?? 600, secondary, tertiary),
+    dark: themeFor(scale, neutrals, true, actionShades.dark ?? 400, secondary, tertiary),
+  }
+}
+
+export function exportColorStudio(studio: ColorStudio, format: 'css' | 'json'): string {
+  const scales = {
+    accent: Object.fromEntries(studio.scale.map((stop) => [stop.step, stop.hex])),
+    secondary: Object.fromEntries(studio.secondaryScale.map((stop) => [stop.step, stop.hex])),
+    tertiary: Object.fromEntries(studio.tertiaryScale.map((stop) => [stop.step, stop.hex])),
+    neutral: Object.fromEntries(studio.neutralScale.map((stop) => [stop.step, stop.hex])),
+  }
+  if (format === 'json') return JSON.stringify({ seeds: studio.seeds, scales, themes: { light: studio.light.tokens, dark: studio.dark.tokens } }, null, 2)
+  const scaleTokens = Object.fromEntries(Object.entries(scales).flatMap(([name, stops]) => Object.entries(stops).map(([step, hex]) => [`--palette-${name}-${step}`, hex])))
+  return (['light', 'dark'] as const).map((theme) => (
+    `.ds-color-preview-${theme} {\n${Object.entries({ ...scaleTokens, ...studio[theme].tokens }).map(([token, value]) => `  ${token}: ${value};`).join('\n')}\n}`
+  )).join('\n\n')
+}

package/src/modules/design_system/gallery/components/styleAgentBranding.ts

@@ -0,0 +1,42 @@
+import type { BrandStyle } from '@open-mercato/ui/theme/brand-style'
+import type { ColorStudio } from './colorStudio'
+
+export function studioBrandStyle(studio: ColorStudio, logo: string | null): BrandStyle {
+  const theme = (mode: 'light' | 'dark') => {
+    const tokens = studio[mode].tokens
+    return {
+      '--primary': tokens['--primary'],
+      '--primary-hover': tokens['--primary-hover'],
+      '--primary-foreground': tokens['--primary-foreground'],
+      '--brand-lime': studio.secondaryScale.find(stop => stop.step === 200)!.hex,
+      '--brand-yellow': studio.scale.find(stop => stop.step === 200)!.hex,
+      '--brand-violet': studio.tertiaryScale.find(stop => stop.step === 200)!.hex,
+      '--brand-violet-foreground': '#000000',
+    }
+  }
+  return { version: 1, logo, seeds: studio.seeds, actionShades: { light: studio.light.actionStep, dark: studio.dark.actionStep }, light: theme('light'), dark: theme('dark') }
+}
+
+export function readBrandLogo(file: File): Promise<string> {
+  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) return Promise.reject(new Error('fileType'))
+  if (file.size > 1024 * 1024) return Promise.reject(new Error('fileSize'))
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(new Error('fileDecode'))
+    reader.onload = () => {
+      if (typeof reader.result !== 'string') { reject(new Error('fileDecode')); return }
+      const data = reader.result
+      const image = new Image()
+      image.onerror = () => reject(new Error('fileDecode'))
+      image.onload = () => {
+        if (!image.naturalWidth || !image.naturalHeight || image.naturalWidth > 4096 || image.naturalHeight > 4096) {
+          reject(new Error('fileDimensions'))
+          return
+        }
+        resolve(data)
+      }
+      image.src = data
+    }
+    reader.readAsDataURL(file)
+  })
+}

package/src/modules/design_system/gallery/components/themeTokens.ts

@@ -0,0 +1,26 @@
+export type ThemeTokens = { light: Record<string, string>; dark: Record<string, string> }
+
+export function readThemeTokens(sheets: Iterable<CSSStyleSheet>): ThemeTokens {
+  const light: Record<string, string> = {}
+  const dark: Record<string, string> = {}
+  function readRules(rules: CSSRuleList) {
+    for (const rule of Array.from(rules)) {
+      if ('selectorText' in rule && 'style' in rule) {
+        const styleRule = rule as CSSStyleRule
+        const selectors = styleRule.selectorText.split(',').map(selector => selector.trim())
+        const target = selectors.includes('.dark') ? dark : selectors.includes(':root') ? light : null
+        if (target) {
+          for (const property of Array.from(styleRule.style)) {
+            if (property.startsWith('--')) target[property] = styleRule.style.getPropertyValue(property).trim()
+          }
+        }
+      }
+      if ('cssRules' in rule) readRules((rule as CSSGroupingRule).cssRules)
+    }
+  }
+  for (const sheet of sheets) {
+    if (sheet.ownerNode instanceof Element && sheet.ownerNode.id === 'om-brand-style') continue
+    try { readRules(sheet.cssRules) } catch { continue }
+  }
+  return { light, dark: { ...light, ...dark } }
+}

package/src/modules/design_system/gallery/demos/ai-product-code.generated.ts

@@ -0,0 +1,3 @@
+// Generated by yarn storybook:generate from ai-product.tsx.
+const source = "import * as React from 'react'\nimport { ArrowLeft, BookOpen, ChevronDown, ChevronRight, Folder, Mail, Menu, MoreHorizontal, MoreVertical, PanelLeft, Plus, Search, User, X, Zap } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { FieldLabel } from '@open-mercato/ui/primitives/label'\nimport { HintText } from '@open-mercato/ui/primitives/hint-text'\nimport { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'\nimport { DigitInput } from '@open-mercato/ui/primitives/digit-input'\nimport { CounterInput } from '@open-mercato/ui/primitives/counter-input'\nimport { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Popover, PopoverTrigger, PopoverContent } from '@open-mercato/ui/primitives/popover'\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\nimport { SocialButton } from '@open-mercato/ui/primitives/social-button'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Sidebar } from '@open-mercato/ui/primitives/sidebar'\nimport { PromptArea } from '@open-mercato/ui/primitives/prompt-area'\nimport { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'\nimport { aiProductArtwork } from '@open-mercato/ui/assets/ai-product-artwork'\nimport promptImage from '../assets/ai-prompt-image.png'\nimport avatarPhoto from '../assets/avatar-photo.png'\nimport googleIcon from '../assets/select-google.png'\n\ntype ButtonProps = React.ComponentProps<typeof Button>\n\nconst prefix = 'design_system.gallery.examples.aiProduct.'\nconst source = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\n\nfunction AiIconButton({ size = 32, tone = 'default', appearance = 'plain', className, children, ...props }: Omit<ButtonProps, 'size'> & { size?: 20 | 24 | 28 | 32; tone?: 'default' | 'error'; appearance?: 'plain' | 'stroke' | 'lighter' }) {\n  const content = React.isValidElement<{ className?: string }>(children) && children.type !== 'img'\n    ? React.cloneElement(children, { className: cn(children.props.className, size === 24 ? 'size-4.5' : 'size-5') })\n    : children\n  return <Button type=\"button\" variant=\"ghost\" size=\"icon\" data-slot=\"ai-icon-button\" data-size={size} data-tone={tone} data-appearance={appearance} className={cn(\n    'shrink-0 p-0',\n    size === 32 ? 'size-8 rounded-md' : size === 28 ? 'size-7 rounded-md' : size === 24 ? 'size-6 rounded-sm' : 'size-5 rounded-sm',\n    appearance !== 'plain' && 'rounded-ai-control',\n    appearance === 'stroke' ? 'bg-background shadow-xs ring-1 ring-inset ring-border' : appearance === 'lighter' ? 'bg-muted' : 'bg-background',\n    tone === 'error' ? 'text-status-error-text hover:bg-status-error-bg hover:text-status-error-text aria-pressed:bg-status-error-bg aria-pressed:text-status-error-text' : 'text-muted-foreground hover:bg-muted hover:text-foreground aria-pressed:bg-muted aria-pressed:text-foreground',\n    appearance !== 'plain' && 'aria-pressed:bg-primary aria-pressed:text-primary-foreground',\n    className,\n  )} {...props}>{content}</Button>\n}\n\nfunction AiModelSelect({ value, onChange, compact = false, className }: { value: string; onChange: (value: string) => void; compact?: boolean; className?: string }) {\n  const t = useT()\n  return <Select value={value} onValueChange={onChange}><SelectTrigger aria-label={t(`${prefix}model`)} data-slot=\"ai-model-select\" className={cn('h-7 w-auto min-w-19.75 gap-1 rounded-ai-control border-0 bg-muted py-1 pl-2 pr-1 text-sm leading-5 shadow-none hover:bg-accent [&>svg]:size-5', compact && 'h-5 bg-transparent p-0', className)}><SelectValue /></SelectTrigger><SelectContent>{['GPT-4', 'GPT-3.5'].map(model => <SelectItem key={model} value={model}>{model}</SelectItem>)}</SelectContent></Select>\n}\n\ntype PromptAttachment = { id: string; name: string; image?: string; objectUrl?: boolean }\n\nexport function AiPromptExample({ compact = false, attachment = 'none' }: { compact?: boolean; attachment?: 'none' | 'file' | 'image' }) {\n  const t = useT()\n  const [value, setValue] = React.useState('')\n  const [model, setModel] = React.useState('GPT-4')\n  const [lastPrompt, setLastPrompt] = React.useState('')\n  const [files, setFiles] = React.useState<PromptAttachment[]>(attachment === 'none' ? [] : [{ id: 'source', name: t(`${prefix}${attachment === 'image' ? 'imageName' : 'fileName'}`), image: attachment === 'image' ? source(promptImage) : undefined }])\n  const upload = React.useRef<HTMLInputElement>(null)\n  const attachmentId = React.useRef(0)\n  const objectUrls = React.useRef(new Set<string>())\n  React.useEffect(() => () => { for (const url of objectUrls.current) URL.revokeObjectURL(url) }, [])\n  const remove = (id: string) => setFiles(current => current.filter(file => {\n    if (file.id !== id) return true\n    if (file.objectUrl && file.image) { URL.revokeObjectURL(file.image); objectUrls.current.delete(file.image) }\n    return false\n  }))\n  const submit = (message: string) => { setLastPrompt(`${model}: ${message}`); setValue('') }\n  return <div className={cn('grid max-w-full gap-4', compact ? 'w-93.5' : 'w-175')}>\n    <PromptArea compact={compact} value={value} onValueChange={setValue} onSubmit={submit} inputLabel={t(`${prefix}prompt`)} submitLabel={t(`${prefix}saveDraft`)} placeholder={t(`${prefix}placeholder`)} information={<><Zap aria-hidden=\"true\" className=\"size-4 shrink-0\" /><span>{t(`${prefix}premium`)}</span><span aria-hidden=\"true\">·</span><Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"ghost\" className=\"h-4 rounded-sm p-0 text-xs font-medium leading-4\">{t(`${prefix}upgrade`)}</Button></PopoverTrigger><PopoverContent className=\"text-sm\">{t(`${prefix}localOnly`)}</PopoverContent></Popover></>}\n      toolbar={<><AiIconButton size={28} appearance=\"lighter\" aria-label={t(`${prefix}addFile`)} onClick={() => upload.current?.click()}><Plus aria-hidden=\"true\" /></AiIconButton><AiModelSelect value={model} onChange={setModel} /></>}\n      attachments={files.length ? files.map(file => file.image ? <div key={file.id} className=\"relative size-24 shrink-0\"><img src={file.image} alt={file.name} className=\"size-24 rounded-xl object-cover\" /><AiIconButton size={20} aria-label={`${t(`${prefix}remove`)} ${file.name}`} className=\"absolute right-1.5 top-1.5 rounded-full bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground\" onClick={() => remove(file.id)}><X aria-hidden=\"true\" /></AiIconButton></div> : <div key={file.id} className=\"flex h-15 max-w-full items-center gap-3 rounded-xl bg-muted py-2.5 pl-3 pr-4\"><FileFormatIcon format={file.name.includes('.') ? file.name.split('.').pop()?.toUpperCase().slice(0, 5) ?? 'FILE' : 'FILE'} /><div className=\"grid min-w-0 gap-1\"><span className=\"truncate text-sm font-medium\">{file.name}</span><span className=\"text-xs text-muted-foreground\">{t(`${prefix}localFile`)}</span></div><AiIconButton size={20} aria-label={`${t(`${prefix}remove`)} ${file.name}`} onClick={() => remove(file.id)}><X aria-hidden=\"true\" /></AiIconButton></div>) : undefined} />\n    <input ref={upload} type=\"file\" className=\"sr-only\" tabIndex={-1} aria-label={t(`${prefix}attachmentInput`)} multiple onChange={event => { const selected = Array.from(event.target.files ?? []); setFiles(current => [...current, ...selected.map(file => { const image = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined; if (image) objectUrls.current.add(image); return { id: `attachment-${attachmentId.current++}`, name: file.name, image, objectUrl: Boolean(image) } })]); event.target.value = '' }} />\n    <p className=\"text-xs leading-4 text-muted-foreground\">{t(`${prefix}localOnly`)}</p>\n    {lastPrompt ? <output className=\"rounded-md border border-border p-3 text-sm\">{t(`${prefix}saved`)} {lastPrompt}</output> : null}\n  </div>\n}\n\nexport function AiIconButtonExamples({ chat = false }: { chat?: boolean }) {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>([])\n  const toggle = (key: string) => setActive(items => items.includes(key) ? items.filter(item => item !== key) : [...items, key])\n  return <div className=\"grid gap-5\">{chat ? <div className=\"flex gap-5\">{(['stroke', 'lighter'] as const).map(appearance => <AiIconButton key={appearance} size={28} appearance={appearance} aria-label={`${t(`${prefix}toggleControl`)} ${appearance}`} aria-pressed={active.includes(appearance)} onClick={() => toggle(appearance)}><Plus aria-hidden=\"true\" /></AiIconButton>)}</div> : (['default', 'error'] as const).map(tone => <div key={tone} className=\"flex items-center gap-5\">{([32, 28, 24, 20] as const).map(size => <AiIconButton key={size} size={size} tone={tone} aria-label={`${t(`${prefix}${tone}`)} ${size}`} aria-pressed={active.includes(`${tone}-${size}`)} onClick={() => toggle(`${tone}-${size}`)}><ChevronDown aria-hidden=\"true\" /></AiIconButton>)}</div>)}</div>\n}\n\nfunction AiNavItem({ children, icon = true, leading, mobile = false, active = false, className, ...props }: ButtonProps & { icon?: boolean; leading?: React.ReactNode; mobile?: boolean; active?: boolean }) {\n  return <Button type=\"button\" variant=\"ghost\" size=\"sm\" data-slot=\"ai-nav-item\" data-mobile={mobile} data-leading={icon} aria-current={active ? 'page' : undefined} className={cn('group h-8 w-61 max-w-full justify-start gap-2 rounded-md bg-background py-1.5 pl-1.5 pr-2 text-sm font-medium leading-5 text-muted-foreground hover:bg-muted hover:text-foreground', active && 'bg-muted text-foreground', !icon && 'hover:pl-2.5', !icon && active && 'pl-2.5', className)} {...props}>\n    {icon ? leading ?? <Folder aria-hidden=\"true\" className=\"size-5\" /> : null}<span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>{icon ? <ChevronRight aria-hidden=\"true\" className={cn('size-4.5 shrink-0', !mobile && !active && 'hidden group-hover:block group-focus-visible:block')} /> : <MoreVertical aria-hidden=\"true\" className={cn('size-4.5 shrink-0', !mobile && (active ? 'hidden' : 'hidden group-hover:block group-focus-visible:block'))} />}\n  </Button>\n}\n\nexport function AiNavigationExamples() {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>([])\n  return <div className=\"grid gap-4\">{[false, true].flatMap(mobile => [true, false].map(icon => { const key = `${mobile}-${icon}`; return <AiNavItem key={key} icon={icon} mobile={mobile} active={active.includes(key)} onClick={() => setActive(values => values.includes(key) ? values.filter(value => value !== key) : [...values, key])}>{t(`${prefix}projects`)}</AiNavItem> }))}</div>\n}\n\nexport function AiSearchExamples() {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  return <div className=\"grid w-64 max-w-full gap-4\">{(['default', 'sm'] as const).map(size => <SearchInput key={size} size={size} value={query} onChange={setQuery} clearable={false} aria-label={`${t(`${prefix}search`)} ${size}`} placeholder={t(`${prefix}searchPlaceholder`)} className={cn('rounded-lg border-0 px-2 shadow-none focus-within:bg-background [&>svg]:size-5', size === 'sm' ? 'bg-background hover:bg-muted' : 'bg-muted')} />)}<output className=\"text-xs text-muted-foreground\">{t(`${prefix}query`)} {query}</output></div>\n}\n\nexport function AiAuthExamples({ kind = 'icons' }: { kind?: 'icons' | 'social' | 'text' | 'digits' }) {\n  const t = useT()\n  const [value, setValue] = React.useState('')\n  const [clicked, setClicked] = React.useState(false)\n  const id = React.useId()\n  if (kind === 'icons') return <div className=\"grid w-full max-w-lg grid-cols-2 gap-6 sm:grid-cols-4\">{(['signIn', 'signUp', 'reset', 'verification', 'signInGray', 'signUpGray', 'resetGray', 'verificationGray'] as const).map(key => <div key={key} className=\"grid justify-items-center gap-2\"><span className=\"flex size-14 items-center justify-center rounded-full border border-status-neutral-bg bg-background\"><img src={aiProductArtwork[key]} alt=\"\" className=\"size-8\" /></span><span className=\"text-xs text-muted-foreground\">{t(`${prefix}${key.replace('Gray', '')}`)}{key.endsWith('Gray') ? ` · ${t(`${prefix}gray`)}` : ''}</span></div>)}</div>\n  if (kind === 'social') return <div className=\"grid gap-3\"><SocialButton type=\"button\" brand=\"google\" appearance=\"stroke\" className=\"h-auto min-h-10 w-fit max-w-full whitespace-normal py-2 text-left\" onClick={() => setClicked(true)}><img src={source(googleIcon)} alt=\"\" className=\"size-5 shrink-0\" /><span className=\"min-w-0\">{t(`${prefix}google`)}</span></SocialButton>{clicked ? <output className=\"max-w-sm text-xs text-muted-foreground\">{t(`${prefix}localOnly`)}</output> : null}</div>\n  if (kind === 'digits') return <div className=\"grid gap-4\">{[false, true].map(disabled => <DigitInput key={String(disabled)} length={4} value={disabled ? '1234' : value} onChange={setValue} disabled={disabled} aria-label={`${t(`${prefix}verification`)} ${disabled ? t(`${prefix}disabled`) : t(`${prefix}editable`)}`} cellClassName=\"size-12 sm:w-12 rounded-ai-input px-2 py-2.5 text-lg leading-6\" />)}<output className=\"text-xs text-muted-foreground\">{value}</output></div>\n  return <div className=\"grid w-83 max-w-full gap-5\">{[false, true].map(disabled => <div key={String(disabled)} data-slot=\"ai-text-input\" className=\"grid gap-1\"><FieldLabel htmlFor={`${id}-${disabled}`} disabled={disabled} required>{t(`${prefix}email`)}</FieldLabel><Input id={`${id}-${disabled}`} type=\"email\" value={disabled ? 'james@example.com' : value} onChange={event => setValue(event.target.value)} disabled={disabled} aria-required aria-describedby={`${id}-${disabled}-hint`} placeholder=\"hello@alignui.com\" leading={<Mail aria-hidden=\"true\" className=\"size-5 text-muted-foreground\" />} size=\"lg\" className=\"rounded-ai-input\" /><HintText id={`${id}-${disabled}-hint`} state={disabled ? 'disabled' : 'default'} leading={<KeyIconGlyph name=\"information\" />} className=\"pt-1\">{t(`${prefix}hint`)}</HintText></div>)}</div>\n}\n\nexport function AiSettingsExamples() {\n  const t = useT()\n  const [tab, setTab] = React.useState('people')\n  const [size, setSize] = React.useState('medium')\n  const [count, setCount] = React.useState<number | null>(30)\n  const [model, setModel] = React.useState('GPT-4')\n  return <div className=\"grid gap-6\"><div className=\"grid gap-2\">{(['people', 'profile'] as const).map(value => <Button key={value} type=\"button\" variant=\"ghost\" data-slot=\"ai-settings-item\" aria-pressed={tab === value} className=\"h-auto min-h-10 w-56 max-w-full justify-start gap-2 rounded-lg bg-background px-3 py-2 text-sm text-muted-foreground hover:bg-muted aria-pressed:bg-muted aria-pressed:text-foreground\" onClick={() => setTab(value)}>{value === 'profile' ? <span aria-hidden=\"true\"><Avatar size={20} label=\"James Brown\" src={source(avatarPhoto)} /></span> : <User aria-hidden=\"true\" className=\"size-5\" />}<span className=\"min-w-0 flex-1 whitespace-normal text-left\">{value === 'profile' ? 'James Brown' : t(`${prefix}people`)}</span>{tab === value ? <ChevronRight aria-hidden=\"true\" className=\"size-4.5\" /> : null}</Button>)}</div><output className=\"text-sm text-muted-foreground\">{t(`${prefix}${tab}`)}</output>\n    <div className=\"flex flex-wrap items-center gap-5\"><Select value={size} onValueChange={setSize}><SelectTrigger data-slot=\"ai-size-select\" aria-label={t(`${prefix}responseLength`)} className=\"w-auto min-w-28 gap-2 rounded-lg [&>svg]:size-5\"><SelectValue /></SelectTrigger><SelectContent>{['small', 'medium', 'large'].map(value => <SelectItem key={value} value={value}>{t(`${prefix}${value}`)}</SelectItem>)}</SelectContent></Select><CounterInput data-slot=\"ai-counter\" value={count} min={0} max={99} onChange={setCount} size=\"default\" aria-label={t(`${prefix}historyLimit`)} decrementAriaLabel={t(`${prefix}decrease`)} incrementAriaLabel={t(`${prefix}increase`)} className=\"w-28 rounded-lg\" inputClassName=\"text-sm\" /><AiModelSelect value={model} onChange={setModel} className=\"h-9 px-3 py-2\" /></div>\n  </div>\n}\n\nfunction AiNewChatButton({ onClick }: { onClick: () => void }) {\n  const t = useT()\n  return <Button type=\"button\" variant=\"ghost\" data-slot=\"ai-new-chat\" className=\"h-auto min-h-8 w-61 max-w-full justify-start gap-2 rounded-md p-1.5 text-sm text-status-success-text hover:bg-status-success-bg hover:text-status-success-text\" onClick={onClick}><span aria-hidden=\"true\" className=\"flex size-5 items-center justify-center rounded-full bg-status-success-solid text-status-success-solid-foreground\"><Plus className=\"size-3.5\" /></span><span className=\"min-w-0 whitespace-normal text-left\">{t(`${prefix}newChat`)}</span></Button>\n}\n\nexport function AiNewChatExample() {\n  const t = useT()\n  const [draft, setDraft] = React.useState(0)\n  return <div className=\"grid gap-3\"><AiNewChatButton onClick={() => setDraft(value => value + 1)} /><output className=\"text-xs text-muted-foreground\">{t(`${prefix}draftNumber`, { number: draft })}</output></div>\n}\n\nfunction AiDivider() {\n  return <div role=\"separator\" className=\"flex h-1 shrink-0 items-center px-1.5\"><span className=\"h-px w-full bg-border\" /></div>\n}\n\nexport function AiSidebarExample({ search = '01', initialCollapsed = false }: { search?: '01' | '02' | '03'; initialCollapsed?: boolean }) {\n  const t = useT()\n  const [collapsed, setCollapsed] = React.useState(initialCollapsed)\n  const [query, setQuery] = React.useState('')\n  const [active, setActive] = React.useState('projects')\n  const [draft, setDraft] = React.useState(0)\n  const newChat = () => { setDraft(value => value + 1); setActive('newChat') }\n  const searchControl = <SearchInput value={query} onChange={setQuery} clearable={false} aria-label={t(`${prefix}search`)} placeholder={t(`${prefix}searchPlaceholder`)} className=\"h-9 w-61 max-w-full rounded-lg border-0 bg-muted px-2 shadow-none [&>svg]:size-5\" />\n  const searchPopover = <Popover><PopoverTrigger asChild><AiIconButton aria-label={t(`${prefix}search`)}><Search aria-hidden=\"true\" /></AiIconButton></PopoverTrigger><PopoverContent className=\"w-auto p-3\">{searchControl}<p className=\"mt-2 text-xs text-muted-foreground\">{t(`${prefix}query`)} {query}</p></PopoverContent></Popover>\n  const groups = [\n    { label: 'pinned', items: ['launchPlan', 'researchNotes', 'contentIdeas'], icon: true },\n    { label: 'recent', items: ['quarterlyReport', 'emailDraft', 'meetingNotes'], icon: false },\n    { label: 'yesterday', items: ['campaignIdeas', 'productBrief', 'supportReply', 'weeklyPlan', 'projectSummary'], icon: false },\n  ]\n  return <div className=\"flex max-w-full flex-wrap items-start gap-5\">\n    <Sidebar collapsed={collapsed} aria-label={t(`${prefix}sidebar`)} className={cn('max-w-full rounded-lg border border-border', collapsed ? 'w-18 gap-5 border-0 p-5' : 'w-68 gap-4 border-0 px-3.5 pb-3.5 pt-5')}>\n      <div className=\"flex shrink-0 flex-col gap-5\"><div className=\"flex h-8 items-center justify-between\">\n        {collapsed ? <AiIconButton aria-label={t(`${prefix}expand`)} onClick={() => setCollapsed(false)}><img src={aiProductArtwork.logo} alt=\"\" className=\"size-8\" /></AiIconButton> : <><img src={aiProductArtwork.logo} alt={t(`${prefix}brand`)} className=\"size-8\" /><div className=\"flex gap-1\">{search === '02' ? searchPopover : null}<AiIconButton aria-label={t(`${prefix}collapse`)} onClick={() => setCollapsed(true)}><PanelLeft aria-hidden=\"true\" /></AiIconButton></div></>}\n      </div>{!collapsed && search === '01' ? searchControl : null}</div>\n      {collapsed ? <><AiDivider /><div className=\"flex flex-1 flex-col gap-3\"><AiIconButton aria-label={t(`${prefix}newChat`)} onClick={newChat}><Plus aria-hidden=\"true\" /></AiIconButton><AiIconButton aria-label={t(`${prefix}projects`)} aria-pressed={active === 'projects'} onClick={() => setActive('projects')}><Folder aria-hidden=\"true\" /></AiIconButton><AiIconButton aria-label={t(`${prefix}library`)} aria-pressed={active === 'library'} onClick={() => setActive('library')}><BookOpen aria-hidden=\"true\" /></AiIconButton>{searchPopover}</div><AiDivider /></> : <>\n        <div className=\"grid shrink-0 gap-1\"><AiNewChatButton onClick={newChat} /><AiNavItem active={active === 'projects'} onClick={() => setActive('projects')}>{t(`${prefix}projects`)}</AiNavItem><AiNavItem leading={<BookOpen aria-hidden=\"true\" className=\"size-5\" />} active={active === 'library'} onClick={() => setActive('library')}>{t(`${prefix}library`)}</AiNavItem>{search === '03' ? <Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"ghost\" className=\"h-8 justify-start gap-2 rounded-md p-1.5 text-sm text-muted-foreground\"><Search aria-hidden=\"true\" className=\"size-5\" />{t(`${prefix}search`)}</Button></PopoverTrigger><PopoverContent className=\"w-auto p-3\">{searchControl}</PopoverContent></Popover> : null}</div>\n        <AiDivider /><div className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-auto\">\n          {groups.map((group, groupIndex) => <React.Fragment key={group.label}>{groupIndex === 1 ? <AiDivider /> : null}<div className=\"grid shrink-0 gap-2\"><h3 className=\"px-1.5 text-xs font-medium leading-4 text-muted-foreground\">{t(`${prefix}${group.label}`)}</h3><div className=\"grid gap-1\">{group.items.filter(item => t(`${prefix}${item}`).toLocaleLowerCase().includes(query.toLocaleLowerCase())).map(item => <AiNavItem key={item} icon={group.icon} active={active === item} onClick={() => setActive(item)}>{t(`${prefix}${item}`)}</AiNavItem>)}</div></div></React.Fragment>)}\n        </div><AiDivider />\n      </>}\n      <Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"ghost\" aria-label={t(`${prefix}profile`)} data-slot=\"ai-sidebar-profile\" className={cn('shrink-0 justify-start rounded-md text-left', collapsed ? 'size-8 p-0' : 'h-13 gap-3 p-1.5')}><Avatar label=\"James Brown\" size={collapsed ? 32 : 40} />{!collapsed ? <><span className=\"flex min-w-0 flex-1 flex-col gap-1\"><span className=\"flex items-center gap-1 text-sm font-medium leading-5\">James Brown <Badge size={16} appearance=\"light\">Pro</Badge></span><span className=\"truncate text-xs font-normal leading-4 text-muted-foreground\">james@example.com</span></span><MoreVertical aria-hidden=\"true\" className=\"size-4.5\" /></> : null}</Button></PopoverTrigger><PopoverContent className=\"w-64 text-sm\"><p className=\"font-medium\">James Brown</p><p className=\"mt-2 text-muted-foreground\">{t(`${prefix}localOnly`)}</p></PopoverContent></Popover>\n    </Sidebar><output aria-live=\"polite\" className=\"grid max-w-xs gap-2 text-sm text-muted-foreground\"><span>{t(`${prefix}selected`)} {t(`${prefix}${active}`)}</span><span>{t(`${prefix}draftNumber`, { number: draft })}</span>{query ? <span>{t(`${prefix}query`)} {query}</span> : null}</output>\n  </div>\n}\n\nexport function AiMobileNavigationExample({ kind = 'default' }: { kind?: 'default' | 'in-projects' | 'projects' | 'project-details' }) {\n  const t = useT()\n  const [model, setModel] = React.useState('GPT-4')\n  const [selected, setSelected] = React.useState('projects')\n  const [draft, setDraft] = React.useState(0)\n  const [project, setProject] = React.useState('')\n  const [name, setName] = React.useState('')\n  const [createOpen, setCreateOpen] = React.useState(false)\n  const [pinned, setPinned] = React.useState(false)\n  const id = React.useId()\n  const menu = <Popover><PopoverTrigger asChild><AiIconButton aria-label={t(`${prefix}menu`)}><Menu aria-hidden=\"true\" /></AiIconButton></PopoverTrigger><PopoverContent className=\"grid w-auto gap-1 p-2\">{['projects', 'library'].map(item => <AiNavItem key={item} mobile active={selected === item} onClick={() => setSelected(item)}>{t(`${prefix}${item}`)}</AiNavItem>)}</PopoverContent></Popover>\n  const more = <Popover><PopoverTrigger asChild><AiIconButton size={kind === 'project-details' ? 24 : 32} aria-label={t(`${prefix}more`)}><MoreHorizontal aria-hidden=\"true\" /></AiIconButton></PopoverTrigger><PopoverContent className=\"w-64\"><CheckboxField checked={pinned} onCheckedChange={value => setPinned(value === true)} label={t(`${prefix}pinProject`)} /></PopoverContent></Popover>\n  const create = () => { if (!name.trim()) return; setProject(name.trim()); setName(''); setCreateOpen(false) }\n  return <div className=\"grid w-full min-w-0 max-w-sm grid-cols-1 gap-4\"><header data-slot=\"ai-mobile-navigation\" data-kind={kind} className={cn('flex h-16 w-full min-w-0 items-center gap-2 bg-background px-2 py-3 sm:px-4', kind === 'project-details' ? 'sm:gap-2.5' : 'sm:gap-3.5')}>\n    {kind === 'project-details' ? <><AiIconButton size={20} aria-label={t(`${prefix}allProjects`)} onClick={() => setSelected('projects')}><ArrowLeft aria-hidden=\"true\" /></AiIconButton><span className=\"flex-1 text-sm font-medium\">{t(`${prefix}allProjects`)}</span><div className=\"flex gap-2\"><AiIconButton size={24} aria-label={t(`${prefix}newChat`)} onClick={() => setDraft(value => value + 1)}><Plus aria-hidden=\"true\" /></AiIconButton>{more}</div></> : <>{menu}{kind === 'projects' ? <div className=\"flex flex-1 justify-end\"><Popover open={createOpen} onOpenChange={setCreateOpen}><PopoverTrigger asChild><Button type=\"button\" size=\"sm\" variant=\"outline\" className=\"w-auto shrink-0 gap-2 rounded-lg\"><Plus aria-hidden=\"true\" className=\"size-5\" />{t(`${prefix}addProject`)}</Button></PopoverTrigger><PopoverContent className=\"w-72\"><form className=\"grid gap-3\" onSubmit={event => { event.preventDefault(); create() }} onKeyDown={event => { if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); create() } }}><FieldLabel htmlFor={id} required>{t(`${prefix}projectName`)}</FieldLabel><Input id={id} value={name} onChange={event => setName(event.target.value)} autoFocus /><Button type=\"submit\" size=\"sm\" disabled={!name.trim()}>{t(`${prefix}addProject`)}</Button></form></PopoverContent></Popover></div> : <><div className=\"flex min-w-0 flex-1 flex-col gap-1\"><AiModelSelect value={model} onChange={setModel} compact />{kind === 'in-projects' ? <span className=\"truncate text-xs leading-4 text-muted-foreground\">{t(`${prefix}launchPlan`)}</span> : null}</div><AiIconButton aria-label={t(`${prefix}newChat`)} onClick={() => setDraft(value => value + 1)}><Plus aria-hidden=\"true\" /></AiIconButton>{more}</>}</>}\n  </header><output aria-live=\"polite\" className=\"grid gap-1 text-xs text-muted-foreground\"><span>{t(`${prefix}selected`)} {t(`${prefix}${selected}`)}</span><span>{t(`${prefix}draftNumber`, { number: draft })}</span>{project ? <span>{t(`${prefix}createdProject`)} {project}</span> : null}{pinned ? <span>{t(`${prefix}pinProject`)}</span> : null}</output></div>\n}\n"
+export const aiProductExampleCode = (expression: string) => source + "\n" + expression + "\n"