@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/glass-bubble/glass-bubble.js

@@ -0,0 +1,308 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/glass-bubble/glass-bubble.tsx
+const CENTRE = {
+	x: 50,
+	y: 50
+};
+const STEP = 2;
+const BIG_STEP = 6;
+const BASE_SCALE = 160;
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function clampValue(value) {
+	return {
+		x: clamp(value.x, 0, 100),
+		y: clamp(value.y, 0, 100)
+	};
+}
+/** True where SVG filters work inside backdrop-filter (Chromium engines). */
+function supportsSvgBackdrop(nav = globalThis.navigator) {
+	if (!nav) return false;
+	const brands = nav.userAgentData?.brands;
+	if (brands) return brands.some(({ brand }) => brand === "Chromium");
+	return /\b(?:Chrome|Chromium)\//.test(nav.userAgent) && !/\bCriOS\//.test(nav.userAgent);
+}
+const subscribeNever = () => () => {};
+/** The three channel scales for a fringe (0-40): 0 keeps them equal. */
+function glassBubbleScales(fringe) {
+	const spread = clamp(fringe, 0, 40) * .16;
+	return {
+		r: BASE_SCALE + spread,
+		g: BASE_SCALE,
+		b: BASE_SCALE - spread
+	};
+}
+/**
+* Draws the displacement map: red carries the x offset, green the y offset,
+* 0.5 meaning none. Inside the circle each pixel samples closer to the centre
+* (magnifying), more so towards the rim (bending). Null when there is no 2D
+* canvas (jsdom, some locked-down browsers).
+*/
+function drawDisplacementMap(size, bend) {
+	if (typeof document === "undefined") return null;
+	const px = Math.max(1, Math.round(size));
+	const canvas = document.createElement("canvas");
+	canvas.width = px;
+	canvas.height = px;
+	let context;
+	try {
+		context = canvas.getContext("2d");
+	} catch {
+		return null;
+	}
+	if (!context) return null;
+	const image = context.createImageData(px, px);
+	const strength = clamp(bend, 0, 100) / 100;
+	const radius = px / 2;
+	for (let row = 0; row < px; row++) for (let col = 0; col < px; col++) {
+		const nx = (col + .5 - radius) / radius;
+		const ny = (row + .5 - radius) / radius;
+		const d = Math.hypot(nx, ny);
+		let ox = 0;
+		let oy = 0;
+		if (d < 1) {
+			const pull = strength * (.1 + .22 * (1 - Math.sqrt(1 - d * d)));
+			ox = -nx * pull;
+			oy = -ny * pull;
+		}
+		const i = (row * px + col) * 4;
+		image.data[i] = Math.round(clamp(.5 + ox, 0, 1) * 255);
+		image.data[i + 1] = Math.round(clamp(.5 + oy, 0, 1) * 255);
+		image.data[i + 2] = 128;
+		image.data[i + 3] = 255;
+	}
+	context.putImageData(image, 0, 0);
+	return canvas.toDataURL();
+}
+const light = (amount) => `color-mix(in oklab, var(--glass-bubble-light) ${String(amount)}%, transparent)`;
+const dark = (amount) => `color-mix(in oklab, var(--glass-bubble-dark) ${String(amount)}%, transparent)`;
+const SPECULAR = { backgroundImage: [
+	`radial-gradient(circle at 28% 20%, ${light(95)} 0, ${light(0)} 9%)`,
+	`radial-gradient(circle at 31% 24%, ${light(45)} 0, ${light(0)} 30%)`,
+	`radial-gradient(circle at 73% 83%, ${light(22)} 0, ${light(0)} 22%)`
+].join(", ") };
+const RIM = `inset 0 1px 0 ${light(34)}, inset 0 -1px 0 ${light(14)}, inset 0 0 0 0.5px ${light(10)}`;
+const SHADOW_REST = `${RIM}, 0 10px 22px ${dark(32)}, 0 2px 6px ${dark(20)}`;
+const SHADOW_HELD = `${RIM}, 0 5px 12px ${dark(32)}, 0 1px 4px ${dark(20)}`;
+/**
+* A draggable glass lens that refracts the content under it. The bubble is a
+* 2D slider (`role="slider"`): arrow keys move it 2% (Shift: 6%), mirrored in
+* right-to-left layouts, and Home centres it. `data-lens` on the root says
+* whether the SVG refraction ("svg", Chromium) or the blur fallback is in use.
+* `aria-label` / `aria-labelledby` name the bubble (default "Glass bubble").
+*/
+function GlassBubble({ className, children, size = 132, bend = 70, fringe = 18, value, defaultValue = CENTRE, onValueChange, disabled = false, lens = "auto", "aria-label": ariaLabel = "Glass bubble", "aria-labelledby": ariaLabelledBy, ...props }) {
+	const diameter = clamp(size, 80, 240);
+	const [uncontrolled, setUncontrolled] = useState(() => clampValue(defaultValue));
+	const position = clampValue(value ?? uncontrolled);
+	const [held, setHeld] = useState(false);
+	const dir = Direction.useDirection();
+	const filterId = `dowel-glass-bubble-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const chromium = useSyncExternalStore(subscribeNever, supportsSvgBackdrop, () => false);
+	const mode = lens === "auto" ? chromium ? "svg" : "fallback" : lens;
+	const fieldRef = useRef(null);
+	const drag = useRef(null);
+	const hydrated = useSyncExternalStore(subscribeNever, () => true, () => false);
+	const map = useMemo(() => hydrated && mode === "svg" ? drawDisplacementMap(diameter, bend) : null, [
+		hydrated,
+		mode,
+		diameter,
+		bend
+	]);
+	const scales = glassBubbleScales(fringe);
+	function commit(next) {
+		const clamped = clampValue(next);
+		if (clamped.x === position.x && clamped.y === position.y) return;
+		if (value === void 0) setUncontrolled(clamped);
+		onValueChange?.(clamped);
+	}
+	function isRtl(element) {
+		return dir === "rtl" || element.closest("[dir]")?.getAttribute("dir") === "rtl";
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		const step = event.shiftKey ? BIG_STEP : STEP;
+		const flip = isRtl(event.currentTarget) ? -1 : 1;
+		const moves = {
+			ArrowLeft: [-step * flip, 0],
+			ArrowRight: [step * flip, 0],
+			ArrowUp: [0, -step],
+			ArrowDown: [0, step]
+		};
+		if (event.key === "Home") {
+			event.preventDefault();
+			commit(CENTRE);
+			return;
+		}
+		const move = moves[event.key];
+		if (!move) return;
+		event.preventDefault();
+		commit({
+			x: position.x + move[0],
+			y: position.y + move[1]
+		});
+	}
+	function handlePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.focus();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		drag.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			from: position
+		};
+		setHeld(true);
+	}
+	function handlePointerMove(event) {
+		const start = drag.current;
+		const field = fieldRef.current;
+		if (!start || start.id !== event.pointerId || !field) return;
+		const box = field.getBoundingClientRect();
+		const travelX = box.width - diameter;
+		const travelY = box.height - diameter;
+		const flip = isRtl(event.currentTarget) ? -1 : 1;
+		commit({
+			x: travelX > 0 ? start.from.x + (event.clientX - start.x) * flip / travelX * 100 : 50,
+			y: travelY > 0 ? start.from.y + (event.clientY - start.y) / travelY * 100 : 50
+		});
+	}
+	function handlePointerEnd(event) {
+		if (drag.current?.id !== event.pointerId) return;
+		drag.current = null;
+		setHeld(false);
+	}
+	const across = Math.round(position.x);
+	const down = Math.round(position.y);
+	const backdrop = mode === "svg" ? `url(#${filterId}) saturate(1.12) brightness(1.04)` : "blur(3px) saturate(1.3) brightness(1.04)";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: fieldRef,
+		"data-slot": "glass-bubble",
+		"data-lens": mode,
+		className: cn("relative isolate aspect-square w-full max-w-[37.5rem] select-none", "[--glass-bubble-dark:var(--color-foreground)] [--glass-bubble-light:var(--color-background)]", "dark:[--glass-bubble-dark:var(--color-background)] dark:[--glass-bubble-light:var(--color-foreground)]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "glass-bubble-content",
+				className: "absolute inset-0",
+				children
+			}),
+			mode === "svg" && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				"data-slot": "glass-bubble-filter",
+				width: "0",
+				height: "0",
+				className: "pointer-events-none absolute",
+				children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "0",
+					y: "0",
+					width: diameter,
+					height: diameter,
+					filterUnits: "userSpaceOnUse",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						map && /* @__PURE__ */ jsx("feImage", {
+							href: map,
+							x: "0",
+							y: "0",
+							width: diameter,
+							height: diameter,
+							preserveAspectRatio: "none",
+							result: "map"
+						}),
+						[
+							"r",
+							"g",
+							"b"
+						].map((channel) => /* @__PURE__ */ jsx(ChannelPass, {
+							channel,
+							scale: scales[channel]
+						}, channel)),
+						/* @__PURE__ */ jsx("feBlend", {
+							in: "lens-r",
+							in2: "lens-g",
+							mode: "screen",
+							result: "lens-rg"
+						}),
+						/* @__PURE__ */ jsx("feBlend", {
+							in: "lens-rg",
+							in2: "lens-b",
+							mode: "screen"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": across,
+				"aria-valuetext": `${String(across)} across, ${String(down)} down`,
+				"aria-disabled": disabled || void 0,
+				"data-slot": "glass-bubble-lens",
+				"data-held": held ? "" : void 0,
+				className: cn("absolute touch-none rounded-full", disabled ? "cursor-not-allowed opacity-55" : held ? "cursor-grabbing" : "cursor-grab", focusRing),
+				style: {
+					width: diameter,
+					height: diameter,
+					insetInlineStart: `calc((100% - ${String(diameter)}px) * ${String(position.x / 100)})`,
+					top: `calc((100% - ${String(diameter)}px) * ${String(position.y / 100)})`,
+					backdropFilter: backdrop,
+					WebkitBackdropFilter: backdrop
+				},
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "glass-bubble-specular",
+					className: "pointer-events-none absolute inset-0 rounded-full",
+					style: SPECULAR
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "glass-bubble-rim",
+					className: "pointer-events-none absolute inset-0 rounded-full transition-shadow duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+					style: { boxShadow: held ? SHADOW_HELD : SHADOW_REST }
+				})]
+			})
+		]
+	});
+}
+const CHANNEL_MATRIX = {
+	r: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0",
+	g: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0",
+	b: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
+};
+/** One displacement pass, kept to a single colour channel. */
+function ChannelPass({ channel, scale }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("feDisplacementMap", {
+		in: "SourceGraphic",
+		in2: "map",
+		scale,
+		xChannelSelector: "R",
+		yChannelSelector: "G",
+		result: `shift-${channel}`
+	}), /* @__PURE__ */ jsx("feColorMatrix", {
+		in: `shift-${channel}`,
+		type: "matrix",
+		values: CHANNEL_MATRIX[channel],
+		result: `lens-${channel}`
+	})] });
+}
+//#endregion
+export { GlassBubble, drawDisplacementMap, glassBubbleScales, supportsSvgBackdrop };
+
+//# sourceMappingURL=glass-bubble.js.map

package/dist/components/glass-bubble/glass-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-bubble.js","names":[],"sources":["../../../src/components/glass-bubble/glass-bubble.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Glass bubble (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { Direction } from \"radix-ui\";\nimport {\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A round glass lens you drag over content. It refracts what is under it —\n * magnifying the middle, bending towards the rim, with red and blue fringing —\n * through an SVG filter used as a backdrop-filter.\n *\n * The filter is an feImage displacement map (drawn on a canvas, redrawn when\n * `bend` or `size` changes) fed to three feDisplacementMap passes at slightly\n * different scales, one per colour channel, recombined with feBlend screen.\n *\n * `backdrop-filter: url(#…)` only works in Chromium. Everywhere else the lens\n * falls back to a plain `blur() saturate()` bubble; `data-lens` on the root\n * reports which one is showing (\"svg\" | \"fallback\").\n *\n * The drag is 1:1 with no spring, so there is no animation library. The one\n * transition — the shadow tightening while the bubble is held — runs on the\n * duration tokens and stops under reduced motion like every other.\n */\n\nexport interface GlassBubbleValue {\n  /** Percent of travel from the inline-start edge (0-100). */\n  x: number;\n  /** Percent of travel from the top edge (0-100). */\n  y: number;\n}\n\nexport type GlassBubbleLens = \"auto\" | \"svg\" | \"fallback\";\n\nconst CENTRE: GlassBubbleValue = { x: 50, y: 50 };\nconst STEP = 2;\nconst BIG_STEP = 6;\nconst BASE_SCALE = 160;\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction clampValue(value: GlassBubbleValue): GlassBubbleValue {\n  return { x: clamp(value.x, 0, 100), y: clamp(value.y, 0, 100) };\n}\n\ninterface BrandedNavigator {\n  userAgentData?: { brands?: { brand: string }[] };\n}\n\n/** True where SVG filters work inside backdrop-filter (Chromium engines). */\nexport function supportsSvgBackdrop(\n  nav: Navigator | undefined = globalThis.navigator,\n): boolean {\n  if (!nav) return false;\n  const brands = (nav as Navigator & BrandedNavigator).userAgentData?.brands;\n  if (brands) return brands.some(({ brand }) => brand === \"Chromium\");\n  // No client hints: Chromium says Chrome/, and WebKit shells (CriOS, Safari) do not.\n  return /\\b(?:Chrome|Chromium)\\//.test(nav.userAgent) && !/\\bCriOS\\//.test(nav.userAgent);\n}\n\nconst subscribeNever = () => () => {};\n\n/** The three channel scales for a fringe (0-40): 0 keeps them equal. */\nexport function glassBubbleScales(fringe: number) {\n  const spread = clamp(fringe, 0, 40) * 0.16;\n  return { r: BASE_SCALE + spread, g: BASE_SCALE, b: BASE_SCALE - spread };\n}\n\n/**\n * Draws the displacement map: red carries the x offset, green the y offset,\n * 0.5 meaning none. Inside the circle each pixel samples closer to the centre\n * (magnifying), more so towards the rim (bending). Null when there is no 2D\n * canvas (jsdom, some locked-down browsers).\n */\nexport function drawDisplacementMap(size: number, bend: number): string | null {\n  if (typeof document === \"undefined\") return null;\n  const px = Math.max(1, Math.round(size));\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = px;\n  canvas.height = px;\n  let context: CanvasRenderingContext2D | null;\n  try {\n    context = canvas.getContext(\"2d\");\n  } catch {\n    return null;\n  }\n  if (!context) return null;\n  const image = context.createImageData(px, px);\n  const strength = clamp(bend, 0, 100) / 100;\n  const radius = px / 2;\n  for (let row = 0; row < px; row++) {\n    for (let col = 0; col < px; col++) {\n      const nx = (col + 0.5 - radius) / radius;\n      const ny = (row + 0.5 - radius) / radius;\n      const d = Math.hypot(nx, ny);\n      let ox = 0;\n      let oy = 0;\n      if (d < 1) {\n        const rim = 1 - Math.sqrt(1 - d * d);\n        const pull = strength * (0.1 + 0.22 * rim);\n        ox = -nx * pull;\n        oy = -ny * pull;\n      }\n      const i = (row * px + col) * 4;\n      image.data[i] = Math.round(clamp(0.5 + ox, 0, 1) * 255);\n      image.data[i + 1] = Math.round(clamp(0.5 + oy, 0, 1) * 255);\n      image.data[i + 2] = 128;\n      image.data[i + 3] = 255;\n    }\n  }\n  context.putImageData(image, 0, 0);\n  return canvas.toDataURL();\n}\n\n/* Glass light and shade: whichever of background/foreground is lighter or darker. */\nconst light = (amount: number) =>\n  `color-mix(in oklab, var(--glass-bubble-light) ${String(amount)}%, transparent)`;\nconst dark = (amount: number) =>\n  `color-mix(in oklab, var(--glass-bubble-dark) ${String(amount)}%, transparent)`;\n\nconst SPECULAR: CSSProperties = {\n  backgroundImage: [\n    `radial-gradient(circle at 28% 20%, ${light(95)} 0, ${light(0)} 9%)`,\n    `radial-gradient(circle at 31% 24%, ${light(45)} 0, ${light(0)} 30%)`,\n    `radial-gradient(circle at 73% 83%, ${light(22)} 0, ${light(0)} 22%)`,\n  ].join(\", \"),\n};\n\nconst RIM = `inset 0 1px 0 ${light(34)}, inset 0 -1px 0 ${light(14)}, inset 0 0 0 0.5px ${light(10)}`;\nconst SHADOW_REST = `${RIM}, 0 10px 22px ${dark(32)}, 0 2px 6px ${dark(20)}`;\nconst SHADOW_HELD = `${RIM}, 0 5px 12px ${dark(32)}, 0 1px 4px ${dark(20)}`;\n\nexport interface GlassBubbleProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> {\n  /** The content under the lens (an image, a gradient, anything). */\n  children?: ReactNode;\n  /** Bubble diameter in px, 80-240. */\n  size?: number;\n  /** Lens curvature, 0-100: how strongly it magnifies and bends. */\n  bend?: number;\n  /** Chromatic spread at the rim, 0-40. */\n  fringe?: number;\n  /** Position in percent of travel (controlled). */\n  value?: GlassBubbleValue;\n  /** Starting position (uncontrolled). Defaults to the centre. */\n  defaultValue?: GlassBubbleValue;\n  /** Called with the new position as the bubble is dragged or nudged. */\n  onValueChange?: (value: GlassBubbleValue) => void;\n  /** Stops dragging and keyboard nudging. */\n  disabled?: boolean;\n  /**\n   * Which lens to draw. \"auto\" uses the SVG refraction in Chromium and the\n   * blur fallback elsewhere; the others force one (the SVG lens renders as\n   * plain glass where it is unsupported).\n   */\n  lens?: GlassBubbleLens;\n}\n\n/**\n * A draggable glass lens that refracts the content under it. The bubble is a\n * 2D slider (`role=\"slider\"`): arrow keys move it 2% (Shift: 6%), mirrored in\n * right-to-left layouts, and Home centres it. `data-lens` on the root says\n * whether the SVG refraction (\"svg\", Chromium) or the blur fallback is in use.\n * `aria-label` / `aria-labelledby` name the bubble (default \"Glass bubble\").\n */\nexport function GlassBubble({\n  className,\n  children,\n  size = 132,\n  bend = 70,\n  fringe = 18,\n  value,\n  defaultValue = CENTRE,\n  onValueChange,\n  disabled = false,\n  lens = \"auto\",\n  \"aria-label\": ariaLabel = \"Glass bubble\",\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: GlassBubbleProps) {\n  const diameter = clamp(size, 80, 240);\n  const [uncontrolled, setUncontrolled] = useState(() => clampValue(defaultValue));\n  const position = clampValue(value ?? uncontrolled);\n  const [held, setHeld] = useState(false);\n  const dir = Direction.useDirection();\n  const filterId = `dowel-glass-bubble-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const chromium = useSyncExternalStore(subscribeNever, supportsSvgBackdrop, () => false);\n  const mode = lens === \"auto\" ? (chromium ? \"svg\" : \"fallback\") : lens;\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const drag = useRef<{ id: number; x: number; y: number; from: GlassBubbleValue } | null>(\n    null,\n  );\n\n  // Drawn only once hydrated, so the server and the first client render agree.\n  const hydrated = useSyncExternalStore(\n    subscribeNever,\n    () => true,\n    () => false,\n  );\n  const map = useMemo(\n    () => (hydrated && mode === \"svg\" ? drawDisplacementMap(diameter, bend) : null),\n    [hydrated, mode, diameter, bend],\n  );\n  const scales = glassBubbleScales(fringe);\n\n  function commit(next: GlassBubbleValue) {\n    const clamped = clampValue(next);\n    if (clamped.x === position.x && clamped.y === position.y) return;\n    if (value === undefined) setUncontrolled(clamped);\n    onValueChange?.(clamped);\n  }\n\n  function isRtl(element: Element) {\n    return dir === \"rtl\" || element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    const step = event.shiftKey ? BIG_STEP : STEP;\n    const flip = isRtl(event.currentTarget) ? -1 : 1;\n    const moves: Record<string, [number, number]> = {\n      ArrowLeft: [-step * flip, 0],\n      ArrowRight: [step * flip, 0],\n      ArrowUp: [0, -step],\n      ArrowDown: [0, step],\n    };\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(CENTRE);\n      return;\n    }\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    commit({ x: position.x + move[0], y: position.y + move[1] });\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (disabled || event.button !== 0) return;\n    event.preventDefault();\n    event.currentTarget.focus();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, from: position };\n    setHeld(true);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const start = drag.current;\n    const field = fieldRef.current;\n    if (!start || start.id !== event.pointerId || !field) return;\n    const box = field.getBoundingClientRect();\n    const travelX = box.width - diameter;\n    const travelY = box.height - diameter;\n    const flip = isRtl(event.currentTarget) ? -1 : 1;\n    commit({\n      x: travelX > 0 ? start.from.x + (((event.clientX - start.x) * flip) / travelX) * 100 : 50,\n      y: travelY > 0 ? start.from.y + ((event.clientY - start.y) / travelY) * 100 : 50,\n    });\n  }\n\n  function handlePointerEnd(event: PointerEvent<HTMLDivElement>) {\n    if (drag.current?.id !== event.pointerId) return;\n    drag.current = null;\n    setHeld(false);\n  }\n\n  const across = Math.round(position.x);\n  const down = Math.round(position.y);\n  const backdrop =\n    mode === \"svg\"\n      ? `url(#${filterId}) saturate(1.12) brightness(1.04)`\n      : \"blur(3px) saturate(1.3) brightness(1.04)\";\n\n  return (\n    <div\n      ref={fieldRef}\n      data-slot=\"glass-bubble\"\n      data-lens={mode}\n      className={cn(\n        \"relative isolate aspect-square w-full max-w-[37.5rem] select-none\",\n        \"[--glass-bubble-dark:var(--color-foreground)] [--glass-bubble-light:var(--color-background)]\",\n        \"dark:[--glass-bubble-dark:var(--color-background)] dark:[--glass-bubble-light:var(--color-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"glass-bubble-content\" className=\"absolute inset-0\">\n        {children}\n      </div>\n      {mode === \"svg\" && (\n        <svg\n          aria-hidden=\"true\"\n          data-slot=\"glass-bubble-filter\"\n          width=\"0\"\n          height=\"0\"\n          className=\"pointer-events-none absolute\"\n        >\n          <filter\n            id={filterId}\n            x=\"0\"\n            y=\"0\"\n            width={diameter}\n            height={diameter}\n            filterUnits=\"userSpaceOnUse\"\n            colorInterpolationFilters=\"sRGB\"\n          >\n            {map && (\n              <feImage\n                href={map}\n                x=\"0\"\n                y=\"0\"\n                width={diameter}\n                height={diameter}\n                preserveAspectRatio=\"none\"\n                result=\"map\"\n              />\n            )}\n            {([\"r\", \"g\", \"b\"] as const).map((channel) => (\n              <ChannelPass key={channel} channel={channel} scale={scales[channel]} />\n            ))}\n            <feBlend in=\"lens-r\" in2=\"lens-g\" mode=\"screen\" result=\"lens-rg\" />\n            <feBlend in=\"lens-rg\" in2=\"lens-b\" mode=\"screen\" />\n          </filter>\n        </svg>\n      )}\n      <div\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={ariaLabelledBy ? undefined : ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={across}\n        aria-valuetext={`${String(across)} across, ${String(down)} down`}\n        aria-disabled={disabled || undefined}\n        data-slot=\"glass-bubble-lens\"\n        data-held={held ? \"\" : undefined}\n        className={cn(\n          \"absolute touch-none rounded-full\",\n          disabled ? \"cursor-not-allowed opacity-55\" : held ? \"cursor-grabbing\" : \"cursor-grab\",\n          focusRing,\n        )}\n        style={{\n          width: diameter,\n          height: diameter,\n          insetInlineStart: `calc((100% - ${String(diameter)}px) * ${String(position.x / 100)})`,\n          top: `calc((100% - ${String(diameter)}px) * ${String(position.y / 100)})`,\n          backdropFilter: backdrop,\n          WebkitBackdropFilter: backdrop,\n        }}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerEnd}\n        onPointerCancel={handlePointerEnd}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"glass-bubble-specular\"\n          className=\"pointer-events-none absolute inset-0 rounded-full\"\n          style={SPECULAR}\n        />\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"glass-bubble-rim\"\n          className=\"pointer-events-none absolute inset-0 rounded-full transition-shadow duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\"\n          style={{ boxShadow: held ? SHADOW_HELD : SHADOW_REST }}\n        />\n      </div>\n    </div>\n  );\n}\n\nconst CHANNEL_MATRIX = {\n  r: \"1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0\",\n  g: \"0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0\",\n  b: \"0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0\",\n} as const;\n\n/** One displacement pass, kept to a single colour channel. */\nfunction ChannelPass({ channel, scale }: { channel: \"r\" | \"g\" | \"b\"; scale: number }) {\n  return (\n    <>\n      <feDisplacementMap\n        in=\"SourceGraphic\"\n        in2=\"map\"\n        scale={scale}\n        xChannelSelector=\"R\"\n        yChannelSelector=\"G\"\n        result={`shift-${channel}`}\n      />\n      <feColorMatrix\n        in={`shift-${channel}`}\n        type=\"matrix\"\n        values={CHANNEL_MATRIX[channel]}\n        result={`lens-${channel}`}\n      />\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/glass-bubble/index.d.ts

@@ -0,0 +1,2 @@
+import { GlassBubble, GlassBubbleLens, GlassBubbleProps, GlassBubbleValue, drawDisplacementMap, glassBubbleScales, supportsSvgBackdrop } from "./glass-bubble.js";
+export { GlassBubble, type GlassBubbleLens, type GlassBubbleProps, type GlassBubbleValue, drawDisplacementMap, glassBubbleScales, supportsSvgBackdrop };

package/dist/components/glass-bubble/index.js

@@ -0,0 +1,2 @@
+import { GlassBubble, drawDisplacementMap, glassBubbleScales, supportsSvgBackdrop } from "./glass-bubble.js";
+export { GlassBubble, drawDisplacementMap, glassBubbleScales, supportsSvgBackdrop };

package/dist/components/glass-bubble/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/glass-bubble/meta.ts
+const meta = defineMeta({
+	name: "glass-bubble",
+	title: "Glass Bubble",
+	description: "A draggable glass lens that refracts the content under it, with a specular highlight and chromatic fringing.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["glass-bubble.tsx"],
+	a11y: "The bubble is a 2D slider (role=\"slider\", default name \"Glass bubble\") with aria-valuetext \"<x> across, <y> down\" in percent of travel. Arrow keys move it 2% (Shift: 6%), mirrored in right-to-left layouts; Home centres it; it has the shared focus ring. Highlight and rim layers are aria-hidden. The refracting lens is an SVG backdrop-filter that only Chromium supports; other engines get a blur-and-saturate bubble instead, and data-lens=\"svg\" | \"fallback\" on the root reports which. Nothing moves on its own; the shadow transition while held runs on the duration tokens, so reduced motion stops it."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/glass-bubble/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/glass-bubble/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"glass-bubble\",\n  title: \"Glass Bubble\",\n  description:\n    \"A draggable glass lens that refracts the content under it, with a specular highlight and chromatic fringing.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"glass-bubble.tsx\"],\n  a11y:\n    'The bubble is a 2D slider (role=\"slider\", default name \"Glass bubble\") with aria-valuetext \"<x> across, ' +\n    '<y> down\" in percent of travel. Arrow keys move it 2% (Shift: 6%), mirrored in right-to-left layouts; Home ' +\n    \"centres it; it has the shared focus ring. Highlight and rim layers are aria-hidden. The refracting lens is \" +\n    \"an SVG backdrop-filter that only Chromium supports; other engines get a blur-and-saturate bubble instead, \" +\n    'and data-lens=\"svg\" | \"fallback\" on the root reports which. Nothing moves on its own; the shadow ' +\n    \"transition while held runs on the duration tokens, so reduced motion stops it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAMJ,CAAC"}

package/dist/components/glow-card/glow-card.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/glow-card/glow-card.d.ts
+interface GlowCardGroupProps extends ComponentPropsWithRef<"div"> {
+  /** Radius of the glow in pixels. Cards may override it. */
+  radius?: number;
+}
+/**
+ * Tracks the pointer across every `GlowCard` inside it, so one light moves
+ * across the whole set. Lay it out however you like — it is a plain `div`.
+ */
+declare function GlowCardGroup({ className, radius, style, onPointerMove, onPointerLeave, ...props }: GlowCardGroupProps): import("react").JSX.Element;
+/** The colour of the glow. `glowColor` overrides it with any CSS colour. */
+declare const glowCardVariants: (props?: ({
+  tone?: "primary" | "success" | "warning" | "destructive" | "info" | "foreground" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GlowCardProps extends ComponentPropsWithRef<"div">, VariantProps<typeof glowCardVariants> {
+  /** Any CSS colour for the glow, overriding `tone`. */
+  glowColor?: string;
+  /** Strength of the tinted fill under the glow, 0–1. The ring is always full strength. */
+  intensity?: number;
+  /** Radius of the glow in pixels. Defaults to the group's, or 200. */
+  radius?: number;
+  /** Renders the child element as the card — a link or a button, say. */
+  asChild?: boolean;
+}
+/**
+ * A card surface with a pointer-following glow on its edge. Inside a
+ * `GlowCardGroup` the group drives it; on its own it tracks itself.
+ */
+declare function GlowCard({ className, tone, glowColor, intensity, radius, asChild, style, children, onPointerMove, onPointerLeave, ...props }: GlowCardProps): import("react").JSX.Element;
+//#endregion
+export { GlowCard, GlowCardGroup, GlowCardGroupProps, GlowCardProps, glowCardVariants };
+//# sourceMappingURL=glow-card.d.ts.map

package/dist/components/glow-card/glow-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glow-card.d.ts","names":[],"sources":["../../../src/components/glow-card/glow-card.tsx"],"mappings":";;;UAwDiB,2BAA2B;;EAE1C;;;;;;iBAOc,gBACd,WACA,QACA,OACA,eACA,mBACG,SACF,qCAAkB,IAAA;;cA6Bf,mBAAgB;;6CAiBrB;UAgBgB,sBACP,8BAA8B,oBAAoB;;EAE1D;;EAEA;;EAEA;;EAEA;;;;;;iBAOc,WACd,WACA,MACA,WACA,WACA,QACA,SACA,OACA,UACA,eACA,mBACG,SACF,gCAAa,IAAA"}

package/dist/components/glow-card/glow-card.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, useContext } from "react";
+//#region src/components/glow-card/glow-card.tsx
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const CARD_SELECTOR = "[data-slot=\"glow-card\"]";
+function glowAllowed(event) {
+	if (event.pointerType === "touch") return false;
+	return !window.matchMedia(REDUCED_MOTION).matches;
+}
+/** Writes the pointer position, relative to each card, onto each card. */
+function paint(cards, clientX, clientY) {
+	for (const card of cards) {
+		const rect = card.getBoundingClientRect();
+		card.style.setProperty("--glow-x", `${String(clientX - rect.left)}px`);
+		card.style.setProperty("--glow-y", `${String(clientY - rect.top)}px`);
+		card.style.setProperty("--glow-opacity", "1");
+	}
+}
+function fade(cards) {
+	for (const card of cards) card.style.setProperty("--glow-opacity", "0");
+}
+const GroupContext = createContext(false);
+/**
+* Tracks the pointer across every `GlowCard` inside it, so one light moves
+* across the whole set. Lay it out however you like — it is a plain `div`.
+*/
+function GlowCardGroup({ className, radius, style, onPointerMove, onPointerLeave, ...props }) {
+	const cards = (root) => root.querySelectorAll(CARD_SELECTOR);
+	return /* @__PURE__ */ jsx(GroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "glow-card-group",
+			className: cn("relative", className),
+			style: radius === void 0 ? style : {
+				"--glow-radius": `${String(radius)}px`,
+				...style
+			},
+			onPointerMove: (event) => {
+				onPointerMove?.(event);
+				if (glowAllowed(event)) paint(cards(event.currentTarget), event.clientX, event.clientY);
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				fade(cards(event.currentTarget));
+			},
+			...props
+		})
+	});
+}
+/** The colour of the glow. `glowColor` overrides it with any CSS colour. */
+const glowCardVariants = cva("group/glow-card relative isolate rounded-xl border border-border bg-card text-card-foreground", {
+	variants: { tone: {
+		primary: "[--glow-color:var(--color-primary)]",
+		foreground: "[--glow-color:var(--color-foreground)]",
+		success: "[--glow-color:var(--color-success)]",
+		warning: "[--glow-color:var(--color-warning)]",
+		info: "[--glow-color:var(--color-info)]",
+		destructive: "[--glow-color:var(--color-destructive)]"
+	} },
+	defaultVariants: { tone: "primary" }
+});
+const glowLayer = cn("pointer-events-none absolute -inset-px rounded-[inherit] border border-(--glow-color)", "bg-[color-mix(in_oklab,var(--glow-color)_var(--glow-fill,15%),transparent)]", "shadow-[inset_0_0_0_1px_var(--glow-color)]", "[mask-image:radial-gradient(var(--glow-radius,200px)_circle_at_var(--glow-x,50%)_var(--glow-y,50%),var(--color-foreground),transparent)]", "opacity-[var(--glow-opacity,0)] transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "motion-reduce:hidden");
+/**
+* A card surface with a pointer-following glow on its edge. Inside a
+* `GlowCardGroup` the group drives it; on its own it tracks itself.
+*/
+function GlowCard({ className, tone, glowColor, intensity, radius, asChild = false, style, children, onPointerMove, onPointerLeave, ...props }) {
+	const grouped = useContext(GroupContext);
+	const Comp = asChild ? Slot.Root : "div";
+	const vars = {};
+	if (glowColor !== void 0) vars["--glow-color"] = glowColor;
+	if (intensity !== void 0) vars["--glow-fill"] = `${String(Math.round(intensity * 100))}%`;
+	if (radius !== void 0) vars["--glow-radius"] = `${String(radius)}px`;
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "glow-card",
+		className: cn(glowCardVariants({ tone }), className),
+		style: {
+			...vars,
+			...style
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (!grouped && glowAllowed(event)) paint([event.currentTarget], event.clientX, event.clientY);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			if (!grouped) fade([event.currentTarget]);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(Slot.Slottable, { children }), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "glow-card-glow",
+			className: glowLayer
+		})]
+	});
+}
+//#endregion
+export { GlowCard, GlowCardGroup, glowCardVariants };
+
+//# sourceMappingURL=glow-card.js.map

package/dist/components/glow-card/glow-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glow-card.js","names":[],"sources":["../../../src/components/glow-card/glow-card.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Glow Hover Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useContext,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A glow that follows the pointer across one card or a whole group of them.\n *\n * The source re-rendered on every pointermove and kept a masked duplicate of\n * every card in sync with ResizeObserver, MutationObserver, scroll and resize\n * listeners. None of that is needed: each card owns one decorative layer, and\n * the pointer handler writes three custom properties straight onto the cards.\n * No React state changes while the pointer moves, so nothing re-renders.\n *\n * Coordinates are per card, measured from its own box, so the glow is\n * continuous across a group — the gap between two cards simply has no card in\n * it, exactly as the source's single group-wide mask behaved.\n *\n * Off for touch (there is no hover to follow) and under reduced motion (a\n * light chasing the pointer is movement, however soft).\n */\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst CARD_SELECTOR = '[data-slot=\"glow-card\"]';\n\nfunction glowAllowed(event: PointerEvent<HTMLElement>): boolean {\n  if (event.pointerType === \"touch\") return false;\n  return !window.matchMedia(REDUCED_MOTION).matches;\n}\n\n/** Writes the pointer position, relative to each card, onto each card. */\nfunction paint(cards: Iterable<HTMLElement>, clientX: number, clientY: number) {\n  for (const card of cards) {\n    const rect = card.getBoundingClientRect();\n    card.style.setProperty(\"--glow-x\", `${String(clientX - rect.left)}px`);\n    card.style.setProperty(\"--glow-y\", `${String(clientY - rect.top)}px`);\n    card.style.setProperty(\"--glow-opacity\", \"1\");\n  }\n}\n\nfunction fade(cards: Iterable<HTMLElement>) {\n  for (const card of cards) card.style.setProperty(\"--glow-opacity\", \"0\");\n}\n\nconst GroupContext = createContext(false);\n\nexport interface GlowCardGroupProps extends ComponentPropsWithRef<\"div\"> {\n  /** Radius of the glow in pixels. Cards may override it. */\n  radius?: number;\n}\n\n/**\n * Tracks the pointer across every `GlowCard` inside it, so one light moves\n * across the whole set. Lay it out however you like — it is a plain `div`.\n */\nexport function GlowCardGroup({\n  className,\n  radius,\n  style,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: GlowCardGroupProps) {\n  const cards = (root: HTMLElement) => root.querySelectorAll<HTMLElement>(CARD_SELECTOR);\n\n  return (\n    <GroupContext.Provider value={true}>\n      <div\n        data-slot=\"glow-card-group\"\n        className={cn(\"relative\", className)}\n        style={\n          radius === undefined\n            ? style\n            : ({ \"--glow-radius\": `${String(radius)}px`, ...style } as CSSProperties)\n        }\n        onPointerMove={(event) => {\n          onPointerMove?.(event);\n          if (glowAllowed(event))\n            paint(cards(event.currentTarget), event.clientX, event.clientY);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          fade(cards(event.currentTarget));\n        }}\n        {...props}\n      />\n    </GroupContext.Provider>\n  );\n}\n\n/** The colour of the glow. `glowColor` overrides it with any CSS colour. */\nconst glowCardVariants = cva(\n  \"group/glow-card relative isolate rounded-xl border border-border bg-card text-card-foreground\",\n  {\n    variants: {\n      tone: {\n        primary: \"[--glow-color:var(--color-primary)]\",\n        foreground: \"[--glow-color:var(--color-foreground)]\",\n        success: \"[--glow-color:var(--color-success)]\",\n        warning: \"[--glow-color:var(--color-warning)]\",\n        info: \"[--glow-color:var(--color-info)]\",\n        destructive: \"[--glow-color:var(--color-destructive)]\",\n      },\n    },\n    defaultVariants: {\n      tone: \"primary\",\n    },\n  },\n);\n\n/*\n * The glow layer: a tinted fill and a one-pixel ring in the glow colour,\n * masked to a soft disc around the pointer. The mask only reads alpha, so any\n * opaque colour draws it; a token keeps the audit's promise literal.\n */\nconst glowLayer = cn(\n  \"pointer-events-none absolute -inset-px rounded-[inherit] border border-(--glow-color)\",\n  \"bg-[color-mix(in_oklab,var(--glow-color)_var(--glow-fill,15%),transparent)]\",\n  \"shadow-[inset_0_0_0_1px_var(--glow-color)]\",\n  \"[mask-image:radial-gradient(var(--glow-radius,200px)_circle_at_var(--glow-x,50%)_var(--glow-y,50%),var(--color-foreground),transparent)]\",\n  \"opacity-[var(--glow-opacity,0)] transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  \"motion-reduce:hidden\",\n);\n\nexport interface GlowCardProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof glowCardVariants> {\n  /** Any CSS colour for the glow, overriding `tone`. */\n  glowColor?: string;\n  /** Strength of the tinted fill under the glow, 0–1. The ring is always full strength. */\n  intensity?: number;\n  /** Radius of the glow in pixels. Defaults to the group's, or 200. */\n  radius?: number;\n  /** Renders the child element as the card — a link or a button, say. */\n  asChild?: boolean;\n}\n\n/**\n * A card surface with a pointer-following glow on its edge. Inside a\n * `GlowCardGroup` the group drives it; on its own it tracks itself.\n */\nexport function GlowCard({\n  className,\n  tone,\n  glowColor,\n  intensity,\n  radius,\n  asChild = false,\n  style,\n  children,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: GlowCardProps) {\n  const grouped = useContext(GroupContext);\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  const vars: Record<string, string> = {};\n  if (glowColor !== undefined) vars[\"--glow-color\"] = glowColor;\n  if (intensity !== undefined) vars[\"--glow-fill\"] = `${String(Math.round(intensity * 100))}%`;\n  if (radius !== undefined) vars[\"--glow-radius\"] = `${String(radius)}px`;\n\n  return (\n    <Comp\n      data-slot=\"glow-card\"\n      className={cn(glowCardVariants({ tone }), className)}\n      style={{ ...vars, ...style }}\n      onPointerMove={(event: PointerEvent<HTMLDivElement>) => {\n        onPointerMove?.(event);\n        if (!grouped && glowAllowed(event)) {\n          paint([event.currentTarget], event.clientX, event.clientY);\n        }\n      }}\n      onPointerLeave={(event: PointerEvent<HTMLDivElement>) => {\n        onPointerLeave?.(event);\n        if (!grouped) fade([event.currentTarget]);\n      }}\n      {...props}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      <span aria-hidden=\"true\" data-slot=\"glow-card-glow\" className={glowLayer} />\n    </Comp>\n  );\n}\n\nexport { glowCardVariants };\n"],"mappings":"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"}

package/dist/components/glow-card/index.d.ts

@@ -0,0 +1,2 @@
+import { GlowCard, GlowCardGroup, GlowCardGroupProps, GlowCardProps, glowCardVariants } from "./glow-card.js";
+export { GlowCard, GlowCardGroup, type GlowCardGroupProps, type GlowCardProps, glowCardVariants };

package/dist/components/glow-card/index.js

@@ -0,0 +1,2 @@
+import { GlowCard, GlowCardGroup, glowCardVariants } from "./glow-card.js";
+export { GlowCard, GlowCardGroup, glowCardVariants };

package/dist/components/glow-card/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/glow-card/meta.ts
+const meta = defineMeta({
+	name: "glow-card",
+	title: "Glow Card",
+	description: "Card surfaces with a soft glow that follows the pointer, alone or continuously across a group.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["glow-card.tsx"],
+	a11y: "The glow is a decorative, aria-hidden, pointer-events-none layer, so the card's own content and semantics are untouched; use asChild to make the whole card a link or button. The pointer handler writes custom properties directly and never re-renders. The glow is off for touch input and under prefers-reduced-motion, where the layer is not displayed at all."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/glow-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/glow-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"glow-card\",\n  title: \"Glow Card\",\n  description:\n    \"Card surfaces with a soft glow that follows the pointer, alone or continuously across a group.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"glow-card.tsx\"],\n  a11y:\n    \"The glow is a decorative, aria-hidden, pointer-events-none layer, so the card's own content and \" +\n    \"semantics are untouched; use asChild to make the whole card a link or button. The pointer handler \" +\n    \"writes custom properties directly and never re-renders. The glow is off for touch input and under \" +\n    \"prefers-reduced-motion, where the layer is not displayed at all.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,eAAe;CACvB,MACE;AAIJ,CAAC"}

package/dist/components/goo-ball/goo-ball.d.ts

@@ -0,0 +1,48 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/goo-ball/goo-ball.d.ts
+interface GooBallValue {
+  /** Percent of travel from the inline-start wall (0-100). */
+  x: number;
+  /** Percent of travel from the top wall (0-100). */
+  y: number;
+}
+declare const gooBallVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Spring settings for the feel props. Exported for tests and tuning. */
+declare function gooBallSpring(give: number, grip: number): {
+  stiffness: number;
+  damping: number;
+  mass: number;
+};
+interface GooBallProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">, VariantProps<typeof gooBallVariants> {
+  /** Ball diameter in px (bencho: 32-84). */
+  size?: number;
+  /** How far the blob deforms with speed, 0-70. 0 keeps it a rigid circle. */
+  stretch?: number;
+  /** Spring softness, 10-100: how slow and wobbly the settle is. */
+  give?: number;
+  /** How tightly the blob tracks the handle, 0-100. Lower lags more. */
+  grip?: number;
+  /** Adds a 1px hairline ring in the border colour. */
+  stroke?: boolean;
+  /** Position in percent of travel (controlled). */
+  value?: GooBallValue;
+  /** Starting position (uncontrolled). Defaults to the centre. */
+  defaultValue?: GooBallValue;
+  /** Called with the new position as the ball is dragged or nudged. */
+  onValueChange?: (value: GooBallValue) => void;
+  /** Stops dragging and keyboard nudging. */
+  disabled?: boolean;
+}
+/**
+ * A decorative, draggable jelly ball. The handle is a 2D slider
+ * (`role="slider"`, arrow keys nudge, Shift nudges further, Home centres).
+ * Size the well with `className` (default 18.75rem x 12.5rem). `aria-label` /
+ * `aria-labelledby` name the handle (default "Goo ball (decorative)").
+ */
+declare function GooBall({ className, size, stretch, give, grip, fill, stroke, value, defaultValue, onValueChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GooBallProps): import("react").JSX.Element;
+//#endregion
+export { GooBall, GooBallProps, GooBallValue, gooBallSpring, gooBallVariants };
+//# sourceMappingURL=goo-ball.d.ts.map

package/dist/components/goo-ball/goo-ball.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goo-ball.d.ts","names":[],"sources":["../../../src/components/goo-ball/goo-ball.tsx"],"mappings":";;;UAwCiB;;EAEf;;EAEA;;cAOI,kBAAe;;6CAQnB;;iBA2Bc,cAAc,cAAc;;;;;UAS3B,qBAEb,KAAK,4DACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;;EAER,eAAe;;EAEf,iBAAiB,OAAO;;EAExB;;;;;;;;iBASc,UACd,WACA,MACA,SACA,MACA,MACA,MACA,QACA,OACA,cACA,eACA,wBACc,8BACK,mBAChB,SACF,+BAAY,IAAA"}