emdash-header-footer-code 0.1.0

package/src/admin/ChangeLog.tsx

@@ -0,0 +1,84 @@
+import { Badge, Banner, Empty, Link, Loader, Table } from "@cloudflare/kumo";
+import * as React from "react";
+import type { ChangeLogEntry } from "../core/types.js";
+import { api } from "./api.js";
+import { ACTION_META, formatTimestamp, relativeTime, userLabel } from "./format.js";
+
+export function ChangeLog({ snippetIds, onOpen }: { snippetIds: ReadonlySet<string>; onOpen: (id: string) => void }) {
+	const [entries, setEntries] = React.useState<ChangeLogEntry[] | null>(null);
+	const [error, setError] = React.useState<string | null>(null);
+	const [now] = React.useState(() => Date.now());
+
+	React.useEffect(() => {
+		api.changelog().then(
+			(r) => setEntries(r.entries),
+			(e: unknown) => setError(e instanceof Error ? e.message : String(e)),
+		);
+	}, []);
+
+	if (error) {
+		return (
+			<div className="p-4">
+				<Banner variant="error" title="Could not load the change log" description={error} />
+			</div>
+		);
+	}
+	if (!entries) {
+		return (
+			<div className="flex justify-center py-10">
+				<Loader />
+			</div>
+		);
+	}
+	if (entries.length === 0) {
+		return <Empty title="No changes yet" description="Creating, editing or deleting snippets is recorded here." />;
+	}
+	return (
+		<div className="overflow-x-auto">
+			<Table>
+				<Table.Header>
+					<Table.Row>
+						<Table.Head>When</Table.Head>
+						<Table.Head>Who</Table.Head>
+						<Table.Head>Action</Table.Head>
+						<Table.Head>Snippet</Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{entries.map((e) => {
+						const meta = ACTION_META[e.action];
+						const canOpen = e.snippetId !== null && snippetIds.has(e.snippetId);
+						return (
+							<Table.Row key={e.id} data-testid="hfc-changelog-row">
+								<Table.Cell className="whitespace-nowrap text-sm">
+									<time dateTime={e.at} title={formatTimestamp(e.at)}>
+										{relativeTime(e.at, now)}
+									</time>
+								</Table.Cell>
+								<Table.Cell className="text-sm">{userLabel(e.user)}</Table.Cell>
+								<Table.Cell>
+									<Badge variant={meta?.variant ?? "secondary"}>{meta?.label ?? e.action}</Badge>
+								</Table.Cell>
+								<Table.Cell className="text-sm">
+									{e.snippetName === null ? (
+										<span className="text-kumo-subtle">—</span>
+									) : canOpen ? (
+										<Link
+											variant="plain"
+											render={<button type="button" className="cursor-pointer text-start" />}
+											onClick={() => onOpen(e.snippetId!)}
+										>
+											{e.snippetName}
+										</Link>
+									) : (
+										<span>{e.snippetName}</span>
+									)}
+								</Table.Cell>
+							</Table.Row>
+						);
+					})}
+				</Table.Body>
+			</Table>
+		</div>
+	);
+}

package/src/admin/ChipInput.tsx

@@ -0,0 +1,154 @@
+import { cn } from "@cloudflare/kumo";
+import * as React from "react";
+import { type ChipKind, addChips, validateChip } from "./chips.js";
+import { XIcon } from "./icons.js";
+
+/**
+ * Tag-style list input: type and press Enter (or a comma) to add, Backspace on an empty input
+ * removes the last chip, × removes one. Invalid values stay in the input and the reason is
+ * reported through `onErrorChange` (the form shows it under the field).
+ */
+export function ChipInput({
+	id,
+	kind,
+	value,
+	onChange,
+	onErrorChange,
+	onPendingChange,
+	invalid,
+	describedBy,
+	label,
+	placeholder,
+}: {
+	id: string;
+	kind: ChipKind;
+	value: string[];
+	onChange: (value: string[]) => void;
+	onErrorChange: (error: string | null) => void;
+	/** Reports whether the input holds text not yet added as a chip (counts as unsaved). */
+	onPendingChange?: (pending: boolean) => void;
+	invalid?: boolean;
+	describedBy?: string;
+	label: string;
+	placeholder?: string;
+}) {
+	const inputRef = React.useRef<HTMLInputElement>(null);
+	const [text, setText] = React.useState("");
+	// After a rejected add, re-validate as the user edits so the message clears once fixed.
+	const [liveCheck, setLiveCheck] = React.useState(false);
+	// IME composition: Enter/comma confirm the composed text, they must not add a chip.
+	const composing = React.useRef(false);
+
+	const pending = text.trim() !== "";
+	const onPendingRef = React.useRef(onPendingChange);
+	onPendingRef.current = onPendingChange;
+	React.useEffect(() => {
+		onPendingRef.current?.(pending);
+	}, [pending]);
+
+	function commit(raw: string) {
+		const r = addChips(value, raw, kind);
+		if (r.chips.length !== value.length) onChange(r.chips);
+		setText(r.rest);
+		setLiveCheck(r.error !== null);
+		onErrorChange(r.error);
+	}
+
+	function onTextChange(next: string) {
+		if (!composing.current && /[,\n]/.test(next)) {
+			commit(next);
+			return;
+		}
+		setText(next);
+		if (liveCheck) {
+			const t = next.trim();
+			const err = t === "" ? null : validateChip(t, kind);
+			onErrorChange(err);
+			if (err === null) setLiveCheck(false);
+		}
+	}
+
+	function remove(index: number) {
+		onChange(value.filter((_, i) => i !== index));
+		inputRef.current?.focus();
+	}
+
+	function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+		if (e.nativeEvent.isComposing || composing.current) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commit(text);
+		} else if (e.key === "Backspace" && text === "" && value.length > 0) {
+			e.preventDefault();
+			remove(value.length - 1);
+		}
+	}
+
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: clicking the padding focuses the real input
+		<div
+			className={cn(
+				"flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg bg-kumo-base px-2 py-1.5 ring ring-kumo-line focus-within:ring-kumo-focus/50",
+				invalid && "!ring-kumo-danger",
+			)}
+			onClick={(e) => {
+				if (e.target === e.currentTarget) inputRef.current?.focus();
+			}}
+		>
+			{value.map((chip, i) => (
+				<span
+					key={chip}
+					data-testid={`${id}-chip`}
+					className="inline-flex max-w-full items-center gap-1 rounded-md bg-kumo-tint py-0.5 ps-2 pr-1 font-mono text-sm text-kumo-default"
+				>
+					<span className="truncate">{chip}</span>
+					<button
+						type="button"
+						className="inline-flex cursor-pointer items-center rounded p-0.5 text-kumo-subtle hover:bg-kumo-fill hover:text-kumo-default"
+						aria-label={`Remove ${chip}`}
+						onClick={() => remove(i)}
+					>
+						<XIcon size={12} />
+					</button>
+				</span>
+			))}
+			<input
+				ref={inputRef}
+				id={id}
+				data-testid={id}
+				aria-label={label}
+				aria-invalid={invalid || undefined}
+				aria-describedby={describedBy}
+				className="min-w-32 flex-1 bg-transparent px-1 py-0.5 text-sm text-kumo-default outline-none"
+				value={text}
+				placeholder={value.length === 0 ? placeholder : undefined}
+				onChange={(e) => onTextChange(e.target.value)}
+				onKeyDown={onKeyDown}
+				onCompositionStart={() => {
+					composing.current = true;
+				}}
+				onCompositionEnd={(e) => {
+					composing.current = false;
+					onTextChange(e.currentTarget.value);
+				}}
+				onPaste={(e) => {
+					// A single-line <input> would strip pasted newlines ("/a\n/b" -> "/a/b"), so split
+					// multi-value pastes here and add each value.
+					const pasted = e.clipboardData.getData("text");
+					if (!/[,\r\n]/.test(pasted)) return;
+					e.preventDefault();
+					const el = e.currentTarget;
+					const start = el.selectionStart ?? text.length;
+					const end = el.selectionEnd ?? text.length;
+					commit(`${text.slice(0, start)}${pasted.replace(/\r/g, "")}${text.slice(end)}`);
+				}}
+				onBlur={() => {
+					if (text.trim() !== "") commit(text);
+				}}
+				spellCheck={false}
+				autoCapitalize="off"
+				autoComplete="off"
+			/>
+		</div>
+	);
+}

package/src/admin/CodeEditor.tsx

@@ -0,0 +1,135 @@
+import { cn } from "@cloudflare/kumo";
+import * as React from "react";
+import { indentText } from "./indent.js";
+
+/**
+ * Code textarea with a line-number gutter and Tab/Shift+Tab indenting. No editor dependency:
+ * the gutter is a <pre> kept in step with the textarea's scroll position. Press Esc, then Tab,
+ * to move focus out of the editor with the keyboard.
+ */
+export function CodeEditor({
+	id,
+	value,
+	onChange,
+	invalid,
+	describedBy,
+	label,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+	invalid?: boolean;
+	describedBy?: string;
+	label: string;
+}) {
+	const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+	const gutterRef = React.useRef<HTMLPreElement>(null);
+	const tabEscape = React.useRef(false);
+	const pendingSelection = React.useRef<[number, number] | null>(null);
+
+	const lineCount = React.useMemo(() => {
+		let n = 1;
+		for (let i = value.indexOf("\n"); i !== -1; i = value.indexOf("\n", i + 1)) n++;
+		return n;
+	}, [value]);
+	const numbers = React.useMemo(
+		() => Array.from({ length: lineCount }, (_, i) => String(i + 1)).join("\n"),
+		[lineCount],
+	);
+
+	const syncScroll = React.useCallback(() => {
+		if (gutterRef.current && textareaRef.current) gutterRef.current.scrollTop = textareaRef.current.scrollTop;
+	}, []);
+
+	// Restore the selection after a fallback (non-execCommand) indent re-render, and keep the
+	// gutter aligned when the content height changes.
+	React.useLayoutEffect(() => {
+		const ta = textareaRef.current;
+		if (ta && pendingSelection.current) {
+			ta.setSelectionRange(...pendingSelection.current);
+			pendingSelection.current = null;
+		}
+		syncScroll();
+	}, [value, syncScroll]);
+
+	function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+		// Modifier-only presses (e.g. Shift before Shift+Tab) must not cancel a pending Esc.
+		if (e.key === "Shift" || e.key === "Control" || e.key === "Alt" || e.key === "Meta") return;
+		if (e.key === "Escape") {
+			tabEscape.current = true;
+			return;
+		}
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) {
+			tabEscape.current = false;
+			return;
+		}
+		if (tabEscape.current) {
+			tabEscape.current = false;
+			return; // let focus move on
+		}
+		e.preventDefault();
+		const ta = e.currentTarget;
+		const old = ta.value;
+		const edit = indentText(old, ta.selectionStart, ta.selectionEnd, e.shiftKey);
+		if (edit.value === old) return;
+
+		// Replace only the changed span so the browser's undo history keeps working.
+		let a = 0;
+		while (a < old.length && a < edit.value.length && old[a] === edit.value[a]) a++;
+		let b = 0;
+		while (
+			b < old.length - a &&
+			b < edit.value.length - a &&
+			old[old.length - 1 - b] === edit.value[edit.value.length - 1 - b]
+		)
+			b++;
+		const inserted = edit.value.slice(a, edit.value.length - b);
+		ta.setSelectionRange(a, old.length - b);
+		const ok =
+			typeof document.execCommand === "function" &&
+			document.execCommand(inserted === "" ? "delete" : "insertText", false, inserted);
+		if (ok && ta.value === edit.value) {
+			ta.setSelectionRange(edit.start, edit.end);
+		} else {
+			pendingSelection.current = [edit.start, edit.end];
+			onChange(edit.value);
+		}
+	}
+
+	return (
+		<div
+			className={cn(
+				"flex overflow-hidden rounded-lg bg-kumo-base ring ring-kumo-line focus-within:ring-kumo-focus/50",
+				invalid && "!ring-kumo-danger",
+			)}
+		>
+			<pre
+				ref={gutterRef}
+				aria-hidden="true"
+				className="hfc-code-text m-0 shrink-0 select-none overflow-hidden border-e border-kumo-line bg-kumo-elevated px-3 py-3 text-end font-mono text-kumo-subtle"
+			>
+				{numbers}
+				{"\n\n\n"}
+			</pre>
+			<textarea
+				ref={textareaRef}
+				id={id}
+				data-testid={id}
+				aria-label={label}
+				aria-invalid={invalid || undefined}
+				aria-describedby={describedBy}
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				onKeyDown={onKeyDown}
+				onScroll={syncScroll}
+				spellCheck={false}
+				autoCapitalize="off"
+				autoComplete="off"
+				autoCorrect="off"
+				wrap="off"
+				placeholder={"<script>\n  // your code\n</script>"}
+				className="hfc-code-text hfc-code-area min-w-0 flex-1 resize-y bg-transparent px-3 py-3 font-mono text-kumo-default outline-none"
+			/>
+		</div>
+	);
+}