@fabrika/canvas-kernel 0.1.44

package/src/client/styles.css

@@ -0,0 +1,492 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@import "tailwindcss";
+@import "./theme.css";
+@source "./**/*.{tsx,ts,jsx,js}";
+
+/* ── Non-theme CSS variables (not used by Tailwind utilities, just custom CSS) ── */
+:root {
+  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-scrollbar: rgba(255, 248, 240, 0.06);
+  --color-scrollbar-hover: rgba(255, 248, 240, 0.12);
+  --color-folder-fill: rgba(196, 154, 58, 0.15);
+  --color-folder-fill-active: rgba(196, 154, 58, 0.25);
+  --color-folder-stroke: rgba(196, 154, 58, 0.5);
+  --color-folder-stroke-active: #c49a3a;
+  --color-hljs-base: #c4beb7;
+  --color-hljs-keyword: #d2a6ff;
+  --color-hljs-string: #a8cc8c;
+  --color-hljs-comment: #847d75;
+  --color-hljs-number: #e8a87c;
+  --color-hljs-variable: #7ec8e3;
+  --color-hljs-function: #dbc074;
+  --color-hljs-punctuation: #a09a92;
+}
+
+[data-theme="light"] {
+  /* Override Tailwind theme vars */
+  --color-bg-base: #faf5e6;
+  --color-bg-surface: #f3edd8;
+  --color-bg-elevated: #ebe4ce;
+  --color-bg-code: #f0ebd5;
+  --color-bg-input: rgba(80, 60, 10, 0.05);
+  --color-bg-elevated-half: rgba(235, 228, 206, 0.5);
+
+  --color-text-primary: #2a2520;
+  --color-text-secondary: #5a5550;
+  --color-text-tertiary: #9a9390;
+  --color-text-code: #4a4540;
+  --color-text-disabled: #c5c0b8;
+  --color-text-inverse: #faf6ef;
+
+  --color-border-subtle: rgba(80, 60, 30, 0.08);
+  --color-border-medium: rgba(80, 60, 30, 0.10);
+  --color-border-hover: rgba(80, 60, 30, 0.15);
+  --color-border-strong: rgba(80, 60, 30, 0.20);
+
+  --color-accent-green: #3a8a5a;
+  --color-accent-green-muted: rgba(58, 138, 90, 0.10);
+  --color-accent-amber: #a07820;
+  --color-accent-amber-muted: rgba(160, 120, 32, 0.10);
+  --color-accent-red: #b84a4a;
+  --color-accent-red-muted: rgba(184, 74, 74, 0.08);
+  --color-accent-blue: #4a7eb4;
+  --color-accent-blue-muted: rgba(74, 126, 180, 0.08);
+
+  --color-highlight-bg: rgba(200, 160, 30, 0.15);
+  --color-highlight-border: rgba(200, 160, 30, 0.40);
+  --color-highlight-annotation: rgba(200, 160, 30, 0.18);
+  --color-highlight-active: rgba(200, 160, 30, 0.35);
+  --color-highlight-selected: rgba(200, 160, 30, 0.10);
+
+  --color-badge-bg: rgba(160, 120, 32, 0.15);
+  --color-btn-primary: #2a2520;
+  --color-btn-primary-text: #faf6ef;
+
+  /* Override non-theme vars */
+  --color-shadow: rgba(80, 60, 30, 0.10);
+  --color-scrollbar: rgba(80, 60, 30, 0.08);
+  --color-scrollbar-hover: rgba(80, 60, 30, 0.15);
+  --color-folder-fill: rgba(160, 120, 32, 0.12);
+  --color-folder-fill-active: rgba(160, 120, 32, 0.22);
+  --color-folder-stroke: rgba(160, 120, 32, 0.4);
+  --color-folder-stroke-active: #a07820;
+  --color-hljs-base: #4a4540;
+  --color-hljs-keyword: #7c3aed;
+  --color-hljs-string: #2e7d32;
+  --color-hljs-comment: #9a9390;
+  --color-hljs-number: #c45a20;
+  --color-hljs-variable: #1976d2;
+  --color-hljs-function: #8a6d00;
+  --color-hljs-punctuation: #6b6560;
+}
+
+/* ── Base styles ── */
+@layer base {
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--color-bg-base);
+    color: var(--color-text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+code, pre, .font-mono {
+  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+}
+
+/* Annotation inline marks */
+mark[data-annotation-id] {
+  background: var(--color-highlight-annotation);
+  border-bottom: 1.5px solid var(--color-highlight-bg);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 150ms ease, box-shadow 150ms ease;
+  color: inherit;
+  padding: 1px 0;
+}
+
+mark[data-annotation-id].mark-active {
+  background: var(--color-highlight-active);
+  border-bottom: 2px solid var(--color-highlight-border);
+  box-shadow: 0 0 0 1px var(--color-highlight-border);
+}
+
+@keyframes ann-flash {
+  0%, 100% { background: var(--color-highlight-annotation); }
+  25%, 75% { background: var(--color-highlight-active); }
+}
+
+.ann-flash {
+  animation: ann-flash 0.6s ease 2;
+}
+
+/* Region annotations — a normalized box drawn over an image block. The host
+   positions the boxes, so every host that marks one gets them placed right. */
+[data-annotation-image] {
+  position: relative;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.ann-region {
+  position: absolute;
+  background: var(--color-highlight-annotation);
+  border: 2px solid var(--color-highlight-bg);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 150ms ease, box-shadow 150ms ease;
+}
+
+.ann-region[data-annotation-region="ellipse"] {
+  border-radius: 50%;
+}
+
+.ann-region.mark-active {
+  background: var(--color-highlight-active);
+  border-color: var(--color-highlight-border);
+  box-shadow: 0 0 0 1px var(--color-highlight-border);
+}
+
+/* The box being dragged out: not yet an annotation, and never a hit target. */
+.ann-region-draft {
+  pointer-events: none;
+  border-style: dashed;
+  border-color: var(--color-highlight-border);
+}
+
+/* Annotation highlight (legacy) */
+.annotation-highlight {
+  background: var(--color-highlight-bg);
+  border-bottom: 2px solid var(--color-highlight-border);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.annotation-highlight:hover,
+.annotation-highlight.active {
+  background: var(--color-highlight-active);
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--color-highlight-active);
+  color: var(--color-text-primary);
+}
+
+/* Focus ring */
+*:focus-visible {
+  outline: 2px solid var(--color-accent-blue);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+textarea:focus-visible {
+  outline: none;
+}
+
+/* Transitions */
+button, a, [role="button"] {
+  transition: all 150ms ease;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-scrollbar-hover);
+}
+
+/* Diff highlights for compare view */
+.diff-added {
+  background-color: color-mix(in srgb, var(--color-accent-green) 25%, transparent);
+  border-radius: 2px;
+  padding-inline: 1px;
+  padding-block: 1px;
+}
+.diff-removed {
+  background-color: color-mix(in srgb, var(--color-accent-red) 25%, transparent);
+  border-radius: 2px;
+  padding-inline: 1px;
+  padding-block: 1px;
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+}
+
+/* Block-level diff highlights for unified compare view */
+.diff-block-removed {
+  background: color-mix(in srgb, var(--color-accent-red) 8%, transparent);
+  border-left: 3px solid var(--color-accent-red);
+  opacity: 0.7;
+}
+.diff-block-added {
+  background: color-mix(in srgb, var(--color-accent-green) 8%, transparent);
+  border-left: 3px solid var(--color-accent-green);
+}
+.diff-row-removed td {
+  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+  opacity: 0.6;
+}
+.diff-row-added td {
+  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
+}
+.diff-item-removed {
+  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+  opacity: 0.6;
+}
+.diff-item-added {
+  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
+}
+.diff-block-label {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+/* Plan update flash */
+@keyframes plan-refresh {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.plan-updated {
+  animation: plan-refresh 300ms ease;
+}
+
+/* Range input styling */
+input[type="range"] {
+  height: 20px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-accent-amber);
+  cursor: pointer;
+  border: 2px solid var(--color-bg-base);
+  margin-top: -5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-accent-amber);
+  cursor: pointer;
+  border: 2px solid var(--color-bg-base);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+input[type="range"]::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+/* Prose (Markdown component) */
+.prose-canvas {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.prose-canvas h1, .prose-canvas h2, .prose-canvas h3,
+.prose-canvas h4, .prose-canvas h5, .prose-canvas h6 {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+
+.prose-canvas h1 { font-size: 1.5rem; }
+.prose-canvas h2 { font-size: 1.25rem; }
+.prose-canvas h3 { font-size: 1.1rem; }
+
+.prose-canvas h1:first-child, .prose-canvas h2:first-child,
+.prose-canvas h3:first-child {
+  margin-top: 0;
+}
+
+.prose-canvas p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose-canvas p:first-child {
+  margin-top: 0;
+}
+
+.prose-canvas a {
+  color: var(--color-accent-blue);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--color-accent-blue) 40%, transparent);
+  text-underline-offset: 2px;
+}
+
+.prose-canvas a:hover {
+  text-decoration-color: var(--color-accent-blue);
+}
+
+.prose-canvas strong {
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.prose-canvas code {
+  font-size: 0.8em;
+  background: var(--color-bg-code);
+  color: var(--color-text-code);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.prose-canvas pre {
+  background: var(--color-bg-code);
+  border-radius: 8px;
+  padding: 1em;
+  overflow-x: auto;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose-canvas pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+.prose-canvas ul, .prose-canvas ol {
+  padding-left: 1.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-canvas ul { list-style-type: disc; }
+.prose-canvas ol { list-style-type: decimal; }
+.prose-canvas li { margin-top: 0.25em; }
+.prose-canvas li > ul, .prose-canvas li > ol { margin-top: 0.25em; margin-bottom: 0; }
+
+.prose-canvas blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding-left: 1em;
+  margin-left: 0;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  color: var(--color-text-tertiary);
+}
+
+.prose-canvas hr {
+  border: none;
+  border-top: 1px solid var(--color-border-subtle);
+  margin: 1.5em 0;
+}
+
+.prose-canvas table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  font-size: 0.8rem;
+}
+
+.prose-canvas th, .prose-canvas td {
+  border: 1px solid var(--color-border-subtle);
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+
+.prose-canvas th {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.prose-canvas img {
+  max-width: 100%;
+  border-radius: 8px;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+/* highlight.js overrides */
+.hljs {
+  background: transparent !important;
+  color: var(--color-hljs-base) !important;
+}
+
+pre code.hljs {
+  padding: 0 !important;
+}
+
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
+  color: var(--color-hljs-keyword) !important;
+}
+
+.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal,
+.hljs-template-tag, .hljs-template-variable, .hljs-type {
+  color: var(--color-hljs-string) !important;
+}
+
+.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {
+  color: var(--color-hljs-comment) !important;
+}
+
+.hljs-number, .hljs-regexp, .hljs-addition {
+  color: var(--color-hljs-number) !important;
+}
+
+.hljs-variable, .hljs-attr {
+  color: var(--color-hljs-variable) !important;
+}
+
+.hljs-function .hljs-title, .hljs-title.function_ {
+  color: var(--color-hljs-function) !important;
+}
+
+.hljs-params {
+  color: var(--color-hljs-base) !important;
+}
+
+.hljs-property {
+  color: var(--color-hljs-variable) !important;
+}
+
+.hljs-punctuation {
+  color: var(--color-hljs-punctuation) !important;
+}

package/src/client/testing/dom.ts

@@ -0,0 +1,58 @@
+/**
+ * DOM harness for the client tests.
+ *
+ * Import this **before** the module under test. ESM evaluates imports in order,
+ * so putting it first is what guarantees the globals exist by the time anything
+ * that reads `document` is evaluated.
+ *
+ * happy-dom is not a browser: it runs no layout. Everything geometric —
+ * `getBoundingClientRect`, `scrollHeight`, `offsetWidth` — reads zero unless the
+ * test stubs it, and `scrollIntoView` and CSS animations do nothing. Assert on
+ * structure and on the values a function computes, never on real measurements.
+ */
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+// Bun runs every test file in one process, so the second file to import this
+// must not register over the first.
+if (!globalThis.document) {
+  GlobalRegistrator.register();
+}
+
+/**
+ * Replace the document body with `html` inside a fresh container and return it.
+ * Call it at the start of each test — the document is shared across every test
+ * in the process, so whatever the previous one left behind is still there.
+ */
+export function mountContainer(html: string): HTMLElement {
+  document.body.innerHTML = `<div data-testid="container">${html}</div>`;
+  const container = document.body.firstElementChild;
+  if (!(container instanceof HTMLElement)) throw new Error("container did not mount");
+  return container;
+}
+
+/**
+ * A Range over the first occurrence of `text` within a single text node of
+ * `root`, which is how a reader's selection arrives in the annotation code.
+ * Throws rather than returning null so a typo in the fixture fails the test at
+ * its cause instead of somewhere downstream.
+ */
+export function selectText(root: HTMLElement, text: string): Range {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node: Node | null;
+  while ((node = walker.nextNode())) {
+    const content = node.textContent ?? "";
+    const index = content.indexOf(text);
+    if (index === -1) continue;
+    const range = document.createRange();
+    range.setStart(node, index);
+    range.setEnd(node, index + text.length);
+    return range;
+  }
+  throw new Error(`no text node in the fixture contains ${JSON.stringify(text)}`);
+}
+
+/** Ids of the marks currently wrapping annotated text, in document order. */
+export function markIds(root: HTMLElement): string[] {
+  return [...root.querySelectorAll("[data-annotation-id]")]
+    .map((el) => el.getAttribute("data-annotation-id") ?? "");
+}

package/src/client/textTarget.ts

@@ -0,0 +1,31 @@
+import type { AnnotationTarget } from "./annotationTarget";
+import { restoreMarks } from "./highlightRange";
+
+/** A run of text, identified by the text itself. */
+export interface TextLocator {
+  text: string;
+}
+
+/**
+ * Selected text, wrapped in inline `<mark>` elements.
+ *
+ * The fallback target: any snippet at all is text, so this one claims
+ * everything the others turned down and must stay last in the registry.
+ */
+export const textTarget: AnnotationTarget<TextLocator> = {
+  kind: "text",
+
+  parse: (snippet) => (snippet ? { text: snippet } : null),
+
+  format: (locator) => locator.text,
+
+  // A run of text has no element of its own until a mark wraps it, and the mark
+  // is found by annotation id, not by the text. Guessing the element back from
+  // page text would resolve an annotation onto whatever happens to read the
+  // same today, so a missing mark stays a miss.
+  find: () => null,
+
+  restore: (_locator, root, ann) => {
+    restoreMarks(root, [ann]);
+  },
+};

package/src/client/theme.css

@@ -0,0 +1,66 @@
+@theme {
+  /* Colors — initial values, overridden by [data-theme] in styles.css */
+  --color-bg-base: #1a1915;
+  --color-bg-surface: #1f1e18;
+  --color-bg-elevated: #25241d;
+  --color-bg-code: #1c1b16;
+  --color-bg-input: rgba(255, 248, 220, 0.03);
+  --color-bg-elevated-half: rgba(37, 36, 29, 0.5);
+
+  --color-text-primary: #e8e4df;
+  --color-text-secondary: #a09a92;
+  --color-text-tertiary: #847d75;
+  --color-text-code: #c4beb7;
+  --color-text-disabled: #3a3530;
+  --color-text-inverse: #1a1a1a;
+
+  --color-border-subtle: rgba(255, 248, 240, 0.06);
+  --color-border-medium: rgba(255, 248, 240, 0.08);
+  --color-border-hover: rgba(255, 248, 240, 0.12);
+  --color-border-strong: rgba(255, 248, 240, 0.15);
+
+  --color-accent-green: #4a9e6d;
+  --color-accent-green-muted: rgba(74, 158, 109, 0.12);
+  --color-accent-amber: #c49a3a;
+  --color-accent-amber-muted: rgba(196, 154, 58, 0.12);
+  --color-accent-red: #c45a5a;
+  --color-accent-red-muted: rgba(196, 90, 90, 0.12);
+  --color-accent-blue: #5a8ec4;
+  --color-accent-blue-muted: rgba(90, 142, 196, 0.10);
+
+  --color-highlight-bg: rgba(255, 220, 100, 0.15);
+  --color-highlight-border: rgba(255, 220, 100, 0.35);
+  --color-highlight-annotation: rgba(255, 220, 100, 0.18);
+  --color-highlight-active: rgba(255, 220, 100, 0.35);
+  --color-highlight-selected: rgba(255, 220, 100, 0.10);
+
+  --color-badge-bg: rgba(196, 154, 58, 0.20);
+  --color-btn-primary: #e8e4df;
+  --color-btn-primary-text: #1a1a1a;
+
+  /* Fonts */
+  --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+
+  /* Font sizes */
+  --text-section: 1.75rem;
+  --text-section--line-height: 1.25;
+  --text-section--letter-spacing: -0.01em;
+  --text-task-label: 0.9375rem;
+  --text-task-label--line-height: 1.4;
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.65;
+  --text-code: 0.8125rem;
+  --text-code--line-height: 1.6;
+  --text-meta: 0.75rem;
+  --text-meta--line-height: 1.4;
+  --text-meta--letter-spacing: 0.02em;
+  --text-tiny: 0.6875rem;
+  --text-tiny--line-height: 1.4;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px var(--color-shadow);
+  --shadow-md: 0 4px 12px var(--color-shadow);
+  --shadow-lg: 0 8px 24px var(--color-shadow);
+}