{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snap-guides",
  "title": "Snap Guides",
  "description": "Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/snap-guides/snap-guides.tsx",
      "content": "\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * One alignment line.\n *\n * @public\n */\nexport type SnapGuide =\n  | {\n      /** Stable id (used as React key). */\n      id: string;\n      /** Horizontal guide — runs left to right at this `y` in container px. */\n      orientation: \"horizontal\";\n      y: number;\n    }\n  | {\n      /** Stable id (used as React key). */\n      id: string;\n      /** Vertical guide — runs top to bottom at this `x` in container px. */\n      orientation: \"vertical\";\n      x: number;\n    };\n\n/**\n * Localizable strings.\n *\n * @public\n */\nexport type SnapGuidesLabels = {\n  /** Aria-label for the layer. Defaults to `\"Snap guides\"`. */\n  region?: string;\n};\n\nconst DEFAULT_LABELS = {\n  region: \"Snap guides\",\n} as const satisfies Required<SnapGuidesLabels>;\n\n/**\n * Props for {@link SnapGuides}.\n *\n * @public\n */\nexport type SnapGuidesProps = {\n  /** Active alignment lines. Pass an empty array to hide all. */\n  guides: SnapGuide[];\n  /** Localizable strings. */\n  labels?: SnapGuidesLabels;\n} & ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Alignment guide overlay for a canvas. Renders dashed lines at the\n * `x` / `y` coordinates supplied by the host snapper. Pure\n * presentation — the host computes which guides are active during a\n * drag and unmounts them on release.\n *\n * @example\n * ```tsx\n * <SnapGuides\n *   guides={[\n *     { id: \"x-200\", orientation: \"vertical\", x: 200 },\n *     { id: \"y-160\", orientation: \"horizontal\", y: 160 },\n *   ]}\n * />\n * ```\n *\n * @public\n */\nexport const SnapGuides = ({\n  ref,\n  ...props\n}: SnapGuidesProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const { className, guides, labels, ...rest } = props;\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <div\n      aria-label={resolvedLabels.region}\n      className={cn(\"pointer-events-none absolute inset-0 z-30\", className)}\n      data-snap-guide-count={guides.length}\n      ref={ref}\n      {...rest}\n    >\n      {guides.map((guide) => {\n        const isVertical = guide.orientation === \"vertical\";\n        const offset = isVertical ? guide.x : guide.y;\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute border-primary/70\",\n              isVertical\n                ? \"inset-y-0 w-px border-l border-dashed\"\n                : \"inset-x-0 h-px border-t border-dashed\",\n            )}\n            data-snap-guide-id={guide.id}\n            data-snap-orientation={guide.orientation}\n            key={guide.id}\n            style={\n              isVertical\n                ? { left: `${offset.toString()}px` }\n                : { top: `${offset.toString()}px` }\n            }\n          />\n        );\n      })}\n    </div>\n  );\n};\nSnapGuides.displayName = \"SnapGuides\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}