@arbidocs/blocks 0.5.63 → 0.5.65

package/dist/chunk-J77BACGX.js

@@ -0,0 +1,575 @@
+"use client";
+import { useState } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/theme/color.ts
+var NUM = String.raw`-?\d*\.?\d+(?:e-?\d+)?`;
+var TRIPLET_RE = new RegExp(String.raw`^(${NUM})(?:deg)?\s+(${NUM})%\s+(${NUM})%$`);
+var HSL_FN_RE = new RegExp(
+  String.raw`^hsla?\(\s*(${NUM})(?:deg)?[\s,]+(${NUM})%[\s,]+(${NUM})%\s*(?:[,/]\s*${NUM}%?\s*)?\)$`,
+  "i"
+);
+var RGB_FN_RE = new RegExp(
+  String.raw`^rgba?\(\s*(${NUM})[\s,]+(${NUM})[\s,]+(${NUM})\s*(?:[,/]\s*${NUM}%?\s*)?\)$`,
+  "i"
+);
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+var fmt = (n) => String(Math.round(n * 10) / 10);
+function rgbToHsl({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    if (max === rn) h = 60 * ((gn - bn) / d % 6);
+    else if (max === gn) h = 60 * ((bn - rn) / d + 2);
+    else h = 60 * ((rn - gn) / d + 4);
+  }
+  if (h < 0) h += 360;
+  return { h, s: s * 100, l: l * 100 };
+}
+function hslToRgb({ h, s, l }) {
+  const sn = clamp(s, 0, 100) / 100;
+  const ln = clamp(l, 0, 100) / 100;
+  const hn = (h % 360 + 360) % 360;
+  const c = (1 - Math.abs(2 * ln - 1)) * sn;
+  const x = c * (1 - Math.abs(hn / 60 % 2 - 1));
+  const m = ln - c / 2;
+  const [r1, g1, b1] = hn < 60 ? [c, x, 0] : hn < 120 ? [x, c, 0] : hn < 180 ? [0, c, x] : hn < 240 ? [0, x, c] : hn < 300 ? [x, 0, c] : [c, 0, x];
+  return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+function parseHex(value) {
+  let hex = value.slice(1);
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.slice(0, 3).split("").map((ch) => ch + ch).join("");
+  } else if (hex.length === 8) {
+    hex = hex.slice(0, 6);
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null;
+  return {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16)
+  };
+}
+function parseColor(value) {
+  const c = value.trim();
+  if (c.startsWith("#")) return parseHex(c);
+  const rgb = RGB_FN_RE.exec(c);
+  if (rgb) return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) };
+  const hsl2 = HSL_FN_RE.exec(c) ?? TRIPLET_RE.exec(c);
+  if (hsl2) return hslToRgb({ h: Number(hsl2[1]), s: Number(hsl2[2]), l: Number(hsl2[3]) });
+  return null;
+}
+function parseHsl(value) {
+  const c = value.trim();
+  const m = TRIPLET_RE.exec(c) ?? HSL_FN_RE.exec(c);
+  if (m) return { h: Number(m[1]), s: Number(m[2]), l: Number(m[3]) };
+  const rgb = parseColor(c);
+  return rgb ? rgbToHsl(rgb) : null;
+}
+var hex2 = (n) => Math.round(clamp(n, 0, 255)).toString(16).padStart(2, "0");
+function rgbToHex({ r, g, b }) {
+  return `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+}
+function hslToHex(hsl2) {
+  return rgbToHex(hslToRgb(hsl2));
+}
+function toHex(value, fallback = "#000000") {
+  const rgb = parseColor(value);
+  return rgb ? rgbToHex(rgb) : fallback;
+}
+function formatHslTriplet({ h, s, l }) {
+  return `${fmt((h % 360 + 360) % 360)} ${fmt(s)}% ${fmt(l)}%`;
+}
+function toHslTriplet(color) {
+  const c = color.trim();
+  if (TRIPLET_RE.test(c)) return c;
+  const hsl2 = parseHsl(c);
+  return hsl2 ? formatHslTriplet(hsl2) : c;
+}
+function toCssColor(value) {
+  const c = value.trim();
+  return TRIPLET_RE.test(c) ? `hsl(${c})` : c;
+}
+var channel = (v) => {
+  const c = v / 255;
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+function relativeLuminance(rgb) {
+  return 0.2126 * channel(rgb.r) + 0.7152 * channel(rgb.g) + 0.0722 * channel(rgb.b);
+}
+function contrastRatio(a, b) {
+  const ra = parseColor(a);
+  const rb = parseColor(b);
+  if (!ra || !rb) return null;
+  const la = relativeLuminance(ra);
+  const lb = relativeLuminance(rb);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+var AA_TEXT = 4.5;
+var AA_UI = 3;
+function ensureContrast(fg, bg, ratio) {
+  const fgHsl = parseHsl(fg);
+  const bgRgb = parseColor(bg);
+  if (!fgHsl || !bgRgb) return fg;
+  const pass = (l) => (contrastRatio(hslToHex({ ...fgHsl, l }), rgbToHex(bgRgb)) ?? 0) >= ratio;
+  if (pass(fgHsl.l)) return hslToHex(fgHsl);
+  const bgDark = relativeLuminance(bgRgb) < 0.18;
+  const directions = bgDark ? [1, -1] : [-1, 1];
+  for (const dir of directions) {
+    const end = dir < 0 ? 0 : 100;
+    if (!pass(end)) continue;
+    let lo = fgHsl.l;
+    let hi = end;
+    for (let i = 0; i < 24; i++) {
+      const mid = (lo + hi) / 2;
+      if (pass(mid)) hi = mid;
+      else lo = mid;
+    }
+    return hslToHex({ ...fgHsl, l: hi });
+  }
+  const black = contrastRatio("#000000", rgbToHex(bgRgb)) ?? 0;
+  const white = contrastRatio("#ffffff", rgbToHex(bgRgb)) ?? 0;
+  return black >= white ? "#000000" : "#ffffff";
+}
+function mix(a, b, amount) {
+  const ra = parseColor(a);
+  const rb = parseColor(b);
+  if (!ra || !rb) return a;
+  const t = clamp(amount, 0, 1);
+  return rgbToHex({
+    r: ra.r + (rb.r - ra.r) * t,
+    g: ra.g + (rb.g - ra.g) * t,
+    b: ra.b + (rb.b - ra.b) * t
+  });
+}
+
+// src/theme/tokens.ts
+var THEME_STYLE_ID = "arbi-theme-vars";
+function themeCssVars(colors) {
+  const vars = {};
+  for (const [key, value] of Object.entries(colors)) {
+    vars[`--${key}`] = toHslTriplet(value);
+    vars[`--color-${key}`] = toCssColor(value);
+  }
+  return vars;
+}
+function themeMetaVars(theme) {
+  return {
+    "--font-display": theme.fonts.display,
+    "--font-sans": theme.fonts.sans,
+    "--radius": `${theme.radius}rem`
+  };
+}
+function renderBlock(selector, vars) {
+  const body = Object.entries(vars).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
+function emitCssVars(theme, dark) {
+  if (typeof document === "undefined") return;
+  let css = renderBlock(":root", { ...themeCssVars(theme.colors), ...themeMetaVars(theme) });
+  if (dark) css += `
+${renderBlock(":root.dark", themeCssVars(dark))}`;
+  let style = document.getElementById(THEME_STYLE_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = THEME_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+}
+function removeCssVars() {
+  if (typeof document === "undefined") return;
+  document.getElementById(THEME_STYLE_ID)?.remove();
+}
+function normalizeOptions(optionsOrRoot) {
+  if (typeof HTMLElement !== "undefined" && optionsOrRoot instanceof HTMLElement) {
+    return { root: optionsOrRoot };
+  }
+  return optionsOrRoot;
+}
+function applyThemeVars(theme, optionsOrRoot = {}) {
+  const { mode = "flat", dark, root = document.documentElement } = normalizeOptions(optionsOrRoot);
+  if (mode === "cssVars") {
+    emitCssVars(theme, dark);
+    return;
+  }
+  for (const [name, value] of Object.entries({
+    ...themeCssVars(theme.colors),
+    ...themeMetaVars(theme)
+  })) {
+    root.style.setProperty(name, value);
+  }
+}
+function applyFontVars(fonts, root = document.documentElement) {
+  root.style.setProperty("--font-display", fonts.display);
+  root.style.setProperty("--font-sans", fonts.sans);
+}
+function clearFontVars(root = document.documentElement) {
+  root.style.removeProperty("--font-display");
+  root.style.removeProperty("--font-sans");
+}
+function clearThemeVars(theme, optionsOrRoot = {}) {
+  const { mode = "flat", root = document.documentElement } = normalizeOptions(optionsOrRoot);
+  if (mode === "cssVars") {
+    removeCssVars();
+    return;
+  }
+  for (const key of Object.keys(theme.colors)) {
+    root.style.removeProperty(`--${key}`);
+    root.style.removeProperty(`--color-${key}`);
+  }
+  root.style.removeProperty("--font-display");
+  root.style.removeProperty("--font-sans");
+  root.style.removeProperty("--radius");
+}
+
+// src/theme/derive.ts
+var P = "primary";
+var A = "accent";
+var W = "warmth";
+var surface = (key, deps = [W]) => ({
+  key,
+  group: "surfaces",
+  deps
+});
+var text = (key, deps = [W]) => ({
+  key,
+  group: "text",
+  deps
+});
+var family = (hue, input) => ["bg", "text", "border", "solid", "text-strong"].map((part) => ({
+  key: `${hue}-${part}`,
+  group: "status",
+  deps: [input]
+}));
+var DERIVED_TOKENS = [
+  // Brand
+  { key: "primary", group: "brand", deps: [P] },
+  { key: "ring", group: "brand", deps: [P, W] },
+  { key: "hero", group: "brand", deps: [P] },
+  { key: "secondary", group: "brand", deps: [A, W] },
+  { key: "theme-cyan", group: "brand", deps: [A] },
+  { key: "theme-cyan-bright", group: "brand", deps: [A, P] },
+  { key: "ai-ink", group: "brand", deps: [A] },
+  { key: "ai-soft", group: "brand", deps: [A] },
+  { key: "ai-accent", group: "brand", deps: [A] },
+  { key: "ai-accent-soft", group: "brand", deps: [A] },
+  // Surfaces
+  surface("background"),
+  surface("card"),
+  surface("popover"),
+  surface("muted"),
+  surface("accent", [P, W]),
+  surface("border"),
+  surface("input"),
+  surface("ai-surface"),
+  { key: "sidebar", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-foreground", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-muted", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-accent", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-accent-foreground", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-border", group: "surfaces", deps: [P, W, "sidebar"] },
+  { key: "sidebar-primary", group: "surfaces", deps: [P, A, "sidebar"] },
+  // Text
+  text("foreground"),
+  text("card-foreground"),
+  text("popover-foreground"),
+  text("muted-foreground"),
+  text("primary-foreground", [P, W]),
+  text("accent-foreground", [P, W]),
+  text("secondary-foreground", [A, W]),
+  text("ai-accent-foreground", [A]),
+  text("destructive-foreground", ["danger"]),
+  // Status
+  { key: "destructive", group: "status", deps: ["danger"] },
+  { key: "success", group: "status", deps: ["success"] },
+  { key: "warning", group: "status", deps: ["warning"] },
+  ...family("red", "danger"),
+  ...family("green", "success"),
+  ...family("yellow", "warning"),
+  // Charts (the step bar's start/finish accent follows the first series)
+  ...[1, 2, 3, 4, 5].map((i) => ({
+    key: `chart-${i}`,
+    group: "charts",
+    deps: [P, A, "charts"]
+  })),
+  { key: "wf-start", group: "charts", deps: [P, A, "charts"] }
+];
+new Map(DERIVED_TOKENS.map((t) => [t.key, t]));
+function keysOfInput(input) {
+  return DERIVED_TOKENS.filter((t) => t.deps.includes(input)).map((t) => t.key);
+}
+var DEFAULT_INPUTS = {
+  primary: "#202b61",
+  accent: "#00adef",
+  danger: "#bf3b3b",
+  success: "#1f8a5b",
+  warning: "#c08a2d"};
+var isWarm = (h) => h >= 15 && h <= 90;
+var isCool = (h) => h >= 180 && h <= 270;
+var clamp2 = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+function warmthOf(colors) {
+  const bg = parseHsl(colors.background ?? "");
+  const tint = parseHsl(colors.muted ?? colors.border ?? colors.card ?? "");
+  const sign = (hsl2) => !hsl2 ? 0 : isWarm(hsl2.h) ? 1 : isCool(hsl2.h) ? -1 : 0;
+  if (bg && bg.l < 99 && bg.s > 3) {
+    return sign(bg) * (0.5 + Math.min(0.5, (100 - bg.l) / 12));
+  }
+  if (!tint) return 0;
+  return sign(tint) * Math.min(0.5, tint.s / 40);
+}
+function inferInputs(colors) {
+  const hex = (key, fallback) => colors[key] && parseColor(colors[key]) ? toHex(colors[key]) : fallback;
+  const saturated = (key) => (parseHsl(colors[key] ?? "")?.s ?? 0) >= 35;
+  const accentKey = ["ai-accent", "ai-ink", "secondary", "theme-cyan"].find(
+    (k) => colors[k] && saturated(k)
+  );
+  const sidebar = parseColor(colors.sidebar ?? "");
+  return {
+    primary: hex("primary", DEFAULT_INPUTS.primary),
+    accent: accentKey ? toHex(colors[accentKey]) : DEFAULT_INPUTS.accent,
+    warmth: Math.round(warmthOf(colors) * 100) / 100,
+    sidebar: sidebar && relativeLuminance(sidebar) < 0.2 ? "brand" : "light",
+    charts: "harmonious",
+    danger: hex("destructive", DEFAULT_INPUTS.danger),
+    success: hex("success", DEFAULT_INPUTS.success),
+    warning: hex("warning", DEFAULT_INPUTS.warning),
+    secondaryRole: colors.secondary && !saturated("secondary") ? "surface" : "accent"
+  };
+}
+var hsl = (h, s, l) => hslToHex({ h, s, l });
+function readableOn(bg, light, dark, ratio = AA_TEXT) {
+  const pick = (contrastRatio(light, bg) ?? 0) >= (contrastRatio(dark, bg) ?? 0) ? light : dark;
+  return ensureContrast(pick, bg, ratio);
+}
+function hueDistance(a, b) {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+}
+function chartHues(p, a, style) {
+  const base = p.s >= 12 ? p.h : a.s >= 12 ? a.h : 220;
+  const second = a.s >= 12 ? a.h : (base + 150) % 360;
+  if (style === "distinct") return [0, 1, 2, 3, 4].map((i) => (base + i * 72) % 360);
+  const chosen = [base, hueDistance(base, second) < 25 ? (base + 150) % 360 : second];
+  const candidates = [180, 60, -60, 120, -120, 30, -30].flatMap((d) => [
+    (base + d + 360) % 360,
+    (chosen[1] + d + 360) % 360
+  ]);
+  while (chosen.length < 5) {
+    let best = candidates[0];
+    let bestScore = -1;
+    for (const c of candidates) {
+      const score = Math.min(...chosen.map((h) => hueDistance(h, c)));
+      if (score > bestScore) {
+        best = c;
+        bestScore = score;
+      }
+    }
+    chosen.push(best);
+  }
+  return chosen;
+}
+function deriveColors(inputs, scheme) {
+  const dark = scheme === "dark";
+  const p = parseHsl(inputs.primary) ?? parseHsl(DEFAULT_INPUTS.primary);
+  const a = parseHsl(inputs.accent) ?? parseHsl(DEFAULT_INPUTS.accent);
+  const w = clamp2(inputs.warmth, -1, 1);
+  const strength = Math.abs(w);
+  const pageTint = Math.max(0, strength - 0.5) * 2;
+  const sh = w > 0 ? 42 : 218;
+  const ss = strength * (w > 0 ? 35 : 25);
+  const out = {};
+  const bgL = dark ? 7 : 100 - 6 * pageTint;
+  const neutralS = dark ? Math.min(ss, 22) : ss;
+  out.background = hsl(sh, neutralS, bgL);
+  out.card = dark ? hsl(sh, neutralS, 9) : mix(out.background, "#ffffff", 0.85);
+  out.popover = dark ? hsl(sh, neutralS, 10) : out.card;
+  out.muted = hsl(sh, neutralS * (dark ? 0.8 : 1), dark ? 14 : bgL - 4 - 1.5 * pageTint);
+  out.border = hsl(sh, neutralS * (dark ? 0.7 : 0.8), dark ? 20 : bgL - 10);
+  out.input = ensureContrast(hsl(sh, neutralS * 0.6, dark ? 42 : 58), out.background, AA_UI);
+  out["ai-surface"] = out.card;
+  const accentS = Math.min(p.s + 10, 62) * (1 - 0.5 * Math.max(0, w));
+  out.accent = dark ? hsl(p.h, Math.min(p.s, 35), 21) : hsl(p.h, accentS, bgL - 5);
+  const primary = dark && p.l < 55 ? hsl(p.h, Math.min(p.s + 20, 80), 70) : toHex(inputs.primary);
+  out.primary = primary;
+  out.ring = ensureContrast(
+    hsl(p.h, Math.min(p.s, 60) * (dark ? 0.9 : 0.8), dark ? 65 : 54),
+    out.background,
+    AA_UI
+  );
+  out.hero = dark ? hsl(p.h, Math.min(p.s, 50), 17) : p.l <= 30 ? toHex(inputs.primary) : hsl(p.h, p.s, 22);
+  const accent = dark && a.l < 45 ? hsl(a.h, a.s, 55) : toHex(inputs.accent);
+  out["ai-soft"] = mix(accent, out.background, dark ? 0.82 : 0.88);
+  out["ai-ink"] = ensureContrast(accent, out["ai-soft"], AA_TEXT);
+  out["ai-accent"] = out["ai-ink"];
+  out["ai-accent-soft"] = out["ai-soft"];
+  out["theme-cyan"] = ensureContrast(accent, out.background, AA_TEXT);
+  out["theme-cyan-bright"] = ensureContrast(hsl(a.h, a.s, Math.max(a.l, 47)), out.hero, AA_TEXT);
+  const ink = hsl(sh, Math.min(10 + ss, 40), 12);
+  const paper = hsl(sh, Math.min(ss, 30), dark ? 93 : 98);
+  out.foreground = ensureContrast(dark ? hsl(sh, 18, 93) : ink, out.background, 7);
+  out["card-foreground"] = out.foreground;
+  out["popover-foreground"] = out.foreground;
+  out["muted-foreground"] = ensureContrast(
+    hsl(sh, Math.min(ss, 15), dark ? 70 : 42),
+    out.muted,
+    AA_TEXT
+  );
+  out["primary-foreground"] = readableOn(primary, paper, dark ? hsl(p.h, 30, 8) : ink);
+  out["accent-foreground"] = dark ? ensureContrast(hsl(p.h, 70, 92), out.accent, AA_TEXT) : ensureContrast(primary, out.accent, AA_TEXT);
+  out["ai-accent-foreground"] = readableOn(out["ai-accent"], "#ffffff", ink);
+  if (inputs.secondaryRole === "surface") {
+    out.secondary = hsl(sh, neutralS, dark ? 18 : bgL - 7);
+    out["secondary-foreground"] = ensureContrast(out.foreground, out.secondary, AA_TEXT);
+  } else {
+    out.secondary = accent;
+    out["secondary-foreground"] = readableOn(accent, paper, ink);
+  }
+  if (inputs.sidebar === "brand") {
+    const panel = hsl(p.h, Math.min(p.s, 45), dark ? 9 : 10);
+    out.sidebar = panel;
+    out["sidebar-accent"] = hsl(p.h, Math.min(p.s, 45), 18);
+    out["sidebar-border"] = hsl(p.h, Math.min(p.s, 40), 20);
+    out["sidebar-foreground"] = ensureContrast(hsl(p.h, 15, 82), panel, AA_TEXT);
+    out["sidebar-muted"] = ensureContrast(hsl(p.h, 10, 60), panel, AA_TEXT);
+    out["sidebar-accent-foreground"] = ensureContrast(paper, out["sidebar-accent"], AA_TEXT);
+    out["sidebar-primary"] = ensureContrast(hsl(a.h, a.s, Math.max(a.l, 50)), panel, AA_UI);
+  } else {
+    out.sidebar = hsl(sh, neutralS, dark ? 10 : bgL - 3);
+    out["sidebar-accent"] = out.accent;
+    out["sidebar-border"] = out.border;
+    out["sidebar-foreground"] = out.foreground;
+    out["sidebar-muted"] = ensureContrast(out["muted-foreground"], out.sidebar, AA_TEXT);
+    out["sidebar-accent-foreground"] = out["accent-foreground"];
+    out["sidebar-primary"] = ensureContrast(primary, out.sidebar, AA_UI);
+  }
+  const status = (hue, color) => {
+    const c = toHex(color);
+    const solid = dark && (parseHsl(c)?.l ?? 50) < 45 ? mix(c, "#ffffff", 0.25) : c;
+    const bg = mix(solid, out.background, dark ? 0.85 : 0.9);
+    out[`${hue}-bg`] = bg;
+    out[`${hue}-border`] = mix(solid, out.background, dark ? 0.65 : 0.72);
+    out[`${hue}-solid`] = solid;
+    out[`${hue}-text`] = ensureContrast(solid, bg, AA_TEXT);
+    out[`${hue}-text-strong`] = ensureContrast(solid, bg, 7);
+    return solid;
+  };
+  const danger = status("red", inputs.danger);
+  out.success = status("green", inputs.success);
+  out.warning = status("yellow", inputs.warning);
+  out.destructive = dark ? hsl(parseHsl(danger).h, 55, 42) : toHex(inputs.danger);
+  out["destructive-foreground"] = readableOn(out.destructive, "#ffffff", ink);
+  const hues = chartHues(p, a, inputs.charts);
+  const lightness = dark ? [62, 58, 68, 54, 72] : [44, 50, 58, 38, 64];
+  hues.forEach((h, i) => {
+    const s = clamp2(i === 0 ? p.s : i === 1 ? a.s : Math.max(p.s, a.s), 55, 80);
+    out[`chart-${i + 1}`] = ensureContrast(hsl(h, s, lightness[i]), out.background, AA_UI);
+  });
+  out["wf-start"] = out["chart-1"];
+  return out;
+}
+var CONTRAST_PAIRS = [
+  { fg: "foreground", bg: "background", min: AA_TEXT, label: "Body text on the page" },
+  { fg: "card-foreground", bg: "card", min: AA_TEXT, label: "Text on cards" },
+  { fg: "popover-foreground", bg: "popover", min: AA_TEXT, label: "Text in menus" },
+  { fg: "muted-foreground", bg: "background", min: AA_TEXT, label: "Secondary text on the page" },
+  { fg: "muted-foreground", bg: "muted", min: AA_TEXT, label: "Secondary text on muted areas" },
+  { fg: "primary-foreground", bg: "primary", min: AA_TEXT, label: "Text on primary buttons" },
+  { fg: "secondary-foreground", bg: "secondary", min: AA_TEXT, label: "Text on secondary fills" },
+  { fg: "accent-foreground", bg: "accent", min: AA_TEXT, label: "Text on hover and selection" },
+  {
+    fg: "destructive-foreground",
+    bg: "destructive",
+    min: AA_TEXT,
+    label: "Text on danger buttons"
+  },
+  { fg: "ring", bg: "background", min: AA_UI, label: "Focus ring on the page" },
+  { fg: "input", bg: "background", min: AA_UI, label: "Field borders on the page" }
+];
+function contrastIssues(resolve, pairs = CONTRAST_PAIRS) {
+  const issues = [];
+  for (const pair of pairs) {
+    const fg = resolve(pair.fg);
+    const bg = resolve(pair.bg);
+    if (!fg || !bg) continue;
+    const ratio = contrastRatio(fg, bg);
+    if (ratio === null || ratio >= pair.min) continue;
+    issues.push({ ...pair, ratio, fix: ensureContrast(fg, bg, pair.min) });
+  }
+  return issues;
+}
+function Tabs({ items, testId }) {
+  const list = items ?? [];
+  const [active, setActive] = useState("0");
+  const activeIndex = Math.min(Number(active), Math.max(list.length - 1, 0));
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value: String(activeIndex), onValueChange: setActive, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "flex flex-wrap gap-1 border-b border-border", children: list.map((t, i) => /* @__PURE__ */ jsx(
+      TabsPrimitive.Trigger,
+      {
+        value: String(i),
+        className: cn(
+          "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+          i === activeIndex ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        "data-testid": testId && `${testId}-tab-${i}`,
+        children: t.label
+      },
+      i
+    )) }),
+    list.map((t, i) => /* @__PURE__ */ jsx(
+      TabsPrimitive.Content,
+      {
+        value: String(i),
+        className: "pt-5 text-sm leading-relaxed text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-testid": i === activeIndex ? testId && `${testId}-panel` : void 0,
+        children: t.content
+      },
+      i
+    ))
+  ] });
+}
+
+// src/theme/previewLabels.ts
+var DEFAULT_THEME_PREVIEW_LABELS = {
+  title: "Preview",
+  subtitle: "How your theme looks on real components",
+  primaryAction: "Save",
+  accentAction: "Ask AI",
+  secondaryAction: "Cancel",
+  outlineAction: "Export",
+  dangerAction: "Delete",
+  fieldLabel: "Search",
+  fieldPlaceholder: "Find a document",
+  cardBody: "Cards hold a title, a short summary and their actions.",
+  tabs: ["Overview", "Activity", "Settings"],
+  tabBody: "The active tab is underlined in the primary colour.",
+  nav: ["Home", "Inbox", "Documents"],
+  steps: ["Intake", "Review", "Sign"],
+  chartLabel: "Documents per month, two series",
+  chartMonths: ["Jan", "Feb", "Mar", "Apr"],
+  chartSeries: ["Received", "Completed"],
+  toastTitle: "Changes saved",
+  toastBody: "Your theme is live for everyone.",
+  toastAction: "Undo",
+  badges: { neutral: "Draft", success: "Done", warning: "Due soon", danger: "Overdue", ai: "AI" },
+  alerts: {
+    info: "A new version is available.",
+    danger: "The upload failed."
+  }
+};
+
+export { CONTRAST_PAIRS, DEFAULT_THEME_PREVIEW_LABELS, DERIVED_TOKENS, THEME_STYLE_ID, Tabs, applyFontVars, applyThemeVars, clearFontVars, clearThemeVars, contrastIssues, contrastRatio, deriveColors, ensureContrast, inferInputs, keysOfInput, parseColor, themeCssVars, themeMetaVars, toCssColor, toHex, toHslTriplet };
+//# sourceMappingURL=chunk-J77BACGX.js.map
+//# sourceMappingURL=chunk-J77BACGX.js.map