@adea-ai/ui 0.110.0 → 0.111.0

package/dist/components/ui/tooltip/tooltip.js

@@ -1,9 +1,10 @@
 import { cn } from "../../../lib/utils.js";
-import { tooltipTip } from "../../../lib/overlay.js";
-import { createComponent, isServer, memo, mergeProps } from "solid-js/web";
-import { createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
+import { tooltipTip, topLayerProps } from "../../../lib/overlay.js";
+import { createComponent, insert, isServer, memo, mergeProps, template } from "solid-js/web";
+import { Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
 import { Tooltip, useTooltipContext } from "@kobalte/core/tooltip";
 //#region src/components/ui/tooltip/tooltip.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=tooltip-icon aria-hidden=true class="flex size-4 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
 var tooltipDefaults = {
 	/** Long enough that a pointer crossing a toolbar does not strobe tooltips. */
 	openDelay: 400,
@@ -257,6 +258,7 @@ function TooltipContent(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"children",
+		"icon",
 		"aria-hidden",
 		"onEscapeKeyDown",
 		"onPointerDownOutside"
@@ -266,7 +268,7 @@ function TooltipContent(props) {
 		return createComponent(Tooltip.Content, mergeProps({
 			"data-slot": "tooltip-content",
 			get ["class"]() {
-				return cn(tooltipTip, "z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1", "origin-(--kb-tooltip-content-transform-origin) text-balance", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
+				return cn(tooltipTip, "z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1", "origin-(--kb-tooltip-content-transform-origin) text-balance", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", { "flex items-center gap-2 whitespace-nowrap": !!local.icon }, local.class);
 			},
 			style: { "pointer-events": "none" },
 			get ["aria-hidden"]() {
@@ -280,8 +282,17 @@ function TooltipContent(props) {
 				invokeEventHandler(local.onPointerDownOutside, event);
 				if (!event.defaultPrevented) interaction?.markCloseIntent();
 			}
-		}, rest, { get children() {
-			return local.children;
+		}, topLayerProps, rest, { get children() {
+			return [createComponent(Show, {
+				get when() {
+					return local.icon;
+				},
+				children: (icon) => (() => {
+					var _el$ = _tmpl$();
+					insert(_el$, icon);
+					return _el$;
+				})()
+			}), memo(() => local.children)];
 		} }));
 	} });
 }

package/dist/components/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["Tooltip","KobalteTooltip","useTooltipContext","ComponentProps","createContext","createEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","isServer","tooltipTip","cn","TooltipTiming","openDelay","closeDelay","skipDelayDuration","tooltipDefaults","TooltipTimingContext","TooltipInteraction","id","trigger","HTMLElement","setTrigger","element","isOpen","isDisabled","isTriggerFocused","markOpenIntent","clearOpenIntent","requestCloseFromAnotherTooltip","markPointerCloseIntent","clearPointerCloseIntent","markCloseIntent","TooltipInteractionContext","openTooltipInteractions","Set","pendingTooltipOpenId","tooltipScrollListenerAttached","clearPendingTooltipOpen","undefined","tooltipScrollContainsTrigger","event","Event","target","window","Node","contains","handleTooltipScroll","interaction","handleTooltipPointerMove","PointerEvent","setTooltipInteractionOpen","open","has","add","addEventListener","document","delete","size","removeEventListener","registerTooltipInteraction","invokeEventHandler","handler","Array","isArray","callback","data","TooltipProviderProps","children","TooltipProvider","props","_$createComponent","Provider","value","TooltipRootProps","timing","local","rest","controlled","uncontrolledOpen","setUncontrolledOpen","defaultOpen","closeIntent","ignoreDuplicateClose","onOpenChange","next","source","pointerCloseIntentUntil","pointerCloseIntentTimeout","ReturnType","setTimeout","clearTimeout","Date","now","queueMicrotask","disabled","Boolean","activeElement","openInteraction","focusedTrigger","anotherTooltipOpening","pointerClosePending","handleKeyDown","KeyboardEvent","key","_$mergeProps","TooltipTrigger","Trigger","ref","onFocus","defaultPrevented","onBlur","onPointerEnter","onPointerLeave","onClick","TooltipContentProps","Content","TooltipContent","context","Portal","class","style","aria-hidden","_$memo","onEscapeKeyDown","onPointerDownOutside","_$createComponent","Tooltip","KobalteTooltip","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'\nimport type { ComponentProps } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { tooltipTip } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * The provider sets the *timing* defaults for every tooltip below it.\n *\n * Timing is the part of a tooltip that has to agree across an app: one that\n * opens in 200ms in a toolbar and 700ms in a sidebar reads as a bug. The\n * provider is where that agreement lives. It is optional — a tooltip outside a\n * provider falls back to the same defaults — so a consumer can drop it in\n * without restructuring anything.\n */\ntype TooltipTiming = {\n  openDelay: number\n  closeDelay: number\n  skipDelayDuration: number\n}\n\nconst tooltipDefaults: TooltipTiming = {\n  /** Long enough that a pointer crossing a toolbar does not strobe tooltips. */\n  openDelay: 400,\n  /** Short, because the pointer has already left the control. */\n  closeDelay: 80,\n  /**\n   * After a tooltip has been seen, the next one opens immediately for this\n   * long. This is what makes moving along a row of icons feel like one\n   * gesture instead of four separate waits.\n   */\n  skipDelayDuration: 500,\n}\n\nconst TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)\n\ntype TooltipInteraction = {\n  id: string\n  trigger: () => HTMLElement | undefined\n  setTrigger: (element: HTMLElement) => void\n  isOpen: () => boolean\n  isDisabled: () => boolean\n  isTriggerFocused: () => boolean\n  markOpenIntent: () => void\n  clearOpenIntent: () => void\n  requestCloseFromAnotherTooltip: () => void\n  markPointerCloseIntent: () => void\n  clearPointerCloseIntent: () => void\n  markCloseIntent: () => void\n}\n\nconst TooltipInteractionContext = createContext<TooltipInteraction>()\nconst openTooltipInteractions = new Set<TooltipInteraction>()\nlet pendingTooltipOpenId: string | undefined\nlet tooltipScrollListenerAttached = false\n\nfunction clearPendingTooltipOpen(id: string) {\n  if (pendingTooltipOpenId === id) pendingTooltipOpenId = undefined\n}\n\nfunction tooltipScrollContainsTrigger(event: Event, trigger: HTMLElement) {\n  const target = event.target\n  return target === window || (target instanceof Node && target.contains(trigger))\n}\n\nfunction handleTooltipScroll(event: Event) {\n  for (const interaction of openTooltipInteractions) {\n    const trigger = interaction.trigger()\n    if (interaction.isOpen() && trigger && tooltipScrollContainsTrigger(event, trigger)) {\n      interaction.markCloseIntent()\n    }\n  }\n}\n\nfunction handleTooltipPointerMove(event: PointerEvent) {\n  for (const interaction of openTooltipInteractions) {\n    const trigger = interaction.trigger()\n    const target = event.target\n    if (\n      interaction.isOpen() &&\n      interaction.isTriggerFocused() &&\n      trigger &&\n      !(target instanceof Node && trigger.contains(target))\n    ) {\n      interaction.markPointerCloseIntent()\n    }\n  }\n}\n\nfunction setTooltipInteractionOpen(interaction: TooltipInteraction, open: boolean) {\n  if (isServer) return\n\n  if (open) {\n    if (openTooltipInteractions.has(interaction)) return\n    openTooltipInteractions.add(interaction)\n    if (!tooltipScrollListenerAttached) {\n      tooltipScrollListenerAttached = true\n      // Register before Kobalte's global listeners so intentional scroll\n      // dismissal can be distinguished from its delayed pointer dismissal.\n      window.addEventListener('scroll', handleTooltipScroll, true)\n      document.addEventListener('pointermove', handleTooltipPointerMove, true)\n    }\n  } else {\n    openTooltipInteractions.delete(interaction)\n    if (openTooltipInteractions.size === 0 && tooltipScrollListenerAttached) {\n      tooltipScrollListenerAttached = false\n      window.removeEventListener('scroll', handleTooltipScroll, true)\n      document.removeEventListener('pointermove', handleTooltipPointerMove, true)\n    }\n  }\n}\n\nfunction registerTooltipInteraction(interaction: TooltipInteraction) {\n  onCleanup(() => {\n    setTooltipInteractionOpen(interaction, false)\n    clearPendingTooltipOpen(interaction.id)\n  })\n}\n\nfunction invokeEventHandler(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\nexport type TooltipProviderProps = {\n  children?: ComponentProps<'div'>['children']\n  openDelay?: number\n  closeDelay?: number\n  skipDelayDuration?: number\n}\n\nexport function TooltipProvider(props: TooltipProviderProps) {\n  return (\n    <TooltipTimingContext.Provider\n      value={{\n        openDelay: props.openDelay ?? tooltipDefaults.openDelay,\n        closeDelay: props.closeDelay ?? tooltipDefaults.closeDelay,\n        skipDelayDuration: props.skipDelayDuration ?? tooltipDefaults.skipDelayDuration,\n      }}\n    >\n      {props.children}\n    </TooltipTimingContext.Provider>\n  )\n}\n\nexport type TooltipRootProps = ComponentProps<typeof KobalteTooltip>\n\nexport function Tooltip(props: TooltipRootProps) {\n  const timing = useContext(TooltipTimingContext)\n  const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])\n  const id = createUniqueId()\n  const controlled = () => local.open !== undefined\n  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? false)\n  const isOpen = () => (controlled() ? (local.open ?? false) : uncontrolledOpen())\n  const [trigger, setTrigger] = createSignal<HTMLElement>()\n  let closeIntent = false\n  let ignoreDuplicateClose = false\n  let onOpenChange: (next: boolean, source?: 'handoff') => void\n  let pointerCloseIntentUntil = 0\n  let pointerCloseIntentTimeout: ReturnType<typeof setTimeout> | undefined\n  const clearPointerCloseIntent = () => {\n    pointerCloseIntentUntil = 0\n    if (pointerCloseIntentTimeout) clearTimeout(pointerCloseIntentTimeout)\n    pointerCloseIntentTimeout = undefined\n  }\n  const markPointerCloseIntent = () => {\n    if (!isOpen()) return\n    clearPointerCloseIntent()\n    const closeDelay = props.closeDelay ?? timing.closeDelay\n    pointerCloseIntentUntil = Date.now() + closeDelay + 50\n    pointerCloseIntentTimeout = setTimeout(clearPointerCloseIntent, closeDelay + 50)\n  }\n  const markCloseIntent = () => {\n    closeIntent = true\n    clearPointerCloseIntent()\n    queueMicrotask(() => {\n      closeIntent = false\n    })\n  }\n  const requestCloseFromAnotherTooltip = () => {\n    if (!isOpen()) return\n\n    // Another trigger is an explicit handoff, even when a focused tooltip has\n    // a pending pointer-close intent that would otherwise suppress Kobalte's\n    // close callback. Route the request through the same controlled/uncontrolled\n    // state contract as Kobalte and ignore its duplicate callback for this turn.\n    ignoreDuplicateClose = true\n    queueMicrotask(() => {\n      ignoreDuplicateClose = false\n    })\n    onOpenChange(false, 'handoff')\n  }\n  const interaction: TooltipInteraction = {\n    id,\n    trigger,\n    setTrigger,\n    isOpen,\n    isDisabled: () => local.disabled ?? false,\n    isTriggerFocused: () =>\n      Boolean(trigger() && typeof document !== 'undefined' && trigger() === document.activeElement),\n    markOpenIntent: () => {\n      clearPointerCloseIntent()\n      pendingTooltipOpenId = id\n      // A focused tooltip ignores ordinary pointer movement, but entering or\n      // focusing another tooltip is an explicit transfer.\n      for (const openInteraction of openTooltipInteractions) {\n        if (openInteraction.id !== id) openInteraction.requestCloseFromAnotherTooltip()\n      }\n    },\n    clearOpenIntent: () => clearPendingTooltipOpen(id),\n    requestCloseFromAnotherTooltip,\n    markPointerCloseIntent,\n    clearPointerCloseIntent,\n    markCloseIntent,\n  }\n  registerTooltipInteraction(interaction)\n  onCleanup(() => {\n    clearPointerCloseIntent()\n    ignoreDuplicateClose = false\n  })\n  if (isOpen()) setTooltipInteractionOpen(interaction, true)\n  createEffect(() => setTooltipInteractionOpen(interaction, isOpen()))\n  onOpenChange = (next: boolean, source) => {\n    if (!next && source !== 'handoff' && ignoreDuplicateClose) return\n\n    if (next) {\n      clearPendingTooltipOpen(id)\n      clearPointerCloseIntent()\n      // Install this capture listener before Kobalte's open-state effect adds\n      // its scroll listener later in the same update.\n      setTooltipInteractionOpen(interaction, true)\n    } else {\n      const focusedTrigger = interaction.isTriggerFocused()\n      const anotherTooltipOpening =\n        pendingTooltipOpenId !== undefined && pendingTooltipOpenId !== id\n      const pointerClosePending = Date.now() <= pointerCloseIntentUntil\n      if (\n        source !== 'handoff' &&\n        focusedTrigger &&\n        pointerClosePending &&\n        !closeIntent &&\n        !anotherTooltipOpening\n      ) {\n        clearPointerCloseIntent()\n        return\n      }\n      closeIntent = false\n      clearPointerCloseIntent()\n      clearPendingTooltipOpen(id)\n    }\n\n    if (!controlled()) setUncontrolledOpen(next)\n    local.onOpenChange?.(next)\n    if (next) {\n      // A controlled parent can reject the open request without changing its\n      // signal, so the effect above would not rerun to release this listener.\n      queueMicrotask(() => {\n        if (!isOpen()) setTooltipInteractionOpen(interaction, false)\n      })\n    }\n  }\n\n  // Kobalte dismisses on Escape only when its content owns the top-most\n  // layer, and a handoff keeps the previous tooltip's content mounted while\n  // it exits — swallowing the key for the tooltip that just took over.\n  // Listening on document (capture) closes this tooltip first; the layer's\n  // own handler still runs for anything stacked above it.\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return\n    markCloseIntent()\n    onOpenChange(false)\n  }\n  createEffect(() => {\n    if (isServer || !isOpen()) return\n    document.addEventListener('keydown', handleKeyDown, true)\n    onCleanup(() => document.removeEventListener('keydown', handleKeyDown, true))\n  })\n\n  return (\n    <TooltipInteractionContext.Provider value={interaction}>\n      <KobalteTooltip\n        open={isOpen()}\n        onOpenChange={onOpenChange}\n        disabled={local.disabled}\n        openDelay={props.openDelay ?? timing.openDelay}\n        closeDelay={props.closeDelay ?? timing.closeDelay}\n        skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}\n        {...rest}\n      />\n    </TooltipInteractionContext.Provider>\n  )\n}\n\nexport function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {\n  const interaction = useContext(TooltipInteractionContext)\n  const [local, rest] = splitProps(props, [\n    'ref',\n    'onFocus',\n    'onBlur',\n    'onPointerEnter',\n    'onPointerLeave',\n    'onClick',\n  ])\n\n  return (\n    <KobalteTooltip.Trigger\n      {...rest}\n      ref={(element) => {\n        interaction?.setTrigger(element)\n        if (typeof local.ref === 'function') local.ref(element)\n      }}\n      onFocus={(event) => {\n        invokeEventHandler(local.onFocus, event)\n        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n      }}\n      onBlur={(event) => {\n        invokeEventHandler(local.onBlur, event)\n        interaction?.clearOpenIntent()\n        interaction?.markCloseIntent()\n      }}\n      onPointerEnter={(event) => {\n        invokeEventHandler(local.onPointerEnter, event)\n        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n      }}\n      onPointerLeave={(event) => {\n        invokeEventHandler(local.onPointerLeave, event)\n        interaction?.clearOpenIntent()\n        interaction?.markPointerCloseIntent()\n      }}\n      onClick={(event) => {\n        invokeEventHandler(local.onClick, event)\n        interaction?.markCloseIntent()\n      }}\n    />\n  )\n}\n\nexport type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const interaction = useContext(TooltipInteractionContext)\n  const [local, rest] = splitProps(props, [\n    'class',\n    'children',\n    'aria-hidden',\n    'onEscapeKeyDown',\n    'onPointerDownOutside',\n  ])\n  const context = useTooltipContext()\n\n  // Kobalte keeps force-mounted and exiting content present after close. Hide\n  // that retained tooltip from assistive technology until it opens again.\n  return (\n    <KobalteTooltip.Portal>\n      <KobalteTooltip.Content\n        /* The slot is what base.css's pointer-transparency rule keys on; every\n           tip carries it, so no consumer has to remember to pass it. */\n        data-slot=\"tooltip-content\"\n        class={cn(\n          tooltipTip,\n          // The max width is a token, not a fixed measure: it has to fall\n          // behind the viewport at large root font sizes or the tip — which\n          // Kobalte can shift but never shrink — forces a horizontal scroll.\n          'z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1',\n          'origin-(--kb-tooltip-content-transform-origin) text-balance',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        // A tooltip is never interactive: the content is plain text, and the\n        // placement draws the tip below its action — where a hit-testing tip\n        // would hold the next control hostage, open or departing. Kobalte\n        // inlines pointer-events auto, so this is forced after its merge; the\n        // pointer belongs to the control underneath.\n        style={{ 'pointer-events': 'none' }}\n        aria-hidden={context.isOpen() ? local['aria-hidden'] : true}\n        onEscapeKeyDown={(event) => {\n          invokeEventHandler(local.onEscapeKeyDown, event)\n          if (!event.defaultPrevented) interaction?.markCloseIntent()\n        }}\n        onPointerDownOutside={(event) => {\n          invokeEventHandler(local.onPointerDownOutside, event)\n          if (!event.defaultPrevented) interaction?.markCloseIntent()\n        }}\n        {...rest}\n      >\n        {local.children}\n      </KobalteTooltip.Content>\n    </KobalteTooltip.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["Tooltip","KobalteTooltip","useTooltipContext","ComponentProps","JSX","createContext","createEffect","createSignal","createUniqueId","onCleanup","Show","splitProps","useContext","isServer","tooltipTip","topLayerProps","cn","TooltipTiming","openDelay","closeDelay","skipDelayDuration","tooltipDefaults","TooltipTimingContext","TooltipInteraction","id","trigger","HTMLElement","setTrigger","element","isOpen","isDisabled","isTriggerFocused","markOpenIntent","clearOpenIntent","requestCloseFromAnotherTooltip","markPointerCloseIntent","clearPointerCloseIntent","markCloseIntent","TooltipInteractionContext","openTooltipInteractions","Set","pendingTooltipOpenId","tooltipScrollListenerAttached","clearPendingTooltipOpen","undefined","tooltipScrollContainsTrigger","event","Event","target","window","Node","contains","handleTooltipScroll","interaction","handleTooltipPointerMove","PointerEvent","setTooltipInteractionOpen","open","has","add","addEventListener","document","delete","size","removeEventListener","registerTooltipInteraction","invokeEventHandler","handler","Array","isArray","callback","data","TooltipProviderProps","children","TooltipProvider","props","_$createComponent","Provider","value","TooltipRootProps","timing","local","rest","controlled","uncontrolledOpen","setUncontrolledOpen","defaultOpen","closeIntent","ignoreDuplicateClose","onOpenChange","next","source","pointerCloseIntentUntil","pointerCloseIntentTimeout","ReturnType","setTimeout","clearTimeout","Date","now","queueMicrotask","disabled","Boolean","activeElement","openInteraction","focusedTrigger","anotherTooltipOpening","pointerClosePending","handleKeyDown","KeyboardEvent","key","_$mergeProps","TooltipTrigger","Trigger","ref","onFocus","defaultPrevented","onBlur","onPointerEnter","onPointerLeave","onClick","TooltipContentProps","Content","icon","Element","TooltipContent","context","Portal","class","style","aria-hidden","_$memo","onEscapeKeyDown","onPointerDownOutside","when","_el$","_tmpl$","_$insert","_$createComponent","Tooltip","KobalteTooltip","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { tooltipTip, topLayerProps } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * The provider sets the *timing* defaults for every tooltip below it.\n *\n * Timing is the part of a tooltip that has to agree across an app: one that\n * opens in 200ms in a toolbar and 700ms in a sidebar reads as a bug. The\n * provider is where that agreement lives. It is optional — a tooltip outside a\n * provider falls back to the same defaults — so a consumer can drop it in\n * without restructuring anything.\n */\ntype TooltipTiming = {\n  openDelay: number\n  closeDelay: number\n  skipDelayDuration: number\n}\n\nconst tooltipDefaults: TooltipTiming = {\n  /** Long enough that a pointer crossing a toolbar does not strobe tooltips. */\n  openDelay: 400,\n  /** Short, because the pointer has already left the control. */\n  closeDelay: 80,\n  /**\n   * After a tooltip has been seen, the next one opens immediately for this\n   * long. This is what makes moving along a row of icons feel like one\n   * gesture instead of four separate waits.\n   */\n  skipDelayDuration: 500,\n}\n\nconst TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)\n\ntype TooltipInteraction = {\n  id: string\n  trigger: () => HTMLElement | undefined\n  setTrigger: (element: HTMLElement) => void\n  isOpen: () => boolean\n  isDisabled: () => boolean\n  isTriggerFocused: () => boolean\n  markOpenIntent: () => void\n  clearOpenIntent: () => void\n  requestCloseFromAnotherTooltip: () => void\n  markPointerCloseIntent: () => void\n  clearPointerCloseIntent: () => void\n  markCloseIntent: () => void\n}\n\nconst TooltipInteractionContext = createContext<TooltipInteraction>()\nconst openTooltipInteractions = new Set<TooltipInteraction>()\nlet pendingTooltipOpenId: string | undefined\nlet tooltipScrollListenerAttached = false\n\nfunction clearPendingTooltipOpen(id: string) {\n  if (pendingTooltipOpenId === id) pendingTooltipOpenId = undefined\n}\n\nfunction tooltipScrollContainsTrigger(event: Event, trigger: HTMLElement) {\n  const target = event.target\n  return target === window || (target instanceof Node && target.contains(trigger))\n}\n\nfunction handleTooltipScroll(event: Event) {\n  for (const interaction of openTooltipInteractions) {\n    const trigger = interaction.trigger()\n    if (interaction.isOpen() && trigger && tooltipScrollContainsTrigger(event, trigger)) {\n      interaction.markCloseIntent()\n    }\n  }\n}\n\nfunction handleTooltipPointerMove(event: PointerEvent) {\n  for (const interaction of openTooltipInteractions) {\n    const trigger = interaction.trigger()\n    const target = event.target\n    if (\n      interaction.isOpen() &&\n      interaction.isTriggerFocused() &&\n      trigger &&\n      !(target instanceof Node && trigger.contains(target))\n    ) {\n      interaction.markPointerCloseIntent()\n    }\n  }\n}\n\nfunction setTooltipInteractionOpen(interaction: TooltipInteraction, open: boolean) {\n  if (isServer) return\n\n  if (open) {\n    if (openTooltipInteractions.has(interaction)) return\n    openTooltipInteractions.add(interaction)\n    if (!tooltipScrollListenerAttached) {\n      tooltipScrollListenerAttached = true\n      // Register before Kobalte's global listeners so intentional scroll\n      // dismissal can be distinguished from its delayed pointer dismissal.\n      window.addEventListener('scroll', handleTooltipScroll, true)\n      document.addEventListener('pointermove', handleTooltipPointerMove, true)\n    }\n  } else {\n    openTooltipInteractions.delete(interaction)\n    if (openTooltipInteractions.size === 0 && tooltipScrollListenerAttached) {\n      tooltipScrollListenerAttached = false\n      window.removeEventListener('scroll', handleTooltipScroll, true)\n      document.removeEventListener('pointermove', handleTooltipPointerMove, true)\n    }\n  }\n}\n\nfunction registerTooltipInteraction(interaction: TooltipInteraction) {\n  onCleanup(() => {\n    setTooltipInteractionOpen(interaction, false)\n    clearPendingTooltipOpen(interaction.id)\n  })\n}\n\nfunction invokeEventHandler(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\nexport type TooltipProviderProps = {\n  children?: ComponentProps<'div'>['children']\n  openDelay?: number\n  closeDelay?: number\n  skipDelayDuration?: number\n}\n\nexport function TooltipProvider(props: TooltipProviderProps) {\n  return (\n    <TooltipTimingContext.Provider\n      value={{\n        openDelay: props.openDelay ?? tooltipDefaults.openDelay,\n        closeDelay: props.closeDelay ?? tooltipDefaults.closeDelay,\n        skipDelayDuration: props.skipDelayDuration ?? tooltipDefaults.skipDelayDuration,\n      }}\n    >\n      {props.children}\n    </TooltipTimingContext.Provider>\n  )\n}\n\nexport type TooltipRootProps = ComponentProps<typeof KobalteTooltip>\n\nexport function Tooltip(props: TooltipRootProps) {\n  const timing = useContext(TooltipTimingContext)\n  const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])\n  const id = createUniqueId()\n  const controlled = () => local.open !== undefined\n  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? false)\n  const isOpen = () => (controlled() ? (local.open ?? false) : uncontrolledOpen())\n  const [trigger, setTrigger] = createSignal<HTMLElement>()\n  let closeIntent = false\n  let ignoreDuplicateClose = false\n  let onOpenChange: (next: boolean, source?: 'handoff') => void\n  let pointerCloseIntentUntil = 0\n  let pointerCloseIntentTimeout: ReturnType<typeof setTimeout> | undefined\n  const clearPointerCloseIntent = () => {\n    pointerCloseIntentUntil = 0\n    if (pointerCloseIntentTimeout) clearTimeout(pointerCloseIntentTimeout)\n    pointerCloseIntentTimeout = undefined\n  }\n  const markPointerCloseIntent = () => {\n    if (!isOpen()) return\n    clearPointerCloseIntent()\n    const closeDelay = props.closeDelay ?? timing.closeDelay\n    pointerCloseIntentUntil = Date.now() + closeDelay + 50\n    pointerCloseIntentTimeout = setTimeout(clearPointerCloseIntent, closeDelay + 50)\n  }\n  const markCloseIntent = () => {\n    closeIntent = true\n    clearPointerCloseIntent()\n    queueMicrotask(() => {\n      closeIntent = false\n    })\n  }\n  const requestCloseFromAnotherTooltip = () => {\n    if (!isOpen()) return\n\n    // Another trigger is an explicit handoff, even when a focused tooltip has\n    // a pending pointer-close intent that would otherwise suppress Kobalte's\n    // close callback. Route the request through the same controlled/uncontrolled\n    // state contract as Kobalte and ignore its duplicate callback for this turn.\n    ignoreDuplicateClose = true\n    queueMicrotask(() => {\n      ignoreDuplicateClose = false\n    })\n    onOpenChange(false, 'handoff')\n  }\n  const interaction: TooltipInteraction = {\n    id,\n    trigger,\n    setTrigger,\n    isOpen,\n    isDisabled: () => local.disabled ?? false,\n    isTriggerFocused: () =>\n      Boolean(trigger() && typeof document !== 'undefined' && trigger() === document.activeElement),\n    markOpenIntent: () => {\n      clearPointerCloseIntent()\n      pendingTooltipOpenId = id\n      // A focused tooltip ignores ordinary pointer movement, but entering or\n      // focusing another tooltip is an explicit transfer.\n      for (const openInteraction of openTooltipInteractions) {\n        if (openInteraction.id !== id) openInteraction.requestCloseFromAnotherTooltip()\n      }\n    },\n    clearOpenIntent: () => clearPendingTooltipOpen(id),\n    requestCloseFromAnotherTooltip,\n    markPointerCloseIntent,\n    clearPointerCloseIntent,\n    markCloseIntent,\n  }\n  registerTooltipInteraction(interaction)\n  onCleanup(() => {\n    clearPointerCloseIntent()\n    ignoreDuplicateClose = false\n  })\n  if (isOpen()) setTooltipInteractionOpen(interaction, true)\n  createEffect(() => setTooltipInteractionOpen(interaction, isOpen()))\n  onOpenChange = (next: boolean, source) => {\n    if (!next && source !== 'handoff' && ignoreDuplicateClose) return\n\n    if (next) {\n      clearPendingTooltipOpen(id)\n      clearPointerCloseIntent()\n      // Install this capture listener before Kobalte's open-state effect adds\n      // its scroll listener later in the same update.\n      setTooltipInteractionOpen(interaction, true)\n    } else {\n      const focusedTrigger = interaction.isTriggerFocused()\n      const anotherTooltipOpening =\n        pendingTooltipOpenId !== undefined && pendingTooltipOpenId !== id\n      const pointerClosePending = Date.now() <= pointerCloseIntentUntil\n      if (\n        source !== 'handoff' &&\n        focusedTrigger &&\n        pointerClosePending &&\n        !closeIntent &&\n        !anotherTooltipOpening\n      ) {\n        clearPointerCloseIntent()\n        return\n      }\n      closeIntent = false\n      clearPointerCloseIntent()\n      clearPendingTooltipOpen(id)\n    }\n\n    if (!controlled()) setUncontrolledOpen(next)\n    local.onOpenChange?.(next)\n    if (next) {\n      // A controlled parent can reject the open request without changing its\n      // signal, so the effect above would not rerun to release this listener.\n      queueMicrotask(() => {\n        if (!isOpen()) setTooltipInteractionOpen(interaction, false)\n      })\n    }\n  }\n\n  // Kobalte dismisses on Escape only when its content owns the top-most\n  // layer, and a handoff keeps the previous tooltip's content mounted while\n  // it exits — swallowing the key for the tooltip that just took over.\n  // Listening on document (capture) closes this tooltip first; the layer's\n  // own handler still runs for anything stacked above it.\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return\n    markCloseIntent()\n    onOpenChange(false)\n  }\n  createEffect(() => {\n    if (isServer || !isOpen()) return\n    document.addEventListener('keydown', handleKeyDown, true)\n    onCleanup(() => document.removeEventListener('keydown', handleKeyDown, true))\n  })\n\n  return (\n    <TooltipInteractionContext.Provider value={interaction}>\n      <KobalteTooltip\n        open={isOpen()}\n        onOpenChange={onOpenChange}\n        disabled={local.disabled}\n        openDelay={props.openDelay ?? timing.openDelay}\n        closeDelay={props.closeDelay ?? timing.closeDelay}\n        skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}\n        {...rest}\n      />\n    </TooltipInteractionContext.Provider>\n  )\n}\n\nexport function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {\n  const interaction = useContext(TooltipInteractionContext)\n  const [local, rest] = splitProps(props, [\n    'ref',\n    'onFocus',\n    'onBlur',\n    'onPointerEnter',\n    'onPointerLeave',\n    'onClick',\n  ])\n\n  return (\n    <KobalteTooltip.Trigger\n      {...rest}\n      ref={(element) => {\n        interaction?.setTrigger(element)\n        if (typeof local.ref === 'function') local.ref(element)\n      }}\n      onFocus={(event) => {\n        invokeEventHandler(local.onFocus, event)\n        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n      }}\n      onBlur={(event) => {\n        invokeEventHandler(local.onBlur, event)\n        interaction?.clearOpenIntent()\n        interaction?.markCloseIntent()\n      }}\n      onPointerEnter={(event) => {\n        invokeEventHandler(local.onPointerEnter, event)\n        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n      }}\n      onPointerLeave={(event) => {\n        invokeEventHandler(local.onPointerLeave, event)\n        interaction?.clearOpenIntent()\n        interaction?.markPointerCloseIntent()\n      }}\n      onClick={(event) => {\n        invokeEventHandler(local.onClick, event)\n        interaction?.markCloseIntent()\n      }}\n    />\n  )\n}\n\nexport type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {\n  /**\n   * A leading icon, repeating the trigger's glyph inside the tip — the side\n   * rail's icon+label treatment, offered so a toolbar or rail tooltip does not\n   * have to hand-roll it. Decorative by contract: the tip is `aria-hidden`\n   * while closed and never the accessible name, so the icon must not be the\n   * only carrier of meaning. Size it by leaving the svg bare; the slot fixes\n   * it to the system's control size.\n   */\n  icon?: JSX.Element\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const interaction = useContext(TooltipInteractionContext)\n  const [local, rest] = splitProps(props, [\n    'class',\n    'children',\n    'icon',\n    'aria-hidden',\n    'onEscapeKeyDown',\n    'onPointerDownOutside',\n  ])\n  const context = useTooltipContext()\n\n  // Kobalte keeps force-mounted and exiting content present after close. Hide\n  // that retained tooltip from assistive technology until it opens again.\n  return (\n    <KobalteTooltip.Portal>\n      <KobalteTooltip.Content\n        /* The slot is what base.css's pointer-transparency rule keys on; every\n           tip carries it, so no consumer has to remember to pass it. */\n        data-slot=\"tooltip-content\"\n        class={cn(\n          tooltipTip,\n          // The max width is a token, not a fixed measure: it has to fall\n          // behind the viewport at large root font sizes or the tip — which\n          // Kobalte can shift but never shrink — forces a horizontal scroll.\n          'z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1',\n          'origin-(--kb-tooltip-content-transform-origin) text-balance',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          // An icon+label tip is one row that reads as a unit, so the label\n          // never wraps under the glyph.\n          { 'flex items-center gap-2 whitespace-nowrap': !!local.icon },\n          local.class\n        )}\n        // A tooltip is never interactive: the content is plain text, and the\n        // placement draws the tip below its action — where a hit-testing tip\n        // would hold the next control hostage, open or departing. Kobalte\n        // inlines pointer-events auto, so this is forced after its merge; the\n        // pointer belongs to the control underneath.\n        style={{ 'pointer-events': 'none' }}\n        aria-hidden={context.isOpen() ? local['aria-hidden'] : true}\n        onEscapeKeyDown={(event) => {\n          invokeEventHandler(local.onEscapeKeyDown, event)\n          if (!event.defaultPrevented) interaction?.markCloseIntent()\n        }}\n        onPointerDownOutside={(event) => {\n          invokeEventHandler(local.onPointerDownOutside, event)\n          if (!event.defaultPrevented) interaction?.markCloseIntent()\n        }}\n        // A tooltip opened from inside a modal dialog is part of that dialog's\n        // surface, so it carries the same top-layer exemption as a menu or a\n        // popover — without it the dialog's hide-outside observer aria-hides\n        // the tip while it is on screen.\n        {...topLayerProps}\n        {...rest}\n      >\n        <Show when={local.icon}>\n          {(icon) => (\n            <span\n              data-slot=\"tooltip-icon\"\n              aria-hidden=\"true\"\n              class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\"\n            >\n              {icon()}\n            </span>\n          )}\n        </Show>\n        {local.children}\n      </KobalteTooltip.Content>\n    </KobalteTooltip.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -20,6 +20,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./component
 import { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger } from "./components/ui/combobox/combobox.js";
 import { ValueCombobox } from "./components/ui/combobox/value-combobox.js";
 import { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX } from "./components/ui/code-block/code-block.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip/tooltip.js";
 import { Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from "./components/ui/command/command.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/ui/context-menu/context-menu.js";
@@ -30,7 +31,6 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { EntityIcon, entityIconVariants, monogram } from "./components/ui/entity-icon/entity-icon.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./components/ui/empty/empty.js";
 import { Spinner } from "./components/ui/spinner/spinner.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip/tooltip.js";
 import { ActionButton } from "./components/composites/action-button/action-button.js";
 import { EmptyState } from "./components/ui/empty/empty-state.js";
 import { Label } from "./components/ui/label/label.js";
@@ -103,7 +103,6 @@ import { accentPresets, allTokens, colorTokens, densityTokens, designTokens, ele
 import { isThemeAccentId } from "./lib/theme-accents.js";
 import { appearancePreviewThemes, builtinThemes, contrastRatio, defaultDarkThemeId, defaultLightThemeId, resolveAccentPreset, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themesForAppearance, validateTheme, validateThemeRegistry, withAccent } from "./lib/themes.js";
 import { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize } from "./lib/appearance-font-settings.js";
-import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceFontSettingsGroup } from "./components/composites/appearance-editor/font-settings-group.js";
 import { ThemePicker, ThemePreview, ThemeSwatch } from "./components/theme/theme-picker.js";
 import { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme } from "./components/theme/theme-provider.js";
@@ -122,6 +121,7 @@ import { SettingsNavigation } from "./components/composites/settings/settings-na
 import { SettingsLayout } from "./components/composites/settings/settings-layout.js";
 import { SceneControls } from "./components/composites/scene-controls/scene-controls.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
+import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/version-notes.js";
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";

package/dist/lib/overlay.d.ts

@@ -9,8 +9,24 @@
  * library would inherit all three. Declaring the surface once is what makes
  * "an overlay looks like this" a fact rather than a convention.
  */
-/** The panel itself: fill, hairline edge, radius, elevation. */
+import { type VariantProps } from '#lib/variants';
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+ * and the command palette float on the elevated overlay rung (`--popover`). */
 export declare const overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
+/**
+ * The modal panel: the same hairline edge, radius and elevation, painted on the
+ * *neutral* theme surface instead of the elevated overlay rung.
+ *
+ * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+ * the canvas hue's chroma on the elevated step. On the dark default's violet
+ * canvas that makes the dialog the most chromatic surface in the ladder —
+ * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+ * panel that cast reads as a warm tint the canvas never has. shadcn's own
+ * convention already splits the two: a Dialog paints `bg-background`, menus and
+ * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+ * carry the separation the lighter fill no longer provides.
+ */
+export declare const dialogSurface = "bg-background text-foreground rounded-xl border border-border shadow-lg";
 /**
  * Overlay titles have one fixed typography role. Keep this small recipe shared
  * without loading the configurable Heading component into every dialog.
@@ -53,6 +69,19 @@ export declare const destructiveMenuItem = "border-s-2 border-destructive ps-1.5
 export declare const menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase";
 /** The rule between menu groups. */
 export declare const menuSeparator = "bg-border -mx-1 my-1 h-px";
+/**
+ * A leading colour swatch on a menu or select row: the sanctioned way to carry
+ * a card-tone colour into a list of options. The tones are the system's accent
+ * and status roles — the vocabulary a Badge already speaks — so the colour an
+ * option shows in a menu is the colour its badge carries on a card, and a
+ * caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+ * label carries the meaning, so a tone is never the only signal.
+ */
+export declare const menuSwatchTone: (props?: ({
+    tone?: "destructive" | "success" | "warning" | "info" | "neutral" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The tones a menu row's swatch can take. */
+export type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>;
 /** Padding shared by every menu-list surface. */
 export declare const menuContentPadding = "p-1";
 /**

package/dist/lib/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEtD;+EAC+E;AAC/E,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,4EACiD,CAAA;AAE3E;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;8EAYzB,CAAA;AAEF,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAErF,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}

package/dist/lib/overlay.js

@@ -1,3 +1,4 @@
+import { cva } from "./variants.js";
 //#region src/lib/overlay.ts
 /**
 * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,
@@ -10,9 +11,24 @@
 * library would inherit all three. Declaring the surface once is what makes
 * "an overlay looks like this" a fact rather than a convention.
 */
-/** The panel itself: fill, hairline edge, radius, elevation. */
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+* and the command palette float on the elevated overlay rung (`--popover`). */
 var overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
 /**
+* The modal panel: the same hairline edge, radius and elevation, painted on the
+* *neutral* theme surface instead of the elevated overlay rung.
+*
+* `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+* the canvas hue's chroma on the elevated step. On the dark default's violet
+* canvas that makes the dialog the most chromatic surface in the ladder —
+* `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+* panel that cast reads as a warm tint the canvas never has. shadcn's own
+* convention already splits the two: a Dialog paints `bg-background`, menus and
+* popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+* carry the separation the lighter fill no longer provides.
+*/
+var dialogSurface = "bg-background text-foreground rounded-xl border border-border shadow-lg";
+/**
 * Overlay titles have one fixed typography role. Keep this small recipe shared
 * without loading the configurable Heading component into every dialog.
 */
@@ -66,6 +82,25 @@ var menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreg
 /** The rule between menu groups. */
 var menuSeparator = "bg-border -mx-1 my-1 h-px";
 /**
+* A leading colour swatch on a menu or select row: the sanctioned way to carry
+* a card-tone colour into a list of options. The tones are the system's accent
+* and status roles — the vocabulary a Badge already speaks — so the colour an
+* option shows in a menu is the colour its badge carries on a card, and a
+* caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+* label carries the meaning, so a tone is never the only signal.
+*/
+var menuSwatchTone = cva("size-2 shrink-0 rounded-full", {
+	variants: { tone: {
+		neutral: "bg-muted-foreground",
+		primary: "bg-primary",
+		success: "bg-success",
+		warning: "bg-warning",
+		destructive: "bg-destructive",
+		info: "bg-info"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+/**
 * Marks a floating layer — a menu, a listbox, a popover — as part of the top
 * layer.
 *
@@ -79,6 +114,6 @@ var menuSeparator = "bg-border -mx-1 my-1 h-px";
 */
 var topLayerProps = { "data-kb-top-layer": "" };
 //#endregion
-export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, overlayTitle, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
+export { destructiveMenuItem, dialogSurface, menuItem, menuLabel, menuSeparator, menuSwatchTone, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, overlayTitle, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
 
 //# sourceMappingURL=overlay.js.map

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;;;;;AAiB7B,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\nimport { cva, type VariantProps } from '#lib/variants'\n\n/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers\n * and the command palette float on the elevated overlay rung (`--popover`). */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * The modal panel: the same hairline edge, radius and elevation, painted on the\n * *neutral* theme surface instead of the elevated overlay rung.\n *\n * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies\n * the canvas hue's chroma on the elevated step. On the dark default's violet\n * canvas that makes the dialog the most chromatic surface in the ladder —\n * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog\n * panel that cast reads as a warm tint the canvas never has. shadcn's own\n * convention already splits the two: a Dialog paints `bg-background`, menus and\n * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow\n * carry the separation the lighter fill no longer provides.\n */\nexport const dialogSurface =\n  'bg-background text-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/**\n * A leading colour swatch on a menu or select row: the sanctioned way to carry\n * a card-tone colour into a list of options. The tones are the system's accent\n * and status roles — the vocabulary a Badge already speaks — so the colour an\n * option shows in a menu is the colour its badge carries on a card, and a\n * caller never passes a raw colour into a list. The dot is `aria-hidden`; the\n * label carries the meaning, so a tone is never the only signal.\n */\nexport const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      primary: 'bg-primary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-info',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\n/** The tones a menu row's swatch can take. */\nexport type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAa,iBACX;;;;;;;;;;;;;;AAeF,IAAa,gBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;AAU7B,IAAa,iBAAiB,IAAI,gCAAgC;CAChE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;;;;;;;;;;;;;AAoBD,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}

package/dist/r/dialog.json

@@ -8,6 +8,7 @@
     "lucide-solid@^1.51.0"
   ],
   "registryDependencies": [
+    "@adea-ai/ui/tooltip",
     "lib"
   ],
   "files": [

package/dist/r/registry.json

@@ -568,6 +568,7 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/tooltip",
         "lib"
       ],
       "files": [
@@ -1804,7 +1805,7 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/button",
+        "@adea-ai/ui/action-button",
         "lib"
       ],
       "files": [

package/dist/r/split-layout.json

@@ -8,7 +8,7 @@
     "lucide-solid@^1.51.0"
   ],
   "registryDependencies": [
-    "@adea-ai/ui/button",
+    "@adea-ai/ui/action-button",
     "lib"
   ],
   "files": [

package/dist/r/src/components/composites/appearance-editor/accent-swatch-groups.tsx

@@ -22,11 +22,7 @@
  * SOFTWARE.
  */
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
-import { For, Show } from 'solid-js'
-import { cn } from '../../../lib/utils'
-
-export const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const
-const primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)
+import { For } from 'solid-js'
 
 type AccentOption = Readonly<{
   id: string
@@ -37,104 +33,55 @@ type AccentOption = Readonly<{
 
 type AccentSwatchGroupsProps = {
   accentOptions: readonly AccentOption[]
-  themeAccentOptions: readonly AccentOption[]
+  /**
+   * Accepted for host compatibility and no longer rendered. The picker offers
+   * one theme-scoped group — the theme's own primary followed by the presets —
+   * instead of splitting additional presets and the theme pair's accent slots
+   * into labelled groups of their own. A stored theme-accent id still resolves
+   * (`resolveAccentPreset`) and is still described by the row; it is just no
+   * longer offered as a swatch, and a host can stop feeding this list.
+   */
+  themeAccentOptions?: readonly AccentOption[]
   resolvedAppearance: 'light' | 'dark'
   themeDefaultColor: string
 }
 
+/**
+ * The accent choices, as ONE group: the theme's own primary first, then every
+ * preset the host feeds, each painted with its value for the resolved
+ * appearance — which is what makes the group theme-scoped rather than a
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
+ * renders it beside this grid), because whether a free-form colour is accepted
+ * is the host's validation to own.
+ */
 export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
-  const primaryAccents = () =>
-    PRIMARY_ACCENT_IDS.flatMap((id) => {
-      const option = props.accentOptions.find((candidate) => candidate.id === id)
-      return option ? [option] : []
-    })
-  const additionalAccents = () =>
-    props.accentOptions.filter(
-      (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)
-    )
+  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')
 
   return (
-    <>
-      <div class="grid grid-cols-3 gap-2" data-primary-accent-grid>
-        <AccentSwatch
-          id="theme"
-          label="Theme default"
-          color={props.themeDefaultColor}
-          group="primary"
-        />
-        <For each={primaryAccents()}>
-          {(option) => (
-            <AccentSwatch
-              id={option.id}
-              label={option.label}
-              color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-              group="primary"
-            />
-          )}
-        </For>
-      </div>
-      <Show when={additionalAccents().length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Additional colors</span>
-          <div class="flex flex-wrap gap-2">
-            <For each={additionalAccents()}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={option.label}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="additional"
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-      <Show when={props.themeAccentOptions.length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Theme accents</span>
-          <div class="grid grid-cols-3 gap-2">
-            <For each={props.themeAccentOptions}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={'Theme ' + option.label.toLowerCase()}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="theme"
-                  dashed
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-    </>
+    <div class="grid grid-cols-4 gap-2" data-accent-grid>
+      <AccentSwatch id="theme" label="Theme default" color={props.themeDefaultColor} />
+      <For each={presets()}>
+        {(option) => (
+          <AccentSwatch
+            id={option.id}
+            label={option.label}
+            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+          />
+        )}
+      </For>
+    </div>
   )
 }
 
-function AccentSwatch(props: {
-  id: string
-  label: string
-  color: string
-  group: 'primary' | 'additional' | 'theme'
-  dashed?: boolean
-}) {
+function AccentSwatch(props: { id: string; label: string; color: string }) {
   return (
     <Radio.Item
       value={props.id}
       data-accent-option={props.id}
-      data-primary-accent={props.group === 'primary' ? props.id : undefined}
-      data-additional-accent={props.group === 'additional' ? props.id : undefined}
-      data-theme-accent={props.group === 'theme' ? props.id : undefined}
       class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
     >
       <Radio.ItemInput />
-      <Radio.ItemLabel
-        class={cn(
-          'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
-          { 'border-dashed data-[checked]:border-solid': props.dashed }
-        )}
-      >
+      <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">
         <span
           class="block size-full rounded-full"
           aria-hidden="true"

package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -104,8 +104,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
   // user will see it.
   const resolvedAppearance = () =>
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
-  // The accents the previewed theme pair carries, offered after the presets.
-  const themeAccents = () => props.themeAccentOptions ?? []
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   return (
     <Radio
@@ -122,7 +120,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
     >
       <AccentSwatchGroups
         accentOptions={props.accentOptions}
-        themeAccentOptions={themeAccents()}
         resolvedAppearance={resolvedAppearance()}
         themeDefaultColor={
           resolvedAppearance() === 'light'