@adea-ai/ui 0.110.1 → 0.112.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/dist/components/composites/action-button/action-button.d.ts +8 -0
  2. package/dist/components/composites/action-button/action-button.d.ts.map +1 -1
  3. package/dist/components/composites/action-button/action-button.js +9 -3
  4. package/dist/components/composites/action-button/action-button.js.map +1 -1
  5. package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts +17 -2
  6. package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts.map +1 -1
  7. package/dist/components/composites/appearance-editor/accent-swatch-groups.js +47 -122
  8. package/dist/components/composites/appearance-editor/accent-swatch-groups.js.map +1 -1
  9. package/dist/components/composites/appearance-editor/appearance-choices.d.ts.map +1 -1
  10. package/dist/components/composites/appearance-editor/appearance-choices.js +0 -4
  11. package/dist/components/composites/appearance-editor/appearance-choices.js.map +1 -1
  12. package/dist/components/composites/appearance-editor/appearance-editor.js +1 -1
  13. package/dist/components/composites/appearance-editor/font-settings-group.d.ts.map +1 -1
  14. package/dist/components/composites/appearance-editor/font-settings-group.js +60 -68
  15. package/dist/components/composites/appearance-editor/font-settings-group.js.map +1 -1
  16. package/dist/components/composites/appearance-editor/index.js +1 -1
  17. package/dist/components/theme/appearance-panel.d.ts.map +1 -1
  18. package/dist/components/theme/appearance-panel.js +0 -3
  19. package/dist/components/theme/appearance-panel.js.map +1 -1
  20. package/dist/components/ui/alert-dialog/alert-dialog.js +2 -2
  21. package/dist/components/ui/alert-dialog/alert-dialog.js.map +1 -1
  22. package/dist/components/ui/combobox/combobox.d.ts.map +1 -1
  23. package/dist/components/ui/combobox/combobox.js +1 -1
  24. package/dist/components/ui/combobox/combobox.js.map +1 -1
  25. package/dist/components/ui/context-menu/context-menu.d.ts.map +1 -1
  26. package/dist/components/ui/context-menu/context-menu.js +2 -2
  27. package/dist/components/ui/context-menu/context-menu.js.map +1 -1
  28. package/dist/components/ui/dialog/dialog.js +2 -2
  29. package/dist/components/ui/dialog/dialog.js.map +1 -1
  30. package/dist/components/ui/drawer/drawer.js +1 -1
  31. package/dist/components/ui/drawer/drawer.js.map +1 -1
  32. package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts +22 -2
  33. package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts.map +1 -1
  34. package/dist/components/ui/dropdown-menu/dropdown-menu.js +79 -30
  35. package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +1 -1
  36. package/dist/components/ui/dropdown-menu/index.d.ts +1 -0
  37. package/dist/components/ui/dropdown-menu/index.d.ts.map +1 -1
  38. package/dist/components/ui/menubar/menubar.d.ts.map +1 -1
  39. package/dist/components/ui/menubar/menubar.js +2 -2
  40. package/dist/components/ui/menubar/menubar.js.map +1 -1
  41. package/dist/components/ui/select/index.d.ts +1 -0
  42. package/dist/components/ui/select/index.d.ts.map +1 -1
  43. package/dist/components/ui/select/select.d.ts +7 -1
  44. package/dist/components/ui/select/select.d.ts.map +1 -1
  45. package/dist/components/ui/select/select.js +34 -20
  46. package/dist/components/ui/select/select.js.map +1 -1
  47. package/dist/components/ui/sheet/sheet.js +1 -1
  48. package/dist/components/ui/sheet/sheet.js.map +1 -1
  49. package/dist/components/ui/tooltip/tooltip.d.ts +16 -6
  50. package/dist/components/ui/tooltip/tooltip.d.ts.map +1 -1
  51. package/dist/components/ui/tooltip/tooltip.js +15 -4
  52. package/dist/components/ui/tooltip/tooltip.js.map +1 -1
  53. package/dist/index.js +1 -1
  54. package/dist/lib/overlay.d.ts +30 -1
  55. package/dist/lib/overlay.d.ts.map +1 -1
  56. package/dist/lib/overlay.js +37 -2
  57. package/dist/lib/overlay.js.map +1 -1
  58. package/dist/r/src/components/composites/action-button/action-button.tsx +10 -1
  59. package/dist/r/src/components/composites/appearance-editor/accent-swatch-groups.tsx +33 -86
  60. package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx +0 -3
  61. package/dist/r/src/components/composites/appearance-editor/font-settings-group.tsx +20 -7
  62. package/dist/r/src/components/theme/appearance-panel.tsx +0 -1
  63. package/dist/r/src/components/ui/alert-dialog/alert-dialog.tsx +2 -2
  64. package/dist/r/src/components/ui/combobox/combobox.tsx +3 -1
  65. package/dist/r/src/components/ui/context-menu/context-menu.tsx +6 -2
  66. package/dist/r/src/components/ui/dialog/dialog.tsx +2 -2
  67. package/dist/r/src/components/ui/drawer/drawer.tsx +1 -1
  68. package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx +44 -6
  69. package/dist/r/src/components/ui/dropdown-menu/index.ts +1 -0
  70. package/dist/r/src/components/ui/menubar/menubar.tsx +6 -2
  71. package/dist/r/src/components/ui/select/index.ts +1 -0
  72. package/dist/r/src/components/ui/select/select.tsx +31 -6
  73. package/dist/r/src/components/ui/sheet/sheet.tsx +1 -1
  74. package/dist/r/src/components/ui/tooltip/tooltip.tsx +28 -2
  75. package/dist/r/src/lib/overlay.ts +45 -1
  76. package/package.json +1 -1
  77. package/src/components/composites/action-button/action-button.tsx +10 -1
  78. package/src/components/composites/appearance-editor/accent-swatch-groups.tsx +33 -86
  79. package/src/components/composites/appearance-editor/appearance-choices.tsx +0 -3
  80. package/src/components/composites/appearance-editor/font-settings-group.tsx +20 -7
  81. package/src/components/theme/appearance-panel.tsx +0 -1
  82. package/src/components/ui/alert-dialog/alert-dialog.tsx +2 -2
  83. package/src/components/ui/combobox/combobox.tsx +3 -1
  84. package/src/components/ui/context-menu/context-menu.tsx +6 -2
  85. package/src/components/ui/dialog/dialog.tsx +2 -2
  86. package/src/components/ui/drawer/drawer.tsx +1 -1
  87. package/src/components/ui/dropdown-menu/dropdown-menu.tsx +44 -6
  88. package/src/components/ui/dropdown-menu/index.ts +1 -0
  89. package/src/components/ui/menubar/menubar.tsx +6 -2
  90. package/src/components/ui/select/index.ts +1 -0
  91. package/src/components/ui/select/select.tsx +31 -6
  92. package/src/components/ui/sheet/sheet.tsx +1 -1
  93. package/src/components/ui/tooltip/tooltip.tsx +28 -2
  94. package/src/lib/overlay.ts +45 -1
@@ -19,6 +19,14 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
19
19
  tooltip?: string;
20
20
  /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
21
21
  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
22
+ /**
23
+ * A leading icon repeated inside the explanation, forwarded to the shared
24
+ * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip
25
+ * without hand-composing Button and Tooltip. Decorative by contract: the tip
26
+ * is never the accessible name, so the icon must not carry meaning the label
27
+ * lacks. Size it by leaving the svg bare; the slot fixes it to control size.
28
+ */
29
+ tooltipIcon?: JSX.Element;
22
30
  /** Disables the action and announces the busy label through a polite status region. */
23
31
  busy?: boolean;
24
32
  /** The activity announced while busy. The Button's accessible name stays unchanged. */
@@ -1 +1 @@
1
- {"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/action-button/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACR,KAAK,cAAc,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACpF,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iGAAiG;IACjG,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA+CD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAyG5F"}
1
+ {"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/action-button/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACR,KAAK,cAAc,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACpF,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iGAAiG;IACjG,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA+CD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eA0G5F"}
@@ -47,6 +47,7 @@ function ActionButton(props) {
47
47
  "aria-busy",
48
48
  "tooltip",
49
49
  "tooltipSide",
50
+ "tooltipIcon",
50
51
  "busy",
51
52
  "busyLabel"
52
53
  ]);
@@ -129,9 +130,14 @@ function ActionButton(props) {
129
130
  get children() {
130
131
  return contents();
131
132
  }
132
- })), createComponent(TooltipContent, { get children() {
133
- return local.tooltip;
134
- } })];
133
+ })), createComponent(TooltipContent, {
134
+ get icon() {
135
+ return local.tooltipIcon;
136
+ },
137
+ get children() {
138
+ return local.tooltip;
139
+ }
140
+ })];
135
141
  }
136
142
  });
137
143
  }
@@ -1 +1 @@
1
- {"version":3,"file":"action-button.js","names":["Show","createSignal","splitProps","ComponentProps","JSX","ValidComponent","Button","ButtonProps","Spinner","Tooltip","TooltipContent","TooltipTrigger","ActionButtonProps","T","tooltip","tooltipSide","busy","busyLabel","invokeHandler","handler","event","Event","Array","isArray","callback","data","chainedHandler","before","guardedClick","disabled","onActivate","MouseEvent","preventDefault","stopImmediatePropagation","ButtonTargetProps","Omit","actionAs","ButtonTarget","props","local","rest","PolymorphicButton","targetProps","Element","_$createComponent","_$mergeProps","as","ActionButton","busyStatus","tooltipOpen","setTooltipOpen","tooltipSuppression","setTooltipSuppression","onClickCapture","buttonProps","PolymorphicButtonTarget","variant","size","touchTarget","class","filter","Boolean","join","tabIndex","undefined","role","href","onClick","detail","onPointerLeave","onBlur","Record","contents","when","children","label","_$memo","fallback","placement","open","onOpenChange","_el$","_tmpl$","_$insert","_$createComponent","PolymorphicButton","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/action-button/action-button.tsx"],"sourcesContent":["import {\n Show,\n createSignal,\n splitProps,\n type ComponentProps,\n type JSX,\n type ValidComponent,\n} from 'solid-js'\nimport { Button, type ButtonProps } from '../../ui/button'\nimport { Spinner } from '../../ui/spinner'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\n\n/**\n * ActionButton.\n *\n * A Button with optional explanatory tooltip and busy feedback. Use it for a\n * simple action that needs these states; actions with product-specific rules\n * should compose Button directly.\n *\n * The tooltip trigger renders the polymorphic Button itself. A disabled native\n * control cannot receive pointer or keyboard events. When a tooltip is set,\n * disabled actions therefore use focusable `aria-disabled` semantics and guard\n * activation; without a tooltip, native buttons retain native disabling.\n * Custom polymorphic components must forward aria, event, and href props for\n * these guarantees to apply.\n */\nexport type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {\n /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */\n tooltip?: string\n /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */\n tooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n /** Disables the action and announces the busy label through a polite status region. */\n busy?: boolean\n /** The activity announced while busy. The Button's accessible name stays unchanged. */\n busyLabel?: string\n}\n\nfunction invokeHandler(handler: unknown, event: Event) {\n if (Array.isArray(handler)) {\n const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n callback(data, event)\n } else if (typeof handler === 'function') {\n const callback = handler as (event: Event) => void\n callback(event)\n }\n}\n\nfunction chainedHandler(handler: unknown, before: (event: Event) => void) {\n return (event: Event) => {\n before(event)\n invokeHandler(handler, event)\n }\n}\n\nfunction guardedClick(\n handler: unknown,\n disabled: () => boolean,\n onActivate: (event: MouseEvent) => void = () => {}\n) {\n return (event: MouseEvent) => {\n if (disabled()) {\n event.preventDefault()\n event.stopImmediatePropagation()\n return\n }\n\n onActivate(event)\n invokeHandler(handler, event)\n }\n}\n\ntype ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {\n actionAs?: T\n}\n\n/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */\nfunction ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {\n const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])\n const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element\n return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />\n}\n\nexport function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {\n const [local, rest] = splitProps(props as ActionButtonProps, [\n 'as',\n 'variant',\n 'size',\n 'touchTarget',\n 'class',\n 'children',\n 'disabled',\n 'aria-busy',\n 'tooltip',\n 'tooltipSide',\n 'busy',\n 'busyLabel',\n ])\n const busy = () => local.busy ?? false\n const disabled = () => busy() || !!local.disabled\n const busyStatus = () => local.busyLabel ?? 'Working'\n const [tooltipOpen, setTooltipOpen] = createSignal(false)\n const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)\n const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture\n const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element\n const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element\n\n const buttonProps = () => ({\n ...rest,\n variant: local.variant,\n size: local.size,\n touchTarget: local.touchTarget,\n class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']\n .filter(Boolean)\n .join(' '),\n disabled: disabled() && !local.tooltip,\n 'aria-disabled': disabled() ? true : rest['aria-disabled'],\n // Make tooltip-bearing native controls explicit tab stops in WebKit configurations that\n // otherwise skip implicit button stops. A caller's tabIndex remains authoritative.\n tabIndex:\n rest.tabIndex ??\n (local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : local.tooltip ? 0 : undefined),\n role: local.as === 'a' && disabled() ? 'link' : rest.role,\n href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,\n 'aria-busy': busy() || local['aria-busy'],\n onClick: guardedClick(rest.onClick, disabled, (event) => {\n if (!local.tooltip) return\n setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')\n setTooltipOpen(false)\n }),\n onPointerLeave: chainedHandler(rest.onPointerLeave, () => {\n if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)\n }),\n onBlur: chainedHandler(rest.onBlur, () => {\n if (tooltipSuppression() === 'focus') setTooltipSuppression(null)\n }),\n onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,\n 'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),\n 'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),\n })\n\n const contents = () => (\n <>\n <Show when={busy()}>\n <Spinner size=\"sm\" label={false} aria-hidden=\"true\" data-icon=\"inline-start\" />\n </Show>\n {local.children}\n </>\n )\n\n return (\n <>\n <Show\n when={local.tooltip}\n fallback={\n <PolymorphicButton\n as={(local.as ?? 'button') as T}\n {...(buttonProps() as unknown as ButtonProps<T>)}\n >\n {contents()}\n </PolymorphicButton>\n }\n >\n <Tooltip\n placement={local.tooltipSide ?? 'bottom'}\n open={tooltipOpen()}\n onOpenChange={(open) => {\n if (open && tooltipSuppression()) return\n setTooltipOpen(open)\n }}\n >\n <TooltipTrigger\n as={PolymorphicButtonTarget}\n {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}\n actionAs={(local.as ?? 'button') as T}\n >\n {contents()}\n </TooltipTrigger>\n <TooltipContent>{local.tooltip}</TooltipContent>\n </Tooltip>\n </Show>\n <Show when={busy()}>\n <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\">\n {busyStatus()}\n </span>\n </Show>\n </>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"action-button.js","names":["Show","createSignal","splitProps","ComponentProps","JSX","ValidComponent","Button","ButtonProps","Spinner","Tooltip","TooltipContent","TooltipTrigger","ActionButtonProps","T","tooltip","tooltipSide","tooltipIcon","Element","busy","busyLabel","invokeHandler","handler","event","Event","Array","isArray","callback","data","chainedHandler","before","guardedClick","disabled","onActivate","MouseEvent","preventDefault","stopImmediatePropagation","ButtonTargetProps","Omit","actionAs","ButtonTarget","props","local","rest","PolymorphicButton","targetProps","_$createComponent","_$mergeProps","as","ActionButton","busyStatus","tooltipOpen","setTooltipOpen","tooltipSuppression","setTooltipSuppression","onClickCapture","buttonProps","PolymorphicButtonTarget","variant","size","touchTarget","class","filter","Boolean","join","tabIndex","undefined","role","href","onClick","detail","onPointerLeave","onBlur","Record","contents","when","children","label","_$memo","fallback","placement","open","onOpenChange","icon","_el$","_tmpl$","_$insert","_$createComponent","PolymorphicButton","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/action-button/action-button.tsx"],"sourcesContent":["import {\n Show,\n createSignal,\n splitProps,\n type ComponentProps,\n type JSX,\n type ValidComponent,\n} from 'solid-js'\nimport { Button, type ButtonProps } from '../../ui/button'\nimport { Spinner } from '../../ui/spinner'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\n\n/**\n * ActionButton.\n *\n * A Button with optional explanatory tooltip and busy feedback. Use it for a\n * simple action that needs these states; actions with product-specific rules\n * should compose Button directly.\n *\n * The tooltip trigger renders the polymorphic Button itself. A disabled native\n * control cannot receive pointer or keyboard events. When a tooltip is set,\n * disabled actions therefore use focusable `aria-disabled` semantics and guard\n * activation; without a tooltip, native buttons retain native disabling.\n * Custom polymorphic components must forward aria, event, and href props for\n * these guarantees to apply.\n */\nexport type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {\n /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */\n tooltip?: string\n /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */\n tooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n /**\n * A leading icon repeated inside the explanation, forwarded to the shared\n * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip\n * without hand-composing Button and Tooltip. Decorative by contract: the tip\n * is never the accessible name, so the icon must not carry meaning the label\n * lacks. Size it by leaving the svg bare; the slot fixes it to control size.\n */\n tooltipIcon?: JSX.Element\n /** Disables the action and announces the busy label through a polite status region. */\n busy?: boolean\n /** The activity announced while busy. The Button's accessible name stays unchanged. */\n busyLabel?: string\n}\n\nfunction invokeHandler(handler: unknown, event: Event) {\n if (Array.isArray(handler)) {\n const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n callback(data, event)\n } else if (typeof handler === 'function') {\n const callback = handler as (event: Event) => void\n callback(event)\n }\n}\n\nfunction chainedHandler(handler: unknown, before: (event: Event) => void) {\n return (event: Event) => {\n before(event)\n invokeHandler(handler, event)\n }\n}\n\nfunction guardedClick(\n handler: unknown,\n disabled: () => boolean,\n onActivate: (event: MouseEvent) => void = () => {}\n) {\n return (event: MouseEvent) => {\n if (disabled()) {\n event.preventDefault()\n event.stopImmediatePropagation()\n return\n }\n\n onActivate(event)\n invokeHandler(handler, event)\n }\n}\n\ntype ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {\n actionAs?: T\n}\n\n/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */\nfunction ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {\n const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])\n const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element\n return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />\n}\n\nexport function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {\n const [local, rest] = splitProps(props as ActionButtonProps, [\n 'as',\n 'variant',\n 'size',\n 'touchTarget',\n 'class',\n 'children',\n 'disabled',\n 'aria-busy',\n 'tooltip',\n 'tooltipSide',\n 'tooltipIcon',\n 'busy',\n 'busyLabel',\n ])\n const busy = () => local.busy ?? false\n const disabled = () => busy() || !!local.disabled\n const busyStatus = () => local.busyLabel ?? 'Working'\n const [tooltipOpen, setTooltipOpen] = createSignal(false)\n const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)\n const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture\n const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element\n const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element\n\n const buttonProps = () => ({\n ...rest,\n variant: local.variant,\n size: local.size,\n touchTarget: local.touchTarget,\n class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']\n .filter(Boolean)\n .join(' '),\n disabled: disabled() && !local.tooltip,\n 'aria-disabled': disabled() ? true : rest['aria-disabled'],\n // Make tooltip-bearing native controls explicit tab stops in WebKit configurations that\n // otherwise skip implicit button stops. A caller's tabIndex remains authoritative.\n tabIndex:\n rest.tabIndex ??\n (local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : local.tooltip ? 0 : undefined),\n role: local.as === 'a' && disabled() ? 'link' : rest.role,\n href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,\n 'aria-busy': busy() || local['aria-busy'],\n onClick: guardedClick(rest.onClick, disabled, (event) => {\n if (!local.tooltip) return\n setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')\n setTooltipOpen(false)\n }),\n onPointerLeave: chainedHandler(rest.onPointerLeave, () => {\n if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)\n }),\n onBlur: chainedHandler(rest.onBlur, () => {\n if (tooltipSuppression() === 'focus') setTooltipSuppression(null)\n }),\n onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,\n 'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),\n 'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),\n })\n\n const contents = () => (\n <>\n <Show when={busy()}>\n <Spinner size=\"sm\" label={false} aria-hidden=\"true\" data-icon=\"inline-start\" />\n </Show>\n {local.children}\n </>\n )\n\n return (\n <>\n <Show\n when={local.tooltip}\n fallback={\n <PolymorphicButton\n as={(local.as ?? 'button') as T}\n {...(buttonProps() as unknown as ButtonProps<T>)}\n >\n {contents()}\n </PolymorphicButton>\n }\n >\n <Tooltip\n placement={local.tooltipSide ?? 'bottom'}\n open={tooltipOpen()}\n onOpenChange={(open) => {\n if (open && tooltipSuppression()) return\n setTooltipOpen(open)\n }}\n >\n <TooltipTrigger\n as={PolymorphicButtonTarget}\n {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}\n actionAs={(local.as ?? 'button') as T}\n >\n {contents()}\n </TooltipTrigger>\n <TooltipContent icon={local.tooltipIcon}>{local.tooltip}</TooltipContent>\n </Tooltip>\n </Show>\n <Show when={busy()}>\n <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\">\n {busyStatus()}\n </span>\n </Show>\n </>\n )\n}\n"],"mappings":";;;;;;;AA6CA,SAASoB,cAAcC,SAAkBC,OAAc;CACrD,IAAIE,MAAMC,QAAQJ,OAAO,GAAG;EAC1B,MAAM,CAACK,UAAUC,QAAQN;EACzBK,SAASC,MAAML,KAAK;CACtB,OAAO,IAAI,OAAOD,YAAY,YAE5BK,QAASJ,KAAK;AAElB;AAEA,SAASM,eAAeP,SAAkBQ,QAAgC;CACxE,QAAQP,UAAiB;EACvBO,OAAOP,KAAK;EACZF,cAAcC,SAASC,KAAK;CAC9B;AACF;AAEA,SAASQ,aACPT,SACAU,UACAC,mBAAgD,CAAC,GACjD;CACA,QAAQV,UAAsB;EAC5B,IAAIS,SAAS,GAAG;GACdT,MAAMY,eAAe;GACrBZ,MAAMa,yBAAyB;GAC/B;EACF;EAEAH,WAAWV,KAAK;EAChBF,cAAcC,SAASC,KAAK;CAC9B;AACF;;AAOA,SAASiB,aAAkDC,OAA6B;CACtF,MAAM,CAACC,OAAOC,QAAQxC,WAAWsC,OAA4B,CAAC,UAAU,CAAC;CAEzE,OAAAK,gBAAQF,QAAiBG,WAAA,EAAA,IAACC,KAAE;EAAA,OAAGN,MAAMH,YAAY;CAAc,EAAA,GAAOI,IAAsB,CAAA;AAC9F;AAEA,SAAgBM,aAAkDR,OAA6B;CAC7F,MAAM,CAACC,OAAOC,QAAQxC,WAAWsC,OAA4B;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAW,CACZ;CACD,MAAMtB,aAAauB,MAAMvB,QAAQ;CACjC,MAAMa,iBAAiBb,KAAK,KAAK,CAAC,CAACuB,MAAMV;CACzC,MAAMkB,mBAAmBR,MAAMtB,aAAa;CAC5C,MAAM,CAAC+B,aAAaC,kBAAkBlD,aAAa,KAAK;CACxD,MAAM,CAACmD,oBAAoBC,yBAAyBpD,aAAyC,IAAI;CACjG,MAAMqD,iBAAkBZ,KAAsCY;CAC9D,MAAMX,oBAAoBrC;CAC1B,MAAMkD,0BAA0BjB;CAEhC,MAAMgB,qBAAqB;EACzB,GAAGb;EACHe,SAAShB,MAAMgB;EACfC,MAAMjB,MAAMiB;EACZC,aAAalB,MAAMkB;EACnBC,OAAO,CAACnB,MAAMmB,OAAOnB,MAAM3B,WAAWiB,SAAS,KAAK,mCAAmC,CAAC,CACrF8B,OAAOC,OAAO,CAAC,CACfC,KAAK,GAAG;EACXhC,UAAUA,SAAS,KAAK,CAACU,MAAM3B;EAC/B,iBAAiBiB,SAAS,IAAI,OAAOW,KAAK;EAG1CsB,UACEtB,KAAKsB,aACJvB,MAAMM,OAAO,OAAOhB,SAAS,IAAKU,MAAM3B,UAAU,IAAI,KAAM2B,MAAM3B,UAAU,IAAImD,KAAAA;EACnFC,MAAMzB,MAAMM,OAAO,OAAOhB,SAAS,IAAI,SAASW,KAAKwB;EACrDC,MAAM1B,MAAMM,OAAO,OAAOhB,SAAS,IAAIkC,KAAAA,IAAavB,KAA2ByB;EAC/E,aAAajD,KAAK,KAAKuB,MAAM;EAC7B2B,SAAStC,aAAaY,KAAK0B,SAASrC,WAAWT,UAAU;GACvD,IAAI,CAACmB,MAAM3B,SAAS;GACpBuC,sBAAsB/B,MAAM+C,SAAS,IAAI,YAAY,OAAO;GAC5DlB,eAAe,KAAK;EACtB,CAAC;EACDmB,gBAAgB1C,eAAec,KAAK4B,sBAAsB;GACxD,IAAIlB,mBAAmB,MAAM,WAAWC,sBAAsB,IAAI;EACpE,CAAC;EACDkB,QAAQ3C,eAAec,KAAK6B,cAAc;GACxC,IAAInB,mBAAmB,MAAM,SAASC,sBAAsB,IAAI;EAClE,CAAC;EACDC,gBAAgBA,iBAAiBxB,aAAawB,gBAAgBvB,QAAQ,IAAIkC,KAAAA;EAC1E,YAAYnC,aAAcY,KAAiC,aAAaX,QAAQ;EAChF,mBAAmBD,aAAcY,KAAiC,oBAAoBX,QAAQ;CAChG;CAEA,MAAM0C,iBAAW,CAAA5B,gBAEZ7C,MAAI;EAAA,IAAC0E,OAAI;GAAA,OAAExD,KAAK;EAAC;EAAA,IAAAyD,WAAA;GAAA,OAAA9B,gBACfrC,SAAO;IAACkD,MAAI;IAAMkB,OAAO;IAAK,eAAA;IAAA,aAAA;GAAA,CAAA;EAAA;CAAA,CAAA,GAAAC,WAEhCpC,MAAMkC,QAAQ,CAAA;CAInB,OAAA,CAAA9B,gBAEK7C,MAAI;EAAA,IACH0E,OAAI;GAAA,OAAEjC,MAAM3B;EAAO;EAAA,IACnBgE,WAAQ;GAAA,OAAAjC,gBACLF,mBAAiBG,WAAA,EAAA,IAChBC,KAAE;IAAA,OAAGN,MAAMM,MAAM;GAAc,EAAA,SAC1BQ,YAAY,GAA8B,EAAA,IAAAoB,WAAA;IAAA,OAE9CF,SAAS;GAAC,EAAA,CAAA,CAAA;EAAA;EAAA,IAAAE,WAAA;GAAA,OAAA9B,gBAIdpC,SAAO;IAAA,IACNsE,YAAS;KAAA,OAAEtC,MAAM1B,eAAe;IAAQ;IAAA,IACxCiE,OAAI;KAAA,OAAE9B,YAAY;IAAC;IACnB+B,eAAeD,SAAS;KACtB,IAAIA,QAAQ5B,mBAAmB,GAAG;KAClCD,eAAe6B,IAAI;IACrB;IAAC,IAAAL,WAAA;KAAA,OAAA,CAAA9B,gBAEAlC,gBAAcmC,WAAA,EACbC,IAAIS,wBAAuB,SACtBD,YAAY,GAA8D;MAAA,IAC/EjB,WAAQ;OAAA,OAAGG,MAAMM,MAAM;MAAc;MAAA,IAAA4B,WAAA;OAAA,OAEpCF,SAAS;MAAC;KAAA,CAAA,CAAA,GAAA5B,gBAEZnC,gBAAc;MAAA,IAACwE,OAAI;OAAA,OAAEzC,MAAMzB;MAAW;MAAA,IAAA2D,WAAA;OAAA,OAAGlC,MAAM3B;MAAO;KAAA,CAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA,GAAA+B,gBAG1D7C,MAAI;EAAA,IAAC0E,OAAI;GAAA,OAAExD,KAAK;EAAC;EAAA,IAAAyD,WAAA;GAAA,IAAAQ,OAAAC,OAAA;GAAAC,OAAAF,MAEblC,UAAU;GAAA,OAAAkC;EAAA;CAAA,CAAA,CAAA;AAKrB"}
@@ -1,4 +1,3 @@
1
- export declare const PRIMARY_ACCENT_IDS: readonly ["blue", "green", "amber", "cyan", "pink"];
2
1
  type AccentOption = Readonly<{
3
2
  id: string;
4
3
  label: string;
@@ -7,10 +6,26 @@ type AccentOption = Readonly<{
7
6
  }>;
8
7
  type AccentSwatchGroupsProps = {
9
8
  accentOptions: readonly AccentOption[];
10
- themeAccentOptions: readonly AccentOption[];
9
+ /**
10
+ * Accepted for host compatibility and no longer rendered. The picker offers
11
+ * one theme-scoped group — the theme's own primary followed by the presets —
12
+ * instead of splitting additional presets and the theme pair's accent slots
13
+ * into labelled groups of their own. A stored theme-accent id still resolves
14
+ * (`resolveAccentPreset`) and is still described by the row; it is just no
15
+ * longer offered as a swatch, and a host can stop feeding this list.
16
+ */
17
+ themeAccentOptions?: readonly AccentOption[];
11
18
  resolvedAppearance: 'light' | 'dark';
12
19
  themeDefaultColor: string;
13
20
  };
21
+ /**
22
+ * The accent choices, as ONE group: the theme's own primary first, then every
23
+ * preset the host feeds, each painted with its value for the resolved
24
+ * appearance — which is what makes the group theme-scoped rather than a
25
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
26
+ * renders it beside this grid), because whether a free-form colour is accepted
27
+ * is the host's validation to own.
28
+ */
14
29
  export declare function AccentSwatchGroups(props: AccentSwatchGroupsProps): import("solid-js").JSX.Element;
15
30
  export {};
16
31
  //# sourceMappingURL=accent-swatch-groups.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accent-swatch-groups.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,kBAAkB,qDAAsD,CAAA;AAGrF,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC,kBAAkB,EAAE,SAAS,YAAY,EAAE,CAAA;IAC3C,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kCAoEhE"}
1
+ {"version":3,"file":"accent-swatch-groups.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"names":[],"mappings":"AA0BA,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kCAiBhE"}
@@ -1,111 +1,47 @@
1
- import { cn } from "../../../lib/utils.js";
2
- import { createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
3
- import { For, Show } from "solid-js";
1
+ import { createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
2
+ import { For } from "solid-js";
4
3
  import { RadioGroup } from "@kobalte/core/radio-group";
5
4
  //#region src/components/composites/appearance-editor/accent-swatch-groups.tsx
6
- var _tmpl$ = /*#__PURE__*/ template(`<div class="grid grid-cols-3 gap-2"data-primary-accent-grid>`);
7
- var _tmpl$2 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1"><span class="text-xs font-medium text-muted-foreground">Additional colors</span><div class="flex flex-wrap gap-2">`);
8
- var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1"><span class="text-xs font-medium text-muted-foreground">Theme accents</span><div class="grid grid-cols-3 gap-2">`);
9
- var _tmpl$4 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
10
- var _tmpl$5 = /*#__PURE__*/ template(`<span class=sr-only>`);
11
- var PRIMARY_ACCENT_IDS = [
12
- "blue",
13
- "green",
14
- "amber",
15
- "cyan",
16
- "pink"
17
- ];
18
- var primaryAccentIds = new Set(PRIMARY_ACCENT_IDS);
5
+ var _tmpl$ = /*#__PURE__*/ template(`<div class="grid grid-cols-4 gap-2"data-accent-grid>`);
6
+ var _tmpl$2 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
7
+ var _tmpl$3 = /*#__PURE__*/ template(`<span class=sr-only>`);
8
+ /**
9
+ * The accent choices, as ONE group: the theme's own primary first, then every
10
+ * preset the host feeds, each painted with its value for the resolved
11
+ * appearance — which is what makes the group theme-scoped rather than a
12
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
13
+ * renders it beside this grid), because whether a free-form colour is accepted
14
+ * is the host's validation to own.
15
+ */
19
16
  function AccentSwatchGroups(props) {
20
- const primaryAccents = () => PRIMARY_ACCENT_IDS.flatMap((id) => {
21
- const option = props.accentOptions.find((candidate) => candidate.id === id);
22
- return option ? [option] : [];
23
- });
24
- const additionalAccents = () => props.accentOptions.filter((option) => option.id !== "theme" && !primaryAccentIds.has(option.id));
25
- return [
26
- (() => {
27
- var _el$ = _tmpl$();
28
- insert(_el$, createComponent(AccentSwatch, {
29
- id: "theme",
30
- label: "Theme default",
31
- get color() {
32
- return props.themeDefaultColor;
33
- },
34
- group: "primary"
35
- }), null);
36
- insert(_el$, createComponent(For, {
37
- get each() {
38
- return primaryAccents();
39
- },
40
- children: (option) => createComponent(AccentSwatch, {
41
- get id() {
42
- return option.id;
43
- },
44
- get label() {
45
- return option.label;
46
- },
47
- get color() {
48
- return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
49
- },
50
- group: "primary"
51
- })
52
- }), null);
53
- return _el$;
54
- })(),
55
- createComponent(Show, {
56
- get when() {
57
- return additionalAccents().length > 0;
58
- },
59
- get children() {
60
- var _el$2 = _tmpl$2(), _el$4 = _el$2.firstChild.nextSibling;
61
- insert(_el$4, createComponent(For, {
62
- get each() {
63
- return additionalAccents();
64
- },
65
- children: (option) => createComponent(AccentSwatch, {
66
- get id() {
67
- return option.id;
68
- },
69
- get label() {
70
- return option.label;
71
- },
72
- get color() {
73
- return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
74
- },
75
- group: "additional"
76
- })
77
- }));
78
- return _el$2;
17
+ const presets = () => props.accentOptions.filter((option) => option.id !== "theme");
18
+ return (() => {
19
+ var _el$ = _tmpl$();
20
+ insert(_el$, createComponent(AccentSwatch, {
21
+ id: "theme",
22
+ label: "Theme default",
23
+ get color() {
24
+ return props.themeDefaultColor;
79
25
  }
80
- }),
81
- createComponent(Show, {
82
- get when() {
83
- return props.themeAccentOptions.length > 0;
26
+ }), null);
27
+ insert(_el$, createComponent(For, {
28
+ get each() {
29
+ return presets();
84
30
  },
85
- get children() {
86
- var _el$5 = _tmpl$3(), _el$7 = _el$5.firstChild.nextSibling;
87
- insert(_el$7, createComponent(For, {
88
- get each() {
89
- return props.themeAccentOptions;
90
- },
91
- children: (option) => createComponent(AccentSwatch, {
92
- get id() {
93
- return option.id;
94
- },
95
- get label() {
96
- return "Theme " + option.label.toLowerCase();
97
- },
98
- get color() {
99
- return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
100
- },
101
- group: "theme",
102
- dashed: true
103
- })
104
- }));
105
- return _el$5;
106
- }
107
- })
108
- ];
31
+ children: (option) => createComponent(AccentSwatch, {
32
+ get id() {
33
+ return option.id;
34
+ },
35
+ get label() {
36
+ return option.label;
37
+ },
38
+ get color() {
39
+ return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
40
+ }
41
+ })
42
+ }), null);
43
+ return _el$;
44
+ })();
109
45
  }
110
46
  function AccentSwatch(props) {
111
47
  return createComponent(RadioGroup.Item, {
@@ -115,30 +51,19 @@ function AccentSwatch(props) {
115
51
  get ["data-accent-option"]() {
116
52
  return props.id;
117
53
  },
118
- get ["data-primary-accent"]() {
119
- return memo(() => props.group === "primary")() ? props.id : void 0;
120
- },
121
- get ["data-additional-accent"]() {
122
- return memo(() => props.group === "additional")() ? props.id : void 0;
123
- },
124
- get ["data-theme-accent"]() {
125
- return memo(() => props.group === "theme")() ? props.id : void 0;
126
- },
127
54
  "class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
128
55
  get children() {
129
56
  return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
130
- get ["class"]() {
131
- return cn("block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary", { "border-dashed data-[checked]:border-solid": props.dashed });
132
- },
57
+ "class": "block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
133
58
  get children() {
134
59
  return [(() => {
135
- var _el$8 = _tmpl$4();
136
- effect((_$p) => setStyleProperty(_el$8, "background-color", props.color));
137
- return _el$8;
60
+ var _el$2 = _tmpl$2();
61
+ effect((_$p) => setStyleProperty(_el$2, "background-color", props.color));
62
+ return _el$2;
138
63
  })(), (() => {
139
- var _el$9 = _tmpl$5();
140
- insert(_el$9, () => props.label);
141
- return _el$9;
64
+ var _el$3 = _tmpl$3();
65
+ insert(_el$3, () => props.label);
66
+ return _el$3;
142
67
  })()];
143
68
  }
144
69
  })];
@@ -146,6 +71,6 @@ function AccentSwatch(props) {
146
71
  });
147
72
  }
148
73
  //#endregion
149
- export { AccentSwatchGroups, PRIMARY_ACCENT_IDS };
74
+ export { AccentSwatchGroups };
150
75
 
151
76
  //# sourceMappingURL=accent-swatch-groups.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","Show","cn","PRIMARY_ACCENT_IDS","const","primaryAccentIds","ReadonlySet","Set","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","AccentSwatchGroups","props","primaryAccents","flatMap","option","find","candidate","additionalAccents","filter","has","_el$","_tmpl$","_$insert","_$createComponent","AccentSwatch","color","group","each","children","when","length","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_el$5","_tmpl$3","_el$6","_el$7","toLowerCase","dashed","Item","value","data-accent-option","data-primary-accent","_$memo","undefined","data-additional-accent","data-theme-accent","ItemInput","ItemLabel","class","_el$8","_tmpl$4","_$effect","_$p","_$setStyleProperty","_el$9","_tmpl$5","_$createComponent","Radio","_$memo","_$setStyleProperty"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const\nconst primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)\n\ntype AccentOption = Readonly<{\n id: string\n label: string\n light?: string\n dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n accentOptions: readonly AccentOption[]\n themeAccentOptions: readonly AccentOption[]\n resolvedAppearance: 'light' | 'dark'\n themeDefaultColor: string\n}\n\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n const primaryAccents = () =>\n PRIMARY_ACCENT_IDS.flatMap((id) => {\n const option = props.accentOptions.find((candidate) => candidate.id === id)\n return option ? [option] : []\n })\n const additionalAccents = () =>\n props.accentOptions.filter(\n (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)\n )\n\n return (\n <>\n <div class=\"grid grid-cols-3 gap-2\" data-primary-accent-grid>\n <AccentSwatch\n id=\"theme\"\n label=\"Theme default\"\n color={props.themeDefaultColor}\n group=\"primary\"\n />\n <For each={primaryAccents()}>\n {(option) => (\n <AccentSwatch\n id={option.id}\n label={option.label}\n color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n group=\"primary\"\n />\n )}\n </For>\n </div>\n <Show when={additionalAccents().length > 0}>\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs font-medium text-muted-foreground\">Additional colors</span>\n <div class=\"flex flex-wrap gap-2\">\n <For each={additionalAccents()}>\n {(option) => (\n <AccentSwatch\n id={option.id}\n label={option.label}\n color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n group=\"additional\"\n />\n )}\n </For>\n </div>\n </div>\n </Show>\n <Show when={props.themeAccentOptions.length > 0}>\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs font-medium text-muted-foreground\">Theme accents</span>\n <div class=\"grid grid-cols-3 gap-2\">\n <For each={props.themeAccentOptions}>\n {(option) => (\n <AccentSwatch\n id={option.id}\n label={'Theme ' + option.label.toLowerCase()}\n color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n group=\"theme\"\n dashed\n />\n )}\n </For>\n </div>\n </div>\n </Show>\n </>\n )\n}\n\nfunction AccentSwatch(props: {\n id: string\n label: string\n color: string\n group: 'primary' | 'additional' | 'theme'\n dashed?: boolean\n}) {\n return (\n <Radio.Item\n value={props.id}\n data-accent-option={props.id}\n data-primary-accent={props.group === 'primary' ? props.id : undefined}\n data-additional-accent={props.group === 'additional' ? props.id : undefined}\n data-theme-accent={props.group === 'theme' ? props.id : undefined}\n class=\"rounded-full focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel\n class={cn(\n 'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',\n { 'border-dashed data-[checked]:border-solid': props.dashed }\n )}\n >\n <span\n class=\"block size-full rounded-full\"\n aria-hidden=\"true\"\n style={{ 'background-color': props.color }}\n />\n <span class=\"sr-only\">{props.label}</span>\n </Radio.ItemLabel>\n </Radio.Item>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","AccentSwatchGroups","props","presets","filter","option","_el$","_tmpl$","_$insert","_$createComponent","AccentSwatch","color","each","children","Item","value","data-accent-option","ItemInput","ItemLabel","_el$2","_tmpl$2","_$effect","_$p","_$setStyleProperty","_el$3","_tmpl$3","_$createComponent","Radio","_$setStyleProperty"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For } from 'solid-js'\n\ntype AccentOption = Readonly<{\n id: string\n label: string\n light?: string\n dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n accentOptions: readonly AccentOption[]\n /**\n * Accepted for host compatibility and no longer rendered. The picker offers\n * one theme-scoped group — the theme's own primary followed by the presets —\n * instead of splitting additional presets and the theme pair's accent slots\n * into labelled groups of their own. A stored theme-accent id still resolves\n * (`resolveAccentPreset`) and is still described by the row; it is just no\n * longer offered as a swatch, and a host can stop feeding this list.\n */\n themeAccentOptions?: readonly AccentOption[]\n resolvedAppearance: 'light' | 'dark'\n themeDefaultColor: string\n}\n\n/**\n * The accent choices, as ONE group: the theme's own primary first, then every\n * preset the host feeds, each painted with its value for the resolved\n * appearance — which is what makes the group theme-scoped rather than a\n * catalogue table. The custom-color entry is the host's (`AccentChoices`\n * renders it beside this grid), because whether a free-form colour is accepted\n * is the host's validation to own.\n */\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')\n\n return (\n <div class=\"grid grid-cols-4 gap-2\" data-accent-grid>\n <AccentSwatch id=\"theme\" label=\"Theme default\" color={props.themeDefaultColor} />\n <For each={presets()}>\n {(option) => (\n <AccentSwatch\n id={option.id}\n label={option.label}\n color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n />\n )}\n </For>\n </div>\n )\n}\n\nfunction AccentSwatch(props: { id: string; label: string; color: string }) {\n return (\n <Radio.Item\n value={props.id}\n data-accent-option={props.id}\n class=\"rounded-full focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n <span\n class=\"block size-full rounded-full\"\n aria-hidden=\"true\"\n style={{ 'background-color': props.color }}\n />\n <span class=\"sr-only\">{props.label}</span>\n </Radio.ItemLabel>\n </Radio.Item>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,SAAgBc,mBAAmBC,OAAgC;CACjE,MAAMC,gBAAgBD,MAAML,cAAcO,QAAQC,WAAWA,OAAOb,OAAO,OAAO;CAElF,cAAA;EAAA,IAAAc,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,gBAEKC,cAAY;GAAClB,IAAE;GAASC,OAAK;GAAA,IAAiBkB,QAAK;IAAA,OAAET,MAAMF;GAAiB;EAAA,CAAA,GAAA,IAAA;EAAAQ,OAAAF,MAAAG,gBAC5EpB,KAAG;GAAA,IAACuB,OAAI;IAAA,OAAET,QAAQ;GAAC;GAAAU,WAChBR,WAAMI,gBACLC,cAAY;IAAA,IACXlB,KAAE;KAAA,OAAEa,OAAOb;IAAE;IAAA,IACbC,QAAK;KAAA,OAAEY,OAAOZ;IAAK;IAAA,IACnBkB,QAAK;KAAA,QAAGT,MAAMH,uBAAuB,UAAUM,OAAOX,QAAQW,OAAOV,SAAS;IAAE;GAAA,CAAA;EAEnF,CAAA,GAAA,IAAA;EAAA,OAAAW;CAAA,EAAA,CAAA;AAIT;AAEA,SAASI,aAAaR,OAAqD;CACzE,OAAAO,gBACGrB,WAAM0B,MAAI;EAAA,IACTC,QAAK;GAAA,OAAEb,MAAMV;EAAE;EAAA,KAAA,wBAAA;GAAA,OACKU,MAAMV;EAAE;EAAA,SAAA;EAAA,IAAAqB,WAAA;GAAA,OAAA,CAAAJ,gBAG3BrB,WAAM6B,WAAS,CAAA,CAAA,GAAAR,gBACfrB,WAAM8B,WAAS;IAAA,SAAA;IAAA,IAAAL,WAAA;KAAA,OAAA,QAAA;MAAA,IAAAM,QAAAC,QAAA;MAAAC,QAAAC,QAAAC,iBAAAJ,OAAA,oBAIiBjB,MAAMS,KAAK,CAAA;MAAA,OAAAQ;KAAA,EAAA,CAAA,UAAA;MAAA,IAAAK,QAAAC,QAAA;MAAAjB,OAAAgB,aAEnBtB,MAAMT,KAAK;MAAA,OAAA+B;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAI1C"}
@@ -1 +1 @@
1
- {"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAa/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAOpE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCA2CzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}
1
+ {"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAa/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAOpE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCAwCzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}
@@ -114,7 +114,6 @@ function isCustomAccent(props) {
114
114
  }
115
115
  function AccentChoices(props) {
116
116
  const resolvedAppearance = () => props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode;
117
- const themeAccents = () => props.themeAccentOptions ?? [];
118
117
  const accentSelection = () => isCustomAccent(props) ? "custom" : props.draft.accent;
119
118
  return createComponent(RadioGroup, {
120
119
  get value() {
@@ -132,9 +131,6 @@ function AccentChoices(props) {
132
131
  get accentOptions() {
133
132
  return props.accentOptions;
134
133
  },
135
- get themeAccentOptions() {
136
- return themeAccents();
137
- },
138
134
  get resolvedAppearance() {
139
135
  return resolvedAppearance();
140
136
  },
@@ -1 +1 @@
1
- {"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","isThemeAccentId","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","light","dark","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","themeAccents","themeAccentOptions","accentSelection","customAccentValue","themeDefaultColor","colors","_el$3","_tmpl$3","_el$4","firstChild","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n { value: 'system', label: 'System' },\n { value: 'light', label: 'Light' },\n { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n { value: 'theme', label: 'Theme default' },\n { value: 'frosted', label: 'Frosted' },\n { value: 'opaque', label: 'Opaque' },\n] as const\nexport function ModeChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.mode}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Appearance mode\"\n onChange={(mode) => {\n const option = MODES.find((candidate) => candidate.value === mode)\n if (option) props.onChange({ mode: option.value })\n }}\n class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n >\n <For each={MODES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n data-mode={option.value}\n class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n <span class=\"block h-20 w-full\">\n <Show\n when={option.value === 'system'}\n fallback={\n <ThemeMiniature\n theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n />\n }\n >\n <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n </Show>\n </span>\n <span>{option.label}</span>\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n const accent = props.draft.accent\n return (\n accent !== 'theme' &&\n !props.accentOptions.some((option) => option.id === accent) &&\n !isThemeAccentId(accent)\n )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n // The resolved appearance decides which side of a preset pair — and which\n // theme accent — the swatches paint, so the row previews each choice as the\n // user will see it.\n const resolvedAppearance = () =>\n props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n // The accents the previewed theme pair carries, offered after the presets.\n const themeAccents = () => props.themeAccentOptions ?? []\n const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n return (\n <Radio\n value={accentSelection()}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Accent\"\n class=\"flex flex-col items-start gap-3\"\n onChange={(accent) =>\n props.onChange({\n accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n })\n }\n >\n <AccentSwatchGroups\n accentOptions={props.accentOptions}\n themeAccentOptions={themeAccents()}\n resolvedAppearance={resolvedAppearance()}\n themeDefaultColor={\n resolvedAppearance() === 'light'\n ? props.lightTheme.colors.accent\n : props.darkTheme.colors.accent\n }\n />\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n <Radio.Item value=\"custom\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </Radio>\n )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.surface}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Glass\"\n class=\"flex flex-wrap gap-1\"\n onChange={(surface) => {\n const option = SURFACES.find((candidate) => candidate.value === surface)\n if (option) props.onChange({ surface: option.value })\n }}\n >\n <For each={SURFACES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMS,QAAQ;CACZ;EAAEC,OAAO;EAAUC,OAAO;CAAS;CACnC;EAAED,OAAO;EAASC,OAAO;CAAQ;CACjC;EAAED,OAAO;EAAQC,OAAO;CAAO;AAAC;AAElC,IAAME,WAAW;CACf;EAAEH,OAAO;EAASC,OAAO;CAAgB;CACzC;EAAED,OAAO;EAAWC,OAAO;CAAU;CACrC;EAAED,OAAO;EAAUC,OAAO;CAAS;AAAC;AAEtC,SAAgBG,YAAYC,OAA8B;CACxD,OAAAC,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAEK,MAAME,MAAMC;EAAI;EAAA,IACvBC,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAEXC,WAAWJ,SAAS;GAClB,MAAMK,SAASd,MAAMe,MAAMC,cAAcA,UAAUf,UAAUQ,IAAI;GACjE,IAAIK,QAAQR,MAAMO,SAAS,EAAEJ,MAAMK,OAAOb,MAAM,CAAC;EACnD;EAAC,SAAA;EAAA,IAAAgB,WAAA;GAAA,OAAAV,gBAGAd,KAAG;IAACyB,MAAMlB;IAAKiB,WACZH,WAAMP,gBACLf,WAAM2B,MAAI;KAAA,IACTlB,QAAK;MAAA,OAAEa,OAAOb;KAAK;KAAA,KAAA,eAAA;MAAA,OACRa,OAAOb;KAAK;KAAA,SAAA;KAAA,IAAAgB,WAAA;MAAA,OAAA,CAAAV,gBAGtBf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OAAA,QAAA;SAAA,IAAAM,OAAAC,OAAA;SAAAC,OAAAF,MAAAhB,gBAEXb,MAAI;UAAA,IACHgC,OAAI;WAAA,OAAEZ,OAAOb,UAAU;UAAQ;UAAA,IAC/B0B,WAAQ;WAAA,OAAApB,gBACLT,gBAAc,EAAA,IACb8B,QAAK;YAAA,OAAEC,WAAAf,OAAOb,UAAU,OAAO,CAAA,CAAA,IAAGK,MAAMwB,aAAaxB,MAAMyB;WAAS,EAAA,CAAA;UAAA;UAAA,IAAAd,WAAA;WAAA,OAAAV,gBAIvER,qBAAmB;YAAA,IAACiC,QAAK;aAAA,OAAE1B,MAAMwB;YAAU;YAAA,IAAEG,OAAI;aAAA,OAAE3B,MAAMyB;YAAS;WAAA,CAAA;UAAA;SAAA,CAAA,CAAA;SAAA,OAAAR;QAAA,EAAA,CAAA,UAAA;SAAA,IAAAW,QAAAC,QAAA;SAAAV,OAAAS,aAGhEpB,OAAOZ,KAAK;SAAA,OAAAgC;QAAA,EAAA,CAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAGxB,CAAA;EAAA;CAAA,CAAA;AAIT;;;;;;;AAQA,SAAgBE,eAAe9B,OAAuC;CACpE,MAAM+B,SAAS/B,MAAME,MAAM6B;CAC3B,OACEA,WAAW,WACX,CAAC/B,MAAMgC,cAAcC,MAAMzB,WAAWA,OAAO0B,OAAOH,MAAM,KAC1D,CAAC1C,gBAAgB0C,MAAM;AAE3B;AAEA,SAAgBI,cAAcnC,OAA8B;CAI1D,MAAMoC,2BACJpC,MAAME,MAAMC,SAAS,WAAWH,MAAMoC,qBAAqBpC,MAAME,MAAMC;CAEzE,MAAMkC,qBAAqBrC,MAAMsC,sBAAsB,CAAA;CACvD,MAAMC,wBAAyBT,eAAe9B,KAAK,IAAI,WAAWA,MAAME,MAAM6B;CAC9E,OAAA9B,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAE4C,gBAAgB;EAAC;EAAA,IACxBnC,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAAA,SAAA;EAGXC,WAAWwB,WACT/B,MAAMO,SAAS,EACbwB,QAAQA,WAAW,WAAY/B,MAAMwC,qBAAqB,KAAMT,OAClE,CAAC;EAAC,IAAApB,WAAA;GAAA,OAAA,CAAAV,gBAGHX,oBAAkB;IAAA,IACjB0C,gBAAa;KAAA,OAAEhC,MAAMgC;IAAa;IAAA,IAClCM,qBAAkB;KAAA,OAAED,aAAa;IAAC;IAAA,IAClCD,qBAAkB;KAAA,OAAEA,mBAAmB;IAAC;IAAA,IACxCK,oBAAiB;KAAA,OACflB,WAAAa,mBAAmB,MAAM,OAAO,CAAA,CAAA,IAC5BpC,MAAMwB,WAAWkB,OAAOX,SACxB/B,MAAMyB,UAAUiB,OAAOX;IAAM;GAAA,CAAA,UAAA;IAAA,IAAAY,QAAAC,QAAA;IAAAD,MAAAG;IAAA3B,OAAAwB,OAAA1C,gBAKlCf,WAAM2B,MAAI;KAAClB,OAAK;KAAA,IAAAgB,WAAA;MAAA,OAAA,CAAAV,gBACdf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAAL,UAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAgC;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAO1B;AAEA,SAAgBI,aAAa/C,OAA8B;CACzD,OAAAC,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAEK,MAAME,MAAM8C;EAAO;EAAA,IAC1B5C,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAAA,SAAA;EAGXC,WAAWyC,YAAY;GACrB,MAAMxC,SAASV,SAASW,MAAMC,cAAcA,UAAUf,UAAUqD,OAAO;GACvE,IAAIxC,QAAQR,MAAMO,SAAS,EAAEyC,SAASxC,OAAOb,MAAM,CAAC;EACtD;EAAC,IAAAgB,WAAA;GAAA,OAAAV,gBAEAd,KAAG;IAACyB,MAAMd;IAAQa,WACfH,WAAMP,gBACLf,WAAM2B,MAAI;KAAA,IACTlB,QAAK;MAAA,OAAEa,OAAOb;KAAK;KAAA,IACnBS,WAAQ;MAAA,OAAEmB,WAAAf,OAAOb,UAAU,SAAS,CAAA,CAAA,KAAI,CAACK,MAAMiD,kBAAkBC;KAAO;KAAA,SAAA;KAAA,IAAAvC,WAAA;MAAA,OAAA,CAAAV,gBAGvEf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACbH,OAAOZ;OAAK;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAGlB,CAAA;EAAA;CAAA,CAAA;AAIT"}
1
+ {"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","isThemeAccentId","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","light","dark","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","accentSelection","customAccentValue","themeDefaultColor","colors","_el$3","_tmpl$3","_el$4","firstChild","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n { value: 'system', label: 'System' },\n { value: 'light', label: 'Light' },\n { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n { value: 'theme', label: 'Theme default' },\n { value: 'frosted', label: 'Frosted' },\n { value: 'opaque', label: 'Opaque' },\n] as const\nexport function ModeChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.mode}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Appearance mode\"\n onChange={(mode) => {\n const option = MODES.find((candidate) => candidate.value === mode)\n if (option) props.onChange({ mode: option.value })\n }}\n class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n >\n <For each={MODES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n data-mode={option.value}\n class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n <span class=\"block h-20 w-full\">\n <Show\n when={option.value === 'system'}\n fallback={\n <ThemeMiniature\n theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n />\n }\n >\n <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n </Show>\n </span>\n <span>{option.label}</span>\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n const accent = props.draft.accent\n return (\n accent !== 'theme' &&\n !props.accentOptions.some((option) => option.id === accent) &&\n !isThemeAccentId(accent)\n )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n // The resolved appearance decides which side of a preset pair — and which\n // theme accent — the swatches paint, so the row previews each choice as the\n // user will see it.\n const resolvedAppearance = () =>\n props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n return (\n <Radio\n value={accentSelection()}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Accent\"\n class=\"flex flex-col items-start gap-3\"\n onChange={(accent) =>\n props.onChange({\n accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n })\n }\n >\n <AccentSwatchGroups\n accentOptions={props.accentOptions}\n resolvedAppearance={resolvedAppearance()}\n themeDefaultColor={\n resolvedAppearance() === 'light'\n ? props.lightTheme.colors.accent\n : props.darkTheme.colors.accent\n }\n />\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n <Radio.Item value=\"custom\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </Radio>\n )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.surface}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Glass\"\n class=\"flex flex-wrap gap-1\"\n onChange={(surface) => {\n const option = SURFACES.find((candidate) => candidate.value === surface)\n if (option) props.onChange({ surface: option.value })\n }}\n >\n <For each={SURFACES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n"],"mappings":"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"}
@@ -4,9 +4,9 @@ import { Input } from "../../ui/input/input.js";
4
4
  import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "../../ui/sheet/sheet.js";
5
5
  import { Switch } from "../../ui/switch/switch.js";
6
6
  import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from "../../../lib/appearance-font-settings.js";
7
- import { SettingsRow, TerminalRow, ThemeRow } from "./appearance-rows.js";
8
7
  import { AppearanceFontSettingsGroup } from "./font-settings-group.js";
9
8
  import { AccentChoices, GlassChoices, ModeChoices, isCustomAccent } from "./appearance-choices.js";
9
+ import { SettingsRow, TerminalRow, ThemeRow } from "./appearance-rows.js";
10
10
  import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
11
11
  import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from "lucide-solid";
12
12
  import { Show, createSignal, createUniqueId } from "solid-js";
@@ -1 +1 @@
1
- {"version":3,"file":"font-settings-group.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/font-settings-group.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,EAAE,4BAA4B,CAAA;IACtC,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyND,mFAAmF;AACnF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,kCAsGlF"}
1
+ {"version":3,"file":"font-settings-group.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/font-settings-group.tsx"],"names":[],"mappings":"AAaA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,EAAE,4BAA4B,CAAA;IACtC,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyND,mFAAmF;AACnF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,kCAoHlF"}