npm - @grainulation/barn - Versions diffs - 1.1.1 → 1.1.2 - Mend

@grainulation/barn 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +4 -2
package/public/index.html +0 -905

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@grainulation/barn",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Template browser and sprint toolkit for the grainulation ecosystem",
   "license": "MIT",
   "author": "grainulation contributors",
@@ -37,7 +37,9 @@
   "files": [
     "bin/",
     "lib/",
-    "public/",
+    "public/grainulation-tokens.css",
+    "public/status-icons.svg",
+    "public/grainulation-icons.svg",
     "tools/",
     "templates/",
     "CHANGELOG.md",

package/public/index.html DELETED Viewed

@@ -1,905 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="auto" data-tool="barn">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Barn</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%230a0e1a'/><text x='32' y='34' text-anchor='middle' dominant-baseline='central' fill='%23f43f5e' font-family='-apple-system,system-ui,sans-serif' font-size='34' font-weight='800'>B</text></svg>">
-  <!-- STYLE 1: shared tokens -->
-  <style>
-:root {
-  --bg: #0a0e1a; --bg2: #111827; --bg3: #1e293b; --bg4: #334155;
-  --fg: #e2e8f0; --fg2: #94a3b8; --fg3: #64748b;
-  --border: #1e293b; --border-subtle: rgba(255,255,255,0.08);
-  --green: #34d399; --red: #f87171; --blue: #60a5fa; --purple: #a78bfa; --orange: #fb923c; --cyan: #22d3ee;
-  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;
-  --radius: 8px; --radius-sm: 4px; --radius-lg: 12px;
-  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;
-  --font-mono: 'SF Mono','Cascadia Code','JetBrains Mono','Fira Code',monospace;
-  --text-xs: 9px; --text-sm: 10px; --text-base: 12px; --text-md: 13px; --text-lg: 15px; --text-xl: 18px;
-  --line-height: 1.5;
-  --transition-fast: 0.1s ease; --transition-base: 0.15s ease;
-  /* barn accent */
-  --accent: #f43f5e; --accent-light: #fb7185; --accent-dim: rgba(244,63,94,0.10); --accent-border: rgba(244,63,94,0.25);
-}
-*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; overflow: hidden; }
-body {
-  font-family: var(--font-sans); background: var(--bg); color: var(--fg);
-  background-image: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(167,139,250,0.06) 0%, transparent 50%);
-  font-size: var(--text-md); line-height: var(--line-height);
-  -webkit-font-smoothing: antialiased;
-}
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
-*:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-  </style>
-  <!-- STYLE 2: shared layout -->
-  <style>
-.app { display:grid; grid-template-columns:320px 1fr; grid-template-rows:auto 1fr auto; height:100vh; overflow:hidden }
-.toolbar { grid-column:1/-1; display:flex; align-items:center; padding:4px var(--space-xl); border-bottom:1px solid var(--border); background:rgba(255,255,255,0.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); gap:10px }
-.toolbar canvas { flex-shrink:0 }
-.toolbar-spacer { flex:1 }
-.toolbar-right { display:flex; align-items:center; gap:var(--space-sm) }
-.status-dot { width:6px; height:6px; border-radius:50%; background:var(--fg3); flex-shrink:0; transition:background 0.3s,box-shadow 0.3s }
-.status-dot.ok { background:var(--green); box-shadow:0 0 6px rgba(52,199,89,0.5) }
-.reconnect-banner { position:fixed;top:0;left:0;right:0;z-index:9999;padding:8px 16px;background:#92400e;color:#fbbf24;font-size:12px;text-align:center;transform:translateY(-100%);transition:transform .3s;font-family:system-ui,sans-serif }
-.reconnect-banner.visible { transform:translateY(0) }
-.reconnect-banner button { background:none;border:1px solid #fbbf24;color:#fbbf24;padding:2px 10px;border-radius:4px;cursor:pointer;font-size:11px;margin-inline-start:8px }
-.sidebar { background:var(--bg2); border-inline-end:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden }
-.content { display:flex; flex-direction:column; overflow:hidden; min-height:0; padding-top:var(--space-xl) }
-.footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:var(--space-xs) var(--space-xl); border-top:1px solid var(--border); background:var(--bg2); font-size:var(--text-xs); color:var(--fg3) }
-.footer-links { display:flex; gap:var(--space-lg) }
-.footer a { color:var(--fg3); text-decoration:none; transition:color var(--transition-fast) }
-.footer a:hover { color:var(--accent) }
-.mobile-nav { display:none; grid-column:1/-1; background:var(--bg2); border-bottom:1px solid var(--border) }
-.mobile-nav-bar { display:flex }
-.mobile-tab { flex:1; padding:12px 0; text-align:center; font-size:12px; font-weight:600; color:var(--fg3); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:var(--font-sans) }
-.mobile-tab:hover { color:var(--fg2) }
-.mobile-tab.active { color:var(--accent); border-bottom-color:var(--accent) }
-.welcome { padding:var(--space-xl); max-width:600px; margin:0 auto }
-.welcome h2 { font-size:18px; font-weight:700; color:var(--fg); margin-bottom:var(--space-sm) }
-.welcome .subtitle { font-size:13px; color:var(--fg2); line-height:1.6; margin-bottom:var(--space-xl) }
-.welcome-section { margin-bottom:var(--space-xl) }
-.welcome-section h3 { font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--fg3); margin-bottom:var(--space-md) }
-.welcome-step { display:flex; gap:var(--space-md); align-items:flex-start; margin-bottom:var(--space-md) }
-.welcome-step-num { width:22px; height:22px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent-border); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
-.welcome-step-text { font-size:12px; color:var(--fg2); line-height:1.5 }
-.welcome-step-text strong { color:var(--fg); font-weight:600 }
-.welcome-kbd { display:inline-block; padding:1px 5px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:10px; color:var(--fg2) }
-.spinner { width:14px; height:14px; border:2px solid var(--bg4); border-top-color:var(--accent); border-radius:50%; animation:spin 0.6s linear infinite; display:inline-block }
-@keyframes spin { to { transform:rotate(360deg) } }
-.toast-container { position:fixed; bottom:var(--space-xl); right:var(--space-xl); z-index:100; display:flex; flex-direction:column; gap:var(--space-sm) }
-.toast { padding:var(--space-sm) var(--space-lg); background:var(--bg3); border:1px solid var(--accent-border); border-radius:var(--radius); font-size:var(--text-sm); color:var(--fg); animation:slideIn 0.2s ease }
-@keyframes slideIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
-.skip-link { position:absolute; top:-40px; inset-inline-start:0; background:var(--accent); color:#000; padding:8px 16px; z-index:10000; font-size:14px; font-weight:600; transition:top .2s }
-.skip-link:focus { top:0 }
-.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
-@media (max-width:768px) {
-  .app { grid-template-columns:1fr; grid-template-rows:auto auto auto 1fr auto }
-  .toolbar { grid-column:1 }
-  .mobile-nav { display:block }
-  .sidebar { border-inline-end:none; border-bottom:1px solid var(--border); display:none }
-  .sidebar.mobile-visible { display:flex; max-height:none }
-  .content.mobile-hidden { display:none }
-  .footer { grid-column:1 }
-}
-@media (prefers-reduced-motion:reduce) {
-  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
-}
-/* -- sidebar items -- */
-.search-box { padding:var(--space-md); border-bottom:1px solid var(--border) }
-.search-box input { width:100%; padding:var(--space-sm) var(--space-md); border-radius:var(--radius); background:var(--bg3); border:1px solid var(--border); color:var(--fg); font-size:16px; font-family:var(--font-sans); outline:none; transition:border-color var(--transition-fast) }
-.search-box input::placeholder { color:var(--fg3) }
-.search-box input:focus { border-color:var(--accent-border) }
-.search-box .search-label { display:block; font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--fg3); padding:0 0 var(--space-xs) }
-.search-box .search-count { font-size:var(--text-xs); color:var(--fg3); padding-top:var(--space-xs) }
-.item-list { flex:1; overflow-y:auto; padding:var(--space-sm) }
-.item-card { padding:var(--space-md); margin-bottom:var(--space-sm); border-radius:var(--radius); background:var(--bg); border:1px solid var(--border); cursor:pointer; transition:border-color var(--transition-fast),background var(--transition-fast) }
-.item-card:hover { border-color:var(--accent-border); background:var(--accent-dim) }
-.item-card.active { border-color:var(--accent); background:var(--accent-dim) }
-.item-name { font-size:var(--text-md); font-weight:600; color:var(--fg) }
-.item-desc { font-size:11px; color:var(--fg2); line-height:1.4; margin-top:2px }
-.item-meta { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-xs) }
-.item-badge { font-size:var(--text-xs); padding:1px 6px; border-radius:var(--radius-sm); background:var(--bg3); color:var(--fg3); border:1px solid var(--border) }
-.item-badge.feature { color:var(--blue); background:rgba(59,130,246,0.08); border-color:rgba(59,130,246,0.15); cursor:pointer }
-.item-badge.feature:hover { background:rgba(59,130,246,0.18); border-color:rgba(59,130,246,0.3) }
-.item-badge.feature.active-filter { background:rgba(59,130,246,0.25); border-color:var(--blue) }
-.item-no-results { padding:var(--space-xl); text-align:center; color:var(--fg3); font-size:var(--text-sm) }
-  </style>
-  <!-- STYLE 3: barn-specific -->
-  <style>
-.preview-header { padding:var(--space-lg) var(--space-xl); border-bottom:1px solid var(--border); background:var(--bg2); display:flex; align-items:center; gap:var(--space-lg) }
-.preview-header .title { font-size:var(--text-lg); font-weight:700 }
-.preview-header .badge { font-size:var(--text-xs); padding:2px var(--space-sm); border-radius:var(--radius-sm); background:var(--accent-dim); color:var(--accent-light); font-weight:600; text-transform:uppercase; letter-spacing:0.04em }
-.preview-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--bg2); padding:0 var(--space-xl) }
-.preview-tab { padding:var(--space-sm) var(--space-lg); font-size:11px; color:var(--fg3); cursor:pointer; border-bottom:2px solid transparent; font-family:inherit; background:none; border-top:none; border-inline-start:none; border-inline-end:none }
-.preview-tab:hover { color:var(--fg2) }
-.preview-tab.active { color:var(--accent-light); border-bottom-color:var(--accent) }
-.preview-content { padding:0; flex:1; overflow:hidden }
-.source-view { padding:20px var(--space-xl); font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--fg2); white-space:pre-wrap; overflow-y:auto; height:100%; tab-size:2 }
-.source-view .line-num { display:inline-block; width:36px; text-align:end; color:var(--fg3); margin-inline-end:var(--space-lg); user-select:none; opacity:0.5 }
-.source-view .placeholder { color:var(--orange); font-weight:600 }
-.source-view .comment { color:var(--fg3); font-style:italic }
-.source-view .tag { color:var(--accent-light) }
-.source-view .attr { color:var(--purple) }
-.source-view .str { color:var(--green) }
-.render-frame { width:100%; height:100%; border:none; background:#fff }
-.info-panel { padding:var(--space-xl); overflow-y:auto; height:100% }
-.info-panel h3 { font-size:var(--text-base); font-weight:600; color:var(--accent-light); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-md) }
-.info-row { display:flex; justify-content:space-between; padding:var(--space-sm) 0; border-bottom:1px solid var(--border); font-size:var(--text-base) }
-.info-row .label { color:var(--fg3) }
-.info-row .value { color:var(--fg); font-weight:500 }
-.placeholder-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-sm) }
-.placeholder-tag { font-family:var(--font-mono); font-size:var(--text-sm); padding:3px var(--space-sm); background:rgba(251,146,60,0.1); color:var(--orange); border-radius:var(--radius-sm); border:1px solid rgba(251,146,60,0.2) }
-.preview-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--fg3); gap:var(--space-sm) }
-.preview-empty .text { font-size:var(--text-md) }
-.welcome-feat { display:inline-block; padding:2px var(--space-sm); background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--fg2); margin:2px }
-  </style>
-</head>
-<body>
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  <div id="live-status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
-  <div class="reconnect-banner" id="reconnectBanner" role="status" aria-live="polite"></div>
-  <div class="app">
-    <header class="toolbar" role="banner">
-      <canvas id="grainLogo" width="256" height="256"></canvas>
-      <div class="toolbar-spacer"></div>
-      <div class="toolbar-right">
-        <div class="status-dot" id="sse-dot" aria-label="Connection status" role="status"></div>
-      </div>
-    </header>
-    <nav class="mobile-nav" aria-label="Mobile navigation">
-      <div class="mobile-nav-bar">
-        <button class="mobile-tab active" data-panel="content">Preview</button>
-        <button class="mobile-tab" data-panel="sidebar">Templates</button>
-      </div>
-    </nav>
-    <aside class="sidebar" id="sidebar" aria-label="Template list">
-      <!-- sidebar rendered by JS -->
-    </aside>
-    <main class="content" id="main-content" aria-label="Barn workspace">
-      <div class="welcome" id="barn-welcome"><h2>Barn</h2><div class="subtitle">Loading templates...</div></div>
-    </main>
-    <footer class="footer">
-      <span>barn v1.0.1 -- @grainulation/barn</span>
-      <div class="footer-links">
-        <a href="http://localhost:9091">wheat</a>
-        <a href="http://localhost:9094">mill</a>
-        <a href="http://localhost:9095">silo</a>
-        <a href="http://localhost:9090">farmer</a>
-        <a href="http://localhost:9096">harvest</a>
-      </div>
-    </footer>
-  </div>
-  <div class="toast-container" id="toast-container" aria-live="polite" role="status"></div>
-<script>
-// -- Shared: helpers --
-var $ = function(id) { return document.getElementById(id); };
-function esc(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
-// -- Shared: SSE with exponential backoff --
-var sseRetryCount = 0;
-var sseSource = null;
-function showBanner(count) {
-  var b = $('reconnectBanner');
-  if (count > 5) {
-    b.textContent = '';
-    b.appendChild(document.createTextNode('Connection lost. '));
-    var btn = document.createElement('button');
-    btn.textContent = 'Retry now';
-    btn.addEventListener('click', function() { sseRetryCount = 0; connectSSE(); });
-    b.appendChild(btn);
-  } else if (count > 1) {
-    b.textContent = 'Reconnecting (attempt ' + count + ')...';
-  } else {
-    b.textContent = 'Reconnecting...';
-  }
-  b.classList.add('visible');
-}
-function hideBanner() { $('reconnectBanner').classList.remove('visible'); }
-function connectSSE() {
-  sseSource = new EventSource('/events');
-  sseSource.onopen = function() {
-    sseRetryCount = 0;
-    $('sse-dot').className = 'status-dot ok';
-    if (window._grainSetState) window._grainSetState('idle');
-  };
-  sseSource.onerror = function() {
-    sseSource.close();
-    $('sse-dot').className = 'status-dot';
-    if (window._grainSetState) window._grainSetState('orbit');
-    var delay = Math.min(30000, 1000 * Math.pow(2, sseRetryCount)) + Math.random() * 1000;
-    sseRetryCount++;
-    setTimeout(connectSSE, delay);
-  };
-  sseSource.onmessage = function(e) {
-    try {
-      var msg = JSON.parse(e.data);
-      onSSEMessage(msg);  // tool-specific handler
-    } catch(ex) {}
-  };
-}
-// -- Shared: mobile panel switching --
-function switchMobilePanel(panel) {
-  var sidebar = document.querySelector('.sidebar');
-  var content = document.querySelector('.content');
-  document.querySelectorAll('.mobile-tab').forEach(function(tb) { tb.classList.toggle('active', tb.dataset.panel === panel); });
-  sidebar.classList.remove('mobile-visible');
-  content.classList.remove('mobile-hidden');
-  if (panel === 'sidebar') { sidebar.classList.add('mobile-visible'); content.classList.add('mobile-hidden'); }
-}
-document.querySelector('.mobile-nav-bar').addEventListener('click', function(e) {
-  var tab = e.target.closest('[data-panel]');
-  if (tab) switchMobilePanel(tab.dataset.panel);
-});
-// -- Barn: toast notifications --
-function toast(message) {
-  var container = $('toast-container');
-  var el = document.createElement('div');
-  el.className = 'toast'; el.textContent = message;
-  container.appendChild(el);
-  setTimeout(function() { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s ease'; setTimeout(function() { el.remove(); }, 300); }, 3000);
-}
-// -- Barn: i18n passthrough --
-var t = function(s, v) { return v ? s.replace(/\{(\w+)\}/g, function(_, k) { return v[k] != null ? v[k] : k; }) : s; };
-// -- Barn: state --
-var state = { templates: [], sprints: [], activeSprint: null, manifest: null };
-var selected = null;
-var activeTab = 'source';
-var searchQuery = '';
-var activeTagFilter = null;
-// -- Barn: SSE message handler --
-function onSSEMessage(msg) {
-  if (msg.type === 'state') {
-    state = msg.data;
-    render();
-    var ls = $('live-status');
-    if (ls) ls.textContent = t('Updated: {count} templates loaded', { count: (state.templates || []).length });
-  }
-}
-// -- Barn: refresh --
-function refresh() {
-  fetch('/api/refresh', { method: 'POST' }).then(function(resp) {
-    return resp.json();
-  }).then(function(data) {
-    state = data;
-    render();
-  }).catch(function() {});
-}
-// -- Barn: rendering --
-function formatBytes(b) {
-  if (b < 1024) return b + ' B';
-  return (b / 1024).toFixed(1) + ' KB';
-}
-function render() {
-  renderSidebar();
-  renderMain();
-}
-function getFilteredTemplates() {
-  var q = searchQuery.toLowerCase();
-  return state.templates.filter(function(tpl) {
-    // Tag filter
-    if (activeTagFilter) {
-      var allTags = (tpl.features || []).concat(tpl.tags || []);
-      if (!allTags.some(function(tag) { return tag.toLowerCase() === activeTagFilter.toLowerCase(); })) return false;
-    }
-    // Text search
-    if (!q) return true;
-    var haystack = [
-      tpl.name,
-      tpl.title || '',
-      tpl.description || '',
-    ].concat(tpl.placeholders || []).concat(tpl.features || []).concat(tpl.tags || []).join(' ').toLowerCase();
-    return haystack.indexOf(q) !== -1;
-  });
-}
-function renderSidebar() {
-  var sidebar = $('sidebar');
-  var filtered = getFilteredTemplates();
-  var total = state.templates.length;
-  var shown = filtered.length;
-  var isFiltered = searchQuery || activeTagFilter;
-  var html = '<div class="search-box">'
-    + '<input type="search" id="searchInput" placeholder="' + t('Filter templates...') + '" value="' + esc(searchQuery) + '">';
-  if (activeTagFilter) {
-    html += '<div class="search-count" role="status"><span style="color:var(--blue)">[' + esc(activeTagFilter) + ']</span>'
-      + ' <button data-action="clear-tag" style="background:none;border:none;color:var(--accent-light);cursor:pointer;font-size:10px;font-family:inherit;padding:0;margin-inline-start:4px">clear</button></div>';
-  }
-  html += '</div>';
-  html += '<div class="item-list" role="listbox" aria-label="Templates">';
-  if (filtered.length === 0) {
-    var msg = total === 0
-      ? t('No templates found. Add .html files to the templates/ directory.')
-      : t('No templates match your filter.');
-    html += '<div class="item-no-results">' + msg + '</div>';
-  }
-  for (var i = 0; i < filtered.length; i++) {
-    var tpl = filtered[i];
-    var isActive = selected === tpl.name;
-    var allTags = (tpl.features || []).concat(tpl.tags || []);
-    html += '<div class="item-card ' + (isActive ? 'active' : '') + '" data-template="' + esc(tpl.name) + '" tabindex="0" role="button" aria-pressed="' + isActive + '">'
-      + '<div class="item-name">' + esc(tpl.title || tpl.name) + '</div>'
-      + (tpl.description ? '<div class="item-desc">' + esc(tpl.description) + '</div>' : '')
-      + '<div class="item-meta">'
-      + '<span class="item-badge">' + esc(tpl.lines) + ' lines</span>'
-      + '<span class="item-badge">' + formatBytes(tpl.size) + '</span>';
-    for (var j = 0; j < allTags.length; j++) {
-      var f = allTags[j];
-      html += '<span class="item-badge feature' + (activeTagFilter && f.toLowerCase() === activeTagFilter.toLowerCase() ? ' active-filter' : '') + '" data-filter-tag="' + esc(f) + '">' + esc(f) + '</span>';
-    }
-    html += '</div></div>';
-  }
-  if (state.sprints.length > 0) {
-    html += '<div style="padding:var(--space-sm) 0"><span class="search-label" style="padding:var(--space-sm) var(--space-sm) 6px;display:block">' + t('Sprints') + '</span>';
-    for (var k = 0; k < state.sprints.length; k++) {
-      var s = state.sprints[k];
-      var sprintActive = s.status === 'active';
-      html += '<div class="item-card' + (sprintActive ? ' active' : '') + '">'
-        + '<div class="item-name">' + esc(s.name || 'unnamed') + '</div>'
-        + '<div class="item-meta">'
-        + '<span class="item-badge" style="color:var(--blue)">' + esc(s.phase) + '</span>'
-        + '<span class="item-badge">' + esc(s.claims_count || 0) + ' claims</span>'
-        + '</div></div>';
-    }
-    html += '</div>';
-  }
-  html += '</div>';
-  sidebar.innerHTML = html;
-  if (isFiltered) {
-    var ls = $('live-status');
-    if (ls) ls.textContent = shown + ' of ' + total + ' templates shown';
-  }
-  var input = document.getElementById('searchInput');
-  if (input) {
-    input.addEventListener('input', onSearchInput);
-    if (document.activeElement && document.activeElement.id === 'searchInput') {
-      input.focus();
-      input.selectionStart = input.selectionEnd = input.value.length;
-    }
-  }
-}
-var searchDebounce = null;
-function onSearchInput(e) {
-  searchQuery = e.target.value;
-  clearTimeout(searchDebounce);
-  searchDebounce = setTimeout(function() {
-    renderSidebar();
-    var input = document.getElementById('searchInput');
-    if (input) { input.focus(); input.selectionStart = input.selectionEnd = input.value.length; }
-  }, 150);
-}
-function filterByTag(tag) {
-  if (activeTagFilter && activeTagFilter.toLowerCase() === tag.toLowerCase()) {
-    activeTagFilter = null;
-  } else {
-    activeTagFilter = tag;
-  }
-  renderSidebar();
-}
-function clearTagFilter() {
-  activeTagFilter = null;
-  renderSidebar();
-}
-function renderBarnWelcome() {
-  var main = $('main-content');
-  var templates = state && state.templates ? state.templates : [];
-  var sprints = state && state.sprints ? state.sprints : [];
-  // Collect all unique features/tags
-  var allFeats = [];
-  var featSet = {};
-  for (var i = 0; i < templates.length; i++) {
-    var feats = templates[i].features || [];
-    var tags = templates[i].tags || [];
-    for (var j = 0; j < feats.length; j++) { if (!featSet[feats[j]]) { featSet[feats[j]] = true; allFeats.push(feats[j]); } }
-    for (var k = 0; k < tags.length; k++) { if (!featSet[tags[k]]) { featSet[tags[k]] = true; allFeats.push(tags[k]); } }
-  }
-  var tplList = '';
-  for (var i = 0; i < templates.length; i++) {
-    var tpl = templates[i];
-    tplList += '<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04)">'
-      + '<span style="font-size:12px;font-weight:600;color:var(--fg)">' + esc(tpl.name) + '</span>'
-      + '<span style="font-size:10px;color:var(--fg3)">' + (tpl.placeholders || []).length + ' placeholders, ' + (tpl.lines || '?') + ' lines</span>'
-      + '</div>';
-  }
-  var featsHtml = '';
-  for (var i = 0; i < allFeats.length; i++) {
-    featsHtml += '<span class="welcome-feat">' + esc(allFeats[i]) + '</span>';
-  }
-  main.innerHTML =
-    '<div class="welcome">'
-      + '<h2>Barn</h2>'
-      + '<div class="subtitle">'
-        + 'HTML templates for wheat sprint output. '
-        + 'Barn stores self-contained, dark-theme templates that wheat uses to generate reports, presentations, dashboards, and other deliverables. '
-        + 'Each template declares its placeholders, so wheat knows exactly what data to inject.'
-      + '</div>'
-      + '<div class="welcome-section">'
-        + '<h3>How it works</h3>'
-        + '<div class="welcome-step">'
-          + '<span class="welcome-step-num">1</span>'
-          + '<div class="welcome-step-text"><strong>Browse templates</strong> -- the sidebar lists all available templates. Use the search bar or click a tag to filter.</div>'
-        + '</div>'
-        + '<div class="welcome-step">'
-          + '<span class="welcome-step-num">2</span>'
-          + '<div class="welcome-step-text"><strong>Preview and inspect</strong> -- click a template to see its rendered preview, raw HTML source, and declared placeholders. Toggle between tabs.</div>'
-        + '</div>'
-        + '<div class="welcome-step">'
-          + '<span class="welcome-step-num">3</span>'
-          + '<div class="welcome-step-text"><strong>Used by wheat automatically</strong> -- when you run <strong>/brief</strong>, <strong>/present</strong>, or <strong>/status</strong>, wheat pulls the right template from barn and fills in your sprint data.</div>'
-        + '</div>'
-      + '</div>'
-      + (templates.length > 0 ? '<div class="welcome-section">'
-        + '<h3>Templates (' + templates.length + ')</h3>'
-        + tplList
-        + '</div>' : '')
-      + (allFeats.length > 0 ? '<div class="welcome-section">'
-        + '<h3>Features and tags</h3>'
-        + '<div>' + featsHtml + '</div>'
-        + '</div>' : '')
-      + (sprints.length > 0 ? '<div class="welcome-section">'
-        + '<h3>Active sprints detected (' + sprints.length + ')</h3>'
-        + '<div style="font-size:12px;color:var(--fg2);line-height:1.6">'
-          + sprints.map(function(s) { return esc(s.name || s.dir); }).join(', ')
-        + '</div>'
-        + '</div>' : '')
-      + '<div class="welcome-section">'
-        + '<h3>Keyboard shortcuts</h3>'
-        + '<div class="welcome-step">'
-          + '<div class="welcome-step-text">'
-            + '<span class="welcome-kbd">[</span> <span class="welcome-kbd">]</span> Switch panels '
-            + '&nbsp;&nbsp;<span class="welcome-kbd">Esc</span> Return to this page'
-            + '&nbsp;&nbsp;<span class="welcome-kbd">/</span> Search'
-          + '</div>'
-        + '</div>'
-      + '</div>'
-    + '</div>';
-}
-function renderMain() {
-  var main = $('main-content');
-  if (!selected) {
-    renderBarnWelcome();
-    return;
-  }
-  var tpl = null;
-  for (var i = 0; i < state.templates.length; i++) {
-    if (state.templates[i].name === selected) { tpl = state.templates[i]; break; }
-  }
-  if (!tpl) return;
-  main.innerHTML =
-    '<div class="preview-header">'
-      + '<span class="title">' + esc(tpl.name) + '.html</span>'
-      + '<span class="badge">' + esc(tpl.features[0] || t('template')) + '</span>'
-      + '<span style="margin-inline-start:auto;font-size:10px;color:var(--fg3)">' + esc(tpl.placeholders.length) + ' placeholders &middot; ' + esc(tpl.lines) + ' lines</span>'
-    + '</div>'
-    + '<div class="preview-tabs" role="tablist" aria-label="Template view tabs">'
-      + '<button class="preview-tab ' + (activeTab === 'source' ? 'active' : '') + '" data-tab="source" role="tab" id="tab-source" aria-selected="' + (activeTab === 'source') + '" aria-controls="previewContent">Source</button>'
-      + '<button class="preview-tab ' + (activeTab === 'preview' ? 'active' : '') + '" data-tab="preview" role="tab" id="tab-preview" aria-selected="' + (activeTab === 'preview') + '" aria-controls="previewContent">Preview</button>'
-      + '<button class="preview-tab ' + (activeTab === 'info' ? 'active' : '') + '" data-tab="info" role="tab" id="tab-info" aria-selected="' + (activeTab === 'info') + '" aria-controls="previewContent">Info</button>'
-    + '</div>'
-    + '<div class="preview-content" id="previewContent" role="tabpanel" aria-labelledby="tab-' + activeTab + '"></div>';
-  loadTabContent();
-}
-function loadTabContent() {
-  var container = $('previewContent');
-  if (!selected || !container) return;
-  if (activeTab === 'source') {
-    fetch('/api/template?name=' + encodeURIComponent(selected)).then(function(resp) {
-      return resp.text();
-    }).then(function(text) {
-      container.innerHTML = '<div class="source-view">' + highlightHTML(text) + '</div>';
-    }).catch(function() {
-      container.innerHTML = '<div class="source-view">' + t('failed to load') + '</div>';
-    });
-  } else if (activeTab === 'preview') {
-    fetch('/api/template?name=' + encodeURIComponent(selected)).then(function(resp) {
-      return resp.text();
-    }).then(function(text) {
-      // Replace placeholders with sample content
-      text = text.replace(/\{\{TITLE\}\}/g, 'Sample Title');
-      text = text.replace(/\{\{SUBTITLE\}\}/g, 'A sample subtitle for preview');
-      text = text.replace(/\{\{[A-Z_]+\}\}/g, '...');
-      var blob = new Blob([text], { type: 'text/html' });
-      var url = URL.createObjectURL(blob);
-      container.innerHTML = '<iframe class="render-frame" sandbox="allow-same-origin" title="Template preview" src="' + url + '"></iframe>';
-    }).catch(function() {
-      container.innerHTML = '<div class="preview-empty"><div class="text">' + t('preview failed') + '</div></div>';
-    });
-  } else if (activeTab === 'info') {
-    var tpl = null;
-    for (var i = 0; i < state.templates.length; i++) {
-      if (state.templates[i].name === selected) { tpl = state.templates[i]; break; }
-    }
-    if (!tpl) return;
-    var placeholderHtml = '';
-    for (var j = 0; j < tpl.placeholders.length; j++) {
-      placeholderHtml += '<span class="placeholder-tag">' + esc(tpl.placeholders[j]) + '</span>';
-    }
-    container.innerHTML = '<div class="info-panel">'
-      + '<h3>' + t('Template Details') + '</h3>'
-      + '<div class="info-row"><span class="label">' + t('File') + '</span><span class="value">' + esc(tpl.file) + '</span></div>'
-      + '<div class="info-row"><span class="label">' + t('Lines') + '</span><span class="value">' + esc(tpl.lines) + '</span></div>'
-      + '<div class="info-row"><span class="label">' + t('Size') + '</span><span class="value">' + formatBytes(tpl.size) + '</span></div>'
-      + '<div class="info-row"><span class="label">' + t('Features') + '</span><span class="value">' + (tpl.features.map(function(f) { return esc(f); }).join(', ') || t('none')) + '</span></div>'
-      + '<h3 style="margin-top:24px">' + t('Placeholders') + '</h3>'
-      + '<div class="placeholder-list">' + placeholderHtml + '</div>'
-      + (tpl.description ? '<h3 style="margin-top:24px">' + t('Description') + '</h3><p style="font-size:12px;color:var(--fg2);line-height:1.6;">' + esc(tpl.description) + '</p>' : '')
-      + '</div>';
-  }
-  // Focus management after tab switch
-  container.setAttribute('tabindex', '-1');
-  container.focus();
-}
-function highlightHTML(text) {
-  var lines = text.split('\n');
-  var result = [];
-  for (var i = 0; i < lines.length; i++) {
-    var highlighted = esc(lines[i]);
-    // Highlight placeholders
-    highlighted = highlighted.replace(/(\{\{[A-Z_]+\}\})/g, '<span class="placeholder">$1</span>');
-    // Highlight HTML comments
-    highlighted = highlighted.replace(/(&lt;!--.*?--&gt;)/g, '<span class="comment">$1</span>');
-    result.push('<span class="line-num">' + (i + 1) + '</span>' + highlighted);
-  }
-  return result.join('\n');
-}
-function selectTemplate(name) {
-  selected = name;
-  activeTab = 'source';
-  document.title = 'Barn - ' + (name);
-  render();
-  // On mobile, switch to content panel so the user sees the selected template
-  var mobileNav = document.querySelector('.mobile-nav');
-  if (mobileNav && mobileNav.offsetHeight > 0) {
-    switchMobilePanel('content');
-  }
-  // Focus management after render -- focus the first tab button
-  var firstTab = $('tab-source');
-  if (firstTab) firstTab.focus();
-}
-function switchTab(tab) {
-  activeTab = tab;
-  var tabs = document.querySelectorAll('.preview-tab');
-  tabs.forEach(function(tb) {
-    var isActive = (tb.dataset.tab || tb.textContent.toLowerCase()) === tab;
-    tb.classList.toggle('active', isActive);
-    tb.setAttribute('aria-selected', String(isActive));
-  });
-  // Update tabpanel aria-labelledby
-  var panel = $('previewContent');
-  if (panel) panel.setAttribute('aria-labelledby', 'tab-' + tab);
-  loadTabContent();
-}
-// -- Barn: keyboard navigation --
-var barnPanels = ['.sidebar', '.content'];
-var barnActivePanel = 1;
-function switchBarnPanel(dir) {
-  barnActivePanel = (barnActivePanel + dir + barnPanels.length) % barnPanels.length;
-  var el = document.querySelector(barnPanels[barnActivePanel]);
-  if (el) { el.setAttribute('tabindex', '-1'); el.focus(); }
-}
-document.addEventListener('keydown', function(e) {
-  if (e.key === '[' && !e.target.matches('input,textarea')) { e.preventDefault(); switchBarnPanel(-1); }
-  if (e.key === ']' && !e.target.matches('input,textarea')) { e.preventDefault(); switchBarnPanel(1); }
-  if (e.key === '/' && !e.target.matches('input,textarea,select')) { e.preventDefault(); var si = document.getElementById('searchInput'); if (si) si.focus(); }
-  if (e.key === 'Escape') {
-    if (searchQuery || activeTagFilter) {
-      searchQuery = '';
-      activeTagFilter = null;
-      render();
-    } else {
-      selected = null;
-      activeTab = 'source';
-      document.title = 'Barn';
-      render();
-    }
-  }
-  // Arrow key navigation for sidebar template cards
-  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !e.target.matches('input,textarea')) {
-    var cards = Array.from(document.querySelectorAll('#sidebar [data-template]'));
-    if (cards.length === 0) return;
-    var idx = cards.indexOf(document.activeElement);
-    if (idx === -1 && e.key === 'ArrowDown') {
-      cards[0].focus();
-      e.preventDefault();
-    } else if (idx >= 0) {
-      e.preventDefault();
-      var next = e.key === 'ArrowDown' ? Math.min(idx + 1, cards.length - 1) : Math.max(idx - 1, 0);
-      cards[next].focus();
-    }
-  }
-});
-// -- Barn: event delegation --
-$('sidebar').addEventListener('click', function(e) {
-  // Clear tag filter
-  if (e.target.closest('[data-action="clear-tag"]')) {
-    e.stopPropagation();
-    clearTagFilter();
-    return;
-  }
-  // Tag filter click (handle before template selection)
-  var tagEl = e.target.closest('[data-filter-tag]');
-  if (tagEl) {
-    e.stopPropagation();
-    filterByTag(tagEl.dataset.filterTag);
-    return;
-  }
-  var card = e.target.closest('[data-template]');
-  if (card) selectTemplate(card.dataset.template);
-});
-// Keyboard access for template cards (Enter/Space)
-$('sidebar').addEventListener('keydown', function(e) {
-  if (e.key === 'Enter' || e.key === ' ') {
-    var card = e.target.closest('[data-template]');
-    if (card) {
-      e.preventDefault();
-      selectTemplate(card.dataset.template);
-    }
-  }
-});
-$('main-content').addEventListener('click', function(e) {
-  var tab = e.target.closest('[data-tab]');
-  if (tab) switchTab(tab.dataset.tab);
-});
-// -- Init --
-connectSSE();
-</script>
-<script>
-(function() {
-  var LW = 0.025;
-  var TOOL = { name: 'Barn', letter: 'B', color: '#f43f5e' };
-  var _c, _ctx, _s, _cx, _textStart, _restText, _font;
-  var _state = 'drawon', _start = null, _raf, _pendingState = null;
-  var _openPts = null, _closedPts = null;
-  function _lerp(a,b,t){ return {x:a.x+(b.x-a.x)*t, y:a.y+(b.y-a.y)*t}; }
-  function _easeInOut(t){ return t<0.5 ? 2*t*t : 1-Math.pow(-2*t+2,2)/2; }
-  function _bracket(ctx, s, color, alpha) {
-    var lw=s*LW, cx=_cx, cy=s/2, gw=s*0.72, gh=s*0.68;
-    var topY=cy-gh/2, botY=cy+gh/2, fe=gw*0.30;
-    if(alpha!==undefined) ctx.globalAlpha=alpha;
-    ctx.strokeStyle=color; ctx.lineWidth=lw; ctx.lineCap='round'; ctx.lineJoin='round';
-    ctx.beginPath(); ctx.moveTo(cx,topY); ctx.lineTo(cx-fe,topY);
-    ctx.bezierCurveTo(cx-gw*0.52,cy-gh*0.32, cx-gw*0.52,cy+gh*0.24, cx-fe,botY);
-    ctx.lineTo(cx,botY); ctx.stroke();
-    if(alpha!==undefined) ctx.globalAlpha=1;
-  }
-  function _drawBracket(ctx, s, color, progress) {
-    var lw=s*LW, cx=_cx, cy=s/2, gw=s*0.72, gh=s*0.68;
-    var topY=cy-gh/2, botY=cy+gh/2, fe=gw*0.30;
-    ctx.strokeStyle=color; ctx.lineWidth=lw; ctx.lineCap='round'; ctx.lineJoin='round';
-    var seg1=0.12, seg2=0.72;
-    ctx.beginPath();
-    if(progress<=seg1){ctx.moveTo(cx,topY);ctx.lineTo(cx-fe*(progress/seg1),topY);}
-    else if(progress<=seg1+seg2){ctx.moveTo(cx,topY);ctx.lineTo(cx-fe,topY);ctx.stroke();ctx.beginPath();
-      var bt=(progress-seg1)/seg2;
-      var p0={x:cx-fe,y:topY},p1={x:cx-gw*0.52,y:cy-gh*0.32},p2={x:cx-gw*0.52,y:cy+gh*0.24},p3={x:cx-fe,y:botY};
-      var q1=_lerp(p0,p1,bt),q2=_lerp(p1,p2,bt),q3=_lerp(p2,p3,bt);
-      var r1=_lerp(q1,q2,bt),r2=_lerp(q2,q3,bt),s1=_lerp(r1,r2,bt);
-      ctx.moveTo(p0.x,p0.y);ctx.bezierCurveTo(q1.x,q1.y,r1.x,r1.y,s1.x,s1.y);}
-    else{ctx.moveTo(cx,topY);ctx.lineTo(cx-fe,topY);
-      ctx.bezierCurveTo(cx-gw*0.52,cy-gh*0.32, cx-gw*0.52,cy+gh*0.24, cx-fe,botY);
-      ctx.lineTo((cx-fe)+fe*((progress-seg1-seg2)/(1-seg1-seg2)),botY);}
-    ctx.stroke();
-  }
-  function _drawName(ctx, s, spellP, alpha) {
-    var a = alpha !== undefined ? alpha : 1;
-    ctx.font = _font; ctx.textBaseline = 'middle';
-    var cy = s/2 + s*0.02;
-    ctx.globalAlpha = a; ctx.fillStyle = TOOL.color; ctx.textAlign = 'center';
-    ctx.fillText(TOOL.letter, _cx, cy);
-    if(_restText.length > 0 && spellP > 0) {
-      var n = _restText.length, num = Math.min(n, Math.ceil(spellP * n));
-      var rawP = spellP * n, charP = num >= n ? 1 : rawP - Math.floor(rawP);
-      var full = charP >= 1 ? num : num - 1;
-      ctx.fillStyle = '#e2e8f0'; ctx.textAlign = 'left';
-      if(full > 0) { ctx.globalAlpha = a; ctx.fillText(_restText.slice(0, full), _textStart, cy); }
-      if(full < num) {
-        var prevW = full > 0 ? ctx.measureText(_restText.slice(0, full)).width : 0;
-        ctx.globalAlpha = a * (0.3 + 0.7 * charP);
-        ctx.fillText(_restText[full], _textStart + prevW, cy);
-      }
-    }
-    ctx.globalAlpha = 1;
-  }
-  function _getOpenPts(s) {
-    if(_openPts && _openPts._s === s) return _openPts;
-    var cx=_cx, cy=s/2, gw=s*0.72, gh=s*0.68, topY=cy-gh/2, botY=cy+gh/2, fe=gw*0.30;
-    var pts=[];
-    for(var t=0;t<=1;t+=0.05) pts.push({x:cx-fe*t,y:topY});
-    var p0={x:cx-fe,y:topY},p1={x:cx-gw*0.52,y:cy-gh*0.32},p2={x:cx-gw*0.52,y:cy+gh*0.24},p3={x:cx-fe,y:botY};
-    for(var t=0;t<=1;t+=0.02){var u=1-t;pts.push({x:u*u*u*p0.x+3*u*u*t*p1.x+3*u*t*t*p2.x+t*t*t*p3.x,y:u*u*u*p0.y+3*u*u*t*p1.y+3*u*t*t*p2.y+t*t*t*p3.y});}
-    for(var t=0;t<=1;t+=0.05) pts.push({x:(cx-fe)+fe*t,y:botY});
-    pts._s=s; _openPts=pts; return pts;
-  }
-  function _getClosedPts(s) {
-    if(_closedPts && _closedPts._s === s) return _closedPts;
-    var cx=_cx, cy=s/2, gw=s*0.72, gh=s*0.68, topY=cy-gh/2, botY=cy+gh/2, fe=gw*0.30;
-    var pts=[];
-    for(var t=0;t<=1;t+=0.03) pts.push({x:cx-fe*t,y:topY});
-    var lp0={x:cx-fe,y:topY},lp1={x:cx-gw*0.52,y:cy-gh*0.32},lp2={x:cx-gw*0.52,y:cy+gh*0.24},lp3={x:cx-fe,y:botY};
-    for(var t=0;t<=1;t+=0.02){var u=1-t;pts.push({x:u*u*u*lp0.x+3*u*u*t*lp1.x+3*u*t*t*lp2.x+t*t*t*lp3.x,y:u*u*u*lp0.y+3*u*u*t*lp1.y+3*u*t*t*lp2.y+t*t*t*lp3.y});}
-    for(var t=0;t<=1;t+=0.03) pts.push({x:(cx-fe)+2*fe*t,y:botY});
-    var rp0={x:cx+fe,y:botY},rp1={x:cx+gw*0.52,y:cy+gh*0.24},rp2={x:cx+gw*0.52,y:cy-gh*0.32},rp3={x:cx+fe,y:topY};
-    for(var t=0;t<=1;t+=0.02){var u=1-t;pts.push({x:u*u*u*rp0.x+3*u*u*t*rp1.x+3*u*t*t*rp2.x+t*t*t*rp3.x,y:u*u*u*rp0.y+3*u*u*t*rp1.y+3*u*t*t*rp2.y+t*t*t*rp3.y});}
-    for(var t=0;t<=1;t+=0.03) pts.push({x:(cx+fe)-fe*t,y:topY});
-    pts._s=s; _closedPts=pts; return pts;
-  }
-  function _frame(ts) {
-    if(!_c) return;
-    if(!_start) _start = ts;
-    var e = ts - _start, ctx = _ctx, s = _s;
-    ctx.clearRect(0, 0, _c.width, s);
-    switch(_state) {
-      case 'drawon':
-        var bp = _easeInOut(Math.min(1, e / 1400));
-        _drawBracket(ctx, s, TOOL.color, bp);
-        var la = Math.max(0, Math.min(1, (e - 900) / 400));
-        if(la > 0) {
-          ctx.font = _font; ctx.textBaseline = 'middle';
-          ctx.globalAlpha = la; ctx.fillStyle = TOOL.color; ctx.textAlign = 'center';
-          ctx.fillText(TOOL.letter, _cx, s/2 + s*0.02); ctx.globalAlpha = 1;
-        }
-        if(e > 1100 && _restText.length > 0) {
-          var sp = Math.min(1, (e - 1100) / (120 * _restText.length));
-          var n = _restText.length, num = Math.min(n, Math.ceil(sp * n));
-          if(num > 0) {
-            ctx.font = _font; ctx.textBaseline = 'middle';
-            var cy = s/2 + s*0.02, rawP = sp * n;
-            var charP = num >= n ? 1 : rawP - Math.floor(rawP);
-            var full = charP >= 1 ? num : num - 1;
-            ctx.fillStyle = '#e2e8f0'; ctx.textAlign = 'left';
-            if(full > 0) ctx.fillText(_restText.slice(0, full), _textStart, cy);
-            if(full < num) {
-              var prevW = full > 0 ? ctx.measureText(_restText.slice(0, full)).width : 0;
-              ctx.globalAlpha = 0.3 + 0.7 * charP;
-              ctx.fillText(_restText[full], _textStart + prevW, cy); ctx.globalAlpha = 1;
-            }
-          }
-        }
-        if(e > 1100 + 120 * _restText.length + 300) { _state = _pendingState || 'idle'; _pendingState = null; _start = ts; }
-        break;
-      case 'idle':
-        var breathe = 0.5 + 0.5 * (0.5 + 0.5 * Math.sin(e / 1200));
-        _bracket(ctx, s, TOOL.color, breathe);
-        var textBreath = 0.88 + 0.12 * (0.5 + 0.5 * Math.sin(e / 1800));
-        _drawName(ctx, s, 1, textBreath);
-        break;
-      case 'shimmer':
-        _bracket(ctx, s, TOOL.color, 0.2);
-        var spts = _getOpenPts(s), sspeed = 1800;
-        var spos = (e % sspeed) / sspeed;
-        var sidx = Math.floor(spos * (spts.length - 1));
-        var spt = spts[sidx];
-        var sgrad = ctx.createRadialGradient(spt.x, spt.y, 0, spt.x, spt.y, s * 0.10);
-        sgrad.addColorStop(0, TOOL.color + 'aa'); sgrad.addColorStop(1, 'transparent');
-        ctx.fillStyle = sgrad; ctx.fillRect(0, 0, _c.width, s);
-        var strailFrac = 0.18;
-        var si0 = Math.max(0, Math.floor((spos - strailFrac) * (spts.length - 1)));
-        ctx.strokeStyle = TOOL.color; ctx.lineWidth = s * LW; ctx.lineCap = 'round';
-        ctx.globalAlpha = 0.85; ctx.beginPath(); ctx.moveTo(spts[si0].x, spts[si0].y);
-        for(var si = si0 + 1; si <= sidx; si++) ctx.lineTo(spts[si].x, spts[si].y);
-        ctx.stroke(); ctx.globalAlpha = 1;
-        _drawName(ctx, s, 1, undefined);
-        break;
-      case 'orbit':
-        _bracket(ctx, s, TOOL.color, 0.15);
-        _drawName(ctx, s, 1, 0.4);
-        var pts = _getOpenPts(s), speed = 1200, trailFrac = 0.28;
-        var halfCycle = (e % speed) / speed;
-        var cycle = (e % (speed * 2)) / (speed * 2);
-        var pos = cycle < 0.5 ? halfCycle : 1 - halfCycle;
-        var headIdx = Math.floor(pos * (pts.length - 1));
-        var trailLen = Math.floor(trailFrac * pts.length);
-        var dir = cycle < 0.5 ? 1 : -1;
-        ctx.lineWidth = s * LW; ctx.lineCap = 'round';
-        for(var i = 0; i < trailLen; i++) {
-          var idx = headIdx - dir * (trailLen - i);
-          if(idx < 0 || idx >= pts.length) continue;
-          var nxt = idx + dir;
-          if(nxt < 0 || nxt >= pts.length) continue;
-          ctx.globalAlpha = (i / trailLen) * 0.7; ctx.strokeStyle = TOOL.color;
-          ctx.beginPath(); ctx.moveTo(pts[idx].x, pts[idx].y); ctx.lineTo(pts[nxt].x, pts[nxt].y); ctx.stroke();
-        }
-        ctx.globalAlpha = 1;
-        break;
-      case 'dim':
-        var dim = 0.1 + 0.08 * Math.sin(e / 2000);
-        _bracket(ctx, s, TOOL.color, dim);
-        _drawName(ctx, s, 1, 0.2);
-        break;
-    }
-    _raf = requestAnimationFrame(_frame);
-  }
-  _c = document.getElementById('grainLogo');
-  if(_c) {
-    _c.style.width = '0px';
-    _s = 256;
-    var targetFontPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-    var fontRatio = 0.38;
-    var dh = 64;
-    _c.height = _s; _c.width = 1024;
-    _ctx = _c.getContext('2d');
-    _cx = _s / 2;
-    _restText = TOOL.name.slice(1);
-    _font = '800 ' + (_s * fontRatio) + 'px -apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif';
-    _ctx.font = _font;
-    var letterW = _ctx.measureText(TOOL.letter).width;
-    var restW = _restText.length > 0 ? _ctx.measureText(_restText).width : 0;
-    _textStart = _cx + letterW / 2 + _s * 0.02;
-    var totalW = Math.ceil(_textStart + restW + _s * 0.12);
-    _c.width = totalW;
-    _ctx = _c.getContext('2d');
-    _c.style.height = dh + 'px';
-    _c.style.width = Math.round(totalW / _s * dh) + 'px';
-    _state = 'drawon'; _start = null;
-    _raf = requestAnimationFrame(_frame);
-  }
-  window._grainSetState = function(state) {
-    if(_state === state) return;
-    if(_state === 'drawon') { _pendingState = state; return; }
-    _state = state; _start = null;
-    if(!_raf) _raf = requestAnimationFrame(_frame);
-  };
-})();
-</script>
-</body>
-</html>