{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "selection-presence",
  "type": "registry:component",
  "title": "Selection Presence",
  "description": "Dashed-border overlay marking what another user has selected on the canvas.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/selection-presence/selection-presence.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 * Localizable strings.\n *\n * @public\n */\nexport type SelectionPresenceLabels = {\n  /** Aria-label override. Defaults to `\"Selection presence\"`. */\n  region?: string;\n};\n\nconst DEFAULT_LABELS = {\n  region: \"Selection presence\",\n} as const satisfies Required<SelectionPresenceLabels>;\n\n/**\n * Props for {@link SelectionPresence}.\n *\n * @public\n */\nexport type SelectionPresenceProps = {\n  /** Tailwind / CSS color used for the border + chip. Defaults to `var(--foreground)`. */\n  color?: string;\n  /** Selection rectangle height in pixels. */\n  height: number;\n  /** Localizable strings. */\n  labels?: SelectionPresenceLabels;\n  /** Optional name shown in the corner chip (e.g. owner of the selection). */\n  name?: ReactNode;\n  /** Selection rectangle width in pixels. */\n  width: number;\n  /** Selection rectangle X (top-left) in canvas pixels. */\n  x: number;\n  /** Selection rectangle Y (top-left) in canvas pixels. */\n  y: number;\n} & ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Overlay marking what another user has selected on the canvas. The\n * dashed border + soft fill stay calm so they communicate\n * \"someone-else's-selection\" without blocking primary content. Pure\n * presentation; the host computes the rect from the remote user's\n * viewport and supplies an accent color per user.\n *\n * The wrapper is `pointer-events: none` so host gestures pass through.\n *\n * @example\n * ```tsx\n * <div className=\"relative h-screen w-screen\">\n *   <Canvas />\n *   <SelectionPresence\n *     x={120} y={80} width={240} height={120}\n *     color=\"#5b8def\"\n *     name=\"Bea\"\n *   />\n * </div>\n * ```\n *\n * @public\n */\nexport const SelectionPresence = forwardRef<\n  HTMLDivElement,\n  SelectionPresenceProps\n>((props, ref) => {\n  const { className, color, height, labels, name, width, x, y, ...rest } =\n    props;\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const accent = color ?? \"var(--foreground)\";\n  const ariaLabel =\n    typeof name === \"string\"\n      ? `${resolvedLabels.region}: ${name}`\n      : resolvedLabels.region;\n  return (\n    <div\n      aria-label={ariaLabel}\n      className={cn(\n        \"pointer-events-none absolute z-20 rounded-md border-2 border-dashed\",\n        className,\n      )}\n      data-selection-presence\n      ref={ref}\n      role=\"img\"\n      style={{\n        backgroundColor: `color-mix(in srgb, ${accent} 10%, transparent)`,\n        borderColor: accent,\n        height,\n        left: x,\n        top: y,\n        width,\n      }}\n      {...rest}\n    >\n      {name === null || name === undefined ? null : (\n        <span\n          className=\"absolute -top-5 left-0 inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm\"\n          data-selection-presence-chip\n          style={{ backgroundColor: accent }}\n        >\n          {name}\n        </span>\n      )}\n    </div>\n  );\n});\nSelectionPresence.displayName = \"SelectionPresence\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}