@keboola/design 13.1.3 → 14.0.0

package/dist/{BrandEditor-P8OZX2hi.js → BrandEditor-CN2HJ_12.js}

@@ -1,17 +1,17 @@
-import { Button } from "./Button-B21oVcPU.js";
-import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { ToggleGroup } from "./ToggleGroup-BOz1yyz6.js";
 import { Label } from "./internal/components/Label.js";
-import { TextInput } from "./TextInput-BWYXbfs4.js";
-import { Slider } from "./Slider-B0ou9r0B.js";
-import { Select } from "./Select-B4uK0QVm.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
-import { ColorInput } from "./ColorInput-B3gBZ8Ya.js";
+import { TextInput } from "./TextInput-K2DSDs5O.js";
+import { Slider } from "./Slider-DbzzSDRV.js";
+import { Select } from "./Select-CjQgU_6K.js";
+import { Badge } from "./Badge-Ba3epgcI.js";
+import { ColorInput } from "./ColorInput-CDKH8q_f.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Collapsible } from "./Collapsible-BQXWEOBC.js";
+import { Collapsible } from "./Collapsible-DD4xTL75.js";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { keboola } from "@keboola/brand-registry";
 import DOMPurify from "dompurify";
+import { keboola } from "@keboola/brand-registry";
 //#region src/blocks/BrandEditor/color.ts
 const hexToChannels = (hex) => {
 	let h = hex.trim().replace(/^#/, "");
@@ -197,6 +197,23 @@ const COLOR_LABELS = {
 	info: "Info",
 	infoForeground: "Info foreground"
 };
+const STATE_COLOR_LABELS = {
+	hover: "Hover",
+	hoverForeground: "Hover foreground",
+	pressed: "Pressed",
+	selected: "Selected",
+	selectedForeground: "Selected foreground",
+	scrim: "Scrim (modal backdrop)"
+};
+const STATE_COLOR_DEFAULTS = {
+	hover: "Follows accent (menus, table rows: their own tint)",
+	hoverForeground: "Follows accent foreground",
+	pressed: "Reserved: no component reads it yet",
+	selected: "Follows accent",
+	selectedForeground: "Follows accent foreground",
+	scrim: "rgb(0 0 0 / 0.5)"
+};
+const DEFAULT_DISABLED_OPACITY = "0.5";
 const SIDEBAR_LABELS = {
 	sidebar: "Sidebar",
 	sidebarForeground: "Foreground",
@@ -207,6 +224,12 @@ const SIDEBAR_LABELS = {
 	sidebarBorder: "Border",
 	sidebarRing: "Ring"
 };
+const SIDEBAR_STATE_LABELS = {
+	sidebarHover: "Hover",
+	sidebarHoverForeground: "Hover foreground",
+	sidebarSelected: "Selected (current page)",
+	sidebarSelectedForeground: "Selected foreground"
+};
 const CHART_LABELS = {
 	chart1: "Chart 1",
 	chart2: "Chart 2",
@@ -235,6 +258,8 @@ const MOTION_LABELS = {
 	easing: "Easing"
 };
 const COLOR_SLOTS = Object.keys(COLOR_LABELS);
+const STATE_COLOR_SLOTS = Object.keys(STATE_COLOR_LABELS);
+const SIDEBAR_STATE_SLOTS = Object.keys(SIDEBAR_STATE_LABELS);
 const SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS);
 const CHART_SLOTS = Object.keys(CHART_LABELS);
 const WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS);
@@ -244,7 +269,12 @@ const MOTION_SLOTS = Object.keys(MOTION_LABELS);
 const RADIUS_SIZES = [
 	"sm",
 	"md",
-	"lg"
+	"lg",
+	"card",
+	"popover",
+	"modal",
+	"sheet",
+	"toast"
 ];
 const A11Y_PAIRS = [
 	{
@@ -300,6 +330,11 @@ const DEFAULT_RADII = {
 	md: "0.375rem",
 	lg: "0.5rem"
 };
+const surfaceRadiusFallback = (size, radii) => {
+	if (size === "popover") return "1rem";
+	if (size === "modal") return "1.5rem";
+	return radii.lg;
+};
 const DEFAULT_CHART = {
 	light: {
 		chart1: "31 143 255",
@@ -420,6 +455,42 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 			}
 		});
 	};
+	const setStateColor = (slot, color) => {
+		const next = color.trim() || void 0;
+		if (colorScheme === "light") {
+			onChange({
+				...value,
+				theme: {
+					...theme,
+					colors: {
+						...theme.colors,
+						[slot]: next
+					}
+				}
+			});
+			return;
+		}
+		onChange({
+			...value,
+			theme: {
+				...theme,
+				colorsDark: {
+					...theme.colorsDark,
+					[slot]: next
+				}
+			}
+		});
+	};
+	const setDisabledOpacity = (disabled) => onChange({
+		...value,
+		theme: {
+			...theme,
+			opacity: {
+				...theme.opacity,
+				disabled
+			}
+		}
+	});
 	const setSidebarColor = (slot, channels) => {
 		if (colorScheme === "light") {
 			const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;
@@ -453,6 +524,24 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 			}
 		});
 	};
+	const setSidebarState = (slot, color) => {
+		const next = color.trim() || void 0;
+		const palette = colorScheme === "light" ? "colors" : "colorsDark";
+		const sidebar = {
+			...theme[palette]?.sidebar ?? DEFAULT_SIDEBAR[colorScheme],
+			[slot]: next
+		};
+		onChange({
+			...value,
+			theme: {
+				...theme,
+				[palette]: {
+					...theme[palette],
+					sidebar
+				}
+			}
+		});
+	};
 	const setChart = (slot, channels) => {
 		const chart = {
 			...chartColors ?? DEFAULT_CHART[colorScheme],
@@ -623,6 +712,49 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 					})
 				})]
 			}),
+			/* @__PURE__ */ jsxs(ControlSection, {
+				title: "Interaction states",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "tw:m-0 tw:text-xs tw:text-muted-foreground",
+						children: [
+							"Hover, pressed, selected and backdrop colours for the ",
+							colorScheme,
+							" palette, as any CSS colour so a wash can be translucent. Empty follows the default."
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "tw:flex tw:flex-col tw:gap-2",
+						children: STATE_COLOR_SLOTS.map((slot) => /* @__PURE__ */ jsx(TextField, {
+							id: `${baseId}state-${colorScheme}-${slot}`,
+							label: STATE_COLOR_LABELS[slot],
+							value: coreColors?.[slot] ?? "",
+							placeholder: STATE_COLOR_DEFAULTS[slot],
+							onChange: (next) => setStateColor(slot, next)
+						}, 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: "Disabled opacity"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground",
+								children: theme.opacity?.disabled ?? DEFAULT_DISABLED_OPACITY
+							})]
+						}), /* @__PURE__ */ jsx(Slider, {
+							"aria-label": "Disabled opacity",
+							min: .2,
+							max: .8,
+							step: .05,
+							value: [Number(theme.opacity?.disabled ?? DEFAULT_DISABLED_OPACITY)],
+							onValueChange: (values) => setDisabledOpacity((values[0] ?? .5).toFixed(2))
+						})]
+					})
+				]
+			}),
 			/* @__PURE__ */ jsx(ControlSection, {
 				title: "Sidebar colors",
 				children: /* @__PURE__ */ jsxs(Collapsible, {
@@ -639,14 +771,20 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 								")"
 							]
 						})
-					}), /* @__PURE__ */ jsx(Collapsible.Content, {
+					}), /* @__PURE__ */ jsxs(Collapsible.Content, {
 						className: "tw:flex tw:flex-col tw:gap-2",
-						children: SIDEBAR_SLOTS.map((slot) => /* @__PURE__ */ jsx(ColorField, {
+						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))
+						}, slot)), SIDEBAR_STATE_SLOTS.map((slot) => /* @__PURE__ */ jsx(TextField, {
+							id: `${baseId}sidebar-state-${colorScheme}-${slot}`,
+							label: `Sidebar ${SIDEBAR_STATE_LABELS[slot].toLowerCase()}`,
+							value: sidebarColors?.[slot] ?? "",
+							placeholder: "Follows sidebar accent",
+							onChange: (next) => setSidebarState(slot, next)
+						}, slot))]
 					})]
 				})
 			}),
@@ -672,7 +810,7 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 			/* @__PURE__ */ jsx(ControlSection, {
 				title: "Radius",
 				children: RADIUS_SIZES.map((size) => {
-					const current = radii[size];
+					const current = radii[size] ?? surfaceRadiusFallback(size, radii);
 					const px = lengthToPx(current);
 					return /* @__PURE__ */ jsxs("div", {
 						className: "tw:flex tw:flex-col tw:gap-1",
@@ -683,11 +821,11 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 								children: size
 							}), /* @__PURE__ */ jsx("span", {
 								className: "tw:text-xs tw:tabular-nums tw:text-muted-foreground",
-								children: radii[size]
+								children: current
 							})]
 						}), /* @__PURE__ */ jsx(Slider, {
 							min: 0,
-							max: 24,
+							max: 32,
 							step: 1,
 							value: [px],
 							onValueChange: (values) => setRadius(size, pxToLength(values[0] ?? 0, current))
@@ -900,4 +1038,4 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 //#endregion
 export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
 
-//# sourceMappingURL=BrandEditor-P8OZX2hi.js.map
+//# sourceMappingURL=BrandEditor-CN2HJ_12.js.map

package/dist/BrandEditor-CN2HJ_12.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandEditor-CN2HJ_12.js","names":[],"sources":["../src/blocks/BrandEditor/color.ts","../src/blocks/BrandEditor/ColorField.tsx","../src/blocks/BrandEditor/contrast.ts","../src/blocks/BrandEditor/ControlSection.tsx","../src/blocks/BrandEditor/LogoField.tsx","../src/blocks/BrandEditor/TextField.tsx","../src/blocks/BrandEditor/BrandEditor.tsx"],"sourcesContent":["// Brand colours are stored as space-separated \"R G B\" channel strings (see\n// `rgbChannelsSchema` in @keboola/brand-registry); `ColorInput` speaks hex.\n// These helpers convert at that boundary.\n\nexport const hexToChannels = (hex: string): string => {\n  let h = hex.trim().replace(/^#/, '');\n  // Expand 3/4-digit shorthand and drop alpha (4- and 8-digit `#rgba`/`#rrggbbaa`) — brand\n  // channels carry no alpha. Anything else is malformed → fall back to black.\n  if (h.length === 3 || h.length === 4) {\n    h = h\n      .slice(0, 3)\n      .split('')\n      .map((c) => c + c)\n      .join('');\n  } else if (h.length === 8) {\n    h = h.slice(0, 6);\n  }\n  if (!/^[0-9a-fA-F]{6}$/.test(h)) return '0 0 0';\n  const n = parseInt(h, 16);\n  return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;\n};\n\nexport const channelsToHex = (channels: string): string => {\n  const [r = 0, g = 0, b = 0] = channels\n    .trim()\n    .split(/\\s+/)\n    .map((n) => Number(n) || 0);\n  const to2 = (v: number) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0');\n  return `#${to2(r)}${to2(g)}${to2(b)}`;\n};\n","import { Label } from '../../components/Label';\nimport { ColorInput } from '../ColorInput';\n\nimport { channelsToHex, hexToChannels } from './color';\n\ntype Props = {\n  id: string;\n  label: string;\n  /** Current value as an \"R G B\" channel string. */\n  channels: string;\n  /** Called with a new \"R G B\" channel string when a valid colour is picked. */\n  onChange: (channels: string) => void;\n};\n\n// ColorInput fires `onValueChange` on every keystroke (it only coerces on blur), so commit a\n// channel value only for a COMPLETE 3-, 4-, 6-, or 8-digit hex — otherwise a partial \"#1\"/\"#\"\n// would write unintended channels. Alpha (4-/8-digit) is truncated to RGB, since brand tokens\n// carry no alpha.\nconst COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n\n/** A labelled hex colour picker bound to a brand token (stored as RGB channels). */\nexport const ColorField = ({ id, label, channels, onChange }: Props) => {\n  const hex = channelsToHex(channels);\n\n  return (\n    <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n      <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n        {label}\n      </Label>\n      <ColorInput\n        id={id}\n        sizing=\"medium\"\n        value={hex}\n        className=\"tw:w-36\"\n        onValueChange={(next) => {\n          const clean = next.trim().replace(/^#/, '');\n          // Commit only complete hex (hexToChannels handles the 3/6/8-digit shapes + alpha drop).\n          if (COMPLETE_HEX.test(clean)) onChange(hexToChannels(`#${clean}`));\n        }}\n      />\n    </div>\n  );\n};\n","// WCAG contrast helpers over `\"R G B\"` channel strings (the brand token format).\n\n// Coerce non-numeric/blank channels to 0 and clamp to the valid 0–255 range, so a malformed\n// token (e.g. \"999 999 999\") can neither NaN-out nor push luminance past WCAG's expected bounds.\nconst clampChannel = (n: number): number =>\n  Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;\n\nconst parseChannels = (channels: string): [number, number, number] => {\n  const [r = 0, g = 0, b = 0] = channels\n    .trim()\n    .split(/\\s+/)\n    .map((n) => clampChannel(Number(n)));\n  return [r, g, b];\n};\n\nconst relativeLuminance = (channels: string): number => {\n  // Destructure with defaults (not an `as` assertion) so `r`/`g`/`b` are `number` under\n  // `noUncheckedIndexedAccess` without a production-code type cast.\n  const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {\n    const s = c / 255;\n    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/** WCAG contrast ratio (1–21) between two `\"R G B\"` colours. */\nexport const contrastRatio = (fg: string, bg: string): number => {\n  const l1 = relativeLuminance(fg);\n  const l2 = relativeLuminance(bg);\n  const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];\n  return (lighter + 0.05) / (darker + 0.05);\n};\n\n/** WCAG level for normal-size text at a given ratio. */\nexport const wcagLevel = (ratio: number): 'AAA' | 'AA' | 'fail' =>\n  ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : 'fail';\n","import type { ReactNode } from 'react';\n\ntype Props = {\n  title: string;\n  children: ReactNode;\n};\n\n/** A titled block inside `BrandEditor`. */\nexport const ControlSection = ({ title, children }: Props) => (\n  <section className=\"tw:flex tw:flex-col tw:gap-3 tw:border-b tw:border-border tw:p-4\">\n    <h3 className=\"tw:m-0 tw:text-xs tw:font-semibold tw:uppercase tw:tracking-wide tw:text-muted-foreground\">\n      {title}\n    </h3>\n    {children}\n  </section>\n);\n","import { Label } from '../../components/Label';\nimport { Textarea } from '../Textarea';\n\ntype Props = {\n  id: string;\n  label: string;\n  /** Current logo source: SVG markup, a `data:` URI, or an `http(s)` URL. */\n  value: string;\n  /** Called with the new source (empty string clears the slot). */\n  onChange: (value: string) => void;\n};\n\n/** A labelled multi-line field for a brand logo source. */\nexport const LogoField = ({ id, label, value, onChange }: Props) => (\n  <div className=\"tw:flex tw:flex-col tw:gap-1\">\n    <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n      {label}\n    </Label>\n    <Textarea\n      id={id}\n      value={value}\n      onValueChange={onChange}\n      maxRows={4}\n      placeholder=\"<svg…>, a data: URI, or an https:// URL\"\n      className=\"tw:font-mono tw:text-xs\"\n    />\n  </div>\n);\n","import { Label } from '../../components/Label';\nimport { TextInput } from '../TextInput';\n\ntype Props = {\n  id: string;\n  label: string;\n  /** Current CSS value (empty clears the token, falling back to the stylesheet default). */\n  value: string;\n  /** Called with the new CSS value on change. */\n  onChange: (value: string) => void;\n  /** The inherited default, shown as placeholder when the field is empty. */\n  placeholder?: string;\n};\n\n/** A labelled single-line field for a free-form CSS-value token (shadow, motion, gradient). */\nexport const TextField = ({ id, label, value, onChange, placeholder }: Props) => (\n  <div className=\"tw:flex tw:flex-col tw:gap-1\">\n    <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n      {label}\n    </Label>\n    <TextInput\n      id={id}\n      sizing=\"small\"\n      value={value}\n      onValueChange={onChange}\n      placeholder={placeholder}\n      className=\"tw:font-mono tw:text-xs\"\n    />\n  </div>\n);\n","import { useId, useMemo } from 'react';\nimport DOMPurify from 'dompurify';\n\nimport type { Brand } from '@keboola/brand-registry';\nimport { keboola } from '@keboola/brand-registry';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Collapsible } from '../../components/Collapsible';\nimport { Label } from '../../components/Label';\nimport { Select } from '../../components/Select';\nimport { Slider } from '../../components/Slider';\nimport { ToggleGroup } from '../../components/ToggleGroup';\n\nimport { ColorField } from './ColorField';\nimport { contrastRatio, wcagLevel } from './contrast';\nimport { ControlSection } from './ControlSection';\nimport { LogoField } from './LogoField';\nimport { TextField } from './TextField';\n\ntype Colors = NonNullable<Brand['theme']['colors']>;\n/** Colour tokens written as full CSS values rather than `R G B` channels. */\nexport type StateColorSlot = keyof Pick<\n  Colors,\n  'hover' | 'hoverForeground' | 'pressed' | 'selected' | 'selectedForeground' | 'scrim'\n>;\nexport type ColorSlot = keyof Omit<Colors, 'sidebar' | 'chart' | StateColorSlot>;\ntype SidebarColors = NonNullable<Colors['sidebar']>;\n/** Sidebar tokens written as full CSS values rather than `R G B` channels. */\nexport type SidebarStateSlot = keyof Pick<\n  SidebarColors,\n  'sidebarHover' | 'sidebarHoverForeground' | 'sidebarSelected' | 'sidebarSelectedForeground'\n>;\nexport type SidebarSlot = keyof Omit<SidebarColors, SidebarStateSlot>;\nexport type ChartSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['chart']>;\nexport type RadiusSize = keyof NonNullable<Brand['theme']['radii']>;\n\ntype Typography = NonNullable<Brand['theme']['typography']>;\ntype FontFace = 'fontFamily' | 'fontDisplay' | 'fontMono';\ntype FontWeightSlot = keyof NonNullable<Typography['weight']>;\ntype ShadowSlot = keyof NonNullable<Brand['theme']['shadows']>;\ntype SpacingSlot = keyof NonNullable<Brand['theme']['spacing']>;\ntype MotionSlot = keyof NonNullable<Brand['theme']['motion']>;\n\nexport const DEFAULT_FALLBACK_FONT = \"'Inter', system-ui, sans-serif\";\n\nexport const DEFAULT_FONT_OPTIONS: { value: string; label: string }[] = [\n  { value: DEFAULT_FALLBACK_FONT, label: 'Inter (default)' },\n  { value: \"'Space Grotesk', system-ui, sans-serif\", label: 'Space Grotesk' },\n  { value: \"'Poppins', system-ui, sans-serif\", label: 'Poppins' },\n  { value: \"'Manrope', system-ui, sans-serif\", label: 'Manrope' },\n  { value: \"'Quicksand', system-ui, sans-serif\", label: 'Quicksand' },\n  { value: \"'Baloo 2', system-ui, sans-serif\", label: 'Baloo 2' },\n  { value: \"'Fraunces', Georgia, serif\", label: 'Fraunces (serif)' },\n  { value: \"Georgia, 'Times New Roman', serif\", label: 'Georgia (serif)' },\n  { value: \"'JetBrains Mono', ui-monospace, monospace\", label: 'JetBrains Mono' },\n  { value: 'system-ui, sans-serif', label: 'System UI' },\n];\n\n// Label maps double as a compile-time exhaustiveness guard: typed as\n// `Record<ColorSlot, string>` / `Record<SidebarSlot, string>`, a new token added\n// to the upstream `Brand` schema fails to compile here until it gets a control,\n// so it can't silently drift out of the editor. Insertion order is display order.\nconst COLOR_LABELS: Record<ColorSlot, string> = {\n  primary: 'Primary',\n  primaryForeground: 'Primary foreground',\n  background: 'Background',\n  foreground: 'Foreground',\n  card: 'Card',\n  cardForeground: 'Card foreground',\n  popover: 'Popover',\n  popoverForeground: 'Popover foreground',\n  secondary: 'Secondary',\n  secondaryForeground: 'Secondary foreground',\n  muted: 'Muted',\n  mutedForeground: 'Muted foreground',\n  accent: 'Accent',\n  accentForeground: 'Accent foreground',\n  border: 'Border',\n  input: 'Input border',\n  inputBackground: 'Input background',\n  ring: 'Ring',\n  ringOffset: 'Ring offset',\n  destructive: 'Destructive',\n  destructiveForeground: 'Destructive foreground',\n  success: 'Success',\n  successForeground: 'Success foreground',\n  warning: 'Warning',\n  warningForeground: 'Warning foreground',\n  info: 'Info',\n  infoForeground: 'Info foreground',\n};\n\nconst STATE_COLOR_LABELS: Record<StateColorSlot, string> = {\n  hover: 'Hover',\n  hoverForeground: 'Hover foreground',\n  pressed: 'Pressed',\n  selected: 'Selected',\n  selectedForeground: 'Selected foreground',\n  scrim: 'Scrim (modal backdrop)',\n};\n\n// What an unset state token resolves to, shown as the field's placeholder.\nconst STATE_COLOR_DEFAULTS: Record<StateColorSlot, string> = {\n  hover: 'Follows accent (menus, table rows: their own tint)',\n  hoverForeground: 'Follows accent foreground',\n  pressed: 'Reserved: no component reads it yet',\n  selected: 'Follows accent',\n  selectedForeground: 'Follows accent foreground',\n  scrim: 'rgb(0 0 0 / 0.5)',\n};\n\nconst DEFAULT_DISABLED_OPACITY = '0.5';\n\nconst SIDEBAR_LABELS: Record<SidebarSlot, string> = {\n  sidebar: 'Sidebar',\n  sidebarForeground: 'Foreground',\n  sidebarPrimary: 'Primary',\n  sidebarPrimaryForeground: 'Primary foreground',\n  sidebarAccent: 'Accent',\n  sidebarAccentForeground: 'Accent foreground',\n  sidebarBorder: 'Border',\n  sidebarRing: 'Ring',\n};\n\nconst SIDEBAR_STATE_LABELS: Record<SidebarStateSlot, string> = {\n  sidebarHover: 'Hover',\n  sidebarHoverForeground: 'Hover foreground',\n  sidebarSelected: 'Selected (current page)',\n  sidebarSelectedForeground: 'Selected foreground',\n};\n\nconst CHART_LABELS: Record<ChartSlot, string> = {\n  chart1: 'Chart 1',\n  chart2: 'Chart 2',\n  chart3: 'Chart 3',\n  chart4: 'Chart 4',\n  chart5: 'Chart 5',\n};\n\nconst WEIGHT_LABELS: Record<FontWeightSlot, string> = {\n  normal: 'Normal',\n  medium: 'Medium',\n  semibold: 'Semibold',\n  bold: 'Bold',\n};\n\nconst SHADOW_LABELS: Record<ShadowSlot, string> = {\n  sm: 'Small',\n  md: 'Medium',\n  lg: 'Large',\n  lift: 'Lift (raised)',\n};\n\nconst SPACING_LABELS: Record<SpacingSlot, string> = {\n  gutter: 'Gutter (between sections)',\n  inset: 'Inset (in-container)',\n};\n\nconst MOTION_LABELS: Record<MotionSlot, string> = {\n  duration: 'Duration',\n  easing: 'Easing',\n};\n\nconst COLOR_SLOTS = Object.keys(COLOR_LABELS) as ColorSlot[];\nconst STATE_COLOR_SLOTS = Object.keys(STATE_COLOR_LABELS) as StateColorSlot[];\nconst SIDEBAR_STATE_SLOTS = Object.keys(SIDEBAR_STATE_LABELS) as SidebarStateSlot[];\nconst SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS) as SidebarSlot[];\nconst CHART_SLOTS = Object.keys(CHART_LABELS) as ChartSlot[];\nconst WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS) as FontWeightSlot[];\nconst SHADOW_SLOTS = Object.keys(SHADOW_LABELS) as ShadowSlot[];\nconst SPACING_SLOTS = Object.keys(SPACING_LABELS) as SpacingSlot[];\nconst MOTION_SLOTS = Object.keys(MOTION_LABELS) as MotionSlot[];\nconst RADIUS_SIZES: RadiusSize[] = ['sm', 'md', 'lg', 'card', 'popover', 'modal', 'sheet', 'toast'];\n\n// Foreground/background pairs whose contrast decides everyday legibility.\nconst A11Y_PAIRS: { label: string; fg: ColorSlot; bg: ColorSlot }[] = [\n  { label: 'Text on background', fg: 'foreground', bg: 'background' },\n  { label: 'Text on card', fg: 'cardForeground', bg: 'card' },\n  { label: 'Primary button', fg: 'primaryForeground', bg: 'primary' },\n  { label: 'Muted text', fg: 'mutedForeground', bg: 'muted' },\n  { label: 'Accent', fg: 'accentForeground', bg: 'accent' },\n];\n\n// Fallback sidebar palette — the `keboola` brand doesn't set `colors.sidebar` /\n// `colorsDark.sidebar`, so a slot needs a value to seed from when a user starts\n// editing sidebar tokens on a brand that leaves them unset.\nconst DEFAULT_SIDEBAR: Record<'light' | 'dark', Record<SidebarSlot, string>> = {\n  light: {\n    sidebar: '255 255 255',\n    sidebarForeground: '30 41 59',\n    sidebarPrimary: '31 143 255',\n    sidebarPrimaryForeground: '255 255 255',\n    sidebarAccent: '219 234 254',\n    sidebarAccentForeground: '30 41 59',\n    sidebarBorder: '229 231 235',\n    sidebarRing: '31 143 255',\n  },\n  dark: {\n    sidebar: '14 14 18',\n    sidebarForeground: '229 230 236',\n    sidebarPrimary: '31 143 255',\n    sidebarPrimaryForeground: '255 255 255',\n    sidebarAccent: '38 38 45',\n    sidebarAccentForeground: '229 230 236',\n    sidebarBorder: '48 49 57',\n    sidebarRing: '31 143 255',\n  },\n};\n\nconst DEFAULT_RADII: NonNullable<Brand['theme']['radii']> = {\n  sm: '0.25rem',\n  md: '0.375rem',\n  lg: '0.5rem',\n};\n\n// What an unset surface radius resolves to on its component.\nconst surfaceRadiusFallback = (\n  size: RadiusSize,\n  radii: NonNullable<Brand['theme']['radii']>,\n): string => {\n  if (size === 'popover') return '1rem';\n  if (size === 'modal') return '1.5rem';\n  return radii.lg;\n};\n\n// The `@keboola/design/styles` categorical chart palette — seeds the chart\n// pickers when a brand leaves `colors.chart` / `colorsDark.chart` unset.\nconst DEFAULT_CHART: Record<'light' | 'dark', Record<ChartSlot, string>> = {\n  light: {\n    chart1: '31 143 255',\n    chart2: '0 194 135',\n    chart3: '146 92 255',\n    chart4: '245 147 0',\n    chart5: '237 94 223',\n  },\n  dark: {\n    chart1: '92 173 255',\n    chart2: '0 230 161',\n    chart3: '173 133 255',\n    chart4: '255 190 92',\n    chart5: '242 140 232',\n  },\n};\n\n// Chrome font-weight defaults (the Tailwind scale `@keboola/design` falls back to\n// when `typography.weight` is unset) — seed values for the weight sliders.\nconst DEFAULT_FONT_WEIGHTS: Record<FontWeightSlot, string> = {\n  normal: '400',\n  medium: '500',\n  semibold: '600',\n  bold: '700',\n};\n\n// Chrome tracking default (behind the hardcoded `tw:tracking-[1px]`).\nconst DEFAULT_LETTER_SPACING = '1px';\n\n// The monospace stack the mono-face Select falls back to when `fontMono` is unset\n// (matches the `DEFAULT_FONT_OPTIONS` JetBrains Mono entry).\nconst MONO_FALLBACK = \"'JetBrains Mono', ui-monospace, monospace\";\n\n// `@keboola/design/styles` defaults for the advanced token groups, shown as\n// placeholders so an unset field reveals the value it inherits.\nconst DEFAULT_SHADOWS: Record<ShadowSlot, string> = {\n  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n  lift: '0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06)',\n};\n\nconst DEFAULT_SPACING: Record<SpacingSlot, string> = {\n  gutter: '1.5rem',\n  inset: '1.5rem',\n};\n\nconst DEFAULT_MOTION: Record<MotionSlot, string> = {\n  duration: '200ms',\n  easing: 'cubic-bezier(0.2, 0.7, 0.2, 1)',\n};\n\nconst DEFAULT_GRADIENT =\n  'linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent, var(--primary))))';\n\n// Leading numeric value of a token string (font-weight \"500\").\nconst numOf = (value: string, fallback: number): number => {\n  const n = Number.parseFloat(value);\n  return Number.isFinite(n) ? n : fallback;\n};\n\n// Letter-spacing may be px or em. Drive the slider in px (treating `em` as ×16,\n// like the radius slider treats `rem`) and write back in the value's original\n// unit, so an `em`-authored brand (e.g. `0.02em`) stays `em` instead of being\n// silently rewritten to `px`.\nconst letterSpacingToPx = (value: string): number => {\n  const n = Number.parseFloat(value);\n  if (!Number.isFinite(n)) return 0;\n  return value.trim().endsWith('em') ? n * 16 : n;\n};\n\nconst pxToLetterSpacing = (px: number, currentValue: string): string =>\n  currentValue.trim().endsWith('em') ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;\n\n// The Brand schema allows any CSS length for radii (`rem`, `px`, unitless). Convert to px for\n// the slider treating `rem` as ×16 and everything else as already-px, and write back preserving\n// the slot's original unit so `8px` stays `8px`, `0.5rem` stays `0.5rem`, and a unitless `8` stays `8`.\nconst lengthToPx = (value: string): number => {\n  const n = Number.parseFloat(value);\n  if (!Number.isFinite(n)) return 0;\n  return Math.round(value.trim().endsWith('rem') ? n * 16 : n);\n};\n\nconst pxToLength = (px: number, currentValue: string): string => {\n  const trimmed = currentValue.trim();\n  if (trimmed.endsWith('rem')) return `${px / 16}rem`;\n  // Preserve a unitless token (the schema allows it) rather than forcing `px` onto it.\n  if (/^-?\\d*\\.?\\d+$/.test(trimmed)) return `${px}`;\n  return `${px}px`;\n};\n\nexport type BrandEditorProps = {\n  value: Brand;\n  onChange: (next: Brand) => void;\n  /** Palette being edited. Controlled. Default 'light'. */\n  colorScheme?: 'light' | 'dark';\n  /** If provided, the editor shows a light/dark toggle that calls this. If omitted, no toggle. */\n  onColorSchemeChange?: (scheme: 'light' | 'dark') => void;\n  /** Font choices for the typography Select. Defaults to DEFAULT_FONT_OPTIONS. */\n  fontOptions?: { value: string; label: string }[];\n};\n\n// Match `BrandLogo`'s sniffing: any string starting with `<` is inline markup (covers\n// `<?xml …?><svg>` / `<!doctype …>` prefixes); only `data:` / `http(s)://` are image URLs.\nconst isSvgMarkup = (source: string) => source.trimStart().startsWith('<');\nconst isImageSource = (source: string) => /^(data:|https?:\\/\\/)/.test(source.trim());\n\n/** Renders a logo source (SVG markup, `data:` URI, or `http(s)` URL) from the raw string. */\nconst LogoPreviewImage = ({ source, className }: { source: string; className?: string }) => {\n  const safeSvg = useMemo(\n    () =>\n      isSvgMarkup(source)\n        ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } })\n        : null,\n    [source],\n  );\n\n  if (safeSvg !== null) {\n    // Decorative preview of what the caller is editing — the textarea holds the real value, so\n    // hide the injected graphic from assistive tech (parity with the `alt=\"\"` image branch below).\n    return <span aria-hidden className={className} dangerouslySetInnerHTML={{ __html: safeSvg }} />;\n  }\n  if (isImageSource(source)) {\n    return <img src={source} alt=\"\" className={className} />;\n  }\n  return null;\n};\n\n/**\n * Controlled brand-editing block — colors (light/dark), sidebar colors, WCAG contrast readout,\n * corner radius, typography, and logo. Reads/writes a `Brand` (`@keboola/brand-registry`) via\n * `value` / `onChange`; owns no state of its own, so the caller decides where the brand and the\n * active color scheme live (Kai build-mode preview, theme-generator, …).\n */\nexport const BrandEditor = ({\n  value,\n  onChange,\n  colorScheme = 'light',\n  onColorSchemeChange,\n  fontOptions = DEFAULT_FONT_OPTIONS,\n}: BrandEditorProps) => {\n  // Prefix every control id so multiple BrandEditors on one page don't collide (broken label↔control).\n  const baseId = useId();\n  const { theme } = value;\n  const coreColors = colorScheme === 'light' ? theme.colors : theme.colorsDark;\n  const sidebarColors = colorScheme === 'light' ? theme.colors?.sidebar : theme.colorsDark?.sidebar;\n  const chartColors = colorScheme === 'light' ? theme.colors?.chart : theme.colorsDark?.chart;\n  // Fall back to the keboola default of the SAME scheme — never light values while editing dark.\n  const defaultColors = colorScheme === 'light' ? keboola.theme.colors : keboola.theme.colorsDark;\n  const radii = theme.radii ?? DEFAULT_RADII;\n  const typography = theme.typography;\n\n  const setColor = (slot: ColorSlot, channels: string) => {\n    if (colorScheme === 'light') {\n      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: channels } } });\n      return;\n    }\n    // Keep colorsDark sparse (mirrors the light path) so an unset dark palette inherits the\n    // design-system defaults instead of baking in a full keboola palette on the first edit.\n    onChange({\n      ...value,\n      theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: channels } },\n    });\n  };\n\n  const setStateColor = (slot: StateColorSlot, color: string) => {\n    const next = color.trim() || undefined;\n    if (colorScheme === 'light') {\n      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: next } } });\n      return;\n    }\n    onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: next } } });\n  };\n\n  const setDisabledOpacity = (disabled: string) =>\n    onChange({ ...value, theme: { ...theme, opacity: { ...theme.opacity, disabled } } });\n\n  const setSidebarColor = (slot: SidebarSlot, channels: string) => {\n    if (colorScheme === 'light') {\n      const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;\n      onChange({\n        ...value,\n        theme: { ...theme, colors: { ...theme.colors, sidebar: { ...base, [slot]: channels } } },\n      });\n      return;\n    }\n    // Spread the existing (possibly-empty) colorsDark so setting a sidebar token doesn't seed the\n    // whole core dark palette; only the sidebar sub-object is seeded, since it has no default to inherit.\n    const sidebarBase = theme.colorsDark?.sidebar ?? DEFAULT_SIDEBAR.dark;\n    onChange({\n      ...value,\n      theme: {\n        ...theme,\n        colorsDark: { ...theme.colorsDark, sidebar: { ...sidebarBase, [slot]: channels } },\n      },\n    });\n  };\n\n  const setSidebarState = (slot: SidebarStateSlot, color: string) => {\n    const next = color.trim() || undefined;\n    const palette = colorScheme === 'light' ? 'colors' : 'colorsDark';\n    const sidebar = { ...(theme[palette]?.sidebar ?? DEFAULT_SIDEBAR[colorScheme]), [slot]: next };\n    onChange({ ...value, theme: { ...theme, [palette]: { ...theme[palette], sidebar } } });\n  };\n\n  const setChart = (slot: ChartSlot, channels: string) => {\n    const base = chartColors ?? DEFAULT_CHART[colorScheme];\n    const chart = { ...base, [slot]: channels };\n    if (colorScheme === 'light') {\n      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, chart } } });\n      return;\n    }\n    onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, chart } } });\n  };\n\n  const setRadius = (size: RadiusSize, radius: string) =>\n    onChange({\n      ...value,\n      theme: { ...theme, radii: { ...(theme.radii ?? DEFAULT_RADII), [size]: radius } },\n    });\n\n  // Merge a typography patch, keeping sibling faces / weight / letterSpacing.\n  const patchTypography = (patch: Partial<Typography>) =>\n    onChange({ ...value, theme: { ...theme, typography: { ...theme.typography, ...patch } } });\n\n  const setFontFace = (face: FontFace, font: string) =>\n    patchTypography({ [face]: font.trim() || undefined });\n\n  const setFontWeight = (slot: FontWeightSlot, weight: string) =>\n    patchTypography({ weight: { ...theme.typography?.weight, [slot]: weight || undefined } });\n\n  const setLetterSpacing = (chrome: string) =>\n    patchTypography({ letterSpacing: { chrome: chrome.trim() || undefined } });\n\n  const setShadow = (slot: ShadowSlot, shadow: string) =>\n    onChange({\n      ...value,\n      theme: { ...theme, shadows: { ...theme.shadows, [slot]: shadow.trim() || undefined } },\n    });\n\n  const setSpacing = (slot: SpacingSlot, length: string) =>\n    onChange({\n      ...value,\n      theme: { ...theme, spacing: { ...theme.spacing, [slot]: length.trim() || undefined } },\n    });\n\n  const setMotion = (slot: MotionSlot, token: string) =>\n    onChange({\n      ...value,\n      theme: { ...theme, motion: { ...theme.motion, [slot]: token.trim() || undefined } },\n    });\n\n  const setGradient = (gradient: string) =>\n    onChange({\n      ...value,\n      theme: { ...theme, gradient: { brand: gradient.trim() || undefined } },\n    });\n\n  const setLogo = (slot: keyof NonNullable<Brand['logo']>, source: string) => {\n    const trimmed = source.trim();\n    const nextLogo: NonNullable<Brand['logo']> = { ...value.logo };\n    if (trimmed) nextLogo[slot] = trimmed;\n    else delete nextLogo[slot];\n    const { logo: _drop, ...rest } = value;\n    onChange(Object.keys(nextLogo).length > 0 ? { ...value, logo: nextLogo } : rest);\n  };\n\n  return (\n    <div className=\"tw:flex tw:flex-col\">\n      <ControlSection title=\"Colors\">\n        {onColorSchemeChange ? (\n          <ToggleGroup\n            type=\"single\"\n            value={colorScheme}\n            onValueChange={(next) => {\n              if (next === 'light' || next === 'dark') onColorSchemeChange(next);\n            }}\n            aria-label=\"Color scheme\"\n            className=\"tw:w-full\"\n          >\n            <ToggleGroup.Item value=\"light\" className=\"tw:flex-1\">\n              Light\n            </ToggleGroup.Item>\n            <ToggleGroup.Item value=\"dark\" className=\"tw:flex-1\">\n              Dark\n            </ToggleGroup.Item>\n          </ToggleGroup>\n        ) : null}\n        <div className=\"tw:flex tw:flex-col tw:gap-2\">\n          {COLOR_SLOTS.map((slot) => (\n            <ColorField\n              key={slot}\n              id={`${baseId}color-${colorScheme}-${slot}`}\n              label={COLOR_LABELS[slot]}\n              channels={coreColors?.[slot] ?? defaultColors?.[slot] ?? '0 0 0'}\n              onChange={(channels) => setColor(slot, channels)}\n            />\n          ))}\n        </div>\n      </ControlSection>\n\n      <ControlSection title=\"Accessibility\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          WCAG contrast for the {colorScheme} palette (AA needs 4.5:1).\n        </p>\n        <div className=\"tw:flex tw:flex-col tw:gap-1.5\">\n          {A11Y_PAIRS.map((pair) => {\n            const fg = coreColors?.[pair.fg] ?? defaultColors?.[pair.fg] ?? '0 0 0';\n            const bg = coreColors?.[pair.bg] ?? defaultColors?.[pair.bg] ?? '255 255 255';\n            const ratio = contrastRatio(fg, bg);\n            const level = wcagLevel(ratio);\n            return (\n              <div key={pair.label} className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n                <span className=\"tw:text-xs tw:text-foreground\">{pair.label}</span>\n                <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                  <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n                    {ratio.toFixed(1)}:1\n                  </span>\n                  <Badge color={level === 'fail' ? 'red' : 'green'}>\n                    {level === 'fail' ? 'Fail' : level}\n                  </Badge>\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </ControlSection>\n\n      <ControlSection title=\"Interaction states\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          Hover, pressed, selected and backdrop colours for the {colorScheme} palette, as any CSS\n          colour so a wash can be translucent. Empty follows the default.\n        </p>\n        <div className=\"tw:flex tw:flex-col tw:gap-2\">\n          {STATE_COLOR_SLOTS.map((slot) => (\n            <TextField\n              key={slot}\n              id={`${baseId}state-${colorScheme}-${slot}`}\n              label={STATE_COLOR_LABELS[slot]}\n              value={coreColors?.[slot] ?? ''}\n              placeholder={STATE_COLOR_DEFAULTS[slot]}\n              onChange={(next) => setStateColor(slot, next)}\n            />\n          ))}\n        </div>\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <div className=\"tw:flex tw:items-center tw:justify-between\">\n            <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">Disabled opacity</Label>\n            <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n              {theme.opacity?.disabled ?? DEFAULT_DISABLED_OPACITY}\n            </span>\n          </div>\n          <Slider\n            aria-label=\"Disabled opacity\"\n            min={0.2}\n            max={0.8}\n            step={0.05}\n            value={[Number(theme.opacity?.disabled ?? DEFAULT_DISABLED_OPACITY)]}\n            onValueChange={(values) => setDisabledOpacity((values[0] ?? 0.5).toFixed(2))}\n          />\n        </div>\n      </ControlSection>\n\n      <ControlSection title=\"Sidebar colors\">\n        <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n          <Collapsible.Trigger asChild>\n            <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n              Toggle sidebar tokens ({colorScheme})\n            </Button>\n          </Collapsible.Trigger>\n          <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n            {SIDEBAR_SLOTS.map((slot) => (\n              <ColorField\n                key={slot}\n                id={`${baseId}sidebar-${colorScheme}-${slot}`}\n                label={SIDEBAR_LABELS[slot]}\n                channels={sidebarColors?.[slot] ?? DEFAULT_SIDEBAR[colorScheme][slot]}\n                onChange={(channels) => setSidebarColor(slot, channels)}\n              />\n            ))}\n            {SIDEBAR_STATE_SLOTS.map((slot) => (\n              <TextField\n                key={slot}\n                id={`${baseId}sidebar-state-${colorScheme}-${slot}`}\n                label={`Sidebar ${SIDEBAR_STATE_LABELS[slot].toLowerCase()}`}\n                value={sidebarColors?.[slot] ?? ''}\n                placeholder=\"Follows sidebar accent\"\n                onChange={(next) => setSidebarState(slot, next)}\n              />\n            ))}\n          </Collapsible.Content>\n        </Collapsible>\n      </ControlSection>\n\n      <ControlSection title=\"Chart palette\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          Categorical series colours for the {colorScheme} palette (`--chart-1…5`).\n        </p>\n        <div className=\"tw:flex tw:flex-col tw:gap-2\">\n          {CHART_SLOTS.map((slot) => (\n            <ColorField\n              key={slot}\n              id={`${baseId}chart-${colorScheme}-${slot}`}\n              label={CHART_LABELS[slot]}\n              channels={chartColors?.[slot] ?? DEFAULT_CHART[colorScheme][slot]}\n              onChange={(channels) => setChart(slot, channels)}\n            />\n          ))}\n        </div>\n      </ControlSection>\n\n      <ControlSection title=\"Radius\">\n        {RADIUS_SIZES.map((size) => {\n          const current = radii[size] ?? surfaceRadiusFallback(size, radii);\n          const px = lengthToPx(current);\n          return (\n            <div key={size} className=\"tw:flex tw:flex-col tw:gap-1\">\n              <div className=\"tw:flex tw:items-center tw:justify-between\">\n                <Label className=\"tw:text-xs tw:font-normal tw:uppercase tw:text-foreground\">\n                  {size}\n                </Label>\n                <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n                  {current}\n                </span>\n              </div>\n              <Slider\n                min={0}\n                max={32}\n                step={1}\n                value={[px]}\n                onValueChange={(values) => setRadius(size, pxToLength(values[0] ?? 0, current))}\n              />\n            </div>\n          );\n        })}\n      </ControlSection>\n\n      <ControlSection title=\"Typography\">\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <Label\n            htmlFor={`${baseId}font-family`}\n            className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n          >\n            Font family\n          </Label>\n          <Select\n            id={`${baseId}font-family`}\n            value={typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n            onValueChange={(font) => setFontFace('fontFamily', font)}\n            items={fontOptions}\n          />\n        </div>\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <Label\n            htmlFor={`${baseId}font-display`}\n            className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n          >\n            Display font (headings)\n          </Label>\n          <Select\n            id={`${baseId}font-display`}\n            value={typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n            onValueChange={(font) => setFontFace('fontDisplay', font)}\n            items={fontOptions}\n          />\n        </div>\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <Label\n            htmlFor={`${baseId}font-mono`}\n            className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n          >\n            Monospace font\n          </Label>\n          <Select\n            id={`${baseId}font-mono`}\n            value={typography?.fontMono ?? MONO_FALLBACK}\n            onValueChange={(font) => setFontFace('fontMono', font)}\n            items={fontOptions}\n          />\n        </div>\n\n        <span className=\"tw:text-xs tw:text-muted-foreground\">Chrome font weights</span>\n        {WEIGHT_SLOTS.map((slot) => {\n          const current = typography?.weight?.[slot] ?? DEFAULT_FONT_WEIGHTS[slot];\n          return (\n            <div key={slot} className=\"tw:flex tw:flex-col tw:gap-1\">\n              <div className=\"tw:flex tw:items-center tw:justify-between\">\n                <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n                  {WEIGHT_LABELS[slot]}\n                </Label>\n                <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n                  {current}\n                </span>\n              </div>\n              <Slider\n                min={100}\n                max={900}\n                step={25}\n                value={[numOf(current, 400)]}\n                onValueChange={(values) => setFontWeight(slot, String(values[0] ?? 400))}\n              />\n            </div>\n          );\n        })}\n\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <div className=\"tw:flex tw:items-center tw:justify-between\">\n            <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n              Chrome letter spacing\n            </Label>\n            <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n              {typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING}\n            </span>\n          </div>\n          <Slider\n            min={-2}\n            max={4}\n            step={0.25}\n            value={[letterSpacingToPx(typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING)]}\n            onValueChange={(values) =>\n              setLetterSpacing(\n                pxToLetterSpacing(\n                  values[0] ?? 0,\n                  typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING,\n                ),\n              )\n            }\n          />\n        </div>\n      </ControlSection>\n\n      <ControlSection title=\"Elevation\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          Box-shadow scale (`--shadow-*`), shared across light & dark. Empty inherits the default.\n        </p>\n        {SHADOW_SLOTS.map((slot) => (\n          <TextField\n            key={slot}\n            id={`${baseId}shadow-${slot}`}\n            label={SHADOW_LABELS[slot]}\n            value={theme.shadows?.[slot] ?? ''}\n            placeholder={DEFAULT_SHADOWS[slot]}\n            onChange={(next) => setShadow(slot, next)}\n          />\n        ))}\n      </ControlSection>\n\n      <ControlSection title=\"Density\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          Semantic spacing (`--space-*`), as CSS lengths.\n        </p>\n        {SPACING_SLOTS.map((slot) => (\n          <TextField\n            key={slot}\n            id={`${baseId}spacing-${slot}`}\n            label={SPACING_LABELS[slot]}\n            value={theme.spacing?.[slot] ?? ''}\n            placeholder={DEFAULT_SPACING[slot]}\n            onChange={(next) => setSpacing(slot, next)}\n          />\n        ))}\n      </ControlSection>\n\n      <ControlSection title=\"Motion\">\n        <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n          Base transition `duration` + `easing` (`--motion-*`).\n        </p>\n        {MOTION_SLOTS.map((slot) => (\n          <TextField\n            key={slot}\n            id={`${baseId}motion-${slot}`}\n            label={MOTION_LABELS[slot]}\n            value={theme.motion?.[slot] ?? ''}\n            placeholder={DEFAULT_MOTION[slot]}\n            onChange={(next) => setMotion(slot, next)}\n          />\n        ))}\n      </ControlSection>\n\n      <ControlSection title=\"Gradient\">\n        <TextField\n          id={`${baseId}gradient-brand`}\n          label=\"Brand gradient\"\n          value={theme.gradient?.brand ?? ''}\n          placeholder={DEFAULT_GRADIENT}\n          onChange={setGradient}\n        />\n      </ControlSection>\n\n      <ControlSection title=\"Logo\">\n        <LogoField\n          id={`${baseId}logo-mark`}\n          label=\"Mark (icon)\"\n          value={value.logo?.mark ?? ''}\n          onChange={(source) => setLogo('mark', source)}\n        />\n        <LogoField\n          id={`${baseId}logo-wordmark`}\n          label=\"Wordmark (full)\"\n          value={value.logo?.wordmark ?? ''}\n          onChange={(source) => setLogo('wordmark', source)}\n        />\n        <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n          <Collapsible.Trigger asChild>\n            <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n              Toggle dark-mode logos\n            </Button>\n          </Collapsible.Trigger>\n          <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n            <LogoField\n              id={`${baseId}logo-mark-dark`}\n              label=\"Mark (dark)\"\n              value={value.logo?.markDark ?? ''}\n              onChange={(source) => setLogo('markDark', source)}\n            />\n            <LogoField\n              id={`${baseId}logo-wordmark-dark`}\n              label=\"Wordmark (dark)\"\n              value={value.logo?.wordmarkDark ?? ''}\n              onChange={(source) => setLogo('wordmarkDark', source)}\n            />\n          </Collapsible.Content>\n        </Collapsible>\n        <div className=\"tw:flex tw:flex-col tw:gap-1\">\n          <span className=\"tw:text-xs tw:text-muted-foreground\">Preview</span>\n          <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\">\n            {value.logo?.mark || value.logo?.wordmark ? (\n              <>\n                {value.logo.mark ? (\n                  <LogoPreviewImage source={value.logo.mark} className=\"tw:h-8\" />\n                ) : null}\n                {value.logo.wordmark ? (\n                  <LogoPreviewImage source={value.logo.wordmark} className=\"tw:h-8\" />\n                ) : null}\n              </>\n            ) : (\n              <span className=\"tw:text-xs tw:text-muted-foreground\">No logo set</span>\n            )}\n          </div>\n        </div>\n      </ControlSection>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/{BrandLogo-CKpVSZb6.js → BrandLogo-BfITD0im.js}

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useTheme } from "./context-U293r3v-.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -43,4 +43,4 @@ const BrandLogo = ({ variant = "wordmark", className, label }) => {
 //#endregion
 export { BrandLogo };
 
-//# sourceMappingURL=BrandLogo-CKpVSZb6.js.map
+//# sourceMappingURL=BrandLogo-BfITD0im.js.map

package/dist/{BrandLogo-CKpVSZb6.js.map → BrandLogo-BfITD0im.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BrandLogo-CKpVSZb6.js","names":[],"sources":["../src/components/BrandLogo/BrandLogo.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport DOMPurify from 'dompurify';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { cn } from '../../utils';\nimport { type ResolvedColorScheme, useTheme } from '../ThemeProvider';\n\ntype Props = {\n  /** `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. */\n  variant?: 'mark' | 'wordmark';\n  /** Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`). */\n  className?: string;\n  /**\n   * Accessible name; defaults to the brand's picker `name`, suffixes included (`Keboola (V2)`).\n   * Pass the product name where the logo names something, e.g. a link.\n   */\n  label?: string;\n};\n\nconst isInlineSvg = (source: string) => source.trimStart().startsWith('<');\n\n// Resolved mode wins, then the other mode, then the other variant.\nconst resolveLogoSource = (\n  logo: Brand['logo'],\n  variant: 'mark' | 'wordmark',\n  mode: ResolvedColorScheme,\n): string | undefined => {\n  if (!logo) return undefined;\n  const forMode = (light?: string, dark?: string) =>\n    mode === 'dark' ? (dark ?? light) : (light ?? dark);\n  const mark = forMode(logo.mark, logo.markDark);\n  const wordmark = forMode(logo.wordmark, logo.wordmarkDark);\n  return variant === 'mark' ? (mark ?? wordmark) : (wordmark ?? mark);\n};\n\n// Reference SVGs omit width/height; without a default height they render ~150px tall.\nconst wrapperClass = 'tw:inline-flex tw:h-6 tw:items-center tw:[&>svg]:h-full tw:[&>svg]:w-auto';\n\n/**\n * The active brand's logo from the nearest `<ThemeProvider>`, or `null` if it ships none.\n * Inline SVG inherits `currentColor`; URLs use `<img>`.\n */\nexport const BrandLogo = ({ variant = 'wordmark', className, label }: Props) => {\n  const { currentTheme, resolvedScheme } = useTheme();\n  const source = resolveLogoSource(currentTheme.logo, variant, resolvedScheme);\n\n  // Brands can come from customer config or a paste field, so the SVG is untrusted.\n  const safeSvg = useMemo(\n    () =>\n      source && isInlineSvg(source)\n        ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } })\n        : null,\n    [source],\n  );\n\n  if (!source) return null;\n\n  if (safeSvg !== null) {\n    return (\n      <span\n        role=\"img\"\n        aria-label={label ?? currentTheme.name}\n        className={cn(wrapperClass, className)}\n        dangerouslySetInnerHTML={{ __html: safeSvg }}\n      />\n    );\n  }\n\n  return (\n    <span className={cn(wrapperClass, className)}>\n      <img src={source} alt={label ?? currentTheme.name} className=\"tw:h-full tw:w-auto\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAoBA,MAAM,eAAe,WAAmB,OAAO,UAAU,CAAC,CAAC,WAAW,GAAG;AAGzE,MAAM,qBACJ,MACA,SACA,SACuB;CACvB,IAAI,CAAC,MAAM,OAAO,KAAA;CAClB,MAAM,WAAW,OAAgB,SAC/B,SAAS,SAAU,QAAQ,QAAU,SAAS;CAChD,MAAM,OAAO,QAAQ,KAAK,MAAM,KAAK,QAAQ;CAC7C,MAAM,WAAW,QAAQ,KAAK,UAAU,KAAK,YAAY;CACzD,OAAO,YAAY,SAAU,QAAQ,WAAa,YAAY;AAChE;AAGA,MAAM,eAAe;;;;;AAMrB,MAAa,aAAa,EAAE,UAAU,YAAY,WAAW,YAAmB;CAC9E,MAAM,EAAE,cAAc,mBAAmB,SAAS;CAClD,MAAM,SAAS,kBAAkB,aAAa,MAAM,SAAS,cAAc;CAG3E,MAAM,UAAU,cAEZ,UAAU,YAAY,MAAM,IACxB,UAAU,SAAS,QAAQ,EAAE,cAAc;EAAE,KAAK;EAAM,YAAY;CAAK,EAAE,CAAC,IAC5E,MACN,CAAC,MAAM,CACT;CAEA,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,YAAY,MACd,OACE,oBAAC,QAAD;EACE,MAAK;EACL,cAAY,SAAS,aAAa;EAClC,WAAW,GAAG,cAAc,SAAS;EACrC,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA;CAIL,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,cAAc,SAAS;EACzC,UAAA,oBAAC,OAAD;GAAK,KAAK;GAAQ,KAAK,SAAS,aAAa;GAAM,WAAU;EAAuB,CAAA;CAChF,CAAA;AAEV"}
+{"version":3,"file":"BrandLogo-BfITD0im.js","names":[],"sources":["../src/components/BrandLogo/BrandLogo.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport DOMPurify from 'dompurify';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { cn } from '../../utils';\nimport { type ResolvedColorScheme, useTheme } from '../ThemeProvider';\n\ntype Props = {\n  /** `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. */\n  variant?: 'mark' | 'wordmark';\n  /** Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`). */\n  className?: string;\n  /**\n   * Accessible name; defaults to the brand's picker `name`, suffixes included (`Keboola (V2)`).\n   * Pass the product name where the logo names something, e.g. a link.\n   */\n  label?: string;\n};\n\nconst isInlineSvg = (source: string) => source.trimStart().startsWith('<');\n\n// Resolved mode wins, then the other mode, then the other variant.\nconst resolveLogoSource = (\n  logo: Brand['logo'],\n  variant: 'mark' | 'wordmark',\n  mode: ResolvedColorScheme,\n): string | undefined => {\n  if (!logo) return undefined;\n  const forMode = (light?: string, dark?: string) =>\n    mode === 'dark' ? (dark ?? light) : (light ?? dark);\n  const mark = forMode(logo.mark, logo.markDark);\n  const wordmark = forMode(logo.wordmark, logo.wordmarkDark);\n  return variant === 'mark' ? (mark ?? wordmark) : (wordmark ?? mark);\n};\n\n// Reference SVGs omit width/height; without a default height they render ~150px tall.\nconst wrapperClass = 'tw:inline-flex tw:h-6 tw:items-center tw:[&>svg]:h-full tw:[&>svg]:w-auto';\n\n/**\n * The active brand's logo from the nearest `<ThemeProvider>`, or `null` if it ships none.\n * Inline SVG inherits `currentColor`; URLs use `<img>`.\n */\nexport const BrandLogo = ({ variant = 'wordmark', className, label }: Props) => {\n  const { currentTheme, resolvedScheme } = useTheme();\n  const source = resolveLogoSource(currentTheme.logo, variant, resolvedScheme);\n\n  // Brands can come from customer config or a paste field, so the SVG is untrusted.\n  const safeSvg = useMemo(\n    () =>\n      source && isInlineSvg(source)\n        ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } })\n        : null,\n    [source],\n  );\n\n  if (!source) return null;\n\n  if (safeSvg !== null) {\n    return (\n      <span\n        role=\"img\"\n        aria-label={label ?? currentTheme.name}\n        className={cn(wrapperClass, className)}\n        dangerouslySetInnerHTML={{ __html: safeSvg }}\n      />\n    );\n  }\n\n  return (\n    <span className={cn(wrapperClass, className)}>\n      <img src={source} alt={label ?? currentTheme.name} className=\"tw:h-full tw:w-auto\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAoBA,MAAM,eAAe,WAAmB,OAAO,UAAU,CAAC,CAAC,WAAW,GAAG;AAGzE,MAAM,qBACJ,MACA,SACA,SACuB;CACvB,IAAI,CAAC,MAAM,OAAO,KAAA;CAClB,MAAM,WAAW,OAAgB,SAC/B,SAAS,SAAU,QAAQ,QAAU,SAAS;CAChD,MAAM,OAAO,QAAQ,KAAK,MAAM,KAAK,QAAQ;CAC7C,MAAM,WAAW,QAAQ,KAAK,UAAU,KAAK,YAAY;CACzD,OAAO,YAAY,SAAU,QAAQ,WAAa,YAAY;AAChE;AAGA,MAAM,eAAe;;;;;AAMrB,MAAa,aAAa,EAAE,UAAU,YAAY,WAAW,YAAmB;CAC9E,MAAM,EAAE,cAAc,mBAAmB,SAAS;CAClD,MAAM,SAAS,kBAAkB,aAAa,MAAM,SAAS,cAAc;CAG3E,MAAM,UAAU,cAEZ,UAAU,YAAY,MAAM,IACxB,UAAU,SAAS,QAAQ,EAAE,cAAc;EAAE,KAAK;EAAM,YAAY;CAAK,EAAE,CAAC,IAC5E,MACN,CAAC,MAAM,CACT;CAEA,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,YAAY,MACd,OACE,oBAAC,QAAD;EACE,MAAK;EACL,cAAY,SAAS,aAAa;EAClC,WAAW,GAAG,cAAc,SAAS;EACrC,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA;CAIL,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,cAAc,SAAS;EACzC,UAAA,oBAAC,OAAD;GAAK,KAAK;GAAQ,KAAK,SAAS,aAAa;GAAM,WAAU;EAAuB,CAAA;CAChF,CAAA;AAEV"}

package/dist/{Breadcrumb-BUoAZyhO.js → Breadcrumb-BnIlsoIH.js}

@@ -1,11 +1,18 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { ChevronDown, ChevronRight, Ellipsis } from "./icons-wcA70iQx.js";
-import { Popover } from "./Popover-CEk915I1.js";
-import { SearchInput } from "./SearchInput-D3qMkHaW.js";
-import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { ChevronDown, ChevronRight, Ellipsis } from "./icons-ZIeZXXS7.js";
+import { Popover } from "./Popover-BU7nGOv-.js";
+import { ToggleAllTooltip, isToggleAllClick } from "./ToggleAllTooltip-Dlmq-yqS.js";
+import { SearchInput } from "./SearchInput-Dxi2GK4n.js";
 import { Children, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Breadcrumb/BreadcrumbDropdownContext.ts
+const NO_TOGGLES = {};
+/** Records `toggle` under `scope`, keeping the toggles made without a search. */
+const withToggle = (toggles, scope, toggle) => ({
+	...toggles[""] && { "": toggles[""] },
+	[scope]: toggle
+});
 const BreadcrumbDropdownContext = createContext(null);
 const matchesQuery = (text, query) => text.toLowerCase().includes(query);
 /** Text content of a React tree — the default filter text when no `textValue` is given. */
@@ -40,11 +47,11 @@ const useMatchRegistry = () => {
 //#endregion
 //#region src/components/Breadcrumb/BreadcrumbDropdownGroup.tsx
 const headerClass = cn("tw:flex", "tw:w-full", "tw:items-center", "tw:gap-2", "tw:box-border", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:px-2", "tw:py-1.5", "tw:text-left", "tw:text-sm", "tw:font-medium", "tw:text-foreground", "tw:min-w-0", "tw:overflow-hidden", "tw:[&_svg:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0");
-const collapsibleHeaderClass = cn("tw:cursor-pointer", "tw:hover:bg-accent", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50");
+const collapsibleHeaderClass = cn("tw:cursor-pointer", "tw:hover:bg-hover", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50");
 /**
 * A labelled group of `Breadcrumb.Dropdown.Item`s (e.g. one bucket with its tables). The group
 * hides itself when neither its label nor any child matches the filter query; an active query
-* force-expands collapsible groups. Non-empty `collapsible` groups toggle their items behind the
+* opens collapsible groups, and a fold made under it lasts until the query changes. Non-empty `collapsible` groups toggle their items behind the
 * header with an animated expand / collapse; a `collapsible` group with no items renders a
 * non-interactive, greyed header that can't toggle.
 */
@@ -53,9 +60,13 @@ const BreadcrumbDropdownGroup = ({ label, textValue, collapsible = false, defaul
 	if (!parent) throw new Error("Breadcrumb.Dropdown.Group must be rendered inside Breadcrumb.Dropdown");
 	const id = useId();
 	const { register: registerChild, anyVisible } = useMatchRegistry();
-	const [expanded, setExpanded] = useState(defaultExpanded);
+	const [own, setOwn] = useState(NO_TOGGLES);
 	const text = textValue ?? getNodeText(label);
 	const filtering = !parent.filterDisabled && !!parent.query;
+	const scope = filtering ? parent.query : "";
+	const ownToggle = own[scope];
+	const allToggle = parent.allExpanded[scope];
+	const toggle = allToggle && (!ownToggle || allToggle.at > ownToggle.at) ? allToggle : ownToggle;
 	const labelMatched = filtering && matchesQuery(text, parent.query);
 	const visible = !filtering || parent.forceVisible || labelMatched || anyVisible;
 	useEffect(() => parent.register(id, visible), [
@@ -68,13 +79,16 @@ const BreadcrumbDropdownGroup = ({ label, textValue, collapsible = false, defaul
 		forceVisible: parent.forceVisible || labelMatched,
 		filterDisabled: parent.filterDisabled,
 		register: registerChild,
-		close: parent.close
+		close: parent.close,
+		allExpanded: parent.allExpanded,
+		setAllExpanded: parent.setAllExpanded,
+		stamp: parent.stamp
 	}), [
 		parent,
 		labelMatched,
 		registerChild
 	]);
-	const isExpanded = !collapsible || expanded || filtering;
+	const isExpanded = !collapsible || (toggle ? toggle.expanded : filtering || defaultExpanded);
 	const isEmpty = Children.count(children) === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("tw:flex tw:flex-col", className),
@@ -87,8 +101,17 @@ const BreadcrumbDropdownGroup = ({ label, textValue, collapsible = false, defaul
 			type: "button",
 			"aria-expanded": isExpanded,
 			className: cn(headerClass, collapsibleHeaderClass),
-			onClick: () => setExpanded((prev) => !prev),
-			children: [isExpanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}), label]
+			onClick: (event) => isToggleAllClick(event) ? parent.setAllExpanded(!isExpanded, scope) : setOwn((prev) => withToggle(prev, scope, {
+				expanded: !isExpanded,
+				at: parent.stamp()
+			})),
+			children: [/* @__PURE__ */ jsx(ToggleAllTooltip, {
+				expanded: isExpanded,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "tw:inline-flex",
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {})
+				})
+			}), label]
 		}) : /* @__PURE__ */ jsx("span", {
 			className: headerClass,
 			children: label
@@ -115,7 +138,7 @@ const BreadcrumbDropdownGroup = ({ label, textValue, collapsible = false, defaul
 };
 //#endregion
 //#region src/components/Breadcrumb/BreadcrumbDropdownItem.tsx
-const itemClass = cn("tw:flex", "tw:w-full", "tw:items-center", "tw:gap-2", "tw:box-border", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:px-2", "tw:py-1.5", "tw:cursor-pointer", "tw:text-left", "tw:text-sm", "tw:font-normal", "tw:text-foreground", "tw:no-underline", "tw:min-w-0", "tw:overflow-hidden", "tw:hover:bg-accent", "tw:data-[active]:bg-accent", "tw:data-[active]:font-medium", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:[&_svg:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0");
+const itemClass = cn("tw:flex", "tw:w-full", "tw:items-center", "tw:gap-2", "tw:box-border", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:px-2", "tw:py-1.5", "tw:cursor-pointer", "tw:text-left", "tw:text-sm", "tw:font-normal", "tw:text-foreground", "tw:no-underline", "tw:min-w-0", "tw:overflow-hidden", "tw:hover:bg-hover", "tw:data-[active]:bg-selected", "tw:data-[active]:font-medium", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:[&_svg:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0");
 /**
 * One selectable entity row inside `Breadcrumb.Dropdown`. Self-hides when it doesn't match the
 * panel's filter query and closes the panel on select. Use `asChild` to render a router link.
@@ -157,7 +180,7 @@ const BreadcrumbLink = ({ ref, asChild = false, className, ...props }) => {
 };
 //#endregion
 //#region src/components/Breadcrumb/BreadcrumbDropdown.tsx
-const chevronButtonClass = cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:cursor-pointer", "tw:size-5", "tw:text-muted-foreground", "tw:transition-colors", "tw:hover:bg-accent", "tw:hover:text-foreground", "tw:data-[state=open]:bg-accent", "tw:data-[state=open]:text-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:[&_svg]:transition-transform", "tw:[&[data-state=open]_svg]:rotate-180");
+const chevronButtonClass = cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:cursor-pointer", "tw:size-5", "tw:text-muted-foreground", "tw:transition-colors", "tw:hover:bg-hover", "tw:hover:text-foreground", "tw:data-[state=open]:bg-hover", "tw:data-[state=open]:text-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:[&_svg]:transition-transform", "tw:[&[data-state=open]_svg]:rotate-180");
 const plainLabelClass = cn("tw:flex", "tw:items-center", "tw:gap-1.5", "tw:text-muted-foreground", "tw:font-normal", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5");
 const PANEL_BASE = "tw:max-h-[min(640px,var(--radix-popover-content-available-height))]";
 const PANEL_WIDTH = {
@@ -172,12 +195,24 @@ const PANEL_WIDTH = {
 * - Not for row actions (`PageHeader.Detail` `overflowActions`) or a collapsed middle (`Ellipsis`).
 * - Render inside `Breadcrumb.Item` in place of `Breadcrumb.Link`.
 */
-const BreadcrumbDropdown = ({ label, splitTrigger = false, triggerLabel, open, defaultOpen = false, onOpenChange, size = "medium", filter = true, shouldFilter = true, searchValue, onSearchChange, searchPlaceholder = "Search…", emptyMessage = "No results.", children }) => {
+const BreadcrumbDropdown = ({ label, splitTrigger = false, triggerLabel, open, defaultOpen = false, onOpenChange, size = "medium", filter = true, shouldFilter = true, searchValue, onSearchChange, searchPlaceholder = "Search…", emptyMessage = "No results.", panelClassName, children }) => {
 	const searchRef = useRef(null);
 	const [internalOpen, setInternalOpen] = useState(defaultOpen);
 	const [internalQuery, setInternalQuery] = useState("");
+	const stampRef = useRef(0);
+	const stamp = useCallback(() => ++stampRef.current, []);
+	const [allExpanded, setAllExpandedState] = useState(NO_TOGGLES);
+	const setAllExpanded = useCallback((expanded, scope) => setAllExpandedState((prev) => withToggle(prev, scope, {
+		expanded,
+		at: stamp()
+	})), [stamp]);
 	const { register, anyVisible } = useMatchRegistry();
 	const isOpen = open ?? internalOpen;
+	const [wasOpen, setWasOpen] = useState(isOpen);
+	if (wasOpen !== isOpen) {
+		setWasOpen(isOpen);
+		if (!isOpen) setAllExpandedState(NO_TOGGLES);
+	}
 	const handleOpenChange = useCallback((nextOpen) => {
 		setInternalOpen(nextOpen);
 		if (!nextOpen) setInternalQuery("");
@@ -193,12 +228,18 @@ const BreadcrumbDropdown = ({ label, splitTrigger = false, triggerLabel, open, d
 		forceVisible: false,
 		filterDisabled,
 		register,
-		close
+		close,
+		allExpanded,
+		setAllExpanded,
+		stamp
 	}), [
 		query,
 		filterDisabled,
 		register,
-		close
+		close,
+		allExpanded,
+		setAllExpanded,
+		stamp
 	]);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open: isOpen,
@@ -225,12 +266,13 @@ const BreadcrumbDropdown = ({ label, splitTrigger = false, triggerLabel, open, d
 			sideOffset: 8,
 			collisionPadding: 16,
 			"data-size": size,
-			className: cn("tw:overflow-hidden tw:p-0", PANEL_BASE, PANEL_WIDTH[size]),
+			className: cn("tw:overflow-hidden tw:p-0", PANEL_BASE, PANEL_WIDTH[size], panelClassName),
 			onOpenAutoFocus: filter ? (event) => {
 				event.preventDefault();
 				searchRef.current?.focus();
 			} : void 0,
 			children: [filter && /* @__PURE__ */ jsx("div", {
+				"data-slot": "breadcrumb-dropdown-search",
 				className: "tw:shrink-0 tw:border-0 tw:border-b tw:border-solid tw:border-border tw:p-2",
 				children: /* @__PURE__ */ jsx(SearchInput, {
 					ref: searchRef,
@@ -263,7 +305,7 @@ BreadcrumbDropdown.Group = BreadcrumbDropdownGroup;
 const BreadcrumbEllipsis = ({ ref, className, ...props }) => /* @__PURE__ */ jsxs("button", {
 	ref,
 	type: "button",
-	className: cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:cursor-pointer", "tw:text-muted-foreground", "tw:transition-colors", "tw:hover:bg-accent", "tw:hover:text-foreground", "tw:data-[state=open]:bg-accent", "tw:data-[state=open]:text-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:p-1", className),
+	className: cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:rounded-md", "tw:border-none", "tw:bg-transparent", "tw:cursor-pointer", "tw:text-muted-foreground", "tw:transition-colors", "tw:hover:bg-hover", "tw:hover:text-foreground", "tw:data-[state=open]:bg-hover", "tw:data-[state=open]:text-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:p-1", className),
 	...props,
 	children: [/* @__PURE__ */ jsx(Ellipsis, { className: "tw:size-4" }), /* @__PURE__ */ jsx("span", {
 		className: "tw:sr-only",
@@ -321,4 +363,4 @@ Breadcrumb.Dropdown = BreadcrumbDropdown;
 //#endregion
 export { Breadcrumb };
 
-//# sourceMappingURL=Breadcrumb-BUoAZyhO.js.map
+//# sourceMappingURL=Breadcrumb-BnIlsoIH.js.map