@adea-ai/ui 0.103.0 → 0.104.0

package/dist/components/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["JSX","createContext","createEffect","createMemo","createSignal","onCleanup","splitProps","useContext","accentPresets","fontOptions","AccentPreset","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","isThemeAccentId","themeAccentsFor","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","density","ThemeDensity","defaultThemeSelection","resolvedDensity","selection","ThemeContextValue","resolvedAppearance","variant","setSelection","patch","Partial","themes","themeAccents","ThemeContext","useTheme","value","Error","preferenceStore","Storage","localStorage","undefined","readSelection","storageKey","raw","getItem","parsed","JSON","parse","some","preset","id","option","ThemeProviderProps","children","Element","initial","ThemeProvider","props","local","setSelectionState","incoming","current","systemAppearance","setSystemAppearance","window","matchMedia","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","preference","document","root","documentElement","active","properties","Object","assign","name","entries","style","setProperty","classList","toggle","dataset","colorScheme","removeAttribute","next","setItem","stringify","_$createComponent","Provider","inlineScriptLiteral","replace","character","charCodeAt","toString","padStart","themeScript","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport type { AccentPreset } from '@adea-ai/themes'\nimport {\n  accentVariables,\n  builtinThemes,\n  defaultDarkThemeId,\n  defaultLightThemeId,\n  isThemeAccentId,\n  themeAccentsFor,\n  themeById,\n  themeCssVariables,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\n\n/**\n * ThemeProvider.\n *\n * Owns the appearance preference and applies it to the document. One provider near\n * the root; everything below reads it.\n *\n * ## What a preference is\n *\n * Four independent choices, and keeping them independent is the point:\n *\n *   - **appearance** — light, dark, or follow the system.\n *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and\n *     Solarized Light by day without re-choosing when the system flips.\n *   - **an accent** — adea's six presets, or one of the accents the selected theme\n *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on\n *     top of whichever theme is active.\n *   - **a font** — the interface face.\n *\n * Four axes rather than one list of presets, because they compose: a user who wants\n * Nord with a violet accent and the system font should not need someone to author\n * that combination.\n *\n * ## Why the variants are applied as inline properties\n *\n * The catalogue is data, and a theme is applied by writing its roles onto\n * `<html>` as custom properties. That is what makes an imported palette work\n * without a hand-written `[data-theme]` block per theme, and it is why a settings\n * UI can show a preview by reading the same object rather than by loading a\n * stylesheet. `theme.css` keeps the default theme's values so the first paint is\n * correct before any script runs.\n */\nexport type ThemeSelection = {\n  /** `system` follows `prefers-color-scheme` and updates when it changes. */\n  appearance: ThemeAppearance | 'system'\n  /** The variant to use when the resolved appearance is light. */\n  lightThemeId: string\n  /** The variant to use when the resolved appearance is dark. */\n  darkThemeId: string\n  /**\n   * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),\n   * or `theme` for the variant's own primary. A theme accent the current pair does\n   * not offer falls back to the variant's own primary.\n   */\n  accent: string\n  /** A `fontOptions` id, or `space-grotesk` for the default. */\n  font: string\n  /**\n   * `comfortable` is the system's default geometry; `compact` moves the control\n   * ladder down one rung.\n   *\n   * Optional, and defaulted on read, so a preference stored before density existed\n   * keeps working and `ThemeSelection` stays assignable without it.\n   */\n  density?: ThemeDensity\n}\n\nexport const defaultThemeSelection: ThemeSelection = {\n  appearance: 'system',\n  lightThemeId: defaultLightThemeId,\n  darkThemeId: defaultDarkThemeId,\n  accent: 'theme',\n  font: 'space-grotesk',\n  density: 'comfortable',\n}\n\n/**\n * The two density rungs.\n *\n * `comfortable` is the geometry in `theme.css`, so it is the absence of an\n * attribute rather than a value: a document that ships no `data-density` at all\n * renders correctly, which is what keeps this additive.\n */\nexport type ThemeDensity = 'comfortable' | 'compact'\n\n/**\n * A stored selection's density, defaulted.\n *\n * The stored value is read through here rather than trusted, because a preference\n * written before density existed has no `density` key and a hand-edited store may\n * hold anything.\n */\nexport function resolvedDensity(selection: ThemeSelection): ThemeDensity {\n  return selection.density === 'compact' ? 'compact' : 'comfortable'\n}\n\nexport type ThemeContextValue = {\n  /** The preference as stored. */\n  selection: () => ThemeSelection\n  /** What the preference resolves to right now, after `system`. */\n  resolvedAppearance: () => ThemeAppearance\n  /** The variant in use. */\n  variant: () => ThemeVariant\n  /** Update part of the preference. */\n  setSelection: (patch: Partial<ThemeSelection>) => void\n  /** The catalogue, so a picker does not import it separately. */\n  themes: readonly ThemeVariant[]\n  /**\n   * The accents the selected light/dark pair carries, offered beside the presets.\n   * Follows the selection: a different theme pair may offer different slots.\n   */\n  themeAccents: () => readonly AccentPreset[]\n}\n\nconst ThemeContext = createContext<ThemeContextValue>()\n\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext)\n  if (!value) throw new Error('useTheme must be called inside a <ThemeProvider>.')\n  return value\n}\n\n/**\n * The preference store, or nothing.\n *\n * Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a\n * privacy mode, a denied site-data permission — merely *reading* the `localStorage`\n * global throws (\"Access is denied\", `SecurityError`), so even the `typeof` guard\n * has to sit inside the `try` rather than in front of it. Without a store the\n * preference lives only in the provider's signal for the session.\n */\nfunction preferenceStore(): Storage | undefined {\n  return typeof localStorage === 'undefined' ? undefined : localStorage\n}\n\n/** The stored preference, validated against the catalogue. */\nfunction readSelection(storageKey: string): ThemeSelection {\n  try {\n    const raw = preferenceStore()?.getItem(storageKey)\n    if (!raw) return defaultThemeSelection\n    const parsed = JSON.parse(raw) as Partial<ThemeSelection>\n    return {\n      appearance:\n        parsed.appearance === 'light' ||\n        parsed.appearance === 'dark' ||\n        parsed.appearance === 'system'\n          ? parsed.appearance\n          : defaultThemeSelection.appearance,\n      // An unknown id would leave the document with no theme at all, so a stale\n      // preference from an older catalogue falls back rather than applying nothing.\n      lightThemeId:\n        themeById(parsed.lightThemeId ?? '')?.appearance === 'light'\n          ? (parsed.lightThemeId as string)\n          : defaultLightThemeId,\n      darkThemeId:\n        themeById(parsed.darkThemeId ?? '')?.appearance === 'dark'\n          ? (parsed.darkThemeId as string)\n          : defaultDarkThemeId,\n      // A theme accent is kept whenever it names a slot, even one the stored pair\n      // cannot offer: the id is role-shaped so it survives a theme switch, and an\n      // unoffered slot already resolves to the theme's own primary when applied.\n      accent:\n        typeof parsed.accent === 'string' &&\n        (accentPresets.some((preset) => preset.id === parsed.accent) ||\n          isThemeAccentId(parsed.accent))\n          ? parsed.accent\n          : defaultThemeSelection.accent,\n      font: fontOptions.some((option) => option.id === parsed.font)\n        ? (parsed.font as string)\n        : defaultThemeSelection.font,\n    }\n  } catch {\n    return defaultThemeSelection\n  }\n}\n\nexport type ThemeProviderProps = {\n  children?: JSX.Element\n  /** Where the preference is persisted. Distinct per application. */\n  storageKey?: string\n  /** Start from this instead of the stored preference. */\n  initial?: Partial<ThemeSelection>\n  /**\n   * The selection, owned by the caller.\n   *\n   * For a consumer that keeps the state itself — a settings store, or a workshop\n   * whose selection lives in Storybook globals — rather than handing it to this\n   * provider's signal. Each change lands here and the document follows; nothing is\n   * written to the store, because the caller is the one who persists. A picker\n   * below the provider still works, and its change is the caller's to read back.\n   *\n   * Absent, the provider is the whole owner: it reads `storageKey` on mount,\n   * seeds from `initial`, and persists every `setSelection`.\n   */\n  selection?: Partial<ThemeSelection>\n}\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const [local] = splitProps(props, ['children', 'storageKey', 'initial', 'selection'])\n  const storageKey = () => local.storageKey ?? 'adea-appearance'\n\n  const [selection, setSelectionState] = createSignal<ThemeSelection>({\n    ...readSelection(storageKey()),\n    ...local.initial,\n  })\n\n  // The controlled half of the contract. A patch from the owner replaces the\n  // matching axes; the stored preference is untouched, since the owner is the one\n  // that persists. Reading `local.selection` — a prop getter, not a destructured\n  // value — is what keeps this subscribed for the provider's lifetime.\n  createEffect(() => {\n    const incoming = local.selection\n    if (incoming) setSelectionState((current) => ({ ...current, ...incoming }))\n  })\n\n  const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')\n\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    const query = window.matchMedia('(prefers-color-scheme: dark)')\n    setSystemAppearance(query.matches ? 'dark' : 'light')\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemAppearance(event.matches ? 'dark' : 'light')\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  }\n\n  const resolvedAppearance = createMemo<ThemeAppearance>(() => {\n    const preference = selection().appearance\n    if (preference === 'system') return systemAppearance()\n    return preference\n  })\n\n  const variant = createMemo<ThemeVariant>(() => {\n    const id = resolvedAppearance() === 'dark' ? selection().darkThemeId : selection().lightThemeId\n    return themeById(id) ?? builtinThemes[0]!\n  })\n\n  createEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const active = variant()\n\n    // The variant's roles, as properties. `--primary` and `--ring` are written here\n    // too, and an accent selection is layered over them below.\n    //\n    // The accent is applied *here* rather than left to the `[data-accent]` blocks in\n    // `theme.css`, because this loop writes inline custom properties and an inline\n    // declaration outranks every stylesheet selector however specific it is. The\n    // blocks still exist and are still correct — they are what styles the window\n    // before this runs — but they cannot win from here, so leaving the accent to\n    // them meant the attribute was set, the rules were present, and nothing\n    // changed on screen.\n    const properties = { ...themeCssVariables(active) }\n    const accent = accentVariables(selection().accent, resolvedAppearance(), selection())\n    if (accent) Object.assign(properties, accent)\n\n    for (const [name, value] of Object.entries(properties)) {\n      root.style.setProperty(name, value)\n    }\n\n    root.classList.toggle('dark', resolvedAppearance() === 'dark')\n    root.dataset['theme'] = active.id\n    root.dataset['appearance'] = resolvedAppearance()\n    root.style.colorScheme = resolvedAppearance()\n\n    if (!accent) root.removeAttribute('data-accent')\n    else root.dataset['accent'] = selection().accent\n\n    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')\n    else root.dataset['font'] = selection().font\n\n    // Density is a pure token shift, so unlike the colour axes there is nothing to\n    // compute: the attribute selects a block in `theme.css`. It is applied here for\n    // the same reason as the others — this is the one place that knows what the\n    // current selection is, and it is the only writer of these attributes.\n    if (resolvedDensity(selection()) === 'comfortable') root.removeAttribute('data-density')\n    else root.dataset['density'] = resolvedDensity(selection())\n  })\n\n  const themeAccents = createMemo(() =>\n    themeAccentsFor(selection().lightThemeId, selection().darkThemeId)\n  )\n\n  const value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\n    themeAccents,\n    setSelection(patch) {\n      const next = { ...selection(), ...patch }\n      setSelectionState(next)\n      try {\n        preferenceStore()?.setItem(storageKey(), JSON.stringify(next))\n      } catch {\n        // A full, blocked or unavailable store must not break the switch: the\n        // preference simply does not survive the reload.\n      }\n    },\n  }\n\n  return <ThemeContext.Provider value={value}>{local.children}</ThemeContext.Provider>\n}\n\n/**\n * A string as a JavaScript literal that is also safe inside an inline `<script>`.\n *\n * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe\n * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag\n * early and everything after it is parsed as HTML. That is the classic inline-script\n * injection, and it is a real one even though the value is a developer-supplied prop\n * rather than user input — a prop can come from configuration, and a key that happens\n * to contain a closing tag should not be able to execute.\n *\n * The escape is also correct JavaScript: `\\u003c` is `<` to the parser, so the value\n * is byte-identical at runtime and inert to the HTML tokenizer. `\\u2028` and `\\u2029`\n * are escaped for the neighbouring reason — they are legal inside a JSON string and\n * were, before ES2019, line terminators to a JavaScript parser.\n *\n * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this\n * was found; `tests/theme-script.test.ts` pins it so it cannot come back.\n */\nexport function inlineScriptLiteral(value: string): string {\n  return JSON.stringify(value).replace(\n    /[<>\\u2028\\u2029]/g,\n    (character) => `\\\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`\n  )\n}\n\n/**\n * The no-flash script.\n *\n * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark\n * preference paints the light theme first and then swaps, which is the flash every\n * themed application has to solve and the one thing a provider cannot do from\n * inside the body.\n *\n * Deliberately tiny and dependency-free: it reads the stored preference, resolves\n * `system`, and sets the class. It does not apply the variant's roles — the default\n * theme in `theme.css` covers the first paint, and the provider writes the rest on\n * mount.\n *\n * The script reads two values out of `localStorage` and writes them to `dataset`,\n * which is a *property* assignment rather than code: a stored accent or font id can\n * set an attribute and cannot execute. The one value that reaches the source as text\n * is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason\n * documented there.\n */\nexport function themeScript(storageKey = 'adea-appearance'): string {\n  return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","names":["JSX","createContext","createEffect","createMemo","createSignal","onCleanup","splitProps","useContext","accentPresets","fontOptions","AccentPreset","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","isThemeAccentId","themeAccentsFor","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","density","ThemeDensity","defaultThemeSelection","resolvedDensity","selection","ThemeContextValue","resolvedAppearance","variant","setSelection","patch","Partial","themes","themeAccents","ThemeContext","useTheme","value","Error","preferenceStore","Storage","localStorage","undefined","readSelection","storageKey","raw","getItem","parsed","JSON","parse","some","preset","id","option","ThemeProviderProps","children","Element","initial","ThemeProvider","props","local","setSelectionState","incoming","current","systemAppearance","setSystemAppearance","window","matchMedia","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","preference","document","root","documentElement","active","properties","Object","assign","name","entries","style","setProperty","classList","toggle","dataset","colorScheme","removeAttribute","next","setItem","stringify","_$createComponent","Provider","inlineScriptLiteral","replace","character","charCodeAt","toString","padStart","themeScript","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport type { AccentPreset } from '@adea-ai/themes'\nimport {\n  accentVariables,\n  builtinThemes,\n  defaultDarkThemeId,\n  defaultLightThemeId,\n  isThemeAccentId,\n  themeAccentsFor,\n  themeById,\n  themeCssVariables,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\n\n/**\n * ThemeProvider.\n *\n * Owns the appearance preference and applies it to the document. One provider near\n * the root; everything below reads it.\n *\n * ## What a preference is\n *\n * Four independent choices, and keeping them independent is the point:\n *\n *   - **appearance** — light, dark, or follow the system.\n *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and\n *     Solarized Light by day without re-choosing when the system flips.\n *   - **an accent** — adea's six presets, or one of the accents the selected theme\n *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on\n *     top of whichever theme is active.\n *   - **a font** — the interface face.\n *\n * Four axes rather than one list of presets, because they compose: a user who wants\n * Nord with a violet accent and the system font should not need someone to author\n * that combination.\n *\n * ## Why the variants are applied as inline properties\n *\n * The catalogue is data, and a theme is applied by writing its roles onto\n * `<html>` as custom properties. That is what makes an imported palette work\n * without a hand-written `[data-theme]` block per theme, and it is why a settings\n * UI can show a preview by reading the same object rather than by loading a\n * stylesheet. `theme.css` keeps the default theme's values so the first paint is\n * correct before any script runs.\n */\nexport type ThemeSelection = {\n  /** `system` follows `prefers-color-scheme` and updates when it changes. */\n  appearance: ThemeAppearance | 'system'\n  /** The variant to use when the resolved appearance is light. */\n  lightThemeId: string\n  /** The variant to use when the resolved appearance is dark. */\n  darkThemeId: string\n  /**\n   * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),\n   * or `theme` for the variant's own primary. A theme accent the current pair does\n   * not offer falls back to the variant's own primary.\n   */\n  accent: string\n  /** A `fontOptions` id, or `space-grotesk` for the default. */\n  font: string\n  /**\n   * `comfortable` is the system's default geometry; `compact` moves the control\n   * ladder down one rung.\n   *\n   * Optional, and defaulted on read, so a preference stored before density existed\n   * keeps working and `ThemeSelection` stays assignable without it.\n   */\n  density?: ThemeDensity\n}\n\nexport const defaultThemeSelection: ThemeSelection = {\n  appearance: 'system',\n  lightThemeId: defaultLightThemeId,\n  darkThemeId: defaultDarkThemeId,\n  accent: 'theme',\n  font: 'space-grotesk',\n  density: 'comfortable',\n}\n\n/**\n * The two density rungs.\n *\n * `comfortable` is the geometry in `theme.css`, so it is the absence of an\n * attribute rather than a value: a document that ships no `data-density` at all\n * renders correctly, which is what keeps this additive.\n */\nexport type ThemeDensity = 'comfortable' | 'compact'\n\n/**\n * A stored selection's density, defaulted.\n *\n * The stored value is read through here rather than trusted, because a preference\n * written before density existed has no `density` key and a hand-edited store may\n * hold anything.\n */\nexport function resolvedDensity(selection: ThemeSelection): ThemeDensity {\n  return selection.density === 'compact' ? 'compact' : 'comfortable'\n}\n\nexport type ThemeContextValue = {\n  /** The preference as stored. */\n  selection: () => ThemeSelection\n  /** What the preference resolves to right now, after `system`. */\n  resolvedAppearance: () => ThemeAppearance\n  /** The variant in use. */\n  variant: () => ThemeVariant\n  /** Update part of the preference. */\n  setSelection: (patch: Partial<ThemeSelection>) => void\n  /** The catalogue, so a picker does not import it separately. */\n  themes: readonly ThemeVariant[]\n  /**\n   * The accents the selected light/dark pair carries, offered beside the presets.\n   * Follows the selection: a different theme pair may offer different slots.\n   */\n  themeAccents: () => readonly AccentPreset[]\n}\n\nconst ThemeContext = createContext<ThemeContextValue>()\n\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext)\n  if (!value) throw new Error('useTheme must be called inside a <ThemeProvider>.')\n  return value\n}\n\n/**\n * The preference store, or nothing.\n *\n * Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a\n * privacy mode, a denied site-data permission — merely *reading* the `localStorage`\n * global throws (\"Access is denied\", `SecurityError`), so even the `typeof` guard\n * has to sit inside the `try` rather than in front of it. Without a store the\n * preference lives only in the provider's signal for the session.\n */\nfunction preferenceStore(): Storage | undefined {\n  return typeof localStorage === 'undefined' ? undefined : localStorage\n}\n\n/** The stored preference, validated against the catalogue. */\nfunction readSelection(storageKey: string): ThemeSelection {\n  try {\n    const raw = preferenceStore()?.getItem(storageKey)\n    if (!raw) return defaultThemeSelection\n    const parsed = JSON.parse(raw) as Partial<ThemeSelection>\n    return {\n      appearance:\n        parsed.appearance === 'light' ||\n        parsed.appearance === 'dark' ||\n        parsed.appearance === 'system'\n          ? parsed.appearance\n          : defaultThemeSelection.appearance,\n      // An unknown id would leave the document with no theme at all, so a stale\n      // preference from an older catalogue falls back rather than applying nothing.\n      lightThemeId:\n        themeById(parsed.lightThemeId ?? '')?.appearance === 'light'\n          ? (parsed.lightThemeId as string)\n          : defaultLightThemeId,\n      darkThemeId:\n        themeById(parsed.darkThemeId ?? '')?.appearance === 'dark'\n          ? (parsed.darkThemeId as string)\n          : defaultDarkThemeId,\n      // A theme accent is kept whenever it names a slot, even one the stored pair\n      // cannot offer: the id is role-shaped so it survives a theme switch, and an\n      // unoffered slot already resolves to the theme's own primary when applied.\n      accent:\n        typeof parsed.accent === 'string' &&\n        (accentPresets.some((preset) => preset.id === parsed.accent) ||\n          isThemeAccentId(parsed.accent))\n          ? parsed.accent\n          : defaultThemeSelection.accent,\n      font: fontOptions.some((option) => option.id === parsed.font)\n        ? (parsed.font as string)\n        : defaultThemeSelection.font,\n      // Every axis has to be read back here, or it is lost twice: the effect below\n      // removes the `data-density` that `themeScript` set for the first paint, and\n      // the next `setSelection` rewrites the store without it.\n      density: resolvedDensity(parsed as ThemeSelection),\n    }\n  } catch {\n    return defaultThemeSelection\n  }\n}\n\nexport type ThemeProviderProps = {\n  children?: JSX.Element\n  /** Where the preference is persisted. Distinct per application. */\n  storageKey?: string\n  /** Start from this instead of the stored preference. */\n  initial?: Partial<ThemeSelection>\n  /**\n   * The selection, owned by the caller.\n   *\n   * For a consumer that keeps the state itself — a settings store, or a workshop\n   * whose selection lives in Storybook globals — rather than handing it to this\n   * provider's signal. Each change lands here and the document follows; nothing is\n   * written to the store, because the caller is the one who persists. A picker\n   * below the provider still works, and its change is the caller's to read back.\n   *\n   * Absent, the provider is the whole owner: it reads `storageKey` on mount,\n   * seeds from `initial`, and persists every `setSelection`.\n   */\n  selection?: Partial<ThemeSelection>\n}\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const [local] = splitProps(props, ['children', 'storageKey', 'initial', 'selection'])\n  const storageKey = () => local.storageKey ?? 'adea-appearance'\n\n  const [selection, setSelectionState] = createSignal<ThemeSelection>({\n    ...readSelection(storageKey()),\n    ...local.initial,\n  })\n\n  // The controlled half of the contract. A patch from the owner replaces the\n  // matching axes; the stored preference is untouched, since the owner is the one\n  // that persists. Reading `local.selection` — a prop getter, not a destructured\n  // value — is what keeps this subscribed for the provider's lifetime.\n  createEffect(() => {\n    const incoming = local.selection\n    if (incoming) setSelectionState((current) => ({ ...current, ...incoming }))\n  })\n\n  const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')\n\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    const query = window.matchMedia('(prefers-color-scheme: dark)')\n    setSystemAppearance(query.matches ? 'dark' : 'light')\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemAppearance(event.matches ? 'dark' : 'light')\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  }\n\n  const resolvedAppearance = createMemo<ThemeAppearance>(() => {\n    const preference = selection().appearance\n    if (preference === 'system') return systemAppearance()\n    return preference\n  })\n\n  const variant = createMemo<ThemeVariant>(() => {\n    const id = resolvedAppearance() === 'dark' ? selection().darkThemeId : selection().lightThemeId\n    return themeById(id) ?? builtinThemes[0]!\n  })\n\n  createEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const active = variant()\n\n    // The variant's roles, as properties. `--primary` and `--ring` are written here\n    // too, and an accent selection is layered over them below.\n    //\n    // The accent is applied *here* rather than left to the `[data-accent]` blocks in\n    // `theme.css`, because this loop writes inline custom properties and an inline\n    // declaration outranks every stylesheet selector however specific it is. The\n    // blocks still exist and are still correct — they are what styles the window\n    // before this runs — but they cannot win from here, so leaving the accent to\n    // them meant the attribute was set, the rules were present, and nothing\n    // changed on screen.\n    const properties = { ...themeCssVariables(active) }\n    const accent = accentVariables(selection().accent, resolvedAppearance(), selection())\n    if (accent) Object.assign(properties, accent)\n\n    for (const [name, value] of Object.entries(properties)) {\n      root.style.setProperty(name, value)\n    }\n\n    root.classList.toggle('dark', resolvedAppearance() === 'dark')\n    root.dataset['theme'] = active.id\n    root.dataset['appearance'] = resolvedAppearance()\n    root.style.colorScheme = resolvedAppearance()\n\n    if (!accent) root.removeAttribute('data-accent')\n    else root.dataset['accent'] = selection().accent\n\n    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')\n    else root.dataset['font'] = selection().font\n\n    // Density is a pure token shift, so unlike the colour axes there is nothing to\n    // compute: the attribute selects a block in `theme.css`. It is applied here for\n    // the same reason as the others — this is the one place that knows what the\n    // current selection is, and it is the only writer of these attributes.\n    if (resolvedDensity(selection()) === 'comfortable') root.removeAttribute('data-density')\n    else root.dataset['density'] = resolvedDensity(selection())\n  })\n\n  const themeAccents = createMemo(() =>\n    themeAccentsFor(selection().lightThemeId, selection().darkThemeId)\n  )\n\n  const value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\n    themeAccents,\n    setSelection(patch) {\n      const next = { ...selection(), ...patch }\n      setSelectionState(next)\n      try {\n        preferenceStore()?.setItem(storageKey(), JSON.stringify(next))\n      } catch {\n        // A full, blocked or unavailable store must not break the switch: the\n        // preference simply does not survive the reload.\n      }\n    },\n  }\n\n  return <ThemeContext.Provider value={value}>{local.children}</ThemeContext.Provider>\n}\n\n/**\n * A string as a JavaScript literal that is also safe inside an inline `<script>`.\n *\n * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe\n * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag\n * early and everything after it is parsed as HTML. That is the classic inline-script\n * injection, and it is a real one even though the value is a developer-supplied prop\n * rather than user input — a prop can come from configuration, and a key that happens\n * to contain a closing tag should not be able to execute.\n *\n * The escape is also correct JavaScript: `\\u003c` is `<` to the parser, so the value\n * is byte-identical at runtime and inert to the HTML tokenizer. `\\u2028` and `\\u2029`\n * are escaped for the neighbouring reason — they are legal inside a JSON string and\n * were, before ES2019, line terminators to a JavaScript parser.\n *\n * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this\n * was found; `tests/theme-script.test.ts` pins it so it cannot come back.\n */\nexport function inlineScriptLiteral(value: string): string {\n  return JSON.stringify(value).replace(\n    /[<>\\u2028\\u2029]/g,\n    (character) => `\\\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`\n  )\n}\n\n/**\n * The no-flash script.\n *\n * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark\n * preference paints the light theme first and then swaps, which is the flash every\n * themed application has to solve and the one thing a provider cannot do from\n * inside the body.\n *\n * Deliberately tiny and dependency-free: it reads the stored preference, resolves\n * `system`, and sets the class. It does not apply the variant's roles — the default\n * theme in `theme.css` covers the first paint, and the provider writes the rest on\n * mount.\n *\n * The script reads two values out of `localStorage` and writes them to `dataset`,\n * which is a *property* assignment rather than code: a stored accent or font id can\n * set an attribute and cannot execute. The one value that reaches the source as text\n * is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason\n * documented there.\n */\nexport function themeScript(storageKey = 'adea-appearance'): string {\n  return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n}\n"],"mappings":"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"}

package/dist/r/catalog-browser.json

@@ -4,6 +4,7 @@
   "title": "Catalog Browser",
   "description": "",
   "dependencies": [
+    "class-variance-authority@^0.7.1",
     "lucide-solid@^1.48.0"
   ],
   "registryDependencies": [

package/dist/r/registry.json

@@ -1956,6 +1956,7 @@
       "title": "Catalog Browser",
       "description": "",
       "dependencies": [
+        "class-variance-authority@^0.7.1",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [

package/dist/r/src/components/composites/catalog-browser/catalog-detail.tsx

@@ -1,5 +1,27 @@
-import { createUniqueId, Show, type JSX } from 'solid-js'
+import { createContext, createUniqueId, Show, useContext, type JSX } from 'solid-js'
 import { Badge } from '../../ui/badge'
+import { cva } from 'class-variance-authority'
+
+type SectionsLayout = 'stacked' | 'columns'
+const SectionsLayoutContext = createContext<() => SectionsLayout>((): SectionsLayout => 'stacked')
+const sectionsVariants = cva('grid min-w-0', {
+  variants: {
+    layout: {
+      stacked: 'gap-2',
+      columns:
+        'gap-4 rounded-xl border border-border p-3 md:auto-cols-fr md:grid-flow-col md:gap-0',
+    },
+  },
+})
+const sectionVariants = cva('grid min-w-0 gap-1.5 wrap-anywhere', {
+  variants: {
+    layout: {
+      stacked: 'rounded-xl border border-border p-3',
+      columns:
+        'md:border-s md:border-border md:px-3 md:first:border-s-0 md:first:ps-0 md:last:pe-0',
+    },
+  },
+})
 
 /** Shared item summary and action frame for catalog-owned detail content. */
 export function CatalogDetail(props: {
@@ -13,6 +35,8 @@ export function CatalogDetail(props: {
   badges?: JSX.Element
   action?: JSX.Element
   status?: JSX.Element
+  /** Groups related fields in one padded card; stacks them on narrow screens. */
+  sectionsLayout?: SectionsLayout
   children?: JSX.Element
 }) {
   return (
@@ -40,19 +64,25 @@ export function CatalogDetail(props: {
           </div>
         </Show>
       </div>
-      <div class="grid min-w-0 gap-2">{props.children}</div>
+      <SectionsLayoutContext.Provider value={() => props.sectionsLayout ?? 'stacked'}>
+        <div
+          data-catalog-detail-sections
+          data-layout={props.sectionsLayout ?? 'stacked'}
+          class={sectionsVariants({ layout: props.sectionsLayout ?? 'stacked' })}
+        >
+          {props.children}
+        </div>
+      </SectionsLayoutContext.Provider>
     </article>
   )
 }
 
 /** A shared compact row for host-specific fields, permissions, and copy. */
 export function CatalogDetailSection(props: { title: string; children?: JSX.Element }) {
+  const layout = useContext(SectionsLayoutContext)
   const headingId = `catalog-detail-section-${createUniqueId()}`
   return (
-    <section
-      class="grid min-w-0 gap-1.5 rounded-xl border border-border p-3"
-      aria-labelledby={headingId}
-    >
+    <section class={sectionVariants({ layout: layout() })} aria-labelledby={headingId}>
       <h3
         id={headingId}
         class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase"

package/dist/r/src/components/layout/split-layout/split-layout.tsx

@@ -17,6 +17,8 @@ import { computeLayoutFrames, type LayoutRect } from './geometry'
 import { paneDropIntent, type PaneDropIntent } from './drop'
 export type { PaneDropIntent } from './drop'
 const PANE_DRAG_TYPE = 'application/x-adea-pane-move'
+const DRAG_PREVIEW_MAX_WIDTH = 384
+const DRAG_PREVIEW_MAX_HEIGHT = 256
 import {
   listLeaves,
   MIN_SPLIT_RATIO,
@@ -57,6 +59,114 @@ function rectStyle(rect: LayoutRect): JSX.CSSProperties {
     height: `${rect.height * 100}%`,
   }
 }
+function dragPreviewPlaceholder(source: HTMLElement, message: string) {
+  const placeholder = document.createElement('div')
+  placeholder.className = cn(
+    source.getAttribute('class'),
+    'flex min-h-8 min-w-0 items-center justify-center bg-muted px-2 text-center text-xs text-muted-foreground'
+  )
+  placeholder.setAttribute('data-split-drag-placeholder', source.localName)
+  placeholder.textContent = message
+  return placeholder
+}
+function boundedSnapshotSize(width: number, height: number) {
+  const sourceWidth = Math.max(1, width)
+  const sourceHeight = Math.max(1, height)
+  const scale = Math.min(
+    1,
+    DRAG_PREVIEW_MAX_WIDTH / sourceWidth,
+    DRAG_PREVIEW_MAX_HEIGHT / sourceHeight
+  )
+  return {
+    width: Math.max(1, Math.round(sourceWidth * scale)),
+    height: Math.max(1, Math.round(sourceHeight * scale)),
+  }
+}
+function cloneDragPreviewNode(source: Node): Node | undefined {
+  if (source.nodeType === Node.TEXT_NODE) return source.cloneNode(false)
+  if (!(source instanceof HTMLElement || source instanceof SVGElement))
+    return source.cloneNode(false)
+
+  if (['script', 'style', 'link', 'source', 'track', 'meta'].includes(source.localName))
+    return undefined
+  if (['iframe', 'video', 'audio', 'object', 'embed'].includes(source.localName))
+    return dragPreviewPlaceholder(
+      source as HTMLElement,
+      'Embedded content unavailable while moving'
+    )
+  if (source instanceof HTMLImageElement) {
+    const snapshot = document.createElement('canvas')
+    const size = boundedSnapshotSize(
+      source.naturalWidth || source.width,
+      source.naturalHeight || source.height
+    )
+    snapshot.width = size.width
+    snapshot.height = size.height
+    snapshot.className = source.getAttribute('class') ?? ''
+    snapshot.setAttribute('data-split-drag-image', '')
+    try {
+      if (!source.complete || source.naturalWidth === 0)
+        throw new Error('image has no decoded pixels')
+      const context = snapshot.getContext('2d')
+      if (!context) throw new Error('canvas snapshot context is unavailable')
+      context.drawImage(source, 0, 0, snapshot.width, snapshot.height)
+      return snapshot
+    } catch {
+      return dragPreviewPlaceholder(source, 'Image preview unavailable')
+    }
+  }
+
+  // Copying a defined custom element can run its constructor; inserting it can
+  // also reconnect a stream or terminal session. Flatten its display tree.
+  if (source instanceof HTMLElement && source.localName.includes('-')) {
+    const children = document.createDocumentFragment()
+    for (const child of source.childNodes) {
+      const clone = cloneDragPreviewNode(child)
+      if (clone) children.append(clone)
+    }
+    return children.childNodes.length > 0
+      ? children
+      : dragPreviewPlaceholder(source, 'Live component preview unavailable while moving')
+  }
+
+  const clone = source.cloneNode(false) as HTMLElement | SVGElement
+  for (const attribute of [
+    'id',
+    'style',
+    'draggable',
+    'data-pane-drag-handle',
+    'data-pane-id',
+    'src',
+    'srcset',
+    'href',
+    'xlink:href',
+    'data',
+    'poster',
+  ])
+    clone.removeAttribute(attribute)
+  for (const attribute of Array.from(clone.attributes))
+    if (/^on/i.test(attribute.name)) clone.removeAttribute(attribute.name)
+
+  if (source instanceof HTMLCanvasElement && clone instanceof HTMLCanvasElement) {
+    const size = boundedSnapshotSize(source.width, source.height)
+    clone.width = size.width
+    clone.height = size.height
+    try {
+      const context = clone.getContext('2d')
+      if (!context) throw new Error('canvas snapshot context is unavailable')
+      context.drawImage(source, 0, 0, clone.width, clone.height)
+    } catch {
+      return dragPreviewPlaceholder(source, 'Canvas preview unavailable while moving')
+    }
+    return clone
+  }
+
+  for (const child of source.childNodes) {
+    const childClone = cloneDragPreviewNode(child)
+    if (childClone) clone.append(childClone)
+  }
+  return clone
+}
 /** Muxy frame geometry keeps leaf owners stable; Corvu owns constrained separator interactions. */
 export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L>) {
   let root: HTMLDivElement | undefined
@@ -66,11 +176,35 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
   const prefix = createUniqueId()
   let nextDomId = 0
   let nextDragId = 0
+  let dragPreview: HTMLElement | undefined
   const [drag, setDrag] = createSignal<{ id: string; token: string }>()
   const [drop, setDrop] = createSignal<{ id: string; intent: PaneDropIntent }>()
   const clearDrag = () => {
     setDrag(undefined)
     setDrop(undefined)
+    dragPreview?.remove()
+    dragPreview = undefined
+  }
+  const createDragPreview = (source: HTMLElement) => {
+    dragPreview?.remove()
+    const preview = cloneDragPreviewNode(source) as HTMLElement
+    preview.className =
+      'pointer-events-none fixed -left-full top-0 z-(--z-dialog) flex h-64 max-h-screen w-96 max-w-screen min-h-0 min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl'
+    preview.removeAttribute('id')
+    preview.removeAttribute('style')
+    preview.removeAttribute('role')
+    preview.removeAttribute('aria-label')
+    preview.removeAttribute('data-pane-id')
+    preview.removeAttribute('data-focused')
+    preview.removeAttribute('data-drag-source')
+    preview.removeAttribute('data-drop-direction')
+    preview.removeAttribute('data-drop-placement')
+    preview.setAttribute('data-split-drag-preview', '')
+    preview.setAttribute('aria-hidden', 'true')
+    preview.inert = true
+    document.body.append(preview)
+    dragPreview = preview
+    return preview
   }
   const domId = (id: string) => {
     const existing = domIds.get(id)
@@ -236,7 +370,7 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
                 props.onMove?.(current.id, id, next)
               }}
               style={rectStyle(frames().get(id)?.rect ?? { x: 0, y: 0, width: 0, height: 0 })}
-              class="absolute flex min-h-0 min-w-0 flex-col overflow-hidden border border-border transition-opacity data-[drag-source]:opacity-40 data-[focused]:border-primary bg-background text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+              class="absolute flex min-h-0 min-w-0 flex-col overflow-hidden border border-border transition-opacity motion-reduce:transition-none data-[drag-source]:opacity-40 data-[focused]:border-primary bg-background text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
               onFocusIn={() => props.onFocus?.(id)}
             >
               <header class="flex min-w-0 shrink-0 items-center gap-2 bg-surface px-2">
@@ -245,6 +379,7 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
                   draggable={Boolean(props.onMove)}
                   class={cn('flex min-w-0 flex-1 items-center gap-2 truncate text-sm', {
                     'cursor-grab': Boolean(props.onMove),
+                    'cursor-grabbing': drag()?.id === id,
                   })}
                   title={props.onMove ? `Drag ${props.labelForLeaf(leaf())} to move` : undefined}
                   onDragStart={(event) => {
@@ -256,18 +391,23 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
                     setDrag({ id, token })
                     event.dataTransfer.setData(PANE_DRAG_TYPE, token)
                     event.dataTransfer.effectAllowed = 'move'
-                    // The ghost is the pane itself, not the handle strip: the
-                    // browser snapshots the region before the drag state dims
-                    // this section, so the dragged pane stays readable while
-                    // its source visibly recedes.
+                    // The native drag image carries this pane's actual content
+                    // in a bounded floating-window frame; the source recedes
+                    // independently as the browser follows the image pointer.
                     const source = refs.get(id)
                     const frame = source?.getBoundingClientRect()
-                    if (source && frame && typeof event.dataTransfer.setDragImage === 'function')
+                    if (source && frame && typeof event.dataTransfer.setDragImage === 'function') {
+                      const preview = createDragPreview(source)
+                      const previewFrame = preview.getBoundingClientRect()
+                      const scaleX = previewFrame.width / frame.width
+                      const scaleY = previewFrame.height / frame.height
                       event.dataTransfer.setDragImage(
-                        source,
-                        Math.max(0, Math.round(event.clientX - frame.left)),
-                        Math.max(0, Math.round(event.clientY - frame.top))
+                        preview,
+                        Math.max(0, Math.round((event.clientX - frame.left) * scaleX)),
+                        Math.max(0, Math.round((event.clientY - frame.top) * scaleY))
                       )
+                      preview.setAttribute('data-native-drag-image', '')
+                    }
                   }}
                   onDragEnd={clearDrag}
                 >

package/dist/r/src/components/theme/theme-provider.tsx

@@ -182,6 +182,10 @@ function readSelection(storageKey: string): ThemeSelection {
       font: fontOptions.some((option) => option.id === parsed.font)
         ? (parsed.font as string)
         : defaultThemeSelection.font,
+      // Every axis has to be read back here, or it is lost twice: the effect below
+      // removes the `data-density` that `themeScript` set for the first paint, and
+      // the next `setSelection` rewrites the store without it.
+      density: resolvedDensity(parsed as ThemeSelection),
     }
   } catch {
     return defaultThemeSelection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.103.0",
+  "version": "0.104.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -1956,6 +1956,7 @@
       "title": "Catalog Browser",
       "description": "",
       "dependencies": [
+        "class-variance-authority@^0.7.1",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [

package/src/components/composites/catalog-browser/catalog-detail.tsx

@@ -1,5 +1,27 @@
-import { createUniqueId, Show, type JSX } from 'solid-js'
+import { createContext, createUniqueId, Show, useContext, type JSX } from 'solid-js'
 import { Badge } from '../../ui/badge'
+import { cva } from 'class-variance-authority'
+
+type SectionsLayout = 'stacked' | 'columns'
+const SectionsLayoutContext = createContext<() => SectionsLayout>((): SectionsLayout => 'stacked')
+const sectionsVariants = cva('grid min-w-0', {
+  variants: {
+    layout: {
+      stacked: 'gap-2',
+      columns:
+        'gap-4 rounded-xl border border-border p-3 md:auto-cols-fr md:grid-flow-col md:gap-0',
+    },
+  },
+})
+const sectionVariants = cva('grid min-w-0 gap-1.5 wrap-anywhere', {
+  variants: {
+    layout: {
+      stacked: 'rounded-xl border border-border p-3',
+      columns:
+        'md:border-s md:border-border md:px-3 md:first:border-s-0 md:first:ps-0 md:last:pe-0',
+    },
+  },
+})
 
 /** Shared item summary and action frame for catalog-owned detail content. */
 export function CatalogDetail(props: {
@@ -13,6 +35,8 @@ export function CatalogDetail(props: {
   badges?: JSX.Element
   action?: JSX.Element
   status?: JSX.Element
+  /** Groups related fields in one padded card; stacks them on narrow screens. */
+  sectionsLayout?: SectionsLayout
   children?: JSX.Element
 }) {
   return (
@@ -40,19 +64,25 @@ export function CatalogDetail(props: {
           </div>
         </Show>
       </div>
-      <div class="grid min-w-0 gap-2">{props.children}</div>
+      <SectionsLayoutContext.Provider value={() => props.sectionsLayout ?? 'stacked'}>
+        <div
+          data-catalog-detail-sections
+          data-layout={props.sectionsLayout ?? 'stacked'}
+          class={sectionsVariants({ layout: props.sectionsLayout ?? 'stacked' })}
+        >
+          {props.children}
+        </div>
+      </SectionsLayoutContext.Provider>
     </article>
   )
 }
 
 /** A shared compact row for host-specific fields, permissions, and copy. */
 export function CatalogDetailSection(props: { title: string; children?: JSX.Element }) {
+  const layout = useContext(SectionsLayoutContext)
   const headingId = `catalog-detail-section-${createUniqueId()}`
   return (
-    <section
-      class="grid min-w-0 gap-1.5 rounded-xl border border-border p-3"
-      aria-labelledby={headingId}
-    >
+    <section class={sectionVariants({ layout: layout() })} aria-labelledby={headingId}>
       <h3
         id={headingId}
         class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase"