@fabrika/canvas-kernel 0.1.44 → 0.2.0

package/src/client/RenderErrorContext.ts

@@ -1,11 +1,11 @@
-import { createContext } from "react";
+import { createContext } from 'react'
 
 export interface CanvasRenderError {
-  revision: number;
-  filename: string;
-  message: string;
-  stack?: string;
-  componentStack?: string;
+	revision: number
+	filename: string
+	message: string
+	stack?: string
+	componentStack?: string
 }
 
-export const RenderErrorContext = createContext<(error: CanvasRenderError) => void>(() => {});
+export const RenderErrorContext = createContext<(error: CanvasRenderError) => void>(() => {})

package/src/client/ResponsePreview.tsx

@@ -1,186 +1,205 @@
-import React, { useEffect, useState, useRef, useMemo } from "react";
-import { marked } from "marked";
-import { useAnnotations } from "./AnnotationProvider";
-import { generateMarkdown, getMissingRequiredLabels } from "./generateMarkdown";
+import { marked } from 'marked'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useAnnotations } from './AnnotationProvider'
+import { generateMarkdown, getMissingRequiredLabels } from './generateMarkdown'
 
 interface ResponsePreviewProps {
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (feedback: string) => void;
-  includedRemoteIds: Set<string>;
-  onToggleRemoteId: (id: string) => void;
+	open: boolean
+	onClose: () => void
+	onSubmit: (feedback: string) => void
+	includedRemoteIds: Set<string>
+	onToggleRemoteId: (id: string) => void
 }
 
 export function ResponsePreview({ open, onClose, onSubmit, includedRemoteIds, onToggleRemoteId }: ResponsePreviewProps) {
-  const { annotations, generalNote, submittableResponses, feedbackEntries } = useAnnotations();
-  const [editedText, setEditedText] = useState("");
-  const [manuallyEdited, setManuallyEdited] = useState(false);
-  const [editMode, setEditMode] = useState(false);
-  const [validationError, setValidationError] = useState<string | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [prevOpen, setPrevOpen] = useState(false);
-
-  const remoteAnnotations = useMemo(
-    () => annotations.filter((a) => a.source === "remote"),
-    [annotations],
-  );
-
-  if (open && !prevOpen) {
-    setManuallyEdited(false);
-    setEditMode(false);
-    setValidationError(null);
-  }
-  if (!open && prevOpen) {
-    setManuallyEdited(false);
-    setEditMode(false);
-    setValidationError(null);
-  }
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-  }
-
-  const generatedText = useMemo(
-    () => generateMarkdown(annotations, generalNote, submittableResponses, feedbackEntries, includedRemoteIds),
-    [annotations, generalNote, submittableResponses, feedbackEntries, includedRemoteIds],
-  );
-  const text = manuallyEdited ? editedText : generatedText;
-
-  useEffect(() => {
-    if (open && editMode && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [open, editMode]);
-
-  useEffect(() => {
-    if (!open) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  const hasContent = text.trim().length > 0;
-
-  return (
-    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-8" onClick={onClose}>
-      <div className="bg-bg-surface border border-border-medium rounded-xl shadow-lg w-full max-w-2xl flex flex-col" style={{ height: "80vh" }} onClick={(e) => e.stopPropagation()}>
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-3 border-b border-border-subtle flex-shrink-0">
-          <div className="flex items-center gap-3">
-            <span className="text-[13px] font-medium text-text-primary font-body">Response preview</span>
-            {manuallyEdited && (
-              <button onClick={() => { setManuallyEdited(false); setEditMode(false); }} className="text-[11px] text-text-tertiary hover:text-text-secondary font-body">
-                Reset
-              </button>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            {/* Mode toggle */}
-            <div className="flex items-center bg-bg-base rounded-md p-0.5">
-              <button
-                onClick={() => setEditMode(false)}
-                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
-                  !editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
-                }`}
-              >
-                Preview
-              </button>
-              <button
-                onClick={() => setEditMode(true)}
-                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
-                  editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
-                }`}
-              >
-                Edit
-              </button>
-            </div>
-            <button onClick={onClose} className="text-text-tertiary hover:text-text-secondary w-7 h-7 flex items-center justify-center rounded-md hover:bg-border-subtle transition-colors">
-              &#x2715;
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        {editMode ? (
-          <textarea
-            ref={textareaRef}
-            value={text}
-            onChange={(e) => { setEditedText(e.currentTarget.value); setManuallyEdited(true); }}
-            className="flex-1 w-full bg-bg-base p-5 text-[13px] font-mono text-text-code resize-none focus:outline-none leading-relaxed placeholder:text-text-disabled"
-            placeholder="Your feedback will appear here..."
-          />
-        ) : (
-          <div className="flex-1 overflow-y-auto p-5">
-            <MarkdownPreview text={text} />
-          </div>
-        )}
-
-        {/* Remote feedback summary */}
-        {remoteAnnotations.length > 0 && (
-          <div className="px-5 py-2 border-t border-border-subtle flex-shrink-0">
-            <span className="text-[12px] text-text-secondary font-body">
-              Reviewer feedback: {includedRemoteIds.size}/{remoteAnnotations.length} included
-            </span>
-          </div>
-        )}
-
-        {/* Actions */}
-        {validationError && (
-          <div className="px-5 py-2 text-[12px] text-accent-red font-body border-t border-border-subtle flex-shrink-0 flex items-center justify-between gap-2">
-            <span>{validationError}</span>
-            <button
-              onClick={() => {
-                setValidationError(null);
-                onSubmit(text);
-              }}
-              className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
-            >
-              Submit anyway
-            </button>
-          </div>
-        )}
-        <div className="flex justify-end gap-2 px-5 py-3 border-t border-border-subtle flex-shrink-0">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 rounded-lg text-[13px] font-body text-text-tertiary hover:text-text-secondary transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={() => {
-              const allMissing = getMissingRequiredLabels(submittableResponses, feedbackEntries);
-              if (allMissing.length > 0) {
-                setValidationError(`Please answer: ${allMissing.join(", ")}`);
-                return;
-              }
-              setValidationError(null);
-              onSubmit(text);
-            }}
-            disabled={!hasContent}
-            className={`px-6 py-2 rounded-lg font-body text-[13px] font-medium transition-all ${
-              hasContent
-                ? "bg-btn-primary text-btn-primary-text hover:opacity-90"
-                : "bg-bg-input text-text-disabled cursor-default"
-            }`}
-          >
-            Submit feedback
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+	const { annotations, generalNote, submittableResponses, feedbackEntries } = useAnnotations()
+	const [editedText, setEditedText] = useState('')
+	const [manuallyEdited, setManuallyEdited] = useState(false)
+	const [editMode, setEditMode] = useState(false)
+	const [validationError, setValidationError] = useState<string | null>(null)
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const [prevOpen, setPrevOpen] = useState(false)
+
+	const remoteAnnotations = useMemo(
+		() => annotations.filter((a) => a.source === 'remote'),
+		[annotations],
+	)
+
+	if (open && !prevOpen) {
+		setManuallyEdited(false)
+		setEditMode(false)
+		setValidationError(null)
+	}
+	if (!open && prevOpen) {
+		setManuallyEdited(false)
+		setEditMode(false)
+		setValidationError(null)
+	}
+	if (open !== prevOpen) {
+		setPrevOpen(open)
+	}
+
+	const generatedText = useMemo(
+		() => generateMarkdown(annotations, generalNote, submittableResponses, feedbackEntries, includedRemoteIds),
+		[annotations, generalNote, submittableResponses, feedbackEntries, includedRemoteIds],
+	)
+	const text = manuallyEdited ? editedText : generatedText
+
+	useEffect(() => {
+		if (open && editMode && textareaRef.current) {
+			textareaRef.current.focus()
+		}
+	}, [open, editMode])
+
+	useEffect(() => {
+		if (!open) return
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose()
+		}
+		window.addEventListener('keydown', handleKeyDown)
+		return () => window.removeEventListener('keydown', handleKeyDown)
+	}, [open, onClose])
+
+	if (!open) return null
+
+	const hasContent = text.trim().length > 0
+
+	return (
+		<div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-8" onClick={onClose}>
+			<div
+				className="bg-bg-surface border border-border-medium rounded-xl shadow-lg w-full max-w-2xl flex flex-col"
+				style={{ height: '80vh' }}
+				onClick={(e) => e.stopPropagation()}
+			>
+				{/* Header */}
+				<div className="flex items-center justify-between px-5 py-3 border-b border-border-subtle flex-shrink-0">
+					<div className="flex items-center gap-3">
+						<span className="text-[13px] font-medium text-text-primary font-body">Response preview</span>
+						{manuallyEdited && (
+							<button
+								onClick={() => {
+									setManuallyEdited(false)
+									setEditMode(false)
+								}}
+								className="text-[11px] text-text-tertiary hover:text-text-secondary font-body"
+							>
+								Reset
+							</button>
+						)}
+					</div>
+					<div className="flex items-center gap-2">
+						{/* Mode toggle */}
+						<div className="flex items-center bg-bg-base rounded-md p-0.5">
+							<button
+								onClick={() => setEditMode(false)}
+								className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
+									!editMode ? 'bg-bg-elevated text-text-primary shadow-sm' : 'text-text-tertiary hover:text-text-secondary'
+								}`}
+							>
+								Preview
+							</button>
+							<button
+								onClick={() => setEditMode(true)}
+								className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
+									editMode ? 'bg-bg-elevated text-text-primary shadow-sm' : 'text-text-tertiary hover:text-text-secondary'
+								}`}
+							>
+								Edit
+							</button>
+						</div>
+						<button
+							onClick={onClose}
+							className="text-text-tertiary hover:text-text-secondary w-7 h-7 flex items-center justify-center rounded-md hover:bg-border-subtle transition-colors"
+						>
+							&#x2715;
+						</button>
+					</div>
+				</div>
+
+				{/* Content */}
+				{editMode
+					? (
+						<textarea
+							ref={textareaRef}
+							value={text}
+							onChange={(e) => {
+								setEditedText(e.currentTarget.value)
+								setManuallyEdited(true)
+							}}
+							className="flex-1 w-full bg-bg-base p-5 text-[13px] font-mono text-text-code resize-none focus:outline-none leading-relaxed placeholder:text-text-disabled"
+							placeholder="Your feedback will appear here..."
+						/>
+					)
+					: (
+						<div className="flex-1 overflow-y-auto p-5">
+							<MarkdownPreview text={text} />
+						</div>
+					)}
+
+				{/* Remote feedback summary */}
+				{remoteAnnotations.length > 0 && (
+					<div className="px-5 py-2 border-t border-border-subtle flex-shrink-0">
+						<span className="text-[12px] text-text-secondary font-body">
+							Reviewer feedback: {includedRemoteIds.size}/{remoteAnnotations.length} included
+						</span>
+					</div>
+				)}
+
+				{/* Actions */}
+				{validationError && (
+					<div className="px-5 py-2 text-[12px] text-accent-red font-body border-t border-border-subtle flex-shrink-0 flex items-center justify-between gap-2">
+						<span>{validationError}</span>
+						<button
+							onClick={() => {
+								setValidationError(null)
+								onSubmit(text)
+							}}
+							className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
+						>
+							Submit anyway
+						</button>
+					</div>
+				)}
+				<div className="flex justify-end gap-2 px-5 py-3 border-t border-border-subtle flex-shrink-0">
+					<button
+						onClick={onClose}
+						className="px-4 py-2 rounded-lg text-[13px] font-body text-text-tertiary hover:text-text-secondary transition-colors"
+					>
+						Cancel
+					</button>
+					<button
+						onClick={() => {
+							const allMissing = getMissingRequiredLabels(submittableResponses, feedbackEntries)
+							if (allMissing.length > 0) {
+								setValidationError(`Please answer: ${allMissing.join(', ')}`)
+								return
+							}
+							setValidationError(null)
+							onSubmit(text)
+						}}
+						disabled={!hasContent}
+						className={`px-6 py-2 rounded-lg font-body text-[13px] font-medium transition-all ${
+							hasContent
+								? 'bg-btn-primary text-btn-primary-text hover:opacity-90'
+								: 'bg-bg-input text-text-disabled cursor-default'
+						}`}
+					>
+						Submit feedback
+					</button>
+				</div>
+			</div>
+		</div>
+	)
 }
 
-const UPLOADS_PATH_RE = /!\[([^\]]*)\]\((\/tmp\/agent-canvas\/uploads\/([^)]+))\)/g;
+const UPLOADS_PATH_RE = /!\[([^\]]*)\]\((\/tmp\/agent-canvas\/uploads\/([^)]+))\)/g
 
 function rewriteUploadPaths(md: string): string {
-  return md.replace(UPLOADS_PATH_RE, (_match, alt, _fullPath, filename) => `![${alt}](/api/uploads/${filename})`);
+	return md.replace(UPLOADS_PATH_RE, (_match, alt, _fullPath, filename) => `![${alt}](/api/uploads/${filename})`)
 }
 
 export function MarkdownPreview({ text }: { text: string }) {
-  const html = useMemo(() => marked.parse(rewriteUploadPaths(text), { async: false }) as string, [text]);
-  return <div className="prose-canvas font-body text-body text-text-primary leading-relaxed" dangerouslySetInnerHTML={{ __html: html }} />;
+	const html = useMemo(() => marked.parse(rewriteUploadPaths(text), { async: false }) as string, [text])
+	// biome-ignore lint/security/noDangerouslySetInnerHtml: Canvas modules already execute as code in this document.
+	return <div className="prose-canvas font-body text-body text-text-primary leading-relaxed" dangerouslySetInnerHTML={{ __html: html }} />
 }

package/src/client/annotationDom.ts

@@ -1,93 +1,39 @@
-import type { Annotation } from "./AnnotationProvider";
-import type { ActiveView } from "./appContext";
-import { sealTarget, type SealedAnnotationTarget, type TargetAnnotation } from "./annotationTarget";
-import { blockTarget } from "./blockTarget";
-import { regionTarget } from "./regionTarget";
-import { textTarget } from "./textTarget";
-import { fileAnnotationPath } from "./utils";
-
-// The block selectors and the block snippet live with the block target now;
-// re-exported here because this is the path every caller already imports.
-export { ANNOTATABLE_SELECTOR, BLOCK_SELECTOR, getBlockSnippet } from "./blockTarget";
-
-/** Every locator strategy the kernel knows, cheapest and most specific first.
- *  Text claims any snippet at all, so it stays last. */
-export const ANNOTATION_TARGETS: SealedAnnotationTarget[] = [
-  sealTarget(regionTarget),
-  sealTarget(blockTarget),
-  sealTarget(textTarget),
-];
-
-/**
- * The element a snippet names inside `root`.
- *
- * Every target is asked, not just the first one that recognises the string: a
- * file annotation on a line that happens to read like a block snippet must
- * still fall through to the target that can actually resolve it.
- */
-export function findSnippetElement(snippet: string, root: ParentNode): HTMLElement | null {
-  for (const target of ANNOTATION_TARGETS) {
-    const el = target.find(snippet, root);
-    if (el) return el;
-  }
-  return null;
-}
-
-/**
- * Put every annotation's own decoration back after a render — inline marks,
- * region overlays. Each target is asked about each annotation; a snippet is not
- * owned exclusively, and every restore is idempotent, so asking all of them is
- * both correct and free.
- */
-export function restoreAnnotationTargets(root: HTMLElement, annotations: readonly TargetAnnotation[]): void {
-  for (const ann of annotations) {
-    if (!ann.snippet) continue;
-    for (const target of ANNOTATION_TARGETS) {
-      target.restore(root, ann);
-    }
-  }
-}
-
-/** The snippet as a reader should see it. Only a target that encodes something
- *  other than readable text has anything to say; the rest already read fine. */
-export function describeSnippet(snippet: string): string {
-  for (const target of ANNOTATION_TARGETS) {
-    const described = target.describe(snippet);
-    if (described !== null) return described;
-  }
-  return snippet;
-}
+import { fileAnnotationPath, findSnippetElement } from '@fabrika/annotations'
+import type { Annotation } from './AnnotationProvider'
+import type { ActiveView } from './appContext'
 
 /**
  * Find the DOM element for an annotation — the decoration this kernel drew for
  * it, or failing that whatever its snippet names.
  */
 export function findAnnotationElement(ann: Annotation): HTMLElement | null {
-  // Decoration wins over the snippet: a mark or a region box names the exact
-  // run that was annotated, where a snippet only names something that reads the
-  // same today.
-  const decoration = document.querySelector(`[data-annotation-id="${ann.id}"]`);
-  if (decoration instanceof HTMLElement) return decoration;
-
-  // A snippet only identifies its target within its own canvas, and the
-  // overview mounts every canvas at once — searching the whole document lets an
-  // identical block in a different canvas win on document order. No container
-  // for the canvas means it is not on screen, which is a miss, not a reason to
-  // look elsewhere.
-  const root = ann.canvasFile
-    ? document.querySelector(`[data-canvas-file="${ann.canvasFile}"]`)
-    : document;
-  if (!root) return null;
-
-  return findSnippetElement(ann.snippet, root);
+	// Decoration wins over the snippet: a mark or a region box names the exact
+	// run that was annotated, where a snippet only names something that reads the
+	// same today.
+	const decoration = document.querySelector(`[data-annotation-id="${ann.id}"]`)
+	if (decoration instanceof HTMLElement) return decoration
+
+	// A snippet only identifies its target within its own canvas, and the
+	// overview mounts every canvas at once — searching the whole document lets an
+	// identical block in a different canvas win on document order. No container
+	// for the canvas means it is not on screen, which is a miss, not a reason to
+	// look elsewhere.
+	const root = ann.canvasFile
+		? document.querySelector(`[data-canvas-file="${ann.canvasFile}"]`)
+		: document
+	if (!root) return null
+
+	return findSnippetElement(ann.snippet, root)
 }
 
 /** Flash/pulse the element briefly — blinks bg via CSS animation */
 function flashElement(el: HTMLElement) {
-  el.classList.remove("ann-flash");
-  void el.offsetWidth; // force reflow to restart
-  el.classList.add("ann-flash");
-  el.addEventListener("animationend", () => { el.classList.remove("ann-flash"); }, { once: true });
+	el.classList.remove('ann-flash')
+	void el.offsetWidth // force reflow to restart
+	el.classList.add('ann-flash')
+	el.addEventListener('animationend', () => {
+		el.classList.remove('ann-flash')
+	}, { once: true })
 }
 
 /**
@@ -95,21 +41,21 @@ function flashElement(el: HTMLElement) {
  * Handles file annotations by switching view first.
  */
 export function scrollToAnnotation(ann: Annotation, setActiveView: (view: ActiveView) => void) {
-  const filePath = fileAnnotationPath(ann);
-  if (filePath) {
-    setActiveView({ type: "file", path: filePath });
-    setTimeout(() => {
-      const el = findAnnotationElement(ann);
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth", block: "center" });
-        flashElement(el);
-      }
-    }, 150);
-  } else {
-    const el = findAnnotationElement(ann);
-    if (el) {
-      el.scrollIntoView({ behavior: "smooth", block: "center" });
-      flashElement(el);
-    }
-  }
+	const filePath = fileAnnotationPath(ann)
+	if (filePath) {
+		setActiveView({ type: 'file', path: filePath })
+		setTimeout(() => {
+			const el = findAnnotationElement(ann)
+			if (el) {
+				el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+				flashElement(el)
+			}
+		}, 150)
+	} else {
+		const el = findAnnotationElement(ann)
+		if (el) {
+			el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+			flashElement(el)
+		}
+	}
 }