@playfast/reform-better-hub-ui-primitives 0.0.5 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-# `@playfast/better-hub-ui-primitives`
+# `@playfast/reform-better-hub-ui-primitives`
 
 **React UI primitives — buttons, badges, dialogs, inputs, popovers, a command palette, and friends — adapted from better-hub by Better Auth.**
 
@@ -36,7 +36,7 @@ Docs: [playbook/api.doc.md](./playbook/api.doc.md).
 ## Install
 
 ```sh
-bun add @playfast/better-hub-ui-primitives
+bun add @playfast/reform-better-hub-ui-primitives
 # peers: react, react-dom (^19)
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-better-hub-ui-primitives",
   "playbook": "./playbook",
-  "version": "0.0.5",
+  "version": "0.2.1",
   "type": "module",
   "description": "React UI primitives adapted from better-hub by Better Auth (https://github.com/better-auth/better-hub). Full credit to the Better Auth team.",
   "keywords": [
@@ -29,7 +29,7 @@
   ],
   "exports": {
     "./package.json": "./package.json",
-    ".": "./src/index.tsx",
+    ".": "./src/index.ts",
     "./styles.css": "./src/foundation/styles.css",
     "./*": "./src/*.tsx"
   },

package/src/components/agent-icon.tsx

@@ -3,7 +3,11 @@
 
 import type * as React from "react";
 
-export function AgentIcon({ className }: { className?: string }): React.JSX.Element {
+interface AgentIconPropsExternalApi {
+	className?: string;
+}
+
+export function AgentIcon({ className }: AgentIconPropsExternalApi): React.JSX.Element {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

package/src/components/badge.tsx

@@ -7,13 +7,15 @@ import { Slot } from "radix-ui";
 
 import { cn } from "../foundation/cn";
 
-const badgeVariants: (
+type BadgeVariantsExternalApi = (
 	props?:
 		| ({
-				variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+				variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
 		  } & ClassProp)
 		| undefined,
-) => string = cva(
+) => string;
+
+const badgeVariants: BadgeVariantsExternalApi = cva(
 	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
 	{
 		variants: {
@@ -33,12 +35,15 @@ const badgeVariants: (
 	},
 );
 
+type BadgePropsExternalApi = React.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean };
+
 function Badge({
 	className,
 	variant = "default",
 	asChild = false,
 	...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }): React.JSX.Element {
+}: BadgePropsExternalApi): React.JSX.Element {
 	const Comp = asChild ? Slot.Root : "span";
 
 	return (

package/src/components/button.tsx

@@ -7,7 +7,7 @@ import type { ClassProp } from "class-variance-authority/types";
 import type * as React from "react";
 import { cn } from "../foundation/cn";
 
-const buttonVariants: (
+type ButtonVariantsExternalApi = (
 	props?:
 		| ({
 				variant?:
@@ -17,12 +17,13 @@ const buttonVariants: (
 					| "secondary"
 					| "ghost"
 					| "link"
-					| null
 					| undefined;
-				size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+				size?: "default" | "sm" | "lg" | "icon" | undefined;
 		  } & ClassProp)
 		| undefined,
-) => string = cva(
+) => string;
+
+const buttonVariants: ButtonVariantsExternalApi = cva(
 	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 	{
 		variants: {
@@ -49,16 +50,18 @@ const buttonVariants: (
 	},
 );
 
+type ButtonPropsExternalApi = React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	};
+
 function Button({
 	className,
 	variant,
 	size,
 	asChild = false,
 	...props
-}: React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}): React.JSX.Element {
+}: ButtonPropsExternalApi): React.JSX.Element {
 	const Comp = asChild ? Slot : "button";
 	return (
 		<Comp

package/src/components/combobox.tsx

@@ -49,6 +49,11 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props):
 	)
 }
 
+type ComboboxInputPropsExternalApi = ComboboxPrimitive.Input.Props & {
+	showTrigger?: boolean
+	showClear?: boolean
+}
+
 function ComboboxInput({
 	className,
 	children,
@@ -56,10 +61,7 @@ function ComboboxInput({
 	showTrigger = true,
 	showClear = false,
 	...props
-}: ComboboxPrimitive.Input.Props & {
-	showTrigger?: boolean
-	showClear?: boolean
-}): React.JSX.Element {
+}: ComboboxInputPropsExternalApi): React.JSX.Element {
 	return (
 		<InputGroup className={cn('w-auto', className)}>
 			<ComboboxPrimitive.Input
@@ -225,14 +227,16 @@ function ComboboxChips({
 	)
 }
 
+type ComboboxChipPropsExternalApi = ComboboxPrimitive.Chip.Props & {
+	showRemove?: boolean
+}
+
 function ComboboxChip({
 	className,
 	children,
 	showRemove = true,
 	...props
-}: ComboboxPrimitive.Chip.Props & {
-	showRemove?: boolean
-}): React.JSX.Element {
+}: ComboboxChipPropsExternalApi): React.JSX.Element {
 	return (
 		<ComboboxPrimitive.Chip
 			data-slot="combobox-chip"
@@ -266,8 +270,10 @@ function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive
 	)
 }
 
-function useComboboxAnchor(): React.RefObject<HTMLDivElement | null> {
-	return React.useRef<HTMLDivElement | null>(null)
+type ComboboxAnchorElementExternalApi = HTMLDivElement | null
+
+function useComboboxAnchor(): React.RefObject<ComboboxAnchorElementExternalApi> {
+	return React.useRef<ComboboxAnchorElementExternalApi>(null)
 }
 
 export {

package/src/components/command.tsx

@@ -26,6 +26,13 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
 	);
 }
 
+type CommandDialogPropsExternalApi = React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+};
+
 function CommandDialog({
 	title = "Command Palette",
 	description = "Search for a command to run...",
@@ -33,12 +40,7 @@ function CommandDialog({
 	className,
 	showCloseButton = true,
 	...props
-}: React.ComponentProps<typeof Dialog> & {
-	title?: string;
-	description?: string;
-	className?: string;
-	showCloseButton?: boolean;
-}): React.JSX.Element {
+}: CommandDialogPropsExternalApi): React.JSX.Element {
 	return (
 		<Dialog {...props}>
 			<DialogContent

package/src/components/dialog.tsx

@@ -38,14 +38,16 @@ function DialogOverlay({
 	);
 }
 
+type DialogContentPropsExternalApi = React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+};
+
 function DialogContent({
 	className,
 	children,
 	showCloseButton = true,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-	showCloseButton?: boolean;
-}): React.JSX.Element {
+}: DialogContentPropsExternalApi): React.JSX.Element {
 	return (
 		<DialogPortal>
 			<DialogOverlay />

package/src/components/dropdown-menu.tsx

@@ -46,13 +46,15 @@ function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMen
 	return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
+type DropdownMenuItemPropsExternalApi = React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+};
+
 function DropdownMenuItem({
 	className,
 	inset,
 	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-	inset?: boolean;
-}): React.JSX.Element {
+}: DropdownMenuItemPropsExternalApi): React.JSX.Element {
 	return (
 		<DropdownMenuPrimitive.Item
 			data-slot="dropdown-menu-item"
@@ -90,13 +92,15 @@ function DropdownMenuCheckboxItem({
 	);
 }
 
+type DropdownMenuLabelPropsExternalApi = React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+};
+
 function DropdownMenuLabel({
 	className,
 	inset,
 	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-	inset?: boolean;
-}): React.JSX.Element {
+}: DropdownMenuLabelPropsExternalApi): React.JSX.Element {
 	return (
 		<DropdownMenuPrimitive.Label
 			data-slot="dropdown-menu-label"

package/src/components/github-background.tsx

@@ -4,13 +4,16 @@
 import type * as React from "react";
 import { useMemo } from "react";
 
-function createRng(seed: number) {
-	let s = seed;
-	return () => {
-		s = (s * 16807) % 2147483647;
-		return (s - 1) / 2147483646;
-	};
-}
+const RNG_MULTIPLIER = 16807;
+const RNG_MODULUS = 2147483647;
+const RNG_DIVISOR = 2147483646;
+const RNG_SEED = 42;
+const WEEKS = 52;
+const DAYS_PER_WEEK = 7;
+const CELL = 15;
+const CELL_RECT_SIZE = 12;
+const CELL_ANIM_WEEK_DELAY = 0.04;
+const CELL_ANIM_DAY_DELAY = 0.015;
 
 const LEVELS = [
 	"rgba(255,255,255,0.02)",
@@ -20,22 +23,81 @@ const LEVELS = [
 	"rgba(255,255,255,0.40)",
 ];
 
-const CELL = 15;
+const LEVEL_THRESHOLDS = [0.3, 0.5, 0.7, 0.85];
+
+const COMMIT_GROUPS = [
+	{
+		prefix: "m",
+		cx: 200,
+		radius: 4,
+		fill: "rgba(255,255,255,0.25)",
+		ys: [80, 150, 230, 300, 400, 480, 550, 620, 690, 770, 850],
+		animBase: 0.5,
+		animStep: 0.15,
+	},
+	{
+		prefix: "f1",
+		cx: 280,
+		radius: 3.5,
+		fill: "rgba(255,255,255,0.20)",
+		ys: [230, 280, 330],
+		animBase: 1.0,
+		animStep: 0.2,
+	},
+	{
+		prefix: "f2",
+		cx: 130,
+		radius: 3.5,
+		fill: "rgba(255,255,255,0.18)",
+		ys: [360, 420, 470],
+		animBase: 1.5,
+		animStep: 0.2,
+	},
+	{
+		prefix: "hf",
+		cx: 260,
+		radius: 3,
+		fill: "rgba(255,255,255,0.15)",
+		ys: [600, 630, 660],
+		animBase: 2.0,
+		animStep: 0.2,
+	},
+	{
+		prefix: "f3",
+		cx: 110,
+		radius: 3,
+		fill: "rgba(255,255,255,0.12)",
+		ys: [680, 730, 780],
+		animBase: 2.4,
+		animStep: 0.2,
+	},
+];
+
+const nextSeed = (seed: number) => (seed * RNG_MULTIPLIER) % RNG_MODULUS;
+const seedToUnit = (seed: number) => (seed - 1) / RNG_DIVISOR;
+const levelForValue = (sample: number) =>
+	LEVEL_THRESHOLDS.filter((threshold) => sample >= threshold).length;
+
+type Cell = { week: number; day: number; level: number };
 
 export function GitHubBackground(): React.JSX.Element {
-	const grid = useMemo(() => {
-		const rng = createRng(42);
-		const cells: { w: number; d: number; level: number }[] = [];
-		for (let w = 0; w < 52; w++) {
-			for (let d = 0; d < 7; d++) {
-				const r = rng();
-				const level =
-					r < 0.3 ? 0 : r < 0.5 ? 1 : r < 0.7 ? 2 : r < 0.85 ? 3 : 4;
-				cells.push({ w, d, level });
-			}
-		}
-		return cells;
-	}, []);
+	const grid = useMemo<Cell[]>(
+		() =>
+			Array.from({ length: WEEKS * DAYS_PER_WEEK }).reduce<{
+				seed: number;
+				cells: Cell[];
+			}>(
+				(acc, _slot, flatIndex) => {
+					const seed = nextSeed(acc.seed);
+					const level = levelForValue(seedToUnit(seed));
+					const week = Math.floor(flatIndex / DAYS_PER_WEEK);
+					const day = flatIndex % DAYS_PER_WEEK;
+					return { seed, cells: [...acc.cells, { week, day, level }] };
+				},
+				{ seed: RNG_SEED, cells: [] },
+			).cells,
+		[],
+	);
 
 	return (
 		<div
@@ -63,19 +125,19 @@ export function GitHubBackground(): React.JSX.Element {
 					}}
 				>
 					<svg
-						width={52 * CELL}
-						height={7 * CELL}
-						viewBox={`0 0 ${52 * CELL} ${7 * CELL}`}
+						width={WEEKS * CELL}
+						height={DAYS_PER_WEEK * CELL}
+						viewBox={`0 0 ${WEEKS * CELL} ${DAYS_PER_WEEK * CELL}`}
 					>
-						{grid.map(({ w, d, level }, i) => (
+						{grid.map((cell, index) => (
 							<rect
-								key={i}
-								x={w * CELL}
-								y={d * CELL}
-								width={12}
-								height={12}
+								key={index}
+								x={cell.week * CELL}
+								y={cell.day * CELL}
+								width={CELL_RECT_SIZE}
+								height={CELL_RECT_SIZE}
 								rx={2}
-								fill={LEVELS[level]}
+								fill={LEVELS[cell.level]}
 								opacity={0}
 							>
 								<animate
@@ -83,7 +145,7 @@ export function GitHubBackground(): React.JSX.Element {
 									from="0"
 									to="1"
 									dur="0.5s"
-									begin={`${w * 0.04 + d * 0.015}s`}
+									begin={`${cell.week * CELL_ANIM_WEEK_DELAY + cell.day * CELL_ANIM_DAY_DELAY}s`}
 									fill="freeze"
 								/>
 							</rect>
@@ -155,15 +217,15 @@ export function GitHubBackground(): React.JSX.Element {
 						style={{ animationDelay: "2.2s" }}
 					/>
 
-					{/* Commit nodes — main branch */}
-					{[80, 150, 230, 300, 400, 480, 550, 620, 690, 770, 850].map(
-						(y, i) => (
+					{/* Commit nodes */}
+					{COMMIT_GROUPS.map((group) =>
+						group.ys.map((nodeY, index) => (
 							<circle
-								key={`m${i}`}
-								cx={200}
-								cy={y}
-								r={4}
-								fill="rgba(255,255,255,0.25)"
+								key={`${group.prefix}${index}`}
+								cx={group.cx}
+								cy={nodeY}
+								r={group.radius}
+								fill={group.fill}
 								opacity={0}
 							>
 								<animate
@@ -171,96 +233,12 @@ export function GitHubBackground(): React.JSX.Element {
 									from="0"
 									to="1"
 									dur="0.3s"
-									begin={`${0.5 + i * 0.15}s`}
+									begin={`${group.animBase + index * group.animStep}s`}
 									fill="freeze"
 								/>
 							</circle>
-						),
+						)),
 					)}
-
-					{/* Commit nodes — feature 1 */}
-					{[230, 280, 330].map((y, i) => (
-						<circle
-							key={`f1${i}`}
-							cx={280}
-							cy={y}
-							r={3.5}
-							fill="rgba(255,255,255,0.20)"
-							opacity={0}
-						>
-							<animate
-								attributeName="opacity"
-								from="0"
-								to="1"
-								dur="0.3s"
-								begin={`${1.0 + i * 0.2}s`}
-								fill="freeze"
-							/>
-						</circle>
-					))}
-
-					{/* Commit nodes — feature 2 */}
-					{[360, 420, 470].map((y, i) => (
-						<circle
-							key={`f2${i}`}
-							cx={130}
-							cy={y}
-							r={3.5}
-							fill="rgba(255,255,255,0.18)"
-							opacity={0}
-						>
-							<animate
-								attributeName="opacity"
-								from="0"
-								to="1"
-								dur="0.3s"
-								begin={`${1.5 + i * 0.2}s`}
-								fill="freeze"
-							/>
-						</circle>
-					))}
-
-					{/* Commit nodes — hotfix */}
-					{[600, 630, 660].map((y, i) => (
-						<circle
-							key={`hf${i}`}
-							cx={260}
-							cy={y}
-							r={3}
-							fill="rgba(255,255,255,0.15)"
-							opacity={0}
-						>
-							<animate
-								attributeName="opacity"
-								from="0"
-								to="1"
-								dur="0.3s"
-								begin={`${2.0 + i * 0.2}s`}
-								fill="freeze"
-							/>
-						</circle>
-					))}
-
-					{/* Commit nodes — feature 3 */}
-					{[680, 730, 780].map((y, i) => (
-						<circle
-							key={`f3${i}`}
-							cx={110}
-							cy={y}
-							r={3}
-							fill="rgba(255,255,255,0.12)"
-							opacity={0}
-						>
-							<animate
-								attributeName="opacity"
-								from="0"
-								to="1"
-								dur="0.3s"
-								begin={`${2.4 + i * 0.2}s`}
-								fill="freeze"
-							/>
-						</circle>
-					))}
 				</svg>
 			</div>
 

package/src/components/halftone-background.tsx

@@ -143,6 +143,15 @@ void main() {
   gl_FragColor = vec4(vec3(col), 1.0);
 }`;
 
+const RENDER_SCALE = 0.5;
+const MS_PER_SECOND = 1000;
+const MOUSE_LERP = 0.08;
+const MOUSE_LERP_IDLE = 0.02;
+const CLICK_DECAY = 0.96;
+const FULLSCREEN_VERTEX_COUNT = 6;
+
+type ShaderSpec = { readonly type: number; readonly source: string };
+
 export function HalftoneBackground(): React.JSX.Element {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const wrapperRef = useRef<HTMLDivElement>(null);
@@ -154,66 +163,76 @@ export function HalftoneBackground(): React.JSX.Element {
 	useEffect(() => {
 		const canvas = canvasRef.current;
 		const wrapper = wrapperRef.current;
-		if (!canvas || !wrapper) return;
+		if (!canvas || !wrapper) {
+			return;
+		}
 
-		const gl = canvas.getContext("webgl", {
+		const glContext = canvas.getContext("webgl", {
 			alpha: false,
 			antialias: false,
 			preserveDrawingBuffer: false,
 		});
-		if (!gl) return;
+		if (!glContext) {
+			return;
+		}
 
-		function createShader(type: number, source: string) {
-			const shader = gl!.createShader(type)!;
-			gl!.shaderSource(shader, source);
-			gl!.compileShader(shader);
+		const createShader = ({ type, source }: ShaderSpec) => {
+			const shader = glContext!.createShader(type)!;
+			glContext!.shaderSource(shader, source);
+			glContext!.compileShader(shader);
 			return shader;
-		}
+		};
 
-		const vs = createShader(gl.VERTEX_SHADER, VERTEX_SHADER);
-		const fs = createShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+		const vertexShader = createShader({
+			type: glContext.VERTEX_SHADER,
+			source: VERTEX_SHADER,
+		});
+		const fragmentShader = createShader({
+			type: glContext.FRAGMENT_SHADER,
+			source: FRAGMENT_SHADER,
+		});
 
-		const program = gl.createProgram()!;
-		gl.attachShader(program, vs);
-		gl.attachShader(program, fs);
-		gl.linkProgram(program);
-		gl.useProgram(program);
+		const program = glContext.createProgram()!;
+		glContext.attachShader(program, vertexShader);
+		glContext.attachShader(program, fragmentShader);
+		glContext.linkProgram(program);
+		glContext.useProgram(program);
 
-		const buffer = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-		gl.bufferData(
-			gl.ARRAY_BUFFER,
+		const buffer = glContext.createBuffer();
+		glContext.bindBuffer(glContext.ARRAY_BUFFER, buffer);
+		glContext.bufferData(
+			glContext.ARRAY_BUFFER,
 			new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
-			gl.STATIC_DRAW,
+			glContext.STATIC_DRAW,
 		);
 
-		const aPosition = gl.getAttribLocation(program, "a_position");
-		gl.enableVertexAttribArray(aPosition);
-		gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+		const aPosition = glContext.getAttribLocation(program, "a_position");
+		glContext.enableVertexAttribArray(aPosition);
+		glContext.vertexAttribPointer(aPosition, 2, glContext.FLOAT, false, 0, 0);
 
-		const uTime = gl.getUniformLocation(program, "u_time");
-		const uResolution = gl.getUniformLocation(program, "u_resolution");
-		const uMouse = gl.getUniformLocation(program, "u_mouse");
-		const uClick = gl.getUniformLocation(program, "u_click");
-		const uClickPos = gl.getUniformLocation(program, "u_clickPos");
+		const uTime = glContext.getUniformLocation(program, "u_time");
+		const uResolution = glContext.getUniformLocation(program, "u_resolution");
+		const uMouse = glContext.getUniformLocation(program, "u_mouse");
+		const uClick = glContext.getUniformLocation(program, "u_click");
+		const uClickPos = glContext.getUniformLocation(program, "u_clickPos");
 
 		const startTime = performance.now();
 
 		const resize = () => {
 			const dpr = Math.min(window.devicePixelRatio || 1, 2);
-			const scale = 0.5 * dpr;
+			const scale = RENDER_SCALE * dpr;
 			canvas.width = canvas.offsetWidth * scale;
 			canvas.height = canvas.offsetHeight * scale;
-			gl.viewport(0, 0, canvas.width, canvas.height);
+			glContext.viewport(0, 0, canvas.width, canvas.height);
 		};
 
 		resize();
 		window.addEventListener("resize", resize);
 
-		const onMouseMove = (e: MouseEvent) => {
+		const onMouseMove = (event: MouseEvent) => {
 			const rect = wrapper.getBoundingClientRect();
-			mouseRef.current.x = (e.clientX - rect.left) / rect.width;
-			mouseRef.current.y = 1.0 - (e.clientY - rect.top) / rect.height;
+			mouseRef.current.x = (event.clientX - rect.left) / rect.width;
+			mouseRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height;
 		};
 
 		const onMouseLeave = () => {
@@ -221,10 +240,10 @@ export function HalftoneBackground(): React.JSX.Element {
 			mouseRef.current.y = -1;
 		};
 
-		const onClick = (e: MouseEvent) => {
+		const onClick = (event: MouseEvent) => {
 			const rect = wrapper.getBoundingClientRect();
-			clickRef.current.x = (e.clientX - rect.left) / rect.width;
-			clickRef.current.y = 1.0 - (e.clientY - rect.top) / rect.height;
+			clickRef.current.x = (event.clientX - rect.left) / rect.width;
+			clickRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height;
 			clickRef.current.strength = 1.0;
 		};
 
@@ -233,27 +252,26 @@ export function HalftoneBackground(): React.JSX.Element {
 		wrapper.addEventListener("click", onClick);
 
 		const draw = () => {
-			const elapsed = (performance.now() - startTime) / 1000;
+			const elapsed = (performance.now() - startTime) / MS_PER_SECOND;
 
-			const lerp = 0.08;
 			const target = mouseRef.current;
 			const smooth = smoothMouseRef.current;
 			if (target.x < 0) {
-				smooth.x += (target.x - smooth.x) * 0.02;
-				smooth.y += (target.y - smooth.y) * 0.02;
+				smooth.x += (target.x - smooth.x) * MOUSE_LERP_IDLE;
+				smooth.y += (target.y - smooth.y) * MOUSE_LERP_IDLE;
 			} else {
-				smooth.x += (target.x - smooth.x) * lerp;
-				smooth.y += (target.y - smooth.y) * lerp;
+				smooth.x += (target.x - smooth.x) * MOUSE_LERP;
+				smooth.y += (target.y - smooth.y) * MOUSE_LERP;
 			}
 
-			clickRef.current.strength *= 0.96;
+			clickRef.current.strength *= CLICK_DECAY;
 
-			gl.uniform1f(uTime, elapsed);
-			gl.uniform2f(uResolution, canvas.width, canvas.height);
-			gl.uniform2f(uMouse, smooth.x, smooth.y);
-			gl.uniform1f(uClick, clickRef.current.strength);
-			gl.uniform2f(uClickPos, clickRef.current.x, clickRef.current.y);
-			gl.drawArrays(gl.TRIANGLES, 0, 6);
+			glContext.uniform1f(uTime, elapsed);
+			glContext.uniform2f(uResolution, canvas.width, canvas.height);
+			glContext.uniform2f(uMouse, smooth.x, smooth.y);
+			glContext.uniform1f(uClick, clickRef.current.strength);
+			glContext.uniform2f(uClickPos, clickRef.current.x, clickRef.current.y);
+			glContext.drawArrays(glContext.TRIANGLES, 0, FULLSCREEN_VERTEX_COUNT);
 			frameRef.current = requestAnimationFrame(draw);
 		};
 
@@ -265,10 +283,10 @@ export function HalftoneBackground(): React.JSX.Element {
 			window.removeEventListener("mousemove", onMouseMove);
 			wrapper.removeEventListener("mouseleave", onMouseLeave);
 			wrapper.removeEventListener("click", onClick);
-			gl.deleteProgram(program);
-			gl.deleteShader(vs);
-			gl.deleteShader(fs);
-			gl.deleteBuffer(buffer);
+			glContext.deleteProgram(program);
+			glContext.deleteShader(vertexShader);
+			glContext.deleteShader(fragmentShader);
+			glContext.deleteBuffer(buffer);
 		};
 	}, []);
 

package/src/components/input-group.tsx

@@ -39,13 +39,15 @@ function InputGroup({ className, ...props }: ComponentProps<"div">): React.JSX.E
 	);
 }
 
-const inputGroupAddonVariants: (
+type InputGroupAddonVariantsExternalApi = (
 	props?:
 		| ({
-				align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+				align?: "inline-start" | "inline-end" | "block-start" | "block-end" | undefined;
 		  } & ClassProp)
 		| undefined,
-) => string = cva(
+) => string;
+
+const inputGroupAddonVariants: InputGroupAddonVariantsExternalApi = cva(
 	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
 	{
 		variants: {
@@ -77,24 +79,29 @@ function InputGroupAddon({
 			data-slot="input-group-addon"
 			data-align={align}
 			className={cn(inputGroupAddonVariants({ align }), className)}
-			onClick={(e) => {
-				if ((e.target as HTMLElement).closest("button")) {
+			onClick={(event) => {
+				const target = event.target;
+				if (target instanceof HTMLElement && target.closest("button")) {
 					return;
 				}
-				e.currentTarget.parentElement?.querySelector("input")?.focus();
+				event.currentTarget.parentElement?.querySelector("input")?.focus();
 			}}
 			{...props}
 		/>
 	);
 }
 
-const inputGroupButtonVariants: (
+type InputGroupButtonVariantsExternalApi = (
 	props?:
 		| ({
-				size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+				size?: "xs" | "sm" | "icon-xs" | "icon-sm" | undefined;
 		  } & ClassProp)
 		| undefined,
-) => string = cva("flex items-center gap-2 text-sm shadow-none", {
+) => string;
+
+const inputGroupButtonVariants: InputGroupButtonVariantsExternalApi = cva(
+	"flex items-center gap-2 text-sm shadow-none",
+	{
 	variants: {
 		size: {
 			xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",

package/src/components/live-duration.tsx

@@ -1,20 +1,38 @@
 // Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
 // (apps/web/src/components/ui/live-duration.tsx). Full credit to the Better Auth team.
 
+import { DateTime, Option } from "effect";
 import type * as React from "react";
 import { useState, useEffect } from "react";
 
+const MS_PER_SECOND = 1000;
+const SECONDS_PER_HOUR = 3600;
+const SECONDS_PER_MINUTE = 60;
+const TICK_INTERVAL_MS = 1000;
+
+interface FormatDurationInputExternalApi {
+	startedAt: string | null;
+	completedAt: string | null;
+}
+
 // Inlined from "@/lib/utils" (formatDuration) — only this helper is used here.
-function formatDuration(startedAt: string | null, completedAt: string | null): string {
-	if (!startedAt) return "";
-	const start = new Date(startedAt);
-	const end = completedAt ? new Date(completedAt) : new Date();
-	const totalSeconds = Math.max(0, Math.floor((end.getTime() - start.getTime()) / 1000));
-	const hours = Math.floor(totalSeconds / 3600);
-	const minutes = Math.floor((totalSeconds % 3600) / 60);
-	const seconds = totalSeconds % 60;
-	if (hours > 0) return `${hours}h ${minutes}m`;
-	if (minutes > 0) return `${minutes}m ${seconds}s`;
+function formatDuration({ startedAt, completedAt }: FormatDurationInputExternalApi): string {
+	if (!startedAt) {
+		return "";
+	}
+	const start = DateTime.unsafeMake(startedAt);
+	const end = completedAt ? DateTime.unsafeMake(completedAt) : DateTime.unsafeNow();
+	const elapsedMs = DateTime.toEpochMillis(end) - DateTime.toEpochMillis(start);
+	const totalSeconds = Math.max(0, Math.floor(elapsedMs / MS_PER_SECOND));
+	const hours = Math.floor(totalSeconds / SECONDS_PER_HOUR);
+	const minutes = Math.floor((totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
+	const seconds = totalSeconds % SECONDS_PER_MINUTE;
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	if (minutes > 0) {
+		return `${minutes}m ${seconds}s`;
+	}
 	return `${seconds}s`;
 }
 
@@ -22,45 +40,50 @@ function formatDuration(startedAt: string | null, completedAt: string | null): s
 // Shared tick for LiveDuration components. One interval drives all subscribers
 // instead of each component running its own 1s interval.
 const callbacks = new Set<() => void>();
-const tickState: { intervalId: ReturnType<typeof setInterval> | null } = {
-	intervalId: null,
+const tickState: { intervalId: Option.Option<ReturnType<typeof setInterval>> } = {
+	intervalId: Option.none(),
 };
 
 function subscribeLiveTick(callback: () => void): () => void {
 	callbacks.add(callback);
-	if (tickState.intervalId === null) {
-		tickState.intervalId = setInterval(() => {
+	if (Option.isNone(tickState.intervalId)) {
+		// oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: shared render ticker for React, no Effect runtime here
+		tickState.intervalId = Option.some(setInterval(() => {
 			callbacks.forEach((cb) => cb());
-		}, 1000);
+		}, TICK_INTERVAL_MS));
 	}
 	return () => {
 		callbacks.delete(callback);
-		if (callbacks.size === 0 && tickState.intervalId !== null) {
-			clearInterval(tickState.intervalId);
-			tickState.intervalId = null;
+		if (callbacks.size === 0 && Option.isSome(tickState.intervalId)) {
+			clearInterval(tickState.intervalId.value);
+			tickState.intervalId = Option.none();
 		}
 	};
 }
 
-interface LiveDurationProps {
+interface LiveDurationPropsExternalApi {
 	startedAt: string | null;
 	completedAt?: string | null;
 	className?: string;
 }
 
-export function LiveDuration({ startedAt, completedAt, className }: LiveDurationProps): React.ReactNode {
+export function LiveDuration({ startedAt, completedAt, className }: LiveDurationPropsExternalApi): React.ReactNode {
 	// tick forces re-renders when subscribeLiveTick fires; value is unused in render
 	const [, setTick] = useState(0);
 
 	useEffect(() => {
-		if (!startedAt || completedAt != null) return;
+		if (!startedAt || completedAt != null) {
+			return;
+		}
 		setTick(0);
-		return subscribeLiveTick(() => setTick((t) => t + 1));
+		return subscribeLiveTick(() => setTick((prev) => prev + 1));
 	}, [startedAt, completedAt]);
 
-	if (!startedAt) return null;
+	if (!startedAt) {
+		return null;
+	}
 
-	const formatted = formatDuration(startedAt, completedAt ?? null);
+	const formatted = formatDuration({ startedAt, completedAt: completedAt ?? null });
 
 	return (
 		<span className={className} suppressHydrationWarning>

package/src/components/logo.tsx

@@ -3,7 +3,11 @@
 import type * as React from "react";
 import { cn } from '../foundation/cn';
 
-export function Logo({ className }: { className?: string }): React.JSX.Element {
+interface LogoPropsExternalApi {
+	className?: string;
+}
+
+export function Logo({ className }: LogoPropsExternalApi): React.JSX.Element {
 	return (
 		<span className={cn("font-mono text-sm font-medium tracking-tight", className)}>
 			BETTER-HUB.
@@ -11,7 +15,7 @@ export function Logo({ className }: { className?: string }): React.JSX.Element {
 	);
 }
 
-export function LogoMark({ className }: { className?: string }): React.JSX.Element {
+export function LogoMark({ className }: LogoPropsExternalApi): React.JSX.Element {
 	return (
 		<span className={cn("font-mono text-sm font-bold tracking-tight", className)}>
 			b.

package/src/components/resize-handle.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import type { MouseEvent as ReactMouseEvent } from "react";
 import { cn } from "../foundation/cn";
 
-interface ResizeHandleProps {
+interface ResizeHandlePropsExternalApi {
 	/** Called continuously during drag with the pointer position on the resize axis
 	 *  (clientX for `axis: "x"`, clientY for `axis: "y"`). */
 	onResize: (clientPos: number) => void;
@@ -29,13 +29,13 @@ export function ResizeHandle({
 	onDoubleClick,
 	axis = "x",
 	className,
-}: ResizeHandleProps): React.JSX.Element {
+}: ResizeHandlePropsExternalApi): React.JSX.Element {
 	const [isDragging, setIsDragging] = useState(false);
 	const vertical = axis === "y";
 
 	const handleMouseDown = useCallback(
-		(e: ReactMouseEvent) => {
-			e.preventDefault();
+		(event: ReactMouseEvent) => {
+			event.preventDefault();
 			setIsDragging(true);
 			onDragStart?.();
 		},
@@ -43,10 +43,12 @@ export function ResizeHandle({
 	);
 
 	useEffect(() => {
-		if (!isDragging) return;
+		if (!isDragging) {
+			return;
+		}
 
-		const handleMouseMove = (e: MouseEvent) => {
-			onResize(vertical ? e.clientY : e.clientX);
+		const handleMouseMove = (event: MouseEvent) => {
+			onResize(vertical ? event.clientY : event.clientX);
 		};
 
 		const handleMouseUp = () => {

package/src/components/sheet.tsx

@@ -38,7 +38,7 @@ function SheetOverlay({
 	);
 }
 
-interface SheetContentProps extends React.ComponentProps<typeof DialogPrimitive.Content> {
+interface SheetContentPropsExternalApi extends React.ComponentProps<typeof DialogPrimitive.Content> {
 	side?: "left" | "right" | "top" | "bottom";
 	showCloseButton?: boolean;
 }
@@ -49,7 +49,7 @@ function SheetContent({
 	side = "right",
 	showCloseButton = true,
 	...props
-}: SheetContentProps): React.JSX.Element {
+}: SheetContentPropsExternalApi): React.JSX.Element {
 	const sideStyles = {
 		right: "inset-y-0 right-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
 		left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",

package/src/components/time-ago.tsx

@@ -1,53 +1,77 @@
 // Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
 // (apps/web/src/components/ui/time-ago.tsx). Full credit to the Better Auth team.
 
+import { DateTime } from "effect";
 import type * as React from "react";
 import { useState, useEffect } from 'react';
 
+const MS_PER_SECOND = 1000;
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PER_HOUR = 3600;
+const SECONDS_PER_DAY = 86400;
+const SECONDS_PER_WEEK = 604800;
+const SECONDS_PER_MONTH = 2592000;
+const MONTHS_PER_YEAR = 12;
+const REFRESH_INTERVAL_MS = 60_000;
+
 // Inlined from better-hub's "@/lib/utils" (timeAgo) — only the piece used here.
 function timeAgo(date: string | Date): string {
-	const now = new Date();
-	const then = new Date(date);
-	const seconds = Math.floor((now.getTime() - then.getTime()) / 1000);
+	const now = DateTime.unsafeNow();
+	const then = DateTime.unsafeMake(date);
+	const seconds = Math.floor((DateTime.toEpochMillis(now) - DateTime.toEpochMillis(then)) / MS_PER_SECOND);
 
-	if (seconds < 60) return 'just now';
-	if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-	if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-	if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
-	if (seconds < 2592000) return `${Math.floor(seconds / 604800)}w ago`;
+	if (seconds < SECONDS_PER_MINUTE) {
+		return 'just now';
+	}
+	if (seconds < SECONDS_PER_HOUR) {
+		return `${Math.floor(seconds / SECONDS_PER_MINUTE)}m ago`;
+	}
+	if (seconds < SECONDS_PER_DAY) {
+		return `${Math.floor(seconds / SECONDS_PER_HOUR)}h ago`;
+	}
+	if (seconds < SECONDS_PER_WEEK) {
+		return `${Math.floor(seconds / SECONDS_PER_DAY)}d ago`;
+	}
+	if (seconds < SECONDS_PER_MONTH) {
+		return `${Math.floor(seconds / SECONDS_PER_WEEK)}w ago`;
+	}
 
-	const months = Math.floor(seconds / 2592000);
-	if (months < 12) return `${months}mo ago`;
+	const months = Math.floor(seconds / SECONDS_PER_MONTH);
+	if (months < MONTHS_PER_YEAR) {
+		return `${months}mo ago`;
+	}
 
-	const sameYear = then.getFullYear() === now.getFullYear();
+	const thenDate = DateTime.toDate(then);
+	const sameYear = thenDate.getFullYear() === DateTime.toDate(now).getFullYear();
 	if (sameYear) {
-		return then.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+		return thenDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 	}
-	return then.toLocaleDateString('en-US', {
+	return thenDate.toLocaleDateString('en-US', {
 		month: 'short',
 		day: 'numeric',
 		year: 'numeric',
 	});
 }
 
-interface TimeAgoProps {
+interface TimeAgoPropsExternalApi {
 	date: string | Date;
 	className?: string;
 }
 
-export function TimeAgo({ date, className }: TimeAgoProps): React.JSX.Element {
+export function TimeAgo({ date, className }: TimeAgoPropsExternalApi): React.JSX.Element {
 	const [text, setText] = useState(() => timeAgo(date));
 
 	useEffect(() => {
 		setText(timeAgo(date));
-		const interval = setInterval(() => setText(timeAgo(date)), 60_000);
+		// oxlint-disable-next-line reform-rules/no-set-timeout-interval -- browser-timer seam: periodic relative-time refresh for React, no Effect runtime here
+		const interval = setInterval(() => setText(timeAgo(date)), REFRESH_INTERVAL_MS);
 		return () => clearInterval(interval);
 	}, [date]);
 
 	return (
 		<time
 			dateTime={typeof date === 'string' ? date : date.toISOString()}
-			title={new Date(date).toLocaleString()}
+			title={DateTime.toDate(DateTime.unsafeMake(date)).toLocaleString()}
 			className={className}
 			suppressHydrationWarning
 		>

package/src/foundation/cn.ts

@@ -5,4 +5,5 @@ import { twMerge } from 'tailwind-merge'
  * Merge class names with Tailwind-aware de-duplication.
  * Adapted from better-hub (apps/web/src/lib/utils.ts). See ../../README.md.
  */
+// oxlint-disable-next-line reform-rules/min-var-name -- `cn` is the canonical shadcn/Tailwind class-merge helper, a public export consumed across the monorepo
 export const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs))