@fabrika/canvas-kernel 0.1.44 → 0.2.0

package/src/client/components/UserInput.tsx

@@ -1,176 +1,193 @@
-import React, { useRef, useState } from "react";
-import { useAnnotations, useResponseRegistration } from "#canvas/runtime";
-import { ResponseNote } from "./ResponseNote";
-import { autoResizeTextarea } from "../utils";
+import { useAnnotations, useResponseRegistration } from '#canvas/runtime'
+import { autoResizeTextarea } from '@fabrika/annotations'
+import React, { useRef, useState } from 'react'
+import { ResponseNote } from './ResponseNote'
 
 /** Free text input from user */
 interface UserInputProps {
-  id: string;
-  label: string;
-  placeholder?: string;
-  multiline?: boolean;
-  required?: boolean;
+	id: string
+	label: string
+	placeholder?: string
+	multiline?: boolean
+	required?: boolean
 }
 
 export function UserInput({ id, label, placeholder, multiline, required }: UserInputProps) {
-  const { responses, setResponse } = useAnnotations();
-  useResponseRegistration(id);
-  const current = responses.get(id);
-  const value = (current?.value as string) ?? "";
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
-  const ref = useRef<HTMLTextAreaElement>(null);
+	const { responses, setResponse } = useAnnotations()
+	useResponseRegistration(id)
+	const current = responses.get(id)
+	const value = (current?.value as string) ?? ''
+	const note = current?.note || ''
+	const [showNote, setShowNote] = useState(false)
+	const ref = useRef<HTMLTextAreaElement>(null)
 
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "text", label, value: "", required });
-  }
+	if (!responses.has(id)) {
+		setResponse(id, { id, type: 'text', label, value: '', required })
+	}
 
-  const handleChange = (v: string) => {
-    setResponse(id, { ...current!, value: v });
-  };
+	const handleChange = (v: string) => {
+		setResponse(id, { ...current!, value: v })
+	}
 
-  const autoResize = (el: HTMLTextAreaElement) => autoResizeTextarea(el, multiline ? 60 : 32);
+	const autoResize = (el: HTMLTextAreaElement) => autoResizeTextarea(el, multiline ? 60 : 32)
 
-  const showError = current?.required && !value.trim();
+	const showError = current?.required && !value.trim()
 
-  return (
-    <div data-md="userinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline gap-2 mb-2">
-        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-      </div>
-      <textarea
-        ref={ref}
-        value={value}
-        onChange={(e) => { handleChange(e.currentTarget.value); autoResize(e.currentTarget); }}
-        placeholder={placeholder || "Type your response..."}
-        rows={multiline ? 3 : 1}
-        className="w-full bg-bg-input text-[13px] font-body text-text-primary rounded-lg px-3 py-2 resize-none focus:outline-none border border-border-subtle focus:border-border-hover placeholder:text-text-tertiary transition-colors"
-        onInput={(e) => autoResize(e.currentTarget)}
-        onFocus={(e) => autoResize(e.currentTarget)}
-      />
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">This field is required.</p>}
-    </div>
-  );
+	return (
+		<div data-md="userinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+			<div className="flex items-baseline gap-2 mb-2">
+				<span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+				{required && <span className="text-[10px] text-accent-red font-body">*</span>}
+			</div>
+			<textarea
+				ref={ref}
+				value={value}
+				onChange={(e) => {
+					handleChange(e.currentTarget.value)
+					autoResize(e.currentTarget)
+				}}
+				placeholder={placeholder || 'Type your response...'}
+				rows={multiline ? 3 : 1}
+				className="w-full bg-bg-input text-[13px] font-body text-text-primary rounded-lg px-3 py-2 resize-none focus:outline-none border border-border-subtle focus:border-border-hover placeholder:text-text-tertiary transition-colors"
+				onInput={(e) => autoResize(e.currentTarget)}
+				onFocus={(e) => autoResize(e.currentTarget)}
+			/>
+			<ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+			{showError && <p className="text-[11px] text-accent-red font-body mt-1">This field is required.</p>}
+		</div>
+	)
 }
 
 /** Numeric range / slider */
 interface RangeInputProps {
-  id: string;
-  label: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  required?: boolean;
-  minLabel?: string;
-  maxLabel?: string;
+	id: string
+	label: string
+	min?: number
+	max?: number
+	step?: number
+	required?: boolean
+	minLabel?: string
+	maxLabel?: string
 }
 
 export function RangeInput({ id, label, min = 1, max = 10, step = 1, required, minLabel, maxLabel }: RangeInputProps) {
-  const { responses, setResponse } = useAnnotations();
-  useResponseRegistration(id);
-  const current = responses.get(id);
-  const value = current?.value as number | null;
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
+	const { responses, setResponse } = useAnnotations()
+	useResponseRegistration(id)
+	const current = responses.get(id)
+	const value = current?.value as number | null
+	const note = current?.note || ''
+	const [showNote, setShowNote] = useState(false)
 
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "range", label, value: null, required });
-  }
+	if (!responses.has(id)) {
+		setResponse(id, { id, type: 'range', label, value: null, required })
+	}
 
-  const handleChange = (v: number) => {
-    setResponse(id, { ...current!, value: v });
-  };
+	const handleChange = (v: number) => {
+		setResponse(id, { ...current!, value: v })
+	}
 
-  const hasValue = value !== null && value !== undefined;
-  const displayValue = hasValue ? value : Math.round((min + max) / 2);
-  const pct = ((displayValue - min) / (max - min)) * 100;
-  const stepCount = Math.round((max - min) / step);
-  const showDots = stepCount <= 20;
+	const hasValue = value !== null && value !== undefined
+	const displayValue = hasValue ? value : Math.round((min + max) / 2)
+	const pct = ((displayValue - min) / (max - min)) * 100
+	const stepCount = Math.round((max - min) / step)
+	const showDots = stepCount <= 20
 
-  const showError = current?.required && !hasValue;
+	const showError = current?.required && !hasValue
 
-  return (
-    <div data-md="rangeinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline justify-between mb-1">
-        <div className="flex items-baseline gap-2">
-          <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-          {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-        </div>
-        <span className="flex items-center gap-1.5">
-          <span className={`text-[13px] font-mono ${hasValue ? "text-accent-amber" : "text-text-disabled"}`}>
-            {hasValue ? value : "—"}
-          </span>
-          {hasValue && (
-            <button
-              onClick={() => setResponse(id, { ...current!, value: null })}
-              className="text-text-disabled hover:text-text-tertiary transition-colors text-[10px] leading-none"
-              title="Clear"
-            >
-              &#x2715;
-            </button>
-          )}
-        </span>
-      </div>
-      <div className="relative h-6 flex items-center">
-        {/* Track background */}
-        <div className="absolute left-0 right-0 h-1.5 rounded-full bg-border-medium">
-          {hasValue && <div className="h-full rounded-full bg-accent-amber transition-all duration-150" style={{ width: `${pct}%` }} />}
-        </div>
-        {/* Discrete step dots */}
-        {showDots && Array.from({ length: stepCount + 1 }, (_, i) => {
-          const dotVal = min + i * step;
-          const dotPct = ((dotVal - min) / (max - min)) * 100;
-          const isSelected = hasValue && dotVal <= value!;
-          const isActive = hasValue && dotVal === value;
-          return (
-            <div
-              key={i}
-              className={`absolute rounded-full pointer-events-none transition-all duration-150 ${
-                isActive ? "w-2.5 h-2.5 bg-accent-amber" : isSelected ? "w-1.5 h-1.5 bg-accent-amber" : "w-1.5 h-1.5 bg-border-hover"
-              }`}
-              style={{ left: `${dotPct}%`, transform: "translate(-50%, -50%)", top: "50%" }}
-            />
-          );
-        })}
-        {/* Thumb indicator */}
-        {hasValue ? (
-          <div className="absolute h-5 w-5 rounded-full bg-accent-amber shadow-md pointer-events-none transition-all duration-150" style={{ left: `calc(${pct}% - 10px)`, borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
-        ) : (
-          <div className="absolute h-4 w-4 rounded-full bg-border-hover pointer-events-none opacity-50" style={{ left: "calc(50% - 8px)", borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
-        )}
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={displayValue}
-          onChange={(e) => handleChange(Number(e.currentTarget.value))}
-          className="absolute inset-0 w-full opacity-0 cursor-pointer"
-        />
-      </div>
-      {/* Labels: show step values if few enough, otherwise just min/max */}
-      {showDots && stepCount <= 10 ? (
-        <div className="flex justify-between -mt-0.5 px-0">
-          {Array.from({ length: stepCount + 1 }, (_, i) => {
-            const dotVal = min + i * step;
-            const isActive = hasValue && dotVal === value;
-            return (
-              <span key={i} className={`text-[10px] font-mono transition-colors ${isActive ? "text-accent-amber font-medium" : "text-text-disabled"}`} style={{ minWidth: "1ch", textAlign: "center" }}>
-                {dotVal}
-              </span>
-            );
-          })}
-        </div>
-      ) : (
-        <div className="flex justify-between -mt-0.5">
-          <span className="text-[11px] text-text-tertiary font-body">{minLabel || min}</span>
-          <span className="text-[11px] text-text-tertiary font-body">{maxLabel || max}</span>
-        </div>
-      )}
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select a value.</p>}
-    </div>
-  );
+	return (
+		<div data-md="rangeinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+			<div className="flex items-baseline justify-between mb-1">
+				<div className="flex items-baseline gap-2">
+					<span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+					{required && <span className="text-[10px] text-accent-red font-body">*</span>}
+				</div>
+				<span className="flex items-center gap-1.5">
+					<span className={`text-[13px] font-mono ${hasValue ? 'text-accent-amber' : 'text-text-disabled'}`}>
+						{hasValue ? value : '—'}
+					</span>
+					{hasValue && (
+						<button
+							onClick={() => setResponse(id, { ...current!, value: null })}
+							className="text-text-disabled hover:text-text-tertiary transition-colors text-[10px] leading-none"
+							title="Clear"
+						>
+							&#x2715;
+						</button>
+					)}
+				</span>
+			</div>
+			<div className="relative h-6 flex items-center">
+				{/* Track background */}
+				<div className="absolute left-0 right-0 h-1.5 rounded-full bg-border-medium">
+					{hasValue && <div className="h-full rounded-full bg-accent-amber transition-all duration-150" style={{ width: `${pct}%` }} />}
+				</div>
+				{/* Discrete step dots */}
+				{showDots && Array.from({ length: stepCount + 1 }, (_, i) => {
+					const dotVal = min + i * step
+					const dotPct = ((dotVal - min) / (max - min)) * 100
+					const isSelected = hasValue && dotVal <= value!
+					const isActive = hasValue && dotVal === value
+					return (
+						<div
+							key={i}
+							className={`absolute rounded-full pointer-events-none transition-all duration-150 ${
+								isActive ? 'w-2.5 h-2.5 bg-accent-amber' : isSelected ? 'w-1.5 h-1.5 bg-accent-amber' : 'w-1.5 h-1.5 bg-border-hover'
+							}`}
+							style={{ left: `${dotPct}%`, transform: 'translate(-50%, -50%)', top: '50%' }}
+						/>
+					)
+				})}
+				{/* Thumb indicator */}
+				{hasValue
+					? (
+						<div
+							className="absolute h-5 w-5 rounded-full bg-accent-amber shadow-md pointer-events-none transition-all duration-150"
+							style={{ left: `calc(${pct}% - 10px)`, borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--color-bg-base)' }}
+						/>
+					)
+					: (
+						<div
+							className="absolute h-4 w-4 rounded-full bg-border-hover pointer-events-none opacity-50"
+							style={{ left: 'calc(50% - 8px)', borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--color-bg-base)' }}
+						/>
+					)}
+				<input
+					type="range"
+					min={min}
+					max={max}
+					step={step}
+					value={displayValue}
+					onChange={(e) => handleChange(Number(e.currentTarget.value))}
+					className="absolute inset-0 w-full opacity-0 cursor-pointer"
+				/>
+			</div>
+			{/* Labels: show step values if few enough, otherwise just min/max */}
+			{showDots && stepCount <= 10
+				? (
+					<div className="flex justify-between -mt-0.5 px-0">
+						{Array.from({ length: stepCount + 1 }, (_, i) => {
+							const dotVal = min + i * step
+							const isActive = hasValue && dotVal === value
+							return (
+								<span
+									key={i}
+									className={`text-[10px] font-mono transition-colors ${isActive ? 'text-accent-amber font-medium' : 'text-text-disabled'}`}
+									style={{ minWidth: '1ch', textAlign: 'center' }}
+								>
+									{dotVal}
+								</span>
+							)
+						})}
+					</div>
+				)
+				: (
+					<div className="flex justify-between -mt-0.5">
+						<span className="text-[11px] text-text-tertiary font-body">{minLabel || min}</span>
+						<span className="text-[11px] text-text-tertiary font-body">{maxLabel || max}</span>
+					</div>
+				)}
+			<ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+			{showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select a value.</p>}
+		</div>
+	)
 }

package/src/client/components/index.ts

@@ -1,18 +1,18 @@
 // Components every canvas host provides. Hosts that ship extra components
 // compose their own `#canvas/components` barrel over this one.
-export { Section } from "./Section";
-export { Item, Task } from "./Task";
-export { CodeBlock } from "./CodeBlock";
-export { Callout } from "./Callout";
-export { Note } from "./Note";
-export { Table } from "./Table";
-export { Checklist } from "./Checklist";
-export { Priority } from "./Priority";
-export { FilePreview } from "./FilePreview";
-export { Mermaid } from "./Mermaid";
-export { Diff } from "./Diff";
-export { Choice, MultiChoice } from "./Choice";
-export { UserInput, RangeInput } from "./UserInput";
-export { ImageView } from "./Image";
-export { Markdown } from "./Markdown";
-export { useFeedback } from "#canvas/runtime";
+export { useFeedback } from '#canvas/runtime'
+export { Callout } from './Callout'
+export { Checklist } from './Checklist'
+export { Choice, MultiChoice } from './Choice'
+export { CodeBlock } from './CodeBlock'
+export { Diff } from './Diff'
+export { FilePreview } from './FilePreview'
+export { ImageView } from './Image'
+export { Markdown } from './Markdown'
+export { Mermaid } from './Mermaid'
+export { Note } from './Note'
+export { Priority } from './Priority'
+export { Section } from './Section'
+export { Table } from './Table'
+export { Item, Task } from './Task'
+export { RangeInput, UserInput } from './UserInput'

package/src/client/components/renderMarkdownChildren.tsx

@@ -1,45 +1,63 @@
-import React 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 from 'react'
 
-marked.setOptions({ gfm: true, breaks: false });
+marked.setOptions({ gfm: true, breaks: false })
 
 /** Host tags that flow inline and must not break a prose run into separate blocks. */
 const INLINE_TAGS = new Set([
-  "a", "abbr", "b", "br", "code", "del", "em", "i", "kbd", "mark",
-  "q", "s", "small", "span", "strong", "sub", "sup", "time", "u",
-]);
+	'a',
+	'abbr',
+	'b',
+	'br',
+	'code',
+	'del',
+	'em',
+	'i',
+	'kbd',
+	'mark',
+	'q',
+	's',
+	'small',
+	'span',
+	'strong',
+	'sub',
+	'sup',
+	'time',
+	'u',
+])
 
 /** Custom components that render inline (e.g. <Priority>). */
-const INLINE_COMPONENTS = new Set(["Priority"]);
+const INLINE_COMPONENTS = new Set(['Priority'])
 
 function isInlineNode(node: React.ReactNode): boolean {
-  if (typeof node === "string" || typeof node === "number") return true;
-  if (!React.isValidElement(node)) return false;
-  // Read `type` structurally: preact/compat's isValidElement is not a type
-  // guard, so the narrowing React's typings give here does not survive there.
-  if (typeof node !== "object" || node === null || !("type" in node)) return false;
-  const type: unknown = node.type;
-  if (typeof type === "string") return INLINE_TAGS.has(type);
-  if (typeof type === "function") {
-    const name = "displayName" in type && typeof type.displayName === "string" ? type.displayName : type.name;
-    return name ? INLINE_COMPONENTS.has(name) : false;
-  }
-  return false;
+	if (typeof node === 'string' || typeof node === 'number') return true
+	if (!React.isValidElement(node)) return false
+	// Read `type` structurally: preact/compat's isValidElement is not a type
+	// guard, so the narrowing React's typings give here does not survive there.
+	if (typeof node !== 'object' || node === null || !('type' in node)) return false
+	const type: unknown = node.type
+	if (typeof type === 'string') return INLINE_TAGS.has(type)
+	if (typeof type === 'function') {
+		const name = 'displayName' in type && typeof type.displayName === 'string' ? type.displayName : type.name
+		return name ? INLINE_COMPONENTS.has(name) : false
+	}
+	return false
 }
 
 function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
-  const trimmed = text.trim();
-  if (!trimmed) return null;
-  const html = marked.parse(trimmed, { async: false }) as string;
-  return (
-    <div
-      key={key}
-      className="prose-canvas"
-      data-md="markdown"
-      data-md-source={trimmed}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
+	const trimmed = text.trim()
+	if (!trimmed) return null
+	const html = marked.parse(trimmed, { async: false }) as string
+	return (
+		<div
+			key={key}
+			className="prose-canvas"
+			data-md="markdown"
+			data-md-source={trimmed}
+			dangerouslySetInnerHTML={{ __html: html }}
+		/>
+	)
 }
 
 /**
@@ -48,17 +66,17 @@ function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
  * No `data-md` attribute so the markdown exporter treats it as an inline container.
  */
 function renderInlineRun(run: React.ReactNode[], key: string): React.ReactNode {
-  return (
-    <div key={key} className="prose-canvas">
-      {run.map((node, i) => {
-        if (typeof node === "string" || typeof node === "number") {
-          const html = marked.parseInline(String(node), { async: false }) as string;
-          return <span key={i} dangerouslySetInnerHTML={{ __html: html }} />;
-        }
-        return node;
-      })}
-    </div>
-  );
+	return (
+		<div key={key} className="prose-canvas">
+			{run.map((node, i) => {
+				if (typeof node === 'string' || typeof node === 'number') {
+					const html = marked.parseInline(String(node), { async: false }) as string
+					return <span key={i} dangerouslySetInnerHTML={{ __html: html }} />
+				}
+				return node
+			})}
+		</div>
+	)
 }
 
 /**
@@ -68,33 +86,33 @@ function renderInlineRun(run: React.ReactNode[], key: string): React.ReactNode {
  * keeps flowing instead of stacking one fragment per line.
  */
 export function renderMarkdownChildren(children: React.ReactNode): React.ReactNode {
-  const kids = React.Children.toArray(children);
-  if (kids.length === 0) return null;
+	const kids = React.Children.toArray(children)
+	if (kids.length === 0) return null
 
-  const result: React.ReactNode[] = [];
-  let segment: React.ReactNode[] = [];
-  let segIdx = 0;
+	const result: React.ReactNode[] = []
+	let segment: React.ReactNode[] = []
+	let segIdx = 0
 
-  const flush = () => {
-    if (segment.length === 0) return;
-    const hasInlineJsx = segment.some((n) => typeof n !== "string" && typeof n !== "number");
-    if (hasInlineJsx) {
-      result.push(renderInlineRun(segment, `md-${segIdx++}`));
-    } else {
-      const node = renderTextAsMarkdown(segment.join(""), `md-${segIdx++}`);
-      if (node) result.push(node);
-    }
-    segment = [];
-  };
+	const flush = () => {
+		if (segment.length === 0) return
+		const hasInlineJsx = segment.some((n) => typeof n !== 'string' && typeof n !== 'number')
+		if (hasInlineJsx) {
+			result.push(renderInlineRun(segment, `md-${segIdx++}`))
+		} else {
+			const node = renderTextAsMarkdown(segment.join(''), `md-${segIdx++}`)
+			if (node) result.push(node)
+		}
+		segment = []
+	}
 
-  for (const child of kids) {
-    if (isInlineNode(child)) {
-      segment.push(child);
-    } else {
-      flush();
-      result.push(child);
-    }
-  }
-  flush();
-  return result;
+	for (const child of kids) {
+		if (isInlineNode(child)) {
+			segment.push(child)
+		} else {
+			flush()
+			result.push(child)
+		}
+	}
+	flush()
+	return result
 }