{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "follow-mode",
  "type": "registry:component",
  "title": "Follow Mode",
  "description": "Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/follow-mode/follow-mode.tsx",
      "content": "\"use client\";\n\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * Color theme for the follow ring + chip.\n *\n * @public\n */\nexport type FollowModeColor =\n  | \"amber\"\n  | \"blue\"\n  | \"emerald\"\n  | \"purple\"\n  | \"red\"\n  | \"rose\";\n\nconst PALETTE: Record<FollowModeColor, { chip: string; ring: string }> = {\n  amber: { chip: \"bg-amber-500 text-white\", ring: \"ring-amber-500\" },\n  blue: { chip: \"bg-blue-500 text-white\", ring: \"ring-blue-500\" },\n  emerald: { chip: \"bg-emerald-500 text-white\", ring: \"ring-emerald-500\" },\n  purple: { chip: \"bg-purple-500 text-white\", ring: \"ring-purple-500\" },\n  red: { chip: \"bg-red-500 text-white\", ring: \"ring-red-500\" },\n  rose: { chip: \"bg-rose-500 text-white\", ring: \"ring-rose-500\" },\n};\n\n/**\n * Localizable strings.\n *\n * @public\n */\nexport type FollowModeLabels = {\n  /** Aria-label for the follow chrome. Defaults to `\"Follow mode\"`. */\n  region?: string;\n  /** Stop-following button copy. Defaults to `\"Stop\"`. */\n  stop?: string;\n};\n\nconst DEFAULT_LABELS = {\n  region: \"Follow mode\",\n  stop: \"Stop\",\n} as const satisfies Required<FollowModeLabels>;\n\n/**\n * Props for {@link FollowMode}.\n *\n * @public\n */\nexport type FollowModeProps = {\n  /** Color theme. Defaults to `\"blue\"`. */\n  color?: FollowModeColor;\n  /** Localizable strings. */\n  labels?: FollowModeLabels;\n  /** Display name of the followed participant. */\n  name: ReactNode;\n  /** Fires when the user picks the stop-following button. */\n  onStop?: () => void;\n} & Omit<ComponentPropsWithoutRef<\"div\">, \"color\">;\n\n/**\n * Follow-mode chrome. Wrap any region (typically the whole canvas) to\n * outline it with the followed participant's color and surface a\n * pinned chip + stop-following button. Pure presentation — the host\n * drives viewport sync and toggles the wrapper on / off.\n *\n * @example\n * ```tsx\n * <FollowMode color=\"emerald\" name=\"Sam\" onStop={stop}>\n *   <CanvasView … />\n * </FollowMode>\n * ```\n *\n * @public\n */\nexport const FollowMode = forwardRef<HTMLDivElement, FollowModeProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      color = \"blue\",\n      labels,\n      name,\n      onStop,\n      ...rest\n    } = props;\n    const palette = PALETTE[color];\n    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n    return (\n      <div\n        aria-label={resolvedLabels.region}\n        className={cn(\n          \"relative h-full w-full rounded-2xl ring-2 ring-inset\",\n          palette.ring,\n          className,\n        )}\n        data-follow-color={color}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className=\"pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm\"\n          data-follow-chip\n        >\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-1.5 py-0.5\",\n              palette.chip,\n            )}\n          >\n            <span aria-hidden=\"true\">▸</span>\n            <span>Following {name}</span>\n          </span>\n          {onStop ? (\n            <button\n              aria-label={resolvedLabels.stop}\n              className=\"inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              onClick={onStop}\n              type=\"button\"\n            >\n              {resolvedLabels.stop}\n            </button>\n          ) : null}\n        </div>\n        {children}\n      </div>\n    );\n  },\n);\nFollowMode.displayName = \"FollowMode\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}