@fabrika/canvas-kernel 0.1.44

package/src/client/components/Table.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface TableProps {
+  headers: string[];
+  rows: string[][];
+}
+
+export function Table({ headers, rows }: TableProps) {
+  return (
+    <div className="overflow-x-auto mt-3" data-md="table">
+      <table className="w-full text-body">
+        <thead>
+          <tr className="border-b border-border-subtle">
+            {headers.map((h, i) => (
+              <th key={i} className="text-left px-4 py-2.5 text-meta font-medium uppercase tracking-wider text-text-tertiary font-body">
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, ri) => (
+            <tr key={ri} className={`relative border-b border-border-subtle last:border-b-0 transition-colors hover:bg-bg-surface/50 ${ri % 2 === 1 ? "bg-bg-surface/30" : ""}`}>
+              {row.map((cell, ci) => (
+                <td key={ci} className="px-4 py-2.5 text-text-secondary font-body">
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/client/components/Task.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { renderMarkdownChildren } from "./renderMarkdownChildren";
+
+type Status = "todo" | "done" | "blocked" | "in-progress";
+type BadgeVariant = "info" | "success" | "warning" | "danger" | "neutral";
+
+interface ItemProps {
+  id: string;
+  label: string;
+  status?: Status;
+  badge?: string;
+  badgeVariant?: BadgeVariant;
+  children?: React.ReactNode;
+}
+
+const dotColors: Record<Status, string> = {
+  todo: "bg-border-hover",
+  done: "bg-accent-green",
+  blocked: "bg-accent-red",
+  "in-progress": "bg-accent-blue",
+};
+
+const statusLabels: Record<Status, string> = {
+  todo: "Todo",
+  done: "Done",
+  blocked: "Blocked",
+  "in-progress": "In progress",
+};
+
+const badgeStyles: Record<BadgeVariant, string> = {
+  info: "bg-accent-blue-muted text-accent-blue",
+  success: "bg-accent-green-muted text-accent-green",
+  warning: "bg-accent-amber-muted text-accent-amber",
+  danger: "bg-accent-red-muted text-accent-red",
+  neutral: "bg-border-subtle text-text-tertiary",
+};
+
+export function Item({ id, label, status, badge, badgeVariant = "neutral", children }: ItemProps) {
+  return (
+    <div
+      className="group/task relative -mx-4 px-4 py-3 rounded-md transition-colors duration-150 hover:bg-bg-input"
+      data-task-id={id}
+      data-md="item"
+      data-md-label={label}
+      {...(status ? { "data-md-status": status } : {})}
+      {...(badge ? { "data-md-badge": badge } : {})}
+    >
+      <div className="flex items-start gap-3">
+        {status && <span className={`w-2 h-2 rounded-full mt-[7px] flex-shrink-0 ${dotColors[status]}`} />}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-2">
+            <span className="font-body text-task-label font-semibold text-text-primary">{label}</span>
+            {status && (
+              <span className="font-body text-tiny uppercase tracking-wider text-text-tertiary opacity-0 group-hover/task:opacity-100 transition-opacity duration-150">
+                {statusLabels[status]}
+              </span>
+            )}
+            {badge && (
+              <span className={`font-body text-tiny font-medium px-1.5 py-px rounded-full ${badgeStyles[badgeVariant]}`}>
+                {badge}
+              </span>
+            )}
+          </div>
+          {children && (
+            <div className="text-body text-text-secondary mt-1 leading-relaxed">{renderMarkdownChildren(children)}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** @deprecated Use <Item> instead */
+export function Task(props: ItemProps) {
+  return <Item {...props} />;
+}

package/src/client/components/UserInput.tsx

@@ -0,0 +1,176 @@
+import React, { useRef, useState } from "react";
+import { useAnnotations, useResponseRegistration } from "#canvas/runtime";
+import { ResponseNote } from "./ResponseNote";
+import { autoResizeTextarea } from "../utils";
+
+/** Free text input from user */
+interface UserInputProps {
+  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);
+
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "text", label, value: "", required });
+  }
+
+  const handleChange = (v: string) => {
+    setResponse(id, { ...current!, value: v });
+  };
+
+  const autoResize = (el: HTMLTextAreaElement) => autoResizeTextarea(el, multiline ? 60 : 32);
+
+  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>
+  );
+}
+
+/** Numeric range / slider */
+interface RangeInputProps {
+  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);
+
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "range", label, value: null, required });
+  }
+
+  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 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>
+  );
+}

package/src/client/components/index.ts

@@ -0,0 +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";

package/src/client/components/renderMarkdownChildren.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { marked } from "marked";
+
+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",
+]);
+
+/** Custom components that render inline (e.g. <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;
+}
+
+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 }}
+    />
+  );
+}
+
+/**
+ * Render a run of inline content (text + inline JSX like <code>/<strong>) as a single
+ * flowing paragraph. Text segments are parsed as inline markdown; JSX passes through.
+ * 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>
+  );
+}
+
+/**
+ * Auto-render markdown for string children, passing JSX children through.
+ * Block-level JSX (Callout, Diff, etc.) breaks the prose into separate markdown blocks,
+ * while inline JSX (code, strong, links) stays within the surrounding paragraph so text
+ * 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 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 = [];
+  };
+
+  for (const child of kids) {
+    if (isInlineNode(child)) {
+      segment.push(child);
+    } else {
+      flush();
+      result.push(child);
+    }
+  }
+  flush();
+  return result;
+}

package/src/client/diffLines.ts

@@ -0,0 +1,50 @@
+export interface DiffLine {
+  type: "same" | "removed" | "added";
+  line: string;
+}
+
+/** Line-level diff of two texts, longest-common-subsequence based. */
+export function buildDiffLines(before: string, after: string): DiffLine[] {
+  const beforeLines = before.split("\n");
+  const afterLines = after.split("\n");
+  const lcs = computeLCS(beforeLines, afterLines);
+  const diffLines: DiffLine[] = [];
+
+  let bi = 0, ai = 0, li = 0;
+  while (bi < beforeLines.length || ai < afterLines.length) {
+    // split() never leaves holes, so "in range" and "defined" are the same test.
+    const beforeLine = beforeLines[bi];
+    const afterLine = afterLines[ai];
+    if (li < lcs.length && beforeLine !== undefined && afterLine !== undefined
+        && beforeLine === lcs[li] && afterLine === lcs[li]) {
+      diffLines.push({ type: "same", line: beforeLine }); bi++; ai++; li++;
+    } else if (beforeLine !== undefined && (li >= lcs.length || beforeLine !== lcs[li])) {
+      diffLines.push({ type: "removed", line: beforeLine }); bi++;
+    } else if (afterLine !== undefined) {
+      diffLines.push({ type: "added", line: afterLine }); ai++;
+    }
+  }
+
+  return diffLines;
+}
+
+export function computeLCS(a: string[], b: string[]): string[] {
+  const m = a.length, n = b.length;
+  // Rows are fully filled before use; the `?? 0` fallbacks only satisfy the
+  // checker, which cannot see that every index here is in range.
+  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0));
+  for (let i = 1; i <= m; i++) {
+    const row = dp[i] ?? [];
+    const prev = dp[i - 1] ?? [];
+    for (let j = 1; j <= n; j++)
+      row[j] = a[i-1] === b[j-1] ? (prev[j-1] ?? 0) + 1 : Math.max(prev[j] ?? 0, row[j-1] ?? 0);
+  }
+  const result: string[] = [];
+  let i = m, j = n;
+  while (i > 0 && j > 0) {
+    const line = a[i-1];
+    if (line !== undefined && line === b[j-1]) { result.unshift(line); i--; j--; }
+    else if ((dp[i-1]?.[j] ?? 0) > (dp[i]?.[j-1] ?? 0)) i--; else j--;
+  }
+  return result;
+}