@webappwiz/arbor 0.0.28 → 0.0.30

package/dev/components/ui/toast.tsx

@@ -0,0 +1,227 @@
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import {
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+	XIcon,
+} from "lucide-react";
+import type * as React from "react";
+
+import { Button } from "#dev/components/ui/button.tsx";
+import { cn } from "#dev/lib/utils.ts";
+
+const toast = ToastPrimitive.createToastManager();
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+	return <ToastPrimitive.Provider {...props} />;
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+	return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />;
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+	return (
+		<ToastPrimitive.Viewport
+			data-slot="toast-viewport"
+			className={cn(
+				"pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+	return (
+		<ToastPrimitive.Root
+			data-slot="toast"
+			className={cn(
+				"group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+				"h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+				"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+				"data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+				"data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+				"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+				"data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+				"data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+				"data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+				"data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+	return (
+		<ToastPrimitive.Content
+			data-slot="toast-content"
+			className={cn(
+				"flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+	return (
+		<ToastPrimitive.Title
+			data-slot="toast-title"
+			className={cn("text-sm font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function ToastDescription({
+	className,
+	...props
+}: ToastPrimitive.Description.Props) {
+	return (
+		<ToastPrimitive.Description
+			data-slot="toast-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function ToastAction({
+	className,
+	render = <Button variant="outline" size="sm" />,
+	...props
+}: ToastPrimitive.Action.Props) {
+	return (
+		<ToastPrimitive.Action
+			data-slot="toast-action"
+			render={render}
+			className={cn("shrink-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function ToastClose({
+	className,
+	children,
+	render = <Button variant="ghost" size="icon-sm" />,
+	...props
+}: ToastPrimitive.Close.Props) {
+	return (
+		<ToastPrimitive.Close
+			data-slot="toast-close"
+			aria-label="Close toast"
+			render={render}
+			className={cn(
+				"relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children ?? <XIcon aria-hidden="true" />}
+		</ToastPrimitive.Close>
+	);
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+	let icon: React.ReactNode = null;
+
+	if (type === "success") {
+		icon = <CircleCheckIcon aria-hidden="true" />;
+	}
+
+	if (type === "info") {
+		icon = <InfoIcon aria-hidden="true" />;
+	}
+
+	if (type === "warning") {
+		icon = <TriangleAlertIcon aria-hidden="true" />;
+	}
+
+	if (type === "error") {
+		icon = <OctagonXIcon className="text-destructive" aria-hidden="true" />;
+	}
+
+	if (type === "loading") {
+		icon = <Loader2Icon className="animate-spin" aria-hidden="true" />;
+	}
+
+	if (!icon) {
+		return null;
+	}
+
+	return (
+		<span
+			data-slot="toast-icon"
+			className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+		>
+			{icon}
+		</span>
+	);
+}
+
+function ToastList() {
+	const { toasts } = ToastPrimitive.useToastManager();
+
+	return toasts.map((toastItem) => (
+		<Toast key={toastItem.id} toast={toastItem}>
+			<ToastContent>
+				<ToastIcon type={toastItem.type} />
+				<div className="flex min-w-0 flex-1 flex-col gap-1">
+					<ToastTitle />
+					<ToastDescription />
+				</div>
+				<ToastAction />
+				<ToastClose />
+			</ToastContent>
+		</Toast>
+	));
+}
+
+function Toaster({
+	children,
+	toastManager = toast,
+	...props
+}: ToastPrimitive.Provider.Props) {
+	return (
+		<ToastProvider toastManager={toastManager} {...props}>
+			{children}
+			<ToastPortal>
+				<ToastViewport>
+					<ToastList />
+				</ToastViewport>
+			</ToastPortal>
+		</ToastProvider>
+	);
+}
+
+const createToastManager = ToastPrimitive.createToastManager;
+const useToastManager = ToastPrimitive.useToastManager;
+
+export {
+	createToastManager,
+	Toast,
+	ToastAction,
+	ToastClose,
+	ToastContent,
+	ToastDescription,
+	Toaster,
+	ToastPortal,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+	toast,
+	useToastManager,
+};

package/dev/feed.ts

@@ -0,0 +1,69 @@
+import type { Resource } from "webappwiz/disposable";
+import { Dispatcher, type Eventful } from "webappwiz/events";
+import type { Snapshot } from "../snapshot";
+
+export type FeedEvents = { changed: undefined };
+
+/**
+ * The page's copy of the repo, refetched whenever the server says something
+ * moved.
+ *
+ * One of these lasts as long as the page: `start` and `dispose` open and close
+ * the stream, and disposing leaves the object usable so it can be started
+ * again, which is why the component reads it through `useReactive` rather than
+ * rebuilding it, since that subscribes to the instance it saw on its first
+ * render.
+ */
+export class Feed implements Eventful<FeedEvents>, Resource {
+	private readonly dispatcher = new Dispatcher<FeedEvents>();
+	readonly events = this.dispatcher.events;
+
+	snapshot: Snapshot | null = null;
+	/** Set once the stream drops, so a stale page says so instead of lying. */
+	offline = false;
+
+	private stream: EventSource | null = null;
+
+	start(): void {
+		// React runs a mount effect twice in StrictMode, and a second stream would
+		// leak the first.
+		if (this.stream !== null) {
+			return;
+		}
+		const stream = new EventSource("/events");
+		this.stream = stream;
+		stream.onmessage = () => void this.load();
+		stream.onopen = () => this.set({ offline: false });
+		// EventSource reconnects on its own, so this is a notice rather than an
+		// error to recover from: `onopen` clears it when the server comes back.
+		stream.onerror = () => this.set({ offline: true });
+		void this.load();
+	}
+
+	dispose(): void {
+		this.stream?.close();
+		this.stream = null;
+	}
+
+	private async load(): Promise<void> {
+		try {
+			const response = await fetch("/api/snapshot");
+			if (!response.ok) {
+				throw new Error(`snapshot: ${response.status}`);
+			}
+			this.set({
+				snapshot: (await response.json()) as Snapshot,
+				offline: false,
+			});
+		} catch {
+			// The last good snapshot stays on screen: a page that empties itself
+			// because one poll failed is worse than one that admits it is stale.
+			this.set({ offline: true });
+		}
+	}
+
+	private set(next: Partial<Pick<Feed, "snapshot" | "offline">>): void {
+		Object.assign(this, next);
+		this.dispatcher.dispatch("changed");
+	}
+}

package/dev/files.tsx

@@ -0,0 +1,191 @@
+import { FileIcon, PaperclipIcon, XIcon } from "lucide-react";
+import {
+	type ClipboardEvent,
+	type JSX,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { Button } from "#dev/components/ui/button.tsx";
+import { InputGroupButton } from "#dev/components/ui/input-group.tsx";
+import { fileUrl } from "./api";
+
+const IMAGE = /\.(png|jpe?g|gif|webp|svg)$/i;
+
+/**
+ * Files on their way to being attached, and the ones already stored: what a
+ * reply box and a todo both need. `keep` starts as every stored path.
+ */
+export function useFiles(stored: string[] = []) {
+	const [files, setFiles] = useState<File[]>([]);
+	const [keep, setKeep] = useState<string[]>(stored);
+	const add = (added: Iterable<File>) => {
+		const list = [...added];
+		if (list.length > 0) {
+			setFiles((files) => [...files, ...list]);
+		}
+	};
+	// A screenshot pasted from the clipboard arrives as a file with no useful
+	// name, which is fine: the server keeps whatever it is given.
+	const paste = (event: ClipboardEvent<HTMLElement>) => {
+		const pasted = [...event.clipboardData.files];
+		if (pasted.length > 0) {
+			event.preventDefault();
+			add(pasted);
+		}
+	};
+	return {
+		files,
+		keep,
+		add,
+		paste,
+		drop: (index: number) =>
+			setFiles((files) => files.filter((_, at) => at !== index)),
+		unkeep: (path: string) =>
+			setKeep((keep) => keep.filter((kept) => kept !== path)),
+		/** Back to nothing attached, once what was attached has been sent. */
+		clear: () => {
+			setFiles([]);
+			setKeep([]);
+		},
+		/** Anything to send: a new file, or a stored one still kept. */
+		any: files.length > 0 || keep.length > 0,
+	};
+}
+
+export type Files = ReturnType<typeof useFiles>;
+
+/** The paperclip: picks any number of files of any kind. */
+export function AttachButton({ files }: { files: Files }): JSX.Element {
+	const picker = useRef<HTMLInputElement>(null);
+	return (
+		<>
+			<InputGroupButton
+				aria-label="attach files"
+				size="icon-xs"
+				variant="ghost"
+				onClick={() => picker.current?.click()}
+			>
+				<PaperclipIcon />
+			</InputGroupButton>
+			<input
+				ref={picker}
+				type="file"
+				multiple
+				hidden
+				onChange={(event) => {
+					files.add(event.target.files ?? []);
+					event.target.value = "";
+				}}
+			/>
+		</>
+	);
+}
+
+/** Every file attached, stored or new, each with a way to drop it. */
+export function FileList({ files }: { files: Files }): JSX.Element | null {
+	if (!files.any) {
+		return null;
+	}
+	return (
+		<div className="flex flex-wrap gap-2">
+			{files.keep.map((path) => (
+				<Chip
+					key={path}
+					name={stored(path)}
+					src={IMAGE.test(path) ? fileUrl(path) : undefined}
+					href={fileUrl(path)}
+					onRemove={() => files.unkeep(path)}
+				/>
+			))}
+			{files.files.map((file, index) => (
+				<New
+					key={`${file.name}-${file.size}-${file.lastModified}`}
+					file={file}
+					onRemove={() => files.drop(index)}
+				/>
+			))}
+		</div>
+	);
+}
+
+function New({
+	file,
+	onRemove,
+}: {
+	file: File;
+	onRemove: () => void;
+}): JSX.Element {
+	const image = file.type.startsWith("image/");
+	// Revoked when the chip goes, or every pasted screenshot stays in memory for
+	// as long as the page is open.
+	const [url, setUrl] = useState<string>();
+	useEffect(() => {
+		if (!image) {
+			return;
+		}
+		const created = URL.createObjectURL(file);
+		setUrl(created);
+		return () => URL.revokeObjectURL(created);
+	}, [file, image]);
+	return (
+		<Chip name={file.name} src={image ? url : undefined} onRemove={onRemove} />
+	);
+}
+
+/** One file: a thumbnail for an image, its name otherwise. */
+function Chip({
+	name,
+	src,
+	href,
+	onRemove,
+}: {
+	name: string;
+	src?: string;
+	href?: string;
+	onRemove?: () => void;
+}): JSX.Element {
+	const face =
+		src === undefined ? (
+			<div className="flex h-16 max-w-40 items-center gap-2 rounded-md border px-3 text-xs">
+				<FileIcon className="size-4 shrink-0 text-muted-foreground" />
+				<span className="truncate">{name}</span>
+			</div>
+		) : (
+			<img
+				src={src}
+				alt={name}
+				className="size-16 rounded-md border object-cover"
+			/>
+		);
+	return (
+		<div className="relative">
+			{href === undefined ? (
+				face
+			) : (
+				<a href={href} target="_blank" rel="noreferrer">
+					{face}
+				</a>
+			)}
+			{onRemove && (
+				<Button
+					aria-label={`remove ${name}`}
+					variant="secondary"
+					size="icon-xs"
+					className="absolute -top-2 -right-2 rounded-full"
+					onClick={onRemove}
+				>
+					<XIcon />
+				</Button>
+			)}
+		</div>
+	);
+}
+
+/** The id a stored name leads with: a uuid, or a test's counter. */
+const STORED_ID = /^([0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}|\d+)-/i;
+
+/** A stored file's name as given, without the id stored names lead with. */
+export function stored(path: string): string {
+	return (path.split("/").at(-1) ?? path).replace(STORED_ID, "");
+}

package/dev/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<title>arbor</title>
+		<!-- The emoji drawn as SVG inline, so there is no file for the server to
+		     serve. The page rewrites it to a warning when the server goes away. -->
+		<link
+			rel="icon"
+			href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='26' font-size='28'>🌲</text></svg>"
+		/>
+		<!-- Both are routes the server builds on request, not files next to this
+		     one. See dev/assets.ts for why they are not Bun's HTML import. -->
+		<link rel="stylesheet" href="/styles.css" />
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/main.js"></script>
+	</body>
+</html>

package/dev/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Joins class names, letting a later Tailwind utility override an earlier one. */
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}

package/dev/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+const root = document.getElementById("root");
+if (root === null) {
+	throw new Error("no #root to mount into: index.html and main.tsx disagree");
+}
+
+// shadcn's theme keys dark mode off a class, so the class follows the device,
+// including when it switches at sunset with the page open.
+const dark = matchMedia("(prefers-color-scheme: dark)");
+const theme = () =>
+	document.documentElement.classList.toggle("dark", dark.matches);
+theme();
+dark.addEventListener("change", theme);
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/dev/markdown.test.tsx

@@ -0,0 +1,133 @@
+import "../../../setup";
+import { describe, expect, it } from "bun:test";
+import { render } from "@testing-library/react";
+// `screen` is deliberately unused: it binds to `document.body` when this module
+// is imported, which happens before `./dom` registers one. The queries that
+// `render` hands back bind on call instead.
+import { Markdown } from "./markdown";
+
+describe("Markdown", () => {
+	it("renders a heading at its own level", () => {
+		const page = render(<Markdown text={"# alpha\n\n## Goal\nland it\n"} />);
+
+		expect(page.getByRole("heading", { level: 1 }).textContent).toBe("alpha");
+		expect(page.getByRole("heading", { level: 2 }).textContent).toBe("Goal");
+	});
+
+	it("keeps lines that wrap in one paragraph", () => {
+		const { container } = render(
+			<Markdown text={"one or two lines:\nwhat done means.\n"} />,
+		);
+
+		expect(container.querySelectorAll("p")).toHaveLength(1);
+	});
+
+	it("gives a checklist item a disabled checkbox, ticked when the box was", () => {
+		const { container } = render(
+			<Markdown text={"- [ ] the rest\n- [x] landed\n"} />,
+		);
+
+		const boxes = [...container.querySelectorAll("input")];
+
+		expect(boxes.map((box) => box.checked)).toEqual([false, true]);
+		expect(boxes.every((box) => box.disabled)).toBe(true);
+		expect(container.textContent).toContain("the rest");
+	});
+
+	it("renders a plain bullet without a checkbox", () => {
+		const { container } = render(<Markdown text={"- a bullet\n"} />);
+
+		expect(container.querySelector("li")?.textContent).toBe("a bullet");
+		expect(container.querySelector("input")).toBeNull();
+	});
+
+	it("nests lists", () => {
+		const { container } = render(
+			<Markdown text={"- outer\n  - inner\n- next\n"} />,
+		);
+
+		expect(container.querySelectorAll("ul ul li")).toHaveLength(1);
+		expect(container.querySelectorAll("ul > li")).toHaveLength(3);
+	});
+
+	it("renders a table", () => {
+		const { container } = render(
+			<Markdown text={"| a | b |\n| - | - |\n| 1 | 2 |\n"} />,
+		);
+
+		expect(
+			[...container.querySelectorAll("td")].map((cell) => cell.textContent),
+		).toEqual(["1", "2"]);
+	});
+
+	it("renders a fenced block as code, verbatim", () => {
+		const { container } = render(
+			<Markdown text={"```ts\nconst x = 1;\n```\n"} />,
+		);
+
+		expect(container.querySelector("pre code")?.textContent).toBe(
+			"const x = 1;",
+		);
+	});
+
+	it("renders inline code, bold and italics inside a line", () => {
+		const { container } = render(
+			<Markdown text={"run `arbor list` for **every** *task*\n"} />,
+		);
+
+		expect(container.querySelector("code")?.textContent).toBe("arbor list");
+		expect(container.querySelector("strong")?.textContent).toBe("every");
+		expect(container.querySelector("em")?.textContent).toBe("task");
+	});
+
+	it("links http destinations in a new tab, so the page keeps its place", () => {
+		const { container } = render(
+			<Markdown text={"open [the page](http://localhost:4269)"} />,
+		);
+
+		const link = container.querySelector("a");
+
+		expect(link?.textContent).toBe("the page");
+		expect(link?.getAttribute("href")).toBe("http://localhost:4269");
+		expect(link?.getAttribute("target")).toBe("_blank");
+		expect(link?.getAttribute("rel")).toContain("noopener");
+	});
+
+	it("links a bare URL", () => {
+		const { container } = render(
+			<Markdown text={"see https://example.com/a?b=1 for more"} />,
+		);
+
+		expect(container.querySelector("a")?.getAttribute("href")).toBe(
+			"https://example.com/a?b=1",
+		);
+	});
+
+	it("never makes a javascript: link clickable", () => {
+		const { container } = render(
+			<Markdown text={"[click](javascript:alert(1))"} />,
+		);
+
+		expect(container.querySelector("a[href]")).toBeNull();
+	});
+
+	it("renders markup in the source as text instead of elements", () => {
+		const { container } = render(
+			<Markdown text={"- [ ] drop <script>alert(1)</script>\n"} />,
+		);
+
+		expect(container.querySelector("script")).toBeNull();
+		expect(container.querySelector("li")?.textContent?.trim()).toBe(
+			"drop <script>alert(1)</script>",
+		);
+	});
+
+	it("shows an image as its alt text, since the page cannot load a local path", () => {
+		const { container } = render(
+			<Markdown text={"![the header](/abs/a.png)"} />,
+		);
+
+		expect(container.querySelector("img")).toBeNull();
+		expect(container.textContent).toBe("[the header]");
+	});
+});