@fabrika/canvas-kernel 0.1.45 → 0.3.1

package/src/client/annotationDraft.ts

@@ -1,130 +1,140 @@
+import { z } from 'zod'
+
+// Carry old and host-extended drafts intact; hydration owns validation of individual entries.
+const carriedDraftSchema = z.object({}).passthrough()
+const draftContentSchema = z.object({
+	annotations: z.array(z.unknown()).catch([]),
+	generalNote: z.string().catch(''),
+	responses: z.array(z.unknown()).catch([]),
+})
+const responseContentSchema = z.tuple([
+	z.unknown(),
+	z.object({ note: z.unknown(), value: z.unknown() }),
+])
+
 interface RevisionState {
-  revision: number;
-  hasFeedback: boolean;
+	revision: number
+	hasFeedback: boolean
 }
 
 interface AnnotationStorage {
-  getItem(key: string): string | null;
-  setItem(key: string, value: string): void;
-  removeItem(key: string): void;
+	getItem(key: string): string | null
+	setItem(key: string, value: string): void
+	removeItem(key: string): void
 }
 
 interface RemovableAnnotationStorage {
-  removeItem(key: string): void;
+	removeItem(key: string): void
 }
 
-export type AnnotationDraftPhase = "current" | "next";
+export type AnnotationDraftPhase = 'current' | 'next'
 
 export function annotationDraftKey(
-  sessionId: string,
-  revision: number,
-  phase: AnnotationDraftPhase = "current",
+	sessionId: string,
+	revision: number,
+	phase: AnnotationDraftPhase = 'current',
 ): string {
-  const base = `canvas:${sessionId}:rev:${revision}`;
-  return phase === "next" ? `${base}:next-draft` : base;
+	const base = `canvas:${sessionId}:rev:${revision}`
+	return phase === 'next' ? `${base}:next-draft` : base
 }
 
 function handledKey(sessionId: string, revision: number): string {
-  return `${annotationDraftKey(sessionId, revision)}:draft-handled`;
+	return `${annotationDraftKey(sessionId, revision)}:draft-handled`
 }
 
 export function clearPersistedDraft(
-  storage: RemovableAnnotationStorage,
-  sessionId: string,
-  revision: number,
+	storage: RemovableAnnotationStorage,
+	sessionId: string,
+	revision: number,
 ): void {
-  try {
-    storage.removeItem(annotationDraftKey(sessionId, revision));
-    storage.removeItem(handledKey(sessionId, revision));
-  } catch {}
+	try {
+		storage.removeItem(annotationDraftKey(sessionId, revision))
+		storage.removeItem(handledKey(sessionId, revision))
+	} catch {}
 }
 
 function parseState(raw: string | null): object | null {
-  if (!raw) return null;
-  try {
-    const value: unknown = JSON.parse(raw);
-    return typeof value === "object" && value !== null && !Array.isArray(value)
-      ? value
-      : null;
-  } catch {
-    return null;
-  }
+	if (!raw) return null
+	try {
+		const value: unknown = JSON.parse(raw)
+		const result = carriedDraftSchema.safeParse(value)
+		return result.success ? result.data : null
+	} catch {
+		return null
+	}
 }
 
 function hasResponseValue(entry: unknown): boolean {
-  if (!Array.isArray(entry) || entry.length < 2) return false;
-  const response: unknown = entry[1];
-  if (typeof response !== "object" || response === null || Array.isArray(response)) return false;
-
-  const note = Reflect.get(response, "note");
-  if (typeof note === "string" && note.trim().length > 0) return true;
-
-  const value = Reflect.get(response, "value");
-  if (typeof value === "string") return value.trim().length > 0;
-  if (Array.isArray(value)) return value.length > 0;
-  return value !== null && value !== undefined;
+	const parsed = responseContentSchema.safeParse(entry)
+	if (!parsed.success) return false
+	const { note, value } = parsed.data[1]
+	if (typeof note === 'string' && note.trim().length > 0) return true
+
+	if (typeof value === 'string') return value.trim().length > 0
+	if (Array.isArray(value)) return value.length > 0
+	return value !== null && value !== undefined
 }
 
 function hasDraftContent(state: object | null): boolean {
-  if (!state) return false;
-  const annotations = Reflect.get(state, "annotations");
-  if (Array.isArray(annotations) && annotations.length > 0) return true;
-
-  const generalNote = Reflect.get(state, "generalNote");
-  if (typeof generalNote === "string" && generalNote.trim().length > 0) return true;
-
-  const responses = Reflect.get(state, "responses");
-  return Array.isArray(responses) && responses.some(hasResponseValue);
+	if (!state) return false
+	const { annotations, generalNote, responses } = draftContentSchema.parse(state)
+	return annotations.length > 0 || generalNote.trim().length > 0 || responses.some(hasResponseValue)
 }
 
 /** Carry an unsent draft forward without crossing submitted revisions. */
 export function carryUnsubmittedDraft(
-  storage: AnnotationStorage,
-  sessionId: string,
-  targetRevision: number,
-  revisions: RevisionState[],
+	storage: AnnotationStorage,
+	sessionId: string,
+	targetRevision: number,
+	revisions: RevisionState[],
 ): number | null {
-  try {
-    const targetKey = annotationDraftKey(sessionId, targetRevision);
-    if (hasDraftContent(parseState(storage.getItem(targetKey)))) {
-      storage.setItem(handledKey(sessionId, targetRevision), "1");
-      return null;
-    }
-    if (storage.getItem(handledKey(sessionId, targetRevision)) !== null) return null;
-
-    const previous = revisions
-      .filter((revision) => revision.revision < targetRevision)
-      .sort((left, right) => right.revision - left.revision);
-
-    for (const revision of previous) {
-      if (revision.hasFeedback) {
-        const sourceKey = annotationDraftKey(sessionId, revision.revision, "next");
-        const source = parseState(storage.getItem(sourceKey));
-        if (!hasDraftContent(source)) return null;
-
-        storage.setItem(targetKey, JSON.stringify({
-          ...source,
-          feedbackEntries: [],
-        }));
-        storage.setItem(handledKey(sessionId, targetRevision), "1");
-        storage.removeItem(sourceKey);
-        return revision.revision;
-      }
-
-      const source = parseState(storage.getItem(annotationDraftKey(sessionId, revision.revision)));
-      if (!hasDraftContent(source)) {
-        if (storage.getItem(handledKey(sessionId, revision.revision)) !== null) return null;
-        continue;
-      }
-
-      storage.setItem(targetKey, JSON.stringify({
-        ...source,
-        feedbackEntries: [],
-      }));
-      storage.setItem(handledKey(sessionId, targetRevision), "1");
-      return revision.revision;
-    }
-  } catch {}
-
-  return null;
+	try {
+		const targetKey = annotationDraftKey(sessionId, targetRevision)
+		if (hasDraftContent(parseState(storage.getItem(targetKey)))) {
+			storage.setItem(handledKey(sessionId, targetRevision), '1')
+			return null
+		}
+		if (storage.getItem(handledKey(sessionId, targetRevision)) !== null) return null
+
+		const previous = revisions
+			.filter((revision) => revision.revision < targetRevision)
+			.sort((left, right) => right.revision - left.revision)
+
+		for (const revision of previous) {
+			if (revision.hasFeedback) {
+				const sourceKey = annotationDraftKey(sessionId, revision.revision, 'next')
+				const source = parseState(storage.getItem(sourceKey))
+				if (!hasDraftContent(source)) return null
+
+				storage.setItem(
+					targetKey,
+					JSON.stringify({
+						...source,
+						feedbackEntries: [],
+					}),
+				)
+				storage.setItem(handledKey(sessionId, targetRevision), '1')
+				storage.removeItem(sourceKey)
+				return revision.revision
+			}
+
+			const source = parseState(storage.getItem(annotationDraftKey(sessionId, revision.revision)))
+			if (!hasDraftContent(source)) {
+				if (storage.getItem(handledKey(sessionId, revision.revision)) !== null) return null
+				continue
+			}
+
+			storage.setItem(
+				targetKey,
+				JSON.stringify({
+					...source,
+					feedbackEntries: [],
+				}),
+			)
+			storage.setItem(handledKey(sessionId, targetRevision), '1')
+			return revision.revision
+		}
+	} catch {}
+
+	return null
 }

package/src/client/appContext.tsx

@@ -1,5 +1,5 @@
-import { createContext } from "react";
-import type { ActiveView } from "#canvas/runtime";
+import type { ActiveView } from '#canvas/runtime'
+import { createContext } from 'react'
 
 /**
  * Shell state the annotation surface reads but does not own.
@@ -9,53 +9,53 @@ import type { ActiveView } from "#canvas/runtime";
  * and how to navigate. The host provides both contexts around the surface.
  */
 
-export type { ActiveView };
+export type { ActiveView }
 
 export interface CanvasFileInfo {
-  filename: string;
-  diffStats?: { added: number; removed: number };
+	filename: string
+	diffStats?: { added: number; removed: number }
 }
 
 export interface RevisionInfo {
-  revision: number;
-  label?: string;
-  canvasFiles: CanvasFileInfo[];
-  createdAt: string;
-  hasFeedback: boolean;
-  feedbackConsumed: boolean;
-  response?: string;
+	revision: number
+	label?: string
+	canvasFiles: CanvasFileInfo[]
+	createdAt: string
+	hasFeedback: boolean
+	feedbackConsumed: boolean
+	response?: string
 }
 
 export const ActiveViewContext = createContext<{
-  activeView: ActiveView;
-  setActiveView: (v: ActiveView) => void;
-  openFiles: string[];
-  closeFile: (path: string) => void;
-  canvasFiles: string[];
+	activeView: ActiveView
+	setActiveView: (v: ActiveView) => void
+	openFiles: string[]
+	closeFile: (path: string) => void
+	canvasFiles: string[]
 }>({
-  activeView: { type: "overview" },
-  setActiveView: () => {},
-  openFiles: [],
-  closeFile: () => {},
-  canvasFiles: [],
-});
+	activeView: { type: 'overview' },
+	setActiveView: () => {},
+	openFiles: [],
+	closeFile: () => {},
+	canvasFiles: [],
+})
 
 export const RevisionContext = createContext<{
-  currentRevision: number;
-  selectedRevision: number;
-  revisions: RevisionInfo[];
-  setSelectedRevision: (rev: number) => void;
-  isReadOnly: boolean;
-  compareRevision: { left: number; right: number } | null;
-  setCompareRevision: (rev: { left: number; right: number } | null) => void;
-  agentWatching: boolean;
+	currentRevision: number
+	selectedRevision: number
+	revisions: RevisionInfo[]
+	setSelectedRevision: (rev: number) => void
+	isReadOnly: boolean
+	compareRevision: { left: number; right: number } | null
+	setCompareRevision: (rev: { left: number; right: number } | null) => void
+	agentWatching: boolean
 }>({
-  currentRevision: 1,
-  selectedRevision: 1,
-  revisions: [],
-  setSelectedRevision: () => {},
-  isReadOnly: false,
-  compareRevision: null,
-  setCompareRevision: () => {},
-  agentWatching: false,
-});
+	currentRevision: 1,
+	selectedRevision: 1,
+	revisions: [],
+	setSelectedRevision: () => {},
+	isReadOnly: false,
+	compareRevision: null,
+	setCompareRevision: () => {},
+	agentWatching: false,
+})

package/src/client/components/Callout.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import { renderMarkdownChildren } from "./renderMarkdownChildren";
+import React from 'react'
+import { renderMarkdownChildren } from './renderMarkdownChildren'
 
 interface CalloutProps {
-  type?: "info" | "warning" | "danger" | "tip";
-  children?: React.ReactNode;
+	type?: 'info' | 'warning' | 'danger' | 'tip'
+	children?: React.ReactNode
 }
 
 const config = {
-  info:    { bg: "bg-accent-blue-muted", icon: "i",  iconColor: "text-accent-blue" },
-  warning: { bg: "bg-accent-amber-muted", icon: "!", iconColor: "text-accent-amber" },
-  danger:  { bg: "bg-accent-red-muted", icon: "\u2715", iconColor: "text-accent-red" },
-  tip:     { bg: "bg-accent-green-muted", icon: "\u2713", iconColor: "text-accent-green" },
-};
+	info: { bg: 'bg-accent-blue-muted', icon: 'i', iconColor: 'text-accent-blue' },
+	warning: { bg: 'bg-accent-amber-muted', icon: '!', iconColor: 'text-accent-amber' },
+	danger: { bg: 'bg-accent-red-muted', icon: '\u2715', iconColor: 'text-accent-red' },
+	tip: { bg: 'bg-accent-green-muted', icon: '\u2713', iconColor: 'text-accent-green' },
+}
 
-export function Callout({ type = "info", children }: CalloutProps) {
-  const cfg = config[type];
-  return (
-    <div className={`${cfg.bg} relative rounded-lg px-5 py-4 mt-3 flex gap-3 items-start`} data-md="callout" data-md-type={type}>
-      {/* Decorative: the type it stands for is already in data-md-type. */}
-      <span aria-hidden="true" className={`${cfg.iconColor} opacity-70 text-base leading-relaxed flex-shrink-0 mt-px`}>
-        {cfg.icon}
-      </span>
-      <div className="text-body text-text-secondary leading-relaxed">{renderMarkdownChildren(children)}</div>
-    </div>
-  );
+export function Callout({ type = 'info', children }: CalloutProps) {
+	const cfg = config[type]
+	return (
+		<div className={`${cfg.bg} relative rounded-lg px-5 py-4 mt-3 flex gap-3 items-start`} data-md="callout" data-md-type={type}>
+			{/* Decorative: the type it stands for is already in data-md-type. */}
+			<span aria-hidden="true" className={`${cfg.iconColor} opacity-70 text-base leading-relaxed flex-shrink-0 mt-px`}>
+				{cfg.icon}
+			</span>
+			<div className="text-body text-text-secondary leading-relaxed">{renderMarkdownChildren(children)}</div>
+		</div>
+	)
 }

package/src/client/components/Checklist.tsx

@@ -1,37 +1,35 @@
-import React from "react";
-
 interface ChecklistItem {
-  label: string;
-  checked: boolean;
+	label: string
+	checked: boolean
 }
 
 interface ChecklistProps {
-  items: ChecklistItem[];
+	items: ChecklistItem[]
 }
 
 export function Checklist({ items }: ChecklistProps) {
-  return (
-    <ul className="space-y-1 mt-3" data-md="checklist">
-      {items.map((item, i) => (
-        <li key={i} data-md="checklist-item" data-md-label={item.label} className="relative flex items-start gap-2.5 py-1">
-          <span className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
-            item.checked
-              ? "bg-accent-green"
-              : "border-[1.5px] border-border-hover"
-          }`}>
-            {item.checked && (
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                <path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: "var(--color-text-inverse)" }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            )}
-          </span>
-          <span className={`text-body font-body ${
-            item.checked ? "text-text-tertiary line-through decoration-border-hover" : "text-text-secondary"
-          }`}>
-            {item.label}
-          </span>
-        </li>
-      ))}
-    </ul>
-  );
+	return (
+		<ul className="space-y-1 mt-3" data-md="checklist">
+			{items.map((item, i) => (
+				<li key={i} data-md="checklist-item" data-md-label={item.label} className="relative flex items-start gap-2.5 py-1">
+					<span
+						className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
+							item.checked
+								? 'bg-accent-green'
+								: 'border-[1.5px] border-border-hover'
+						}`}
+					>
+						{item.checked && (
+							<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+								<path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: 'var(--color-text-inverse)' }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+							</svg>
+						)}
+					</span>
+					<span className={`text-body font-body ${item.checked ? 'text-text-tertiary line-through decoration-border-hover' : 'text-text-secondary'}`}>
+						{item.label}
+					</span>
+				</li>
+			))}
+		</ul>
+	)
 }