@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/components/viewers/source-viewer/source-viewer.js

@@ -0,0 +1,224 @@
+import { cn } from "../../lib/utils.js";
+import { scrollbarStyles } from "../../lib/scrollStyles.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import githubDark from "@shikijs/themes/github-dark";
+import githubLight from "@shikijs/themes/github-light";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+//#region src/components/viewers/source-viewer/source-viewer.tsx
+const languageByExtension = {
+	cjs: "javascript",
+	css: "css",
+	html: "html",
+	js: "javascript",
+	json: "json",
+	jsx: "jsx",
+	md: "markdown",
+	mjs: "javascript",
+	mts: "typescript",
+	ts: "typescript",
+	tsx: "tsx",
+	yaml: "yaml",
+	yml: "yaml"
+};
+const highlighter = createHighlighterCore({
+	themes: [githubLight, githubDark],
+	langs: [],
+	engine: createOnigurumaEngine(import("shiki/wasm"))
+});
+const languageLoaders = {
+	css: () => import("@shikijs/langs/css"),
+	html: () => import("@shikijs/langs/html"),
+	javascript: () => import("@shikijs/langs/javascript"),
+	json: () => import("@shikijs/langs/json"),
+	jsx: () => import("@shikijs/langs/jsx"),
+	markdown: () => import("@shikijs/langs/markdown"),
+	tsx: () => import("@shikijs/langs/tsx"),
+	typescript: () => import("@shikijs/langs/typescript"),
+	yaml: () => import("@shikijs/langs/yaml")
+};
+const loadingLanguages = /* @__PURE__ */ new Map();
+function loadLanguage(instance, language) {
+	if (language === "text" || instance.getLoadedLanguages().includes(language)) return Promise.resolve();
+	const loading = loadingLanguages.get(language) ?? instance.loadLanguage(languageLoaders[language]());
+	loadingLanguages.set(language, loading);
+	return loading;
+}
+function paintSourceLine(line, hovered = false) {
+	const depth = Number(line.dataset.sourceDepth ?? 0);
+	const focused = line.dataset.sourceFocused === "true";
+	if (depth === 0 && !focused) {
+		line.style.backgroundColor = "";
+		line.style.borderInlineStartColor = "";
+		line.style.boxShadow = "";
+		return;
+	}
+	const fillAlpha = Math.min(focused ? .18 : .12, (focused ? .12 : .02) + Math.max(0, depth - 1) * .025 + (hovered ? .045 : 0));
+	const borderAlpha = Math.min(1, (focused ? .85 : .2) + Math.max(0, depth - 1) * .1 + (hovered ? .2 : 0));
+	const color = focused ? "59 130 246" : "56 189 248";
+	line.style.backgroundColor = `rgb(${color} / ${fillAlpha})`;
+	line.style.borderInlineStartColor = `rgb(${color} / ${borderAlpha})`;
+	line.style.boxShadow = focused ? [
+		"inset 3px 0 rgb(59 130 246 / 0.85)",
+		"inset -1px 0 rgb(59 130 246 / 0.35)",
+		"inset 0 0 14px rgb(59 130 246 / 0.06)",
+		line.dataset.sourceFocusFirst === "true" ? "inset 0 1px rgb(59 130 246 / 0.55)" : "",
+		line.dataset.sourceFocusLast === "true" ? "inset 0 -1px rgb(59 130 246 / 0.55)" : ""
+	].filter(Boolean).join(", ") : "";
+}
+function SourceViewer({ filePath, content, range, sections = [], lineStatuses, onSectionClick, scrollRequestId, wrap = false, lineOffset = 0, showHeader = true, showLineNumbers = true, autoHeight = false, actions, className }) {
+	const viewportRef = useRef(null);
+	const handledScrollRequestRef = useRef(void 0);
+	const hoveredSectionRef = useRef(null);
+	const focusedLinesRef = useRef([]);
+	const [rendered, setRendered] = useState(null);
+	const language = useMemo(() => {
+		const extension = filePath.split(".").pop()?.toLowerCase() ?? "";
+		return languageByExtension[extension] ?? "text";
+	}, [filePath]);
+	const html = rendered?.content === content && rendered.language === language && rendered.lineOffset === lineOffset && rendered.lineStatuses === lineStatuses ? rendered.html : "";
+	useEffect(() => {
+		let active = true;
+		highlighter.then(async (instance) => {
+			await loadLanguage(instance, language);
+			return instance.codeToHtml(content, {
+				lang: language,
+				themes: {
+					light: "github-light",
+					dark: "github-dark"
+				},
+				defaultColor: false,
+				transformers: [{
+					span(node) {
+						this.addClassToHast(node, "shiki-token");
+					},
+					line(node, line) {
+						node.properties["data-line"] = line + lineOffset;
+						this.addClassToHast(node, "source-line");
+						const status = lineStatuses?.[line - 1];
+						if (status === void 0) return;
+						node.properties["data-line-number"] = status.number ?? "";
+						this.addClassToHast(node, `source-line-${status.status}`);
+					}
+				}]
+			});
+		}).then((next) => {
+			if (active) setRendered({
+				content,
+				language,
+				lineOffset,
+				lineStatuses,
+				html: next
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		content,
+		language,
+		lineOffset,
+		lineStatuses
+	]);
+	useLayoutEffect(() => {
+		if (!html) return;
+		hoveredSectionRef.current = null;
+		(viewportRef.current?.querySelectorAll("[data-line]"))?.forEach((line) => {
+			const lineNumber = Number(line.dataset.line);
+			const depth = new Set(sections.flatMap(({ range: sectionRange }) => lineNumber >= sectionRange.startLine && lineNumber <= sectionRange.endLine ? [`${sectionRange.startLine}:${sectionRange.endLine}`] : [])).size;
+			const section = depth > 0;
+			line.dataset.sourceDepth = String(depth);
+			line.classList.toggle("source-line-section", section);
+			line.classList.remove("source-line-section-hovered");
+			paintSourceLine(line);
+		});
+	}, [
+		filePath,
+		html,
+		sections
+	]);
+	useLayoutEffect(() => {
+		if (!html) return;
+		for (const line of focusedLinesRef.current) {
+			line.dataset.sourceFocused = "false";
+			line.dataset.sourceFocusFirst = "false";
+			line.dataset.sourceFocusLast = "false";
+			line.classList.remove("source-line-focused");
+			paintSourceLine(line);
+		}
+		const viewport = viewportRef.current;
+		const focusedLines = [];
+		if (range) for (let lineNumber = range.startLine; lineNumber <= range.endLine; lineNumber++) {
+			const line = viewport?.querySelector(`[data-line="${lineNumber}"]`);
+			if (!line) continue;
+			line.dataset.sourceFocused = "true";
+			line.classList.add("source-line-focused");
+			focusedLines.push(line);
+		}
+		const firstFocusedLine = focusedLines[0];
+		const lastFocusedLine = focusedLines.at(-1);
+		if (firstFocusedLine) firstFocusedLine.dataset.sourceFocusFirst = "true";
+		if (lastFocusedLine) lastFocusedLine.dataset.sourceFocusLast = "true";
+		for (const line of focusedLines) paintSourceLine(line);
+		focusedLinesRef.current = focusedLines;
+		if (!range || scrollRequestId === void 0 || handledScrollRequestRef.current === scrollRequestId) return;
+		if (!viewport || !firstFocusedLine || !lastFocusedLine) return;
+		const viewportBounds = viewport.getBoundingClientRect();
+		const firstBounds = firstFocusedLine.getBoundingClientRect();
+		const lastBounds = lastFocusedLine.getBoundingClientRect();
+		const selectionTop = viewport.scrollTop + firstBounds.top - viewportBounds.top;
+		const selectionHeight = viewport.scrollTop + lastBounds.bottom - viewportBounds.top - selectionTop;
+		const desiredTop = selectionHeight <= viewport.clientHeight - 32 ? selectionTop - (viewport.clientHeight - selectionHeight) / 2 : selectionTop - 16;
+		const target = Math.max(0, Math.min(viewport.scrollHeight - viewport.clientHeight, desiredTop));
+		viewport.scrollLeft = 0;
+		viewport.scrollTop = target;
+		handledScrollRequestRef.current = scrollRequestId;
+	});
+	const sectionAtTarget = (target) => {
+		if (!(target instanceof Element)) return void 0;
+		const line = target.closest("[data-line]");
+		if (!line) return void 0;
+		const lineNumber = Number(line.dataset.line);
+		return sections.filter(({ range: sectionRange }) => lineNumber >= sectionRange.startLine && lineNumber <= sectionRange.endLine).sort((left, right) => left.range.endLine - left.range.startLine - (right.range.endLine - right.range.startLine))[0];
+	};
+	const setHoveredSection = (sectionId) => {
+		if (hoveredSectionRef.current === sectionId) return;
+		hoveredSectionRef.current = sectionId;
+		const section = sections.find((candidate) => candidate.id === sectionId);
+		viewportRef.current?.querySelectorAll("[data-line]").forEach((line) => {
+			const lineNumber = Number(line.dataset.line);
+			line.classList.toggle("source-line-section-hovered", Boolean(section && lineNumber >= section.range.startLine && lineNumber <= section.range.endLine));
+			paintSourceLine(line, Boolean(section && lineNumber >= section.range.startLine && lineNumber <= section.range.endLine));
+		});
+	};
+	const handleSectionClick = (target) => {
+		if (!onSectionClick) return;
+		const section = sectionAtTarget(target);
+		if (section) onSectionClick(section.id);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex flex-col bg-background", autoHeight ? "h-auto" : "h-full min-h-0", className),
+		"aria-label": `Source: ${filePath}`,
+		children: [showHeader && /* @__PURE__ */ jsxs("header", {
+			className: "flex h-11 shrink-0 items-center gap-3 border-b border-border px-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate font-mono text-xs",
+				title: filePath,
+				children: filePath
+			}), actions]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: viewportRef,
+			style: { counterReset: `line ${lineOffset}` },
+			className: cn("source-viewer", "min-h-0 flex-1 bg-background font-mono text-[13px] [&_.shiki]:bg-transparent! [&_.shiki]:py-3 [&_code]:flex [&_code]:flex-col [&_.source-line]:relative [&_.source-line]:box-border [&_.source-line]:block [&_.source-line]:min-h-[1.375rem] [&_.source-line]:border-s-2 [&_.source-line]:border-transparent [&_.source-line]:pe-6 [&_.source-line]:leading-[1.375rem] [&_.source-line]:transition-colors [&_.source-line]:duration-100 [&_.source-line-section]:cursor-pointer [&_.source-line-focused]:cursor-pointer", autoHeight ? "overflow-visible [&_.shiki]:min-h-0" : cn("overflow-y-scroll overscroll-contain [scrollbar-gutter:stable] [&_.shiki]:min-h-full", scrollbarStyles), showLineNumbers ? cn("[&_.source-line]:ps-14 [&_.source-line]:before:absolute [&_.source-line]:before:start-0 [&_.source-line]:before:w-11 [&_.source-line]:before:pe-3 [&_.source-line]:before:text-end [&_.source-line]:before:text-[11px] [&_.source-line]:before:text-muted-foreground/35", lineStatuses === void 0 ? "[&_.source-line]:[counter-increment:line] [&_.source-line]:before:content-[counter(line)]" : "[&_.source-line]:before:content-[attr(data-line-number)]") : "[&_.source-line]:ps-4", wrap ? "overflow-x-hidden [&_.shiki]:w-full [&_.shiki]:min-w-0 [&_code]:w-full [&_.source-line]:break-words [&_.source-line]:whitespace-pre-wrap" : cn("[&_.shiki]:min-w-max [&_code]:w-max [&_code]:min-w-full", !autoHeight && "overflow-x-auto")),
+			onClick: (event) => handleSectionClick(event.target),
+			onPointerMove: (event) => setHoveredSection(sectionAtTarget(event.target)?.id ?? null),
+			onPointerLeave: () => setHoveredSection(null),
+			dangerouslySetInnerHTML: { __html: html }
+		})]
+	});
+}
+//#endregion
+export { SourceViewer };
+
+//# sourceMappingURL=source-viewer.js.map

package/dist/components/viewers/source-viewer/source-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-viewer.js","names":[],"sources":["../../../../src/components/viewers/source-viewer/source-viewer.tsx"],"sourcesContent":["import {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport githubDark from '@shikijs/themes/github-dark';\nimport githubLight from '@shikijs/themes/github-light';\nimport {\n  createHighlighterCore,\n  type HighlighterCore,\n  type LanguageInput,\n} from 'shiki/core';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\n\nimport { cn } from '#lib/utils';\nimport { scrollbarStyles } from '#lib/scrollStyles';\n\nexport interface SourceViewerRange {\n  readonly startLine: number;\n  readonly endLine: number;\n}\n\nexport interface SourceViewerSection {\n  readonly id: string;\n  readonly range: SourceViewerRange;\n}\n\nexport interface SourceViewerLine {\n  readonly status: 'add' | 'remove' | 'context' | 'meta' | 'empty';\n  readonly number?: number;\n}\n\nexport interface SourceViewerProps {\n  readonly filePath: string;\n  readonly content: string;\n  readonly range?: SourceViewerRange | null;\n  readonly sections?: readonly SourceViewerSection[];\n  readonly lineStatuses?: readonly SourceViewerLine[];\n  readonly onSectionClick?: (sectionId: string) => void;\n  readonly scrollRequestId?: number;\n  readonly wrap?: boolean;\n  readonly lineOffset?: number;\n  readonly showHeader?: boolean;\n  readonly showLineNumbers?: boolean;\n  readonly autoHeight?: boolean;\n  readonly actions?: ReactNode;\n  readonly className?: string;\n}\n\ntype SourceLanguage =\n  | 'css'\n  | 'html'\n  | 'javascript'\n  | 'json'\n  | 'jsx'\n  | 'markdown'\n  | 'text'\n  | 'tsx'\n  | 'typescript'\n  | 'yaml';\n\nconst languageByExtension: Readonly<Record<string, SourceLanguage>> = {\n  cjs: 'javascript',\n  css: 'css',\n  html: 'html',\n  js: 'javascript',\n  json: 'json',\n  jsx: 'jsx',\n  md: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  ts: 'typescript',\n  tsx: 'tsx',\n  yaml: 'yaml',\n  yml: 'yaml',\n};\n\nconst highlighter = createHighlighterCore({\n  themes: [githubLight, githubDark],\n  langs: [],\n  engine: createOnigurumaEngine(import('shiki/wasm')),\n});\n\nconst languageLoaders: Record<\n  Exclude<SourceLanguage, 'text'>,\n  () => LanguageInput\n> = {\n  css: () => import('@shikijs/langs/css'),\n  html: () => import('@shikijs/langs/html'),\n  javascript: () => import('@shikijs/langs/javascript'),\n  json: () => import('@shikijs/langs/json'),\n  jsx: () => import('@shikijs/langs/jsx'),\n  markdown: () => import('@shikijs/langs/markdown'),\n  tsx: () => import('@shikijs/langs/tsx'),\n  typescript: () => import('@shikijs/langs/typescript'),\n  yaml: () => import('@shikijs/langs/yaml'),\n};\n\nconst loadingLanguages = new Map<SourceLanguage, Promise<void>>();\n\nfunction loadLanguage(instance: HighlighterCore, language: SourceLanguage) {\n  if (language === 'text' || instance.getLoadedLanguages().includes(language)) {\n    return Promise.resolve();\n  }\n  const loading =\n    loadingLanguages.get(language) ??\n    instance.loadLanguage(languageLoaders[language]());\n  loadingLanguages.set(language, loading);\n  return loading;\n}\n\nfunction paintSourceLine(line: HTMLElement, hovered = false) {\n  const depth = Number(line.dataset.sourceDepth ?? 0);\n  const focused = line.dataset.sourceFocused === 'true';\n  if (depth === 0 && !focused) {\n    line.style.backgroundColor = '';\n    line.style.borderInlineStartColor = '';\n    line.style.boxShadow = '';\n    return;\n  }\n  const fillAlpha = Math.min(\n    focused ? 0.18 : 0.12,\n    (focused ? 0.12 : 0.02) +\n      Math.max(0, depth - 1) * 0.025 +\n      (hovered ? 0.045 : 0),\n  );\n  const borderAlpha = Math.min(\n    1,\n    (focused ? 0.85 : 0.2) + Math.max(0, depth - 1) * 0.1 + (hovered ? 0.2 : 0),\n  );\n  const color = focused ? '59 130 246' : '56 189 248';\n  line.style.backgroundColor = `rgb(${color} / ${fillAlpha})`;\n  line.style.borderInlineStartColor = `rgb(${color} / ${borderAlpha})`;\n  line.style.boxShadow = focused\n    ? [\n        'inset 3px 0 rgb(59 130 246 / 0.85)',\n        'inset -1px 0 rgb(59 130 246 / 0.35)',\n        'inset 0 0 14px rgb(59 130 246 / 0.06)',\n        line.dataset.sourceFocusFirst === 'true'\n          ? 'inset 0 1px rgb(59 130 246 / 0.55)'\n          : '',\n        line.dataset.sourceFocusLast === 'true'\n          ? 'inset 0 -1px rgb(59 130 246 / 0.55)'\n          : '',\n      ]\n        .filter(Boolean)\n        .join(', ')\n    : '';\n}\n\nexport function SourceViewer({\n  filePath,\n  content,\n  range,\n  sections = [],\n  lineStatuses,\n  onSectionClick,\n  scrollRequestId,\n  wrap = false,\n  lineOffset = 0,\n  showHeader = true,\n  showLineNumbers = true,\n  autoHeight = false,\n  actions,\n  className,\n}: SourceViewerProps) {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const handledScrollRequestRef = useRef<number | undefined>(undefined);\n  const hoveredSectionRef = useRef<string | null>(null);\n  const focusedLinesRef = useRef<readonly HTMLElement[]>([]);\n  const [rendered, setRendered] = useState<{\n    readonly content: string;\n    readonly language: SourceLanguage;\n    readonly lineOffset: number;\n    readonly lineStatuses: readonly SourceViewerLine[] | undefined;\n    readonly html: string;\n  } | null>(null);\n  const language = useMemo(() => {\n    const extension = filePath.split('.').pop()?.toLowerCase() ?? '';\n    return languageByExtension[extension] ?? 'text';\n  }, [filePath]);\n  const html =\n    rendered?.content === content &&\n    rendered.language === language &&\n    rendered.lineOffset === lineOffset &&\n    rendered.lineStatuses === lineStatuses\n      ? rendered.html\n      : '';\n\n  useEffect(() => {\n    let active = true;\n    void highlighter\n      .then(async (instance) => {\n        await loadLanguage(instance, language);\n        return instance.codeToHtml(content, {\n          lang: language,\n          themes: { light: 'github-light', dark: 'github-dark' },\n          defaultColor: false,\n          transformers: [\n            {\n              span(node) {\n                this.addClassToHast(node, 'shiki-token');\n              },\n              line(node, line) {\n                node.properties['data-line'] = line + lineOffset;\n                this.addClassToHast(node, 'source-line');\n                const status = lineStatuses?.[line - 1];\n                if (status === undefined) return;\n                node.properties['data-line-number'] = status.number ?? '';\n                this.addClassToHast(node, `source-line-${status.status}`);\n              },\n            },\n          ],\n        });\n      })\n      .then((next) => {\n        if (active) {\n          setRendered({\n            content,\n            language,\n            lineOffset,\n            lineStatuses,\n            html: next,\n          });\n        }\n      });\n    return () => {\n      active = false;\n    };\n  }, [content, language, lineOffset, lineStatuses]);\n\n  useLayoutEffect(() => {\n    if (!html) return;\n    hoveredSectionRef.current = null;\n    const viewport = viewportRef.current;\n    const lines = viewport?.querySelectorAll<HTMLElement>('[data-line]');\n    lines?.forEach((line) => {\n      const lineNumber = Number(line.dataset.line);\n      const matchingRanges = new Set(\n        sections.flatMap(({ range: sectionRange }) =>\n          lineNumber >= sectionRange.startLine &&\n          lineNumber <= sectionRange.endLine\n            ? [`${sectionRange.startLine}:${sectionRange.endLine}`]\n            : [],\n        ),\n      );\n      const depth = matchingRanges.size;\n      const section = depth > 0;\n      line.dataset.sourceDepth = String(depth);\n      line.classList.toggle('source-line-section', section);\n      line.classList.remove('source-line-section-hovered');\n      paintSourceLine(line);\n    });\n  }, [filePath, html, sections]);\n\n  // The highlighted HTML is injected into the DOM. Reapply focus after every\n  // render because settings changes can refresh those nodes without changing\n  // the source text or requested range.\n  useLayoutEffect(() => {\n    if (!html) return;\n    for (const line of focusedLinesRef.current) {\n      line.dataset.sourceFocused = 'false';\n      line.dataset.sourceFocusFirst = 'false';\n      line.dataset.sourceFocusLast = 'false';\n      line.classList.remove('source-line-focused');\n      paintSourceLine(line);\n    }\n    const viewport = viewportRef.current;\n    const focusedLines: HTMLElement[] = [];\n    if (range) {\n      for (\n        let lineNumber = range.startLine;\n        lineNumber <= range.endLine;\n        lineNumber++\n      ) {\n        const line = viewport?.querySelector<HTMLElement>(\n          `[data-line=\"${lineNumber}\"]`,\n        );\n        if (!line) continue;\n        line.dataset.sourceFocused = 'true';\n        line.classList.add('source-line-focused');\n        focusedLines.push(line);\n      }\n    }\n    const firstFocusedLine = focusedLines[0];\n    const lastFocusedLine = focusedLines.at(-1);\n    if (firstFocusedLine) firstFocusedLine.dataset.sourceFocusFirst = 'true';\n    if (lastFocusedLine) lastFocusedLine.dataset.sourceFocusLast = 'true';\n    for (const line of focusedLines) paintSourceLine(line);\n    focusedLinesRef.current = focusedLines;\n\n    if (\n      !range ||\n      scrollRequestId === undefined ||\n      handledScrollRequestRef.current === scrollRequestId\n    ) {\n      return;\n    }\n    if (!viewport || !firstFocusedLine || !lastFocusedLine) return;\n    const viewportBounds = viewport.getBoundingClientRect();\n    const firstBounds = firstFocusedLine.getBoundingClientRect();\n    const lastBounds = lastFocusedLine.getBoundingClientRect();\n    const selectionTop =\n      viewport.scrollTop + firstBounds.top - viewportBounds.top;\n    const selectionBottom =\n      viewport.scrollTop + lastBounds.bottom - viewportBounds.top;\n    const selectionHeight = selectionBottom - selectionTop;\n    const padding = 16;\n    const desiredTop =\n      selectionHeight <= viewport.clientHeight - padding * 2\n        ? selectionTop - (viewport.clientHeight - selectionHeight) / 2\n        : selectionTop - padding;\n    const target = Math.max(\n      0,\n      Math.min(viewport.scrollHeight - viewport.clientHeight, desiredTop),\n    );\n    viewport.scrollLeft = 0;\n    viewport.scrollTop = target;\n    handledScrollRequestRef.current = scrollRequestId;\n  });\n\n  const sectionAtTarget = (target: EventTarget) => {\n    if (!(target instanceof Element)) return undefined;\n    const line = target.closest<HTMLElement>('[data-line]');\n    if (!line) return undefined;\n    const lineNumber = Number(line.dataset.line);\n    return sections\n      .filter(\n        ({ range: sectionRange }) =>\n          lineNumber >= sectionRange.startLine &&\n          lineNumber <= sectionRange.endLine,\n      )\n      .sort(\n        (left, right) =>\n          left.range.endLine -\n          left.range.startLine -\n          (right.range.endLine - right.range.startLine),\n      )[0];\n  };\n\n  const setHoveredSection = (sectionId: string | null) => {\n    if (hoveredSectionRef.current === sectionId) return;\n    hoveredSectionRef.current = sectionId;\n    const section = sections.find((candidate) => candidate.id === sectionId);\n    viewportRef.current\n      ?.querySelectorAll<HTMLElement>('[data-line]')\n      .forEach((line) => {\n        const lineNumber = Number(line.dataset.line);\n        line.classList.toggle(\n          'source-line-section-hovered',\n          Boolean(\n            section &&\n            lineNumber >= section.range.startLine &&\n            lineNumber <= section.range.endLine,\n          ),\n        );\n        paintSourceLine(\n          line,\n          Boolean(\n            section &&\n            lineNumber >= section.range.startLine &&\n            lineNumber <= section.range.endLine,\n          ),\n        );\n      });\n  };\n\n  const handleSectionClick = (target: EventTarget) => {\n    if (!onSectionClick) return;\n    const section = sectionAtTarget(target);\n    if (section) onSectionClick(section.id);\n  };\n\n  return (\n    <section\n      className={cn(\n        'flex flex-col bg-background',\n        autoHeight ? 'h-auto' : 'h-full min-h-0',\n        className,\n      )}\n      aria-label={`Source: ${filePath}`}\n    >\n      {showHeader && (\n        <header className=\"flex h-11 shrink-0 items-center gap-3 border-b border-border px-3\">\n          <span\n            className=\"min-w-0 flex-1 truncate font-mono text-xs\"\n            title={filePath}\n          >\n            {filePath}\n          </span>\n          {actions}\n        </header>\n      )}\n      <div\n        ref={viewportRef}\n        style={{ counterReset: `line ${lineOffset}` }}\n        className={cn(\n          'source-viewer',\n          'min-h-0 flex-1 bg-background font-mono text-[13px] [&_.shiki]:bg-transparent! [&_.shiki]:py-3 [&_code]:flex [&_code]:flex-col [&_.source-line]:relative [&_.source-line]:box-border [&_.source-line]:block [&_.source-line]:min-h-[1.375rem] [&_.source-line]:border-s-2 [&_.source-line]:border-transparent [&_.source-line]:pe-6 [&_.source-line]:leading-[1.375rem] [&_.source-line]:transition-colors [&_.source-line]:duration-100 [&_.source-line-section]:cursor-pointer [&_.source-line-focused]:cursor-pointer',\n          autoHeight\n            ? 'overflow-visible [&_.shiki]:min-h-0'\n            : cn(\n                'overflow-y-scroll overscroll-contain [scrollbar-gutter:stable] [&_.shiki]:min-h-full',\n                scrollbarStyles,\n              ),\n          showLineNumbers\n            ? cn(\n                '[&_.source-line]:ps-14 [&_.source-line]:before:absolute [&_.source-line]:before:start-0 [&_.source-line]:before:w-11 [&_.source-line]:before:pe-3 [&_.source-line]:before:text-end [&_.source-line]:before:text-[11px] [&_.source-line]:before:text-muted-foreground/35',\n                lineStatuses === undefined\n                  ? '[&_.source-line]:[counter-increment:line] [&_.source-line]:before:content-[counter(line)]'\n                  : '[&_.source-line]:before:content-[attr(data-line-number)]',\n              )\n            : '[&_.source-line]:ps-4',\n          wrap\n            ? 'overflow-x-hidden [&_.shiki]:w-full [&_.shiki]:min-w-0 [&_code]:w-full [&_.source-line]:break-words [&_.source-line]:whitespace-pre-wrap'\n            : cn(\n                // Lines must span the scrollable width, not the visible width,\n                // or their backgrounds stop short once scrolled sideways.\n                '[&_.shiki]:min-w-max [&_code]:w-max [&_code]:min-w-full',\n                // autoHeight hands scrolling to the parent, so it must not also\n                // scroll here: a nested overflow-x forces overflow-y to scroll.\n                !autoHeight && 'overflow-x-auto',\n              ),\n        )}\n        onClick={(event) => handleSectionClick(event.target)}\n        onPointerMove={(event) =>\n          setHoveredSection(sectionAtTarget(event.target)?.id ?? null)\n        }\n        onPointerLeave={() => setHoveredSection(null)}\n        dangerouslySetInnerHTML={{ __html: html }}\n      />\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/define/index.d.ts

@@ -0,0 +1,10 @@
+import { Api, ApiClient, ApiClients, Apis, DeviceBackend, DeviceBackends, RpcsOf, Transport } from "../app/apis/apis.js";
+import "../app/apis/index.js";
+import { Backend, Storage } from "../app/host/host.js";
+import "../app/host/index.js";
+import { SessionStatus } from "../app/session/status.js";
+import { StdSync } from "../app/session/open.js";
+import { Run, SessionClosed, SessionContext, SessionDef, SessionOf, defineSession } from "../app/session/define.js";
+import { keepSyncs, syncName } from "../app/session/keeper.js";
+import "../app/session/index.js";
+export { Api, type ApiClient, type ApiClients, type Apis, type Backend, type DeviceBackend, type DeviceBackends, type RpcsOf, type Run, SessionClosed, type SessionContext, type SessionDef, type SessionOf, type SessionStatus, type StdSync, type Storage, type Transport, defineSession, keepSyncs, syncName };

package/dist/define/index.js

@@ -0,0 +1,4 @@
+import { Api } from "../app/apis/apis.js";
+import { SessionClosed, defineSession } from "../app/session/define.js";
+import { keepSyncs, syncName } from "../app/session/keeper.js";
+export { Api, SessionClosed, defineSession, keepSyncs, syncName };

package/dist/feedback/index.d.ts

@@ -0,0 +1,2 @@
+import { SoundName, play } from "./sound.js";
+export { type SoundName, play };

package/dist/feedback/index.js

@@ -0,0 +1,2 @@
+import { play } from "./sound.js";
+export { play };

package/dist/feedback/sound.d.ts

@@ -0,0 +1,28 @@
+//#region src/feedback/sound.d.ts
+/**
+ * The app's sounds, made by the browser as they play: no files to load,
+ * each under 150 ms and quiet, so they confirm rather than announce.
+ */
+export type SoundName =
+/** One step through a list. */
+'tick' |
+/** A Command is ready to run when the finger lifts. */
+'arm' |
+/** A Command ran. */
+'confirm' |
+/** A gesture's Command ran: softer than confirm. */
+'success' |
+/** A sheet opened. */
+'open' |
+/** A sheet closed. */
+'close' |
+/** Nothing to do that way. */
+'wrong' |
+/** The theme changed. */
+'theme' |
+/** Money saved. */
+'coin';
+/** Plays one sound now. Whether a sound is wanted is the caller's to say. */
+export declare const play: (name: SoundName) => void;
+//#endregion
+//# sourceMappingURL=sound.d.ts.map

package/dist/feedback/sound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sound.d.ts","names":[],"sources":["../../src/feedback/sound.ts"],"mappings":";;;;;YAIY;;;;;;;;;;;;;;;;;;;;qBA8JC,OAAI,MAAU"}

package/dist/feedback/sound.js

@@ -0,0 +1,150 @@
+//#region src/feedback/sound.ts
+const tone = (options) => (context, out, now) => {
+	const at = now + (options.delay ?? 0);
+	const end = at + options.length;
+	const oscillator = context.createOscillator();
+	const gain = context.createGain();
+	oscillator.type = options.type ?? "sine";
+	oscillator.frequency.setValueAtTime(options.from, at);
+	if (options.to !== void 0) oscillator.frequency.exponentialRampToValueAtTime(options.to, end);
+	gain.gain.setValueAtTime(1e-4, at);
+	gain.gain.exponentialRampToValueAtTime(options.gain, at + .006);
+	gain.gain.exponentialRampToValueAtTime(1e-4, end);
+	oscillator.connect(gain).connect(out);
+	oscillator.start(at);
+	oscillator.stop(end + .02);
+};
+const air = (options) => (context, out, at) => {
+	const length = Math.ceil(context.sampleRate * options.length);
+	const buffer = context.createBuffer(1, length, context.sampleRate);
+	const data = buffer.getChannelData(0);
+	for (let i = 0; i < length; i++) data[i] = Math.random() * 2 - 1;
+	const source = context.createBufferSource();
+	source.buffer = buffer;
+	const filter = context.createBiquadFilter();
+	filter.type = "bandpass";
+	filter.Q.value = 1.4;
+	filter.frequency.setValueAtTime(options.from, at);
+	filter.frequency.exponentialRampToValueAtTime(options.to, at + options.length);
+	const gain = context.createGain();
+	gain.gain.setValueAtTime(1e-4, at);
+	gain.gain.exponentialRampToValueAtTime(options.gain, at + options.length * .35);
+	gain.gain.exponentialRampToValueAtTime(1e-4, at + options.length);
+	source.connect(filter).connect(gain).connect(out);
+	source.start(at);
+};
+const both = (...voices) => (context, out, at) => {
+	for (const voice of voices) voice(context, out, at);
+};
+const VOICES = {
+	tick: tone({
+		from: 1850,
+		to: 1400,
+		length: .025,
+		gain: .12
+	}),
+	arm: tone({
+		from: 1180,
+		to: 1320,
+		type: "triangle",
+		length: .05,
+		gain: .12
+	}),
+	confirm: both(tone({
+		from: 660,
+		length: .07,
+		gain: .14,
+		type: "triangle"
+	}), tone({
+		from: 990,
+		length: .09,
+		gain: .12,
+		type: "triangle",
+		delay: .05
+	})),
+	success: tone({
+		from: 1320,
+		to: 1760,
+		length: .07,
+		gain: .07
+	}),
+	open: air({
+		from: 500,
+		to: 2400,
+		length: .12,
+		gain: .16
+	}),
+	close: air({
+		from: 2200,
+		to: 450,
+		length: .11,
+		gain: .14
+	}),
+	wrong: both(tone({
+		from: 190,
+		to: 120,
+		type: "square",
+		length: .09,
+		gain: .05
+	}), tone({
+		from: 140,
+		to: 95,
+		type: "square",
+		length: .12,
+		gain: .04,
+		delay: .06
+	})),
+	theme: both(tone({
+		from: 880,
+		length: .12,
+		gain: .08
+	}), tone({
+		from: 1320,
+		length: .14,
+		gain: .06,
+		delay: .03
+	}), tone({
+		from: 1760,
+		length: .15,
+		gain: .04,
+		delay: .06
+	})),
+	coin: both(tone({
+		from: 1568,
+		length: .06,
+		gain: .1,
+		type: "triangle"
+	}), tone({
+		from: 2093,
+		length: .12,
+		gain: .09,
+		type: "triangle",
+		delay: .055
+	}))
+};
+let context;
+let master;
+const output = () => {
+	if (typeof AudioContext === "undefined") return void 0;
+	if (context === void 0) {
+		context = new AudioContext();
+		master = context.createGain();
+		master.gain.value = .9;
+		master.connect(context.destination);
+	}
+	if (context.state === "suspended") context.resume();
+	return {
+		context,
+		out: master
+	};
+};
+/** Plays one sound now. Whether a sound is wanted is the caller's to say. */
+const play = (name) => {
+	const audio = output();
+	if (audio === void 0) return;
+	VOICES[name](audio.context, audio.out, audio.context.currentTime);
+};
+//#endregion
+export { play };
+
+//# sourceMappingURL=sound.js.map

package/dist/feedback/sound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sound.js","names":[],"sources":["../../src/feedback/sound.ts"],"sourcesContent":["/**\n * The app's sounds, made by the browser as they play: no files to load,\n * each under 150 ms and quiet, so they confirm rather than announce.\n */\nexport type SoundName =\n  /** One step through a list. */\n  | 'tick'\n  /** A Command is ready to run when the finger lifts. */\n  | 'arm'\n  /** A Command ran. */\n  | 'confirm'\n  /** A gesture's Command ran: softer than confirm. */\n  | 'success'\n  /** A sheet opened. */\n  | 'open'\n  /** A sheet closed. */\n  | 'close'\n  /** Nothing to do that way. */\n  | 'wrong'\n  /** The theme changed. */\n  | 'theme'\n  /** Money saved. */\n  | 'coin';\n\ntype Voice = (context: AudioContext, out: AudioNode, at: number) => void;\n\n// One tone: a frequency gliding to `to`, rising fast and fading.\nconst tone =\n  (options: {\n    readonly from: number;\n    readonly to?: number;\n    readonly type?: OscillatorType;\n    readonly length: number;\n    readonly gain: number;\n    readonly delay?: number;\n  }): Voice =>\n  (context, out, now) => {\n    const at = now + (options.delay ?? 0);\n    const end = at + options.length;\n    const oscillator = context.createOscillator();\n    const gain = context.createGain();\n    oscillator.type = options.type ?? 'sine';\n    oscillator.frequency.setValueAtTime(options.from, at);\n    if (options.to !== undefined) {\n      oscillator.frequency.exponentialRampToValueAtTime(options.to, end);\n    }\n    gain.gain.setValueAtTime(0.0001, at);\n    gain.gain.exponentialRampToValueAtTime(options.gain, at + 0.006);\n    gain.gain.exponentialRampToValueAtTime(0.0001, end);\n    oscillator.connect(gain).connect(out);\n    oscillator.start(at);\n    oscillator.stop(end + 0.02);\n  };\n\n// A breath of filtered noise, its filter sweeping from `from` to `to` Hz.\nconst air =\n  (options: {\n    readonly from: number;\n    readonly to: number;\n    readonly length: number;\n    readonly gain: number;\n  }): Voice =>\n  (context, out, at) => {\n    const length = Math.ceil(context.sampleRate * options.length);\n    const buffer = context.createBuffer(1, length, context.sampleRate);\n    const data = buffer.getChannelData(0);\n    for (let i = 0; i < length; i++) data[i] = Math.random() * 2 - 1;\n    const source = context.createBufferSource();\n    source.buffer = buffer;\n    const filter = context.createBiquadFilter();\n    filter.type = 'bandpass';\n    filter.Q.value = 1.4;\n    filter.frequency.setValueAtTime(options.from, at);\n    filter.frequency.exponentialRampToValueAtTime(\n      options.to,\n      at + options.length,\n    );\n    const gain = context.createGain();\n    gain.gain.setValueAtTime(0.0001, at);\n    gain.gain.exponentialRampToValueAtTime(\n      options.gain,\n      at + options.length * 0.35,\n    );\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + options.length);\n    source.connect(filter).connect(gain).connect(out);\n    source.start(at);\n  };\n\nconst both =\n  (...voices: ReadonlyArray<Voice>): Voice =>\n  (context, out, at) => {\n    for (const voice of voices) voice(context, out, at);\n  };\n\nconst VOICES: Readonly<Record<SoundName, Voice>> = {\n  tick: tone({ from: 1850, to: 1400, length: 0.025, gain: 0.12 }),\n  arm: tone({\n    from: 1180,\n    to: 1320,\n    type: 'triangle',\n    length: 0.05,\n    gain: 0.12,\n  }),\n  confirm: both(\n    tone({ from: 660, length: 0.07, gain: 0.14, type: 'triangle' }),\n    tone({\n      from: 990,\n      length: 0.09,\n      gain: 0.12,\n      type: 'triangle',\n      delay: 0.05,\n    }),\n  ),\n  success: tone({ from: 1320, to: 1760, length: 0.07, gain: 0.07 }),\n  open: air({ from: 500, to: 2400, length: 0.12, gain: 0.16 }),\n  close: air({ from: 2200, to: 450, length: 0.11, gain: 0.14 }),\n  wrong: both(\n    tone({ from: 190, to: 120, type: 'square', length: 0.09, gain: 0.05 }),\n    tone({\n      from: 140,\n      to: 95,\n      type: 'square',\n      length: 0.12,\n      gain: 0.04,\n      delay: 0.06,\n    }),\n  ),\n  theme: both(\n    tone({ from: 880, length: 0.12, gain: 0.08 }),\n    tone({ from: 1320, length: 0.14, gain: 0.06, delay: 0.03 }),\n    tone({ from: 1760, length: 0.15, gain: 0.04, delay: 0.06 }),\n  ),\n  coin: both(\n    tone({ from: 1568, length: 0.06, gain: 0.1, type: 'triangle' }),\n    tone({\n      from: 2093,\n      length: 0.12,\n      gain: 0.09,\n      type: 'triangle',\n      delay: 0.055,\n    }),\n  ),\n};\n\nlet context: AudioContext | undefined;\nlet master: GainNode | undefined;\n\n// The browser lets sound start only after the user touched or typed, so the\n// context is made on the first sound, which always follows one.\nconst output = () => {\n  if (typeof AudioContext === 'undefined') return undefined;\n  if (context === undefined) {\n    context = new AudioContext();\n    master = context.createGain();\n    master.gain.value = 0.9;\n    master.connect(context.destination);\n  }\n  if (context.state === 'suspended') void context.resume();\n  return { context, out: master! };\n};\n\n/** Plays one sound now. Whether a sound is wanted is the caller's to say. */\nexport const play = (name: SoundName) => {\n  const audio = output();\n  if (audio === undefined) return;\n  VOICES[name](audio.context, audio.out, audio.context.currentTime);\n};\n"],"mappings":"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"}

package/dist/form/components/submit-button.d.ts

@@ -0,0 +1,11 @@
+import { Button, buttonVariants } from "../../components/ui/button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/form/components/submit-button.d.ts
+export interface SubmitButtonProps extends Omit<React$1.ComponentProps<typeof Button>, 'type'>, VariantProps<typeof buttonVariants> {
+  loadingText?: string;
+  loadingIndicator?: React$1.ReactNode;
+}
+export declare function SubmitButton({ children, loadingText, loadingIndicator, disabled, ...props }: SubmitButtonProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=submit-button.d.ts.map

package/dist/form/components/submit-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-button.d.ts","names":["React"],"sources":["../../../src/form/components/submit-button.tsx"],"mappings":";;;;iBAQiB,0BAEb,KAAKA,QAAM,sBAAsB,kBACjC,oBAAoB;EACtB;EACA,mBAAmBA,QAAM;;wBAGX,eACd,UACA,aACA,kBACA,aACG,SACF,oBAAiBA,QAAA,IAAA"}

package/dist/form/components/submit-button.js

@@ -0,0 +1,26 @@
+"use client";
+import { Button } from "../../components/ui/button.js";
+import { useFormContext } from "../context.js";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/components/submit-button.tsx
+function SubmitButton({ children, loadingText, loadingIndicator, disabled, ...props }) {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(form.Subscribe, {
+		selector: (state) => ({
+			isSubmitting: state.isSubmitting,
+			canSubmit: state.canSubmit
+		}),
+		children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsx(Button, {
+			"data-slot": "submit-button",
+			type: "submit",
+			disabled: disabled || isSubmitting || !canSubmit,
+			...props,
+			children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment$1, { children: [loadingIndicator, loadingText ?? children] }) : children
+		})
+	});
+}
+//#endregion
+export { SubmitButton };
+
+//# sourceMappingURL=submit-button.js.map

package/dist/form/components/submit-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-button.js","names":[],"sources":["../../../src/form/components/submit-button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Button, type buttonVariants } from '#components/ui/button';\nimport { useFormContext } from '../context.js';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport interface SubmitButtonProps\n  extends\n    Omit<React.ComponentProps<typeof Button>, 'type'>,\n    VariantProps<typeof buttonVariants> {\n  loadingText?: string;\n  loadingIndicator?: React.ReactNode;\n}\n\nexport function SubmitButton({\n  children,\n  loadingText,\n  loadingIndicator,\n  disabled,\n  ...props\n}: SubmitButtonProps) {\n  const form = useFormContext();\n\n  return (\n    <form.Subscribe\n      selector={(state) => ({\n        isSubmitting: state.isSubmitting,\n        canSubmit: state.canSubmit,\n      })}\n    >\n      {({ isSubmitting, canSubmit }) => (\n        <Button\n          data-slot=\"submit-button\"\n          type=\"submit\"\n          disabled={disabled || isSubmitting || !canSubmit}\n          {...props}\n        >\n          {isSubmitting ? (\n            <>\n              {loadingIndicator}\n              {loadingText ?? children}\n            </>\n          ) : (\n            children\n          )}\n        </Button>\n      )}\n    </form.Subscribe>\n  );\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,aAAa,EAC3B,UACA,aACA,kBACA,UACA,GAAG,SACiB;CACpB,MAAM,OAAO,eAAe;CAE5B,OACE,oBAAC,KAAK,WAAN;EACE,WAAW,WAAW;GACpB,cAAc,MAAM;GACpB,WAAW,MAAM;EACnB;EAEE,WAAA,EAAE,cAAc,gBAChB,oBAAC,QAAD;GACE,aAAU;GACV,MAAK;GACL,UAAU,YAAY,gBAAgB,CAAC;GACvC,GAAI;GAEH,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA,CACG,kBACA,eAAe,QAChB,EAAA,CAAA,IAEF;EAEI,CAAA;CAEI,CAAA;AAEpB"}

package/dist/form/context.d.ts

@@ -0,0 +1,8 @@
+//#region src/form/context.d.ts
+/**
+ * Form hook contexts for TanStack Form integration.
+ * These contexts allow field and form components to access their respective APIs.
+ */
+export declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+//#endregion
+//# sourceMappingURL=context.d.ts.map

package/dist/form/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/form/context.ts"],"mappings":";;;;;qBAMe,8BAAY,uCAAA,cAAE,6BAAW,uCAAA,aAAE,kBAAe,2CAAA,sBAAA,4GAAE,qDAAc,qBAAA"}

package/dist/form/context.js

@@ -0,0 +1,11 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+//#region src/form/context.ts
+/**
+* Form hook contexts for TanStack Form integration.
+* These contexts allow field and form components to access their respective APIs.
+*/
+const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();
+//#endregion
+export { fieldContext, formContext, useFieldContext, useFormContext };
+
+//# sourceMappingURL=context.js.map

package/dist/form/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/form/context.ts"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * Form hook contexts for TanStack Form integration.\n * These contexts allow field and form components to access their respective APIs.\n */\nexport const { fieldContext, formContext, useFieldContext, useFormContext } =\n  createFormHookContexts();\n"],"mappings":";;;;;;AAMA,MAAa,EAAE,cAAc,aAAa,iBAAiB,mBACzD,uBAAuB"}