dreamcontext 0.17.1 → 0.18.0

package/dist/skill-packs/excalidraw/examples/atomic_check.js

@@ -0,0 +1,99 @@
+// atomic_check.js — the regression guard for the kit's core promise:
+// every chart type is a plug-in adaptor, drivable from ONE spec element with DATA only.
+//
+// Run:  node examples/atomic_check.js
+// Each type below gets a single spec element and nothing else — no coordinates, no layout, no JS
+// helpers. If it draws elements with a clean audit, it is genuinely atomic. If someone adds a chart
+// to charts.js but forgets to register it in COMPOSITES, or breaks it on minimal input, this fails.
+const path = require('path');
+const os = require('os');
+const { buildExcalidraw } = require(path.resolve(__dirname, '../scripts/build_excalidraw.js'));
+
+// Minimal-but-real input per type. Deliberately sparse: a chart must degrade sanely, not assume
+// the author passed every option.
+const CASES = {
+  lineChart:  { type: 'lineChart', w: 400, h: 240, xLabels: ['1', '2', '3'], series: [{ label: 'DAU', points: [10, 30, 20] }] },
+  barChart:   { type: 'barChart', w: 400, h: 240, bars: [{ label: 'US', value: 266 }, { label: 'TR', value: 22 }] },
+  barCompare: { type: 'barCompare', w: 400, h: 240, seriesLabels: ['W1', 'W2'], groups: [{ label: 'CPM', values: [139, 169] }] },
+  stackedBar: { type: 'stackedBar', w: 400, h: 240, seriesLabels: ['a', 'b'], groups: [{ label: 'X', values: [3, 7] }] },
+  gantt:      { type: 'gantt', w: 600, tasks: [{ label: 'iş', start: '2026-07-16', end: '2026-07-20', done: 0.4 }] },
+  quadrant:   { type: 'quadrant', w: 400, h: 400, items: [{ label: 'A', x: 0.8, y: 0.8 }, { label: 'B', x: 0.2, y: 0.3 }] },
+  donut:      { type: 'donut', r: 80, slices: [{ label: 'a', value: 70 }, { label: 'b', value: 30 }] },
+  pie:        { type: 'pie', r: 80, slices: [{ label: 'a', value: 60 }, { label: 'b', value: 40 }] },
+  sparkline:  { type: 'sparkline', w: 160, h: 40, points: [5, 9, 4, 8] },
+  heatmap:    { type: 'heatmap', rows: ['r1', 'r2'], cols: ['D0', 'D1'], values: [[100, 11], [100, 9]] },
+  table:      { type: 'table', headers: ['Plan', 'Churn'], rows: [['Pro', '3.4%']] },
+  timeline:   { type: 'timeline', w: 800, events: [{ label: 'başladı', at: '2026-07-03' }, { label: 'review', at: '2026-07-16' }] },
+  kpi:        { type: 'kpi', w: 260, label: 'DAU', value: '32', delta: '−%57' },
+  callout:    { type: 'callout', w: 600, title: 'not', text: 'metin hep ölçüde kalır.' },
+  funnel:     { type: 'funnel', w: 300, stages: [{ label: 'Landing' }, { label: 'Sub' }] },
+  // device + product-UI kit
+  'device(iphone)': { type: 'device', kind: 'iphone', x: 0, y: 0 },
+  'device(ipad)':   { type: 'device', kind: 'ipad', x: 0, y: 0 },
+  'device(mac)':    { type: 'device', kind: 'mac', x: 0, y: 0 },
+  appBar:     { type: 'appBar', w: 340, title: 'Ayarlar', back: true, actions: ['more-v'] },
+  tabBar:     { type: 'tabBar', w: 340, items: [{ icon: 'home', label: 'Akış' }, { icon: 'user', label: 'Profil' }], active: 0 },
+  icon:       { type: 'icon', name: 'search', size: 24 },
+  iconButton: { type: 'iconButton', icon: 'plus', shape: 'circle', variant: 'solid', color: 'blue' },
+  listRow:    { type: 'listRow', w: 340, title: 'Bildirimler', trailing: 'toggle' },
+  toggle:     { type: 'toggle', on: true },
+  segmented:  { type: 'segmented', w: 300, items: ['Hepsi', 'Yeni'], active: 0 },
+  slider:     { type: 'slider', w: 260, value: 0.4 },
+  searchField:{ type: 'searchField', w: 300, placeholder: 'Ara' },
+  windowFrame:{ type: 'windowFrame', w: 400, h: 260, kind: 'browser', url: 'acme.app' },
+  button:     { type: 'button', w: 140, text: 'Kaydet' },
+  input:      { type: 'input', w: 240, label: 'Slug', placeholder: 'chart-kit' },
+  imagePlaceholder: { type: 'imagePlaceholder', w: 200, h: 140 },
+};
+
+// Degenerate input must not throw or divide by zero — empty series, single point, all-equal values.
+const EDGE = {
+  'lineChart (boş seri)':   { type: 'lineChart', w: 300, h: 200, series: [] },
+  'lineChart (tek nokta)':  { type: 'lineChart', w: 300, h: 200, xLabels: ['1'], series: [{ label: 'a', points: [5] }] },
+  'barChart (hepsi eşit)':  { type: 'barChart', w: 300, h: 200, bars: [{ label: 'a', value: 7 }, { label: 'b', value: 7 }] },
+  'donut (tek dilim)':      { type: 'donut', r: 60, slices: [{ label: 'a', value: 1 }] },
+  'sparkline (boş)':        { type: 'sparkline', w: 100, h: 30, points: [] },
+  'table (satır yok)':      { type: 'table', headers: ['a', 'b'], rows: [] },
+  'tabBar (boş)':           { type: 'tabBar', w: 300, items: [] },
+  'segmented (tek)':        { type: 'segmented', w: 200, items: ['A'], active: 0 },
+  'icon (bilinmeyen ad)':   { type: 'icon', name: 'yok-boyle-bir-sey', size: 20 },
+  'listRow (başlıksız)':    { type: 'listRow', w: 300, title: '' },
+};
+
+const tmp = path.join(os.tmpdir(), 'excalidraw-atomic-check');
+let pass = 0, fail = 0;
+
+function check(label, el, requireElements = true) {
+  try {
+    const r = buildExcalidraw({ out: path.join(tmp, `${label.replace(/\W+/g, '-')}.excalidraw.md`), elements: [el] });
+    const bad = r.overlaps + r.buriedText + r.longLines;
+    const ok = bad === 0 && (!requireElements || r.elements > 0);
+    if (ok) { pass++; console.log(`  ✓ ${label.padEnd(22)} ${String(r.elements).padStart(3)} element`); }
+    else { fail++; console.log(`  ✗ ${label.padEnd(22)} elements=${r.elements} audit=${bad}`); }
+  } catch (e) {
+    fail++; console.log(`  ✗ ${label.padEnd(22)} THREW: ${e.message.slice(0, 60)}`);
+  }
+}
+
+console.log('\nEvery type from ONE spec element (data only, no JS):');
+for (const [name, el] of Object.entries(CASES)) check(name, el);
+
+console.log('\nDegenerate input must not throw:');
+for (const [name, el] of Object.entries(EDGE)) check(name, el, false);
+
+// dreamcontext contract: a board destined for knowledge/ must carry name + description, or it cannot
+// be recalled. This is the integration that used to require hand-patching every generated file.
+console.log('\nFrontmatter (dreamcontext recall contract):');
+try {
+  const out = path.join(tmp, 'frontmatter.excalidraw.md');
+  buildExcalidraw({ out, name: 'demo-board', description: 'What this board shows.', tags: ['x', 'excalidraw'],
+    elements: [{ type: 'kpi', x: 0, y: 0, label: 'A', value: '1' }] });
+  const fm = require('fs').readFileSync(out, 'utf8').split('---')[1] || '';
+  const ok = /(^|\n)name: demo-board/.test(fm) && /(^|\n)description: >-/.test(fm)
+    && /(^|\n)tags: \[x, excalidraw\]/.test(fm) && /excalidraw-plugin: parsed/.test(fm);
+  if (ok) { pass++; console.log('  ✓ name + description + tags emitted'); }
+  else { fail++; console.log('  ✗ frontmatter wrong:', JSON.stringify(fm.trim())); }
+} catch (e) { fail++; console.log('  ✗ THREW:', e.message.slice(0, 60)); }
+
+console.log(`\n  ${pass} passed / ${fail} failed`);
+process.exit(fail ? 1 : 0);

package/dist/skill-packs/excalidraw/examples/chart.spec.json

@@ -0,0 +1,122 @@
+{
+  "out": "./examples/Chart Spec.excalidraw.md",
+  "background": "#ffffff",
+  "elements": [
+    {
+      "type": "stack",
+      "x": 40,
+      "y": 40,
+      "gap": 40,
+      "items": [
+        {
+          "type": "sectionTitle",
+          "text": "Declarative charts — pure JSON, no generator script",
+          "fontSize": 34
+        },
+        {
+          "type": "row",
+          "gap": 24,
+          "items": [
+            {
+              "type": "kpi",
+              "w": 260,
+              "label": "D0 ROAS",
+              "value": "0.25",
+              "delta": "W1: 0.25 — değişmedi",
+              "color": "red"
+            },
+            {
+              "type": "kpi",
+              "w": 260,
+              "label": "CPM",
+              "value": "$169",
+              "delta": "+%22",
+              "color": "red",
+              "spark": [
+                139,
+                144,
+                151,
+                158,
+                169
+              ]
+            },
+            {
+              "type": "callout",
+              "w": 640,
+              "color": "gray",
+              "title": "tak diye",
+              "text": "Bu board tek bir JSON. Agent hiç JS yazmadan lineChart/barCompare/gantt çizebiliyor."
+            }
+          ]
+        },
+        {
+          "type": "row",
+          "gap": 50,
+          "items": [
+            {
+              "type": "lineChart",
+              "w": 620,
+              "h": 300,
+              "title": "lineChart — DAU",
+              "xLabels": [
+                "3",
+                "5",
+                "7",
+                "9",
+                "11",
+                "13",
+                "15"
+              ],
+              "area": true,
+              "series": [
+                {
+                  "label": "DAU",
+                  "color": "blue",
+                  "points": [
+                    58,
+                    69,
+                    55,
+                    44,
+                    38,
+                    35,
+                    32
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "barCompare",
+              "w": 560,
+              "h": 300,
+              "title": "barCompare — W1 ↔ W2",
+              "seriesLabels": [
+                "W1",
+                "W2"
+              ],
+              "colors": [
+                "gray",
+                "red"
+              ],
+              "groups": [
+                {
+                  "label": "CPM",
+                  "values": [
+                    139,
+                    169
+                  ]
+                },
+                {
+                  "label": "Trans %",
+                  "values": [
+                    67.2,
+                    46.77
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/dist/skill-packs/excalidraw/examples/chart_board.js

@@ -0,0 +1,173 @@
+// chart_board.js — every chart in the kit, on one board.
+// Data is FICTIONAL (a made-up product, "Acme"): this file ships to npm, so it demos the kit and
+// must never carry real customer metrics.
+// Run:  node examples/chart_board.js     → examples/Chart Kit.excalidraw.md   (expects a clean audit)
+//
+// This doubles as the kit's smoke test: it drives every builder, and the build must report
+// overlaps=0 buriedText=0 longLines=0. If a chart's geometry drifts, this board says so.
+const path = require('path');
+const { buildExcalidraw } = require(path.resolve(__dirname, '../scripts/build_excalidraw.js'));
+const { sectionTitle, prose, stack, row, funnel, READ_W } = require(path.resolve(__dirname, '../scripts/lib/style.js'));
+const {
+  lineChart, barChart, barCompare, stackedBar, gantt, quadrant,
+  donut, sparkline, heatmap, table, timeline, kpi, callout,
+} = require(path.resolve(__dirname, '../scripts/lib/charts.js'));
+
+const DAYS = ['3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'];
+const DAU = [58, 74, 69, 64, 55, 47, 44, 41, 38, 36, 35, 33, 32];
+const NEW = [44, 56, 51, 47, 40, 33, 30, 28, 26, 24, 23, 21, 20];
+const PREM = [30, 35, 36, 38, 33, 27, 24, 21, 18, 15, 14, 12, 11];
+
+const board = stack({
+  x: 60, y: 60, gap: 64, items: [
+    (x, y) => stack({
+      x, y, gap: 12, items: [
+        (x, y) => sectionTitle({ x, y, text: 'Excalidraw chart kit — every builder, one board', fontSize: 42 }),
+        (x, y) => prose({ x, y, width: READ_W, fontSize: 15, text: 'Each chart below is one call with DATA only — no coordinates, no hand-placed labels. Geometry, axes, wrapping and collision-avoidance belong to the builder.' }),
+      ],
+    }),
+
+    // KPI tiles (with sparklines) + a callout
+    (x, y) => row({
+      x, y, gap: 24, items: [
+        (x, y) => kpi({ x, y, w: 300, label: 'DAU', value: '32', delta: 'peak 74 → -57%', color: 'red', spark: DAU }),
+        (x, y) => kpi({ x, y, w: 300, label: 'NEW USERS / DAY', value: '20', delta: '425 over 13 days', color: 'red', spark: NEW }),
+        (x, y) => kpi({ x, y, w: 300, label: 'D0 ROAS', value: '0.34', delta: 'W1: 0.31 — +10%', color: 'yellow' }),
+        (x, y) => callout({ x, y, w: 700, color: 'gray', title: 'callout()', text: 'Body copy is always bounded to the reading measure. A wide band puts its heading beside the text instead of stretching one line edge-to-edge.' }),
+      ],
+    }),
+
+    // lineChart + barCompare
+    (x, y) => row({
+      x, y, gap: 60, items: [
+        (x, y) => lineChart({
+          x, y, w: 760, h: 340, title: 'lineChart() — app health, days 1–13',
+          xLabels: DAYS, area: true,
+          series: [
+            { label: 'DAU', color: 'blue', points: DAU },
+            { label: 'new users', color: 'green', points: NEW },
+            { label: 'paid actives', color: 'red', points: PREM },
+          ],
+        }),
+        (x, y) => barCompare({
+          x, y, w: 700, h: 340, title: 'barCompare() — week 1 vs week 2',
+          seriesLabels: ['Week 1', 'Week 2'], colors: ['gray', 'red'],
+          groups: [
+            { label: 'ROAS x100', values: [31, 34] },
+            { label: 'CPM $', values: [120, 145] },
+            { label: 'Checkout %', values: [72.0, 58.4] },
+            { label: 'Refund x10', values: [18.0, 26.5] },
+          ],
+        }),
+      ],
+    }),
+
+    // funnel + barChart(horizontal) + donut
+    (x, y) => row({
+      x, y, gap: 60, valign: 'top', items: [
+        (x, y) => funnel({
+          x, y, w: 420, topW: 420, botW: 120, stageH: 74, fontSize: 15, notes: false,
+          stages: [
+            { label: 'Landing 4,000', color: 'blue' }, { label: 'Signup 1,900', color: 'red' },
+            { label: 'Onboard 1,700', color: 'green' }, { label: 'Trial 1,200', color: 'red' },
+            { label: 'Checkout 1,150', color: 'yellow' }, { label: 'Paid 140', color: 'red' },
+          ],
+        }),
+        (x, y) => barChart({
+          x, y, w: 620, h: 320, horizontal: true, title: 'barChart({horizontal}) — signups by country',
+          bars: [
+            { label: 'US', value: 310, color: 'blue' }, { label: 'DE', value: 64, color: 'yellow' },
+            { label: 'UK', value: 52, color: 'gray' }, { label: 'CA', value: 41, color: 'gray' },
+            { label: 'AU', value: 23, color: 'gray' },
+          ],
+        }),
+        (x, y) => donut({
+          x, y, r: 120, title: 'donut() — error breakdown',
+          slices: [
+            { label: 'timeout', value: 240, color: 'red' },
+            { label: 'other', value: 60, color: 'gray' },
+            { label: 'rate limited', value: 30, color: 'yellow' },
+          ],
+        }),
+      ],
+    }),
+
+    // stackedBar + quadrant
+    (x, y) => row({
+      x, y, gap: 60, valign: 'top', items: [
+        (x, y) => stackedBar({
+          x, y, w: 680, h: 340, title: 'stackedBar() — D1 cohort split',
+          seriesLabels: ['paid returned', 'free returned', 'churned'], colors: ['green', 'blue', 'gray'],
+          groups: [
+            { label: 'week 1', values: [22, 14, 90] }, { label: 'week 2', values: [19, 12, 84] },
+            { label: 'week 3', values: [17, 11, 96] },
+          ],
+        }),
+        (x, y) => quadrant({
+          x, y, w: 620, h: 460, title: 'quadrant() — roadmap: impact x effort',
+          xAxis: { left: 'high effort', right: 'low effort' }, yAxis: { bottom: 'low impact', top: 'high impact' },
+          quadrantLabels: { tr: 'DO FIRST', tl: 'plan', br: 'quick win', bl: 'later' },
+          items: [
+            { label: 'signup provisioning', x: 0.42, y: 0.95, color: 'red' },
+            { label: 'checkout rate', x: 0.55, y: 0.88, color: 'red' },
+            { label: 'landing A/B', x: 0.78, y: 0.66, color: 'yellow' },
+            { label: 'churn-save', x: 0.35, y: 0.5, color: 'blue' },
+            { label: 'refund monitor', x: 0.85, y: 0.28, color: 'gray' },
+          ],
+        }),
+      ],
+    }),
+
+    // gantt + timeline
+    (x, y) => gantt({
+      x, y, w: 1400, title: 'gantt() — fix plan', today: '2026-03-02',
+      tasks: [
+        { label: 'backend cross-check', start: '2026-03-02', end: '2026-03-05', color: 'red', done: 0.3 },
+        { label: 'payment triage', start: '2026-03-03', end: '2026-03-09', color: 'red' },
+        { label: 'landing A/B', start: '2026-03-06', end: '2026-03-16', color: 'yellow' },
+        { label: 'churn-save flow', start: '2026-03-10', end: '2026-03-22', color: 'blue' },
+        { label: 'review', start: '2026-03-09', milestone: true, color: 'purple' },
+      ],
+    }),
+    (x, y) => timeline({
+      x, y, w: 1400, title: 'timeline() — campaign events',
+      events: [
+        { label: 'Campaign start', at: '2026-02-17', color: 'blue' },
+        { label: 'Pricing change', at: '2026-02-22', color: 'yellow' },
+        { label: 'Budget cut 67%', at: '2026-02-23', color: 'red' },
+        { label: 'Checkout dropped', at: '2026-02-26', color: 'red' },
+        { label: 'Review', at: '2026-03-02', color: 'purple' },
+      ],
+    }),
+
+    // heatmap + table
+    (x, y) => row({
+      x, y, gap: 60, valign: 'top', items: [
+        (x, y) => heatmap({
+          x, y, title: 'heatmap() — retention, cohort x day', cell: 40,
+          rows: ['week 1', 'week 2', 'week 3', 'week 4', 'week 5'],
+          cols: ['D0', 'D1', 'D2', 'D3', 'D4'],
+          values: [
+            [100, 11, 7, 5, 4], [100, 9, 6, 4, 3], [100, 13, 8, 6, 4],
+            [100, 8, 5, 4, null], [100, 27, 12, null, null],
+          ],
+          fmt: (v) => (v == null ? '' : v + '%'),
+        }),
+        (x, y) => table({
+          x, y, title: 'table() — plan comparison',
+          headers: ['Plan', 'Churn', 'MRR', 'Seats'],
+          align: ['left', 'right', 'right', 'right'],
+          rows: [
+            ['Free', { text: '9.1%', color: 'red' }, '$0', '1,240'],
+            ['Pro', { text: '3.4%', color: 'yellow' }, '$18,400', '460'],
+            ['Team', { text: '1.8%', color: 'green' }, '$42,900', '210'],
+            ['Enterprise', { text: '0.9%', color: 'green' }, '$96,000', '48'],
+          ],
+        }),
+      ],
+    }),
+  ],
+});
+
+const res = buildExcalidraw({ out: path.resolve(__dirname, 'Chart Kit.excalidraw.md'), elements: board });
+console.log(`elements=${res.elements} texts=${res.texts} overlaps=${res.overlaps} buriedText=${res.buriedText} longLines=${res.longLines}`);

package/dist/skill-packs/excalidraw/examples/hello.spec.json

@@ -2,13 +2,83 @@
   "out": "examples/Hello Excalidraw.excalidraw.md",
   "background": "#ffffff",
   "elements": [
-    { "type": "text", "x": 0, "y": -70, "text": "excalidraw skill — portable smoke test", "fontSize": 28, "color": "#1971c2" },
-    { "type": "text", "x": 0, "y": -28, "text": "Give a text a width and it wraps to that width (no overlap). The image embeds via sha1 wikilink — no base64. Only skill-relative paths, so this runs in any project.", "fontSize": 15, "color": "#868e96", "width": 540 },
-    { "type": "rectangle", "x": 0, "y": 40, "width": 260, "height": 140, "strokeColor": "#1e1e1e", "backgroundColor": "#a5d8ff", "fillStyle": "solid", "strokeWidth": 2, "roundness": true },
-    { "type": "text", "x": 24, "y": 96, "text": "rounded rect\n+ fill", "fontSize": 20, "color": "#1e1e1e" },
-    { "type": "ellipse", "x": 340, "y": 40, "width": 160, "height": 140, "strokeColor": "#2f9e44", "backgroundColor": "#b2f2bb", "fillStyle": "hachure" },
-    { "type": "arrow", "points": [[260, 110], [340, 110]], "strokeColor": "#e8590c", "strokeWidth": 3 },
-    { "type": "text", "x": 0, "y": 220, "text": "embedded image (resolved from vault by sha1 wikilink):", "fontSize": 16, "color": "#555", "width": 420 },
-    { "type": "image", "x": 0, "y": 250, "path": "examples/sample.png", "width": 320 }
+    {
+      "type": "text",
+      "x": 0,
+      "y": -70,
+      "text": "excalidraw skill — portable smoke test",
+      "fontSize": 28,
+      "color": "#1971c2"
+    },
+    {
+      "type": "text",
+      "x": 0,
+      "y": -28,
+      "text": "Give a text a width and it wraps to that width (no overlap). The image embeds via sha1 wikilink — no base64. Only skill-relative paths, so this runs in any project.",
+      "fontSize": 15,
+      "color": "#868e96",
+      "width": 540
+    },
+    {
+      "type": "rectangle",
+      "x": 0,
+      "y": 40,
+      "width": 260,
+      "height": 140,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "roundness": true
+    },
+    {
+      "type": "text",
+      "x": 24,
+      "y": 96,
+      "text": "rounded rect\n+ fill",
+      "fontSize": 20,
+      "color": "#1e1e1e"
+    },
+    {
+      "type": "ellipse",
+      "x": 340,
+      "y": 40,
+      "width": 160,
+      "height": 140,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "fillStyle": "hachure"
+    },
+    {
+      "type": "arrow",
+      "points": [
+        [
+          260,
+          110
+        ],
+        [
+          340,
+          110
+        ]
+      ],
+      "strokeColor": "#e8590c",
+      "strokeWidth": 3
+    },
+    {
+      "type": "text",
+      "x": 0,
+      "y": 220,
+      "text": "embedded image (resolved from vault by sha1 wikilink):",
+      "fontSize": 16,
+      "color": "#555",
+      "width": 540
+    },
+    {
+      "type": "image",
+      "x": 0,
+      "y": 250,
+      "path": "examples/sample.png",
+      "width": 320
+    }
   ]
-}
+}

package/dist/skill-packs/excalidraw/examples/visual_board.js

@@ -0,0 +1,82 @@
+// visual_board.js — the visual-first kit demo. Run from anywhere:  node examples/visual_board.js
+// Shows the three rules in action: a trapezoid FUNNEL, a browser PROTOTYPE assembled purely with
+// stack()/row() flow layout (no hand-computed coordinates → no overlap), and READABLE prose/bullets
+// that wrap to a bounded measure instead of stretching across the whole board.
+const path = require('path');
+const { buildExcalidraw } = require(path.join(__dirname, '..', 'scripts', 'build_excalidraw.js'));
+const {
+  sectionTitle, prose, bullets, funnel,
+  windowFrame, navbar, button, textRows, imagePlaceholder,
+  stack, row,
+} = require(path.join(__dirname, '..', 'scripts', 'lib', 'style.js'));
+
+const els = [];
+const P = (...a) => els.push(...a.flat());
+
+P(sectionTitle({ x: 60, y: 40, text: 'Visual-first kit — funnel · prototype · readable text', fontSize: 32 }));
+
+// ── FUNNEL (left) — filled trapezoid bands, each with a right-margin metric note ──
+P(sectionTitle({ x: 60, y: 118, text: 'Conversion funnel', fontSize: 20, color: '#868e96' }));
+P(funnel({
+  x: 60, y: 168, w: 440, stageH: 80,
+  stages: [
+    { label: 'Visitors', note: '100% · 48,200 sessions', color: 'blue' },
+    { label: 'Signups', note: '32% · quality-gated', color: 'purple' },
+    { label: 'Activated', note: '18% · reached first value', color: 'yellow' },
+    { label: 'Paying', note: '6% · $29 / mo', color: 'mint' },
+  ],
+}));
+
+// ── PROTOTYPE (right) — a browser wireframe; every child placed by flow layout ──
+const win = windowFrame({ x: 900, y: 118, w: 680, h: 560, kind: 'browser', url: 'https://acme.app/pricing' });
+P(win);
+const I = win.inner;
+P(navbar({ x: I.x, y: I.y, w: I.w, brand: 'Acme', items: ['Product', 'Pricing', 'Docs'], cta: 'Sign up' }));
+
+// hero: copy column + image, flowed side by side (row can't let them overlap)
+const hero = row({
+  x: I.x, y: I.y + 74, gap: 28, valign: 'top',
+  items: [
+    (x, y) => stack({
+      x, y, gap: 14, items: [
+        (hx, hy) => prose({ x: hx, y: hy, text: 'The persistent brain for your agents', fontSize: 24, width: 320 }),
+        (hx, hy) => textRows({ x: hx, y: hy, w: 320, rows: 3 }),
+        (hx, hy) => button({ x: hx, y: hy, w: 160, h: 42, text: 'Get started', color: 'blue' }),
+      ],
+    }),
+    (x, y) => imagePlaceholder({ x, y, w: 236, h: 158, label: 'product shot' }),
+  ],
+});
+P(hero);
+
+// three feature tiles, flowed left→right
+const tiles = row({
+  x: I.x, y: hero.nextY + 28, gap: 18,
+  items: [['Remember', 'green'], ['Recall', 'purple'], ['Act', 'mint']].map(([t]) => (x, y) => stack({
+    x, y, gap: 8, items: [
+      (ax, ay) => imagePlaceholder({ x: ax, y: ay, w: 190, h: 72 }),
+      (ax, ay) => prose({ x: ax, y: ay, text: t, fontSize: 16, width: 190 }),
+      (ax, ay) => textRows({ x: ax, y: ay, w: 190, rows: 2 }),
+    ],
+  })),
+});
+P(tiles);
+
+// ── READABLE MEASURE (bottom-left) — text that wraps to a column, not the canvas ──
+P(sectionTitle({ x: 60, y: 600, text: 'Readable measure', fontSize: 20, color: '#868e96' }));
+P(prose({
+  x: 60, y: 646, width: 620, fontSize: 18,
+  text: 'Body text wraps to a bounded reading width (~60 characters) instead of stretching across the whole board. Long passages stay in a comfortable column, so the eye never has to travel the full width of a wide canvas to find the start of the next line — that is what keeps a text block legible.',
+}));
+P(bullets({
+  x: 60, y: 792, width: 620, fontSize: 18,
+  items: [
+    'Prefer pictures — funnels, wireframes, placeholders — over paragraphs.',
+    'When you do write, cap the measure with prose() / bullets() so nothing runs edge to edge.',
+    'Lay out with stack() / row() so boxes flow and never overlap; the build step also audits and warns.',
+  ],
+}));
+
+const out = path.join(__dirname, 'Visual Kit.excalidraw.md');
+const res = buildExcalidraw({ out, elements: els, background: '#ffffff' });
+console.log('visual demo →', out, '| overlaps:', res.overlaps);