@adea-ai/ui 0.101.1 → 0.103.0

package/dist/components/theme/appearance-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-panel.js","names":["ComponentProps","For","Show","splitProps","accentPresets","fontOptions","themesForAppearance","cn","Button","RadioGroup","RadioGroupItem","ThemePicker","useTheme","Heading","AppearancePanelProps","LIGHT_THEMES","DARK_THEMES","AppearancePanel","props","local","rest","selection","setSelection","resolvedAppearance","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","value","appearance","onChange","label","description","when","ThemeSection","title","themes","selectedId","lightThemeId","onThemeSelect","theme","id","darkThemeId","each","preset","type","variant","role","aria-checked","accent","aria-label","onClick","_el$10","_tmpl$2","_$effect","_$p","_$setStyleProperty","dark","_$memo","font","option","ReturnType","_el$11","_tmpl$3","_el$12","_el$13","_$mergeProps","_$createComponent","_$setStyleProperty","_$memo"],"sources":["../../../src/components/theme/appearance-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport { themesForAppearance } from '#lib/themes'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\nimport { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'\nimport { ThemePicker } from './theme-picker'\nimport { useTheme } from './theme-provider'\nimport { Heading } from '../ui/typography'\n\n/**\n * AppearancePanel.\n *\n * The appearance page, as a component rather than as a screen each application\n * draws for itself. Two applications that both let a user choose a theme should\n * offer the *same* choices in the *same* arrangement — otherwise \"Adea\" and\n * \"Cortana\" are two products that happen to share a component library, which is\n * the opposite of what this system is for.\n *\n * Four axes, in the order a user thinks about them:\n *\n *   1. **Appearance** — light, dark, or follow the system.\n *   2. **Themes** — one for each appearance. Both are shown at once, because the\n *      choice is per-appearance and hiding the other half makes it feel like one\n *      setting that keeps changing.\n *   3. **Accent** — adea's presets, layered on whichever theme is active.\n *   4. **Font** — the interface face.\n *\n * The panel reads and writes the provider's preference and keeps no state of its\n * own, so it cannot disagree with what is applied.\n */\nexport type AppearancePanelProps = ComponentProps<'div'>\n\nconst LIGHT_THEMES = themesForAppearance('light')\nconst DARK_THEMES = themesForAppearance('dark')\n\nexport function AppearancePanel(props: AppearancePanelProps) {\n  const [local, rest] = splitProps(props, ['class'])\n  const { selection, setSelection, resolvedAppearance } = useTheme()\n\n  return (\n    <div data-slot=\"appearance-panel\" class={cn('flex flex-col gap-8', local.class)} {...rest}>\n      {/* --- 1. Appearance ------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Appearance\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Follow the system, or pin one. The theme below is chosen per appearance, so switching at\n            sunset does not make you choose again.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().appearance}\n          onChange={(value) => setSelection({ appearance: value as 'light' | 'dark' | 'system' })}\n          aria-label=\"Appearance\"\n        >\n          <RadioGroupItem value=\"light\" label=\"Light\" description=\"Always the light theme.\" />\n          <RadioGroupItem value=\"dark\" label=\"Dark\" description=\"Always the dark theme.\" />\n          <RadioGroupItem\n            value=\"system\"\n            label=\"Match the system\"\n            description={`Currently resolving to ${resolvedAppearance()}.`}\n          />\n        </RadioGroup>\n      </section>\n\n      {/* --- 2. Themes ------------------------------------------------------ */}\n      <Show when={resolvedAppearance() === 'light'}>\n        <ThemeSection\n          title=\"Light theme\"\n          description=\"Shown when the appearance resolves to light.\"\n          themes={LIGHT_THEMES}\n          selectedId={selection().lightThemeId}\n          onThemeSelect={(theme) => setSelection({ lightThemeId: theme.id })}\n        />\n      </Show>\n      <Show when={resolvedAppearance() === 'dark'}>\n        <ThemeSection\n          title=\"Dark theme\"\n          description=\"Shown when the appearance resolves to dark.\"\n          themes={DARK_THEMES}\n          selectedId={selection().darkThemeId}\n          onThemeSelect={(theme) => setSelection({ darkThemeId: theme.id })}\n        />\n      </Show>\n\n      {/* --- 3. Accent ------------------------------------------------------ */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Accent\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Colours the interactive roles — the primary button, the focus ring, a selected row — on\n            top of the theme above. Every preset is measured against the surface it lands on, so\n            none of them can make a label unreadable.\n          </p>\n        </header>\n        <div role=\"radiogroup\" aria-label=\"Accent\" class=\"flex flex-wrap gap-2\">\n          <For each={accentPresets}>\n            {(preset) => (\n              <Button\n                as=\"button\"\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                role=\"radio\"\n                aria-checked={selection().accent === preset.id}\n                aria-label={preset.label}\n                class={cn({\n                  'border-ring ring-3 ring-primary-subtle': selection().accent === preset.id,\n                })}\n                onClick={() => setSelection({ accent: preset.id })}\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"size-3 rounded-full border border-border\"\n                  style={{\n                    'background-color':\n                      preset.id === 'theme'\n                        ? 'var(--primary)'\n                        : `var(--accent-${preset.id}, ${preset.dark})`,\n                  }}\n                />\n                {preset.label}\n              </Button>\n            )}\n          </For>\n        </div>\n      </section>\n\n      {/* --- 4. Font -------------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Typeface\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            The interface face. Every option is self-hosted, so nothing is fetched at runtime and\n            the choice survives going offline.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().font}\n          onChange={(value) => setSelection({ font: value as string })}\n          aria-label=\"Typeface\"\n        >\n          <For each={fontOptions}>\n            {(option) => (\n              <RadioGroupItem\n                value={option.id}\n                label={option.label}\n                description={option.description}\n              />\n            )}\n          </For>\n        </RadioGroup>\n      </section>\n    </div>\n  )\n}\n\nfunction ThemeSection(props: {\n  title: string\n  description: string\n  themes: ReturnType<typeof themesForAppearance>\n  selectedId: string\n  onThemeSelect: (theme: ReturnType<typeof themesForAppearance>[number]) => void\n}) {\n  return (\n    <section class=\"flex flex-col gap-3\">\n      <header class=\"flex flex-col gap-0.5\">\n        <Heading as=\"h2\" size=\"card\">\n          {props.title}\n        </Heading>\n        <p class=\"max-w-prose text-sm text-muted-foreground\">{props.description}</p>\n      </header>\n      <ThemePicker\n        themes={props.themes}\n        selectedId={props.selectedId}\n        onThemeSelect={props.onThemeSelect}\n      />\n    </section>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"appearance-panel.js","names":["ComponentProps","For","Show","splitProps","accentPresets","fontOptions","themesForAppearance","cn","Button","RadioGroup","RadioGroupItem","ThemePicker","useTheme","Heading","AppearancePanelProps","LIGHT_THEMES","DARK_THEMES","AppearancePanel","props","local","rest","selection","setSelection","resolvedAppearance","themeAccents","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","value","appearance","onChange","label","description","when","ThemeSection","title","themes","selectedId","lightThemeId","onThemeSelect","theme","id","darkThemeId","each","preset","AccentOption","checked","accent","swatch","_$memo","dark","onSelect","toLowerCase","light","font","option","type","variant","role","data-accent-option","aria-checked","aria-label","onClick","_el$10","_tmpl$2","_$effect","_$p","_$setStyleProperty","ReturnType","_el$11","_tmpl$3","_el$12","_el$13","_$mergeProps","_$createComponent","_$memo","_$setStyleProperty"],"sources":["../../../src/components/theme/appearance-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport { themesForAppearance } from '#lib/themes'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\nimport { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'\nimport { ThemePicker } from './theme-picker'\nimport { useTheme } from './theme-provider'\nimport { Heading } from '../ui/typography'\n\n/**\n * AppearancePanel.\n *\n * The appearance page, as a component rather than as a screen each application\n * draws for itself. Two applications that both let a user choose a theme should\n * offer the *same* choices in the *same* arrangement — otherwise \"Adea\" and\n * \"Cortana\" are two products that happen to share a component library, which is\n * the opposite of what this system is for.\n *\n * Four axes, in the order a user thinks about them:\n *\n *   1. **Appearance** — light, dark, or follow the system.\n *   2. **Themes** — one for each appearance. Both are shown at once, because the\n *      choice is per-appearance and hiding the other half makes it feel like one\n *      setting that keeps changing.\n *   3. **Accent** — adea's presets, then the accents the selected theme pair\n *      carries itself, layered on whichever theme is active.\n *   4. **Font** — the interface face.\n *\n * The panel reads and writes the provider's preference and keeps no state of its\n * own, so it cannot disagree with what is applied.\n */\nexport type AppearancePanelProps = ComponentProps<'div'>\n\nconst LIGHT_THEMES = themesForAppearance('light')\nconst DARK_THEMES = themesForAppearance('dark')\n\nexport function AppearancePanel(props: AppearancePanelProps) {\n  const [local, rest] = splitProps(props, ['class'])\n  const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()\n\n  return (\n    <div data-slot=\"appearance-panel\" class={cn('flex flex-col gap-8', local.class)} {...rest}>\n      {/* --- 1. Appearance ------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Appearance\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Follow the system, or pin one. The theme below is chosen per appearance, so switching at\n            sunset does not make you choose again.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().appearance}\n          onChange={(value) => setSelection({ appearance: value as 'light' | 'dark' | 'system' })}\n          aria-label=\"Appearance\"\n        >\n          <RadioGroupItem value=\"light\" label=\"Light\" description=\"Always the light theme.\" />\n          <RadioGroupItem value=\"dark\" label=\"Dark\" description=\"Always the dark theme.\" />\n          <RadioGroupItem\n            value=\"system\"\n            label=\"Match the system\"\n            description={`Currently resolving to ${resolvedAppearance()}.`}\n          />\n        </RadioGroup>\n      </section>\n\n      {/* --- 2. Themes ------------------------------------------------------ */}\n      <Show when={resolvedAppearance() === 'light'}>\n        <ThemeSection\n          title=\"Light theme\"\n          description=\"Shown when the appearance resolves to light.\"\n          themes={LIGHT_THEMES}\n          selectedId={selection().lightThemeId}\n          onThemeSelect={(theme) => setSelection({ lightThemeId: theme.id })}\n        />\n      </Show>\n      <Show when={resolvedAppearance() === 'dark'}>\n        <ThemeSection\n          title=\"Dark theme\"\n          description=\"Shown when the appearance resolves to dark.\"\n          themes={DARK_THEMES}\n          selectedId={selection().darkThemeId}\n          onThemeSelect={(theme) => setSelection({ darkThemeId: theme.id })}\n        />\n      </Show>\n\n      {/* --- 3. Accent ------------------------------------------------------ */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Accent\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            Colours the interactive roles — the primary button, the focus ring, a selected row — on\n            top of the theme above — one of the presets, or a colour the theme carries itself. Every\n            option is measured against the surface it lands on, so none of them can make a label\n            unreadable.\n          </p>\n        </header>\n        <div role=\"radiogroup\" aria-label=\"Accent\" class=\"flex flex-wrap gap-2\">\n          <For each={accentPresets}>\n            {(preset) => (\n              <AccentOption\n                id={preset.id}\n                label={preset.label}\n                checked={selection().accent === preset.id}\n                swatch={\n                  preset.id === 'theme'\n                    ? 'var(--primary)'\n                    : `var(--accent-${preset.id}, ${preset.dark})`\n                }\n                onSelect={() => setSelection({ accent: preset.id })}\n              />\n            )}\n          </For>\n          {/* The theme's own accents follow the presets. Their values are the\n              theme pair's, so the swatch shows the side that is active now. */}\n          <For each={themeAccents()}>\n            {(accent) => (\n              <AccentOption\n                id={accent.id}\n                label={`Theme ${accent.label.toLowerCase()}`}\n                checked={selection().accent === accent.id}\n                swatch={resolvedAppearance() === 'dark' ? accent.dark : accent.light}\n                onSelect={() => setSelection({ accent: accent.id })}\n              />\n            )}\n          </For>\n        </div>\n      </section>\n\n      {/* --- 4. Font -------------------------------------------------------- */}\n      <section class=\"flex flex-col gap-3\">\n        <header class=\"flex flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            Typeface\n          </Heading>\n          <p class=\"max-w-prose text-sm text-muted-foreground\">\n            The interface face. Every option is self-hosted, so nothing is fetched at runtime and\n            the choice survives going offline.\n          </p>\n        </header>\n        <RadioGroup\n          value={selection().font}\n          onChange={(value) => setSelection({ font: value as string })}\n          aria-label=\"Typeface\"\n        >\n          <For each={fontOptions}>\n            {(option) => (\n              <RadioGroupItem\n                value={option.id}\n                label={option.label}\n                description={option.description}\n              />\n            )}\n          </For>\n        </RadioGroup>\n      </section>\n    </div>\n  )\n}\n\nfunction AccentOption(props: {\n  id: string\n  label: string\n  checked: boolean\n  swatch: string\n  onSelect: () => void\n}) {\n  return (\n    <Button\n      as=\"button\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"sm\"\n      role=\"radio\"\n      data-accent-option={props.id}\n      aria-checked={props.checked}\n      aria-label={props.label}\n      class={cn({ 'border-ring ring-3 ring-primary-subtle': props.checked })}\n      onClick={() => props.onSelect()}\n    >\n      <span\n        aria-hidden=\"true\"\n        class=\"size-3 rounded-full border border-border\"\n        style={{ 'background-color': props.swatch }}\n      />\n      {props.label}\n    </Button>\n  )\n}\n\nfunction ThemeSection(props: {\n  title: string\n  description: string\n  themes: ReturnType<typeof themesForAppearance>\n  selectedId: string\n  onThemeSelect: (theme: ReturnType<typeof themesForAppearance>[number]) => void\n}) {\n  return (\n    <section class=\"flex flex-col gap-3\">\n      <header class=\"flex flex-col gap-0.5\">\n        <Heading as=\"h2\" size=\"card\">\n          {props.title}\n        </Heading>\n        <p class=\"max-w-prose text-sm text-muted-foreground\">{props.description}</p>\n      </header>\n      <ThemePicker\n        themes={props.themes}\n        selectedId={props.selectedId}\n        onThemeSelect={props.onThemeSelect}\n      />\n    </section>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAmCA,IAAMe,eAAeT,oBAAoB,OAAO;AAChD,IAAMU,cAAcV,oBAAoB,MAAM;AAE9C,SAAgBW,gBAAgBC,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQjB,WAAWe,OAAO,CAAC,OAAO,CAAC;CACjD,MAAM,EAAEG,WAAWC,cAAcC,oBAAoBC,iBAAiBZ,SAAS;CAE/E,cAAA;EAAA,IAAAa,OAAAC,OAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAD,YAAAG,QAAAJ,MAAAK,aAAAC,QAAAF,MAAAH,YAAAM,QAAAD,MAAAL,YAAAO,QAAAF,MAAAD,aAAAI,QAAAL,MAAAC,aAAAK,QAAAD,MAAAR,YAAAU,QAAAD,MAAAT;EAAAW,OAAAd,MAAAe,WAAA,EAAA,KAAA,WAAA;GAAA,OAC2CjC,GAAG,uBAAuBY,MAAMsB,KAAK;EAAC,EAAA,GAAMrB,IAAI,GAAA,OAAA,IAAA;EAAAsB,OAAAb,OAAAc,gBAIlF9B,SAAO;GAAC+B,IAAE;GAAMC,MAAI;GAAAC,UAAA;EAAA,CAAA,GAAAhB,KAAA;EAAAY,OAAAf,OAAAgB,gBAQtBlC,YAAU;GAAA,IACTsC,QAAK;IAAA,OAAE1B,UAAU,CAAC,CAAC2B;GAAU;GAC7BC,WAAWF,UAAUzB,aAAa,EAAE0B,YAAYD,MAAqC,CAAC;GAAC,cAAA;GAAA,IAAAD,WAAA;IAAA,OAAA;KAAAH,gBAGtFjC,gBAAc;MAACqC,OAAK;MAASG,OAAK;MAASC,aAAW;KAAA,CAAA;KAAAR,gBACtDjC,gBAAc;MAACqC,OAAK;MAAQG,OAAK;MAAQC,aAAW;KAAA,CAAA;KAAAR,gBACpDjC,gBAAc;MACbqC,OAAK;MACLG,OAAK;MAAA,IACLC,cAAW;OAAA,OAAE,0BAA0B5B,mBAAmB,EAAC;MAAG;KAAA,CAAA;IAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAmB,OAAAjB,MAAAkB,gBAMnEzC,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE7B,mBAAmB,MAAM;GAAO;GAAA,IAAAuB,WAAA;IAAA,OAAAH,gBACzCU,cAAY;KACXC,OAAK;KACLH,aAAW;KACXI,QAAQxC;KAAY,IACpByC,aAAU;MAAA,OAAEnC,UAAU,CAAC,CAACoC;KAAY;KACpCC,gBAAgBC,UAAUrC,aAAa,EAAEmC,cAAcE,MAAMC,GAAG,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAA7B,KAAA;EAAAW,OAAAjB,MAAAkB,gBAGrEzC,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE7B,mBAAmB,MAAM;GAAM;GAAA,IAAAuB,WAAA;IAAA,OAAAH,gBACxCU,cAAY;KACXC,OAAK;KACLH,aAAW;KACXI,QAAQvC;KAAW,IACnBwC,aAAU;MAAA,OAAEnC,UAAU,CAAC,CAACwC;KAAW;KACnCH,gBAAgBC,UAAUrC,aAAa,EAAEuC,aAAaF,MAAMC,GAAG,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAA7B,KAAA;EAAAW,OAAAT,OAAAU,gBAOhE9B,SAAO;GAAC+B,IAAE;GAAMC,MAAI;GAAAC,UAAA;EAAA,CAAA,GAAAZ,KAAA;EAAAQ,OAAAP,OAAAQ,gBAWpB1C,KAAG;GAAC6D,MAAM1D;GAAa0C,WACpBiB,WAAMpB,gBACLqB,cAAY;IAAA,IACXJ,KAAE;KAAA,OAAEG,OAAOH;IAAE;IAAA,IACbV,QAAK;KAAA,OAAEa,OAAOb;IAAK;IAAA,IACnBe,UAAO;KAAA,OAAE5C,UAAU,CAAC,CAAC6C,WAAWH,OAAOH;IAAE;IAAA,IACzCO,SAAM;KAAA,OACJC,WAAAL,OAAOH,OAAO,OAAO,CAAA,CAAA,IACjB,mBACA,gBAAgBG,OAAOH,GAAE,IAAKG,OAAOM,KAAI;IAAG;IAElDC,gBAAgBhD,aAAa,EAAE4C,QAAQH,OAAOH,GAAG,CAAC;GAAC,CAAA;EAEtD,CAAA,GAAA,IAAA;EAAAlB,OAAAP,OAAAQ,gBAIF1C,KAAG;GAAA,IAAC6D,OAAI;IAAA,OAAEtC,aAAa;GAAC;GAAAsB,WACrBoB,WAAMvB,gBACLqB,cAAY;IAAA,IACXJ,KAAE;KAAA,OAAEM,OAAON;IAAE;IAAA,IACbV,QAAK;KAAA,OAAE,SAASgB,OAAOhB,MAAMqB,YAAY;IAAG;IAAA,IAC5CN,UAAO;KAAA,OAAE5C,UAAU,CAAC,CAAC6C,WAAWA,OAAON;IAAE;IAAA,IACzCO,SAAM;KAAA,OAAEC,WAAA7C,mBAAmB,MAAM,MAAM,CAAA,CAAA,IAAG2C,OAAOG,OAAOH,OAAOM;IAAK;IACpEF,gBAAgBhD,aAAa,EAAE4C,QAAQA,OAAON,GAAG,CAAC;GAAC,CAAA;EAEtD,CAAA,GAAA,IAAA;EAAAlB,OAAAL,OAAAM,gBAQF9B,SAAO;GAAC+B,IAAE;GAAMC,MAAI;GAAAC,UAAA;EAAA,CAAA,GAAAR,KAAA;EAAAI,OAAAN,OAAAO,gBAQtBlC,YAAU;GAAA,IACTsC,QAAK;IAAA,OAAE1B,UAAU,CAAC,CAACoD;GAAI;GACvBxB,WAAWF,UAAUzB,aAAa,EAAEmD,MAAM1B,MAAgB,CAAC;GAAC,cAAA;GAAA,IAAAD,WAAA;IAAA,OAAAH,gBAG3D1C,KAAG;KAAC6D,MAAMzD;KAAWyC,WAClB4B,WAAM/B,gBACLjC,gBAAc;MAAA,IACbqC,QAAK;OAAA,OAAE2B,OAAOd;MAAE;MAAA,IAChBV,QAAK;OAAA,OAAEwB,OAAOxB;MAAK;MAAA,IACnBC,cAAW;OAAA,OAAEuB,OAAOvB;MAAW;KAAA,CAAA;IAElC,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAA1B;CAAA,EAAA,CAAA;AAMb;AAEA,SAASuC,aAAa9C,OAMnB;CACD,OAAAyB,gBACGnC,QAAM;EACLoC,IAAE;EACF+B,MAAI;EACJC,SAAO;EACP/B,MAAI;EACJgC,MAAI;EAAA,KAAA,wBAAA;GAAA,OACgB3D,MAAM0C;EAAE;EAAA,KAAA,kBAAA;GAAA,OACd1C,MAAM+C;EAAO;EAAA,KAAA,gBAAA;GAAA,OACf/C,MAAMgC;EAAK;EAAA,KAAA,WAAA;GAAA,OAChB3C,GAAG,EAAE,0CAA0CW,MAAM+C,QAAQ,CAAC;EAAC;EACtEgB,eAAe/D,MAAMoD,SAAS;EAAC,IAAAxB,WAAA;GAAA,OAAA,QAAA;IAAA,IAAAoC,SAAAC,QAAA;IAAAC,QAAAC,QAAAC,iBAAAJ,QAAA,oBAKAhE,MAAMiD,MAAM,CAAA;IAAA,OAAAe;GAAA,EAAA,CAAA,GAAAd,WAE1ClD,MAAMgC,KAAK,CAAA;EAAA;CAAA,CAAA;AAGlB;AAEA,SAASG,aAAanC,OAMnB;CACD,cAAA;EAAA,IAAAsE,SAAAC,QAAA,GAAAC,SAAAF,OAAA5D,YAAA+D,SAAAD,OAAA9D;EAAAc,OAAAgD,QAAA/C,gBAGO9B,SAAO;GAAC+B,IAAE;GAAMC,MAAI;GAAA,IAAAC,WAAA;IAAA,OAClB5B,MAAMoC;GAAK;EAAA,CAAA,GAAAqC,MAAA;EAAAjD,OAAAiD,cAEwCzE,MAAMiC,WAAW;EAAAT,OAAA8C,QAAA7C,gBAExEhC,aAAW;GAAA,IACV4C,SAAM;IAAA,OAAErC,MAAMqC;GAAM;GAAA,IACpBC,aAAU;IAAA,OAAEtC,MAAMsC;GAAU;GAAA,IAC5BE,gBAAa;IAAA,OAAExC,MAAMwC;GAAa;EAAA,CAAA,GAAA,IAAA;EAAA,OAAA8B;CAAA,EAAA,CAAA;AAI1C"}

package/dist/components/theme/theme-provider.d.ts

@@ -1,4 +1,5 @@
 import type { JSX } from 'solid-js';
+import type { AccentPreset } from '@adea-ai/themes';
 import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
 /**
  * ThemeProvider.
@@ -13,7 +14,8 @@ import { type ThemeAppearance, type ThemeVariant } from '#lib/themes';
  *   - **appearance** — light, dark, or follow the system.
  *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and
  *     Solarized Light by day without re-choosing when the system flips.
- *   - **an accent** — adea's six presets, which re-colour the interactive roles on
+ *   - **an accent** — adea's six presets, or one of the accents the selected theme
+ *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on
  *     top of whichever theme is active.
  *   - **a font** — the interface face.
  *
@@ -37,7 +39,11 @@ export type ThemeSelection = {
     lightThemeId: string;
     /** The variant to use when the resolved appearance is dark. */
     darkThemeId: string;
-    /** An `accentPresets` id, or `theme` for the variant's own primary. */
+    /**
+     * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),
+     * or `theme` for the variant's own primary. A theme accent the current pair does
+     * not offer falls back to the variant's own primary.
+     */
     accent: string;
     /** A `fontOptions` id, or `space-grotesk` for the default. */
     font: string;
@@ -78,6 +84,11 @@ export type ThemeContextValue = {
     setSelection: (patch: Partial<ThemeSelection>) => void;
     /** The catalogue, so a picker does not import it separately. */
     themes: readonly ThemeVariant[];
+    /**
+     * The accents the selected light/dark pair carries, offered beside the presets.
+     * Follows the selection: a different theme pair may offer different slots.
+     */
+    themeAccents: () => readonly AccentPreset[];
 };
 export declare function useTheme(): ThemeContextValue;
 export type ThemeProviderProps = {

package/dist/components/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAWnC,OAAO,EAOL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,UAAU,EAAE,eAAe,GAAG,QAAQ,CAAA;IACtC,gEAAgE;IAChE,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,WAAW,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,cAOnC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAA;AAEpD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,CAEvE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,SAAS,EAAE,MAAM,cAAc,CAAA;IAC/B,iEAAiE;IACjE,kBAAkB,EAAE,MAAM,eAAe,CAAA;IACzC,0BAA0B;IAC1B,OAAO,EAAE,MAAM,YAAY,CAAA;IAC3B,qCAAqC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACtD,gEAAgE;IAChE,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;CAChC,CAAA;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAkDD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACjC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CACpC,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAoGtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAElE"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAWnC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EASL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAA;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,UAAU,EAAE,eAAe,GAAG,QAAQ,CAAA;IACtC,gEAAgE;IAChE,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,WAAW,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,cAOnC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAA;AAEpD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,CAEvE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,SAAS,EAAE,MAAM,cAAc,CAAA;IAC/B,iEAAiE;IACjE,kBAAkB,EAAE,MAAM,eAAe,CAAA;IACzC,0BAA0B;IAC1B,OAAO,EAAE,MAAM,YAAY,CAAA;IAC3B,qCAAqC;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACtD,gEAAgE;IAChE,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,EAAE,MAAM,SAAS,YAAY,EAAE,CAAA;CAC5C,CAAA;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAwDD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACjC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CACpC,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAyGtD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,UAAU,SAAoB,GAAG,MAAM,CAElE"}

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

@@ -1,5 +1,6 @@
 import { accentPresets, fontOptions } from "../../lib/tokens.js";
-import { accentVariables, builtinThemes, defaultDarkThemeId, defaultLightThemeId, themeById, themeCssVariables } from "../../lib/themes.js";
+import { isThemeAccentId } from "../../lib/theme-accents.js";
+import { accentVariables, builtinThemes, defaultDarkThemeId, defaultLightThemeId, themeAccentsFor, themeById, themeCssVariables } from "../../lib/themes.js";
 import { createComponent } from "solid-js/web";
 import { createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
 //#region src/components/theme/theme-provider.tsx
@@ -49,7 +50,7 @@ function readSelection(storageKey) {
 			appearance: parsed.appearance === "light" || parsed.appearance === "dark" || parsed.appearance === "system" ? parsed.appearance : defaultThemeSelection.appearance,
 			lightThemeId: themeById(parsed.lightThemeId ?? "")?.appearance === "light" ? parsed.lightThemeId : defaultLightThemeId,
 			darkThemeId: themeById(parsed.darkThemeId ?? "")?.appearance === "dark" ? parsed.darkThemeId : defaultDarkThemeId,
-			accent: accentPresets.some((preset) => preset.id === parsed.accent) ? parsed.accent : defaultThemeSelection.accent,
+			accent: typeof parsed.accent === "string" && (accentPresets.some((preset) => preset.id === parsed.accent) || isThemeAccentId(parsed.accent)) ? parsed.accent : defaultThemeSelection.accent,
 			font: fontOptions.some((option) => option.id === parsed.font) ? parsed.font : defaultThemeSelection.font
 		};
 	} catch {
@@ -97,25 +98,27 @@ function ThemeProvider(props) {
 		const root = document.documentElement;
 		const active = variant();
 		const properties = { ...themeCssVariables(active) };
-		const accent = accentVariables(selection().accent, resolvedAppearance());
+		const accent = accentVariables(selection().accent, resolvedAppearance(), selection());
 		if (accent) Object.assign(properties, accent);
 		for (const [name, value] of Object.entries(properties)) root.style.setProperty(name, value);
 		root.classList.toggle("dark", resolvedAppearance() === "dark");
 		root.dataset["theme"] = active.id;
 		root.dataset["appearance"] = resolvedAppearance();
 		root.style.colorScheme = resolvedAppearance();
-		if (selection().accent === "theme") root.removeAttribute("data-accent");
+		if (!accent) root.removeAttribute("data-accent");
 		else root.dataset["accent"] = selection().accent;
 		if (selection().font === "space-grotesk") root.removeAttribute("data-font");
 		else root.dataset["font"] = selection().font;
 		if (resolvedDensity(selection()) === "comfortable") root.removeAttribute("data-density");
 		else root.dataset["density"] = resolvedDensity(selection());
 	});
+	const themeAccents = createMemo(() => themeAccentsFor(selection().lightThemeId, selection().darkThemeId));
 	const value = {
 		selection,
 		resolvedAppearance,
 		variant,
 		themes: builtinThemes,
+		themeAccents,
 		setSelection(patch) {
 			const next = {
 				...selection(),

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","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","density","ThemeDensity","defaultThemeSelection","resolvedDensity","selection","ThemeContextValue","resolvedAppearance","variant","setSelection","patch","Partial","themes","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 {\n  accentVariables,\n  builtinThemes,\n  defaultDarkThemeId,\n  defaultLightThemeId,\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, 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  /** An `accentPresets` id, or `theme` for the variant's own primary. */\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\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      accent: accentPresets.some((preset) => preset.id === parsed.accent)\n        ? (parsed.accent as string)\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())\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 (selection().accent === 'theme') 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 value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\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    }\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/components/ui/board/board.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from 'solid-js';
+import { type ComponentProps, type JSX } from 'solid-js';
 import { type VariantProps } from '#lib/variants';
 /**
  * Board.
@@ -26,12 +26,39 @@ import { type VariantProps } from '#lib/variants';
  * of drag props. That is deliberate: a card's contents are domain — a title, a
  * priority tag, an assignee — and a board that rendered them itself could only
  * ever serve one product.
+ *
+ * `collapseEmpty` folds a column with no cards to a strip one line of text wide,
+ * its label turned on its side. A board of seven lanes where three are empty
+ * otherwise spends half its width on nothing, and the lanes with work in them
+ * are the ones that need the room. A folded lane is still a full-height drop
+ * target and still accepts a keyboard move, so nothing about operating the
+ * board changes; it does not unfold under a drag, because a lane that grows
+ * under the pointer moves every lane after it and the drop lands somewhere else.
+ *
+ * Give the board a height (`class="h-full"`) and each lane scrolls on its own;
+ * leave it unconstrained and lanes grow with their cards and the page scrolls.
+ */
+/**
+ * A lane's identifying colour, drawn as a dot before its label. The chart hues,
+ * in the order the token set gives them, because a lane colour tells lanes apart
+ * like a series does; it carries no status. `neutral` is for a lane that should
+ * not draw the eye — a backlog, an archive.
  */
+export type BoardTone = 'neutral' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'chart-6';
 export type BoardColumn = Readonly<{
     id: string;
     label: string;
-    /** A count or a limit, shown beside the label. */
+    /** The number of cards, shown as an accent count beside the label. */
+    count?: number;
+    /** A limit or any other note, shown after the count. */
     meta?: JSX.Element;
+    /** The lane's dot colour. Omitted, the header has no dot. */
+    tone?: BoardTone;
+    /**
+     * `false` keeps this lane open when it is empty under `collapseEmpty` — the
+     * inbox lane new cards arrive in, which should always show where they land.
+     */
+    collapsible?: boolean;
     /** Dim the column and refuse drops — a lane that is closed or read-only. */
     disabled?: boolean;
 }>;
@@ -58,6 +85,8 @@ export type BoardProps<T> = {
     emptyColumn?: (column: BoardColumn) => JSX.Element;
     /** The board's accessible name. Defaults to "Board". */
     label?: string;
+    /** Fold columns with no cards to a narrow strip with a sideways label. */
+    collapseEmpty?: boolean;
     class?: string;
 };
 export declare function Board<T>(props: BoardProps<T>): JSX.Element;
@@ -75,4 +104,12 @@ export declare function BoardCardBody(props: {
     class?: string;
     children: JSX.Element;
 }): JSX.Element;
+/**
+ * The card's open action: its title, as a real button whose hit area stretches
+ * over the whole card. A card is one target to a pointer — clicking anywhere on
+ * it opens it — while assistive technology still meets a named button rather
+ * than a clickable `article`. Other controls on the card sit above the stretched
+ * area by being positioned (`class="relative"`), so they keep their own click.
+ */
+export declare function BoardCardTrigger(props: ComponentProps<'button'>): JSX.Element;
 //# sourceMappingURL=board.d.ts.map

package/dist/components/ui/board/board.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/board/board.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AACjB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,4BAA4B;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC3B,uDAAuD;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,iFAAiF;IACjF,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACvD,MAAM,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACjC,kFAAkF;IAClF,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAChE,wCAAwC;IACxC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAA;IAClD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAOD,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,eA4N5C;AAED,eAAO,MAAM,sBAAsB;;8EAGjC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,YAAY,CACxF,OAAO,sBAAsB,CAC9B,CAAA;AAED,4DAA4D;AAC5D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAIxD;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAE7E"}
+{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/board/board.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EASnB,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AACjB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wDAAwD;IACxD,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,4BAA4B;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC3B,uDAAuD;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,iFAAiF;IACjF,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACvD,MAAM,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACjC,kFAAkF;IAClF,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAChE,wCAAwC;IACxC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAA;IAClD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAyCD,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,eAkR5C;AAED,eAAO,MAAM,sBAAsB;;8EAGjC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,YAAY,CACxF,OAAO,sBAAsB,CAC9B,CAAA;AAED,4DAA4D;AAC5D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAIxD;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAE7E;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAgB/D"}