@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-R74KGWNS.js

@@ -0,0 +1,699 @@
+import { Select } from './chunk-M6LTUPVP.js';
+import { Slider } from './chunk-I2UCOD45.js';
+import { ToggleGroup } from './chunk-M4CTURKX.js';
+import { Collapsible } from './chunk-FVPGQ6UE.js';
+import { Badge } from './chunk-SBGAUGXY.js';
+import { Textarea } from './chunk-EEK5NGZF.js';
+import { ColorInput } from './chunk-VSERHUWD.js';
+import { TextInput } from './chunk-HPMYYGP7.js';
+import { Label } from './chunk-S6TAF63G.js';
+import { Button } from './chunk-IXAYNBOY.js';
+import { useId, useMemo } from 'react';
+import DOMPurify from 'dompurify';
+import { keboola } from '@keboola/brand-registry';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/blocks/BrandEditor/color.ts
+var hexToChannels = (hex) => {
+  let h = hex.trim().replace(/^#/, "");
+  if (h.length === 3 || h.length === 4) {
+    h = h.slice(0, 3).split("").map((c) => c + c).join("");
+  } else if (h.length === 8) {
+    h = h.slice(0, 6);
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return "0 0 0";
+  const n = parseInt(h, 16);
+  return `${n >> 16 & 255} ${n >> 8 & 255} ${n & 255}`;
+};
+var channelsToHex = (channels) => {
+  const [r = 0, g = 0, b = 0] = channels.trim().split(/\s+/).map((n) => Number(n) || 0);
+  const to2 = (v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
+  return `#${to2(r)}${to2(g)}${to2(b)}`;
+};
+var COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var ColorField = ({ id, label, channels, onChange }) => {
+  const hex = channelsToHex(channels);
+  return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "tw:text-xs tw:font-normal tw:text-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        id,
+        sizing: "medium",
+        value: hex,
+        className: "tw:w-36",
+        onValueChange: (next) => {
+          const clean = next.trim().replace(/^#/, "");
+          if (COMPLETE_HEX.test(clean)) onChange(hexToChannels(`#${clean}`));
+        }
+      }
+    )
+  ] });
+};
+
+// src/blocks/BrandEditor/contrast.ts
+var clampChannel = (n) => Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;
+var parseChannels = (channels) => {
+  const [r = 0, g = 0, b = 0] = channels.trim().split(/\s+/).map((n) => clampChannel(Number(n)));
+  return [r, g, b];
+};
+var relativeLuminance = (channels) => {
+  const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var contrastRatio = (fg, bg) => {
+  const l1 = relativeLuminance(fg);
+  const l2 = relativeLuminance(bg);
+  const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];
+  return (lighter + 0.05) / (darker + 0.05);
+};
+var wcagLevel = (ratio) => ratio >= 7 ? "AAA" : ratio >= 4.5 ? "AA" : "fail";
+var ControlSection = ({ title, children }) => /* @__PURE__ */ jsxs("section", { className: "tw:flex tw:flex-col tw:gap-3 tw:border-b tw:border-border tw:p-4", children: [
+  /* @__PURE__ */ jsx("h3", { className: "tw:m-0 tw:text-xs tw:font-semibold tw:uppercase tw:tracking-wide tw:text-muted-foreground", children: title }),
+  children
+] });
+var LogoField = ({ id, label, value, onChange }) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+  /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "tw:text-xs tw:font-normal tw:text-foreground", children: label }),
+  /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      id,
+      value,
+      onValueChange: onChange,
+      maxRows: 4,
+      placeholder: "<svg\u2026>, a data: URI, or an https:// URL",
+      className: "tw:font-mono tw:text-xs"
+    }
+  )
+] });
+var TextField = ({ id, label, value, onChange, placeholder }) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+  /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "tw:text-xs tw:font-normal tw:text-foreground", children: label }),
+  /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      id,
+      sizing: "small",
+      value,
+      onValueChange: onChange,
+      placeholder,
+      className: "tw:font-mono tw:text-xs"
+    }
+  )
+] });
+var DEFAULT_FALLBACK_FONT = "'Inter', system-ui, sans-serif";
+var DEFAULT_FONT_OPTIONS = [
+  { value: DEFAULT_FALLBACK_FONT, label: "Inter (default)" },
+  { value: "'Space Grotesk', system-ui, sans-serif", label: "Space Grotesk" },
+  { value: "'Poppins', system-ui, sans-serif", label: "Poppins" },
+  { value: "'Manrope', system-ui, sans-serif", label: "Manrope" },
+  { value: "'Quicksand', system-ui, sans-serif", label: "Quicksand" },
+  { value: "'Baloo 2', system-ui, sans-serif", label: "Baloo 2" },
+  { value: "'Fraunces', Georgia, serif", label: "Fraunces (serif)" },
+  { value: "Georgia, 'Times New Roman', serif", label: "Georgia (serif)" },
+  { value: "'JetBrains Mono', ui-monospace, monospace", label: "JetBrains Mono" },
+  { value: "system-ui, sans-serif", label: "System UI" }
+];
+var COLOR_LABELS = {
+  primary: "Primary",
+  primaryForeground: "Primary foreground",
+  background: "Background",
+  foreground: "Foreground",
+  card: "Card",
+  cardForeground: "Card foreground",
+  popover: "Popover",
+  popoverForeground: "Popover foreground",
+  secondary: "Secondary",
+  secondaryForeground: "Secondary foreground",
+  muted: "Muted",
+  mutedForeground: "Muted foreground",
+  accent: "Accent",
+  accentForeground: "Accent foreground",
+  border: "Border",
+  input: "Input border",
+  inputBackground: "Input background",
+  ring: "Ring",
+  ringOffset: "Ring offset",
+  destructive: "Destructive",
+  destructiveForeground: "Destructive foreground",
+  success: "Success",
+  successForeground: "Success foreground",
+  warning: "Warning",
+  warningForeground: "Warning foreground",
+  info: "Info",
+  infoForeground: "Info foreground"
+};
+var SIDEBAR_LABELS = {
+  sidebar: "Sidebar",
+  sidebarForeground: "Foreground",
+  sidebarPrimary: "Primary",
+  sidebarPrimaryForeground: "Primary foreground",
+  sidebarAccent: "Accent",
+  sidebarAccentForeground: "Accent foreground",
+  sidebarBorder: "Border",
+  sidebarRing: "Ring"
+};
+var CHART_LABELS = {
+  chart1: "Chart 1",
+  chart2: "Chart 2",
+  chart3: "Chart 3",
+  chart4: "Chart 4",
+  chart5: "Chart 5"
+};
+var WEIGHT_LABELS = {
+  normal: "Normal",
+  medium: "Medium",
+  semibold: "Semibold",
+  bold: "Bold"
+};
+var SHADOW_LABELS = {
+  sm: "Small",
+  md: "Medium",
+  lg: "Large",
+  lift: "Lift (raised)"
+};
+var SPACING_LABELS = {
+  gutter: "Gutter (between sections)",
+  inset: "Inset (in-container)"
+};
+var MOTION_LABELS = {
+  duration: "Duration",
+  easing: "Easing"
+};
+var COLOR_SLOTS = Object.keys(COLOR_LABELS);
+var SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS);
+var CHART_SLOTS = Object.keys(CHART_LABELS);
+var WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS);
+var SHADOW_SLOTS = Object.keys(SHADOW_LABELS);
+var SPACING_SLOTS = Object.keys(SPACING_LABELS);
+var MOTION_SLOTS = Object.keys(MOTION_LABELS);
+var RADIUS_SIZES = ["sm", "md", "lg"];
+var A11Y_PAIRS = [
+  { label: "Text on background", fg: "foreground", bg: "background" },
+  { label: "Text on card", fg: "cardForeground", bg: "card" },
+  { label: "Primary button", fg: "primaryForeground", bg: "primary" },
+  { label: "Muted text", fg: "mutedForeground", bg: "muted" },
+  { label: "Accent", fg: "accentForeground", bg: "accent" }
+];
+var DEFAULT_SIDEBAR = {
+  light: {
+    sidebar: "255 255 255",
+    sidebarForeground: "30 41 59",
+    sidebarPrimary: "31 143 255",
+    sidebarPrimaryForeground: "255 255 255",
+    sidebarAccent: "219 234 254",
+    sidebarAccentForeground: "30 41 59",
+    sidebarBorder: "229 231 235",
+    sidebarRing: "31 143 255"
+  },
+  dark: {
+    sidebar: "14 14 18",
+    sidebarForeground: "229 230 236",
+    sidebarPrimary: "31 143 255",
+    sidebarPrimaryForeground: "255 255 255",
+    sidebarAccent: "38 38 45",
+    sidebarAccentForeground: "229 230 236",
+    sidebarBorder: "48 49 57",
+    sidebarRing: "31 143 255"
+  }
+};
+var DEFAULT_RADII = {
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem"
+};
+var DEFAULT_CHART = {
+  light: {
+    chart1: "31 143 255",
+    chart2: "0 194 135",
+    chart3: "146 92 255",
+    chart4: "245 147 0",
+    chart5: "237 94 223"
+  },
+  dark: {
+    chart1: "92 173 255",
+    chart2: "0 230 161",
+    chart3: "173 133 255",
+    chart4: "255 190 92",
+    chart5: "242 140 232"
+  }
+};
+var DEFAULT_FONT_WEIGHTS = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var DEFAULT_LETTER_SPACING = "1px";
+var MONO_FALLBACK = "'JetBrains Mono', ui-monospace, monospace";
+var DEFAULT_SHADOWS = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  lift: "0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06)"
+};
+var DEFAULT_SPACING = {
+  gutter: "1.5rem",
+  inset: "1.5rem"
+};
+var DEFAULT_MOTION = {
+  duration: "200ms",
+  easing: "cubic-bezier(0.2, 0.7, 0.2, 1)"
+};
+var DEFAULT_GRADIENT = "linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent, var(--primary))))";
+var numOf = (value, fallback) => {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+var letterSpacingToPx = (value) => {
+  const n = Number.parseFloat(value);
+  if (!Number.isFinite(n)) return 0;
+  return value.trim().endsWith("em") ? n * 16 : n;
+};
+var pxToLetterSpacing = (px, currentValue) => currentValue.trim().endsWith("em") ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;
+var lengthToPx = (value) => {
+  const n = Number.parseFloat(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.round(value.trim().endsWith("rem") ? n * 16 : n);
+};
+var pxToLength = (px, currentValue) => {
+  const trimmed = currentValue.trim();
+  if (trimmed.endsWith("rem")) return `${px / 16}rem`;
+  if (/^-?\d*\.?\d+$/.test(trimmed)) return `${px}`;
+  return `${px}px`;
+};
+var isSvgMarkup = (source) => source.trimStart().startsWith("<");
+var isImageSource = (source) => /^(data:|https?:\/\/)/.test(source.trim());
+var LogoPreviewImage = ({ source, className }) => {
+  const safeSvg = useMemo(
+    () => isSvgMarkup(source) ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } }) : null,
+    [source]
+  );
+  if (safeSvg !== null) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className, dangerouslySetInnerHTML: { __html: safeSvg } });
+  }
+  if (isImageSource(source)) {
+    return /* @__PURE__ */ jsx("img", { src: source, alt: "", className });
+  }
+  return null;
+};
+var BrandEditor = ({
+  value,
+  onChange,
+  colorScheme = "light",
+  onColorSchemeChange,
+  fontOptions = DEFAULT_FONT_OPTIONS
+}) => {
+  const baseId = useId();
+  const { theme } = value;
+  const coreColors = colorScheme === "light" ? theme.colors : theme.colorsDark;
+  const sidebarColors = colorScheme === "light" ? theme.colors?.sidebar : theme.colorsDark?.sidebar;
+  const chartColors = colorScheme === "light" ? theme.colors?.chart : theme.colorsDark?.chart;
+  const defaultColors = colorScheme === "light" ? keboola.theme.colors : keboola.theme.colorsDark;
+  const radii = theme.radii ?? DEFAULT_RADII;
+  const typography = theme.typography;
+  const setColor = (slot, channels) => {
+    if (colorScheme === "light") {
+      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: channels } } });
+      return;
+    }
+    onChange({
+      ...value,
+      theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: channels } }
+    });
+  };
+  const setSidebarColor = (slot, channels) => {
+    if (colorScheme === "light") {
+      const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;
+      onChange({
+        ...value,
+        theme: { ...theme, colors: { ...theme.colors, sidebar: { ...base, [slot]: channels } } }
+      });
+      return;
+    }
+    const sidebarBase = theme.colorsDark?.sidebar ?? DEFAULT_SIDEBAR.dark;
+    onChange({
+      ...value,
+      theme: {
+        ...theme,
+        colorsDark: { ...theme.colorsDark, sidebar: { ...sidebarBase, [slot]: channels } }
+      }
+    });
+  };
+  const setChart = (slot, channels) => {
+    const base = chartColors ?? DEFAULT_CHART[colorScheme];
+    const chart = { ...base, [slot]: channels };
+    if (colorScheme === "light") {
+      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, chart } } });
+      return;
+    }
+    onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, chart } } });
+  };
+  const setRadius = (size, radius) => onChange({
+    ...value,
+    theme: { ...theme, radii: { ...theme.radii ?? DEFAULT_RADII, [size]: radius } }
+  });
+  const patchTypography = (patch) => onChange({ ...value, theme: { ...theme, typography: { ...theme.typography, ...patch } } });
+  const setFontFace = (face, font) => patchTypography({ [face]: font.trim() || void 0 });
+  const setFontWeight = (slot, weight) => patchTypography({ weight: { ...theme.typography?.weight, [slot]: weight || void 0 } });
+  const setLetterSpacing = (chrome) => patchTypography({ letterSpacing: { chrome: chrome.trim() || void 0 } });
+  const setShadow = (slot, shadow) => onChange({
+    ...value,
+    theme: { ...theme, shadows: { ...theme.shadows, [slot]: shadow.trim() || void 0 } }
+  });
+  const setSpacing = (slot, length) => onChange({
+    ...value,
+    theme: { ...theme, spacing: { ...theme.spacing, [slot]: length.trim() || void 0 } }
+  });
+  const setMotion = (slot, token) => onChange({
+    ...value,
+    theme: { ...theme, motion: { ...theme.motion, [slot]: token.trim() || void 0 } }
+  });
+  const setGradient = (gradient) => onChange({
+    ...value,
+    theme: { ...theme, gradient: { brand: gradient.trim() || void 0 } }
+  });
+  const setLogo = (slot, source) => {
+    const trimmed = source.trim();
+    const nextLogo = { ...value.logo };
+    if (trimmed) nextLogo[slot] = trimmed;
+    else delete nextLogo[slot];
+    const { logo: _drop, ...rest } = value;
+    onChange(Object.keys(nextLogo).length > 0 ? { ...value, logo: nextLogo } : rest);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col", children: [
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Colors", children: [
+      onColorSchemeChange ? /* @__PURE__ */ jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          value: colorScheme,
+          onValueChange: (next) => {
+            if (next === "light" || next === "dark") onColorSchemeChange(next);
+          },
+          "aria-label": "Color scheme",
+          className: "tw:w-full",
+          children: [
+            /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "light", className: "tw:flex-1", children: "Light" }),
+            /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "dark", className: "tw:flex-1", children: "Dark" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "tw:flex tw:flex-col tw:gap-2", children: COLOR_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          id: `${baseId}color-${colorScheme}-${slot}`,
+          label: COLOR_LABELS[slot],
+          channels: coreColors?.[slot] ?? defaultColors?.[slot] ?? "0 0 0",
+          onChange: (channels) => setColor(slot, channels)
+        },
+        slot
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Accessibility", children: [
+      /* @__PURE__ */ jsxs("p", { className: "tw:m-0 tw:text-xs tw:text-muted-foreground", children: [
+        "WCAG contrast for the ",
+        colorScheme,
+        " palette (AA needs 4.5:1)."
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "tw:flex tw:flex-col tw:gap-1.5", children: A11Y_PAIRS.map((pair) => {
+        const fg = coreColors?.[pair.fg] ?? defaultColors?.[pair.fg] ?? "0 0 0";
+        const bg = coreColors?.[pair.bg] ?? defaultColors?.[pair.bg] ?? "255 255 255";
+        const ratio = contrastRatio(fg, bg);
+        const level = wcagLevel(ratio);
+        return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:text-foreground", children: pair.label }),
+          /* @__PURE__ */ jsxs("span", { className: "tw:flex tw:items-center tw:gap-1.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground", children: [
+              ratio.toFixed(1),
+              ":1"
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { color: level === "fail" ? "red" : "green", children: level === "fail" ? "Fail" : level })
+          ] })
+        ] }, pair.label);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(ControlSection, { title: "Sidebar colors", children: /* @__PURE__ */ jsxs(Collapsible, { className: "tw:flex tw:flex-col tw:gap-2", children: [
+      /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "small", className: "tw:w-full", children: [
+        "Toggle sidebar tokens (",
+        colorScheme,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsx(Collapsible.Content, { className: "tw:flex tw:flex-col tw:gap-2", children: SIDEBAR_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          id: `${baseId}sidebar-${colorScheme}-${slot}`,
+          label: SIDEBAR_LABELS[slot],
+          channels: sidebarColors?.[slot] ?? DEFAULT_SIDEBAR[colorScheme][slot],
+          onChange: (channels) => setSidebarColor(slot, channels)
+        },
+        slot
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Chart palette", children: [
+      /* @__PURE__ */ jsxs("p", { className: "tw:m-0 tw:text-xs tw:text-muted-foreground", children: [
+        "Categorical series colours for the ",
+        colorScheme,
+        " palette (`--chart-1\u20265`)."
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "tw:flex tw:flex-col tw:gap-2", children: CHART_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          id: `${baseId}chart-${colorScheme}-${slot}`,
+          label: CHART_LABELS[slot],
+          channels: chartColors?.[slot] ?? DEFAULT_CHART[colorScheme][slot],
+          onChange: (channels) => setChart(slot, channels)
+        },
+        slot
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(ControlSection, { title: "Radius", children: RADIUS_SIZES.map((size) => {
+      const current = radii[size];
+      const px = lengthToPx(current);
+      return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:justify-between", children: [
+          /* @__PURE__ */ jsx(Label, { className: "tw:text-xs tw:font-normal tw:uppercase tw:text-foreground", children: size }),
+          /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground", children: radii[size] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            min: 0,
+            max: 24,
+            step: 1,
+            value: [px],
+            onValueChange: (values) => setRadius(size, pxToLength(values[0] ?? 0, current))
+          }
+        )
+      ] }, size);
+    }) }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Typography", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: `${baseId}font-family`,
+            className: "tw:text-xs tw:font-normal tw:text-foreground",
+            children: "Font family"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: `${baseId}font-family`,
+            value: typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontFamily", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: `${baseId}font-display`,
+            className: "tw:text-xs tw:font-normal tw:text-foreground",
+            children: "Display font (headings)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: `${baseId}font-display`,
+            value: typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontDisplay", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: `${baseId}font-mono`,
+            className: "tw:text-xs tw:font-normal tw:text-foreground",
+            children: "Monospace font"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: `${baseId}font-mono`,
+            value: typography?.fontMono ?? MONO_FALLBACK,
+            onValueChange: (font) => setFontFace("fontMono", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:text-muted-foreground", children: "Chrome font weights" }),
+      WEIGHT_SLOTS.map((slot) => {
+        const current = typography?.weight?.[slot] ?? DEFAULT_FONT_WEIGHTS[slot];
+        return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:justify-between", children: [
+            /* @__PURE__ */ jsx(Label, { className: "tw:text-xs tw:font-normal tw:text-foreground", children: WEIGHT_LABELS[slot] }),
+            /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground", children: current })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              min: 100,
+              max: 900,
+              step: 25,
+              value: [numOf(current, 400)],
+              onValueChange: (values) => setFontWeight(slot, String(values[0] ?? 400))
+            }
+          )
+        ] }, slot);
+      }),
+      /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:justify-between", children: [
+          /* @__PURE__ */ jsx(Label, { className: "tw:text-xs tw:font-normal tw:text-foreground", children: "Chrome letter spacing" }),
+          /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground", children: typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            min: -2,
+            max: 4,
+            step: 0.25,
+            value: [letterSpacingToPx(typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING)],
+            onValueChange: (values) => setLetterSpacing(
+              pxToLetterSpacing(
+                values[0] ?? 0,
+                typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING
+              )
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Elevation", children: [
+      /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-xs tw:text-muted-foreground", children: "Box-shadow scale (`--shadow-*`), shared across light & dark. Empty inherits the default." }),
+      SHADOW_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          id: `${baseId}shadow-${slot}`,
+          label: SHADOW_LABELS[slot],
+          value: theme.shadows?.[slot] ?? "",
+          placeholder: DEFAULT_SHADOWS[slot],
+          onChange: (next) => setShadow(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Density", children: [
+      /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-xs tw:text-muted-foreground", children: "Semantic spacing (`--space-*`), as CSS lengths." }),
+      SPACING_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          id: `${baseId}spacing-${slot}`,
+          label: SPACING_LABELS[slot],
+          value: theme.spacing?.[slot] ?? "",
+          placeholder: DEFAULT_SPACING[slot],
+          onChange: (next) => setSpacing(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Motion", children: [
+      /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-xs tw:text-muted-foreground", children: "Base transition `duration` + `easing` (`--motion-*`)." }),
+      MOTION_SLOTS.map((slot) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          id: `${baseId}motion-${slot}`,
+          label: MOTION_LABELS[slot],
+          value: theme.motion?.[slot] ?? "",
+          placeholder: DEFAULT_MOTION[slot],
+          onChange: (next) => setMotion(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(ControlSection, { title: "Gradient", children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        id: `${baseId}gradient-brand`,
+        label: "Brand gradient",
+        value: theme.gradient?.brand ?? "",
+        placeholder: DEFAULT_GRADIENT,
+        onChange: setGradient
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Logo", children: [
+      /* @__PURE__ */ jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-mark`,
+          label: "Mark (icon)",
+          value: value.logo?.mark ?? "",
+          onChange: (source) => setLogo("mark", source)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-wordmark`,
+          label: "Wordmark (full)",
+          value: value.logo?.wordmark ?? "",
+          onChange: (source) => setLogo("wordmark", source)
+        }
+      ),
+      /* @__PURE__ */ jsxs(Collapsible, { className: "tw:flex tw:flex-col tw:gap-2", children: [
+        /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", className: "tw:w-full", children: "Toggle dark-mode logos" }) }),
+        /* @__PURE__ */ jsxs(Collapsible.Content, { className: "tw:flex tw:flex-col tw:gap-2", children: [
+          /* @__PURE__ */ jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-mark-dark`,
+              label: "Mark (dark)",
+              value: value.logo?.markDark ?? "",
+              onChange: (source) => setLogo("markDark", source)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-wordmark-dark`,
+              label: "Wordmark (dark)",
+              value: value.logo?.wordmarkDark ?? "",
+              onChange: (source) => setLogo("wordmarkDark", source)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:text-muted-foreground", children: "Preview" }),
+        /* @__PURE__ */ jsx("div", { className: "tw:flex tw:min-h-12 tw:items-center tw:gap-4 tw:rounded-md tw:border tw:border-border tw:bg-background tw:p-3", children: value.logo?.mark || value.logo?.wordmark ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          value.logo.mark ? /* @__PURE__ */ jsx(LogoPreviewImage, { source: value.logo.mark, className: "tw:h-8" }) : null,
+          value.logo.wordmark ? /* @__PURE__ */ jsx(LogoPreviewImage, { source: value.logo.wordmark, className: "tw:h-8" }) : null
+        ] }) : /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:text-muted-foreground", children: "No logo set" }) })
+      ] })
+    ] })
+  ] });
+};
+
+export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
+//# sourceMappingURL=chunk-R74KGWNS.js.map
+//# sourceMappingURL=chunk-R74KGWNS.js.map