{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snap-guides",
  "type": "registry:component",
  "title": "Snap Guides",
  "description": "Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/snap-guides/snap-guides.tsx",
      "content": "\"use client\";\n\nimport { type ComponentPropsWithoutRef, forwardRef } 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 = forwardRef<HTMLDivElement, SnapGuidesProps>(\n  (props, ref) => {\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  },\n);\nSnapGuides.displayName = \"SnapGuides\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}