@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/island/island.js

@@ -0,0 +1,94 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/island/island.tsx
+const STYLES = `
+@keyframes dowel-island-enter {
+  from { opacity: 0; scale: 0.9; filter: blur(5px); }
+  to { opacity: 1; scale: 1; filter: blur(0); }
+}
+[data-slot="island-content"] {
+  animation: dowel-island-enter calc(300ms * var(--motion-scale)) var(--ease-out-quint)
+    calc(50ms * var(--motion-scale)) both;
+}
+`;
+const islandVariants = cva(cn("relative inline-flex min-w-[6.25rem] items-center justify-center overflow-hidden rounded-[2rem]", "transition-[width,height] duration-[var(--duration-slow)]"), {
+	variants: { tone: {
+		/** The source's black pill: the inverse of the page. */
+		inverted: "bg-foreground text-background",
+		card: "border border-border bg-card text-card-foreground shadow-md",
+		primary: "bg-primary text-primary-foreground"
+	} },
+	defaultVariants: { tone: "inverted" }
+});
+/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */
+function islandEasing(bounce) {
+	return `cubic-bezier(0.34, ${(1 + Math.min(1, Math.max(0, bounce)) * .8).toFixed(2)}, 0.64, 1)`;
+}
+/** The content box's size, or null until it has been measured. */
+function useMeasuredSize(ref) {
+	const [size, setSize] = useState(null);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => {
+			const width = element.offsetWidth;
+			const height = element.offsetHeight;
+			if (!width || !height) return;
+			setSize((previous) => previous?.width === width && previous.height === height ? previous : {
+				width,
+				height
+			});
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return size;
+}
+/** A pill that morphs between views, resizing around its content. */
+function Island({ className, style, view, views, bounce = .5, live = "off", tone, ...props }) {
+	const measureRef = useRef(null);
+	const size = useMeasuredSize(measureRef);
+	const [shown, setShown] = useState(view);
+	const [from, setFrom] = useState(view);
+	if (shown !== view) {
+		setFrom(shown);
+		setShown(view);
+	}
+	const amount = typeof bounce === "function" ? bounce(from, view) : bounce;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "island",
+		"data-view": view,
+		"aria-live": live === "off" ? void 0 : live,
+		"aria-atomic": live === "off" ? void 0 : true,
+		className: cn(islandVariants({ tone }), className),
+		style: {
+			width: size?.width,
+			height: size?.height,
+			transitionTimingFunction: islandEasing(amount),
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "dowel-island",
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsx("div", {
+			ref: measureRef,
+			"data-slot": "island-measure",
+			className: "w-max shrink-0",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "island-content",
+				children: views[view]
+			}, view)
+		})]
+	});
+}
+//#endregion
+export { Island, islandEasing, islandVariants };
+
+//# sourceMappingURL=island.js.map

package/dist/components/island/island.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"island.js","names":[],"sources":["../../../src/components/island/island.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Dynamic Island (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A pill that reshapes itself around whatever it is showing: an idle glyph,\n * an incoming call, a timer, a player. The source drove this with motion's\n * `layout` spring; here the pill's size is measured (ResizeObserver) and the\n * width/height change is a CSS transition on an overshooting curve, which is\n * the same bounce without a JavaScript animation loop. Any change of size\n * animates — a new view *or* content growing inside the current one — because\n * the measurement does not care why the content changed.\n *\n * The incoming view blurs and scales in through a hoisted keyframe. Both stop\n * under reduced motion: the pill simply is its new size.\n */\n\nconst STYLES = `\n@keyframes dowel-island-enter {\n  from { opacity: 0; scale: 0.9; filter: blur(5px); }\n  to { opacity: 1; scale: 1; filter: blur(0); }\n}\n[data-slot=\"island-content\"] {\n  animation: dowel-island-enter calc(300ms * var(--motion-scale)) var(--ease-out-quint)\n    calc(50ms * var(--motion-scale)) both;\n}\n`;\n\nconst islandVariants = cva(\n  cn(\n    \"relative inline-flex min-w-[6.25rem] items-center justify-center overflow-hidden rounded-[2rem]\",\n    \"transition-[width,height] duration-[var(--duration-slow)]\",\n  ),\n  {\n    variants: {\n      tone: {\n        /** The source's black pill: the inverse of the page. */\n        inverted: \"bg-foreground text-background\",\n        card: \"border border-border bg-card text-card-foreground shadow-md\",\n        primary: \"bg-primary text-primary-foreground\",\n      },\n    },\n    defaultVariants: {\n      tone: \"inverted\",\n    },\n  },\n);\n\nexport type IslandBounce = number | ((from: string, to: string) => number);\n\nexport interface IslandProps<V extends string = string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\">, VariantProps<typeof islandVariants> {\n  /** The view currently shown — a key of `views`. */\n  view: V;\n  /** Content for each view, e.g. `{ compact: …, expanded: … }`. */\n  views: Record<V, ReactNode>;\n  /**\n   * How far the pill overshoots its new size, 0 (none) to 1. A function gets\n   * the previous and next view, so each transition can have its own feel.\n   */\n  bounce?: IslandBounce;\n  /**\n   * Announce each new view to screen readers. Off by default: an island that\n   * announces every idle tick trains people to ignore it.\n   */\n  live?: \"off\" | \"polite\" | \"assertive\";\n}\n\n/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */\nexport function islandEasing(bounce: number): string {\n  const overshoot = 1 + Math.min(1, Math.max(0, bounce)) * 0.8;\n  return `cubic-bezier(0.34, ${overshoot.toFixed(2)}, 0.64, 1)`;\n}\n\n/** The content box's size, or null until it has been measured. */\nfunction useMeasuredSize(ref: RefObject<HTMLElement | null>) {\n  const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const measure = () => {\n      const width = element.offsetWidth;\n      const height = element.offsetHeight;\n      if (!width || !height) return;\n      setSize((previous) =>\n        previous?.width === width && previous.height === height ? previous : { width, height },\n      );\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n}\n\n/** A pill that morphs between views, resizing around its content. */\nexport function Island<V extends string>({\n  className,\n  style,\n  view,\n  views,\n  bounce = 0.5,\n  live = \"off\",\n  tone,\n  ...props\n}: IslandProps<V>) {\n  const measureRef = useRef<HTMLDivElement>(null);\n  const size = useMeasuredSize(measureRef);\n\n  // The view we are coming from, captured when `view` changes, so a bounce\n  // function can tell one transition from another.\n  const [shown, setShown] = useState<V>(view);\n  const [from, setFrom] = useState<V>(view);\n  if (shown !== view) {\n    setFrom(shown);\n    setShown(view);\n  }\n\n  const amount = typeof bounce === \"function\" ? bounce(from, view) : bounce;\n\n  return (\n    <div\n      data-slot=\"island\"\n      data-view={view}\n      aria-live={live === \"off\" ? undefined : live}\n      aria-atomic={live === \"off\" ? undefined : true}\n      className={cn(islandVariants({ tone }), className)}\n      style={{\n        width: size?.width,\n        height: size?.height,\n        transitionTimingFunction: islandEasing(amount),\n        ...style,\n      }}\n      {...props}\n    >\n      <style href=\"dowel-island\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div ref={measureRef} data-slot=\"island-measure\" className=\"w-max shrink-0\">\n        <div key={view} data-slot=\"island-content\">\n          {views[view]}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { islandVariants };\n"],"mappings":";;;;;;AA4BA,MAAM,SAAS;;;;;;;;;;AAWf,MAAM,iBAAiB,IACrB,GACE,mGACA,2DACF,GACA;CACE,UAAU,EACR,MAAM;;EAEJ,UAAU;EACV,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,WACR;AACF,CACF;;AAuBA,SAAgB,aAAa,QAAwB;CAEnD,OAAO,uBADW,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI,GAAA,CAClB,QAAQ,CAAC,EAAE;AACpD;;AAGA,SAAS,gBAAgB,KAAoC;CAC3D,MAAM,CAAC,MAAM,WAAW,SAAmD,IAAI;CAE/E,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,MAAM,gBAAgB;GACpB,MAAM,QAAQ,QAAQ;GACtB,MAAM,SAAS,QAAQ;GACvB,IAAI,CAAC,SAAS,CAAC,QAAQ;GACvB,SAAS,aACP,UAAU,UAAU,SAAS,SAAS,WAAW,SAAS,WAAW;IAAE;IAAO;GAAO,CACvF;EACF;EACA,QAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT;;AAGA,SAAgB,OAAyB,EACvC,WACA,OACA,MACA,OACA,SAAS,IACT,OAAO,OACP,MACA,GAAG,SACc;CACjB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,OAAO,gBAAgB,UAAU;CAIvC,MAAM,CAAC,OAAO,YAAY,SAAY,IAAI;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAY,IAAI;CACxC,IAAI,UAAU,MAAM;EAClB,QAAQ,KAAK;EACb,SAAS,IAAI;CACf;CAEA,MAAM,SAAS,OAAO,WAAW,aAAa,OAAO,MAAM,IAAI,IAAI;CAEnE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,aAAW,SAAS,QAAQ,KAAA,IAAY;EACxC,eAAa,SAAS,QAAQ,KAAA,IAAY;EAC1C,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EACjD,OAAO;GACL,OAAO,MAAM;GACb,QAAQ,MAAM;GACd,0BAA0B,aAAa,MAAM;GAC7C,GAAG;EACL;EACA,GAAI;EAZN,UAAA,CAcE,oBAAC,SAAD;GAAO,MAAK;GAAe,YAAW;GACnC,UAAA;EACI,CAAA,GACP,oBAAC,OAAD;GAAK,KAAK;GAAY,aAAU;GAAiB,WAAU;GACzD,UAAA,oBAAC,OAAD;IAAgB,aAAU;IACvB,UAAA,MAAM;GACJ,GAFK,IAEL;EACF,CAAA,CACF;;AAET"}

package/dist/components/island/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/island/meta.ts
+const meta = defineMeta({
+	name: "island",
+	title: "Island",
+	description: "A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["island.tsx"],
+	a11y: "The island is a container: the controls inside a view (play, skip, answer) are ordinary buttons and must be named by the consumer. Pass `live=\"polite\"` to announce each new view — it is off by default, since an island that announces every change is noise. The resize and the incoming view's blur stop under reduced motion; the pill takes its new size immediately."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/island/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/island/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"island\",\n  title: \"Island\",\n  description:\n    \"A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"island.tsx\"],\n  a11y:\n    \"The island is a container: the controls inside a view (play, skip, answer) are ordinary buttons and must be \" +\n    'named by the consumer. Pass `live=\"polite\"` to announce each new view — it is off by default, since an ' +\n    \"island that announces every change is noise. The resize and the incoming view's blur stop under reduced \" +\n    \"motion; the pill takes its new size immediately.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/liquid-toggle/index.d.ts

@@ -0,0 +1,2 @@
+import { LiquidToggle, LiquidToggleProps, liquidToggleVariants } from "./liquid-toggle.js";
+export { LiquidToggle, type LiquidToggleProps, liquidToggleVariants };

package/dist/components/liquid-toggle/index.js

@@ -0,0 +1,2 @@
+import { LiquidToggle, liquidToggleVariants } from "./liquid-toggle.js";
+export { LiquidToggle, liquidToggleVariants };

package/dist/components/liquid-toggle/liquid-toggle.d.ts

@@ -0,0 +1,19 @@
+import { Switch } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/liquid-toggle/liquid-toggle.d.ts
+declare const liquidToggleVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface LiquidToggleProps extends Omit<ComponentPropsWithRef<typeof Switch.Root>, "children">, VariantProps<typeof liquidToggleVariants> {
+  /** Spring stiffness, 0–100: how quickly the knob crosses. */
+  speed?: number;
+  /** Velocity squash and stretch, 0–100. 0 keeps the knob a rigid circle. */
+  stretch?: number;
+}
+/** A droplet switch: the knob stretches with its speed and can be dragged across. */
+declare function LiquidToggle({ className, size, stroke, speed, stretch, checked: checkedProp, defaultChecked, onCheckedChange, disabled, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClick, ...props }: LiquidToggleProps): import("react").JSX.Element;
+//#endregion
+export { LiquidToggle, LiquidToggleProps, liquidToggleVariants };
+//# sourceMappingURL=liquid-toggle.d.ts.map

package/dist/components/liquid-toggle/liquid-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-toggle.d.ts","names":[],"sources":["../../../src/components/liquid-toggle/liquid-toggle.tsx"],"mappings":";;;;cA4CM,uBAAoB;;;6CAsBzB;UAEgB,0BAEb,KAAK,6BAA6B,OAAgB,oBAClD,oBAAoB;;EAEtB;;EAEA;;;iBAOc,eACd,WACA,MACA,QACA,OACA,SACA,SAAS,aACT,gBACA,iBACA,UACA,eACA,eACA,aACA,iBACA,YACG,SACF,oCAAiB,IAAA"}

package/dist/components/liquid-toggle/liquid-toggle.js

@@ -0,0 +1,175 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Switch } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useReducedMotion, useTransform, useVelocity } from "motion/react";
+//#region src/components/liquid-toggle/liquid-toggle.tsx
+const liquidToggleVariants = cva(cn("relative inline-flex shrink-0 touch-none items-center rounded-full select-none", "bg-card data-[state=checked]:bg-foreground", "transition-[background-color,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "disabled:cursor-not-allowed disabled:opacity-55", focusRing), {
+	variants: {
+		size: {
+			sm: "h-6 w-11 [--liquid-toggle-inset:0.1875rem] [--liquid-toggle-knob:1.125rem] [--liquid-toggle-travel:1.25rem]",
+			md: "h-[2.875rem] w-[5.75rem] [--liquid-toggle-inset:0.3125rem] [--liquid-toggle-knob:2.25rem] [--liquid-toggle-travel:2.875rem]"
+		},
+		/** A hairline ring on the track — the source's Stroke switch. */
+		stroke: {
+			true: "shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=checked]:shadow-none",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		stroke: true
+	}
+});
+/** Pixels the pointer must travel before a press becomes a drag. */
+const DRAG_SLOP = 3;
+/** A droplet switch: the knob stretches with its speed and can be dragged across. */
+function LiquidToggle({ className, size, stroke, speed = 50, stretch = 36, checked: checkedProp, defaultChecked = false, onCheckedChange, disabled, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClick, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+	const checked = checkedProp ?? uncontrolled;
+	const reduced = useReducedMotion() ?? false;
+	const knobRef = useRef(null);
+	const drag = useRef(null);
+	const suppressClick = useRef(false);
+	const position = useMotionValue(checked ? 1 : 0);
+	const velocity = useVelocity(position);
+	const gain = stretch / 36 * .016;
+	const limit = 1 + stretch / 100 * .4;
+	const scaleX = useTransform(velocity, (v) => reduced ? 1 : Math.min(limit, 1 + Math.abs(v) * gain));
+	const scaleY = useTransform(scaleX, (x) => 2 - x);
+	const stiffness = 150 + speed * 4;
+	const damping = 2 * Math.sqrt(stiffness) * .85;
+	function settle(target) {
+		if (reduced) {
+			position.jump(target);
+			return;
+		}
+		animate(position, target, {
+			type: "spring",
+			stiffness,
+			damping,
+			velocity: position.getVelocity()
+		});
+	}
+	useEffect(() => {
+		if (drag.current) return;
+		const target = checked ? 1 : 0;
+		if (position.get() === target) return;
+		if (reduced) {
+			position.jump(target);
+			return;
+		}
+		const controls = animate(position, target, {
+			type: "spring",
+			stiffness,
+			damping,
+			velocity: position.getVelocity()
+		});
+		return () => {
+			controls.stop();
+		};
+	}, [
+		checked,
+		reduced,
+		stiffness,
+		damping,
+		position
+	]);
+	function setChecked(next) {
+		if (checkedProp === void 0) setUncontrolled(next);
+		onCheckedChange?.(next);
+	}
+	/** Pixels of travel between the two sides, measured from the rendered track. */
+	function travel(track, rtl) {
+		const knob = knobRef.current;
+		if (!knob) return 0;
+		const width = track.clientWidth;
+		const inset = rtl ? width - knob.offsetLeft - knob.offsetWidth : knob.offsetLeft;
+		return width - knob.offsetWidth - 2 * inset;
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		if (disabled || event.button !== 0) return;
+		drag.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			from: position.get(),
+			moved: false
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+	}
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		const current = drag.current;
+		if (!current || current.id !== event.pointerId) return;
+		const dx = event.clientX - current.x;
+		if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;
+		current.moved = true;
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const distance = travel(event.currentTarget, rtl);
+		if (distance <= 0) return;
+		const next = current.from + (rtl ? -dx : dx) / distance;
+		position.set(Math.min(1, Math.max(0, next)));
+	}
+	function release(event, cancelled) {
+		const current = drag.current;
+		if (!current || current.id !== event.pointerId) return;
+		drag.current = null;
+		if (!current.moved) return;
+		suppressClick.current = !cancelled;
+		const next = position.get() >= .5;
+		if (next === checked) settle(next ? 1 : 0);
+		else setChecked(next);
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		if (suppressClick.current) {
+			suppressClick.current = false;
+			event.preventDefault();
+		}
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			"data-slot": "liquid-toggle",
+			checked,
+			onCheckedChange: setChecked,
+			disabled,
+			className: cn(liquidToggleVariants({
+				size,
+				stroke
+			}), className),
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: (event) => {
+				onPointerUp?.(event);
+				release(event, false);
+			},
+			onPointerCancel: (event) => {
+				onPointerCancel?.(event);
+				release(event, true);
+			},
+			onClick: handleClick,
+			...props,
+			children: /* @__PURE__ */ jsx(motion.span, {
+				ref: knobRef,
+				"aria-hidden": "true",
+				"data-slot": "liquid-toggle-knob",
+				"data-state": checked ? "checked" : "unchecked",
+				className: cn("pointer-events-none absolute start-[var(--liquid-toggle-inset)] top-1/2 size-[var(--liquid-toggle-knob)] rounded-full", "translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel))] -translate-y-1/2", "rtl:translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel)*-1)]", "bg-[color-mix(in_oklab,var(--color-foreground)_19%,var(--color-card))] data-[state=checked]:bg-card", "transition-[background-color] duration-[var(--duration-slow)]"),
+				style: {
+					scaleX,
+					scaleY,
+					"--liquid-toggle-p": position
+				}
+			})
+		})
+	});
+}
+//#endregion
+export { LiquidToggle, liquidToggleVariants };
+
+//# sourceMappingURL=liquid-toggle.js.map

package/dist/components/liquid-toggle/liquid-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-toggle.js","names":["SwitchPrimitive"],"sources":["../../../src/components/liquid-toggle/liquid-toggle.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Liquid toggle (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  MotionConfig,\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n  useVelocity,\n  type MotionStyle,\n} from \"motion/react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A switch whose knob behaves like a droplet: it stretches along its travel\n * and squashes across it in proportion to its speed.\n *\n * Built on the Radix switch primitive, like Dowel's Switch, so it has the\n * switch role, Space/Enter, a native click, and a hidden input inside forms.\n * Dowel's Switch cannot take this knob — its thumb is fixed — so this composes\n * the same primitive instead.\n *\n * `motion` is used for one thing CSS cannot do: the knob can be dragged, and on\n * release its spring has to carry the drag's velocity, and the squash is read\n * off that velocity every frame. The knob's position is a single 0–1 value\n * written to a CSS variable; logical `start` and an RTL-negated translate make\n * \"on\" the inline end in both directions. Under reduced motion the knob jumps\n * and never deforms.\n */\n\nconst liquidToggleVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 touch-none items-center rounded-full select-none\",\n    \"bg-card data-[state=checked]:bg-foreground\",\n    \"transition-[background-color,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    focusRing,\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-11 [--liquid-toggle-inset:0.1875rem] [--liquid-toggle-knob:1.125rem] [--liquid-toggle-travel:1.25rem]\",\n        md: \"h-[2.875rem] w-[5.75rem] [--liquid-toggle-inset:0.3125rem] [--liquid-toggle-knob:2.25rem] [--liquid-toggle-travel:2.875rem]\",\n      },\n      /** A hairline ring on the track — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=checked]:shadow-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { size: \"md\", stroke: true },\n  },\n);\n\nexport interface LiquidToggleProps\n  extends\n    Omit<ComponentPropsWithRef<typeof SwitchPrimitive.Root>, \"children\">,\n    VariantProps<typeof liquidToggleVariants> {\n  /** Spring stiffness, 0–100: how quickly the knob crosses. */\n  speed?: number;\n  /** Velocity squash and stretch, 0–100. 0 keeps the knob a rigid circle. */\n  stretch?: number;\n}\n\n/** Pixels the pointer must travel before a press becomes a drag. */\nconst DRAG_SLOP = 3;\n\n/** A droplet switch: the knob stretches with its speed and can be dragged across. */\nexport function LiquidToggle({\n  className,\n  size,\n  stroke,\n  speed = 50,\n  stretch = 36,\n  checked: checkedProp,\n  defaultChecked = false,\n  onCheckedChange,\n  disabled,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onClick,\n  ...props\n}: LiquidToggleProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const checked = checkedProp ?? uncontrolled;\n  const reduced = useReducedMotion() ?? false;\n  const knobRef = useRef<HTMLSpanElement | null>(null);\n  const drag = useRef<{ id: number; x: number; from: number; moved: boolean } | null>(null);\n  const suppressClick = useRef(false);\n\n  const position = useMotionValue(checked ? 1 : 0);\n  const velocity = useVelocity(position);\n  const gain = (stretch / 36) * 0.016;\n  const limit = 1 + (stretch / 100) * 0.4;\n  const scaleX = useTransform(velocity, (v) =>\n    reduced ? 1 : Math.min(limit, 1 + Math.abs(v) * gain),\n  );\n  const scaleY = useTransform(scaleX, (x) => 2 - x);\n\n  const stiffness = 150 + speed * 4;\n  const damping = 2 * Math.sqrt(stiffness) * 0.85;\n\n  function settle(target: number) {\n    if (reduced) {\n      position.jump(target);\n      return;\n    }\n    void animate(position, target, {\n      type: \"spring\",\n      stiffness,\n      damping,\n      velocity: position.getVelocity(),\n    });\n  }\n\n  // Any change of state — click, key, drag release or the controlled prop —\n  // springs the knob to its side, carrying whatever velocity it already has.\n  useEffect(() => {\n    if (drag.current) return;\n    const target = checked ? 1 : 0;\n    if (position.get() === target) return;\n    if (reduced) {\n      position.jump(target);\n      return;\n    }\n    const controls = animate(position, target, {\n      type: \"spring\",\n      stiffness,\n      damping,\n      velocity: position.getVelocity(),\n    });\n    return () => {\n      controls.stop();\n    };\n  }, [checked, reduced, stiffness, damping, position]);\n\n  function setChecked(next: boolean) {\n    if (checkedProp === undefined) setUncontrolled(next);\n    onCheckedChange?.(next);\n  }\n\n  /** Pixels of travel between the two sides, measured from the rendered track. */\n  function travel(track: HTMLElement, rtl: boolean): number {\n    const knob = knobRef.current;\n    if (!knob) return 0;\n    const width = track.clientWidth;\n    // offsetLeft ignores the translate, so it is the resting inset.\n    const inset = rtl ? width - knob.offsetLeft - knob.offsetWidth : knob.offsetLeft;\n    return width - knob.offsetWidth - 2 * inset;\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {\n    onPointerDown?.(event);\n    if (disabled || event.button !== 0) return;\n    drag.current = {\n      id: event.pointerId,\n      x: event.clientX,\n      from: position.get(),\n      moved: false,\n    };\n    event.currentTarget.setPointerCapture(event.pointerId);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {\n    onPointerMove?.(event);\n    const current = drag.current;\n    if (!current || current.id !== event.pointerId) return;\n    const dx = event.clientX - current.x;\n    if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;\n    current.moved = true;\n    const rtl = getComputedStyle(event.currentTarget).direction === \"rtl\";\n    const distance = travel(event.currentTarget, rtl);\n    if (distance <= 0) return;\n    const next = current.from + (rtl ? -dx : dx) / distance;\n    position.set(Math.min(1, Math.max(0, next)));\n  }\n\n  function release(event: PointerEvent<HTMLButtonElement>, cancelled: boolean) {\n    const current = drag.current;\n    if (!current || current.id !== event.pointerId) return;\n    drag.current = null;\n    if (!current.moved) return;\n    // A drag is not a tap: the click that follows pointerup must not toggle.\n    suppressClick.current = !cancelled;\n    const next = position.get() >= 0.5;\n    if (next === checked) settle(next ? 1 : 0);\n    else setChecked(next);\n  }\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (suppressClick.current) {\n      suppressClick.current = false;\n      event.preventDefault();\n    }\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <SwitchPrimitive.Root\n        data-slot=\"liquid-toggle\"\n        checked={checked}\n        onCheckedChange={setChecked}\n        disabled={disabled}\n        className={cn(liquidToggleVariants({ size, stroke }), className)}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={(event) => {\n          onPointerUp?.(event);\n          release(event, false);\n        }}\n        onPointerCancel={(event) => {\n          onPointerCancel?.(event);\n          release(event, true);\n        }}\n        onClick={handleClick}\n        {...props}\n      >\n        <motion.span\n          ref={knobRef}\n          aria-hidden=\"true\"\n          data-slot=\"liquid-toggle-knob\"\n          data-state={checked ? \"checked\" : \"unchecked\"}\n          className={cn(\n            \"pointer-events-none absolute start-[var(--liquid-toggle-inset)] top-1/2 size-[var(--liquid-toggle-knob)] rounded-full\",\n            \"translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel))] -translate-y-1/2\",\n            \"rtl:translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel)*-1)]\",\n            \"bg-[color-mix(in_oklab,var(--color-foreground)_19%,var(--color-card))] data-[state=checked]:bg-card\",\n            \"transition-[background-color] duration-[var(--duration-slow)]\",\n          )}\n          style={{ scaleX, scaleY, ...({ \"--liquid-toggle-p\": position } as MotionStyle) }}\n        />\n      </SwitchPrimitive.Root>\n    </MotionConfig>\n  );\n}\n\nexport { liquidToggleVariants };\n"],"mappings":"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"}

package/dist/components/liquid-toggle/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/liquid-toggle/meta.ts
+const meta = defineMeta({
+	name: "liquid-toggle",
+	title: "Liquid Toggle",
+	description: "A switch whose knob squashes like a droplet as it travels, and can be dragged across.",
+	category: "form",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["liquid-toggle.tsx"],
+	a11y: "Built on the Radix switch primitive: role=\"switch\" with aria-checked, toggled by click, Space or Enter, with a visible focus ring (missing in the source) and a hidden input inside forms. It has no visible label, so name it with aria-label or a <label>. Dragging the knob is a pointer convenience; releasing a drag never also counts as a click. Under reduced motion the knob jumps and never deforms."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/liquid-toggle/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/liquid-toggle/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"liquid-toggle\",\n  title: \"Liquid Toggle\",\n  description:\n    \"A switch whose knob squashes like a droplet as it travels, and can be dragged across.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"liquid-toggle.tsx\"],\n  a11y:\n    'Built on the Radix switch primitive: role=\"switch\" with aria-checked, toggled by click, Space or Enter, ' +\n    \"with a visible focus ring (missing in the source) and a hidden input inside forms. It has no visible \" +\n    \"label, so name it with aria-label or a <label>. Dragging the knob is a pointer convenience; releasing \" +\n    \"a drag never also counts as a click. Under reduced motion the knob jumps and never deforms.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}

package/dist/components/log-viewer/log-viewer.js

@@ -134,7 +134,7 @@ function LogViewer({ className, lines, label, rowHeight = 22, height = 360, anno
 							"data-index": item.index,
 							"data-slot": "log-viewer-row",
 							"data-level": line.level,
-							className: "absolute top-0 left-0 w-full",
+							className: "absolute start-0 top-0 w-full",
 							style: { transform: `translateY(${String(item.start)}px)` },
 							children: /* @__PURE__ */ jsx(LogViewerRow, {
 								line,
@@ -192,7 +192,7 @@ function LogViewerRow({ line, expanded = false, onToggle }) {
 			]
 		}), expanded && line.fields ? /* @__PURE__ */ jsx("dl", {
 			"data-slot": "log-viewer-fields",
-			className: "mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3",
+			className: "ms-4 mt-1 mb-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-s border-border ps-3",
 			children: Object.entries(line.fields).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
 				className: "contents",
 				children: [/* @__PURE__ */ jsx("dt", {

package/dist/components/log-viewer/log-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"log-viewer.js","names":[],"sources":["../../../src/components/log-viewer/log-viewer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { LOG_LEVELS, segment, type LogLevel, type VisibleLine } from \"./log-stream\";\n\n/**\n * A streaming console: filter, follow, expand.\n *\n * The incumbent is react-lazylog, which was last published in 2022, is built on\n * react-virtualized, and cannot run on React 19 — while still taking about\n * 15,000 downloads a week. This is for those people.\n *\n * Two accessibility decisions worth stating rather than discovering.\n *\n * `role=\"log\"` implies `aria-live=\"polite\"`, which is right for a handful of\n * events and catastrophic for a console: a screen reader would read every line\n * of a build as it scrolls past, and nothing else would be audible. Announcing\n * is therefore off by default and opt-in through `announce`. The role stays,\n * because it still describes what the region is.\n *\n * And virtualization means most rows are not in the DOM. That is a real trade,\n * not an implementation detail: assistive technology cannot reach what is not\n * rendered, so a reader who needs the whole log needs an escape — which is what\n * `onDownload` is for. A log viewer with no way out of the virtual window is\n * not accessible however good its ARIA is.\n */\n\nconst LEVEL_STYLES: Record<LogLevel, string> = {\n  trace: \"text-muted-foreground\",\n  debug: \"text-muted-foreground\",\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  fatal: \"text-destructive font-semibold\",\n};\n\n/** Distance from the bottom, in pixels, that still counts as \"at the end\". */\nconst FOLLOW_THRESHOLD = 24;\n\nexport interface LogViewerProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  lines: VisibleLine[];\n  /** Names the region. */\n  label: string;\n  /** Row height in pixels. Rows are one line; expansion is measured. */\n  rowHeight?: number;\n  height?: number | string;\n  /**\n   * Read new lines aloud. Off by default — a console that announces every line\n   * makes a screen reader useless for anything else.\n   */\n  announce?: boolean;\n  /** The way out of the virtual window, for anyone who needs the whole log. */\n  onDownload?: () => void;\n  children?: ReactNode;\n}\n\nexport function LogViewer({\n  className,\n  lines,\n  label,\n  rowHeight = 22,\n  height = 360,\n  announce = false,\n  onDownload,\n  children,\n  ...props\n}: LogViewerProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [following, setFollowing] = useState(true);\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const labelId = useId();\n\n  const virtualizer = useVirtualizer({\n    count: lines.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 12,\n    // Without a starting rect the virtualizer renders nothing until a\n    // ResizeObserver fires, so the first paint is an empty box. Seeding it from\n    // the declared height means rows are there immediately, and it is measured\n    // properly a moment later.\n    initialRect: { width: 0, height: typeof height === \"number\" ? height : 360 },\n  });\n\n  // Follow mode, hand-written rather than delegated. A spring-anchoring library\n  // wants to own the scroll container and so does the virtualizer, and the two\n  // fight; this is scrollToIndex on append plus a proximity check.\n  useEffect(() => {\n    if (!following || lines.length === 0) return;\n    virtualizer.scrollToIndex(lines.length - 1, { align: \"end\" });\n  }, [following, lines.length, virtualizer]);\n\n  function handleScroll() {\n    const element = scrollRef.current;\n    if (!element) return;\n\n    const distance = element.scrollHeight - element.scrollTop - element.clientHeight;\n    // Scrolling up detaches, because the reader is looking at something and\n    // yanking them back to the tail would lose it. Returning to the bottom\n    // re-attaches, which is the gesture people already expect.\n    setFollowing(distance <= FOLLOW_THRESHOLD);\n  }\n\n  function toggleExpanded(id: string) {\n    setExpanded((current) => {\n      const next = new Set(current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  }\n\n  const items = virtualizer.getVirtualItems();\n\n  return (\n    <div data-slot=\"log-viewer\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <span id={labelId} className=\"text-sm font-medium\">\n          {label}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          {!following ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-jump\"\n              onClick={() => {\n                setFollowing(true);\n              }}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Jump to latest\n            </button>\n          ) : (\n            <span className=\"text-xs text-muted-foreground\">Following</span>\n          )}\n          {onDownload ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-download\"\n              onClick={onDownload}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Download full log\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      {children}\n\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        role=\"log\"\n        aria-labelledby={labelId}\n        // Explicitly off unless asked for: role=\"log\" implies polite, and a\n        // console that reads every line aloud drowns out everything else.\n        aria-live={announce ? \"polite\" : \"off\"}\n        // A scrollable region must be focusable, or its content is unreachable\n        // without a pointer — WCAG 2.1.1, and axe's scrollable-region-focusable\n        // requires exactly this. jsx-a11y's heuristic cannot see that this\n        // element scrolls, so here the requirement outranks the rule.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        style={{ height }}\n        className={cn(\n          \"overflow-auto rounded-lg border border-border bg-muted/30 font-mono text-xs\",\n          focusRing,\n        )}\n      >\n        {lines.length === 0 ? (\n          <p className=\"p-3 text-muted-foreground\">No lines match the current filter.</p>\n        ) : (\n          <div style={{ height: virtualizer.getTotalSize(), position: \"relative\" }}>\n            {items.map((item) => {\n              const line = lines[item.index];\n              if (!line) return null;\n\n              return (\n                <div\n                  key={line.id}\n                  ref={virtualizer.measureElement}\n                  data-index={item.index}\n                  data-slot=\"log-viewer-row\"\n                  data-level={line.level}\n                  className=\"absolute top-0 left-0 w-full\"\n                  style={{ transform: `translateY(${String(item.start)}px)` }}\n                >\n                  <LogViewerRow\n                    line={line}\n                    expanded={expanded.has(line.id)}\n                    onToggle={() => {\n                      toggleExpanded(line.id);\n                    }}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface LogViewerRowProps {\n  line: VisibleLine;\n  expanded?: boolean;\n  onToggle?: () => void;\n}\n\n/**\n * One line.\n *\n * Exported because the virtualized container cannot be measured outside a real\n * browser — jsdom reports every box as zero — so the row's behaviour would\n * otherwise be untestable. It is also genuinely useful on its own for anyone\n * rendering a short log without virtualization.\n */\nexport function LogViewerRow({ line, expanded = false, onToggle }: LogViewerRowProps) {\n  const hasFields = line.fields !== undefined && Object.keys(line.fields).length > 0;\n  const parts = segment(line.message, line.matches);\n\n  return (\n    <div className=\"px-3 py-0.5 hover:bg-accent/40\">\n      <div className=\"flex items-baseline gap-2\">\n        {line.timestamp ? (\n          <time className=\"shrink-0 text-muted-foreground tabular-nums\">{line.timestamp}</time>\n        ) : null}\n\n        {line.level ? (\n          // The level in text, not a coloured bar. Colour alone cannot\n          // distinguish warn from error for everyone reading.\n          <span className={cn(\"w-11 shrink-0 uppercase\", LEVEL_STYLES[line.level])}>\n            {line.level}\n          </span>\n        ) : null}\n\n        <span\n          className={cn(\n            \"min-w-0 flex-1 break-all whitespace-pre-wrap\",\n            line.level && LEVEL_STYLES[line.level],\n          )}\n        >\n          {parts.map((part, index) =>\n            part.match ? (\n              // A mark element, so the match is conveyed structurally rather\n              // than only as a background colour.\n              <mark key={index} className=\"rounded-[2px] bg-warning/35 text-inherit\">\n                {part.text}\n              </mark>\n            ) : (\n              <span key={index}>{part.text}</span>\n            ),\n          )}\n        </span>\n\n        {hasFields ? (\n          <button\n            type=\"button\"\n            data-slot=\"log-viewer-expand\"\n            aria-expanded={expanded}\n            onClick={onToggle}\n            className={cn(\n              \"shrink-0 rounded px-1 text-2xs text-muted-foreground\",\n              \"transition-colors hover:text-foreground\",\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            {expanded ? \"Hide fields\" : \"Fields\"}\n          </button>\n        ) : null}\n      </div>\n\n      {expanded && line.fields ? (\n        <dl\n          data-slot=\"log-viewer-fields\"\n          className=\"mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3\"\n        >\n          {Object.entries(line.fields).map(([key, value]) => (\n            <div key={key} className=\"contents\">\n              <dt className=\"text-muted-foreground\">{key}</dt>\n              <dd className=\"m-0 break-all\">\n                {typeof value === \"string\" ? value : JSON.stringify(value)}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface LogViewerToolbarProps extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  query: string;\n  onQueryChange: (query: string) => void;\n  regex: boolean;\n  onRegexChange: (regex: boolean) => void;\n  levels: Set<LogLevel>;\n  onToggleLevel: (level: LogLevel) => void;\n  counts: Map<LogLevel, number>;\n  invalidPattern?: boolean;\n  /** Shown as \"N of M lines\". */\n  showing: number;\n  total: number;\n}\n\nexport function LogViewerToolbar({\n  className,\n  query,\n  onQueryChange,\n  regex,\n  onRegexChange,\n  levels,\n  onToggleLevel,\n  counts,\n  invalidPattern = false,\n  showing,\n  total,\n  ...props\n}: LogViewerToolbarProps) {\n  const filterId = useId();\n  const errorId = useId();\n\n  return (\n    <div\n      data-slot=\"log-viewer-toolbar\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <label htmlFor={filterId} className=\"sr-only\">\n          Filter log\n        </label>\n        <input\n          id={filterId}\n          type=\"search\"\n          value={query}\n          placeholder={regex ? \"Pattern…\" : \"Filter…\"}\n          aria-invalid={invalidPattern || undefined}\n          aria-describedby={invalidPattern ? errorId : undefined}\n          onChange={(event) => {\n            onQueryChange(event.target.value);\n          }}\n          className={cn(\n            \"min-w-32 flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm\",\n            invalidPattern && \"border-destructive\",\n            focusRing,\n          )}\n        />\n        <label className=\"flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n          <input\n            type=\"checkbox\"\n            checked={regex}\n            onChange={(event) => {\n              onRegexChange(event.target.checked);\n            }}\n            className={cn(\"size-3.5 rounded border-input\", focusRing)}\n          />\n          Regex\n        </label>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-1\">\n        {LOG_LEVELS.filter((level) => counts.has(level)).map((level) => {\n          const on = levels.size === 0 || levels.has(level);\n          return (\n            <button\n              key={level}\n              type=\"button\"\n              data-slot=\"log-viewer-facet\"\n              aria-pressed={on}\n              onClick={() => {\n                onToggleLevel(level);\n              }}\n              className={cn(\n                \"rounded-md border px-1.5 py-0.5 font-mono text-2xs uppercase transition-colors\",\n                on\n                  ? \"border-transparent bg-secondary text-secondary-foreground\"\n                  : \"border-input bg-background text-muted-foreground line-through\",\n                focusRing,\n              )}\n            >\n              {level} {counts.get(level) ?? 0}\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"w-full text-xs text-muted-foreground tabular-nums\">\n        {invalidPattern ? (\n          // Said out loud rather than shown as an empty log, which reads as\n          // \"nothing matched\" and sends the reader looking for the wrong thing.\n          <span id={errorId} className=\"text-destructive\">\n            Incomplete pattern — showing everything until it is valid\n          </span>\n        ) : (\n          `${String(showing)} of ${String(total)} lines`\n        )}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,eAAyC;CAC7C,OAAO;CACP,OAAO;CACP,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,MAAM,mBAAmB;AAmBzB,SAAgB,UAAU,EACxB,WACA,OACA,OACA,YAAY,IACZ,SAAS,KACT,WAAW,OACX,YACA,UACA,GAAG,SACc;CACjB,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAC/C,MAAM,CAAC,UAAU,eAAe,yBAAsB,IAAI,IAAI,CAAC;CAC/D,MAAM,UAAU,MAAM;CAEtB,MAAM,cAAc,eAAe;EACjC,OAAO,MAAM;EACb,wBAAwB,UAAU;EAClC,oBAAoB;EACpB,UAAU;EAKV,aAAa;GAAE,OAAO;GAAG,QAAQ,OAAO,WAAW,WAAW,SAAS;EAAI;CAC7E,CAAC;CAKD,gBAAgB;EACd,IAAI,CAAC,aAAa,MAAM,WAAW,GAAG;EACtC,YAAY,cAAc,MAAM,SAAS,GAAG,EAAE,OAAO,MAAM,CAAC;CAC9D,GAAG;EAAC;EAAW,MAAM;EAAQ;CAAW,CAAC;CAEzC,SAAS,eAAe;EACtB,MAAM,UAAU,UAAU;EAC1B,IAAI,CAAC,SAAS;EAEd,MAAM,WAAW,QAAQ,eAAe,QAAQ,YAAY,QAAQ;EAIpE,aAAa,YAAY,gBAAgB;CAC3C;CAEA,SAAS,eAAe,IAAY;EAClC,aAAa,YAAY;GACvB,MAAM,OAAO,IAAI,IAAI,OAAO;GAC5B,IAAI,KAAK,IAAI,EAAE,GAAG,KAAK,OAAO,EAAE;QAC3B,KAAK,IAAI,EAAE;GAChB,OAAO;EACT,CAAC;CACH;CAEA,MAAM,QAAQ,YAAY,gBAAgB;CAE1C,OACE,qBAAC,OAAD;EAAK,aAAU;EAAa,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;EAAjF,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAU;KAC1B,UAAA;IACG,CAAA,GACN,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,CAAC,YACA,oBAAC,UAAD;MACE,MAAK;MACL,aAAU;MACV,eAAe;OACb,aAAa,IAAI;MACnB;MACA,WAAW,GACT,gFACA,kEACA,SACF;MACD,UAAA;KAEO,CAAA,IAER,oBAAC,QAAD;MAAM,WAAU;MAAgC,UAAA;KAAe,CAAA,GAEhE,aACC,oBAAC,UAAD;MACE,MAAK;MACL,aAAU;MACV,SAAS;MACT,WAAW,GACT,gFACA,kEACA,SACF;MACD,UAAA;KAEO,CAAA,IACN,IACD;IACF,CAAA,CAAA;;GAEJ;GAED,oBAAC,OAAD;IACE,KAAK;IACL,UAAU;IACV,MAAK;IACL,mBAAiB;IAGjB,aAAW,WAAW,WAAW;IAMjC,UAAU;IACV,OAAO,EAAE,OAAO;IAChB,WAAW,GACT,+EACA,SACF;IAEC,UAAA,MAAM,WAAW,IAChB,oBAAC,KAAD;KAAG,WAAU;KAA4B,UAAA;IAAqC,CAAA,IAE9E,oBAAC,OAAD;KAAK,OAAO;MAAE,QAAQ,YAAY,aAAa;MAAG,UAAU;KAAW;KACpE,UAAA,MAAM,KAAK,SAAS;MACnB,MAAM,OAAO,MAAM,KAAK;MACxB,IAAI,CAAC,MAAM,OAAO;MAElB,OACE,oBAAC,OAAD;OAEE,KAAK,YAAY;OACjB,cAAY,KAAK;OACjB,aAAU;OACV,cAAY,KAAK;OACjB,WAAU;OACV,OAAO,EAAE,WAAW,cAAc,OAAO,KAAK,KAAK,EAAE,KAAK;OAE1D,UAAA,oBAAC,cAAD;QACQ;QACN,UAAU,SAAS,IAAI,KAAK,EAAE;QAC9B,gBAAgB;SACd,eAAe,KAAK,EAAE;QACxB;OACD,CAAA;MACE,GAfE,KAAK,EAeP;KAET,CAAC;IACE,CAAA;GAEJ,CAAA;EACF;;AAET;;;;;;;;;AAgBA,SAAgB,aAAa,EAAE,MAAM,WAAW,OAAO,YAA+B;CACpF,MAAM,YAAY,KAAK,WAAW,KAAA,KAAa,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,SAAS;CACjF,MAAM,QAAQ,QAAQ,KAAK,SAAS,KAAK,OAAO;CAEhD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,KAAK,YACJ,oBAAC,QAAD;KAAM,WAAU;KAA+C,UAAA,KAAK;IAAgB,CAAA,IAClF;IAEH,KAAK,QAGJ,oBAAC,QAAD;KAAM,WAAW,GAAG,2BAA2B,aAAa,KAAK,MAAM;KACpE,UAAA,KAAK;IACF,CAAA,IACJ;IAEJ,oBAAC,QAAD;KACE,WAAW,GACT,gDACA,KAAK,SAAS,aAAa,KAAK,MAClC;KAEC,UAAA,MAAM,KAAK,MAAM,UAChB,KAAK,QAGH,oBAAC,QAAD;MAAkB,WAAU;MACzB,UAAA,KAAK;KACF,GAFK,KAEL,IAEN,oBAAC,QAAD,EAAA,UAAmB,KAAK,KAAW,GAAxB,KAAwB,CAEvC;IACI,CAAA;IAEL,YACC,oBAAC,UAAD;KACE,MAAK;KACL,aAAU;KACV,iBAAe;KACf,SAAS;KACT,WAAW,GACT,wDACA,2CACA,WACA,cACF;KAEC,UAAA,WAAW,gBAAgB;IACtB,CAAA,IACN;GACD;EAEJ,CAAA,GAAA,YAAY,KAAK,SAChB,oBAAC,MAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA,OAAO,QAAQ,KAAK,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WACtC,qBAAC,OAAD;IAAe,WAAU;IAAzB,UAAA,CACE,oBAAC,MAAD;KAAI,WAAU;KAAyB,UAAA;IAAQ,CAAA,GAC/C,oBAAC,MAAD;KAAI,WAAU;KACX,UAAA,OAAO,UAAU,WAAW,QAAQ,KAAK,UAAU,KAAK;IACvD,CAAA,CACD;GALK,GAAA,GAKL,CACN;EACC,CAAA,IACF,IACD;;AAET;AAgBA,SAAgB,iBAAiB,EAC/B,WACA,OACA,eACA,OACA,eACA,QACA,eACA,QACA,iBAAiB,OACjB,SACA,OACA,GAAG,SACqB;CACxB,MAAM,WAAW,MAAM;CACvB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;EAHN,UAAA;GAKE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,SAAD;MAAO,SAAS;MAAU,WAAU;MAAU,UAAA;KAEvC,CAAA;KACP,oBAAC,SAAD;MACE,IAAI;MACJ,MAAK;MACL,OAAO;MACP,aAAa,QAAQ,aAAa;MAClC,gBAAc,kBAAkB,KAAA;MAChC,oBAAkB,iBAAiB,UAAU,KAAA;MAC7C,WAAW,UAAU;OACnB,cAAc,MAAM,OAAO,KAAK;MAClC;MACA,WAAW,GACT,kFACA,kBAAkB,sBAClB,SACF;KACD,CAAA;KACD,qBAAC,SAAD;MAAO,WAAU;MAAjB,UAAA,CACE,oBAAC,SAAD;OACE,MAAK;OACL,SAAS;OACT,WAAW,UAAU;QACnB,cAAc,MAAM,OAAO,OAAO;OACpC;OACA,WAAW,GAAG,iCAAiC,SAAS;MACzD,CAAA,GAAC,OAEG;;IACJ;;GAEL,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,WAAW,QAAQ,UAAU,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,UAAU;KAC9D,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO,IAAI,KAAK;KAChD,OACE,qBAAC,UAAD;MAEE,MAAK;MACL,aAAU;MACV,gBAAc;MACd,eAAe;OACb,cAAc,KAAK;MACrB;MACA,WAAW,GACT,kFACA,KACI,8DACA,iEACJ,SACF;MAdF,UAAA;OAgBG;OAAM;OAAE,OAAO,IAAI,KAAK,KAAK;MACxB;KAhBD,GAAA,KAgBC;IAEZ,CAAC;GACE,CAAA;GAEL,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA,iBAGC,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAU;KAAmB,UAAA;IAE1C,CAAA,IAEN,GAAG,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,EAAE;GAExC,CAAA;EACA;;AAET"}
+{"version":3,"file":"log-viewer.js","names":[],"sources":["../../../src/components/log-viewer/log-viewer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { LOG_LEVELS, segment, type LogLevel, type VisibleLine } from \"./log-stream\";\n\n/**\n * A streaming console: filter, follow, expand.\n *\n * The incumbent is react-lazylog, which was last published in 2022, is built on\n * react-virtualized, and cannot run on React 19 — while still taking about\n * 15,000 downloads a week. This is for those people.\n *\n * Two accessibility decisions worth stating rather than discovering.\n *\n * `role=\"log\"` implies `aria-live=\"polite\"`, which is right for a handful of\n * events and catastrophic for a console: a screen reader would read every line\n * of a build as it scrolls past, and nothing else would be audible. Announcing\n * is therefore off by default and opt-in through `announce`. The role stays,\n * because it still describes what the region is.\n *\n * And virtualization means most rows are not in the DOM. That is a real trade,\n * not an implementation detail: assistive technology cannot reach what is not\n * rendered, so a reader who needs the whole log needs an escape — which is what\n * `onDownload` is for. A log viewer with no way out of the virtual window is\n * not accessible however good its ARIA is.\n */\n\nconst LEVEL_STYLES: Record<LogLevel, string> = {\n  trace: \"text-muted-foreground\",\n  debug: \"text-muted-foreground\",\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  fatal: \"text-destructive font-semibold\",\n};\n\n/** Distance from the bottom, in pixels, that still counts as \"at the end\". */\nconst FOLLOW_THRESHOLD = 24;\n\nexport interface LogViewerProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  lines: VisibleLine[];\n  /** Names the region. */\n  label: string;\n  /** Row height in pixels. Rows are one line; expansion is measured. */\n  rowHeight?: number;\n  height?: number | string;\n  /**\n   * Read new lines aloud. Off by default — a console that announces every line\n   * makes a screen reader useless for anything else.\n   */\n  announce?: boolean;\n  /** The way out of the virtual window, for anyone who needs the whole log. */\n  onDownload?: () => void;\n  children?: ReactNode;\n}\n\nexport function LogViewer({\n  className,\n  lines,\n  label,\n  rowHeight = 22,\n  height = 360,\n  announce = false,\n  onDownload,\n  children,\n  ...props\n}: LogViewerProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [following, setFollowing] = useState(true);\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const labelId = useId();\n\n  const virtualizer = useVirtualizer({\n    count: lines.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 12,\n    // Without a starting rect the virtualizer renders nothing until a\n    // ResizeObserver fires, so the first paint is an empty box. Seeding it from\n    // the declared height means rows are there immediately, and it is measured\n    // properly a moment later.\n    initialRect: { width: 0, height: typeof height === \"number\" ? height : 360 },\n  });\n\n  // Follow mode, hand-written rather than delegated. A spring-anchoring library\n  // wants to own the scroll container and so does the virtualizer, and the two\n  // fight; this is scrollToIndex on append plus a proximity check.\n  useEffect(() => {\n    if (!following || lines.length === 0) return;\n    virtualizer.scrollToIndex(lines.length - 1, { align: \"end\" });\n  }, [following, lines.length, virtualizer]);\n\n  function handleScroll() {\n    const element = scrollRef.current;\n    if (!element) return;\n\n    const distance = element.scrollHeight - element.scrollTop - element.clientHeight;\n    // Scrolling up detaches, because the reader is looking at something and\n    // yanking them back to the tail would lose it. Returning to the bottom\n    // re-attaches, which is the gesture people already expect.\n    setFollowing(distance <= FOLLOW_THRESHOLD);\n  }\n\n  function toggleExpanded(id: string) {\n    setExpanded((current) => {\n      const next = new Set(current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  }\n\n  const items = virtualizer.getVirtualItems();\n\n  return (\n    <div data-slot=\"log-viewer\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <span id={labelId} className=\"text-sm font-medium\">\n          {label}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          {!following ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-jump\"\n              onClick={() => {\n                setFollowing(true);\n              }}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Jump to latest\n            </button>\n          ) : (\n            <span className=\"text-xs text-muted-foreground\">Following</span>\n          )}\n          {onDownload ? (\n            <button\n              type=\"button\"\n              data-slot=\"log-viewer-download\"\n              onClick={onDownload}\n              className={cn(\n                \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n                \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              Download full log\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      {children}\n\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        role=\"log\"\n        aria-labelledby={labelId}\n        // Explicitly off unless asked for: role=\"log\" implies polite, and a\n        // console that reads every line aloud drowns out everything else.\n        aria-live={announce ? \"polite\" : \"off\"}\n        // A scrollable region must be focusable, or its content is unreachable\n        // without a pointer — WCAG 2.1.1, and axe's scrollable-region-focusable\n        // requires exactly this. jsx-a11y's heuristic cannot see that this\n        // element scrolls, so here the requirement outranks the rule.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        style={{ height }}\n        className={cn(\n          \"overflow-auto rounded-lg border border-border bg-muted/30 font-mono text-xs\",\n          focusRing,\n        )}\n      >\n        {lines.length === 0 ? (\n          <p className=\"p-3 text-muted-foreground\">No lines match the current filter.</p>\n        ) : (\n          <div style={{ height: virtualizer.getTotalSize(), position: \"relative\" }}>\n            {items.map((item) => {\n              const line = lines[item.index];\n              if (!line) return null;\n\n              return (\n                <div\n                  key={line.id}\n                  ref={virtualizer.measureElement}\n                  data-index={item.index}\n                  data-slot=\"log-viewer-row\"\n                  data-level={line.level}\n                  className=\"absolute start-0 top-0 w-full\"\n                  style={{ transform: `translateY(${String(item.start)}px)` }}\n                >\n                  <LogViewerRow\n                    line={line}\n                    expanded={expanded.has(line.id)}\n                    onToggle={() => {\n                      toggleExpanded(line.id);\n                    }}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface LogViewerRowProps {\n  line: VisibleLine;\n  expanded?: boolean;\n  onToggle?: () => void;\n}\n\n/**\n * One line.\n *\n * Exported because the virtualized container cannot be measured outside a real\n * browser — jsdom reports every box as zero — so the row's behaviour would\n * otherwise be untestable. It is also genuinely useful on its own for anyone\n * rendering a short log without virtualization.\n */\nexport function LogViewerRow({ line, expanded = false, onToggle }: LogViewerRowProps) {\n  const hasFields = line.fields !== undefined && Object.keys(line.fields).length > 0;\n  const parts = segment(line.message, line.matches);\n\n  return (\n    <div className=\"px-3 py-0.5 hover:bg-accent/40\">\n      <div className=\"flex items-baseline gap-2\">\n        {line.timestamp ? (\n          <time className=\"shrink-0 text-muted-foreground tabular-nums\">{line.timestamp}</time>\n        ) : null}\n\n        {line.level ? (\n          // The level in text, not a coloured bar. Colour alone cannot\n          // distinguish warn from error for everyone reading.\n          <span className={cn(\"w-11 shrink-0 uppercase\", LEVEL_STYLES[line.level])}>\n            {line.level}\n          </span>\n        ) : null}\n\n        <span\n          className={cn(\n            \"min-w-0 flex-1 break-all whitespace-pre-wrap\",\n            line.level && LEVEL_STYLES[line.level],\n          )}\n        >\n          {parts.map((part, index) =>\n            part.match ? (\n              // A mark element, so the match is conveyed structurally rather\n              // than only as a background colour.\n              <mark key={index} className=\"rounded-[2px] bg-warning/35 text-inherit\">\n                {part.text}\n              </mark>\n            ) : (\n              <span key={index}>{part.text}</span>\n            ),\n          )}\n        </span>\n\n        {hasFields ? (\n          <button\n            type=\"button\"\n            data-slot=\"log-viewer-expand\"\n            aria-expanded={expanded}\n            onClick={onToggle}\n            className={cn(\n              \"shrink-0 rounded px-1 text-2xs text-muted-foreground\",\n              \"transition-colors hover:text-foreground\",\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            {expanded ? \"Hide fields\" : \"Fields\"}\n          </button>\n        ) : null}\n      </div>\n\n      {expanded && line.fields ? (\n        <dl\n          data-slot=\"log-viewer-fields\"\n          className=\"ms-4 mt-1 mb-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-s border-border ps-3\"\n        >\n          {Object.entries(line.fields).map(([key, value]) => (\n            <div key={key} className=\"contents\">\n              <dt className=\"text-muted-foreground\">{key}</dt>\n              <dd className=\"m-0 break-all\">\n                {typeof value === \"string\" ? value : JSON.stringify(value)}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface LogViewerToolbarProps extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  query: string;\n  onQueryChange: (query: string) => void;\n  regex: boolean;\n  onRegexChange: (regex: boolean) => void;\n  levels: Set<LogLevel>;\n  onToggleLevel: (level: LogLevel) => void;\n  counts: Map<LogLevel, number>;\n  invalidPattern?: boolean;\n  /** Shown as \"N of M lines\". */\n  showing: number;\n  total: number;\n}\n\nexport function LogViewerToolbar({\n  className,\n  query,\n  onQueryChange,\n  regex,\n  onRegexChange,\n  levels,\n  onToggleLevel,\n  counts,\n  invalidPattern = false,\n  showing,\n  total,\n  ...props\n}: LogViewerToolbarProps) {\n  const filterId = useId();\n  const errorId = useId();\n\n  return (\n    <div\n      data-slot=\"log-viewer-toolbar\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <label htmlFor={filterId} className=\"sr-only\">\n          Filter log\n        </label>\n        <input\n          id={filterId}\n          type=\"search\"\n          value={query}\n          placeholder={regex ? \"Pattern…\" : \"Filter…\"}\n          aria-invalid={invalidPattern || undefined}\n          aria-describedby={invalidPattern ? errorId : undefined}\n          onChange={(event) => {\n            onQueryChange(event.target.value);\n          }}\n          className={cn(\n            \"min-w-32 flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm\",\n            invalidPattern && \"border-destructive\",\n            focusRing,\n          )}\n        />\n        <label className=\"flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n          <input\n            type=\"checkbox\"\n            checked={regex}\n            onChange={(event) => {\n              onRegexChange(event.target.checked);\n            }}\n            className={cn(\"size-3.5 rounded border-input\", focusRing)}\n          />\n          Regex\n        </label>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-1\">\n        {LOG_LEVELS.filter((level) => counts.has(level)).map((level) => {\n          const on = levels.size === 0 || levels.has(level);\n          return (\n            <button\n              key={level}\n              type=\"button\"\n              data-slot=\"log-viewer-facet\"\n              aria-pressed={on}\n              onClick={() => {\n                onToggleLevel(level);\n              }}\n              className={cn(\n                \"rounded-md border px-1.5 py-0.5 font-mono text-2xs uppercase transition-colors\",\n                on\n                  ? \"border-transparent bg-secondary text-secondary-foreground\"\n                  : \"border-input bg-background text-muted-foreground line-through\",\n                focusRing,\n              )}\n            >\n              {level} {counts.get(level) ?? 0}\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"w-full text-xs text-muted-foreground tabular-nums\">\n        {invalidPattern ? (\n          // Said out loud rather than shown as an empty log, which reads as\n          // \"nothing matched\" and sends the reader looking for the wrong thing.\n          <span id={errorId} className=\"text-destructive\">\n            Incomplete pattern — showing everything until it is valid\n          </span>\n        ) : (\n          `${String(showing)} of ${String(total)} lines`\n        )}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/magnetic-button/index.d.ts

@@ -0,0 +1,2 @@
+import { MagneticButton, MagneticButtonProps } from "./magnetic-button.js";
+export { MagneticButton, type MagneticButtonProps };

package/dist/components/magnetic-button/index.js

@@ -0,0 +1,2 @@
+import { MagneticButton } from "./magnetic-button.js";
+export { MagneticButton };

package/dist/components/magnetic-button/magnetic-button.d.ts

@@ -0,0 +1,32 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+//#region src/components/magnetic-button/magnetic-button.d.ts
+interface MagneticButtonProps extends ButtonProps {
+  /**
+   * How far the button drifts toward the pointer, as a fraction of the
+   * pointer's distance from its centre. 0 turns the effect off.
+   */
+  strength?: number;
+  /**
+   * The content's total pull, for a layered effect. Set it above `strength`
+   * and the label leans further than the button around it. Ignored with
+   * `asChild`, whose single child cannot be wrapped.
+   */
+  contentStrength?: number;
+  /**
+   * How far beyond its edges, in pixels, the button starts to feel the
+   * pointer. The pull fades to nothing at this distance. 0 (the default) keeps
+   * the effect within the button's own bounds.
+   */
+  radius?: number;
+}
+/**
+ * A button that drifts toward the pointer and springs back when it leaves.
+ *
+ * Purely decorative: it never moves for touch, coarse pointers, or users who
+ * prefer reduced motion, and a disabled or loading button stays put.
+ */
+declare function MagneticButton({ className, strength, contentStrength, radius, asChild, disabled, loading, children, ref, onPointerMove, onPointerLeave, ...props }: MagneticButtonProps): import("react").JSX.Element;
+//#endregion
+export { MagneticButton, MagneticButtonProps };
+//# sourceMappingURL=magnetic-button.d.ts.map

package/dist/components/magnetic-button/magnetic-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-button.d.ts","names":[],"sources":["../../../src/components/magnetic-button/magnetic-button.tsx"],"mappings":";;;UAsDiB,4BAA4B;;;;;EAK3C;;;;;;EAMA;;;;;;EAMA;;;;;;;;iBASc,iBACd,WACA,UACA,iBACA,QACA,SACA,UACA,SACA,UACA,KACA,eACA,mBACG,SACF,sCAAmB,IAAA"}