synthos 0.10.1 → 0.11.1

package/starters/server.js

@@ -0,0 +1,182 @@
+#!/usr/bin/env node
+// Static file server + minimal Synthos /api shims so starter pages render
+// out-of-shell with correct theme + script loading. No npm dependencies.
+//
+//   node starters/server.js [port]
+//
+// Serves the project root, so /default-themes/, /static-files/, /starters/
+// all resolve correctly. The active theme is stored in a `starters_theme`
+// cookie and toggled via POST /api/set-theme — both /api/theme.css and
+// /api/theme-info.js read from it on every request, mirroring the contract
+// the real Synthos shell provides via src/service/useApiRoutes.ts.
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = parseInt(process.argv[2] || process.env.PORT || '8080', 10);
+const ROOT = path.resolve(__dirname, '..');
+const THEMES_DIR = path.join(ROOT, 'default-themes');
+const DEFAULT_THEME = 'nebula-dusk';
+
+const MIME = {
+    '.html': 'text/html; charset=utf-8',
+    '.htm':  'text/html; charset=utf-8',
+    '.js':   'application/javascript; charset=utf-8',
+    '.mjs':  'application/javascript; charset=utf-8',
+    '.css':  'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.svg':  'image/svg+xml',
+    '.png':  'image/png',
+    '.jpg':  'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif':  'image/gif',
+    '.webp': 'image/webp',
+    '.ico':  'image/x-icon',
+    '.woff':  'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf':   'font/ttf',
+    '.otf':   'font/otf',
+    '.txt':   'text/plain; charset=utf-8',
+    '.md':    'text/plain; charset=utf-8',
+    '.llmd':  'text/plain; charset=utf-8'
+};
+
+function getCookie(req, name) {
+    const header = req.headers.cookie || '';
+    const m = header.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]+)'));
+    return m ? decodeURIComponent(m[1]) : null;
+}
+
+function activeTheme(req, url) {
+    const q = url.searchParams.get('theme');
+    if (q) return q;
+    return getCookie(req, 'starters_theme') || DEFAULT_THEME;
+}
+
+function readThemeJson(name) {
+    try { return JSON.parse(fs.readFileSync(path.join(THEMES_DIR, name + '.json'), 'utf8')); }
+    catch { return null; }
+}
+
+function readThemeCss(name) {
+    const v3 = path.join(THEMES_DIR, name + '.v3.css');
+    if (fs.existsSync(v3)) return { css: fs.readFileSync(v3, 'utf8'), version: 3 };
+    const v2 = path.join(THEMES_DIR, name + '.v2.css');
+    if (fs.existsSync(v2)) return { css: fs.readFileSync(v2, 'utf8'), version: 2 };
+    return null;
+}
+
+function listThemes() {
+    return fs.readdirSync(THEMES_DIR)
+        .filter(f => f.endsWith('.json'))
+        .map(f => f.replace(/\.json$/, ''))
+        .sort();
+}
+
+function send(res, status, body, headers) {
+    res.writeHead(status, Object.assign({ 'Cache-Control': 'no-store' }, headers || {}));
+    res.end(body);
+}
+
+function serveStatic(req, res, urlPath) {
+    let rel;
+    try { rel = decodeURIComponent(urlPath); } catch { rel = urlPath; }
+    if (rel === '/' || rel === '') rel = '/starters/index.html';
+    const full = path.normalize(path.join(ROOT, rel));
+    if (!full.startsWith(ROOT)) return send(res, 403, 'Forbidden');
+    fs.stat(full, (err, stat) => {
+        if (err) return send(res, 404, 'Not Found: ' + rel);
+        let target = full;
+        if (stat.isDirectory()) {
+            target = path.join(full, 'index.html');
+            if (!fs.existsSync(target)) return send(res, 404, 'No index in ' + rel);
+        }
+        const mime = MIME[path.extname(target).toLowerCase()] || 'application/octet-stream';
+        res.writeHead(200, { 'Content-Type': mime, 'Cache-Control': 'no-store' });
+        fs.createReadStream(target).pipe(res);
+    });
+}
+
+const server = http.createServer((req, res) => {
+    const url = new URL(req.url, 'http://localhost');
+    const p = url.pathname;
+
+    if (p === '/api/themes') {
+        return send(res, 200, JSON.stringify(listThemes()),
+            { 'Content-Type': 'application/json; charset=utf-8' });
+    }
+
+    if (p === '/api/theme.css') {
+        const name = activeTheme(req, url);
+        const loaded = readThemeCss(name);
+        if (!loaded) return send(res, 404, `/* theme not found: ${name} */`,
+            { 'Content-Type': 'text/css; charset=utf-8' });
+        return send(res, 200, loaded.css,
+            { 'Content-Type': 'text/css; charset=utf-8' });
+    }
+
+    if (p === '/api/theme-info.js') {
+        const name = activeTheme(req, url);
+        const info = readThemeJson(name) || { mode: 'light', colors: {} };
+        const loaded = readThemeCss(name);
+        const version = loaded ? loaded.version : 1;
+        const payload = Object.assign({}, info, { name, version });
+        let js = `window.themeInfo=${JSON.stringify(payload)};`
+              + `document.documentElement.classList.add((window.themeInfo.mode||'light')+"-mode");`;
+        if (version >= 3) {
+            js += `document.documentElement.classList.add(${JSON.stringify(name)});`;
+        }
+        js += `document.documentElement.setAttribute("data-toolbar","left");`;
+        return send(res, 200, js,
+            { 'Content-Type': 'application/javascript; charset=utf-8' });
+    }
+
+    if (p === '/api/set-theme') {
+        const finish = (theme) => {
+            if (!readThemeCss(theme)) {
+                return send(res, 400, JSON.stringify({ ok: false, error: 'Unknown theme: ' + theme }),
+                    { 'Content-Type': 'application/json; charset=utf-8' });
+            }
+            return send(res, 200, JSON.stringify({ ok: true, theme }), {
+                'Content-Type': 'application/json; charset=utf-8',
+                'Set-Cookie': `starters_theme=${encodeURIComponent(theme)}; Path=/; SameSite=Lax`
+            });
+        };
+        if (req.method === 'GET') {
+            return finish(url.searchParams.get('theme') || DEFAULT_THEME);
+        }
+        let body = '';
+        req.on('data', c => { body += c; if (body.length > 4096) req.destroy(); });
+        req.on('end', () => {
+            let theme = DEFAULT_THEME;
+            try { theme = JSON.parse(body || '{}').theme || DEFAULT_THEME; }
+            catch { return send(res, 400, 'Invalid JSON body'); }
+            finish(theme);
+        });
+        return;
+    }
+
+    if (p === '/api/page-info.js') {
+        const page = url.searchParams.get('page') || '';
+        const js = `window.pageInfo=${JSON.stringify({
+            name: page, mode: 'unlocked', latestPageVersion: 3,
+            title: page, categories: ['Starters'],
+            isRequiredPage: false, productName: 'SynthOS'
+        })};`;
+        return send(res, 200, js,
+            { 'Content-Type': 'application/javascript; charset=utf-8' });
+    }
+
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+        return send(res, 405, 'Method Not Allowed');
+    }
+    serveStatic(req, res, p);
+});
+
+server.listen(PORT, () => {
+    console.log(`[starters] root:    ${ROOT}`);
+    console.log(`[starters] open:    http://localhost:${PORT}/starters/index.html`);
+    console.log(`[starters] themes:  ${listThemes().join(', ')}`);
+    console.log(`[starters] default: ${DEFAULT_THEME}`);
+});

package/starters/start.cmd

@@ -0,0 +1 @@
+npx http-server -c-1 -p 8080

package/starters/timeline_starter/chat-history.json

@@ -0,0 +1 @@
+[{"role":"assistant","content":"Welcome to the Timeline starter — a chronological vertical rail with date-anchored event cards. Tell me what you'd like to chronicle (e.g. project history, changelog, biography, road-trip log, war-room incident timeline) and I'll wire the events, categories, and edit drawer."}]

package/starters/timeline_starter/page.html

@@ -0,0 +1,446 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Timeline Starter</title>
+    <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
+    <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
+    <style>
+        html, body { height: 100%; }
+        body { margin: 0; }
+        .viewer-panel { height: 100%; }
+        .tl-app {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            min-height: 100%;
+            box-sizing: border-box;
+        }
+        .tl-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 14px 24px;
+            border-bottom: 1px solid var(--bodyDivider, #edebe9);
+            background: var(--defaultStateBackground, #faf9f8);
+            gap: 12px;
+            flex: 0 0 auto;
+            flex-wrap: wrap;
+        }
+        .tl-header h1 {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--bodyText, #333333);
+        }
+        .tl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+        .filter-row {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .filter-chip {
+            padding: 4px 10px;
+            border: 1px solid var(--inputBorder, #d2d0ce);
+            border-radius: 14px;
+            background: var(--bodyBackground, #ffffff);
+            color: var(--bodyText, #333333);
+            font-size: 12px;
+            cursor: pointer;
+        }
+        .filter-chip:hover { background: var(--bodyBackgroundHovered, #f3f2f1); }
+        .filter-chip.active {
+            background: var(--themePrimary, #0078d4);
+            border-color: var(--themePrimary, #0078d4);
+            color: #ffffff;
+        }
+        .sort-toggle {
+            padding: 4px 10px;
+            border: 1px solid var(--inputBorder, #d2d0ce);
+            border-radius: 6px;
+            background: var(--bodyBackground, #ffffff);
+            color: var(--bodyText, #333333);
+            font-size: 12px;
+            cursor: pointer;
+        }
+        .sort-toggle:hover { background: var(--bodyBackgroundHovered, #f3f2f1); }
+
+        .tl-scroll {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-y: auto;
+            background: var(--bodyBackground, #ffffff);
+        }
+        .tl-rail {
+            position: relative;
+            padding: 24px 24px 24px 56px;
+        }
+        .tl-rail::before {
+            content: '';
+            position: absolute;
+            left: 28px;
+            top: 24px;
+            bottom: 24px;
+            width: 2px;
+            background: var(--bodyDivider, #edebe9);
+        }
+        .tl-empty {
+            text-align: center;
+            color: var(--bodySubtext, #605e5c);
+            padding: 48px 24px;
+            font-size: 13px;
+        }
+        .tl-event {
+            position: relative;
+            margin-bottom: 16px;
+        }
+        .tl-event:last-child { margin-bottom: 0; }
+        .tl-marker {
+            position: absolute;
+            left: -32px;
+            top: 14px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--themePrimary, #0078d4);
+            border: 3px solid var(--bodyBackground, #ffffff);
+            box-shadow: 0 0 0 1px var(--bodyDivider, #edebe9);
+            z-index: 1;
+        }
+        .tl-card {
+            background: var(--defaultStateBackground, #faf9f8);
+            border: 1px solid var(--bodyDivider, #edebe9);
+            border-radius: 8px;
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: border-color 0.15s ease;
+        }
+        .tl-card:hover { border-color: var(--themePrimary, #0078d4); }
+        .tl-date {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--bodySubtext, #605e5c);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 4px;
+        }
+        .tl-title {
+            font-size: 15px;
+            font-weight: 600;
+            color: var(--bodyText, #333333);
+            margin-bottom: 6px;
+        }
+        .tl-desc {
+            font-size: 13px;
+            color: var(--bodySubtext, #605e5c);
+            line-height: 1.45;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .tl-cat {
+            display: inline-block;
+            margin-top: 8px;
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.4px;
+            background: var(--bodyDivider, #edebe9);
+            color: var(--bodyText, #333333);
+        }
+
+        /* Drawer (local — v3 themes do not inject .drawer-overlay into iframe content) */
+        .drawer-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.4);
+            z-index: 100;
+            justify-content: flex-end;
+        }
+        .drawer-overlay.open { display: flex; }
+        .drawer {
+            width: 420px;
+            max-width: 90vw;
+            background: var(--bodyBackground, #ffffff);
+            box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .drawer-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--bodyDivider, #edebe9);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .drawer-header h2 {
+            margin: 0;
+            font-size: 18px;
+            color: var(--bodyText, #333333);
+        }
+        .drawer-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+        .drawer-footer {
+            padding: 14px 20px;
+            border-top: 1px solid var(--bodyDivider, #edebe9);
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+        }
+        .form-group { margin-bottom: 14px; }
+        .form-label {
+            display: block;
+            font-size: 12px;
+            color: var(--bodySubtext, #605e5c);
+            margin-bottom: 4px;
+        }
+        .form-input, .form-textarea, .form-select {
+            width: 100%;
+            padding: 8px 10px;
+            border: 1px solid var(--inputBorder, #d2d0ce);
+            border-radius: 4px;
+            background: var(--bodyBackground, #ffffff);
+            color: var(--bodyText, #333333);
+            font: inherit;
+            box-sizing: border-box;
+        }
+        .form-textarea { min-height: 90px; resize: vertical; }
+        .close-btn {
+            background: transparent;
+            border: none;
+            font-size: 22px;
+            cursor: pointer;
+            color: var(--bodySubtext, #605e5c);
+            line-height: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="viewer-panel" id="viewerPanel" style="padding: 0;">
+        <div class="tl-app">
+            <div class="tl-header">
+                <div>
+                    <h1>[Timeline Title]</h1>
+                </div>
+                <div class="tl-actions">
+                    <div class="filter-row" id="filterRow">
+                        <button class="filter-chip active" data-cat="all">All</button>
+                        <button class="filter-chip" data-cat="milestone">Milestone</button>
+                        <button class="filter-chip" data-cat="release">Release</button>
+                        <button class="filter-chip" data-cat="incident">Incident</button>
+                        <button class="filter-chip" data-cat="note">Note</button>
+                    </div>
+                    <button class="sort-toggle" id="sortToggle" title="Sort order">Newest first</button>
+                    <button class="flm-button flm-button--primary" id="addEventBtn" data-icon="Add">Add Event</button>
+                </div>
+            </div>
+            <div class="tl-scroll">
+                <div class="tl-rail" id="rail"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="drawer-overlay" id="drawerOverlay">
+        <div class="drawer">
+            <div class="drawer-header">
+                <h2 id="drawerTitle">Event</h2>
+                <button class="close-btn" id="drawerClose" aria-label="Close">×</button>
+            </div>
+            <div class="drawer-body">
+                <div class="form-group"><label class="form-label" for="evDate">Date</label><input id="evDate" class="form-input" type="date"></div>
+                <div class="form-group"><label class="form-label" for="evTitle">Title</label><input id="evTitle" class="form-input" type="text"></div>
+                <div class="form-group"><label class="form-label" for="evDesc">Description</label><textarea id="evDesc" class="form-textarea"></textarea></div>
+                <div class="form-group"><label class="form-label" for="evCat">Category</label>
+                    <select id="evCat" class="form-select">
+                        <option value="milestone">Milestone</option>
+                        <option value="release">Release</option>
+                        <option value="incident">Incident</option>
+                        <option value="note">Note</option>
+                    </select>
+                </div>
+            </div>
+            <div class="drawer-footer">
+                <button class="flm-button" id="deleteBtn" data-icon="Delete">Delete</button>
+                <div style="display: flex; gap: 8px;">
+                    <button class="flm-button" id="cancelBtn">Cancel</button>
+                    <button class="flm-button flm-button--primary" id="saveBtn" data-icon="Save">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="instructions" style="display: none;" data-locked="true">Timeline archetype (STARTERS.md §3.10). Vertical rail with date markers; cards branch right (simpler than alternating). The rail is rendered as a CSS pseudo-element on .tl-rail (::before). Filter chips narrow visible events by category. Sort toggle in the header flips between newest first and chronological. Click any card to open the edit drawer. The drawer overlay uses LOCAL .drawer-overlay CSS — v3 themes do not inject those styles into iframe content (per WISDOM iframe-modal-overlay rule). Persist events with synthos.shared.data.save("&lt;table&gt;", event) / .list("&lt;table&gt;") / .remove("&lt;table&gt;", id). Default fields: id, date (ISO), title, description, category. Replace [Timeline Title] and the category list with the user's domain. Use theme tokens (avoid the natural pallet) unless the user requests an alternative color.</div>
+    <div id="thoughts" style="display: none;" data-locked="true"></div>
+
+    <script>
+        (function () {
+            var events = [
+                { id: 'e1', date: '2024-01-15', title: '[Event Title]', description: '[Short description of what happened on this date.]', category: 'milestone' },
+                { id: 'e2', date: '2024-04-08', title: '[Event Title]', description: '[Short description of what happened on this date.]', category: 'release' },
+                { id: 'e3', date: '2024-09-22', title: '[Event Title]', description: '[Short description of what happened on this date.]', category: 'note' }
+            ];
+
+            var activeCat = 'all';
+            var sortOrder = 'desc'; // 'desc' = newest first, 'asc' = chronological
+            var editingId = null;
+
+            var rail = document.getElementById('rail');
+            var filterRow = document.getElementById('filterRow');
+            var sortToggle = document.getElementById('sortToggle');
+            var drawerOverlay = document.getElementById('drawerOverlay');
+            var drawerTitle = document.getElementById('drawerTitle');
+            var dateIn = document.getElementById('evDate');
+            var titleIn = document.getElementById('evTitle');
+            var descIn = document.getElementById('evDesc');
+            var catIn = document.getElementById('evCat');
+
+            function escapeHtml(s) {
+                return String(s).replace(/[&<>"']/g, function (c) {
+                    return ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[c];
+                });
+            }
+
+            function fmtDate(iso) {
+                if (!iso) return '';
+                try {
+                    var d = new Date(iso + 'T00:00:00');
+                    if (isNaN(d.getTime())) return iso;
+                    return d.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
+                } catch (e) { return iso; }
+            }
+
+            function visibleEvents() {
+                var rows = events.filter(function (e) {
+                    return activeCat === 'all' || e.category === activeCat;
+                });
+                rows.sort(function (a, b) {
+                    var da = a.date || '';
+                    var db = b.date || '';
+                    return sortOrder === 'asc' ? da.localeCompare(db) : db.localeCompare(da);
+                });
+                return rows;
+            }
+
+            function render() {
+                var rows = visibleEvents();
+                if (!rows.length) {
+                    rail.innerHTML = '<div class="tl-empty">' +
+                        (events.length ? 'No events match this filter.' : 'No events yet — click Add Event to get started.') +
+                        '</div>';
+                    return;
+                }
+                rail.innerHTML = rows.map(function (e) {
+                    return '<div class="tl-event" data-id="' + e.id + '">' +
+                        '<div class="tl-marker"></div>' +
+                        '<div class="tl-card">' +
+                            '<div class="tl-date">' + escapeHtml(fmtDate(e.date)) + '</div>' +
+                            '<div class="tl-title">' + escapeHtml(e.title || 'Untitled') + '</div>' +
+                            (e.description ? '<div class="tl-desc">' + escapeHtml(e.description) + '</div>' : '') +
+                            (e.category ? '<span class="tl-cat">' + escapeHtml(e.category) + '</span>' : '') +
+                        '</div>' +
+                    '</div>';
+                }).join('');
+            }
+
+            function openDrawer(id) {
+                editingId = id;
+                if (id) {
+                    var ev = events.find(function (x) { return x.id === id; });
+                    if (!ev) return;
+                    drawerTitle.textContent = 'Edit Event';
+                    dateIn.value = ev.date || '';
+                    titleIn.value = ev.title || '';
+                    descIn.value = ev.description || '';
+                    catIn.value = ev.category || 'milestone';
+                } else {
+                    drawerTitle.textContent = 'New Event';
+                    dateIn.value = new Date().toISOString().slice(0, 10);
+                    titleIn.value = '';
+                    descIn.value = '';
+                    catIn.value = 'milestone';
+                }
+                document.getElementById('deleteBtn').style.visibility = id ? 'visible' : 'hidden';
+                drawerOverlay.classList.add('open');
+                setTimeout(function () { titleIn.focus(); }, 0);
+            }
+
+            function closeDrawer() {
+                drawerOverlay.classList.remove('open');
+                editingId = null;
+            }
+
+            // Card click -> open drawer
+            rail.addEventListener('click', function (e) {
+                var card = e.target.closest('.tl-event');
+                if (!card) return;
+                openDrawer(card.getAttribute('data-id'));
+            });
+
+            // Filter chips
+            filterRow.addEventListener('click', function (e) {
+                var chip = e.target.closest('.filter-chip');
+                if (!chip) return;
+                filterRow.querySelectorAll('.filter-chip').forEach(function (c) {
+                    c.classList.toggle('active', c === chip);
+                });
+                activeCat = chip.getAttribute('data-cat');
+                render();
+            });
+
+            // Sort toggle
+            sortToggle.addEventListener('click', function () {
+                sortOrder = sortOrder === 'desc' ? 'asc' : 'desc';
+                sortToggle.textContent = sortOrder === 'desc' ? 'Newest first' : 'Chronological';
+                render();
+            });
+
+            document.getElementById('addEventBtn').addEventListener('click', function () { openDrawer(null); });
+            document.getElementById('drawerClose').addEventListener('click', closeDrawer);
+            document.getElementById('cancelBtn').addEventListener('click', closeDrawer);
+            drawerOverlay.addEventListener('click', function (e) {
+                if (e.target === drawerOverlay) closeDrawer();
+            });
+
+            document.getElementById('saveBtn').addEventListener('click', function () {
+                var data = {
+                    date: dateIn.value,
+                    title: titleIn.value.trim() || 'Untitled',
+                    description: descIn.value.trim(),
+                    category: catIn.value
+                };
+                if (editingId) {
+                    var ev = events.find(function (x) { return x.id === editingId; });
+                    if (ev) Object.assign(ev, data);
+                } else {
+                    data.id = 'e_' + Math.random().toString(36).slice(2, 9);
+                    events.push(data);
+                }
+                // synthos.shared.data.save('timeline_events', data);
+                closeDrawer();
+                render();
+            });
+
+            document.getElementById('deleteBtn').addEventListener('click', function () {
+                if (!editingId) return;
+                if (!confirm('Delete this event?')) return;
+                events = events.filter(function (x) { return x.id !== editingId; });
+                // synthos.shared.data.remove('timeline_events', editingId);
+                closeDrawer();
+                render();
+            });
+
+            // Load persisted events (uncomment to enable):
+            // synthos.shared.data.list('timeline_events').then(function (rows) {
+            //     if (rows && rows.length) { events = rows; render(); }
+            // });
+
+            render();
+        })();
+    </script>
+</body></html>

package/starters/timeline_starter/page.json

@@ -0,0 +1,13 @@
+{
+    "title": "Timeline",
+    "description": "Chronicle dated events on a vertical rail for project history, changelogs, biographies, or incident logs.",
+    "categories": [
+        "_Starters"
+    ],
+    "pinned": false,
+    "showInAll": false,
+    "pageVersion": 3,
+    "mode": "unlocked",
+    "greeting": "Welcome to the Timeline starter — a chronological vertical rail with date-anchored event cards. Tell me what you'd like to chronicle (e.g. project history, changelog, biography, road-trip log, war-room incident timeline) and I'll wire the events, categories, and edit drawer.",
+    "firstRunGreeting": ""
+}

package/starters/tutorial_starter/chat-history.json

@@ -0,0 +1 @@
+[{"role":"assistant","content":"Welcome to the Tutorial starter — a sequenced explainer scaffold. Tell me what you'd like to teach (e.g. an onboarding tour, a recipe, a getting-started guide, a repair walkthrough) and I'll wire the step rail, content blocks, and progress tracking."}]