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

package/dist/modules/design_system/gallery/components/colorStudio.js

@@ -0,0 +1,218 @@
+import { contrastRatio, normalizeHex } from "./colorPreview.js";
+const STEPS = [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) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function toOklch(hex) {
+  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 }) {
+  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) {
+  return channels.every((channel) => channel >= -1e-7 && channel <= 1.0000001);
+}
+function toHex(color) {
+  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 <= 31308e-7 ? 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, accent) {
+  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) {
+  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 < 1e-5 ? 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) {
+  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, shade) {
+  return scale.find((stop) => stop.step === shade).hex;
+}
+function foregroundFor(background) {
+  return contrastRatio("#000000", background) >= contrastRatio("#FFFFFF", background) ? "#000000" : "#FFFFFF";
+}
+function nearestReadable(scale, target, background, minimum) {
+  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, neutrals, dark, actionStep, secondary, tertiary) {
+  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, colors) => {
+    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 = {
+    ...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, text, surface, 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)
+    ]
+  };
+}
+function createHarmonySeeds(seed, harmony) {
+  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 < 1e-5 ? 0 : color.hue;
+  return {
+    secondary: toHex({ lightness, chroma, hue: hue + offset }),
+    tertiary: toHex({ lightness, chroma, hue: hue - offset })
+  };
+}
+function createColorStudio(seed, neutral, actionShades = {}, colors = {}) {
+  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)
+  };
+}
+function exportColorStudio(studio, format) {
+  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"].map((theme) => `.ds-color-preview-${theme} {
+${Object.entries({ ...scaleTokens, ...studio[theme].tokens }).map(([token, value]) => `  ${token}: ${value};`).join("\n")}
+}`).join("\n\n");
+}
+export {
+  createColorStudio,
+  createHarmonySeeds,
+  exportColorStudio
+};
+//# sourceMappingURL=colorStudio.js.map

package/dist/modules/design_system/gallery/components/colorStudio.js.map

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

package/dist/modules/design_system/gallery/components/styleAgentBranding.js

@@ -0,0 +1,46 @@
+function studioBrandStyle(studio, logo) {
+  const theme = (mode) => {
+    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") };
+}
+function readBrandLogo(file) {
+  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);
+  });
+}
+export {
+  readBrandLogo,
+  studioBrandStyle
+};
+//# sourceMappingURL=styleAgentBranding.js.map

package/dist/modules/design_system/gallery/components/styleAgentBranding.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/styleAgentBranding.ts"],
+  "sourcesContent": ["import type { BrandStyle } from '@open-mercato/ui/theme/brand-style'\nimport type { ColorStudio } from './colorStudio'\n\nexport function studioBrandStyle(studio: ColorStudio, logo: string | null): BrandStyle {\n  const theme = (mode: 'light' | 'dark') => {\n    const tokens = studio[mode].tokens\n    return {\n      '--primary': tokens['--primary'],\n      '--primary-hover': tokens['--primary-hover'],\n      '--primary-foreground': tokens['--primary-foreground'],\n      '--brand-lime': studio.secondaryScale.find(stop => stop.step === 200)!.hex,\n      '--brand-yellow': studio.scale.find(stop => stop.step === 200)!.hex,\n      '--brand-violet': studio.tertiaryScale.find(stop => stop.step === 200)!.hex,\n      '--brand-violet-foreground': '#000000',\n    }\n  }\n  return { version: 1, logo, seeds: studio.seeds, actionShades: { light: studio.light.actionStep, dark: studio.dark.actionStep }, light: theme('light'), dark: theme('dark') }\n}\n\nexport function readBrandLogo(file: File): Promise<string> {\n  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) return Promise.reject(new Error('fileType'))\n  if (file.size > 1024 * 1024) return Promise.reject(new Error('fileSize'))\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onerror = () => reject(new Error('fileDecode'))\n    reader.onload = () => {\n      if (typeof reader.result !== 'string') { reject(new Error('fileDecode')); return }\n      const data = reader.result\n      const image = new Image()\n      image.onerror = () => reject(new Error('fileDecode'))\n      image.onload = () => {\n        if (!image.naturalWidth || !image.naturalHeight || image.naturalWidth > 4096 || image.naturalHeight > 4096) {\n          reject(new Error('fileDimensions'))\n          return\n        }\n        resolve(data)\n      }\n      image.src = data\n    }\n    reader.readAsDataURL(file)\n  })\n}\n"],
+  "mappings": "AAGO,SAAS,iBAAiB,QAAqB,MAAiC;AACrF,QAAM,QAAQ,CAAC,SAA2B;AACxC,UAAM,SAAS,OAAO,IAAI,EAAE;AAC5B,WAAO;AAAA,MACL,aAAa,OAAO,WAAW;AAAA,MAC/B,mBAAmB,OAAO,iBAAiB;AAAA,MAC3C,wBAAwB,OAAO,sBAAsB;AAAA,MACrD,gBAAgB,OAAO,eAAe,KAAK,UAAQ,KAAK,SAAS,GAAG,EAAG;AAAA,MACvE,kBAAkB,OAAO,MAAM,KAAK,UAAQ,KAAK,SAAS,GAAG,EAAG;AAAA,MAChE,kBAAkB,OAAO,cAAc,KAAK,UAAQ,KAAK,SAAS,GAAG,EAAG;AAAA,MACxE,6BAA6B;AAAA,IAC/B;AAAA,EACF;AACA,SAAO,EAAE,SAAS,GAAG,MAAM,OAAO,OAAO,OAAO,cAAc,EAAE,OAAO,OAAO,MAAM,YAAY,MAAM,OAAO,KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,GAAG,MAAM,MAAM,MAAM,EAAE;AAC7K;AAEO,SAAS,cAAc,MAA6B;AACzD,MAAI,CAAC,CAAC,aAAa,cAAc,YAAY,EAAE,SAAS,KAAK,IAAI,EAAG,QAAO,QAAQ,OAAO,IAAI,MAAM,UAAU,CAAC;AAC/G,MAAI,KAAK,OAAO,OAAO,KAAM,QAAO,QAAQ,OAAO,IAAI,MAAM,UAAU,CAAC;AACxE,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,UAAM,SAAS,IAAI,WAAW;AAC9B,WAAO,UAAU,MAAM,OAAO,IAAI,MAAM,YAAY,CAAC;AACrD,WAAO,SAAS,MAAM;AACpB,UAAI,OAAO,OAAO,WAAW,UAAU;AAAE,eAAO,IAAI,MAAM,YAAY,CAAC;AAAG;AAAA,MAAO;AACjF,YAAM,OAAO,OAAO;AACpB,YAAM,QAAQ,IAAI,MAAM;AACxB,YAAM,UAAU,MAAM,OAAO,IAAI,MAAM,YAAY,CAAC;AACpD,YAAM,SAAS,MAAM;AACnB,YAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,iBAAiB,MAAM,eAAe,QAAQ,MAAM,gBAAgB,MAAM;AAC1G,iBAAO,IAAI,MAAM,gBAAgB,CAAC;AAClC;AAAA,QACF;AACA,gBAAQ,IAAI;AAAA,MACd;AACA,YAAM,MAAM;AAAA,IACd;AACA,WAAO,cAAc,IAAI;AAAA,EAC3B,CAAC;AACH;",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/themeTokens.js

@@ -0,0 +1,32 @@
+function readThemeTokens(sheets) {
+  const light = {};
+  const dark = {};
+  function readRules(rules) {
+    for (const rule of Array.from(rules)) {
+      if ("selectorText" in rule && "style" in rule) {
+        const styleRule = rule;
+        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.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 } };
+}
+export {
+  readThemeTokens
+};
+//# sourceMappingURL=themeTokens.js.map

package/dist/modules/design_system/gallery/components/themeTokens.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/themeTokens.ts"],
+  "sourcesContent": ["export type ThemeTokens = { light: Record<string, string>; dark: Record<string, string> }\n\nexport function readThemeTokens(sheets: Iterable<CSSStyleSheet>): ThemeTokens {\n  const light: Record<string, string> = {}\n  const dark: Record<string, string> = {}\n  function readRules(rules: CSSRuleList) {\n    for (const rule of Array.from(rules)) {\n      if ('selectorText' in rule && 'style' in rule) {\n        const styleRule = rule as CSSStyleRule\n        const selectors = styleRule.selectorText.split(',').map(selector => selector.trim())\n        const target = selectors.includes('.dark') ? dark : selectors.includes(':root') ? light : null\n        if (target) {\n          for (const property of Array.from(styleRule.style)) {\n            if (property.startsWith('--')) target[property] = styleRule.style.getPropertyValue(property).trim()\n          }\n        }\n      }\n      if ('cssRules' in rule) readRules((rule as CSSGroupingRule).cssRules)\n    }\n  }\n  for (const sheet of sheets) {\n    if (sheet.ownerNode instanceof Element && sheet.ownerNode.id === 'om-brand-style') continue\n    try { readRules(sheet.cssRules) } catch { continue }\n  }\n  return { light, dark: { ...light, ...dark } }\n}\n"],
+  "mappings": "AAEO,SAAS,gBAAgB,QAA8C;AAC5E,QAAM,QAAgC,CAAC;AACvC,QAAM,OAA+B,CAAC;AACtC,WAAS,UAAU,OAAoB;AACrC,eAAW,QAAQ,MAAM,KAAK,KAAK,GAAG;AACpC,UAAI,kBAAkB,QAAQ,WAAW,MAAM;AAC7C,cAAM,YAAY;AAClB,cAAM,YAAY,UAAU,aAAa,MAAM,GAAG,EAAE,IAAI,cAAY,SAAS,KAAK,CAAC;AACnF,cAAM,SAAS,UAAU,SAAS,OAAO,IAAI,OAAO,UAAU,SAAS,OAAO,IAAI,QAAQ;AAC1F,YAAI,QAAQ;AACV,qBAAW,YAAY,MAAM,KAAK,UAAU,KAAK,GAAG;AAClD,gBAAI,SAAS,WAAW,IAAI,EAAG,QAAO,QAAQ,IAAI,UAAU,MAAM,iBAAiB,QAAQ,EAAE,KAAK;AAAA,UACpG;AAAA,QACF;AAAA,MACF;AACA,UAAI,cAAc,KAAM,WAAW,KAAyB,QAAQ;AAAA,IACtE;AAAA,EACF;AACA,aAAW,SAAS,QAAQ;AAC1B,QAAI,MAAM,qBAAqB,WAAW,MAAM,UAAU,OAAO,iBAAkB;AACnF,QAAI;AAAE,gBAAU,MAAM,QAAQ;AAAA,IAAE,QAAQ;AAAE;AAAA,IAAS;AAAA,EACrD;AACA,SAAO,EAAE,OAAO,MAAM,EAAE,GAAG,OAAO,GAAG,KAAK,EAAE;AAC9C;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/ai-product-code.generated.js

@@ -0,0 +1,194 @@
+const source = `import * as React from 'react'
+import { ArrowLeft, BookOpen, ChevronDown, ChevronRight, Folder, Mail, Menu, MoreHorizontal, MoreVertical, PanelLeft, Plus, Search, User, X, Zap } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { FieldLabel } from '@open-mercato/ui/primitives/label'
+import { HintText } from '@open-mercato/ui/primitives/hint-text'
+import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'
+import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
+import { CounterInput } from '@open-mercato/ui/primitives/counter-input'
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Popover, PopoverTrigger, PopoverContent } from '@open-mercato/ui/primitives/popover'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Sidebar } from '@open-mercato/ui/primitives/sidebar'
+import { PromptArea } from '@open-mercato/ui/primitives/prompt-area'
+import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+import { aiProductArtwork } from '@open-mercato/ui/assets/ai-product-artwork'
+import promptImage from '../assets/ai-prompt-image.png'
+import avatarPhoto from '../assets/avatar-photo.png'
+import googleIcon from '../assets/select-google.png'
+
+type ButtonProps = React.ComponentProps<typeof Button>
+
+const prefix = 'design_system.gallery.examples.aiProduct.'
+const source = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src
+
+function 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' }) {
+  const content = React.isValidElement<{ className?: string }>(children) && children.type !== 'img'
+    ? React.cloneElement(children, { className: cn(children.props.className, size === 24 ? 'size-4.5' : 'size-5') })
+    : children
+  return <Button type="button" variant="ghost" size="icon" data-slot="ai-icon-button" data-size={size} data-tone={tone} data-appearance={appearance} className={cn(
+    'shrink-0 p-0',
+    size === 32 ? 'size-8 rounded-md' : size === 28 ? 'size-7 rounded-md' : size === 24 ? 'size-6 rounded-sm' : 'size-5 rounded-sm',
+    appearance !== 'plain' && 'rounded-ai-control',
+    appearance === 'stroke' ? 'bg-background shadow-xs ring-1 ring-inset ring-border' : appearance === 'lighter' ? 'bg-muted' : 'bg-background',
+    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',
+    appearance !== 'plain' && 'aria-pressed:bg-primary aria-pressed:text-primary-foreground',
+    className,
+  )} {...props}>{content}</Button>
+}
+
+function AiModelSelect({ value, onChange, compact = false, className }: { value: string; onChange: (value: string) => void; compact?: boolean; className?: string }) {
+  const t = useT()
+  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>
+}
+
+type PromptAttachment = { id: string; name: string; image?: string; objectUrl?: boolean }
+
+export function AiPromptExample({ compact = false, attachment = 'none' }: { compact?: boolean; attachment?: 'none' | 'file' | 'image' }) {
+  const t = useT()
+  const [value, setValue] = React.useState('')
+  const [model, setModel] = React.useState('GPT-4')
+  const [lastPrompt, setLastPrompt] = React.useState('')
+  const [files, setFiles] = React.useState<PromptAttachment[]>(attachment === 'none' ? [] : [{ id: 'source', name: t(\`\${prefix}\${attachment === 'image' ? 'imageName' : 'fileName'}\`), image: attachment === 'image' ? source(promptImage) : undefined }])
+  const upload = React.useRef<HTMLInputElement>(null)
+  const attachmentId = React.useRef(0)
+  const objectUrls = React.useRef(new Set<string>())
+  React.useEffect(() => () => { for (const url of objectUrls.current) URL.revokeObjectURL(url) }, [])
+  const remove = (id: string) => setFiles(current => current.filter(file => {
+    if (file.id !== id) return true
+    if (file.objectUrl && file.image) { URL.revokeObjectURL(file.image); objectUrls.current.delete(file.image) }
+    return false
+  }))
+  const submit = (message: string) => { setLastPrompt(\`\${model}: \${message}\`); setValue('') }
+  return <div className={cn('grid max-w-full gap-4', compact ? 'w-93.5' : 'w-175')}>
+    <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">\xB7</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></>}
+      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} /></>}
+      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} />
+    <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 = '' }} />
+    <p className="text-xs leading-4 text-muted-foreground">{t(\`\${prefix}localOnly\`)}</p>
+    {lastPrompt ? <output className="rounded-md border border-border p-3 text-sm">{t(\`\${prefix}saved\`)} {lastPrompt}</output> : null}
+  </div>
+}
+
+export function AiIconButtonExamples({ chat = false }: { chat?: boolean }) {
+  const t = useT()
+  const [active, setActive] = React.useState<string[]>([])
+  const toggle = (key: string) => setActive(items => items.includes(key) ? items.filter(item => item !== key) : [...items, key])
+  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>
+}
+
+function AiNavItem({ children, icon = true, leading, mobile = false, active = false, className, ...props }: ButtonProps & { icon?: boolean; leading?: React.ReactNode; mobile?: boolean; active?: boolean }) {
+  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}>
+    {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'))} />}
+  </Button>
+}
+
+export function AiNavigationExamples() {
+  const t = useT()
+  const [active, setActive] = React.useState<string[]>([])
+  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>
+}
+
+export function AiSearchExamples() {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  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>
+}
+
+export function AiAuthExamples({ kind = 'icons' }: { kind?: 'icons' | 'social' | 'text' | 'digits' }) {
+  const t = useT()
+  const [value, setValue] = React.useState('')
+  const [clicked, setClicked] = React.useState(false)
+  const id = React.useId()
+  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') ? \` \xB7 \${t(\`\${prefix}gray\`)}\` : ''}</span></div>)}</div>
+  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>
+  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>
+  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>
+}
+
+export function AiSettingsExamples() {
+  const t = useT()
+  const [tab, setTab] = React.useState('people')
+  const [size, setSize] = React.useState('medium')
+  const [count, setCount] = React.useState<number | null>(30)
+  const [model, setModel] = React.useState('GPT-4')
+  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>
+    <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>
+  </div>
+}
+
+function AiNewChatButton({ onClick }: { onClick: () => void }) {
+  const t = useT()
+  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>
+}
+
+export function AiNewChatExample() {
+  const t = useT()
+  const [draft, setDraft] = React.useState(0)
+  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>
+}
+
+function AiDivider() {
+  return <div role="separator" className="flex h-1 shrink-0 items-center px-1.5"><span className="h-px w-full bg-border" /></div>
+}
+
+export function AiSidebarExample({ search = '01', initialCollapsed = false }: { search?: '01' | '02' | '03'; initialCollapsed?: boolean }) {
+  const t = useT()
+  const [collapsed, setCollapsed] = React.useState(initialCollapsed)
+  const [query, setQuery] = React.useState('')
+  const [active, setActive] = React.useState('projects')
+  const [draft, setDraft] = React.useState(0)
+  const newChat = () => { setDraft(value => value + 1); setActive('newChat') }
+  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" />
+  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>
+  const groups = [
+    { label: 'pinned', items: ['launchPlan', 'researchNotes', 'contentIdeas'], icon: true },
+    { label: 'recent', items: ['quarterlyReport', 'emailDraft', 'meetingNotes'], icon: false },
+    { label: 'yesterday', items: ['campaignIdeas', 'productBrief', 'supportReply', 'weeklyPlan', 'projectSummary'], icon: false },
+  ]
+  return <div className="flex max-w-full flex-wrap items-start gap-5">
+    <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')}>
+      <div className="flex shrink-0 flex-col gap-5"><div className="flex h-8 items-center justify-between">
+        {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></>}
+      </div>{!collapsed && search === '01' ? searchControl : null}</div>
+      {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 /></> : <>
+        <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>
+        <AiDivider /><div className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto">
+          {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>)}
+        </div><AiDivider />
+      </>}
+      <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>
+    </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>
+  </div>
+}
+
+export function AiMobileNavigationExample({ kind = 'default' }: { kind?: 'default' | 'in-projects' | 'projects' | 'project-details' }) {
+  const t = useT()
+  const [model, setModel] = React.useState('GPT-4')
+  const [selected, setSelected] = React.useState('projects')
+  const [draft, setDraft] = React.useState(0)
+  const [project, setProject] = React.useState('')
+  const [name, setName] = React.useState('')
+  const [createOpen, setCreateOpen] = React.useState(false)
+  const [pinned, setPinned] = React.useState(false)
+  const id = React.useId()
+  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>
+  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>
+  const create = () => { if (!name.trim()) return; setProject(name.trim()); setName(''); setCreateOpen(false) }
+  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')}>
+    {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}</>}</>}
+  </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>
+}
+`;
+const aiProductExampleCode = (expression) => source + "\n" + expression + "\n";
+export {
+  aiProductExampleCode
+};
+//# sourceMappingURL=ai-product-code.generated.js.map