@keboola/design 11.0.0 → 11.2.0

package/dist/BrandEditor-DyzgfVkl.js

@@ -0,0 +1,903 @@
+import { Button } from "./Button-6xBX0nNl.js";
+import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
+import { Label } from "./internal/components/Label.js";
+import { TextInput } from "./TextInput-CMuN1WfY.js";
+import { Slider } from "./Slider-BOPfMOMm.js";
+import { Select } from "./Select-Is0VkePH.js";
+import { Badge } from "./Badge-Ch26CXoP.js";
+import { ColorInput } from "./ColorInput-B8z4j4Y_.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { Collapsible } from "./Collapsible-BQXWEOBC.js";
+import { useId, useMemo } from "react";
+import { keboola } from "@keboola/brand-registry";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+//#region src/blocks/BrandEditor/color.ts
+const 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}`;
+};
+const 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)}`;
+};
+//#endregion
+//#region src/blocks/BrandEditor/ColorField.tsx
+const COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+/** A labelled hex colour picker bound to a brand token (stored as RGB channels). */
+const 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}`));
+			}
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/BrandEditor/contrast.ts
+const clampChannel = (n) => Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;
+const parseChannels = (channels) => {
+	const [r = 0, g = 0, b = 0] = channels.trim().split(/\s+/).map((n) => clampChannel(Number(n)));
+	return [
+		r,
+		g,
+		b
+	];
+};
+const relativeLuminance = (channels) => {
+	const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {
+		const s = c / 255;
+		return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+/** WCAG contrast ratio (1–21) between two `"R G B"` colours. */
+const contrastRatio = (fg, bg) => {
+	const l1 = relativeLuminance(fg);
+	const l2 = relativeLuminance(bg);
+	const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];
+	return (lighter + .05) / (darker + .05);
+};
+/** WCAG level for normal-size text at a given ratio. */
+const wcagLevel = (ratio) => ratio >= 7 ? "AAA" : ratio >= 4.5 ? "AA" : "fail";
+//#endregion
+//#region src/blocks/BrandEditor/ControlSection.tsx
+/** A titled block inside `BrandEditor`. */
+const 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]
+});
+//#endregion
+//#region src/blocks/BrandEditor/LogoField.tsx
+/** A labelled multi-line field for a brand logo source. */
+const 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…>, a data: URI, or an https:// URL",
+		className: "tw:font-mono tw:text-xs"
+	})]
+});
+//#endregion
+//#region src/blocks/BrandEditor/TextField.tsx
+/** A labelled single-line field for a free-form CSS-value token (shadow, motion, gradient). */
+const 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"
+	})]
+});
+//#endregion
+//#region src/blocks/BrandEditor/BrandEditor.tsx
+const DEFAULT_FALLBACK_FONT = "'Inter', system-ui, sans-serif";
+const 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"
+	}
+];
+const 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"
+};
+const SIDEBAR_LABELS = {
+	sidebar: "Sidebar",
+	sidebarForeground: "Foreground",
+	sidebarPrimary: "Primary",
+	sidebarPrimaryForeground: "Primary foreground",
+	sidebarAccent: "Accent",
+	sidebarAccentForeground: "Accent foreground",
+	sidebarBorder: "Border",
+	sidebarRing: "Ring"
+};
+const CHART_LABELS = {
+	chart1: "Chart 1",
+	chart2: "Chart 2",
+	chart3: "Chart 3",
+	chart4: "Chart 4",
+	chart5: "Chart 5"
+};
+const WEIGHT_LABELS = {
+	normal: "Normal",
+	medium: "Medium",
+	semibold: "Semibold",
+	bold: "Bold"
+};
+const SHADOW_LABELS = {
+	sm: "Small",
+	md: "Medium",
+	lg: "Large",
+	lift: "Lift (raised)"
+};
+const SPACING_LABELS = {
+	gutter: "Gutter (between sections)",
+	inset: "Inset (in-container)"
+};
+const MOTION_LABELS = {
+	duration: "Duration",
+	easing: "Easing"
+};
+const COLOR_SLOTS = Object.keys(COLOR_LABELS);
+const SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS);
+const CHART_SLOTS = Object.keys(CHART_LABELS);
+const WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS);
+const SHADOW_SLOTS = Object.keys(SHADOW_LABELS);
+const SPACING_SLOTS = Object.keys(SPACING_LABELS);
+const MOTION_SLOTS = Object.keys(MOTION_LABELS);
+const RADIUS_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+const 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"
+	}
+];
+const 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"
+	}
+};
+const DEFAULT_RADII = {
+	sm: "0.25rem",
+	md: "0.375rem",
+	lg: "0.5rem"
+};
+const 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"
+	}
+};
+const DEFAULT_FONT_WEIGHTS = {
+	normal: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700"
+};
+const DEFAULT_LETTER_SPACING = "1px";
+const MONO_FALLBACK = "'JetBrains Mono', ui-monospace, monospace";
+const 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)"
+};
+const DEFAULT_SPACING = {
+	gutter: "1.5rem",
+	inset: "1.5rem"
+};
+const DEFAULT_MOTION = {
+	duration: "200ms",
+	easing: "cubic-bezier(0.2, 0.7, 0.2, 1)"
+};
+const DEFAULT_GRADIENT = "linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent, var(--primary))))";
+const numOf = (value, fallback) => {
+	const n = Number.parseFloat(value);
+	return Number.isFinite(n) ? n : fallback;
+};
+const letterSpacingToPx = (value) => {
+	const n = Number.parseFloat(value);
+	if (!Number.isFinite(n)) return 0;
+	return value.trim().endsWith("em") ? n * 16 : n;
+};
+const pxToLetterSpacing = (px, currentValue) => currentValue.trim().endsWith("em") ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;
+const lengthToPx = (value) => {
+	const n = Number.parseFloat(value);
+	if (!Number.isFinite(n)) return 0;
+	return Math.round(value.trim().endsWith("rem") ? n * 16 : n);
+};
+const 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`;
+};
+const isSvgMarkup = (source) => source.trimStart().startsWith("<");
+const isImageSource = (source) => /^(data:|https?:\/\/)/.test(source.trim());
+/** Renders a logo source (SVG markup, `data:` URI, or `http(s)` URL) from the raw string. */
+const 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;
+};
+/**
+* Controlled brand-editing block — colors (light/dark), sidebar colors, WCAG contrast readout,
+* corner radius, typography, and logo. Reads/writes a `Brand` (`@keboola/brand-registry`) via
+* `value` / `onChange`; owns no state of its own, so the caller decides where the brand and the
+* active color scheme live (Kai build-mode preview, theme-generator, …).
+*/
+const 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 chart = {
+			...chartColors ?? DEFAULT_CHART[colorScheme],
+			[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…5`)."
+					]
+				}), /* @__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 ?? "'Inter', system-ui, sans-serif",
+							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 ?? "'Inter', system-ui, sans-serif",
+							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: .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$1, { 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"
+							})
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
+
+//# sourceMappingURL=BrandEditor-DyzgfVkl.js.map