@fabrika/canvas-kernel 0.1.45 → 0.3.1

package/src/client/components/FilePreview.tsx

@@ -1,88 +1,116 @@
-import React, { useEffect, useState, useContext, useRef } from "react";
-import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
+import { ActiveViewCtx, SessionContext } from '#canvas/runtime'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { pageHighlighter } from '../pageGlobals'
+import { filePreviewResponseSchema } from '../persistenceSchemas'
 
 interface FilePreviewProps {
-  path: string;
-  lines?: [number, number];
-  /** Injected by compiler at build time — skip runtime fetch when present */
-  __content?: string;
+	path: string
+	lines?: [number, number]
+	/** Injected by compiler at build time — skip runtime fetch when present */
+	__content?: string
 }
 
 const EXT_TO_LANG: Record<string, string> = {
-  ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
-  py: "python", rs: "rust", go: "go", rb: "ruby", java: "java",
-  json: "json", yaml: "yaml", yml: "yaml", md: "markdown",
-  css: "css", html: "html", sh: "bash", bash: "bash", toml: "toml",
-  sql: "sql", xml: "xml", c: "c", cpp: "cpp", h: "c",
-};
+	ts: 'typescript',
+	tsx: 'typescript',
+	js: 'javascript',
+	jsx: 'javascript',
+	py: 'python',
+	rs: 'rust',
+	go: 'go',
+	rb: 'ruby',
+	java: 'java',
+	json: 'json',
+	yaml: 'yaml',
+	yml: 'yaml',
+	md: 'markdown',
+	css: 'css',
+	html: 'html',
+	sh: 'bash',
+	bash: 'bash',
+	toml: 'toml',
+	sql: 'sql',
+	xml: 'xml',
+	c: 'c',
+	cpp: 'cpp',
+	h: 'c',
+}
 
 export function FilePreview({ path, lines, __content }: FilePreviewProps) {
-  const sessionId = useContext(SessionContext);
-  const { setActiveView } = useContext(ActiveViewCtx);
-  const [content, setContent] = useState<string | null>(__content ?? null);
-  const [language, setLanguage] = useState(() => {
-    const ext = path.split(".").pop() || "";
-    return EXT_TO_LANG[ext] || "text";
-  });
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(!__content);
-  const codeRef = useRef<HTMLElement>(null);
+	const sessionId = useContext(SessionContext)
+	const { setActiveView } = useContext(ActiveViewCtx)
+	const [content, setContent] = useState<string | null>(__content ?? null)
+	const [language, setLanguage] = useState(() => {
+		const ext = path.split('.').pop() || ''
+		return EXT_TO_LANG[ext] || 'text'
+	})
+	const [error, setError] = useState<string | null>(null)
+	const [loading, setLoading] = useState(!__content)
+	const codeRef = useRef<HTMLElement>(null)
 
-  useEffect(() => {
-    if (__content !== undefined) return; // already resolved at compile time
-    setLoading(true);
-    setError(null);
-    fetch(`/api/file?session=${sessionId}&path=${encodeURIComponent(path)}`)
-      .then((r) => r.json())
-      .then((data: any) => {
-        if (data.error) {
-          setError(data.error);
-        } else {
-          let text = data.content;
-          if (lines) {
-            const allLines = text.split("\n");
-            text = allLines.slice(lines[0] - 1, lines[1]).join("\n");
-          }
-          setContent(text);
-          setLanguage(data.language || "text");
-        }
-      })
-      .catch(() => setError("Failed to fetch file"))
-      .finally(() => setLoading(false));
-  }, [sessionId, path, lines?.[0], lines?.[1], __content]);
+	useEffect(() => {
+		if (__content !== undefined) return // already resolved at compile time
+		setLoading(true)
+		setError(null)
+		fetch(`/api/file?session=${sessionId}&path=${encodeURIComponent(path)}`)
+			.then((r) => r.json())
+			.then((value: unknown) => {
+				const data = filePreviewResponseSchema.parse(value)
+				if ('error' in data) {
+					setError(data.error)
+				} else {
+					let text = data.content
+					if (lines) {
+						const allLines = text.split('\n')
+						text = allLines.slice(lines[0] - 1, lines[1]).join('\n')
+					}
+					setContent(text)
+					setLanguage(data.language || 'text')
+				}
+			})
+			.catch(() => setError('Failed to fetch file'))
+			.finally(() => setLoading(false))
+	}, [sessionId, path, lines?.[0], lines?.[1], __content])
 
-  // Highlight after content loads
-  useEffect(() => {
-    const el = codeRef.current;
-    const hljs = (window as any).hljs;
-    if (!el || !hljs || !content) return;
-    el.removeAttribute("data-highlighted");
-    el.className = language ? `language-${language}` : "";
-    el.textContent = content;
-    hljs.highlightElement(el);
-  }, [content, language]);
+	// Highlight after content loads
+	useEffect(() => {
+		const el = codeRef.current
+		const hljs = pageHighlighter()
+		if (!el || !hljs || !content) return
+		el.removeAttribute('data-highlighted')
+		el.className = language ? `language-${language}` : ''
+		el.textContent = content
+		hljs.highlightElement(el)
+	}, [content, language])
 
-  if (loading) {
-    return <div className="text-text-tertiary text-body mt-3 bg-bg-code rounded-md p-4">Loading {path}...</div>;
-  }
+	if (loading) {
+		return <div className="text-text-tertiary text-body mt-3 bg-bg-code rounded-md p-4">Loading {path}...</div>
+	}
 
-  if (error) {
-    return <div className="text-accent-red text-body mt-3 bg-accent-red-muted rounded-md p-4">{path}: {error}</div>;
-  }
+	if (error) {
+		return <div className="text-accent-red text-body mt-3 bg-accent-red-muted rounded-md p-4">{path}: {error}</div>
+	}
 
-  return (
-    <div className="mt-3 bg-bg-code rounded-md overflow-hidden" data-md="filepreview" data-md-path={path} {...(lines ? { "data-md-lines": `${lines[0]}-${lines[1]}` } : {})}>
-      <div className="px-4 py-2 flex items-center justify-between">
-        <button
-          className="font-mono text-meta text-text-tertiary hover:text-text-secondary hover:underline cursor-pointer text-left"
-          onClick={() => setActiveView({ type: "file", path })}
-          title={`Open ${path}`}
-        >{path}</button>
-        {lines && <span className="font-mono text-meta text-text-tertiary opacity-60">L{lines[0]}–{lines[1]}</span>}
-      </div>
-      <pre className="px-4 pb-3 overflow-x-auto text-code font-mono !bg-transparent" style={{ background: "transparent" }}>
+	return (
+		<div
+			className="mt-3 bg-bg-code rounded-md overflow-hidden"
+			data-md="filepreview"
+			data-md-path={path}
+			{...(lines ? { 'data-md-lines': `${lines[0]}-${lines[1]}` } : {})}
+		>
+			<div className="px-4 py-2 flex items-center justify-between">
+				<button
+					className="font-mono text-meta text-text-tertiary hover:text-text-secondary hover:underline cursor-pointer text-left"
+					onClick={() => setActiveView({ type: 'file', path })}
+					title={`Open ${path}`}
+				>
+					{path}
+				</button>
+				{lines && <span className="font-mono text-meta text-text-tertiary opacity-60">L{lines[0]}–{lines[1]}</span>}
+			</div>
+			<pre className="px-4 pb-3 overflow-x-auto text-code font-mono !bg-transparent" style={{ background: 'transparent' }}>
         <code ref={codeRef} className={language ? `language-${language}` : ""}>{content}</code>
-      </pre>
-    </div>
-  );
+			</pre>
+		</div>
+	)
 }

package/src/client/components/Image.tsx

@@ -1,48 +1,50 @@
-import React, { useContext, useState } from "react";
-import { SessionContext } from "#canvas/runtime";
+import { SessionContext } from '#canvas/runtime'
+import { useContext, useState } from 'react'
 
 interface ImageProps {
-  src: string;
-  alt?: string;
-  caption?: string;
-  width?: number | string;
-  height?: number | string;
+	src: string
+	alt?: string
+	caption?: string
+	width?: number | string
+	height?: number | string
 }
 
 export function ImageView({ src, alt, caption, width, height }: ImageProps) {
-  const sessionId = useContext(SessionContext);
-  const [error, setError] = useState(false);
+	const sessionId = useContext(SessionContext)
+	const [error, setError] = useState(false)
 
-  const imgSrc = `/api/image?session=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(src)}`;
+	const imgSrc = `/api/image?session=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(src)}`
 
-  if (error) {
-    return (
-      <div className="mt-3 text-accent-red text-body bg-accent-red-muted rounded-md p-4">
-        {src}: Failed to load image
-      </div>
-    );
-  }
+	if (error) {
+		return (
+			<div className="mt-3 text-accent-red text-body bg-accent-red-muted rounded-md p-4">
+				{src}: Failed to load image
+			</div>
+		)
+	}
 
-  return (
-    <figure className="mt-3 relative" data-md="image" data-md-src={src}>
-      {/* The box a region annotation is measured against — the image alone, so
-          the caption below cannot skew the percentages. */}
-      <div data-annotation-image className="rounded-md overflow-hidden border border-border-subtle bg-bg-code inline-block">
-        <img
-          src={imgSrc}
-          alt={alt || src}
-          onError={() => setError(true)}
-          draggable={false}
-          className="block max-w-full h-auto"
-          {...(width ? { width } : {})}
-          {...(height ? { height } : {})}
-        />
-      </div>
-      {caption && (
-        <figcaption className="mt-1.5 text-meta text-text-tertiary font-body">
-          {caption}
-        </figcaption>
-      )}
-    </figure>
-  );
+	return (
+		<figure className="mt-3 relative" data-md="image" data-md-src={src}>
+			{
+				/* The box a region annotation is measured against — the image alone, so
+          the caption below cannot skew the percentages. */
+			}
+			<div data-annotation-image className="rounded-md overflow-hidden border border-border-subtle bg-bg-code inline-block">
+				<img
+					src={imgSrc}
+					alt={alt || src}
+					onError={() => setError(true)}
+					draggable={false}
+					className="block max-w-full h-auto"
+					{...(width ? { width } : {})}
+					{...(height ? { height } : {})}
+				/>
+			</div>
+			{caption && (
+				<figcaption className="mt-1.5 text-meta text-text-tertiary font-body">
+					{caption}
+				</figcaption>
+			)}
+		</figure>
+	)
 }

package/src/client/components/Markdown.tsx

@@ -1,44 +1,45 @@
-import React, { useMemo } from "react";
-import { marked } from "marked";
+// biome-ignore-all lint/security/noDangerouslySetInnerHtml: Canvas modules already execute as code in this document.
+import { marked } from 'marked'
+import React, { useMemo } from 'react'
 
 interface MarkdownProps {
-  /** Inline markdown source (via children) */
-  children?: React.ReactNode;
-  /** File path (resolved at compile time) */
-  file?: string;
-  /** Injected by compiler when file prop is used */
-  __content?: string;
+	/** Inline markdown source (via children) */
+	children?: React.ReactNode
+	/** File path (resolved at compile time) */
+	file?: string
+	/** Injected by compiler when file prop is used */
+	__content?: string
 }
 
 // Configure marked for safe rendering
 marked.setOptions({
-  gfm: true,
-  breaks: false,
-});
+	gfm: true,
+	breaks: false,
+})
 
 export function Markdown({ children, file, __content }: MarkdownProps) {
-  const source = __content ?? (typeof children === "string" ? children : String(children ?? ""));
+	const source = __content ?? (typeof children === 'string' ? children : String(children ?? ''))
 
-  const html = useMemo(() => {
-    if (!source) return "";
-    return marked.parse(source, { async: false }) as string;
-  }, [source]);
+	const html = useMemo(() => {
+		if (!source) return ''
+		return marked.parse(source, { async: false }) as string
+	}, [source])
 
-  if (!source) {
-    return (
-      <div className="text-text-tertiary text-tiny mt-3">
-        {file ? `Could not load: ${file}` : "No markdown content"}
-      </div>
-    );
-  }
+	if (!source) {
+		return (
+			<div className="text-text-tertiary text-tiny mt-3">
+				{file ? `Could not load: ${file}` : 'No markdown content'}
+			</div>
+		)
+	}
 
-  return (
-    <div
-      className="mt-3 prose-canvas"
-      data-md="markdown"
-      {...(file ? { "data-md-file": file } : {})}
-      data-md-source={source}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
+	return (
+		<div
+			className="mt-3 prose-canvas"
+			data-md="markdown"
+			{...(file ? { 'data-md-file': file } : {})}
+			data-md-source={source}
+			dangerouslySetInnerHTML={{ __html: html }}
+		/>
+	)
 }