{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "follow-mode",
  "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.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/follow-mode/follow-mode.tsx",
      "content": "\"use client\";\n\nimport type { ComponentPropsWithoutRef, ReactNode } 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 = ({\n  ref,\n  ...props\n}: FollowModeProps & { ref?: React.Ref<HTMLDivElement> }) => {\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};\nFollowMode.displayName = \"FollowMode\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}