@adea-ai/ui 0.98.0 → 0.99.1

package/dist/components/composites/action-button/action-button.d.ts

@@ -17,6 +17,7 @@ import { type ButtonProps } from '../../ui/button';
 export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {
     /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */
     tooltip?: string;
+    /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
     tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
     /** Disables the action and announces the busy label through a polite status region. */
     busy?: boolean;

package/dist/components/composites/action-button/action-button.d.ts.map

@@ -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,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,eAwG5F"}
+{"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,eAwG5F"}

package/dist/components/composites/action-button/action-button.js

@@ -128,7 +128,7 @@ function ActionButton(props) {
 						}
 					})), createComponent(TooltipContent, {
 						get side() {
-							return local.tooltipSide;
+							return local.tooltipSide ?? "bottom";
 						},
 						get children() {
 							return local.tooltip;

package/dist/components/composites/action-button/action-button.js.map

@@ -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","open","onOpenChange","side","_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  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          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 side={local.tooltipSide}>{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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"}
+{"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","open","onOpenChange","side","_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          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 side={local.tooltipSide ?? 'bottom'}>{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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"}

package/dist/components/composites/appearance-editor/appearance-choices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAc/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCAgEzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}
+{"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAc/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCA+EzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}

package/dist/components/composites/appearance-editor/appearance-choices.js

@@ -5,9 +5,9 @@ import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/composites/appearance-editor/appearance-choices.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class="block h-20 w-full">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div class="grid grid-cols-3 gap-2">`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class=sr-only>Theme default`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div class="grid grid-cols-4 gap-2">`);
 var _tmpl$6 = /*#__PURE__*/ template(`<span class=sr-only>`);
 var MODES = [
 	{
@@ -104,6 +104,7 @@ function ModeChoices(props) {
 	});
 }
 function AccentChoices(props) {
+	const resolvedAppearance = () => props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode;
 	const custom = () => props.draft.accent !== "theme" && !props.accentOptions.some((option) => option.id === props.draft.accent);
 	const accentSelection = () => custom() ? "custom" : props.draft.accent;
 	return createComponent(RadioGroup, {
@@ -119,29 +120,24 @@ function AccentChoices(props) {
 		onChange: (accent) => props.onChange({ accent: accent === "custom" ? props.customAccentValue ?? "" : accent }),
 		get children() {
 			return [(() => {
-				var _el$3 = _tmpl$3();
+				var _el$3 = _tmpl$5();
 				insert(_el$3, createComponent(RadioGroup.Item, {
 					value: "theme",
+					"class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
 					get children() {
 						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
-							children: "Theme default"
-						})];
-					}
-				}), null);
-				insert(_el$3, createComponent(RadioGroup.Item, {
-					value: "custom",
-					get children() {
-						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
-							children: "Custom"
+							"class": "block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
+							get children() {
+								return [(() => {
+									var _el$4 = _tmpl$3();
+									effect((_$p) => setStyleProperty(_el$4, "background-color", resolvedAppearance() === "light" ? props.lightTheme.colors.accent : props.darkTheme.colors.accent));
+									return _el$4;
+								})(), _tmpl$4()];
+							}
 						})];
 					}
 				}), null);
-				return _el$3;
-			})(), (() => {
-				var _el$4 = _tmpl$4();
-				insert(_el$4, createComponent(For, {
+				insert(_el$3, createComponent(For, {
 					get each() {
 						return props.accentOptions;
 					},
@@ -155,21 +151,29 @@ function AccentChoices(props) {
 								"class": "block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
 								get children() {
 									return [(() => {
-										var _el$5 = _tmpl$5();
-										effect((_$p) => setStyleProperty(_el$5, "background-color", (props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode) === "light" ? option.light : option.dark));
-										return _el$5;
-									})(), (() => {
-										var _el$6 = _tmpl$6();
-										insert(_el$6, () => option.label);
+										var _el$6 = _tmpl$3();
+										effect((_$p) => setStyleProperty(_el$6, "background-color", resolvedAppearance() === "light" ? option.light : option.dark));
 										return _el$6;
+									})(), (() => {
+										var _el$7 = _tmpl$6();
+										insert(_el$7, () => option.label);
+										return _el$7;
 									})()];
 								}
 							})];
 						}
 					})
-				}));
-				return _el$4;
-			})()];
+				}), null);
+				return _el$3;
+			})(), createComponent(RadioGroup.Item, {
+				value: "custom",
+				get children() {
+					return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+						children: "Custom"
+					})];
+				}
+			})];
 		}
 	});
 }

package/dist/components/composites/appearance-editor/appearance-choices.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","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","AccentChoices","custom","accent","accentOptions","some","id","accentSelection","customAccentValue","_el$3","_tmpl$3","_el$4","_tmpl$4","_el$5","_tmpl$5","_$effect","_$p","_$setStyleProperty","resolvedAppearance","_el$6","_tmpl$6","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo","_$setStyleProperty"],"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 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\n\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\nexport function AccentChoices(props: AppearanceEditorProps) {\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentSelection = () => (custom() ? 'custom' : props.draft.accent)\n  return (\n    <Radio\n      value={accentSelection()}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Accent\"\n      // Two chips in a column beside a 3x2 swatch grid: one line of six\n      // swatches plus chips overflows the settings sidebar's control column,\n      // and the column keeps both rows of the pair balanced (2 x 28px + gap).\n      class=\"flex items-center gap-3\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <div class=\"flex flex-col gap-2\">\n        <Radio.Item value=\"theme\">\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            Theme default\n          </Radio.ItemLabel>\n        </Radio.Item>\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      <div class=\"grid grid-cols-3 gap-2\">\n        <For each={props.accentOptions}>\n          {(option) => (\n            <Radio.Item\n              value={option.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={{\n                    'background-color':\n                      (props.draft.mode === 'system'\n                        ? props.resolvedAppearance\n                        : props.draft.mode) === 'light'\n                        ? option.light\n                        : option.dark,\n                  }}\n                />\n                <span class=\"sr-only\">{option.label}</span>\n              </Radio.ItemLabel>\n            </Radio.Item>\n          )}\n        </For>\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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"}
+{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","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","AccentChoices","resolvedAppearance","custom","accent","accentOptions","some","id","accentSelection","customAccentValue","_el$3","_tmpl$5","_el$4","_tmpl$3","_$effect","_$p","_$setStyleProperty","colors","_tmpl$4","_el$6","_el$7","_tmpl$6","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo","_$setStyleProperty"],"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 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\n\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\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 custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentSelection = () => (custom() ? 'custom' : props.draft.accent)\n  return (\n    <Radio\n      value={accentSelection()}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Accent\"\n      // One chip (custom) beside a capped swatch grid: a chip-per-state column\n      // beside a full-width swatch line overflowed the settings sidebar's\n      // control column, so the pair stays a narrow chip plus a wrapped grid.\n      class=\"flex items-center gap-3\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <div class=\"grid grid-cols-4 gap-2\">\n        {/* The theme's own accent is the first swatch. Picking it is the same\n            act the old dedicated \"Theme default\" chip performed, without a\n            second control for the state the row starts in. */}\n        <Radio.Item\n          value=\"theme\"\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={{\n                'background-color':\n                  resolvedAppearance() === 'light'\n                    ? props.lightTheme.colors.accent\n                    : props.darkTheme.colors.accent,\n              }}\n            />\n            <span class=\"sr-only\">Theme default</span>\n          </Radio.ItemLabel>\n        </Radio.Item>\n        <For each={props.accentOptions}>\n          {(option) => (\n            <Radio.Item\n              value={option.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={{\n                    'background-color':\n                      resolvedAppearance() === 'light' ? option.light : option.dark,\n                  }}\n                />\n                <span class=\"sr-only\">{option.label}</span>\n              </Radio.ItemLabel>\n            </Radio.Item>\n          )}\n        </For>\n      </div>\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    </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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"}

package/dist/components/composites/appearance-editor/appearance-rows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-rows.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-rows.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAkD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AA2BnF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,eA4BA;AAED,8CAA8C;AAC9C,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AA+PD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAwBA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAgCA"}
+{"version":3,"file":"appearance-rows.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-rows.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAkD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AA2BnF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,eA4BA;AAED,8CAA8C;AAC9C,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AAmQD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAwBA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAgCA"}

package/dist/components/composites/appearance-editor/appearance-rows.js

@@ -145,7 +145,7 @@ function ThemeSelectMenu(props) {
 					get portalMount() {
 						return portalMount();
 					},
-					"class": "max-h-(--kb-popper-content-available-height) w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto",
+					"class": "max-h-80 w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto",
 					onInteractOutside: (event) => {
 						if (event.detail.originalEvent.type !== "pointerdown") return;
 						const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;

package/dist/components/composites/appearance-editor/appearance-rows.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-rows.js","names":["AdeaTheme","AdeaThemeRecord","For","Show","createMemo","createSignal","onCleanup","JSX","ChevronDown","Palette","SquareTerminal","cn","Button","DropdownMenu","DropdownMenuContent","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuTrigger","PalettePreview","ThemeMenuPreview","POINTER_FOCUS_TARGET_SELECTOR","isTabStop","element","HTMLElement","tabIndex","matches","hasAttribute","getAttribute","closest","getClientRects","length","SettingsRow","props","title","icon","Element","description","stacked","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$7","_$insert","_$createComponent","when","_el$6","_tmpl$","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","ThemeOption","id","name","preview","ThemeSelectMenu","label","selectedId","triggerPreview","options","disabled","onSelect","portalMount","setPortalMount","HTMLDivElement","triggerElement","setTriggerElement","HTMLButtonElement","menuOpen","setMenuOpen","focusOutsideTarget","setFocusOutsideTarget","restoreTriggerFocus","setRestoreTriggerFocus","focusTargetAfterTab","focusLifecycleVersion","selected","find","option","closeMenu","moveFocusOnTab","event","KeyboardEvent","key","isComposing","trigger","parentDialog","focusScope","ownerDocument","body","focusStops","Array","from","querySelectorAll","filter","orderedFocusStops","toSorted","a","b","triggerIndex","indexOf","direction","shiftKey","adjacent","at","stopPropagation","preventDefault","focus","preventScroll","_el$8","_tmpl$4","_$use","modal","open","onOpenChange","ref","as","variant","size","aria-label","_el$9","_tmpl$3","_el$0","theme","onInteractOutside","detail","originalEvent","type","target","contains","focusTarget","onFocusOutside","onEscapeKeyDown","onCloseAutoFocus","lifecycleVersion","shouldRestore","isConnected","queueMicrotask","activeElement","document","isMenuFocus","isTriggerFocus","value","onChange","each","textValue","closeOnSelect","_el$1","_tmpl$6","_el$10","_el$11","_tmpl$5","ThemeRow","appearance","themes","map","TerminalRow","selectedOption","_$createComponent","_$className"],"sources":["../../../../src/components/composites/appearance-editor/appearance-rows.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// Retains the compact divided row and palette-preview selector from the pinned\n// Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.\n// One shared menu serves the light, dark, and terminal rows: each option is a\n// compact theme preview with its name and one-line description beside it, and\n// the menu sizes to that content instead of clipping it at the trigger width.\nimport type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'\nimport { For, Show, createMemo, createSignal, onCleanup, type JSX } from 'solid-js'\nimport { ChevronDown, Palette, SquareTerminal } from 'lucide-solid'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../../ui/dropdown-menu/dropdown-menu'\nimport { PalettePreview, ThemeMenuPreview } from './theme-preview'\n\nconst POINTER_FOCUS_TARGET_SELECTOR =\n  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'\n\nfunction isTabStop(element: HTMLElement) {\n  return (\n    (element.tabIndex >= 0 ||\n      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&\n    !element.matches(':disabled') &&\n    element.getAttribute('aria-disabled') !== 'true' &&\n    element.closest('[hidden], [inert], [aria-hidden=\"true\"]') === null &&\n    element.getClientRects().length > 0\n  )\n}\n\nexport function SettingsRow(props: {\n  title: string\n  icon: JSX.Element\n  description?: JSX.Element\n  stacked?: boolean\n  children: JSX.Element\n}) {\n  return (\n    <section\n      class={cn('flex gap-3 px-4 py-4', {\n        'flex-col': props.stacked,\n        'flex-wrap items-center': !props.stacked,\n      })}\n    >\n      {/* Reserve readable copy before choosing a side-by-side control row.\n          Wrapping follows the actual host width and enlarged text, rather\n          than a viewport breakpoint that also matches a narrow popover. */}\n      <div class={cn('flex min-w-0 flex-1 items-center gap-3', { 'basis-48': !props.stacked })}>\n        <span\n          class=\"flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4\"\n          aria-hidden=\"true\"\n        >\n          {props.icon}\n        </span>\n        <div class=\"min-w-0\">\n          <h3 class=\"text-sm font-medium\">{props.title}</h3>\n          <Show when={props.description}>\n            <div class=\"mt-0.5 text-xs text-muted-foreground\">{props.description}</div>\n          </Show>\n        </div>\n      </div>\n      <div class=\"min-w-0 max-w-full shrink-0\">{props.children}</div>\n    </section>\n  )\n}\n\n/** One selectable palette in a theme menu. */\nexport type ThemeOption = {\n  id: string\n  name: string\n  description?: string\n  preview: AdeaTheme\n}\n\n/**\n * The shared theme picker. Kobalte handles menu navigation and dismissal;\n * this component moves Tab to the adjacent browser-reported stop because\n * menus consume Tab by default. Enumerating elements and checking their native\n * tabIndex keeps details summaries in the order while preserving explicit\n * tabindex overrides. The menu width follows its content (bounded by the\n * popper's available width) so a long theme name and its description render\n * fully instead of truncating at the trigger's width.\n */\nfunction ThemeSelectMenu(props: {\n  /** Row title; also the trigger's accessible name and the group's label. */\n  label: string\n  selectedId: string\n  /** Palette shown on the trigger; hosts pass the accent-applied preview. */\n  triggerPreview: AdeaTheme\n  options: readonly ThemeOption[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const [portalMount, setPortalMount] = createSignal<HTMLDivElement>()\n  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()\n  const [menuOpen, setMenuOpen] = createSignal(false)\n  const [focusOutsideTarget, setFocusOutsideTarget] = createSignal<HTMLElement>()\n  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)\n  let focusTargetAfterTab: HTMLElement | undefined\n  let focusLifecycleVersion = 0\n  onCleanup(() => {\n    focusLifecycleVersion += 1\n  })\n  const selected = createMemo(\n    () =>\n      props.options.find((option) => option.id === props.selectedId) ??\n      props.options.find((option) => option.id === props.triggerPreview.id)\n  )\n  const closeMenu = () => {\n    if (menuOpen()) focusLifecycleVersion += 1\n    setMenuOpen(false)\n  }\n  const moveFocusOnTab = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || event.isComposing) return\n\n    const trigger = triggerElement()\n    if (!trigger) return\n    const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n    const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n    if (!focusScope) return\n\n    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(\n      (element) =>\n        isTabStop(element) &&\n        element.closest('[role=\"menu\"], [hidden], [inert], [aria-hidden=\"true\"]') === null\n    )\n    const orderedFocusStops = [\n      ...focusStops\n        .filter((element) => element.tabIndex > 0)\n        .toSorted((a, b) => a.tabIndex - b.tabIndex),\n      ...focusStops.filter((element) => element.tabIndex <= 0),\n    ]\n    const triggerIndex = orderedFocusStops.indexOf(trigger)\n    const direction = event.shiftKey ? -1 : 1\n    const adjacent =\n      orderedFocusStops[triggerIndex + direction] ??\n      (parentDialog ? (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1)) : undefined)\n\n    event.stopPropagation()\n    setRestoreTriggerFocus(false)\n    if (adjacent) {\n      event.preventDefault()\n      focusTargetAfterTab = adjacent\n      setFocusOutsideTarget(adjacent)\n      closeMenu()\n      adjacent.focus({ preventScroll: true })\n    } else {\n      focusTargetAfterTab = undefined\n      setFocusOutsideTarget(undefined)\n      closeMenu()\n    }\n  }\n  return (\n    <div ref={setPortalMount}>\n      <DropdownMenu\n        modal={false}\n        open={menuOpen()}\n        onOpenChange={(open) => {\n          if (open !== menuOpen()) focusLifecycleVersion += 1\n          setMenuOpen(open)\n          if (open) {\n            focusTargetAfterTab = undefined\n            setFocusOutsideTarget(undefined)\n            setRestoreTriggerFocus(false)\n          }\n        }}\n      >\n        <DropdownMenuTrigger\n          ref={setTriggerElement}\n          as={Button}\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={props.label}\n          disabled={props.disabled || props.options.length === 0}\n          class=\"w-full justify-between sm:w-52\"\n        >\n          <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <PalettePreview theme={props.triggerPreview} />\n            <span class=\"min-w-0 flex-1 truncate\">\n              {selected()?.name ?? props.triggerPreview.name}\n            </span>\n          </span>\n          <ChevronDown aria-hidden=\"true\" class=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          portalMount={portalMount()}\n          // Sized to content (at least the trigger width, never wider than the\n          // popper allows) so long theme names render in full with padding for\n          // the selection indicator instead of truncating at the anchor width.\n          class=\"max-h-(--kb-popper-content-available-height) w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto\"\n          onInteractOutside={(event) => {\n            if (event.detail.originalEvent.type !== 'pointerdown') return\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            const target = event.detail.originalEvent.target\n            if (!(target instanceof Element) || !focusScope?.contains(target)) return\n\n            const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)\n            if (focusTarget && isTabStop(focusTarget)) {\n              setRestoreTriggerFocus(false)\n              setFocusOutsideTarget(focusTarget)\n            } else {\n              setRestoreTriggerFocus(true)\n            }\n          }}\n          onFocusOutside={(event) => {\n            // The containing dialog or document body can briefly reclaim\n            // focus when the menu opens. Keep that handoff from dismissing\n            // it; focus moving to another descendant still closes the menu.\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            const target = event.detail.originalEvent.target\n            if (target === focusScope) {\n              event.preventDefault()\n            } else if (target instanceof HTMLElement && focusScope?.contains(target)) {\n              setRestoreTriggerFocus(false)\n              setFocusOutsideTarget(target)\n            }\n          }}\n          onEscapeKeyDown={() => setRestoreTriggerFocus(true)}\n          onCloseAutoFocus={(event) => {\n            // A prior menu instance can finish its focus cleanup after this\n            // row has already reopened. Do not let that cleanup steal focus.\n            if (menuOpen()) {\n              event.preventDefault()\n              return\n            }\n\n            const lifecycleVersion = focusLifecycleVersion\n            const shouldRestore = restoreTriggerFocus()\n            const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()\n            focusTargetAfterTab = undefined\n            setFocusOutsideTarget(undefined)\n            setRestoreTriggerFocus(false)\n            if (shouldRestore) {\n              // The saved focus may be the containing dialog rather than\n              // the trigger when WebKit opens this menu from a pointer click.\n              event.preventDefault()\n              triggerElement()?.focus({ preventScroll: true })\n              return\n            }\n\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {\n              // Preserve the intended in-scope destination across\n              // Kobalte's deferred stale-focus restore.\n              event.preventDefault()\n              queueMicrotask(() => {\n                if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return\n\n                const activeElement = document.activeElement\n                const isMenuFocus =\n                  activeElement instanceof HTMLElement &&\n                  activeElement.closest('[role=\"menu\"]') !== null\n                const isTriggerFocus = activeElement === triggerElement()\n                if (\n                  activeElement !== focusTarget &&\n                  (activeElement === document.body ||\n                    activeElement === focusScope ||\n                    isMenuFocus ||\n                    isTriggerFocus)\n                ) {\n                  focusTarget.focus({ preventScroll: true })\n                }\n              })\n              return\n            }\n\n            const activeElement = document.activeElement\n            if (\n              focusScope &&\n              activeElement instanceof HTMLElement &&\n              activeElement !== focusScope &&\n              focusScope.contains(activeElement) &&\n              activeElement.closest('[role=\"menu\"]') === null\n            ) {\n              // Preserve a real focus target in this scope instead of\n              // restoring the stale element captured when the menu mounted. A\n              // focused menu item is about to unmount, so Kobalte must restore\n              // focus to the trigger instead.\n              event.preventDefault()\n            }\n          }}\n        >\n          <DropdownMenuRadioGroup\n            value={selected()?.id ?? ''}\n            aria-label={`${props.label} options`}\n            on:keydown={moveFocusOnTab}\n            onChange={(id) => {\n              if (!props.disabled && typeof id === 'string') props.onSelect(id)\n            }}\n          >\n            <For each={props.options}>\n              {(option) => (\n                <DropdownMenuRadioItem\n                  value={option.id}\n                  textValue={option.name}\n                  closeOnSelect={true}\n                  disabled={props.disabled}\n                  onSelect={() => setRestoreTriggerFocus(true)}\n                >\n                  <ThemeMenuPreview theme={option.preview} />\n                  <span class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span class=\"truncate\">{option.name}</span>\n                    {/* Visual affordance only: the accessible name stays the\n                        theme name, which is what keyboard and test callers\n                        match on. */}\n                    <Show when={option.description}>\n                      <span\n                        aria-hidden=\"true\"\n                        class=\"line-clamp-2 max-w-44 text-2xs text-muted-foreground\"\n                      >\n                        {option.description}\n                      </span>\n                    </Show>\n                  </span>\n                </DropdownMenuRadioItem>\n              )}\n            </For>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\n/**\n * A compact persistent theme choice for one appearance.\n */\nexport function ThemeRow(props: {\n  appearance: 'light' | 'dark'\n  selectedId: string\n  preview: AdeaTheme\n  themes: readonly AdeaThemeRecord[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')\n  const options = createMemo<ThemeOption[]>(() =>\n    props.themes\n      .filter((theme) => theme.appearance === props.appearance)\n      .map((theme) => ({\n        id: theme.id,\n        name: theme.name,\n        description: theme.description,\n        preview: theme,\n      }))\n  )\n  return (\n    <SettingsRow title={label()} icon={<Palette />}>\n      <ThemeSelectMenu\n        label={label()}\n        selectedId={props.selectedId}\n        triggerPreview={props.preview}\n        options={options()}\n        disabled={props.disabled}\n        onSelect={props.onSelect}\n      />\n    </SettingsRow>\n  )\n}\n\n/**\n * A terminal palette choice independent of the light/dark rows. The first\n * option (`'theme'`) follows the interface theme, painted with the resolved\n * preview; every catalogue record follows, both appearances, because the\n * terminal paints one fixed ANSI palette rather than an appearance axis.\n */\nexport function TerminalRow(props: {\n  selectedId: string\n  /** Resolved interface theme: the `theme` option's palette and the fallback. */\n  preview: AdeaTheme\n  themes: readonly AdeaThemeRecord[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const options = createMemo<ThemeOption[]>(() => [\n    {\n      id: 'theme',\n      name: 'UI theme',\n      description: 'Uses the interface theme.',\n      preview: props.preview,\n    },\n    ...props.themes.map((theme) => ({\n      id: theme.id,\n      name: theme.name,\n      description: theme.description,\n      preview: theme,\n    })),\n  ])\n  const selectedOption = () => options().find((option) => option.id === props.selectedId)\n  const description = () =>\n    selectedOption() && selectedOption()?.id !== 'theme'\n      ? `The terminal follows ${selectedOption()?.name}.`\n      : 'The terminal follows the interface theme.'\n  return (\n    <SettingsRow title=\"Terminal\" icon={<SquareTerminal />} description={description()}>\n      <ThemeSelectMenu\n        label=\"Terminal\"\n        selectedId={props.selectedId}\n        triggerPreview={selectedOption()?.preview ?? props.preview}\n        options={options()}\n        disabled={props.disabled}\n        onSelect={props.onSelect}\n      />\n    </SettingsRow>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"appearance-rows.js","names":["AdeaTheme","AdeaThemeRecord","For","Show","createMemo","createSignal","onCleanup","JSX","ChevronDown","Palette","SquareTerminal","cn","Button","DropdownMenu","DropdownMenuContent","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuTrigger","PalettePreview","ThemeMenuPreview","POINTER_FOCUS_TARGET_SELECTOR","isTabStop","element","HTMLElement","tabIndex","matches","hasAttribute","getAttribute","closest","getClientRects","length","SettingsRow","props","title","icon","Element","description","stacked","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$7","_$insert","_$createComponent","when","_el$6","_tmpl$","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","ThemeOption","id","name","preview","ThemeSelectMenu","label","selectedId","triggerPreview","options","disabled","onSelect","portalMount","setPortalMount","HTMLDivElement","triggerElement","setTriggerElement","HTMLButtonElement","menuOpen","setMenuOpen","focusOutsideTarget","setFocusOutsideTarget","restoreTriggerFocus","setRestoreTriggerFocus","focusTargetAfterTab","focusLifecycleVersion","selected","find","option","closeMenu","moveFocusOnTab","event","KeyboardEvent","key","isComposing","trigger","parentDialog","focusScope","ownerDocument","body","focusStops","Array","from","querySelectorAll","filter","orderedFocusStops","toSorted","a","b","triggerIndex","indexOf","direction","shiftKey","adjacent","at","stopPropagation","preventDefault","focus","preventScroll","_el$8","_tmpl$4","_$use","modal","open","onOpenChange","ref","as","variant","size","aria-label","_el$9","_tmpl$3","_el$0","theme","onInteractOutside","detail","originalEvent","type","target","contains","focusTarget","onFocusOutside","onEscapeKeyDown","onCloseAutoFocus","lifecycleVersion","shouldRestore","isConnected","queueMicrotask","activeElement","document","isMenuFocus","isTriggerFocus","value","onChange","each","textValue","closeOnSelect","_el$1","_tmpl$6","_el$10","_el$11","_tmpl$5","ThemeRow","appearance","themes","map","TerminalRow","selectedOption","_$createComponent","_$className"],"sources":["../../../../src/components/composites/appearance-editor/appearance-rows.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// Retains the compact divided row and palette-preview selector from the pinned\n// Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.\n// One shared menu serves the light, dark, and terminal rows: each option is a\n// compact theme preview with its name and one-line description beside it, and\n// the menu sizes to that content instead of clipping it at the trigger width.\nimport type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'\nimport { For, Show, createMemo, createSignal, onCleanup, type JSX } from 'solid-js'\nimport { ChevronDown, Palette, SquareTerminal } from 'lucide-solid'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../../ui/dropdown-menu/dropdown-menu'\nimport { PalettePreview, ThemeMenuPreview } from './theme-preview'\n\nconst POINTER_FOCUS_TARGET_SELECTOR =\n  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'\n\nfunction isTabStop(element: HTMLElement) {\n  return (\n    (element.tabIndex >= 0 ||\n      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&\n    !element.matches(':disabled') &&\n    element.getAttribute('aria-disabled') !== 'true' &&\n    element.closest('[hidden], [inert], [aria-hidden=\"true\"]') === null &&\n    element.getClientRects().length > 0\n  )\n}\n\nexport function SettingsRow(props: {\n  title: string\n  icon: JSX.Element\n  description?: JSX.Element\n  stacked?: boolean\n  children: JSX.Element\n}) {\n  return (\n    <section\n      class={cn('flex gap-3 px-4 py-4', {\n        'flex-col': props.stacked,\n        'flex-wrap items-center': !props.stacked,\n      })}\n    >\n      {/* Reserve readable copy before choosing a side-by-side control row.\n          Wrapping follows the actual host width and enlarged text, rather\n          than a viewport breakpoint that also matches a narrow popover. */}\n      <div class={cn('flex min-w-0 flex-1 items-center gap-3', { 'basis-48': !props.stacked })}>\n        <span\n          class=\"flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4\"\n          aria-hidden=\"true\"\n        >\n          {props.icon}\n        </span>\n        <div class=\"min-w-0\">\n          <h3 class=\"text-sm font-medium\">{props.title}</h3>\n          <Show when={props.description}>\n            <div class=\"mt-0.5 text-xs text-muted-foreground\">{props.description}</div>\n          </Show>\n        </div>\n      </div>\n      <div class=\"min-w-0 max-w-full shrink-0\">{props.children}</div>\n    </section>\n  )\n}\n\n/** One selectable palette in a theme menu. */\nexport type ThemeOption = {\n  id: string\n  name: string\n  description?: string\n  preview: AdeaTheme\n}\n\n/**\n * The shared theme picker. Kobalte handles menu navigation and dismissal;\n * this component moves Tab to the adjacent browser-reported stop because\n * menus consume Tab by default. Enumerating elements and checking their native\n * tabIndex keeps details summaries in the order while preserving explicit\n * tabindex overrides. The menu width follows its content (bounded by the\n * popper's available width) so a long theme name and its description render\n * fully instead of truncating at the trigger's width.\n */\nfunction ThemeSelectMenu(props: {\n  /** Row title; also the trigger's accessible name and the group's label. */\n  label: string\n  selectedId: string\n  /** Palette shown on the trigger; hosts pass the accent-applied preview. */\n  triggerPreview: AdeaTheme\n  options: readonly ThemeOption[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const [portalMount, setPortalMount] = createSignal<HTMLDivElement>()\n  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()\n  const [menuOpen, setMenuOpen] = createSignal(false)\n  const [focusOutsideTarget, setFocusOutsideTarget] = createSignal<HTMLElement>()\n  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)\n  let focusTargetAfterTab: HTMLElement | undefined\n  let focusLifecycleVersion = 0\n  onCleanup(() => {\n    focusLifecycleVersion += 1\n  })\n  const selected = createMemo(\n    () =>\n      props.options.find((option) => option.id === props.selectedId) ??\n      props.options.find((option) => option.id === props.triggerPreview.id)\n  )\n  const closeMenu = () => {\n    if (menuOpen()) focusLifecycleVersion += 1\n    setMenuOpen(false)\n  }\n  const moveFocusOnTab = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || event.isComposing) return\n\n    const trigger = triggerElement()\n    if (!trigger) return\n    const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n    const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n    if (!focusScope) return\n\n    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(\n      (element) =>\n        isTabStop(element) &&\n        element.closest('[role=\"menu\"], [hidden], [inert], [aria-hidden=\"true\"]') === null\n    )\n    const orderedFocusStops = [\n      ...focusStops\n        .filter((element) => element.tabIndex > 0)\n        .toSorted((a, b) => a.tabIndex - b.tabIndex),\n      ...focusStops.filter((element) => element.tabIndex <= 0),\n    ]\n    const triggerIndex = orderedFocusStops.indexOf(trigger)\n    const direction = event.shiftKey ? -1 : 1\n    const adjacent =\n      orderedFocusStops[triggerIndex + direction] ??\n      (parentDialog ? (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1)) : undefined)\n\n    event.stopPropagation()\n    setRestoreTriggerFocus(false)\n    if (adjacent) {\n      event.preventDefault()\n      focusTargetAfterTab = adjacent\n      setFocusOutsideTarget(adjacent)\n      closeMenu()\n      adjacent.focus({ preventScroll: true })\n    } else {\n      focusTargetAfterTab = undefined\n      setFocusOutsideTarget(undefined)\n      closeMenu()\n    }\n  }\n  return (\n    <div ref={setPortalMount}>\n      <DropdownMenu\n        modal={false}\n        open={menuOpen()}\n        onOpenChange={(open) => {\n          if (open !== menuOpen()) focusLifecycleVersion += 1\n          setMenuOpen(open)\n          if (open) {\n            focusTargetAfterTab = undefined\n            setFocusOutsideTarget(undefined)\n            setRestoreTriggerFocus(false)\n          }\n        }}\n      >\n        <DropdownMenuTrigger\n          ref={setTriggerElement}\n          as={Button}\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={props.label}\n          disabled={props.disabled || props.options.length === 0}\n          class=\"w-full justify-between sm:w-52\"\n        >\n          <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <PalettePreview theme={props.triggerPreview} />\n            <span class=\"min-w-0 flex-1 truncate\">\n              {selected()?.name ?? props.triggerPreview.name}\n            </span>\n          </span>\n          <ChevronDown aria-hidden=\"true\" class=\"shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          portalMount={portalMount()}\n          // A fixed height with its own scroll: an adaptive cap measured the\n          // host panel instead, and opening a long theme list scrolled the\n          // sidebar to reveal the menu. The content scrolls internally at the\n          // cap, so the panel around the trigger never moves. Width still\n          // follows content (at least the trigger width, never wider than the\n          // popper allows) so long theme names render in full with padding for\n          // the selection indicator instead of truncating at the anchor width.\n          class=\"max-h-80 w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto\"\n          onInteractOutside={(event) => {\n            if (event.detail.originalEvent.type !== 'pointerdown') return\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            const target = event.detail.originalEvent.target\n            if (!(target instanceof Element) || !focusScope?.contains(target)) return\n\n            const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)\n            if (focusTarget && isTabStop(focusTarget)) {\n              setRestoreTriggerFocus(false)\n              setFocusOutsideTarget(focusTarget)\n            } else {\n              setRestoreTriggerFocus(true)\n            }\n          }}\n          onFocusOutside={(event) => {\n            // The containing dialog or document body can briefly reclaim\n            // focus when the menu opens. Keep that handoff from dismissing\n            // it; focus moving to another descendant still closes the menu.\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            const target = event.detail.originalEvent.target\n            if (target === focusScope) {\n              event.preventDefault()\n            } else if (target instanceof HTMLElement && focusScope?.contains(target)) {\n              setRestoreTriggerFocus(false)\n              setFocusOutsideTarget(target)\n            }\n          }}\n          onEscapeKeyDown={() => setRestoreTriggerFocus(true)}\n          onCloseAutoFocus={(event) => {\n            // A prior menu instance can finish its focus cleanup after this\n            // row has already reopened. Do not let that cleanup steal focus.\n            if (menuOpen()) {\n              event.preventDefault()\n              return\n            }\n\n            const lifecycleVersion = focusLifecycleVersion\n            const shouldRestore = restoreTriggerFocus()\n            const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()\n            focusTargetAfterTab = undefined\n            setFocusOutsideTarget(undefined)\n            setRestoreTriggerFocus(false)\n            if (shouldRestore) {\n              // The saved focus may be the containing dialog rather than\n              // the trigger when WebKit opens this menu from a pointer click.\n              event.preventDefault()\n              triggerElement()?.focus({ preventScroll: true })\n              return\n            }\n\n            const parentDialog = portalMount()?.closest<HTMLElement>('[role=\"dialog\"]')\n            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body\n            if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {\n              // Preserve the intended in-scope destination across\n              // Kobalte's deferred stale-focus restore.\n              event.preventDefault()\n              queueMicrotask(() => {\n                if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return\n\n                const activeElement = document.activeElement\n                const isMenuFocus =\n                  activeElement instanceof HTMLElement &&\n                  activeElement.closest('[role=\"menu\"]') !== null\n                const isTriggerFocus = activeElement === triggerElement()\n                if (\n                  activeElement !== focusTarget &&\n                  (activeElement === document.body ||\n                    activeElement === focusScope ||\n                    isMenuFocus ||\n                    isTriggerFocus)\n                ) {\n                  focusTarget.focus({ preventScroll: true })\n                }\n              })\n              return\n            }\n\n            const activeElement = document.activeElement\n            if (\n              focusScope &&\n              activeElement instanceof HTMLElement &&\n              activeElement !== focusScope &&\n              focusScope.contains(activeElement) &&\n              activeElement.closest('[role=\"menu\"]') === null\n            ) {\n              // Preserve a real focus target in this scope instead of\n              // restoring the stale element captured when the menu mounted. A\n              // focused menu item is about to unmount, so Kobalte must restore\n              // focus to the trigger instead.\n              event.preventDefault()\n            }\n          }}\n        >\n          <DropdownMenuRadioGroup\n            value={selected()?.id ?? ''}\n            aria-label={`${props.label} options`}\n            on:keydown={moveFocusOnTab}\n            onChange={(id) => {\n              if (!props.disabled && typeof id === 'string') props.onSelect(id)\n            }}\n          >\n            <For each={props.options}>\n              {(option) => (\n                <DropdownMenuRadioItem\n                  value={option.id}\n                  textValue={option.name}\n                  closeOnSelect={true}\n                  disabled={props.disabled}\n                  onSelect={() => setRestoreTriggerFocus(true)}\n                >\n                  <ThemeMenuPreview theme={option.preview} />\n                  <span class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span class=\"truncate\">{option.name}</span>\n                    {/* Visual affordance only: the accessible name stays the\n                        theme name, which is what keyboard and test callers\n                        match on. */}\n                    <Show when={option.description}>\n                      <span\n                        aria-hidden=\"true\"\n                        class=\"line-clamp-2 max-w-44 text-2xs text-muted-foreground\"\n                      >\n                        {option.description}\n                      </span>\n                    </Show>\n                  </span>\n                </DropdownMenuRadioItem>\n              )}\n            </For>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\n/**\n * A compact persistent theme choice for one appearance.\n */\nexport function ThemeRow(props: {\n  appearance: 'light' | 'dark'\n  selectedId: string\n  preview: AdeaTheme\n  themes: readonly AdeaThemeRecord[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')\n  const options = createMemo<ThemeOption[]>(() =>\n    props.themes\n      .filter((theme) => theme.appearance === props.appearance)\n      .map((theme) => ({\n        id: theme.id,\n        name: theme.name,\n        description: theme.description,\n        preview: theme,\n      }))\n  )\n  return (\n    <SettingsRow title={label()} icon={<Palette />}>\n      <ThemeSelectMenu\n        label={label()}\n        selectedId={props.selectedId}\n        triggerPreview={props.preview}\n        options={options()}\n        disabled={props.disabled}\n        onSelect={props.onSelect}\n      />\n    </SettingsRow>\n  )\n}\n\n/**\n * A terminal palette choice independent of the light/dark rows. The first\n * option (`'theme'`) follows the interface theme, painted with the resolved\n * preview; every catalogue record follows, both appearances, because the\n * terminal paints one fixed ANSI palette rather than an appearance axis.\n */\nexport function TerminalRow(props: {\n  selectedId: string\n  /** Resolved interface theme: the `theme` option's palette and the fallback. */\n  preview: AdeaTheme\n  themes: readonly AdeaThemeRecord[]\n  disabled?: boolean\n  onSelect: (id: string) => void\n}) {\n  const options = createMemo<ThemeOption[]>(() => [\n    {\n      id: 'theme',\n      name: 'UI theme',\n      description: 'Uses the interface theme.',\n      preview: props.preview,\n    },\n    ...props.themes.map((theme) => ({\n      id: theme.id,\n      name: theme.name,\n      description: theme.description,\n      preview: theme,\n    })),\n  ])\n  const selectedOption = () => options().find((option) => option.id === props.selectedId)\n  const description = () =>\n    selectedOption() && selectedOption()?.id !== 'theme'\n      ? `The terminal follows ${selectedOption()?.name}.`\n      : 'The terminal follows the interface theme.'\n  return (\n    <SettingsRow title=\"Terminal\" icon={<SquareTerminal />} description={description()}>\n      <ThemeSelectMenu\n        label=\"Terminal\"\n        selectedId={props.selectedId}\n        triggerPreview={selectedOption()?.preview ?? props.preview}\n        options={options()}\n        disabled={props.disabled}\n        onSelect={props.onSelect}\n      />\n    </SettingsRow>\n  )\n}\n"],"mappings":"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"}

package/dist/components/layout/side-rail/side-rail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-rail.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/side-rail/side-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMnE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC5E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,eAmCjF;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY1D;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY3D;AAED,kDAAkD;AAClD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY1D;AAED,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,eAahF;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAiBnB,CAAA;AAUX,eAAO,MAAM,sBAAsB;;;CAGlC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CAC9E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAkHvF;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,eA0EF"}
+{"version":3,"file":"side-rail.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/side-rail/side-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAOnE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC5E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,eAmCjF;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY1D;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY3D;AAED,kDAAkD;AAClD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAY1D;AAED,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,eAahF;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAiBnB,CAAA;AAUX,eAAO,MAAM,sBAAsB;;;CAGlC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CAC9E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAkHvF;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,eA6EF"}

package/dist/components/layout/side-rail/side-rail.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { tooltipTip } from "../../../lib/overlay.js";
 import { SideRailContext, createSideRailValue } from "./side-rail-context.js";
 import { Portal, className, createComponent, effect, insert, memo, mergeProps, setStyleProperty, spread, template, use } from "solid-js/web";
 import { Show, createMemo, createSignal, splitProps } from "solid-js";
@@ -17,7 +18,7 @@ var _tmpl$0 = /*#__PURE__*/ template(`<span class="ms-auto shrink-0">`);
 var _tmpl$1 = /*#__PURE__*/ template(`<span class="text-muted-foreground shrink-0 font-mono text-2xs leading-none">`);
 var _tmpl$10 = /*#__PURE__*/ template(`<div aria-hidden=true data-slot=side-rail-tip><span>`);
 var _tmpl$11 = /*#__PURE__*/ template(`<button type=button><span class="flex size-5 shrink-0 items-center justify-center [&amp;_svg]:size-5"></span><span class="min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only">`);
-var _tmpl$12 = /*#__PURE__*/ template(`<div aria-hidden=true data-slot=side-rail-tip class="bg-card text-card-foreground border-border pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 rounded-md border ps-3 pe-3 text-sm font-medium whitespace-nowrap shadow-lg"><span class="flex size-5 shrink-0 items-center justify-center [&amp;_svg]:size-5">`);
+var _tmpl$12 = /*#__PURE__*/ template(`<div aria-hidden=true data-slot=side-rail-tip><span class="flex size-5 shrink-0 items-center justify-center [&amp;_svg]:size-5">`);
 function SideRail(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
@@ -240,7 +241,7 @@ function SideRailItem(props) {
 				}
 			}), null);
 			effect((_p$) => {
-				var _v$ = cn("bg-card text-card-foreground border-border pointer-events-none fixed z-(--z-tooltip)", "flex items-center gap-2.5 rounded-md border ps-3 pe-3 text-sm font-medium whitespace-nowrap shadow-lg"), _v$2 = `${position().top}px`, _v$3 = `${position().left}px`, _v$4 = `${position().height}px`, _v$5 = cn("flex size-5 shrink-0 items-center justify-center [&_svg]:size-5", { "text-primary": local.active });
+				var _v$ = cn(tooltipTip, "pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap"), _v$2 = `${position().top}px`, _v$3 = `${position().left}px`, _v$4 = `${position().height}px`, _v$5 = cn("flex size-5 shrink-0 items-center justify-center [&_svg]:size-5", { "text-primary": local.active });
 				_v$ !== _p$.e && className(_el$10, _p$.e = _v$);
 				_v$2 !== _p$.t && setStyleProperty(_el$10, "top", _p$.t = _v$2);
 				_v$3 !== _p$.a && setStyleProperty(_el$10, "left", _p$.a = _v$3);
@@ -320,15 +321,17 @@ function SideRailButton(props) {
 			insert(_el$18, () => local.children);
 			insert(_el$17, () => local.label, null);
 			effect((_p$) => {
-				var _v$6 = `${position().top}px`, _v$7 = `${position().left}px`, _v$8 = `${position().height}px`;
-				_v$6 !== _p$.e && setStyleProperty(_el$17, "top", _p$.e = _v$6);
-				_v$7 !== _p$.t && setStyleProperty(_el$17, "left", _p$.t = _v$7);
-				_v$8 !== _p$.a && setStyleProperty(_el$17, "height", _p$.a = _v$8);
+				var _v$6 = cn(tooltipTip, "pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap"), _v$7 = `${position().top}px`, _v$8 = `${position().left}px`, _v$9 = `${position().height}px`;
+				_v$6 !== _p$.e && className(_el$17, _p$.e = _v$6);
+				_v$7 !== _p$.t && setStyleProperty(_el$17, "top", _p$.t = _v$7);
+				_v$8 !== _p$.a && setStyleProperty(_el$17, "left", _p$.a = _v$8);
+				_v$9 !== _p$.o && setStyleProperty(_el$17, "height", _p$.o = _v$9);
 				return _p$;
 			}, {
 				e: void 0,
 				t: void 0,
-				a: void 0
+				a: void 0,
+				o: void 0
 			});
 			return _el$17;
 		} })