{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rich-tooltip",
  "type": "registry:ui",
  "title": "Rich tooltip",
  "description": "Persistent anchored tip for onboarding tours, walkthroughs, and new-feature announcements — dismissible, with optional media and step counter.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json",
    "https://control-ui.dev/r/surface-variants.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/popup-knobs.ts",
      "target": "@components/control-ui/knob-contracts/popup-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/popup.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const popupKnobs = [\n  \"--cui-popup-radius\",\n  \"--cui-popup-background\",\n  \"--cui-popup-foreground\",\n  \"--cui-popup-border-color\",\n  \"--cui-popup-border-width\",\n  \"--cui-popup-shadow\",\n  \"--cui-popup-backdrop-filter\",\n  \"--cui-popup-backdrop-background\",\n  \"--cui-popup-item-radius\",\n  \"--cui-popup-item-foreground\",\n  \"--cui-popup-item-highlight-background\",\n  \"--cui-popup-item-highlight-foreground\",\n  \"--cui-popup-item-highlight-muted-foreground\",\n  \"--cui-popup-item-disabled-opacity\",\n  \"--cui-popup-separator-color\",\n  \"--cui-popup-shortcut-foreground\",\n] as const;\nexport type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/knob-contracts/rich-tooltip-knobs.ts",
      "target": "@components/control-ui/knob-contracts/rich-tooltip-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/rich-tooltip.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const richTooltipKnobs = [\n  \"--cui-rich-tooltip-content-background\",\n  \"--cui-rich-tooltip-content-foreground\",\n  \"--cui-rich-tooltip-content-radius\",\n  \"--cui-rich-tooltip-content-shadow\",\n  \"--cui-rich-tooltip-dot-background\",\n  \"--cui-rich-tooltip-action-radius\",\n  \"--cui-rich-tooltip-action-background\",\n  \"--cui-rich-tooltip-action-foreground\",\n] as const;\nexport type RichTooltipKnobStyle = Partial<Record<(typeof richTooltipKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-controls.css",
      "target": "@components/control-ui/styles/recipes/popup-controls.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"content\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"hover-card\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"link\"]) {\n    text-decoration-line: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"menubar\"][data-slot=\"sub-trigger-indicator\"]) {\n    line-height: 1;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"]) {\n    text-align: left;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-starting-style]) {\n    --_popup-rich-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-rich-tooltip-content-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-ending-style]) {\n    --_popup-rich-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-rich-tooltip-content-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"content\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"color-picker\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"context-menu\"][data-slot=\"sub-trigger-indicator\"]) {\n    line-height: 1;\n  }\n\n  :where([data-control-family=\"button\"][data-slot=\"root\"][data-popup-part=\"close\"][data-icon-only=\"true\"]) {\n    --_popup-button-root-close-opacity: 70%;\n    opacity: var(--_popup-button-root-close-opacity);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"button\"][data-slot=\"root\"][data-popup-part=\"close\"][data-icon-only=\"true\"]:hover) {\n      --_popup-button-root-close-opacity: 100%;\n      opacity: var(--_popup-button-root-close-opacity);\n    }\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-lists.css",
      "target": "@components/control-ui/styles/recipes/popup-lists.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"model-switcher\"][data-slot=\"hint\"]) {\n    font-size: var(--text-micro);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-micro);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: 0.08em;\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"empty\"]) {\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"icon\"]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"item-indicator\"]) {\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"group\"] [cmdk-group-heading]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: 0.08em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input-wrapper\"]) {\n    border-block-end: 1px solid var(--cui-popup-separator-color);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"]) {\n    background: transparent;\n    color: var(--foreground);\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"])::placeholder,\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"] [cmdk-group-heading]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"]:disabled) {\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"group\"]) {\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input-icon\"]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"dialog-root\"]) {\n    transition-property: grid-template-rows;\n    transition-duration: var(--duration-slow);\n    transition-timing-function: var(--ease-emphasized);\n    transition-delay: var(--duration-fast);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-motion.css",
      "target": "@components/control-ui/styles/recipes/popup-motion.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"]) {\n    outline-style: none;\n    transition-property: translate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 0px;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"][data-side=\"left\"]:is(\n      [data-starting-style],\n      [data-ending-style]\n    )\n  ) {\n    translate: -100% 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"][data-side=\"right\"]:is(\n      [data-starting-style],\n      [data-ending-style]\n    )\n  ) {\n    translate: 100% 0;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow-shape\"]) {\n    fill: currentcolor;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"]) {\n    font-size: var(--text-xs);\n    line-height: var(--text-xs--line-height);\n    text-wrap: balance;\n    outline-style: none;\n    --_popup-tooltip-content-transition-property: opacity, scale;\n    transition-property: var(--_popup-tooltip-content-transition-property);\n    transition-timing-function: var(--ease-standard);\n    transition-duration: var(--duration-fast);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-instant]) {\n    --_popup-tooltip-content-transition-property: none;\n    transition-property: var(--_popup-tooltip-content-transition-property);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-ending-style]) {\n    --_popup-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-tooltip-content-opacity);\n    --_popup-tooltip-content-scale: 95% 95%;\n    scale: var(--_popup-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-starting-style]) {\n    --_popup-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-tooltip-content-opacity);\n    --_popup-tooltip-content-scale: 95% 95%;\n    scale: var(--_popup-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-popup-part=\"surface\"]:not([data-arrow=\"true\"])\n  ) {\n    --_popup-tooltip-content-radius: var(--cui-popup-radius);\n    border-radius: var(--_popup-tooltip-content-radius);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-popup-part=\"surface\"][data-arrow=\"true\"]) {\n    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);\n    border-radius: var(--_popup-tooltip-content-radius);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"top\"]) {\n    --_popup-tooltip-arrow-rotate: 180deg;\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"left\"]) {\n    --_popup-tooltip-arrow-rotate: 90deg;\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"right\"]) {\n    --_popup-tooltip-arrow-rotate: calc(90deg * -1);\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup.css",
      "target": "@components/control-ui/styles/recipes/popup.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"bar\"]) {\n    --cui-popup-radius: var(--radius-popover);\n    --cui-popup-background: var(--popover);\n    --cui-popup-foreground: var(--popover-foreground);\n    --cui-popup-border-color: var(--border);\n    --cui-popup-border-width: 1px;\n    --cui-popup-shadow: var(--shadow-pop);\n    --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));\n    --cui-popup-item-radius: var(--radius-popup-item);\n    --cui-popup-item-foreground: var(--foreground);\n    --cui-popup-item-highlight-background: oklch(from var(--foreground) l c h / 0.06);\n    --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);\n    --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);\n    --cui-popup-item-disabled-opacity: 0.4;\n    --cui-popup-separator-color: var(--border);\n    --cui-popup-shortcut-foreground: var(--muted-foreground);\n    --_popup-transform-origin: var(--transform-origin);\n    border-radius: var(--cui-popup-radius);\n    background-color: var(--cui-popup-background);\n    box-shadow:\n      inset 0 0 0 var(--cui-popup-border-width) var(--cui-popup-border-color),\n      var(--cui-popup-shadow);\n    color: var(--cui-popup-foreground);\n    outline: none;\n    -webkit-backdrop-filter: var(--cui-popup-backdrop-filter, none);\n    backdrop-filter: var(--cui-popup-backdrop-filter, none);\n    transform-origin: var(--_popup-transform-origin);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"]:not([data-popup-static]):not([data-slot=\"viewport\"])),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n    transition-property: opacity, scale;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n    transition-behavior: allow-discrete;\n  }\n  :where(\n    [data-control-family=\"popup\"][data-popup-part=\"surface\"]:not(\n      :is([data-popup-kind=\"sheet\"], [data-popup-kind=\"drawer\"], [data-popup-kind=\"toast\"])\n    ):not([data-slot=\"viewport\"]):where([data-starting-style], [data-ending-style])\n  ),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]:where([data-starting-style], [data-ending-style])) {\n    scale: 0.95;\n    opacity: 0;\n  }\n  @starting-style {\n    :where(\n        [data-control-family=\"popup\"][data-popup-part=\"surface\"]:not(\n          :is([data-popup-kind=\"sheet\"], [data-popup-kind=\"drawer\"], [data-popup-kind=\"toast\"])\n        ):not([data-slot=\"viewport\"])\n      ),\n    :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n      scale: 0.95;\n      opacity: 0;\n    }\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"backdrop\"]) {\n    --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));\n    background-color: var(--cui-popup-backdrop-background);\n    -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));\n    backdrop-filter: blur(var(--backdrop-blur-overlay));\n    transition: opacity var(--duration-base) var(--ease-standard);\n  }\n  :where(.dark [data-control-family=\"popup\"][data-popup-part=\"backdrop\"]) {\n    --cui-popup-backdrop-background: oklch(from var(--background) l c h / var(--overlay-opacity));\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"backdrop\"]:is([data-starting-style], [data-ending-style])) {\n    opacity: 0;\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n    padding: var(--popover-padding);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"bar\"]) {\n    --cui-popup-radius: var(--radius-control);\n    --cui-popup-background: var(--card);\n    --cui-popup-shadow: var(--shadow-xs);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"][data-surface=\"modal\"]) {\n    --cui-popup-radius: var(--radius-panel);\n    --cui-popup-shadow: var(--shadow-modal);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-popup-part=\"surface\"]) {\n    --cui-popup-radius: var(--radius-control);\n    --cui-popup-background: var(--foreground);\n    --cui-popup-foreground: var(--background);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"]) {\n    --cui-popup-radius: 0px;\n    --cui-popup-shadow: var(--shadow-modal);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"title\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"title\"]) {\n    font-size: var(--text-heading-3);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.025em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"description\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-slot=\"title\"]) {\n    font-weight: 600;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"]) {\n    color: var(--cui-popup-background);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"item\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]) {\n    cursor: pointer;\n    border-radius: var(--cui-popup-item-radius);\n    color: var(--cui-popup-item-foreground);\n    font-size: var(--text-body);\n    outline: none;\n    padding-block: 0.25rem;\n    padding-inline: calc(var(--padding-x) * 0.5);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]) {\n    font-size: var(--text-body);\n    transition-property: color, background-color, box-shadow, translate;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"][data-variant=\"compact\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-label);\n    font-weight: 500;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]:where(:hover, :focus-visible, [data-active])) {\n    background-color: var(--cui-popup-item-highlight-background);\n    color: var(--foreground);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-part=\"item\"]:where(\n      [data-highlighted],\n      [data-selected]:not([data-selected=\"false\"]),\n      [data-popup-open]\n    )\n  ) {\n    --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);\n    --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);\n    background-color: var(--cui-popup-item-highlight-background);\n    color: var(--cui-popup-item-highlight-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"item\"]:is([data-disabled]:not([data-disabled=\"false\"]), [data-disabled=\"true\"])) {\n    cursor: not-allowed;\n    opacity: var(--cui-popup-item-disabled-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"label\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-micro);\n    font-weight: 500;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"separator\"]) {\n    background-color: var(--cui-popup-separator-color);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"shortcut\"]) {\n    --_popup-shortcut-font-size: var(--text-body);\n    color: var(--cui-popup-shortcut-foreground);\n    font-size: var(--_popup-shortcut-font-size);\n    letter-spacing: 0.02em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"shortcut\"]) {\n    --_popup-shortcut-font-size: var(--text-label);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"icon\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"icon\"]) {\n    color: var(--muted-foreground);\n    transition-property: rotate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"button\"][data-popup-kind=\"select\"][data-slot=\"trigger\"][data-popup-open]\n      [data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"icon\"]\n  ),\n  :where(\n    [data-control-family=\"button\"][data-popup-kind=\"navigation-menu\"][data-slot=\"trigger\"][data-popup-open]\n      :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"icon\"])\n  ) {\n    rotate: 180deg;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"item-indicator\"]) {\n    color: inherit;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"context-menu\"][data-slot=\"radio-indicator\"]) {\n    border-radius: 9999px;\n    background-color: currentColor;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"popover\"][data-slot=\"title\"]) {\n    font-size: var(--text-body);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.01em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"popover\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"positioner\"]) {\n    transition-property: inset-block-start, inset-inline-start, inset-block-end, inset-inline-end;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"popup\"]) {\n    outline: none;\n    --_popup-transform-origin: var(--transform-origin);\n    transform-origin: var(--_popup-transform-origin);\n    transition-property: opacity, inline-size, block-size, scale;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"popup\"]:is([data-starting-style], [data-ending-style])\n  ) {\n    scale: 0.95;\n    opacity: 0;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"]) {\n    transition-property: opacity, translate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"]:is([data-starting-style], [data-ending-style])\n  ) {\n    opacity: 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-starting-style][data-activation-direction=\"left\"]\n  ),\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-ending-style][data-activation-direction=\"right\"]\n  ) {\n    translate: -0.75rem 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-starting-style][data-activation-direction=\"right\"]\n  ),\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-ending-style][data-activation-direction=\"left\"]\n  ) {\n    translate: 0.75rem 0;\n  }\n}\n\n@property --cui-popup-radius {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-popup-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-backdrop-filter {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-backdrop-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-popup-item-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-muted-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-disabled-opacity {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 1;\n}\n\n@property --cui-popup-separator-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-shortcut-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/rich-tooltip.css",
      "target": "@components/control-ui/styles/recipes/rich-tooltip.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"progress\"]) {\n    --_rich-tooltip-dot-radius: var(--_rich-tooltip-content-dot-radius);\n    --_rich-tooltip-dot-opacity: var(--_rich-tooltip-content-dot-opacity);\n    --_rich-tooltip-dot-transition-property: opacity;\n    --_rich-tooltip-dot-transition-easing: var(--_rich-tooltip-content-dot-transition-easing);\n    --_rich-tooltip-dot-transition-duration: var(--_rich-tooltip-content-dot-transition-duration);\n    --_rich-tooltip-progress-font-size: var(--_rich-tooltip-content-progress-font-size);\n    --_rich-tooltip-progress-foreground: var(--_rich-tooltip-content-progress-foreground);\n    font-size: var(--_rich-tooltip-progress-font-size);\n    color: var(--_rich-tooltip-progress-foreground);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"dot\"]) {\n    border-radius: var(--_rich-tooltip-dot-radius);\n    background-color: var(--cui-rich-tooltip-dot-background);\n    opacity: var(--_rich-tooltip-dot-opacity);\n    transition-property: var(--_rich-tooltip-dot-transition-property);\n    transition-timing-function: var(--_rich-tooltip-dot-transition-easing);\n    transition-duration: var(--_rich-tooltip-dot-transition-duration);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"dot\"][data-active]) {\n    --_rich-tooltip-dot-opacity: 100%;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"description\"]) {\n    --_rich-tooltip-description-font-size: var(--_rich-tooltip-content-description-font-size);\n    font-size: var(--_rich-tooltip-description-font-size);\n    --_rich-tooltip-description-line-height: var(--_rich-tooltip-content-description-line-height);\n    line-height: var(--_rich-tooltip-description-line-height);\n    --_rich-tooltip-description-foreground: var(--_rich-tooltip-content-description-foreground);\n    color: var(--_rich-tooltip-description-foreground);\n    text-wrap: pretty;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"title\"]) {\n    --_rich-tooltip-title-font-size: var(--_rich-tooltip-content-title-font-size);\n    font-size: var(--_rich-tooltip-title-font-size);\n    --_rich-tooltip-title-font-weight: var(--_rich-tooltip-content-title-font-weight);\n    font-weight: var(--_rich-tooltip-title-font-weight);\n    --_rich-tooltip-title-line-height: var(--_rich-tooltip-content-title-line-height);\n    line-height: var(--_rich-tooltip-title-line-height);\n    --_rich-tooltip-title-letter-spacing: var(--_rich-tooltip-content-title-letter-spacing);\n    letter-spacing: var(--_rich-tooltip-title-letter-spacing);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"]) {\n    --cui-rich-tooltip-action-background: transparent;\n    --cui-rich-tooltip-action-foreground: currentColor;\n    --cui-rich-tooltip-action-radius: var(--radius-control);\n    --cui-rich-tooltip-content-background: var(--primary);\n    --cui-rich-tooltip-content-foreground: var(--primary-foreground);\n    --cui-rich-tooltip-content-radius: var(--radius-popover);\n    --cui-rich-tooltip-content-shadow:\n      inset 0 1px 0\n      oklch(from var(--shadow-highlight) l c h / calc(alpha * var(--shadow-opacity) * min(var(--shadow-size), 1))), 0 calc(\n        0.5px *\n        var(--shadow-size) *\n        var(--shadow-popover-multiplier) *\n        var(--shadow-y)\n      )\n      calc(0.75px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      calc(-0.25px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      oklch(from var(--shadow-color) l c h / calc(0.04 * var(--shadow-opacity))), 0 calc(\n        1.5px *\n        var(--shadow-size) *\n        var(--shadow-popover-multiplier) *\n        var(--shadow-y)\n      )\n      calc(3px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      calc(-0.75px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity))), 0 calc(\n        3px *\n        var(--shadow-size) *\n        var(--shadow-popover-multiplier) *\n        var(--shadow-y)\n      )\n      calc(6px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      calc(-1.5px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      oklch(from var(--shadow-color) l c h / calc(0.06 * var(--shadow-opacity))), 0 calc(\n        6px *\n        var(--shadow-size) *\n        var(--shadow-popover-multiplier) *\n        var(--shadow-y)\n      )\n      calc(14px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      calc(-3px * var(--shadow-size) * var(--shadow-popover-multiplier))\n      oklch(from var(--shadow-color) l c h / calc(0.07 * var(--shadow-opacity)));\n    --cui-rich-tooltip-dot-background: currentcolor;\n    --_rich-tooltip-description-font-size: var(--text-body);\n    --_rich-tooltip-content-description-font-size: var(--_rich-tooltip-description-font-size);\n    --_rich-tooltip-description-foreground: var(--muted-foreground);\n    --_rich-tooltip-content-description-foreground: var(--_rich-tooltip-description-foreground);\n    --_rich-tooltip-description-line-height: calc(var(--spacing) * 5);\n    --_rich-tooltip-content-description-line-height: var(--_rich-tooltip-description-line-height);\n    --_rich-tooltip-dot-radius: calc(infinity * 1px);\n    --_rich-tooltip-content-dot-radius: var(--_rich-tooltip-dot-radius);\n    --_rich-tooltip-dot-opacity: 35%;\n    --_rich-tooltip-content-dot-opacity: var(--_rich-tooltip-dot-opacity);\n    --_rich-tooltip-dot-transition-easing: var(--ease-standard);\n    --_rich-tooltip-content-dot-transition-easing: var(--_rich-tooltip-dot-transition-easing);\n    --_rich-tooltip-dot-transition-duration: var(--duration-fast);\n    --_rich-tooltip-content-dot-transition-duration: var(--_rich-tooltip-dot-transition-duration);\n    --_rich-tooltip-progress-font-size: var(--text-caption);\n    --_rich-tooltip-content-progress-font-size: var(--_rich-tooltip-progress-font-size);\n    --_rich-tooltip-progress-foreground: var(--muted-foreground);\n    --_rich-tooltip-content-progress-foreground: var(--_rich-tooltip-progress-foreground);\n    --_rich-tooltip-title-font-size: var(--text-label);\n    --_rich-tooltip-content-title-font-size: var(--_rich-tooltip-title-font-size);\n    --_rich-tooltip-title-font-weight: var(--font-weight-semibold);\n    --_rich-tooltip-content-title-font-weight: var(--_rich-tooltip-title-font-weight);\n    --_rich-tooltip-title-line-height: calc(var(--spacing) * 6);\n    --_rich-tooltip-content-title-line-height: var(--_rich-tooltip-title-line-height);\n    --_rich-tooltip-title-letter-spacing: var(--tracking-tight);\n    --_rich-tooltip-content-title-letter-spacing: var(--_rich-tooltip-title-letter-spacing);\n    --_rich-tooltip-arrow-rotate: 0deg;\n    --_rich-tooltip-action-outline: none;\n    --_rich-tooltip-action-transition-property: background-color, color, box-shadow;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-tone=\"accent\"]) {\n    --_rich-tooltip-arrow-path-fill: var(--primary);\n    --_rich-tooltip-description-foreground: var(--primary-foreground);\n    --_rich-tooltip-progress-foreground: var(--primary-foreground);\n    border-radius: var(--cui-rich-tooltip-content-radius);\n    background-color: var(--cui-rich-tooltip-content-background);\n    color: var(--cui-rich-tooltip-content-foreground);\n    outline-style: none;\n    transition-property: opacity, scale;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n    box-shadow: var(--cui-rich-tooltip-content-shadow);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-tone=\"surface\"]) {\n    --_rich-tooltip-arrow-path-fill: oklch(from var(--popover) l c h / var(--popover-opacity));\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"arrow\"]) {\n    rotate: var(--_rich-tooltip-arrow-rotate);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"arrow\"] path) {\n    fill: var(--_rich-tooltip-arrow-path-fill);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"media\"]) {\n    border-start-start-radius: inherit;\n    border-start-end-radius: inherit;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-side=\"top\"]) {\n    --_rich-tooltip-arrow-rotate: 180deg;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-side=\"left\"]) {\n    --_rich-tooltip-arrow-rotate: 90deg;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-side=\"right\"]) {\n    --_rich-tooltip-arrow-rotate: calc(90deg * -1);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-tone=\"accent\"][data-starting-style]) {\n    --_rich-tooltip-content-scale: 95% 95%;\n    scale: var(--_rich-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-tone=\"accent\"][data-ending-style]) {\n    --_rich-tooltip-content-scale: 95% 95%;\n    scale: var(--_rich-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"previous\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"next\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"close\"]) {\n    border-radius: var(--cui-rich-tooltip-action-radius);\n    background: var(--cui-rich-tooltip-action-background);\n    color: var(--cui-rich-tooltip-action-foreground);\n    font-size: var(--text-label);\n    font-weight: var(--font-weight-medium);\n    transition-property: var(--_rich-tooltip-action-transition-property);\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n    outline-style: var(--_rich-tooltip-action-outline);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"previous\"]:hover),\n    :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"next\"]:hover),\n    :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"close\"]:hover) {\n      background: oklch(from currentColor l c h / 0.15);\n    }\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"previous\"]:disabled),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"next\"]:disabled),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"close\"]:disabled) {\n    opacity: 0.4;\n  }\n}\n\n@property --cui-rich-tooltip-content-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-rich-tooltip-content-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-rich-tooltip-content-radius {\n  syntax: \"<length-percentage>+\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-rich-tooltip-content-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-rich-tooltip-dot-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-rich-tooltip-action-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-rich-tooltip-action-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-rich-tooltip-action-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/rich-tooltip-tour.ts",
      "target": "@components/control-ui/ui/rich-tooltip-tour.ts",
      "type": "registry:ui",
      "content": "export type TourPosition = {\n  index: number;\n  total: number;\n  isFirst: boolean;\n  isLast: boolean;\n};\n\nexport function tourPosition(steps: readonly string[], activeStep: string | null): TourPosition {\n  const index = activeStep === null ? -1 : steps.indexOf(activeStep);\n  return {\n    index,\n    total: steps.length,\n    isFirst: index <= 0,\n    isLast: index >= 0 && index === steps.length - 1,\n  };\n}\n\n// null ends the tour — callers persist completion and close every step.\nexport function stepAfter(steps: readonly string[], index: number): string | null {\n  if (index < 0) return null;\n  return steps[index + 1] ?? null;\n}\n\nexport function stepBefore(steps: readonly string[], index: number): string | null {\n  if (index < 0) return null;\n  return steps[Math.max(0, index - 1)] ?? null;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/rich-tooltip.tsx",
      "target": "@components/control-ui/ui/rich-tooltip.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { ChevronLeftIcon, ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport { createContext, useContext, useEffect, useState } from \"react\";\n\nimport type { PopupKnobStyle } from \"@/components/control-ui/knob-contracts/popup-knobs\";\nimport type { RichTooltipKnobStyle } from \"@/components/control-ui/knob-contracts/rich-tooltip-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { skinEffects, skinId } from \"@/components/control-ui/skin\";\nimport { stepAfter, stepBefore, type TourPosition, tourPosition } from \"./rich-tooltip-tour\";\n\nexport type RichTooltipTone = \"accent\" | \"surface\";\n\nexport type RichTooltipProgressVariant = \"count\" | \"dots\";\n\ntype RichTooltipContentKnobStyle = RichTooltipKnobStyle & PopupKnobStyle;\n\ntype TourValue = TourPosition & {\n  activeStep: string | null;\n  next: () => void;\n  previous: () => void;\n  goTo: (step: string) => void;\n  finish: () => void;\n};\n\nconst TourContext = createContext<TourValue | null>(null);\n\n/** Null outside `<RichTooltipTour>` — single-use rich tooltips read it and skip their step affordances. */\nexport function useTour() {\n  return useContext(TourContext);\n}\n\n// Blocked storage (private mode, disabled cookies) must not take the surface down with it.\nfunction readSeen(storageKey: string | undefined) {\n  if (!storageKey) return false;\n  try {\n    return globalThis.localStorage?.getItem(storageKey) === \"seen\";\n  } catch {\n    return false;\n  }\n}\n\nfunction writeSeen(storageKey: string | undefined) {\n  if (!storageKey) return;\n  try {\n    globalThis.localStorage?.setItem(storageKey, \"seen\");\n  } catch {\n    // no persistence available — surface still dismisses for this session\n  }\n}\n\n/** Starts closed so the server and first client pass agree, then opens once storage has been read. */\nfunction useSeenGate(storageKey: string | undefined, enabled: boolean) {\n  const [allowed, setAllowed] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    setAllowed(!readSeen(storageKey));\n  }, [enabled, storageKey]);\n\n  return allowed;\n}\n\nexport type RichTooltipTourProps = {\n  steps: readonly string[];\n  step?: string | null;\n  defaultStep?: string;\n  onStepChange?: (step: string | null) => void;\n  onComplete?: () => void;\n  storageKey?: string;\n  children?: ReactNode;\n};\n\nexport function RichTooltipTour({ steps, step, defaultStep, onStepChange, onComplete, storageKey, children }: RichTooltipTourProps) {\n  const [uncontrolledStep, setUncontrolledStep] = useState<string | null>(defaultStep ?? steps[0] ?? null);\n  const started = useSeenGate(storageKey, step === undefined);\n  const uncontrolledActiveStep = started ? uncontrolledStep : null;\n  const activeStep = step === undefined ? uncontrolledActiveStep : step;\n\n  function setStep(next: string | null) {\n    if (step === undefined) setUncontrolledStep(next);\n    onStepChange?.(next);\n    if (next === null) {\n      writeSeen(storageKey);\n      onComplete?.();\n    }\n  }\n\n  const position = tourPosition(steps, activeStep);\n  const value: TourValue = {\n    activeStep,\n    ...position,\n    next: () => setStep(stepAfter(steps, position.index)),\n    previous: () => setStep(stepBefore(steps, position.index)),\n    goTo: (target) => setStep(target),\n    finish: () => setStep(null),\n  };\n\n  return <TourContext.Provider value={value}>{children}</TourContext.Provider>;\n}\n\ntype RichTooltipContextValue = {\n  tone: RichTooltipTone;\n  dismiss: () => void;\n};\n\nconst RichTooltipContext = createContext<RichTooltipContextValue | null>(null);\n\nfunction useRichTooltipContext() {\n  const context = useContext(RichTooltipContext);\n  if (!context) throw new Error(\"RichTooltip parts must be rendered inside <RichTooltip>.\");\n  return context;\n}\n\nexport type RichTooltipProps = Omit<ComponentProps<typeof PopoverPrimitive.Root>, \"modal\"> & {\n  step?: string;\n  tone?: RichTooltipTone;\n  storageKey?: string;\n  dismissOnOutsidePress?: boolean;\n  trapFocus?: boolean;\n};\n\nexport function RichTooltip({\n  step,\n  tone = \"accent\",\n  storageKey,\n  dismissOnOutsidePress = false,\n  trapFocus = false,\n  open,\n  defaultOpen = true,\n  onOpenChange,\n  children,\n  ...props\n}: RichTooltipProps) {\n  const tour = useTour();\n  const inTour = tour !== null && step !== undefined;\n  const [standaloneOpen, setStandaloneOpen] = useState(defaultOpen);\n  const standaloneAllowed = useSeenGate(storageKey, open === undefined && !inTour);\n\n  const resolvedOpen = open ?? (inTour ? tour.activeStep === step : standaloneOpen && standaloneAllowed);\n\n  function dismiss() {\n    if (inTour) {\n      tour.finish();\n      return;\n    }\n    setStandaloneOpen(false);\n    writeSeen(storageKey);\n  }\n\n  const handleOpenChange: NonNullable<RichTooltipProps[\"onOpenChange\"]> = (nextOpen, details) => {\n    if (!dismissOnOutsidePress && details.reason === \"outside-press\") return;\n    onOpenChange?.(nextOpen, details);\n    if (!nextOpen) dismiss();\n  };\n\n  const context: RichTooltipContextValue = { tone, dismiss };\n\n  return (\n    <RichTooltipContext.Provider value={context}>\n      <PopoverPrimitive.Root open={resolvedOpen} onOpenChange={handleOpenChange} modal={trapFocus ? \"trap-focus\" : false} {...props}>\n        {children}\n      </PopoverPrimitive.Root>\n    </RichTooltipContext.Provider>\n  );\n}\n\nexport function RichTooltipTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Trigger> & { style?: CSSProperties & PopupKnobStyle }) {\n  return (\n    <PopoverPrimitive.Trigger\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"trigger\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\ntype AnchorProp = ComponentProps<typeof PopoverPrimitive.Positioner>[\"anchor\"];\n\nfunction resolveAnchorElement(anchor: AnchorProp): Element | null {\n  const candidate = typeof anchor === \"function\" ? anchor() : anchor;\n  if (!candidate) return null;\n  if (candidate instanceof Element) return candidate;\n  if (\"current\" in candidate) return candidate.current;\n  return null;\n}\n\nfunction useAnchorScroll(anchor: AnchorProp, open: boolean, enabled: boolean) {\n  useEffect(() => {\n    if (!(open && enabled)) return;\n    const element = resolveAnchorElement(anchor);\n    if (!element) return;\n    const reduced = globalThis.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches ?? false;\n    element.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: reduced ? \"auto\" : \"smooth\" });\n  }, [anchor, enabled, open]);\n}\n\nexport type RichTooltipContentProps = Omit<ComponentProps<typeof PopoverPrimitive.Popup>, \"style\"> & {\n  style?: CSSProperties & RichTooltipContentKnobStyle;\n} & {\n  side?: ComponentProps<typeof PopoverPrimitive.Positioner>[\"side\"];\n  align?: ComponentProps<typeof PopoverPrimitive.Positioner>[\"align\"];\n  sideOffset?: number;\n  anchor?: AnchorProp;\n  collisionPadding?: ComponentProps<typeof PopoverPrimitive.Positioner>[\"collisionPadding\"];\n  arrow?: boolean;\n  scrollAnchorIntoView?: boolean;\n};\n\nexport function RichTooltipContent({\n  className,\n  children,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 10,\n  anchor,\n  collisionPadding = 12,\n  arrow = true,\n  scrollAnchorIntoView = true,\n  ...props\n}: RichTooltipContentProps) {\n  const { tone } = useRichTooltipContext();\n  const isSurface = tone === \"surface\";\n  useAnchorScroll(anchor, true, scrollAnchorIntoView);\n\n  return (\n    <PopoverPrimitive.Portal>\n      {/* portal escapes every token-scoped ancestor, so scope is re-asserted here */}\n      <PopoverPrimitive.Positioner\n        data-control-ui=\"rich-tooltip\"\n        data-popup-kind=\"rich-tooltip\"\n        data-control-family=\"popup\"\n        data-slot=\"positioner\"\n        data-skin={skinId()}\n        data-effects={skinEffects()}\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        anchor={anchor}\n        collisionPadding={collisionPadding}\n        className=\"z-[80]\"\n      >\n        <PopoverPrimitive.Popup\n          data-control-ui=\"rich-tooltip\"\n          data-popup-kind=\"rich-tooltip\"\n          data-control-family=\"popup\"\n          data-slot=\"content\"\n          data-tone={tone}\n          data-surface={isSurface ? \"floating\" : undefined}\n          data-popup-part={isSurface ? \"surface\" : undefined}\n          className={cn(\"relative grid w-80 max-w-[calc(100vw-2rem)] gap-2 p-4\", className)}\n          {...props}\n        >\n          {children}\n          {arrow ? (\n            <PopoverPrimitive.Arrow\n              data-control-ui=\"rich-tooltip\"\n              data-popup-kind=\"rich-tooltip\"\n              data-control-family=\"popup\"\n              data-slot=\"arrow\"\n              data-tone={tone}\n              className={cn(\n                \"flex\",\n                \"data-[side=top]:-bottom-[8px]\",\n                \"data-[side=bottom]:-top-[8px]\",\n                \"data-[side=left]:-right-[10px]\",\n                \"data-[side=right]:-left-[10px]\",\n              )}\n            >\n              <RichTooltipArrowSvg />\n            </PopoverPrimitive.Arrow>\n          ) : null}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction RichTooltipArrowSvg() {\n  return (\n    <svg aria-hidden=\"true\" focusable=\"false\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" overflow=\"visible\">\n      <path d=\"M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z\" />\n    </svg>\n  );\n}\n\n// Cancels the content padding, so it only reads correctly as the first child. Inherited corners follow a skinned radius.\nexport function RichTooltipMedia({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & PopupKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"media\"\n      className={cn(\"-mx-4 -mt-4 mb-1 overflow-hidden [&_img]:w-full [&_img]:object-cover [&_video]:w-full\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function RichTooltipHeader({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & PopupKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"header\"\n      className={cn(\"flex items-start justify-between gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function RichTooltipTitle({\n  className,\n  ...props\n}: Omit<ComponentProps<typeof PopoverPrimitive.Title>, \"style\"> & {\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n}) {\n  return (\n    <PopoverPrimitive.Title\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"title\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function RichTooltipDescription({\n  className,\n  ...props\n}: Omit<ComponentProps<typeof PopoverPrimitive.Description>, \"style\"> & {\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n}) {\n  const { tone } = useRichTooltipContext();\n  return (\n    <PopoverPrimitive.Description\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"description\"\n      data-tone={tone}\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function RichTooltipFooter({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & PopupKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"footer\"\n      className={cn(\"mt-2 flex items-center justify-between gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type RichTooltipProgressProps = Omit<ComponentProps<\"div\">, \"style\"> & {\n  variant?: RichTooltipProgressVariant;\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n};\n\nexport function RichTooltipProgress({ className, variant = \"count\", children, ...props }: RichTooltipProgressProps) {\n  const { tone } = useRichTooltipContext();\n  const tour = useTour();\n  if (!tour || tour.total < 2 || tour.index < 0) return null;\n\n  return (\n    <div\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"progress\"\n      data-variant={variant}\n      data-tone={tone}\n      className={cn(\"flex items-center gap-1.5\", className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{`Step ${tour.index + 1} of ${tour.total}`}</span>\n      {children ??\n        (variant === \"dots\" ? (\n          Array.from({ length: tour.total }, (_, dot) => (\n            <span\n              // biome-ignore lint/suspicious/noArrayIndexKey: dots are positional, they carry no other identity\n              key={dot}\n              data-control-ui=\"rich-tooltip\"\n              data-control-family=\"popup\"\n              data-popup-kind=\"rich-tooltip\"\n              data-slot=\"dot\"\n              data-active={dot === tour.index ? \"true\" : undefined}\n              className=\"size-1.5\"\n            />\n          ))\n        ) : (\n          <span aria-hidden=\"true\">{`${tour.index + 1}/${tour.total}`}</span>\n        ))}\n    </div>\n  );\n}\n\nconst actionClasses =\n  \"inline-flex h-7 shrink-0 cursor-pointer items-center justify-center gap-1 px-2 disabled:pointer-events-none [&_svg]:size-4\";\n\nexport function RichTooltipPrevious({\n  className,\n  children,\n  onClick,\n  ...props\n}: Omit<ComponentProps<\"button\">, \"style\"> & {\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n}) {\n  const tour = useTour();\n  if (!tour || tour.total < 2) return null;\n\n  return (\n    <button\n      type=\"button\"\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"previous\"\n      disabled={tour.isFirst}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) tour.previous();\n      }}\n      className={cn(actionClasses, className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <ChevronLeftIcon aria-hidden=\"true\" />\n          <span className=\"sr-only\">Previous step</span>\n        </>\n      )}\n    </button>\n  );\n}\n\nexport function RichTooltipNext({\n  className,\n  children,\n  onClick,\n  ...props\n}: Omit<ComponentProps<\"button\">, \"style\"> & {\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n}) {\n  const { dismiss } = useRichTooltipContext();\n  const tour = useTour();\n\n  return (\n    <button\n      type=\"button\"\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"next\"\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (tour) tour.next();\n        else dismiss();\n      }}\n      className={cn(actionClasses, className)}\n      {...props}\n    >\n      {children ??\n        (tour ? (\n          <>\n            <span className=\"sr-only\">{tour.isLast ? \"Finish\" : \"Next step\"}</span>\n            <ChevronRightIcon aria-hidden=\"true\" />\n          </>\n        ) : (\n          \"Got it\"\n        ))}\n    </button>\n  );\n}\n\nexport function RichTooltipClose({\n  className,\n  children,\n  ...props\n}: Omit<ComponentProps<typeof PopoverPrimitive.Close>, \"style\"> & {\n  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;\n}) {\n  return (\n    <PopoverPrimitive.Close\n      data-control-ui=\"rich-tooltip\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"rich-tooltip\"\n      data-slot=\"close\"\n      className={cn(actionClasses, \"-mr-1 size-7 px-0\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <XIcon aria-hidden=\"true\" />\n          <span className=\"sr-only\">Dismiss</span>\n        </>\n      )}\n    </PopoverPrimitive.Close>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/popup.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-controls.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-lists.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-motion.css\"": {},
    "@import \"../components/control-ui/styles/recipes/rich-tooltip.css\"": {}
  },
  "meta": {}
}