@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

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

@@ -0,0 +1,408 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowLeft, ArrowRight, GripVertical, Check, Copy, RotateCcw, Sun, Moon, Paintbrush, MousePointer2, Layers, CircleCheck } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import { readThemeTokens } from "./themeTokens.js";
+import { contrastRatio, normalizeHex } from "./colorPreview.js";
+import { createColorStudio, exportColorStudio } from "./colorStudio.js";
+import { ColorStudioSpecimen } from "./ColorStudioSpecimen.js";
+import { ColorStudioCompositions } from "./ColorStudioCompositions.js";
+const INITIAL_COLOR = "#F4700D";
+const PRESETS = ["#BC9AFF", INITIAL_COLOR, "#2563EB", "#0F766E", "#BE185D"];
+const THEMES = ["light", "dark"];
+const ROLE_ICONS = { action: Paintbrush, selection: MousePointer2, surface: Layers, status: CircleCheck };
+function ShadeSelect({ label, scale, value, onChange }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs(Select, { value: String(value), onValueChange: (next) => {
+      const stop = scale.find((item) => String(item.step) === next);
+      if (stop) onChange(stop.step);
+    }, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { id, "aria-label": label, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: scale.map((stop) => /* @__PURE__ */ jsx(SelectItem, { value: String(stop.step), children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-4 shrink-0 rounded-sm border border-border", style: { backgroundColor: stop.hex } }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs", children: [
+          stop.step,
+          " \xB7 ",
+          stop.hex
+        ] })
+      ] }) }, stop.step)) })
+    ] })
+  ] });
+}
+const COLOR_ROLES = ["primary", "secondary", "tertiary"];
+function ColorRoleSwap({ role, disabled, onSwap, onDragStart, onDragEnd }) {
+  const t = useT();
+  const index = COLOR_ROLES.indexOf(role);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { draggable: !disabled, onDragStart, onDragEnd, title: t("design_system.colorStudio.dragColor"), className: "inline-flex size-8 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing", "aria-hidden": true, children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" }) }),
+    ["left", "right"].map((direction) => {
+      const target = COLOR_ROLES[index + (direction === "left" ? -1 : 1)];
+      const Icon = direction === "left" ? ArrowLeft : ArrowRight;
+      return /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled || !target, "aria-label": `${t(`design_system.colorStudio.move${direction === "left" ? "Left" : "Right"}`)}: ${t(`design_system.colorStudio.${role}`)}`, className: "shrink-0 text-muted-foreground", onClick: () => {
+        if (target) onSwap(role, target);
+      }, children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-4" }) }, direction);
+    })
+  ] });
+}
+function ColorPlayground({ initialSeeds, initialActionShades, initialView = "compare", logo, onStudioChange } = {}) {
+  const t = useT();
+  const id = React.useId();
+  const [color, setColor] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR);
+  const [draft, setDraft] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR);
+  const [harmony, setHarmony] = React.useState("triadic");
+  const [supporting, setSupporting] = React.useState(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {});
+  const [supportingDrafts, setSupportingDrafts] = React.useState(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {});
+  const [neutral, setNeutral] = React.useState("neutral");
+  const [view, setView] = React.useState(initialView);
+  const [actionShades, setActionShades] = React.useState(initialActionShades ?? {});
+  const [hostTokens, setHostTokens] = React.useState(null);
+  const [matrixForeground, setMatrixForeground] = React.useState(900);
+  const [matrixBackground, setMatrixBackground] = React.useState(50);
+  const [draggedRole, setDraggedRole] = React.useState(null);
+  const [dropRole, setDropRole] = React.useState(null);
+  const [feedback, setFeedback] = React.useState("");
+  const [resetVersion, setResetVersion] = React.useState(0);
+  const invalid = !normalizeHex(draft);
+  const hasManualColors = Object.keys(supportingDrafts).length > 0;
+  const studio = React.useMemo(() => createColorStudio(color, neutral, actionShades, { harmony, ...supporting }), [color, neutral, actionShades, harmony, supporting]);
+  React.useEffect(() => {
+    onStudioChange?.(studio, !invalid && Object.values(supportingDrafts).every((value) => Boolean(normalizeHex(value))));
+  }, [studio, invalid, supportingDrafts, onStudioChange]);
+  const matrixText = studio.scale.find((stop) => stop.step === matrixForeground).hex;
+  const matrixSurface = studio.scale.find((stop) => stop.step === matrixBackground).hex;
+  const matrixRatio = contrastRatio(matrixText, matrixSurface);
+  React.useEffect(() => {
+    setHostTokens(readThemeTokens(document.styleSheets));
+  }, []);
+  function chooseColor(value) {
+    setDraft(value);
+    const normalized = normalizeHex(value);
+    if (normalized) setColor(normalized);
+    setFeedback("");
+  }
+  function swapColors(first, second) {
+    if (invalid || Object.values(supportingDrafts).some((value) => !normalizeHex(value))) return;
+    const next = { ...studio.seeds, [first]: studio.seeds[second], [second]: studio.seeds[first] };
+    setColor(next.primary);
+    setDraft(next.primary);
+    setSupporting({ secondary: next.secondary, tertiary: next.tertiary });
+    setSupportingDrafts({ secondary: next.secondary, tertiary: next.tertiary });
+    if (first === "primary" || second === "primary") setActionShades({});
+    setFeedback(t("design_system.colorStudio.swapped"));
+  }
+  function reset() {
+    chooseColor(INITIAL_COLOR);
+    setNeutral("neutral");
+    setHarmony("triadic");
+    setSupporting({});
+    setSupportingDrafts({});
+    setView(initialView);
+    setActionShades({});
+    setMatrixForeground(900);
+    setMatrixBackground(50);
+    setResetVersion((previous) => previous + 1);
+  }
+  async function copy(value, message) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setFeedback(message);
+    } catch {
+      setFeedback(t("design_system.colorPreview.copyFailed"));
+    }
+  }
+  const swapDisabled = invalid || Object.values(supportingDrafts).some((value) => !normalizeHex(value));
+  function dragStart(role, event) {
+    if (swapDisabled) {
+      event.preventDefault();
+      return;
+    }
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", role);
+    setDraggedRole(role);
+  }
+  function dragEnd() {
+    setDraggedRole(null);
+    setDropRole(null);
+  }
+  function dropProps(role) {
+    return {
+      "data-color-role": role,
+      className: `space-y-2 rounded-lg transition-shadow ${dropRole === role ? "ring-2 ring-ring" : ""}`,
+      onDragOver: (event) => {
+        if (!draggedRole || draggedRole === role || swapDisabled) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        setDropRole(role);
+      },
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDropRole(null);
+      },
+      onDrop: (event) => {
+        event.preventDefault();
+        if (draggedRole && draggedRole !== role && !swapDisabled) swapColors(draggedRole, role);
+        dragEnd();
+      }
+    };
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-8", "aria-labelledby": `${id}-title`, "data-example": "color-playground", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-w-2xl space-y-2", children: [
+        /* @__PURE__ */ jsx("h2", { id: `${id}-title`, className: "text-2xl font-medium tracking-tight", children: t("design_system.colorStudio.title") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.description") })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", onClick: reset, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": true }),
+        t("design_system.colorPreview.reset")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6 rounded-xl border border-border bg-card p-5 sm:p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 sm:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs("div", { ...dropProps("primary"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-hex`, children: t("design_system.colorStudio.primary") }),
+            /* @__PURE__ */ jsx(ColorRoleSwap, { role: "primary", disabled: swapDisabled, onSwap: swapColors, onDragStart: (event) => dragStart("primary", event), onDragEnd: dragEnd })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Input, { type: "color", value: color, "aria-label": t("design_system.colorPreview.color"), onChange: (event) => chooseColor(event.target.value), className: "w-12 shrink-0 p-1", inputClassName: "h-full w-full cursor-pointer p-0" }),
+            /* @__PURE__ */ jsx(Input, { id: `${id}-hex`, "aria-label": t("design_system.colorPreview.hex"), value: draft, onChange: (event) => chooseColor(event.target.value), onBlur: () => {
+              const value = normalizeHex(draft);
+              if (value) setDraft(value);
+            }, inputClassName: "font-mono", "aria-invalid": invalid, "aria-describedby": invalid ? `${id}-error` : void 0, spellCheck: false, maxLength: 7 })
+          ] })
+        ] }),
+        ["secondary", "tertiary"].map((role) => {
+          const value = supportingDrafts[role] ?? studio.seeds[role];
+          const valid = Boolean(normalizeHex(value));
+          const change = (next) => {
+            setSupportingDrafts((previous) => ({ ...previous, [role]: next }));
+            const normalized = normalizeHex(next);
+            if (normalized) setSupporting((previous) => ({ ...previous, [role]: normalized }));
+            setFeedback("");
+          };
+          return /* @__PURE__ */ jsxs("div", { ...dropProps(role), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${role}`, children: t(`design_system.colorStudio.${role}`) }),
+              /* @__PURE__ */ jsx(ColorRoleSwap, { role, disabled: swapDisabled, onSwap: swapColors, onDragStart: (event) => dragStart(role, event), onDragEnd: dragEnd })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Input, { type: "color", value: studio.seeds[role], "aria-label": t(`design_system.colorStudio.${role}`), onChange: (event) => change(event.target.value), className: "w-12 shrink-0 p-1", inputClassName: "h-full w-full cursor-pointer p-0" }),
+              /* @__PURE__ */ jsx(Input, { id: `${id}-${role}`, value, "aria-label": `${t(`design_system.colorStudio.${role}`)} HEX`, onChange: (event) => change(event.target.value), inputClassName: "font-mono", "aria-invalid": !valid, "aria-describedby": !valid ? `${id}-${role}-error` : void 0, maxLength: 7, spellCheck: false })
+            ] }),
+            !valid ? /* @__PURE__ */ jsx("p", { id: `${id}-${role}-error`, role: "alert", className: "text-xs text-status-error-text", children: t(`design_system.colorStudio.${role}Invalid`) }) : null
+          ] }, role);
+        })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 sm:grid-cols-2 xl:grid-cols-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-harmony`, children: t("design_system.colorStudio.harmony") }),
+          /* @__PURE__ */ jsxs(Select, { value: harmony, onValueChange: (value) => {
+            if (value === "analogous" || value === "triadic" || value === "split") {
+              setHarmony(value);
+              setSupporting({});
+              setSupportingDrafts({});
+              setFeedback("");
+            }
+          }, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-harmony`, "aria-label": t("design_system.colorStudio.harmony"), "aria-describedby": `${id}-harmony-description`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: ["analogous", "triadic", "split"].map((mode) => /* @__PURE__ */ jsx(SelectItem, { value: mode, children: t(`design_system.colorStudio.harmony.${mode}`) }, mode)) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { id: `${id}-harmony-description`, className: "text-xs leading-relaxed text-muted-foreground", children: t(`design_system.colorStudio.harmonyDescription.${harmony}`) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-neutral`, children: t("design_system.colorStudio.neutral") }),
+          /* @__PURE__ */ jsxs(Select, { value: neutral, onValueChange: (value) => {
+            if (value === "neutral" || value === "warm" || value === "cool") {
+              setNeutral(value);
+              setFeedback("");
+            }
+          }, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-neutral`, "aria-label": t("design_system.colorStudio.neutral"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: ["neutral", "warm", "cool"].map((tone) => /* @__PURE__ */ jsx(SelectItem, { value: tone, children: t(`design_system.colorStudio.neutral.${tone}`) }, tone)) })
+          ] })
+        ] }),
+        THEMES.map((theme) => /* @__PURE__ */ jsx(ShadeSelect, { label: t(`design_system.colorStudio.${theme}Action`), scale: studio.scale, value: studio[theme].actionStep, onChange: (shade) => {
+          setActionShades((previous) => ({ ...previous, [theme]: shade }));
+          setFeedback("");
+        } }, theme))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 border-t border-border pt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-2xl space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: t("design_system.colorStudio.harmonyHint") }),
+          /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs leading-relaxed text-muted-foreground", children: t(`design_system.colorStudio.${hasManualColors ? "harmonyManual" : "harmonyAutomatic"}`) })
+        ] }),
+        hasManualColors ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => {
+          setSupporting({});
+          setSupportingDrafts({});
+          setFeedback(t("design_system.colorStudio.harmonyRestored"));
+        }, children: [
+          /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": true }),
+          t("design_system.colorStudio.auto")
+        ] }) : null
+      ] }),
+      invalid ? /* @__PURE__ */ jsx("p", { id: `${id}-error`, role: "alert", className: "text-sm text-status-error-text", children: t("design_system.colorPreview.invalid") }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: PRESETS.map((preset) => /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => chooseColor(preset), "aria-pressed": color === preset, children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-4 shrink-0 rounded-full border border-border", style: { backgroundColor: preset } }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: preset }),
+        color === preset ? /* @__PURE__ */ jsx(Check, { className: "size-3", "aria-hidden": true }) : null
+      ] }, preset)) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: t("design_system.colorStudio.scale") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.scaleHint") })
+        ] }),
+        [
+          { role: "primary", scale: studio.scale, seed: studio.seeds.primary },
+          { role: "secondary", scale: studio.secondaryScale, seed: studio.seeds.secondary },
+          { role: "tertiary", scale: studio.tertiaryScale, seed: studio.seeds.tertiary }
+        ].map(({ role, scale, seed }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: t(`design_system.colorStudio.${role}`) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-6 xl:grid-cols-11", children: scale.map((stop) => /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-24 min-w-0 flex-col items-start justify-end gap-1 rounded-lg px-2 py-3 text-left", style: { backgroundColor: stop.hex, color: contrastRatio(stop.hex, "#FFFFFF") >= contrastRatio(stop.hex, "#000000") ? "#FFFFFF" : "#000000" }, "aria-label": `${t("design_system.colorStudio.copyColor")} ${t(`design_system.colorStudio.${role}`)} ${stop.step} ${stop.hex}`, onClick: () => copy(stop.hex, `${t("design_system.colorStudio.copiedColor")}: ${stop.hex}`), children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between gap-1 text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: stop.step }),
+              stop.hex === seed ? /* @__PURE__ */ jsxs("span", { title: t("design_system.colorStudio.base"), children: [
+                /* @__PURE__ */ jsx(Paintbrush, { className: "size-3", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("design_system.colorStudio.base") })
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-normal", children: stop.hex })
+          ] }, stop.step)) })
+        ] }, role))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-4", "aria-labelledby": `${id}-preview-title`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { id: `${id}-preview-title`, className: "text-lg font-medium", children: t("design_system.colorStudio.preview") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.previewHint") })
+        ] }),
+        /* @__PURE__ */ jsxs(SegmentedControl, { value: view, onValueChange: (value) => {
+          if (value === "light" || value === "dark" || value === "compare") setView(value);
+        }, "aria-label": t("design_system.colorPreview.theme"), children: [
+          /* @__PURE__ */ jsx(SegmentedControlItem, { value: "light", children: t("design_system.colorPreview.light") }),
+          /* @__PURE__ */ jsx(SegmentedControlItem, { value: "dark", children: t("design_system.colorPreview.dark") }),
+          /* @__PURE__ */ jsx(SegmentedControlItem, { value: "compare", children: t("design_system.colorStudio.compare") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: view === "compare" ? "grid min-w-0 gap-5 xl:grid-cols-2" : "min-w-0", children: THEMES.filter((theme) => view === "compare" || theme === view).map((theme) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [
+          theme === "light" ? /* @__PURE__ */ jsx(Sun, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(Moon, { className: "size-4", "aria-hidden": true }),
+          t(`design_system.colorPreview.${theme}`)
+        ] }),
+        /* @__PURE__ */ jsx(ColorStudioCompositions, { theme, tokens: { ...hostTokens?.[theme], ...studio[theme].tokens } }),
+        /* @__PURE__ */ jsx(ColorStudioSpecimen, { logo, theme, tokens: { ...hostTokens?.[theme], ...studio[theme].tokens } }, `${theme}-${resetVersion}`)
+      ] }, theme)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-4", "aria-labelledby": `${id}-roles-title`, children: [
+      /* @__PURE__ */ jsx("h3", { id: `${id}-roles-title`, className: "text-lg font-medium", children: t("design_system.colorStudio.roles") }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-5 sm:grid-cols-2 xl:grid-cols-4", children: Object.keys(ROLE_ICONS).map((role) => {
+        const Icon = ROLE_ICONS[role];
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
+          /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`design_system.colorStudio.roles.${role}`) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t(`design_system.colorStudio.roles.${role}Hint`) })
+        ] }, role);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-4", "aria-labelledby": `${id}-contrast-title`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { id: `${id}-contrast-title`, className: "text-lg font-medium", children: t("design_system.colorStudio.contrast") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.contrastHint") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 rounded-xl border border-border p-5 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t("design_system.colorStudio.matrix") }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.matrixHint") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsx(ShadeSelect, { label: t("design_system.colorStudio.foreground"), scale: studio.scale, value: matrixForeground, onChange: setMatrixForeground }),
+            /* @__PURE__ */ jsx(ShadeSelect, { label: t("design_system.colorStudio.background"), scale: studio.scale, value: matrixBackground, onChange: setMatrixBackground })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 rounded-lg p-6", style: { backgroundColor: matrixSurface, color: matrixText }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-4xl font-medium", children: "Aa" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("design_system.colorStudio.pair.body") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md bg-card px-3 py-2 text-right text-card-foreground", children: [
+            /* @__PURE__ */ jsxs("p", { className: "font-mono text-xl font-semibold", children: [
+              matrixRatio.toFixed(2),
+              ":1"
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs", children: t(`design_system.colorStudio.${matrixRatio >= 4.5 ? "pass" : "fail"}`) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl border border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 bg-muted px-4 py-3 text-xs font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: t("design_system.colorStudio.pair") }),
+          THEMES.map((theme) => /* @__PURE__ */ jsx("span", { children: t(`design_system.colorPreview.${theme}`) }, theme))
+        ] }),
+        /* @__PURE__ */ jsx("dl", { className: "divide-y divide-border", children: studio.light.pairs.map((pair) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("dt", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t(`design_system.colorStudio.pair.${pair.id}`) }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              t("design_system.colorStudio.minimum"),
+              ": ",
+              pair.minimum,
+              ":1"
+            ] })
+          ] }),
+          THEMES.map((theme) => {
+            const item = studio[theme].pairs.find((candidate) => candidate.id === pair.id);
+            const passing = item.ratio >= item.minimum;
+            return /* @__PURE__ */ jsxs("dd", { className: "flex flex-wrap items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex size-10 shrink-0 items-center justify-center rounded-md border border-border font-semibold", style: { backgroundColor: item.background, color: item.foreground }, children: "Aa" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs("p", { className: "font-mono text-sm", children: [
+                  item.ratio.toFixed(2),
+                  ":1"
+                ] }),
+                /* @__PURE__ */ jsx(Badge, { variant: passing ? "success" : "error", children: t(`design_system.colorStudio.${passing ? "pass" : "fail"}`) }),
+                /* @__PURE__ */ jsxs("p", { className: "font-mono text-xs text-muted-foreground", children: [
+                  item.foreground,
+                  /* @__PURE__ */ jsx("br", {}),
+                  item.background
+                ] })
+              ] })
+            ] }, theme);
+          })
+        ] }, pair.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-4 border-t border-border pt-6", "aria-labelledby": `${id}-export-title`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { id: `${id}-export-title`, className: "text-lg font-medium", children: t("design_system.colorStudio.export") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.exportHint") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["css", "json"].map((format) => /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", onClick: () => copy(exportColorStudio(studio, format), t("design_system.colorPreview.copied")), children: [
+          /* @__PURE__ */ jsx(Copy, { "aria-hidden": true }),
+          t(`design_system.colorStudio.${format === "css" ? "copyCss" : "copyJson"}`)
+        ] }, format)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-1", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t("design_system.colorStudio.algorithm") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.algorithmHint") })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "p-4 text-sm font-medium", children: t("design_system.colorStudio.showTokens") }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-80 overflow-auto border-t border-border bg-muted p-4 text-xs leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: exportColorStudio(studio, "css") }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "sticky bottom-4 z-10 w-fit rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground empty:hidden", children: feedback })
+  ] });
+}
+export {
+  ColorPlayground
+};
+//# sourceMappingURL=ColorPlayground.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/ColorPlayground.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { ArrowLeft, ArrowRight, GripVertical, Check, Copy, RotateCcw, Sun, Moon, Paintbrush, MousePointer2, Layers, CircleCheck } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\nimport { readThemeTokens, type ThemeTokens } from './themeTokens'\nimport { contrastRatio, normalizeHex } from './colorPreview'\nimport { createColorStudio, exportColorStudio, type ColorStudio, type ColorStop, type Harmony, type NeutralTone, type Shade } from './colorStudio'\nimport { ColorStudioSpecimen } from './ColorStudioSpecimen'\nimport { ColorStudioCompositions } from './ColorStudioCompositions'\n\nconst INITIAL_COLOR = '#F4700D'\nconst PRESETS = ['#BC9AFF', INITIAL_COLOR, '#2563EB', '#0F766E', '#BE185D']\nconst THEMES = ['light', 'dark'] as const\nconst ROLE_ICONS = { action: Paintbrush, selection: MousePointer2, surface: Layers, status: CircleCheck }\n\nfunction ShadeSelect({ label, scale, value, onChange }: { label: string; scale: ColorStop[]; value: Shade; onChange: (shade: Shade) => void }) {\n  const id = React.useId()\n  return <div className=\"min-w-0 space-y-2\">\n    <Label htmlFor={id}>{label}</Label>\n    <Select value={String(value)} onValueChange={next => {\n      const stop = scale.find(item => String(item.step) === next)\n      if (stop) onChange(stop.step)\n    }}>\n      <SelectTrigger id={id} aria-label={label}><SelectValue /></SelectTrigger>\n      <SelectContent>{scale.map(stop => <SelectItem key={stop.step} value={String(stop.step)}>\n        <span className=\"inline-flex items-center gap-2\"><span aria-hidden className=\"size-4 shrink-0 rounded-sm border border-border\" style={{ backgroundColor: stop.hex }} /><span className=\"font-mono text-xs\">{stop.step} \u00B7 {stop.hex}</span></span>\n      </SelectItem>)}</SelectContent>\n    </Select>\n  </div>\n}\n\nconst COLOR_ROLES = ['primary', 'secondary', 'tertiary'] as const\ntype ColorRole = typeof COLOR_ROLES[number]\n\nfunction ColorRoleSwap({ role, disabled, onSwap, onDragStart, onDragEnd }: {\n  role: ColorRole\n  disabled: boolean\n  onSwap: (first: ColorRole, second: ColorRole) => void\n  onDragStart: (event: React.DragEvent) => void\n  onDragEnd: () => void\n}) {\n  const t = useT()\n  const index = COLOR_ROLES.indexOf(role)\n  return <div className=\"flex items-center gap-1\">\n    <span draggable={!disabled} onDragStart={onDragStart} onDragEnd={onDragEnd} title={t('design_system.colorStudio.dragColor')} className=\"inline-flex size-8 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing\" aria-hidden>\n      <GripVertical className=\"size-4\" />\n    </span>\n    {(['left', 'right'] as const).map(direction => {\n      const target = COLOR_ROLES[index + (direction === 'left' ? -1 : 1)]\n      const Icon = direction === 'left' ? ArrowLeft : ArrowRight\n      return <Button key={direction} type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled || !target} aria-label={`${t(`design_system.colorStudio.move${direction === 'left' ? 'Left' : 'Right'}`)}: ${t(`design_system.colorStudio.${role}`)}`} className=\"shrink-0 text-muted-foreground\" onClick={() => { if (target) onSwap(role, target) }}>\n        <Icon aria-hidden className=\"size-4\" />\n      </Button>\n    })}\n  </div>\n}\n\nexport function ColorPlayground({ initialSeeds, initialActionShades, initialView = 'compare', logo, onStudioChange }: {\n  initialSeeds?: ColorStudio['seeds']\n  initialActionShades?: { light?: Shade; dark?: Shade }\n  initialView?: 'light' | 'dark' | 'compare'\n  logo?: string | null\n  onStudioChange?: (studio: ColorStudio, valid: boolean) => void\n} = {}) {\n  const t = useT()\n  const id = React.useId()\n  const [color, setColor] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR)\n  const [draft, setDraft] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR)\n  const [harmony, setHarmony] = React.useState<Harmony>('triadic')\n  const [supporting, setSupporting] = React.useState<{ secondary?: string; tertiary?: string }>(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {})\n  const [supportingDrafts, setSupportingDrafts] = React.useState<{ secondary?: string; tertiary?: string }>(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {})\n  const [neutral, setNeutral] = React.useState<NeutralTone>('neutral')\n  const [view, setView] = React.useState<'light' | 'dark' | 'compare'>(initialView)\n  const [actionShades, setActionShades] = React.useState<{ light?: Shade; dark?: Shade }>(initialActionShades ?? {})\n  const [hostTokens, setHostTokens] = React.useState<ThemeTokens | null>(null)\n  const [matrixForeground, setMatrixForeground] = React.useState<Shade>(900)\n  const [matrixBackground, setMatrixBackground] = React.useState<Shade>(50)\n  const [draggedRole, setDraggedRole] = React.useState<ColorRole | null>(null)\n  const [dropRole, setDropRole] = React.useState<ColorRole | null>(null)\n  const [feedback, setFeedback] = React.useState('')\n  const [resetVersion, setResetVersion] = React.useState(0)\n  const invalid = !normalizeHex(draft)\n  const hasManualColors = Object.keys(supportingDrafts).length > 0\n  const studio = React.useMemo(() => createColorStudio(color, neutral, actionShades, { harmony, ...supporting }), [color, neutral, actionShades, harmony, supporting])\n\n  React.useEffect(() => {\n    onStudioChange?.(studio, !invalid && Object.values(supportingDrafts).every(value => Boolean(normalizeHex(value))))\n  }, [studio, invalid, supportingDrafts, onStudioChange])\n\n  const matrixText = studio.scale.find(stop => stop.step === matrixForeground)!.hex\n  const matrixSurface = studio.scale.find(stop => stop.step === matrixBackground)!.hex\n  const matrixRatio = contrastRatio(matrixText, matrixSurface)\n\n  React.useEffect(() => { setHostTokens(readThemeTokens(document.styleSheets)) }, [])\n\n  function chooseColor(value: string) {\n    setDraft(value)\n    const normalized = normalizeHex(value)\n    if (normalized) setColor(normalized)\n    setFeedback('')\n  }\n\n  function swapColors(first: keyof ColorStudio['seeds'], second: keyof ColorStudio['seeds']) {\n    if (invalid || Object.values(supportingDrafts).some(value => !normalizeHex(value))) return\n    const next = { ...studio.seeds, [first]: studio.seeds[second], [second]: studio.seeds[first] }\n    setColor(next.primary)\n    setDraft(next.primary)\n    setSupporting({ secondary: next.secondary, tertiary: next.tertiary })\n    setSupportingDrafts({ secondary: next.secondary, tertiary: next.tertiary })\n    if (first === 'primary' || second === 'primary') setActionShades({})\n    setFeedback(t('design_system.colorStudio.swapped'))\n  }\n\n  function reset() {\n    chooseColor(INITIAL_COLOR)\n    setNeutral('neutral')\n    setHarmony('triadic')\n    setSupporting({})\n    setSupportingDrafts({})\n    setView(initialView)\n    setActionShades({})\n    setMatrixForeground(900)\n    setMatrixBackground(50)\n    setResetVersion(previous => previous + 1)\n  }\n\n  async function copy(value: string, message: string) {\n    try {\n      await navigator.clipboard.writeText(value)\n      setFeedback(message)\n    } catch { setFeedback(t('design_system.colorPreview.copyFailed')) }\n  }\n\n  const swapDisabled = invalid || Object.values(supportingDrafts).some(value => !normalizeHex(value))\n  function dragStart(role: ColorRole, event: React.DragEvent) {\n    if (swapDisabled) { event.preventDefault(); return }\n    event.dataTransfer.effectAllowed = 'move'\n    event.dataTransfer.setData('text/plain', role)\n    setDraggedRole(role)\n  }\n  function dragEnd() { setDraggedRole(null); setDropRole(null) }\n  function dropProps(role: ColorRole) {\n    return {\n      'data-color-role': role,\n      className: `space-y-2 rounded-lg transition-shadow ${dropRole === role ? 'ring-2 ring-ring' : ''}`,\n      onDragOver: (event: React.DragEvent) => {\n        if (!draggedRole || draggedRole === role || swapDisabled) return\n        event.preventDefault()\n        event.dataTransfer.dropEffect = 'move'\n        setDropRole(role)\n      },\n      onDragLeave: (event: React.DragEvent<HTMLDivElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropRole(null)\n      },\n      onDrop: (event: React.DragEvent) => {\n        event.preventDefault()\n        if (draggedRole && draggedRole !== role && !swapDisabled) swapColors(draggedRole, role)\n        dragEnd()\n      },\n    }\n  }\n\n  return <section className=\"space-y-8\" aria-labelledby={`${id}-title`} data-example=\"color-playground\">\n    <header className=\"flex flex-wrap items-start justify-between gap-4\">\n      <div className=\"max-w-2xl space-y-2\">\n        <h2 id={`${id}-title`} className=\"text-2xl font-medium tracking-tight\">{t('design_system.colorStudio.title')}</h2>\n        <p className=\"text-sm leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.description')}</p>\n      </div>\n      <Button type=\"button\" variant=\"ghost\" onClick={reset}><RotateCcw aria-hidden />{t('design_system.colorPreview.reset')}</Button>\n    </header>\n\n    <div className=\"space-y-6 rounded-xl border border-border bg-card p-5 sm:p-6\">\n      <div className=\"grid gap-5 sm:grid-cols-3\">\n        <div {...dropProps('primary')}>\n          <div className=\"flex items-center justify-between gap-2\">\n            <Label htmlFor={`${id}-hex`}>{t('design_system.colorStudio.primary')}</Label>\n            <ColorRoleSwap role=\"primary\" disabled={swapDisabled} onSwap={swapColors} onDragStart={event => dragStart('primary', event)} onDragEnd={dragEnd} />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Input type=\"color\" value={color} aria-label={t('design_system.colorPreview.color')} onChange={event => chooseColor(event.target.value)} className=\"w-12 shrink-0 p-1\" inputClassName=\"h-full w-full cursor-pointer p-0\" />\n            <Input id={`${id}-hex`} aria-label={t('design_system.colorPreview.hex')} value={draft} onChange={event => chooseColor(event.target.value)} onBlur={() => { const value = normalizeHex(draft); if (value) setDraft(value) }} inputClassName=\"font-mono\" aria-invalid={invalid} aria-describedby={invalid ? `${id}-error` : undefined} spellCheck={false} maxLength={7} />\n          </div>\n        </div>\n        {(['secondary', 'tertiary'] as const).map(role => {\n          const value = supportingDrafts[role] ?? studio.seeds[role]\n          const valid = Boolean(normalizeHex(value))\n          const change = (next: string) => {\n            setSupportingDrafts(previous => ({ ...previous, [role]: next }))\n            const normalized = normalizeHex(next)\n            if (normalized) setSupporting(previous => ({ ...previous, [role]: normalized }))\n            setFeedback('')\n          }\n          return <div key={role} {...dropProps(role)}>\n            <div className=\"flex items-center justify-between gap-2\">\n              <Label htmlFor={`${id}-${role}`}>{t(`design_system.colorStudio.${role}`)}</Label>\n              <ColorRoleSwap role={role} disabled={swapDisabled} onSwap={swapColors} onDragStart={event => dragStart(role, event)} onDragEnd={dragEnd} />\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Input type=\"color\" value={studio.seeds[role]} aria-label={t(`design_system.colorStudio.${role}`)} onChange={event => change(event.target.value)} className=\"w-12 shrink-0 p-1\" inputClassName=\"h-full w-full cursor-pointer p-0\" />\n              <Input id={`${id}-${role}`} value={value} aria-label={`${t(`design_system.colorStudio.${role}`)} HEX`} onChange={event => change(event.target.value)} inputClassName=\"font-mono\" aria-invalid={!valid} aria-describedby={!valid ? `${id}-${role}-error` : undefined} maxLength={7} spellCheck={false} />\n            </div>\n            {!valid ? <p id={`${id}-${role}-error`} role=\"alert\" className=\"text-xs text-status-error-text\">{t(`design_system.colorStudio.${role}Invalid`)}</p> : null}\n          </div>\n        })}\n      </div>\n      <div className=\"grid gap-5 sm:grid-cols-2 xl:grid-cols-4\">\n        <div className=\"space-y-2\">\n          <Label htmlFor={`${id}-harmony`}>{t('design_system.colorStudio.harmony')}</Label>\n          <Select value={harmony} onValueChange={value => { if (value === 'analogous' || value === 'triadic' || value === 'split') { setHarmony(value); setSupporting({}); setSupportingDrafts({}); setFeedback('') } }}>\n            <SelectTrigger id={`${id}-harmony`} aria-label={t('design_system.colorStudio.harmony')} aria-describedby={`${id}-harmony-description`}><SelectValue /></SelectTrigger>\n            <SelectContent>{(['analogous', 'triadic', 'split'] as const).map(mode => <SelectItem key={mode} value={mode}>{t(`design_system.colorStudio.harmony.${mode}`)}</SelectItem>)}</SelectContent>\n          </Select>\n          <p id={`${id}-harmony-description`} className=\"text-xs leading-relaxed text-muted-foreground\">{t(`design_system.colorStudio.harmonyDescription.${harmony}`)}</p>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor={`${id}-neutral`}>{t('design_system.colorStudio.neutral')}</Label>\n          <Select value={neutral} onValueChange={value => { if (value === 'neutral' || value === 'warm' || value === 'cool') { setNeutral(value); setFeedback('') } }}>\n            <SelectTrigger id={`${id}-neutral`} aria-label={t('design_system.colorStudio.neutral')}><SelectValue /></SelectTrigger>\n            <SelectContent>{(['neutral', 'warm', 'cool'] as const).map(tone => <SelectItem key={tone} value={tone}>{t(`design_system.colorStudio.neutral.${tone}`)}</SelectItem>)}</SelectContent>\n          </Select>\n        </div>\n        {THEMES.map(theme => <ShadeSelect key={theme} label={t(`design_system.colorStudio.${theme}Action`)} scale={studio.scale} value={studio[theme].actionStep} onChange={shade => { setActionShades(previous => ({ ...previous, [theme]: shade })); setFeedback('') }} />)}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-between gap-4 border-t border-border pt-4\">\n        <div className=\"max-w-2xl space-y-2\">\n          <p className=\"text-sm leading-relaxed\">{t('design_system.colorStudio.harmonyHint')}</p>\n          <p role=\"status\" className=\"text-xs leading-relaxed text-muted-foreground\">{t(`design_system.colorStudio.${hasManualColors ? 'harmonyManual' : 'harmonyAutomatic'}`)}</p>\n        </div>\n        {hasManualColors ? <Button type=\"button\" size=\"sm\" variant=\"secondary\" onClick={() => { setSupporting({}); setSupportingDrafts({}); setFeedback(t('design_system.colorStudio.harmonyRestored')) }}><RotateCcw aria-hidden />{t('design_system.colorStudio.auto')}</Button> : null}\n      </div>\n      {invalid ? <p id={`${id}-error`} role=\"alert\" className=\"text-sm text-status-error-text\">{t('design_system.colorPreview.invalid')}</p> : null}\n      <div className=\"flex flex-wrap gap-2\">{PRESETS.map(preset => <Button type=\"button\" key={preset} variant=\"ghost\" size=\"sm\" onClick={() => chooseColor(preset)} aria-pressed={color === preset}>\n        <span aria-hidden className=\"size-4 shrink-0 rounded-full border border-border\" style={{ backgroundColor: preset }} /><span className=\"font-mono text-xs\">{preset}</span>{color === preset ? <Check className=\"size-3\" aria-hidden /> : null}\n      </Button>)}</div>\n      <div className=\"space-y-3 border-t border-border pt-5\">\n        <div className=\"space-y-1\"><h3 className=\"text-sm font-medium\">{t('design_system.colorStudio.scale')}</h3><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.scaleHint')}</p></div>\n        {([\n          { role: 'primary', scale: studio.scale, seed: studio.seeds.primary },\n          { role: 'secondary', scale: studio.secondaryScale, seed: studio.seeds.secondary },\n          { role: 'tertiary', scale: studio.tertiaryScale, seed: studio.seeds.tertiary },\n        ] as const).map(({ role, scale, seed }) => <div key={role} className=\"space-y-2\">\n          <h4 className=\"text-xs font-medium text-muted-foreground\">{t(`design_system.colorStudio.${role}`)}</h4>\n          <div className=\"grid grid-cols-3 gap-1 sm:grid-cols-6 xl:grid-cols-11\">\n            {scale.map(stop => <Button type=\"button\" key={stop.step} variant=\"ghost\" className=\"h-24 min-w-0 flex-col items-start justify-end gap-1 rounded-lg px-2 py-3 text-left\" style={{ backgroundColor: stop.hex, color: contrastRatio(stop.hex, '#FFFFFF') >= contrastRatio(stop.hex, '#000000') ? '#FFFFFF' : '#000000' }} aria-label={`${t('design_system.colorStudio.copyColor')} ${t(`design_system.colorStudio.${role}`)} ${stop.step} ${stop.hex}`} onClick={() => copy(stop.hex, `${t('design_system.colorStudio.copiedColor')}: ${stop.hex}`)}>\n              <span className=\"flex w-full items-center justify-between gap-1 text-xs\"><span className=\"font-semibold\">{stop.step}</span>{stop.hex === seed ? <span title={t('design_system.colorStudio.base')}><Paintbrush className=\"size-3\" aria-hidden /><span className=\"sr-only\">{t('design_system.colorStudio.base')}</span></span> : null}</span>\n              <code className=\"text-xs font-normal\">{stop.hex}</code>\n            </Button>)}\n          </div>\n        </div>)}\n      </div>\n    </div>\n\n    <section className=\"space-y-4\" aria-labelledby={`${id}-preview-title`}>\n      <div className=\"flex flex-wrap items-end justify-between gap-4\">\n        <div className=\"max-w-xl space-y-1\"><h3 id={`${id}-preview-title`} className=\"text-lg font-medium\">{t('design_system.colorStudio.preview')}</h3><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.previewHint')}</p></div>\n        <SegmentedControl value={view} onValueChange={value => { if (value === 'light' || value === 'dark' || value === 'compare') setView(value) }} aria-label={t('design_system.colorPreview.theme')}>\n          <SegmentedControlItem value=\"light\">{t('design_system.colorPreview.light')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"dark\">{t('design_system.colorPreview.dark')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"compare\">{t('design_system.colorStudio.compare')}</SegmentedControlItem>\n        </SegmentedControl>\n      </div>\n      <div className={view === 'compare' ? 'grid min-w-0 gap-5 xl:grid-cols-2' : 'min-w-0'}>\n        {THEMES.filter(theme => view === 'compare' || theme === view).map(theme => <div key={theme} className=\"min-w-0 space-y-3\">\n          <p className=\"flex items-center gap-2 text-xs font-medium text-muted-foreground\">{theme === 'light' ? <Sun className=\"size-4\" aria-hidden /> : <Moon className=\"size-4\" aria-hidden />}{t(`design_system.colorPreview.${theme}`)}</p>\n          <ColorStudioCompositions theme={theme} tokens={{ ...hostTokens?.[theme], ...studio[theme].tokens }} />\n          <ColorStudioSpecimen logo={logo} key={`${theme}-${resetVersion}`} theme={theme} tokens={{ ...hostTokens?.[theme], ...studio[theme].tokens }} />\n        </div>)}\n      </div>\n    </section>\n\n    <section className=\"space-y-4\" aria-labelledby={`${id}-roles-title`}>\n      <h3 id={`${id}-roles-title`} className=\"text-lg font-medium\">{t('design_system.colorStudio.roles')}</h3>\n      <div className=\"grid gap-5 sm:grid-cols-2 xl:grid-cols-4\">{(Object.keys(ROLE_ICONS) as (keyof typeof ROLE_ICONS)[]).map(role => {\n        const Icon = ROLE_ICONS[role]\n        return <div key={role} className=\"space-y-3 border-t border-border pt-4\"><Icon aria-hidden className=\"size-5 text-muted-foreground\" /><h4 className=\"text-sm font-medium\">{t(`design_system.colorStudio.roles.${role}`)}</h4><p className=\"text-xs leading-relaxed text-muted-foreground\">{t(`design_system.colorStudio.roles.${role}Hint`)}</p></div>\n      })}</div>\n    </section>\n\n    <section className=\"space-y-4\" aria-labelledby={`${id}-contrast-title`}>\n      <div className=\"max-w-3xl space-y-1\"><h3 id={`${id}-contrast-title`} className=\"text-lg font-medium\">{t('design_system.colorStudio.contrast')}</h3><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.contrastHint')}</p></div>\n      <div className=\"grid gap-5 rounded-xl border border-border p-5 lg:grid-cols-2\">\n        <div className=\"space-y-4\">\n          <div className=\"space-y-1\"><h4 className=\"text-sm font-medium\">{t('design_system.colorStudio.matrix')}</h4><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.matrixHint')}</p></div>\n          <div className=\"grid grid-cols-2 gap-3\"><ShadeSelect label={t('design_system.colorStudio.foreground')} scale={studio.scale} value={matrixForeground} onChange={setMatrixForeground} /><ShadeSelect label={t('design_system.colorStudio.background')} scale={studio.scale} value={matrixBackground} onChange={setMatrixBackground} /></div>\n        </div>\n        <div className=\"flex items-center justify-between gap-4 rounded-lg p-6\" style={{ backgroundColor: matrixSurface, color: matrixText }}>\n          <div className=\"space-y-2\"><span className=\"text-4xl font-medium\">Aa</span><p className=\"text-sm\">{t('design_system.colorStudio.pair.body')}</p></div>\n          <div className=\"space-y-2 rounded-md bg-card px-3 py-2 text-right text-card-foreground\"><p className=\"font-mono text-xl font-semibold\">{matrixRatio.toFixed(2)}:1</p><p className=\"text-xs\">{t(`design_system.colorStudio.${matrixRatio >= 4.5 ? 'pass' : 'fail'}`)}</p></div>\n        </div>\n      </div>\n      <div className=\"overflow-hidden rounded-xl border border-border\">\n        <div className=\"grid grid-cols-3 gap-3 bg-muted px-4 py-3 text-xs font-medium text-muted-foreground\"><span>{t('design_system.colorStudio.pair')}</span>{THEMES.map(theme => <span key={theme}>{t(`design_system.colorPreview.${theme}`)}</span>)}</div>\n        <dl className=\"divide-y divide-border\">{studio.light.pairs.map(pair => <div key={pair.id} className=\"grid grid-cols-3 items-center gap-3 px-4 py-3\">\n          <dt className=\"space-y-1\"><p className=\"text-sm font-medium\">{t(`design_system.colorStudio.pair.${pair.id}`)}</p><p className=\"text-xs text-muted-foreground\">{t('design_system.colorStudio.minimum')}: {pair.minimum}:1</p></dt>\n          {THEMES.map(theme => {\n            const item = studio[theme].pairs.find(candidate => candidate.id === pair.id)!\n            const passing = item.ratio >= item.minimum\n            return <dd key={theme} className=\"flex flex-wrap items-center gap-3\">\n              <span aria-hidden className=\"inline-flex size-10 shrink-0 items-center justify-center rounded-md border border-border font-semibold\" style={{ backgroundColor: item.background, color: item.foreground }}>Aa</span>\n              <div className=\"space-y-1\"><p className=\"font-mono text-sm\">{item.ratio.toFixed(2)}:1</p><Badge variant={passing ? 'success' : 'error'}>{t(`design_system.colorStudio.${passing ? 'pass' : 'fail'}`)}</Badge><p className=\"font-mono text-xs text-muted-foreground\">{item.foreground}<br />{item.background}</p></div>\n            </dd>\n          })}\n        </div>)}</dl>\n      </div>\n    </section>\n\n    <section className=\"space-y-4 border-t border-border pt-6\" aria-labelledby={`${id}-export-title`}>\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <div className=\"max-w-xl space-y-1\"><h3 id={`${id}-export-title`} className=\"text-lg font-medium\">{t('design_system.colorStudio.export')}</h3><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.exportHint')}</p></div>\n        <div className=\"flex flex-wrap gap-2\">{(['css', 'json'] as const).map(format => <Button type=\"button\" key={format} variant=\"secondary\" onClick={() => copy(exportColorStudio(studio, format), t('design_system.colorPreview.copied'))}><Copy aria-hidden />{t(`design_system.colorStudio.${format === 'css' ? 'copyCss' : 'copyJson'}`)}</Button>)}</div>\n      </div>\n      <div className=\"max-w-3xl space-y-1\"><h4 className=\"text-sm font-medium\">{t('design_system.colorStudio.algorithm')}</h4><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.algorithmHint')}</p></div>\n      <section className=\"rounded-lg border border-border\"><h3 className=\"p-4 text-sm font-medium\">{t('design_system.colorStudio.showTokens')}</h3><pre className=\"max-h-80 overflow-auto border-t border-border bg-muted p-4 text-xs leading-relaxed\"><code>{exportColorStudio(studio, 'css')}</code></pre></section>\n    </section>\n    <p role=\"status\" aria-live=\"polite\" className=\"sticky bottom-4 z-10 w-fit rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground empty:hidden\">{feedback}</p>\n  </section>\n}\n"],
+  "mappings": "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",
+  "names": []
+}