@cfbender/cesium 0.5.1 → 0.5.2

package/src/render/theme.ts

@@ -13,6 +13,9 @@ export interface ThemePalette {
   olive: string;
   codeBg: string;
   codeFg: string;
+  diffAdd: string; // line-tint and connector color for additions
+  diffRemove: string; // line-tint and connector color for deletions
+  diffChange: string; // connector color for replacements
 }
 
 export interface ThemeFonts {
@@ -56,6 +59,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#8FA86E",
     codeBg: "#2B1F22",
     codeFg: "#DDD3C7",
+    diffAdd: "#6D9E60",
+    diffRemove: "#C75B5B",
+    diffChange: "#D4A85A",
   },
   // claret-light: deep-rose-on-warm-cream — derived from claret.nvim light palette.
   // (this is the old "claret" palette, now renamed)
@@ -72,6 +78,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#5A6B40",
     codeBg: "#180810",
     codeFg: "#DDD3C7",
+    diffAdd: "#5A6B40",
+    diffRemove: "#9E3838",
+    diffChange: "#B07A2A",
   },
   // claret: alias for claret-dark (backward compat)
   claret: {
@@ -87,6 +96,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#8FA86E",
     codeBg: "#2B1F22",
     codeFg: "#DDD3C7",
+    diffAdd: "#6D9E60",
+    diffRemove: "#C75B5B",
+    diffChange: "#D4A85A",
   },
   // Warm: ivory/clay/oat — the html-effectiveness reference palette.
   warm: {
@@ -102,6 +114,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#788C5D",
     codeBg: "#141413",
     codeFg: "#E8E6DE",
+    diffAdd: "#788C5D",
+    diffRemove: "#C0392B",
+    diffChange: "#D97757",
   },
   // Cool: desaturated blue-grey — technical, trustworthy.
   cool: {
@@ -117,6 +132,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#4E8A6A",
     codeBg: "#1B2333",
     codeFg: "#D8E0ED",
+    diffAdd: "#4E8A6A",
+    diffRemove: "#B6443A",
+    diffChange: "#3A7BB8",
   },
   // Mono: black/white/grey — editorial, high-contrast.
   mono: {
@@ -132,6 +150,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#5A7A5A",
     codeBg: "#111111",
     codeFg: "#EBEBEB",
+    diffAdd: "#5A7A5A",
+    diffRemove: "#A03A2B",
+    diffChange: "#666666",
   },
   // Paper: sepia/cream — soft, book-like, warm and aged.
   paper: {
@@ -147,6 +168,9 @@ export const THEME_PRESETS: Readonly<Record<ThemePresetName, ThemePalette>> = {
     olive: "#607848",
     codeBg: "#2A2218",
     codeFg: "#E8DEC8",
+    diffAdd: "#607848",
+    diffRemove: "#A0392B",
+    diffChange: "#B05A2A",
   },
 };
 
@@ -198,6 +222,9 @@ export function themeToCssVars(theme: ThemeTokens): string {
   --olive: ${colors.olive};
   --code-bg: ${colors.codeBg};
   --code-fg: ${colors.codeFg};
+  --diff-add: ${colors.diffAdd};
+  --diff-remove: ${colors.diffRemove};
+  --diff-change: ${colors.diffChange};
   --serif: ${fonts.serif};
   --sans: ${fonts.sans};
   --mono: ${fonts.mono};
@@ -936,6 +963,110 @@ textarea.cs-text { font-family: var(--mono); }
   font-weight: 600;
   z-index: 10;
 }
+
+/* diff block */
+.diff-block {
+  margin: var(--space-6, 1.5rem) 0;
+  border: 1.5px solid var(--rule);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--code-bg);
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--code-fg);
+}
+.diff-block.fallback pre {
+  margin: 0;
+  padding: 12px 14px;
+  white-space: pre;
+  overflow-x: auto;
+}
+.diff-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 40%);
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 5%);
+  font-size: 12px;
+  color: color-mix(in oklab, var(--code-fg), transparent 30%);
+}
+.diff-filename { font-weight: 500; }
+.diff-stat { font-variant-numeric: tabular-nums; display: inline-flex; gap: 8px; }
+.diff-stat .add { color: var(--diff-add); }
+.diff-stat .rem { color: var(--diff-remove); }
+
+.diff-grid {
+  display: grid;
+  grid-template-columns: 1fr 60px 1fr;
+  align-items: start;
+}
+.diff-side {
+  list-style: none;
+  margin: 0;
+  padding: 8px 0;
+  overflow-x: auto;
+  min-width: 0;
+}
+.diff-line {
+  display: grid;
+  grid-template-columns: 3.25em 1fr;
+  gap: 0;
+  height: 22px;
+  line-height: 22px;
+  white-space: pre;
+}
+.diff-line .num {
+  text-align: right;
+  padding-right: 12px;
+  color: color-mix(in oklab, var(--code-fg), transparent 60%);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+.diff-line .content {
+  padding-right: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.diff-line.add  { background: color-mix(in oklab, transparent, var(--diff-add) 14%); }
+.diff-line.remove { background: color-mix(in oklab, transparent, var(--diff-remove) 14%); }
+.diff-line.hunk-sep {
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 8%);
+  color: color-mix(in oklab, var(--code-fg), transparent 50%);
+  font-style: italic;
+  font-size: 11px;
+}
+
+.diff-connector {
+  position: relative;
+  align-self: stretch;
+  padding: 8px 0;
+  background: color-mix(in oklab, var(--code-bg), var(--code-fg) 2%);
+  border-left: 1px solid color-mix(in oklab, var(--rule), transparent 60%);
+  border-right: 1px solid color-mix(in oklab, var(--rule), transparent 60%);
+}
+.diff-connector svg {
+  display: block;
+  width: 100%;
+}
+.diff-conn { stroke-width: 1; }
+.diff-conn.add    { fill: var(--diff-add);    stroke: var(--diff-add);    fill-opacity: 0.22; }
+.diff-conn.remove { fill: var(--diff-remove); stroke: var(--diff-remove); fill-opacity: 0.22; }
+.diff-conn.change { fill: var(--diff-change); stroke: var(--diff-change); fill-opacity: 0.18; }
+
+.diff-block figcaption {
+  padding: 8px 14px;
+  border-top: 1px solid color-mix(in oklab, var(--rule), transparent 40%);
+  font-size: 12px;
+  font-family: var(--sans);
+  color: color-mix(in oklab, var(--code-fg), transparent 30%);
+}
+
+@media (max-width: 720px) {
+  .diff-grid { grid-template-columns: 1fr; }
+  .diff-connector { display: none; }
+  .diff-side.before { border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 60%); }
+}
 `;
 }
 

package/src/render/validate.ts

@@ -439,7 +439,9 @@ function isPublishKind(val: unknown): val is PublishKind {
 // ─── Block validation ─────────────────────────────────────────────────────────
 
 type BlockValidationError = { path: string; message: string };
-type BlockValidationResult = { ok: true; blocks: Block[] } | { ok: false; errors: BlockValidationError[] };
+type BlockValidationResult =
+  | { ok: true; blocks: Block[] }
+  | { ok: false; errors: BlockValidationError[] };
 
 function validateBlock(raw: unknown, path: string, depth: number): BlockValidationError[] {
   const errors: BlockValidationError[] = [];
@@ -484,7 +486,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
         errors.push({ path, message: "section block requires children array" });
       } else {
         if (depth > 3) {
-          errors.push({ path, message: `section nesting depth exceeds maximum of 3 (current depth: ${depth})` });
+          errors.push({
+            path,
+            message: `section nesting depth exceeds maximum of 3 (current depth: ${depth})`,
+          });
         } else {
           const children = b["children"] as unknown[];
           for (let i = 0; i < children.length; i++) {
@@ -518,7 +523,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
     }
     case "code": {
       if (typeof b["lang"] !== "string" || (b["lang"] as string).trim() === "") {
-        errors.push({ path, message: 'code block requires a non-empty lang (use "text" if unknown)' });
+        errors.push({
+          path,
+          message: 'code block requires a non-empty lang (use "text" if unknown)',
+        });
       }
       if (typeof b["code"] !== "string") {
         errors.push({ path, message: "code block requires code field" });
@@ -580,7 +588,10 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
       const hasSvg = typeof b["svg"] === "string";
       const hasHtml = typeof b["html"] === "string";
       if (hasSvg && hasHtml) {
-        errors.push({ path, message: "diagram block must have exactly one of svg or html, not both" });
+        errors.push({
+          path,
+          message: "diagram block must have exactly one of svg or html, not both",
+        });
       } else if (!hasSvg && !hasHtml) {
         errors.push({ path, message: "diagram block requires exactly one of svg or html" });
       }
@@ -592,6 +603,35 @@ function validateBlock(raw: unknown, path: string, depth: number): BlockValidati
       }
       break;
     }
+    case "diff": {
+      const hasPatch = "patch" in b && b["patch"] !== undefined;
+      const hasBefore = "before" in b && b["before"] !== undefined;
+      const hasAfter = "after" in b && b["after"] !== undefined;
+
+      if (hasPatch && (hasBefore || hasAfter)) {
+        errors.push({
+          path,
+          message: "provide exactly one of patch or before/after, not both",
+        });
+      } else if (!hasPatch && !hasBefore && !hasAfter) {
+        errors.push({
+          path,
+          message: "diff block requires either patch or before+after",
+        });
+      } else if (hasPatch) {
+        if (typeof b["patch"] !== "string" || (b["patch"] as string).trim() === "") {
+          errors.push({ path, message: "diff block patch must be a non-empty string" });
+        }
+      } else {
+        // before/after arm
+        if (hasBefore && !hasAfter) {
+          errors.push({ path, message: "diff block before/after arm requires both fields" });
+        } else if (!hasBefore && hasAfter) {
+          errors.push({ path, message: "diff block before/after arm requires both fields" });
+        }
+      }
+      break;
+    }
   }
 
   // Deep field validation against catalog schema — catches unknown fields (with "did you mean"
@@ -611,7 +651,10 @@ function validateBlocksArray(raw: unknown): BlockValidationResult {
   }
 
   if (raw.length > 1000) {
-    return { ok: false, errors: [{ path: "blocks", message: "blocks array exceeds maximum of 1000 blocks" }] };
+    return {
+      ok: false,
+      errors: [{ path: "blocks", message: "blocks array exceeds maximum of 1000 blocks" }],
+    };
   }
 
   const allErrors: BlockValidationError[] = [];
@@ -627,7 +670,10 @@ function validateBlocksArray(raw: unknown): BlockValidationResult {
     if (blockType === "hero") {
       heroCount++;
       if (i !== 0) {
-        allErrors.push({ path: `blocks[${i}]`, message: "hero block must be the first block if present" });
+        allErrors.push({
+          path: `blocks[${i}]`,
+          message: "hero block must be the first block if present",
+        });
       }
     }
     if (blockType === "tldr") {
@@ -740,9 +786,7 @@ export function validatePublishInput(input: unknown): ValidationResult<PublishIn
     // blocks branch
     const blocksResult = validateBlocksArray(raw["blocks"]);
     if (!blocksResult.ok) {
-      const errorMessages = blocksResult.errors
-        .map((e) => `${e.path}: ${e.message}`)
-        .join("; ");
+      const errorMessages = blocksResult.errors.map((e) => `${e.path}: ${e.message}`).join("; ");
       return { ok: false, error: `blocks validation failed — ${errorMessages}` };
     }
     return {

package/src/server/lifecycle.ts

@@ -379,7 +379,11 @@ export async function ensureServerRunning(cfg: LifecycleConfig): Promise<Running
 
   // Use a spawn-only lock to prevent concurrent spawns. Release it immediately
   // after spawning so the child can acquire its own (.server-start.lock) lock.
-  const spawnLock = await acquireLock({ lockPath: spawnLockPath, timeoutMs: 15_000, staleMs: 30_000 });
+  const spawnLock = await acquireLock({
+    lockPath: spawnLockPath,
+    timeoutMs: 15_000,
+    staleMs: 30_000,
+  });
   try {
     // Re-check after acquiring lock
     const existingAfterLock = readPidFile(pidFilePath);

package/src/storage/index-gen.ts

@@ -236,9 +236,8 @@ function indexJs(): string {
 function renderEntryCard(entry: IndexEntry): string {
   const isSuperseded = entry.supersededBy !== null ? "1" : "0";
   const kindPill = `<span class="pill">${esc(entry.kind)}</span>`;
-  const inputModeBadge = entry.inputMode !== undefined
-    ? ` <span class="tag">${esc(entry.inputMode)}</span>`
-    : "";
+  const inputModeBadge =
+    entry.inputMode !== undefined ? ` <span class="tag">${esc(entry.inputMode)}</span>` : "";
   const dateStr = `<span class="card-date">${esc(formatDate(entry.createdAt))}</span>`;
   const supersededBadge =
     entry.supersedes !== null

package/src/tools/publish.ts

@@ -117,9 +117,7 @@ export function createPublishTool(
       html: tool.schema
         .string()
         .optional()
-        .describe(
-          "Body HTML — escape valve / legacy mode. Provide exactly one of html or blocks.",
-        ),
+        .describe("Body HTML — escape valve / legacy mode. Provide exactly one of html or blocks."),
       blocks: tool.schema
         .array(tool.schema.any())
         .optional()

package/src/tools/styleguide.ts

@@ -101,21 +101,17 @@ export async function generateStyleguideMarkdown(): Promise<string> {
     "- Inline: `**bold**`, `*italic*`, `` `code` ``, `[text](href)` (relative or anchor only).",
   );
   lines.push(
-    "- HTML safelist: `<kbd>`, `<span class=\"pill\">`, `<span class=\"tag\">`. Anything else is escaped.",
+    '- HTML safelist: `<kbd>`, `<span class="pill">`, `<span class="tag">`. Anything else is escaped.',
   );
   lines.push("");
   lines.push("## When to reach for raw_html / diagram");
   lines.push("");
-  lines.push(
-    "- `diagram` — inline SVG visualizations or bespoke composed HTML diagrams.",
-  );
+  lines.push("- `diagram` — inline SVG visualizations or bespoke composed HTML diagrams.");
   lines.push(
     "- `raw_html` — anything genuinely creative that doesn't fit a known block type." +
       " Include a `purpose` string describing what you're building.",
   );
-  lines.push(
-    "- Critique flags raw_html overuse (>2 blocks or >30% of body characters).",
-  );
+  lines.push("- Critique flags raw_html overuse (>2 blocks or >30% of body characters).");
 
   return lines.join("\n");
 }