{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"smart-recommendation-clean","type":"registry:ui","title":"Smart Recommendation (Clean)","description":"Suggestion card with a confidence signal, alternatives to switch to and accept with undo","dependencies":[],"files":[{"path":"registry/smart-recommendation-clean/smart-recommendation-clean.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\n\n/*\n * Smart Recommendation (Clean) – a suggestion card with a confidence signal, alternatives and one-click accept, in a\n * single self-contained file.\n * Clean style: no tray – one white card with hairline shadows and quiet gray type; the signal and the actions sit in\n * the last row of the card. Fold it away, pick an alternative instead, accept and undo.\n * The styles are injected below, so no extra files are needed.\n */\n\nexport type Recommendation = {\n  id: string;\n  /** Short name, used in the accept button, e.g. \"Incremental sync\" */\n  label: string;\n  /** One sentence why – shown in the card */\n  reason: ReactNode;\n  /** 0 = no signal, 1 = weak, 2 = good, 3 = strong */\n  signal: 0 | 1 | 2 | 3;\n};\n\nexport type SmartRecommendationProps = {\n  title?: string;\n  /** First entry is the recommendation, the rest are offered as alternatives */\n  options: Recommendation[];\n  onAccept?: (option: Recommendation) => void;\n  onUndo?: (option: Recommendation) => void;\n  defaultOpen?: boolean;\n  className?: string;\n};\n\nconst signalText = [\"No signal\", \"Weak signal\", \"Good signal\", \"Strong signal\"];\n/** Any signal outside 0–3 (NaN, \"3\", 7, -1) is read as the nearest valid level, NaN as no signal */\nconst level = (s: unknown): 0 | 1 | 2 | 3 => {\n  const n = Math.round(Number(s));\n  return (Number.isFinite(n) ? Math.min(3, Math.max(0, n)) : 0) as 0 | 1 | 2 | 3;\n};\n/** \"Incremental sync\" → \"incremental sync\", but \"AWS backup\" and \"S3 sync\" keep their capitals */\nconst lowerFirst = (s: string) => (/^\\p{Lu}\\p{Ll}/u.test(s) ? s.charAt(0).toLowerCase() + s.slice(1) : s);\n\nexport function SmartRecommendation({\n  title = \"Smart recommendation\",\n  options,\n  onAccept,\n  onUndo,\n  defaultOpen = true,\n  className,\n}: SmartRecommendationProps) {\n  // By position, so two options with the same id stay apart\n  const [chosen, setChosen] = useState(0);\n  const [accepted, setAccepted] = useState<number | null>(null);\n  const [open, setOpen] = useState(defaultOpen);\n  const [menu, setMenu] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  // When the button sits at the start of its row (long labels push the actions onto their own row), the menu opens\n  // to the right instead of past the card's left edge\n  const [flip, setFlip] = useState(false);\n  useLayoutEffect(() => {\n    const alt = menuRef.current;\n    const pop = alt?.querySelector<HTMLElement>(\".ui-src__menu\");\n    const card = alt?.closest<HTMLElement>(\".ui-src\");\n    if (!menu || !alt || !pop || !card || getComputedStyle(alt).position === \"static\") return setFlip(false);\n    // Some slack: a menu that only grazes the edge (as in the demo) keeps opening to the left\n    setFlip(alt.getBoundingClientRect().right - pop.offsetWidth < card.getBoundingClientRect().left - 24);\n  }, [menu]);\n\n  useEffect(() => {\n    if (!menu) return;\n    const away = (e: PointerEvent) => !menuRef.current?.contains(e.target as Node) && setMenu(false);\n    const esc = (e: KeyboardEvent) => e.key === \"Escape\" && setMenu(false);\n    window.addEventListener(\"pointerdown\", away);\n    window.addEventListener(\"keydown\", esc);\n    return () => {\n      window.removeEventListener(\"pointerdown\", away);\n      window.removeEventListener(\"keydown\", esc);\n    };\n  }, [menu]);\n\n  const at = chosen < options.length ? chosen : 0;\n  const current = options[at];\n  // Nothing to recommend – render nothing rather than crash\n  if (!current) return null;\n  const isRecommended = at === 0;\n  const done = accepted === at;\n  const signal = level(current.signal);\n  const acceptText = `Accept ${lowerFirst(String(current.label))}`;\n\n  return (\n    <>\n      <style href=\"ui-smart-recommendation-clean\" precedence=\"default\">\n        {css}\n      </style>\n      <section className={[\"ui-src\", className].filter(Boolean).join(\" \")} aria-label={title} data-accepted={done || undefined}>\n        <button type=\"button\" className=\"ui-src__head\" aria-expanded={open} onClick={() => setOpen((o) => !o)}>\n          <SparkMark />\n          <span className=\"ui-src__title\" dir=\"auto\" title={title}>\n            {title}\n          </span>\n          {!isRecommended && <span className=\"ui-src__pill\">Alternative</span>}\n          <span className=\"ui-src__chevron\">\n            <Icon d=\"m4.5 6.25 3.5 3.5 3.5-3.5\" />\n          </span>\n        </button>\n        <div className=\"ui-src__body\" data-open={open || undefined} inert={!open}>\n          <p className=\"ui-src__reason\" key={at} dir=\"auto\">\n            {current.reason}\n          </p>\n        </div>\n\n        <footer className=\"ui-src__foot\">\n          <span className=\"ui-src__signal\" data-level={signal} title={signalText[signal]}>\n            <span className=\"ui-src__bars\" aria-hidden=\"true\">\n              {[1, 2, 3].map((n) => (\n                <span key={n} data-on={signal >= n || undefined} />\n              ))}\n            </span>\n            {signalText[signal]}\n          </span>\n\n          <div className=\"ui-src__actions\">\n            {options.length > 1 && !done && (\n              <div className=\"ui-src__alt\" ref={menuRef}>\n                <button\n                  type=\"button\"\n                  className=\"ui-src__btn ui-src__btn--icon\"\n                  aria-haspopup=\"menu\"\n                  aria-expanded={menu}\n                  onClick={() => setMenu((m) => !m)}\n                >\n                  <Icon d=\"M5 12.5v-9M2.75 5.75 5 3.5l2.25 2.25M11 3.5v9M8.75 10.25 11 12.5l2.25-2.25\" />\n                  Alternatives\n                </button>\n                {menu && (\n                  <div className=\"ui-src__menu\" role=\"menu\" data-flip={flip || undefined}>\n                    {options.map((o, i) => (\n                      <button\n                        key={`${o.id}-${i}`}\n                        type=\"button\"\n                        role=\"menuitemradio\"\n                        aria-checked={i === at}\n                        className=\"ui-src__option\"\n                        onClick={() => {\n                          setChosen(i);\n                          setMenu(false);\n                          setOpen(true);\n                        }}\n                      >\n                        <span className=\"ui-src__option-label\">\n                          <span className=\"ui-src__option-name\" dir=\"auto\" title={o.label}>\n                            {o.label}\n                          </span>\n                          {i === 0 && <span className=\"ui-src__tag\">Recommended</span>}\n                        </span>\n                        <span className=\"ui-src__mini\" data-level={level(o.signal)} aria-label={signalText[level(o.signal)]}>\n                          {[1, 2, 3].map((n) => (\n                            <span key={n} data-on={level(o.signal) >= n || undefined} />\n                          ))}\n                        </span>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {done ? (\n              <>\n                <span className=\"ui-src__done\" role=\"status\">\n                  <Icon d=\"m3.5 8.5 3 3 6-7\" />\n                  <span className=\"ui-src__done-text\" title={`${current.label} accepted`}>\n                    <bdi>{current.label}</bdi> accepted\n                  </span>\n                </span>\n                <button\n                  type=\"button\"\n                  className=\"ui-src__btn ui-src__btn--icon\"\n                  onClick={() => {\n                    setAccepted(null);\n                    onUndo?.(current);\n                  }}\n                >\n                  <Icon d=\"M3.5 6.5h6.25a2.75 2.75 0 0 1 0 5.5H8M5.75 4.25 3.5 6.5l2.25 2.25\" />\n                  Undo\n                </button>\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"ui-src__btn ui-src__btn--primary\"\n                title={acceptText}\n                onClick={() => {\n                  setAccepted(at);\n                  setMenu(false);\n                  onAccept?.(current);\n                }}\n              >\n                <span className=\"ui-src__btn-text\">{acceptText}</span>\n              </button>\n            )}\n          </div>\n        </footer>\n      </section>\n    </>\n  );\n}\n\n/** The assistant mark: a solid blue sparkle with a small one beside it */\nconst SparkMark = () => (\n  <svg viewBox=\"0 0 16 16\" className=\"ui-src__mark\" aria-hidden=\"true\">\n    <path d=\"M6.5 2.2c.2 0 .36.14.4.33.53 2.6 1.4 3.48 4 4.02a.4.4 0 0 1 0 .79c-2.6.53-3.47 1.4-4 4a.4.4 0 0 1-.8 0c-.53-2.6-1.4-3.47-4-4a.4.4 0 0 1 0-.79c2.6-.54 3.47-1.42 4-4.02a.4.4 0 0 1 .4-.33Z\" />\n    <path d=\"M12 9.6c.12 0 .22.08.25.2.28 1.3.72 1.75 2.03 2.03a.25.25 0 0 1 0 .49c-1.31.28-1.75.72-2.03 2.03a.25.25 0 0 1-.5 0c-.28-1.31-.72-1.75-2.03-2.03a.25.25 0 0 1 0-.49c1.31-.28 1.75-.73 2.03-2.03a.25.25 0 0 1 .25-.2Z\" />\n  </svg>\n);\n\nconst Icon = ({ d }: { d: string }) => (\n  <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.1\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d={d} />\n  </svg>\n);\n\n/* ---------- Styles ---------- */\n\nconst css = /* css */ `\n/* Colors and motion as variables – override them on .ui-src */\n.ui-src {\n  --ui-src-card: var(--aui-surface, #ffffff);\n  --ui-src-strong: var(--aui-ink, #000000);\n  --ui-src-ink: var(--aui-ink, rgba(0, 0, 0, 0.88));\n  --ui-src-text: var(--aui-muted, rgba(0, 0, 0, 0.61));\n  --ui-src-muted: var(--aui-muted, rgba(0, 0, 0, 0.45));\n  --ui-src-faint: rgba(0, 0, 0, 0.27);\n  --ui-src-icon: var(--aui-muted, rgba(0, 0, 0, 0.447));\n  --ui-src-line: var(--aui-border, rgba(0, 0, 0, 0.06));\n  --ui-src-wash: var(--aui-subtle, rgba(0, 0, 0, 0.03));\n  --ui-src-fill: rgba(0, 0, 0, 0.06);\n  --ui-src-bar: rgba(0, 0, 0, 0.1);\n  --ui-src-accent: rgba(0, 96, 226, 0.765);\n  --ui-src-accent-bg: rgba(0, 96, 226, 0.05);\n  --ui-src-accent-line: rgba(0, 96, 226, 0.35);\n  --ui-src-tag: rgba(0, 96, 226, 0.08);\n  --ui-src-alt: var(--aui-purple, #a651f0);\n  --ui-src-alt-bg: color-mix(in srgb, var(--aui-purple, #a651f0) 10%, transparent);\n  --ui-src-ok: var(--aui-success, #1e8a4f);\n  --ui-src-ok-bg: color-mix(in srgb, var(--aui-green, #5fc88a) 8%, transparent);\n  --ui-src-warn: var(--aui-amber, #e8b000);\n  --ui-src-solid: var(--aui-primary, rgba(0, 0, 0, 0.88));\n  --ui-src-solid-hover: rgba(0, 0, 0, 0.8);\n  --ui-src-on-solid: var(--aui-on-primary, #fcfcfc);\n  /* Strokes are shadows: a 0.5px hairline plus a soft lift */\n  --ui-src-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --ui-src-shadow-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.07);\n  --ui-src-shadow-pop: var(--aui-shadow-popover, 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 12px 28px -10px rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.05));\n  --ui-src-focus: var(--aui-focus, rgba(0, 96, 226, 0.7));\n  --ui-src-ease: var(--aui-ease, cubic-bezier(0.22, 1, 0.36, 1));\n  box-sizing: border-box;\n  container-type: inline-size;\n  width: 100%;\n  max-width: 440px;\n  /* One white card – the edge is a shadow, not a border */\n  border-radius: var(--aui-radius-lg, 10px);\n  background: var(--ui-src-card);\n  box-shadow: var(--aui-shadow-card, var(--ui-src-shadow));\n  font-family: var(--aui-font, \"Inter\", \"InterVariable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--ui-src-ink);\n  text-align: left;\n  -webkit-font-smoothing: antialiased;\n}\n.ui-src *, .ui-src *::before, .ui-src *::after { box-sizing: border-box; }\n:where(.ui-src) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n:where(.ui-src) svg { display: block; flex: none; }\n.ui-src button:focus-visible { outline: 2px solid var(--ui-src-focus); outline-offset: 2px; }\n\n/* The heading row folds the reason in and out */\n.ui-src__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 44px;\n  padding: 0 12px 0 16px;\n  border-radius: var(--aui-radius-lg, 10px) var(--aui-radius-lg, 10px) 0 0;\n  text-align: left;\n  transition: background-color 140ms ease;\n}\n.ui-src__head:hover { background: var(--ui-src-wash); }\n.ui-src button.ui-src__head:focus-visible { outline-offset: -2px; }\n.ui-src__mark { width: 16px; height: 16px; fill: var(--ui-src-accent); }\n.ui-src__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--ui-src-strong); }\n.ui-src__pill {\n  flex: none;\n  padding: 0 6px;\n  border-radius: var(--aui-radius-sm, 5px);\n  background: var(--ui-src-alt-bg);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--ui-src-alt);\n  animation: ui-src-swap 300ms var(--ui-src-ease);\n}\n.ui-src__chevron {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 20px;\n  height: 20px;\n  margin-left: auto;\n  color: var(--ui-src-icon);\n  transition: transform 280ms var(--ui-src-ease), color 140ms ease;\n}\n.ui-src__head:hover .ui-src__chevron { color: var(--ui-src-ink); }\n.ui-src__head[aria-expanded=\"false\"] .ui-src__chevron { transform: rotate(-90deg); }\n\n/* Only the reason folds – the last row never gets clipped */\n.ui-src__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 340ms var(--ui-src-ease);\n}\n.ui-src__body[data-open] { grid-template-rows: 1fr; }\n.ui-src__reason {\n  min-height: 0;\n  overflow: hidden;\n  margin: 0;\n  padding: 0 16px;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--ui-src-text);\n  text-align: start;\n  white-space: pre-line;\n  overflow-wrap: anywhere;\n  animation: ui-src-swap 360ms var(--ui-src-ease);\n}\n.ui-src__body[data-open] .ui-src__reason { padding-bottom: 14px; }\n.ui-src__reason strong { font-weight: 500; color: var(--ui-src-ink); }\n\n/* The last row: the signal on the left, the actions on the right */\n.ui-src__foot {\n  display: flex;\n  align-items: center;\n  /* Narrow cards: the actions move below the signal instead of running out of the card */\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 8px 10px;\n  min-height: 48px;\n  padding: 10px 10px 10px 16px;\n  border-top: 0.5px solid var(--ui-src-line);\n}\n.ui-src__signal {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  line-height: 16px;\n  white-space: nowrap;\n  color: var(--ui-src-text);\n}\n.ui-src__bars, .ui-src__mini { display: inline-flex; align-items: flex-end; gap: 2px; }\n.ui-src__bars span, .ui-src__mini span {\n  width: 3px;\n  border-radius: 1px;\n  background: var(--ui-src-bar);\n  transition: background-color 260ms ease;\n}\n.ui-src__bars span:nth-child(1), .ui-src__mini span:nth-child(1) { height: 5px; }\n.ui-src__bars span:nth-child(2), .ui-src__mini span:nth-child(2) { height: 8px; }\n.ui-src__bars span:nth-child(3), .ui-src__mini span:nth-child(3) { height: 11px; }\n.ui-src [data-level=\"1\"] > span[data-on] { background: var(--ui-src-warn); }\n.ui-src [data-level=\"2\"] > span[data-on] { background: var(--ui-src-accent); }\n.ui-src [data-level=\"3\"] > span[data-on] { background: var(--ui-src-ok); }\n.ui-src [data-level=\"0\"] > span:first-child { background: var(--ui-src-faint); }\n\n/* Never wider than the row – a long label shortens in its button instead of running out of the card */\n.ui-src__actions { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-left: auto; }\n.ui-src__alt, .ui-src__btn--icon { flex: none; }\n\n/* Secondary: white with the card's hairline shadow */\n.ui-src__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 28px;\n  padding: 0 10px;\n  border-radius: calc(var(--aui-radius, 7px) - 1px);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 20px;\n  min-width: 0;\n  max-width: 100%;\n  white-space: nowrap;\n  transition: background-color 140ms ease, box-shadow 140ms ease, transform 160ms var(--ui-src-ease);\n}\n.ui-src__btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n:where(.ui-src) .ui-src__btn { background: var(--ui-src-card); box-shadow: var(--ui-src-shadow); color: var(--ui-src-strong); }\n.ui-src__btn--icon { padding: 0 10px 0 8px; }\n.ui-src__btn--icon svg { color: var(--ui-src-icon); }\n.ui-src__btn:hover { box-shadow: var(--ui-src-shadow-hover); }\n.ui-src__btn[aria-expanded=\"true\"] { background: var(--ui-src-wash); }\n.ui-src__btn:active { transform: scale(0.97); }\n/* Primary: a dark chip */\n:where(.ui-src) .ui-src__btn--primary { background: var(--ui-src-solid); box-shadow: none; color: var(--ui-src-on-solid); }\n.ui-src__btn--primary:hover { background: var(--ui-src-solid-hover); box-shadow: none; }\n\n/* Accepted: a minimal green fill in the place of the button */\n.ui-src__done {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  height: 28px;\n  padding: 0 10px 0 8px;\n  border-radius: calc(var(--aui-radius, 7px) - 1px);\n  background: var(--ui-src-ok-bg);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--ui-src-ok);\n  animation: ui-src-swap 300ms var(--ui-src-ease);\n}\n.ui-src__done-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n\n/* Alternatives: a white popover above the button */\n.ui-src__alt { position: relative; }\n.ui-src__menu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 5;\n  display: grid;\n  gap: 2px;\n  /* The column never grows with a long name; a long list scrolls */\n  grid-template-columns: minmax(0, 1fr);\n  width: 248px;\n  max-height: min(320px, 60vh);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 4px;\n  border-radius: var(--aui-radius-lg, 10px);\n  background: var(--aui-overlay, var(--ui-src-card));\n  box-shadow: var(--ui-src-shadow-pop);\n  animation: ui-src-drop 180ms var(--ui-src-ease);\n}\n.ui-src__menu[data-flip] { right: auto; left: 0; }\n/* Narrow: the actions sit on their own row – the menu lines up with its right edge so it stays inside */\n@container (max-width: 420px) {\n  .ui-src__actions { position: relative; }\n  .ui-src__alt { position: static; }\n  .ui-src__menu { width: min(248px, 100cqw - 20px); }\n}\n.ui-src__option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  height: 32px;\n  padding: 0 10px 0 8px;\n  border-radius: calc(var(--aui-radius-sm, 5px) + 1px);\n  font-size: 13px;\n  line-height: 20px;\n  text-align: left;\n  color: var(--ui-src-ink);\n  transition: background-color 90ms ease-out;\n}\n.ui-src__option:hover { background: var(--ui-src-wash); }\n/* The chosen one: a light blue fill with a hairline */\n.ui-src__option[aria-checked=\"true\"] { background: var(--ui-src-accent-bg); box-shadow: inset 0 0 0 0.5px var(--ui-src-accent-line); }\n.ui-src button.ui-src__option:focus-visible { outline-offset: -2px; }\n.ui-src__option-label { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; }\n.ui-src__mini { flex: none; }\n.ui-src__option-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.ui-src__tag {\n  flex: none;\n  padding: 0 5px;\n  border-radius: var(--aui-radius-sm, 5px);\n  background: var(--ui-src-tag);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 18px;\n  color: var(--ui-src-accent);\n}\n\n@keyframes ui-src-swap { from { opacity: 0; transform: translateY(2px); } }\n@keyframes ui-src-drop { from { opacity: 0; transform: translateY(4px) scale(0.98); } }\n\n/* Narrow cards (phones) */\n@container (max-width: 340px) {\n  .ui-src__head { padding: 0 10px 0 14px; }\n  .ui-src__reason { padding: 0 14px; }\n  .ui-src__foot { padding: 10px 10px 10px 14px; }\n}\n/* Touch screens: bigger tap targets */\n@media (pointer: coarse) {\n  .ui-src__head { height: 48px; }\n  .ui-src__btn, .ui-src__done { height: 36px; }\n  .ui-src__btn { padding: 0 14px; }\n  .ui-src__btn--icon, .ui-src__done { padding: 0 14px 0 12px; }\n  .ui-src__option { height: 40px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ui-src__reason, .ui-src__done, .ui-src__menu, .ui-src__pill { animation: none; }\n  .ui-src__body, .ui-src__chevron { transition: none; }\n}\n\n/* Dark mode: follows a .dark class or data-theme=\"dark\" on any ancestor, e.g. <html> */\n:where(.dark, [data-theme=\"dark\"]) .ui-src {\n  --ui-src-card: var(--aui-surface, #1c1c1e);\n  --ui-src-strong: var(--aui-ink, #ffffff);\n  --ui-src-ink: var(--aui-ink, rgba(255, 255, 255, 0.9));\n  --ui-src-text: var(--aui-muted, rgba(255, 255, 255, 0.62));\n  --ui-src-muted: var(--aui-muted, rgba(255, 255, 255, 0.46));\n  --ui-src-faint: rgba(255, 255, 255, 0.3);\n  --ui-src-icon: var(--aui-muted, rgba(255, 255, 255, 0.46));\n  --ui-src-line: var(--aui-border, rgba(255, 255, 255, 0.08));\n  --ui-src-wash: var(--aui-subtle, rgba(255, 255, 255, 0.04));\n  --ui-src-fill: rgba(255, 255, 255, 0.08);\n  --ui-src-bar: rgba(255, 255, 255, 0.14);\n  --ui-src-accent: var(--aui-blue, #4fb0fe);\n  --ui-src-accent-bg: rgba(77, 141, 255, 0.14);\n  --ui-src-accent-line: rgba(77, 141, 255, 0.4);\n  --ui-src-tag: rgba(77, 141, 255, 0.16);\n  --ui-src-alt: var(--aui-purple, #b98af0);\n  --ui-src-alt-bg: color-mix(in srgb, var(--aui-purple, #b98af0) 22%, transparent);\n  --ui-src-ok: var(--aui-green, #5fc88a);\n  --ui-src-ok-bg: color-mix(in srgb, var(--aui-green, #7dcf9f) 14%, transparent);\n  --ui-src-warn: var(--aui-amber, #e6c24d);\n  /* The primary inverts: a light chip with dark text */\n  --ui-src-solid: var(--aui-primary, rgba(255, 255, 255, 0.9));\n  --ui-src-solid-hover: rgba(255, 255, 255, 0.82);\n  --ui-src-on-solid: var(--aui-on-primary, #161618);\n  --ui-src-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.4);\n  --ui-src-shadow-hover: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.4);\n  --ui-src-shadow-pop: var(--aui-shadow-popover, 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 12px 28px -10px rgba(0, 0, 0, 0.6), 0 1px 2px 0 rgba(0, 0, 0, 0.4));\n  --ui-src-focus: var(--aui-focus, rgba(77, 141, 255, 0.8));\n}\n:where(.dark, [data-theme=\"dark\"]) .ui-src__menu { background: var(--aui-overlay, #232326); }\n`;\n"}]}