@bendyline/squisq 2.0.0 → 2.0.1

package/dist/doc/index.js

@@ -16,7 +16,7 @@ import {
   scoreTextSimilarity,
   validateMarkdownDoc,
   validateMarkdownSource
-} from "../chunk-QVANWDPH.js";
+} from "../chunk-TFJVXUHH.js";
 import {
   ASCII_CHAR_H,
   ASCII_CHAR_W,
@@ -129,7 +129,7 @@ import {
   wrapWithPersistentLayers,
   writeCustomTemplatesToFrontmatter,
   writeCustomThemesToFrontmatter
-} from "../chunk-GF3BVNLU.js";
+} from "../chunk-X6DUONGT.js";
 import {
   PATH_SHAPE_KINDS,
   anchorPoint,
@@ -174,7 +174,7 @@ import {
   getAvailableThemes,
   getThemeSummaries,
   resolveTheme
-} from "../chunk-6PJRB2CF.js";
+} from "../chunk-W4O2TX5I.js";
 import {
   VIEWPORT_PRESETS,
   createTemplateContext,

package/dist/index.js

@@ -23,7 +23,7 @@ import {
   reanchorSession,
   traceWordPosAt,
   vadStep
-} from "./chunk-T3TI7GSZ.js";
+} from "./chunk-CY2R2VPR.js";
 import "./chunk-ET53IIEP.js";
 import {
   DEFAULT_TRANSFORM_STYLE_ID,
@@ -69,7 +69,7 @@ import {
   resolveRef,
   setByPointer,
   toPointer
-} from "./chunk-QTSJOY54.js";
+} from "./chunk-2PWOO4ZE.js";
 import {
   IMAGE_EDIT_ASSETS_PREFIX,
   IMAGE_EDIT_DEFAULT_BASENAME,
@@ -122,7 +122,7 @@ import {
   getSegmentAtTime,
   parseTheme,
   serializeTheme
-} from "./chunk-LYNJEOAC.js";
+} from "./chunk-MMPBOUK7.js";
 import {
   calculateBearing,
   decodeGeohash,
@@ -153,7 +153,7 @@ import {
   scoreTextSimilarity,
   validateMarkdownDoc,
   validateMarkdownSource
-} from "./chunk-QVANWDPH.js";
+} from "./chunk-TFJVXUHH.js";
 import {
   ASCII_CHAR_H,
   ASCII_CHAR_W,
@@ -274,7 +274,7 @@ import {
   wrapWithPersistentLayers,
   writeCustomTemplatesToFrontmatter,
   writeCustomThemesToFrontmatter
-} from "./chunk-GF3BVNLU.js";
+} from "./chunk-X6DUONGT.js";
 import {
   PATH_SHAPE_KINDS,
   anchorPoint,
@@ -352,7 +352,7 @@ import {
   resolveTheme,
   validateTheme,
   withAlpha
-} from "./chunk-6PJRB2CF.js";
+} from "./chunk-W4O2TX5I.js";
 import {
   DEFAULT_DOC_FONT,
   DEFAULT_TITLE_FONT,

package/dist/jsonForm/index.js

@@ -14,10 +14,10 @@ import {
   resolveRef,
   setByPointer,
   toPointer
-} from "../chunk-QTSJOY54.js";
-import "../chunk-LYNJEOAC.js";
+} from "../chunk-2PWOO4ZE.js";
+import "../chunk-MMPBOUK7.js";
 import "../chunk-FVJUUTEM.js";
-import "../chunk-6PJRB2CF.js";
+import "../chunk-W4O2TX5I.js";
 import "../chunk-5J4HKRJF.js";
 import "../chunk-QE7TWGVT.js";
 export {

package/dist/narration/index.js

@@ -23,7 +23,7 @@ import {
   reanchorSession,
   traceWordPosAt,
   vadStep
-} from "../chunk-T3TI7GSZ.js";
+} from "../chunk-CY2R2VPR.js";
 import {
   buildNarrationScript,
   buildNarrationTimingJson,
@@ -33,10 +33,10 @@ import {
   wordIndexAtChar,
   wordIndexAtTime,
   wordPosAtExpectedSyllables
-} from "../chunk-GF3BVNLU.js";
+} from "../chunk-X6DUONGT.js";
 import "../chunk-TUWMK62B.js";
 import "../chunk-5UYI3RJB.js";
-import "../chunk-6PJRB2CF.js";
+import "../chunk-W4O2TX5I.js";
 import "../chunk-5J4HKRJF.js";
 import "../chunk-R2YZTCLO.js";
 import "../chunk-AMIR72JP.js";

package/dist/schemas/index.js

@@ -9,7 +9,7 @@ import {
   getSegmentAtTime,
   parseTheme,
   serializeTheme
-} from "../chunk-LYNJEOAC.js";
+} from "../chunk-MMPBOUK7.js";
 import {
   getDocPlaybackDuration,
   resolveMediaSchedule
@@ -49,7 +49,7 @@ import {
   resolveTheme,
   validateTheme,
   withAlpha
-} from "../chunk-6PJRB2CF.js";
+} from "../chunk-W4O2TX5I.js";
 import {
   DEFAULT_DOC_FONT,
   DEFAULT_TITLE_FONT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Headless utilities for doc/block rendering, spatial math, Markdown, and storage",
   "license": "MIT",
   "author": "Bendyline",

package/src/__tests__/customThemesFrontmatter.test.ts

@@ -115,6 +115,7 @@ squisq-custom-themes: ${encoded}
 A small editor for big ideas.
 `;
     const doc = markdownToDoc(parseMarkdown(sourceMd));
+    expect(doc.themeId).toBe('my-brand');
     expect(doc.customThemes).toHaveLength(1);
     expect(doc.customThemes![0]).toEqual(brand);
 

package/src/__tests__/markdown.test.ts

@@ -155,14 +155,14 @@ describe('parseMarkdown / stringifyMarkdown', () => {
     });
 
     it('parses mentions from @[Name](scheme:id)', () => {
-      const doc = parse('Hey @[Leo](gezel:leo), take a look.');
+      const doc = parse('Hey @[Leo](person:leo), take a look.');
       const p = doc.children[0] as MarkdownParagraph;
       const text0 = p.children[0] as MarkdownText;
       expect(text0).toEqual({ type: 'text', value: 'Hey ' });
       const mention = p.children[1] as MarkdownMention;
       expect(mention).toEqual({
         type: 'mention',
-        targetKind: 'gezel',
+        targetKind: 'person',
         targetId: 'leo',
         displayName: 'Leo',
       });
@@ -176,7 +176,7 @@ describe('parseMarkdown / stringifyMarkdown', () => {
       // re-parsing `\:` produces the unescaped url, so the round-trip
       // preserves the mention semantically even if the raw text changes
       // on the first pass.
-      const input = 'Hey @[Leo](gezel:leo), ping @[Tess](gezel:tess) too.\n';
+      const input = 'Hey @[Leo](person:leo), ping @[Tess](person:tess) too.\n';
       const once = stringifyMarkdown(parseMarkdown(input));
       const twice = stringifyMarkdown(parseMarkdown(once));
       expect(twice).toBe(once);
@@ -184,7 +184,7 @@ describe('parseMarkdown / stringifyMarkdown', () => {
       const doc = parseMarkdown(once) as MarkdownDocument;
       const p = doc.children[0] as MarkdownParagraph;
       const m1 = p.children.find((c) => c.type === 'mention') as MarkdownMention;
-      expect(m1.targetKind).toBe('gezel');
+      expect(m1.targetKind).toBe('person');
       expect(m1.targetId).toBe('leo');
       expect(m1.displayName).toBe('Leo');
     });
@@ -944,6 +944,15 @@ describe('multi-line frontmatter round-trips', () => {
       path: 'C:\\temp\\"quoted"',
     });
   });
+
+  it('writes boolean values as unquoted YAML booleans', () => {
+    const out = setFrontmatterValues('# Body\n', { enabled: true, disabled: false });
+    expect(out).toContain('enabled: true');
+    expect(out).toContain('disabled: false');
+    expect(out).not.toContain('enabled: "true"');
+    expect(out).not.toContain('disabled: "false"');
+    expect(parseMarkdown(out).frontmatter).toEqual({ enabled: true, disabled: false });
+  });
 });
 
 describe('frontmatter in parseMarkdown', () => {

package/src/__tests__/markdownSanitize.test.ts

@@ -18,17 +18,19 @@ describe('markdown HTML sanitization', () => {
   });
 
   it('extraLinkSchemes allows host-app schemes but never executable ones', () => {
-    expect(sanitizeUrl('gezel-nav:src%2Fa.ts', 'link')).toBeNull();
-    expect(sanitizeUrl('gezel-nav:src%2Fa.ts', 'link', { extraLinkSchemes: ['gezel-nav'] })).toBe(
-      'gezel-nav:src%2Fa.ts',
-    );
+    expect(sanitizeUrl('workspace-nav:src%2Fa.ts', 'link')).toBeNull();
+    expect(
+      sanitizeUrl('workspace-nav:src%2Fa.ts', 'link', { extraLinkSchemes: ['workspace-nav'] }),
+    ).toBe('workspace-nav:src%2Fa.ts');
     expect(
       sanitizeUrl('javascript:alert(1)', 'link', { extraLinkSchemes: ['javascript'] }),
     ).toBeNull();
     expect(sanitizeUrl('data:text/html,x', 'link', { extraLinkSchemes: ['data'] })).toBeNull();
     // media URLs ignore the option entirely
     expect(
-      sanitizeUrl('gezel-nav:src%2Fa.ts', 'media', { extraLinkSchemes: ['gezel-nav'] }),
+      sanitizeUrl('workspace-nav:src%2Fa.ts', 'media', {
+        extraLinkSchemes: ['workspace-nav'],
+      }),
     ).toBeNull();
   });
 

package/src/doc/markdownToDoc.ts

@@ -40,7 +40,7 @@ import type {
   MarkdownNode,
   HtmlNode,
 } from '../markdown/types.js';
-import { extractPlainText } from '../markdown/utils.js';
+import { extractPlainText, readFrontmatterThemeId } from '../markdown/utils.js';
 import { coerceAnnotationValues, type CoercedBlockMeta } from '../markdown/annotationCoercion.js';
 import { estimateReadingTime } from '../timing/readingTime.js';
 import { resolveTemplateName, isContainerTemplate } from './templates/index.js';
@@ -600,6 +600,7 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
 
   const customTemplates = readCustomTemplatesFromFrontmatter(markdownDoc.frontmatter);
   const customThemes = readCustomThemesFromFrontmatter(markdownDoc.frontmatter);
+  const themeId = readFrontmatterThemeId(markdownDoc.frontmatter);
   const doc: Doc = {
     articleId,
     duration: currentTime,
@@ -609,6 +610,7 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
     },
     ...(captions ? { captions } : {}),
     ...(markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {}),
+    ...(themeId ? { themeId } : {}),
     ...(customTemplates ? { customTemplates } : {}),
     ...(customThemes ? { customThemes } : {}),
     ...(diagnostics.length > 0 ? { diagnostics } : {}),

package/src/doc/templates/__tests__/listBlock.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import { createTemplateContext } from '../../../schemas/BlockTemplates.js';
+import type { TextLayer } from '../../../schemas/Doc.js';
+import { DEFAULT_THEME } from '../../../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS } from '../../../schemas/Viewport.js';
+import { listBlock } from '../listBlock.js';
+
+const ITEMS = [
+  'We launched the scripting platform for Minecraft, which was essential for launching new categories of content for Minecraft (add-ons)',
+  "I spec'ed and largely built the Minecraft Creator Tools suite, including a website for beginning to advanced creators and set of NPM commands and tools.",
+  'I manage and craft the Minecraft samples and documentation suite',
+  'I produce and create the Minecraft Creator Channel on YouTube',
+];
+
+describe('listBlock', () => {
+  it('reserves vertical space for wrapped list items', () => {
+    const context = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    const layers = listBlock(
+      {
+        template: 'list',
+        id: 'minecraft-platform',
+        duration: 10,
+        audioSegment: 0,
+        title: 'Minecraft Platform',
+        items: ITEMS,
+      },
+      context,
+    );
+    const itemLayers = layers.filter(
+      (layer): layer is TextLayer => layer.type === 'text' && /^item-\d+$/.test(layer.id),
+    );
+    const markerLayers = layers.filter(
+      (layer): layer is TextLayer => layer.type === 'text' && /^item-\d+-marker$/.test(layer.id),
+    );
+    const yPositions = itemLayers.map((layer) => parseFloat(String(layer.position.y)));
+
+    expect(itemLayers).toHaveLength(4);
+    expect(markerLayers).toHaveLength(4);
+    expect(yPositions[0]).toBe(34);
+
+    // The marker has its own right-aligned column, while all body lines are
+    // rendered by one layer beginning after that column (a hanging indent).
+    expect(markerLayers[0]!.content.text).toBe('1.');
+    expect(markerLayers[0]!.content.style.textAlign).toBe('right');
+    expect(itemLayers[0]!.content.text).toBe(ITEMS[0]);
+    const markerRightPx =
+      (parseFloat(String(markerLayers[0]!.position.x)) / 100) * context.viewport.width +
+      Number(markerLayers[0]!.position.width);
+    const bodyLeftPx =
+      (parseFloat(String(itemLayers[0]!.position.x)) / 100) * context.viewport.width;
+    expect(bodyLeftPx).toBeGreaterThan(markerRightPx);
+
+    // The first two entries wrap to two lines. Their following baselines
+    // therefore advance by two line-heights plus the inter-item gap.
+    const fontSize = itemLayers[0]!.content.style.fontSize;
+    const twoLineAdvance = ((2 * fontSize * 1.2 + 18) / context.viewport.height) * 100;
+    expect(yPositions[1]! - yPositions[0]!).toBeCloseTo(twoLineAdvance);
+    expect(yPositions[2]! - yPositions[1]!).toBeCloseTo(twoLineAdvance);
+
+    // The third entry fits on one line, so the final advance is compact.
+    const oneLineAdvance = ((fontSize * 1.2 + 18) / context.viewport.height) * 100;
+    expect(yPositions[3]! - yPositions[2]!).toBeCloseTo(oneLineAdvance);
+  });
+});

package/src/doc/templates/listBlock.ts

@@ -19,6 +19,43 @@ import {
 } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 
+const LIST_ITEM_LINE_HEIGHT = 1.2;
+const LIST_ITEM_GAP_PX = 18;
+
+/**
+ * Mirror the renderer's character-based wrapping closely enough to reserve
+ * vertical space for each independently positioned text layer.
+ */
+function estimateWrappedLineCount(text: string, fontSize: number, maxWidth: number): number {
+  if (!text.trim()) return 1;
+
+  const charsPerLine = Math.floor(maxWidth / (fontSize * 0.5));
+  if (charsPerLine <= 0) return 1;
+
+  let lineCount = 0;
+  let currentLineLength = 0;
+
+  for (const word of text.split(/\s+/)) {
+    const testLineLength = currentLineLength ? currentLineLength + 1 + word.length : word.length;
+
+    if (testLineLength <= charsPerLine) {
+      currentLineLength = testLineLength;
+      continue;
+    }
+
+    if (currentLineLength) lineCount += 1;
+
+    let remainingLength = word.length;
+    while (remainingLength > charsPerLine) {
+      lineCount += 1;
+      remainingLength -= charsPerLine;
+    }
+    currentLineLength = remainingLength;
+  }
+
+  return Math.max(1, lineCount + (currentLineLength ? 1 : 0));
+}
+
 export function listBlock(input: ListBlockInput, context: TemplateContext): Layer[] {
   const { title, accentImage } = input;
   // `items` is required by the schema, but malformed / partially-authored
@@ -66,8 +103,9 @@ export function listBlock(input: ListBlockInput, context: TemplateContext): Laye
   // defensive against future edits to the accent-layout types).
   const centerX = parseFloat(accentLayout.textCenterX);
   const widthPct = parseFloat(accentLayout.textWidth);
-  const leftX =
-    Number.isFinite(centerX) && Number.isFinite(widthPct) ? `${centerX - widthPct / 2}%` : '8%';
+  const leftPct =
+    Number.isFinite(centerX) && Number.isFinite(widthPct) ? centerX - widthPct / 2 : 8;
+  const leftX = `${leftPct}%`;
 
   // Title if provided
   const startY = title ? 34 : 26;
@@ -95,28 +133,49 @@ export function listBlock(input: ListBlockInput, context: TemplateContext): Laye
     });
   }
 
-  // Stack items with a fixed compact gap rather than stretching them
-  // across the available band. Distributing items across (startY → 80%)
-  // left big vertical gaps for short lists and made the slide read as a
-  // sparse menu instead of a tight enumeration; conversely a bare
-  // line-height gap read as a cramped paragraph — 18px of air keeps each
-  // entry its own line without breaking the group.
-  //
-  // Spacing = item line-height (34px base × 1.2) + 18px gap, expressed
-  // as % of the 1080px design canvas (~5.4%). Wrapped items push the
-  // next entry down via their own line-height, so this sets the
-  // minimum baseline-to-baseline distance for unwrapped items.
-  const LIST_ITEM_BASE_PX = 34;
-  const LIST_ITEM_LINE_HEIGHT = 1.2;
-  const LIST_ITEM_GAP_PX = 18;
-  const DESIGN_HEIGHT_PX = 1080;
-  const spacing =
-    ((LIST_ITEM_BASE_PX * LIST_ITEM_LINE_HEIGHT + LIST_ITEM_GAP_PX) / DESIGN_HEIGHT_PX) * 100;
+  // Render the number and body in separate columns. The body is therefore a
+  // single text layer whose wrapped lines all share the same x coordinate,
+  // producing a hanging indent instead of wrapping underneath the number.
+  const textWidthPx = (Number.isFinite(widthPct) ? widthPct / 100 : 0.85) * context.viewport.width;
+  const markerText = `${items.length}.`;
+  const markerWidthPx = Math.max(itemFontSize, markerText.length * itemFontSize * 0.5);
+  const markerGapPx = itemFontSize * 0.35;
+  const bodyIndentPx = markerWidthPx + markerGapPx;
+  const bodyLeftX = `${leftPct + (bodyIndentPx / context.viewport.width) * 100}%`;
+  const bodyWidthPx = Math.max(itemFontSize, textWidthPx - bodyIndentPx);
+  let itemY = startY;
 
   // List items with staggered animation
   for (let i = 0; i < items.length; i++) {
-    const y = startY + spacing * i;
-    const itemText = `${i + 1}.  ${items[i]}`;
+    const itemText = items[i]!;
+    const lineCount = estimateWrappedLineCount(itemText, itemFontSize, bodyWidthPx);
+    const animation = themedEntrance(context, 'text', {
+      type: 'fadeIn',
+      duration: 0.8,
+      delay: 0.3 + 0.3 * i,
+    });
+
+    layers.push({
+      type: 'text',
+      id: `item-${i}-marker`,
+      content: {
+        text: `${i + 1}.`,
+        style: {
+          fontSize: itemFontSize,
+          fontFamily: getThemeFont(context, 'body'),
+          color: theme.colors.text,
+          textAlign: 'right',
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
+          shadow: shouldUseShadow(context),
+        },
+      },
+      position: {
+        x: leftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: markerWidthPx,
+      },
+      animation,
+    });
 
     layers.push({
       type: 'text',
@@ -128,21 +187,20 @@ export function listBlock(input: ListBlockInput, context: TemplateContext): Laye
           fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           textAlign: 'left',
-          lineHeight: 1.2,
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
           shadow: shouldUseShadow(context),
         },
       },
       position: {
-        x: leftX,
-        y: adjustY(`${y}%`, accentLayout),
-        width: accentLayout.textWidth,
+        x: bodyLeftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: bodyWidthPx,
       },
-      animation: themedEntrance(context, 'text', {
-        type: 'fadeIn',
-        duration: 0.8,
-        delay: 0.3 + 0.3 * i,
-      }),
+      animation,
     });
+
+    const itemHeightPx = lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT;
+    itemY += ((itemHeightPx + LIST_ITEM_GAP_PX) / context.viewport.height) * 100;
   }
 
   return layers;

package/src/schemas/themes/gezellig.json

@@ -2,7 +2,7 @@
   "schemaVersion": "1",
   "id": "gezellig",
   "name": "Gezellig",
-  "description": "Warm sage + terracotta palette inspired by the Gezel desktop app. Subtle orange-tinted dark background, cream text, sage and terracotta accents.",
+  "description": "Cozy, warm-hued palette with a subtle orange-tinted dark background, cream text, and sage and terracotta accents.",
   "colors": {
     "primary": "#b0724c",
     "secondary": "#667f62",