@vpxa/aikit 0.1.59 → 0.1.61

package/packages/server/dist/tools/present/templates.js

@@ -1,472 +0,0 @@
-import{escHtml as e}from"../present-utils.js";function t(t,f){let p=typeof f==`string`?JSON.parse(f):f;switch(t){case`list-sort`:return n(p);case`data-table`:return r(p);case`picker`:return i(p);case`flame-graph`:return a(p);case`form`:return o(p);case`timeline`:return s(p);case`kanban`:return c(p);case`tree`:return l(p);case`diff-view`:return u(p);case`dashboard`:return d(p);default:return`<pre>${e(JSON.stringify(p,null,2))}</pre>`}}function n(t){let n=t.items??[];return`
-<style>
-  .sort-list{list-style:none;padding:0;margin:0}
-  .sort-item{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:4px 0;
-    background:var(--aikit-surface);border:1px solid var(--aikit-border);border-radius:8px;
-    cursor:grab;transition:all .15s;user-select:none}
-  .sort-item:hover{border-color:var(--aikit-accent)}
-  .sort-item.dragging{opacity:.4;transform:scale(.98)}
-  .sort-item.drag-over{border-color:var(--aikit-accent);background:rgba(0,120,212,.1);
-    box-shadow:0 0 0 2px rgba(0,120,212,.2)}
-  .drag-handle{font-size:20px;color:var(--aikit-muted);cursor:grab}
-  .sort-label{flex:1;color:var(--aikit-text);font-family:'SF Mono',Consolas,monospace;font-size:13px}
-  .sort-pos{font-size:12px;color:var(--aikit-muted);font-variant-numeric:tabular-nums;
-    min-width:28px;text-align:right}
-  .sort-status{margin-top:12px;padding:10px 14px;background:var(--aikit-surface);
-    border-radius:6px;font-size:12px;color:var(--aikit-muted)}
-</style>
-<ul class="sort-list" id="sortList">${n.map((t,n)=>`
-    <li class="sort-item" draggable="true" data-idx="${n}" data-id="${e(t.id)}">
-      <span class="drag-handle">⠿</span>
-      <span class="sort-label">${e(t.label)}</span>
-      <span class="sort-pos">#${n+1}</span>
-    </li>`).join(``)}</ul>
-<div class="sort-status" id="sortStatus">Drag items to reorder. ${n.length} items.</div>
-<script>
-(function(){
-  const list = document.getElementById('sortList');
-  let dragIdx = -1;
-  list.addEventListener('dragstart', e => {
-    const li = e.target.closest('.sort-item');
-    if(!li) return;
-    dragIdx = +li.dataset.idx;
-    li.classList.add('dragging');
-    e.dataTransfer.effectAllowed = 'move';
-  });
-  list.addEventListener('dragend', e => {
-    const li = e.target.closest('.sort-item');
-    if(li) li.classList.remove('dragging');
-  });
-  list.addEventListener('dragover', e => {
-    e.preventDefault();
-    const li = e.target.closest('.sort-item');
-    if(li) li.classList.add('drag-over');
-  });
-  list.addEventListener('dragleave', e => {
-    const li = e.target.closest('.sort-item');
-    if(li) li.classList.remove('drag-over');
-  });
-  list.addEventListener('drop', e => {
-    e.preventDefault();
-    const li = e.target.closest('.sort-item');
-    if(!li) return;
-    li.classList.remove('drag-over');
-    const dropIdx = +li.dataset.idx;
-    if(dragIdx < 0 || dragIdx === dropIdx) return;
-    const items = [...list.children];
-    const dragged = items[dragIdx];
-    if(dropIdx < dragIdx) li.before(dragged);
-    else li.after(dragged);
-    [...list.children].forEach((c,i) => {
-      c.dataset.idx = i;
-      c.querySelector('.sort-pos').textContent = '#'+(i+1);
-    });
-    const order = [...list.children].map(c => c.dataset.id);
-    document.getElementById('sortStatus').textContent = 'Reordered: ' + order.join(', ');
-    if(window.__aikitCallback) {
-      fetch(window.__aikitCallback, {method:'POST',headers:{'Content-Type':'application/json'},
-        body: JSON.stringify({actionId:'reorder',value:JSON.stringify(order)})}).catch(()=>{});
-    }
-  });
-})();
-<\/script>`}function r(t){let n=t.columns??[],r=t.rows??[],i=t.stats??[],a=i.length?`<div class="dt-stats">${i.map(t=>`<div class="dt-stat"><div class="dt-stat-value"${t.color?` style="color:${t.color}"`:``}>${e(String(t.value))}</div><div class="dt-stat-label">${e(t.label)}</div></div>`).join(``)}</div>`:``,o=n.map(t=>`<th data-key="${e(t.key)}">${e(t.label)} <span class="sort-icon">⇅</span></th>`).join(``),s=r.map(t=>`<tr>${n.map(n=>`<td>${e(String(t[n.key]??``))}</td>`).join(``)}</tr>`).join(``);return`
-<style>
-  .dt-stats{display:flex;gap:20px;padding:14px 0;flex-wrap:wrap}
-  .dt-stat{text-align:center;min-width:90px;padding:10px 16px;background:var(--aikit-surface);border-radius:8px}
-  .dt-stat-value{font-size:24px;font-weight:700;color:var(--aikit-accent)}
-  .dt-stat-label{font-size:11px;color:var(--aikit-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
-  .dt-filter{display:flex;align-items:center;gap:10px;padding:10px 0}
-  .dt-search{flex:1;padding:8px 14px;background:var(--aikit-surface);border:1px solid var(--aikit-border);
-    border-radius:8px;color:var(--aikit-text);font-size:13px;outline:none}
-  .dt-search:focus{border-color:var(--aikit-accent)}
-  .dt-count{font-size:12px;color:var(--aikit-muted);white-space:nowrap}
-  .dt-export{padding:6px 14px;background:var(--aikit-surface);border:1px solid var(--aikit-border);
-    border-radius:6px;color:var(--aikit-text);cursor:pointer;font-size:12px}
-  .dt-export:hover{border-color:var(--aikit-accent)}
-  .dt-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
-  .dt-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--aikit-border);
-    color:var(--aikit-muted);cursor:pointer;user-select:none;white-space:nowrap;font-weight:600}
-  .dt-table th:hover{color:var(--aikit-text)}
-  .dt-table th.sorted-asc .sort-icon::after{content:" ▲"}
-  .dt-table th.sorted-desc .sort-icon::after{content:" ▼"}
-  .dt-table td{padding:9px 14px;border-bottom:1px solid var(--aikit-border);color:var(--aikit-text)}
-  .dt-table tr:hover td{background:rgba(255,255,255,.03)}
-  .sort-icon{margin-left:4px;font-size:10px;opacity:.4}
-</style>
-${a}
-<div class="dt-filter">
-  <input class="dt-search" id="dtSearch" placeholder="Search across all columns...">
-  <span class="dt-count" id="dtCount">${r.length} rows</span>
-  <button class="dt-export" id="dtExport">Export</button>
-</div>
-<table class="dt-table">
-  <thead><tr>${o}</tr></thead>
-  <tbody id="dtBody">${s}</tbody>
-</table>
-<script>
-(function(){
-  const cols = ${JSON.stringify(n)};
-  const allRows = ${JSON.stringify(r)};
-  let sortKey = '', sortAsc = true;
-  const tbody = document.getElementById('dtBody');
-  const search = document.getElementById('dtSearch');
-  const countEl = document.getElementById('dtCount');
-
-  function rebuild() {
-    const q = search.value.toLowerCase();
-    let filtered = allRows.filter(r => !q || cols.some(c => String(r[c.key]||'').toLowerCase().includes(q)));
-    if (sortKey) {
-      filtered.sort((a,b) => {
-        const av = String(a[sortKey]||''), bv = String(b[sortKey]||'');
-        const cmp = av.localeCompare(bv, undefined, {numeric:true});
-        return sortAsc ? cmp : -cmp;
-      });
-    }
-    tbody.innerHTML = filtered.map(r => '<tr>' + cols.map(c =>
-      '<td>' + String(r[c.key]||'').replace(/</g,'&lt;') + '</td>'
-    ).join('') + '</tr>').join('');
-    countEl.textContent = filtered.length + ' rows';
-  }
-
-  search.addEventListener('input', rebuild);
-  document.querySelectorAll('.dt-table th').forEach(th => {
-    th.addEventListener('click', () => {
-      const key = th.dataset.key;
-      if (sortKey === key) sortAsc = !sortAsc;
-      else { sortKey = key; sortAsc = true; }
-      document.querySelectorAll('.dt-table th').forEach(t => t.className='');
-      th.className = sortAsc ? 'sorted-asc' : 'sorted-desc';
-      rebuild();
-    });
-  });
-  document.getElementById('dtExport').addEventListener('click', () => {
-    const csv = [cols.map(c=>c.label).join(','), ...allRows.map(r => cols.map(c=>JSON.stringify(r[c.key]||'')).join(','))].join('\\n');
-    const blob = new Blob([csv], {type:'text/csv'});
-    const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
-    a.download = 'export.csv'; a.click();
-  });
-})();
-<\/script>`}function i(t){let n=t.categories??[],r=t.items??[];return`
-<style>
-  .pk-tabs{display:flex;gap:4px;padding:4px;background:var(--aikit-surface);border-radius:10px;
-    margin-bottom:12px;overflow-x:auto;flex-wrap:wrap}
-  .pk-tab{padding:7px 16px;border:none;background:transparent;color:var(--aikit-muted);
-    border-radius:8px;cursor:pointer;font-size:12px;white-space:nowrap;transition:all .15s}
-  .pk-tab:hover{color:var(--aikit-text)}
-  .pk-tab.active{background:var(--aikit-accent);color:#fff}
-  .pk-search{width:100%;padding:9px 14px;margin-bottom:10px;background:var(--aikit-surface);
-    border:1px solid var(--aikit-border);border-radius:8px;color:var(--aikit-text);font-size:13px;
-    outline:none;box-sizing:border-box}
-  .pk-search:focus{border-color:var(--aikit-accent)}
-  .pk-summary{font-size:12px;color:var(--aikit-muted);padding:4px 0}
-  .pk-list{max-height:360px;overflow-y:auto}
-  .pk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
-    border-bottom:1px solid var(--aikit-border);transition:background .1s}
-  .pk-item:hover{background:rgba(255,255,255,.03)}
-  .pk-item input[type=checkbox]{accent-color:var(--aikit-accent);width:16px;height:16px}
-  .pk-item-label{flex:1;color:var(--aikit-text);font-size:13px}
-  .pk-item-status{font-size:11px;padding:2px 10px;border-radius:12px;
-    background:var(--aikit-surface2);color:var(--aikit-muted)}
-  .pk-item-status.success{background:rgba(78,201,176,.15);color:var(--aikit-success)}
-  .pk-tags{display:flex;gap:4px}
-  .pk-tag{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--aikit-surface2);color:var(--aikit-muted)}
-  .pk-apply{margin-top:12px;width:100%;padding:10px;background:var(--aikit-accent);color:#fff;
-    border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
-  .pk-apply:hover{filter:brightness(1.1)}
-</style>
-<div class="pk-tabs" id="pkTabs">${[`<button class="pk-tab active" data-cat="all">All (${r.length})</button>`].concat(n.map(t=>{let n=r.filter(e=>e.category===t.id).length;return`<button class="pk-tab" data-cat="${e(t.id)}">${e(t.label)} (${n})</button>`})).join(``)}</div>
-<input class="pk-search" id="pkSearch" placeholder="Search items...">
-<div class="pk-summary" id="pkSummary">0 selected</div>
-<div class="pk-list" id="pkList">${r.map(t=>{let n=t.status&&[`active`,`enabled`,`on`].includes(t.status.toLowerCase())?`success`:``,r=t.tags?.length?`<div class="pk-tags">${t.tags.map(t=>`<span class="pk-tag">${e(t)}</span>`).join(``)}</div>`:``;return`<div class="pk-item" data-cat="${e(t.category??``)}" data-label="${e(t.label.toLowerCase())}">
-      <input type="checkbox" data-id="${e(t.id)}">
-      <span class="pk-item-label">${e(t.label)}</span>
-      ${t.status?`<span class="pk-item-status ${n}">${e(t.status)}</span>`:``}
-      ${r}
-    </div>`}).join(``)}</div>
-<button class="pk-apply" id="pkApply">Apply Selection</button>
-<script>
-(function(){
-  let activeCat = 'all', query = '';
-  const tabs = document.getElementById('pkTabs');
-  const list = document.getElementById('pkList');
-  const search = document.getElementById('pkSearch');
-  const summary = document.getElementById('pkSummary');
-
-  function rebuild() {
-    tabs.querySelectorAll('.pk-tab').forEach(t => t.classList.toggle('active', t.dataset.cat === activeCat));
-    list.querySelectorAll('.pk-item').forEach(item => {
-      const catMatch = activeCat === 'all' || item.dataset.cat === activeCat;
-      const qMatch = !query || item.dataset.label.includes(query);
-      item.style.display = (catMatch && qMatch) ? '' : 'none';
-    });
-  }
-  tabs.addEventListener('click', e => {
-    const tab = e.target.closest('.pk-tab');
-    if(tab) { activeCat = tab.dataset.cat; rebuild(); }
-  });
-  search.addEventListener('input', () => { query = search.value.toLowerCase(); rebuild(); });
-  list.addEventListener('change', () => {
-    const count = list.querySelectorAll('input:checked').length;
-    summary.textContent = count + ' selected';
-  });
-  document.getElementById('pkApply').addEventListener('click', () => {
-    const selected = [...list.querySelectorAll('input:checked')].map(cb => cb.dataset.id);
-    if(window.__aikitCallback) {
-      fetch(window.__aikitCallback, {method:'POST',headers:{'Content-Type':'application/json'},
-        body:JSON.stringify({actionId:'pick',value:JSON.stringify(selected)})}).catch(()=>{});
-    }
-  });
-})();
-<\/script>`}function a(e){let t=e.profile;return t?`
-<style>
-  .fg-breadcrumb{display:flex;align-items:center;gap:4px;padding:10px 0;flex-wrap:wrap}
-  .fg-crumb{background:var(--aikit-surface);border:1px solid var(--aikit-border);color:var(--aikit-text);
-    padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px}
-  .fg-crumb:hover{border-color:var(--aikit-accent)}
-  .fg-sep{color:var(--aikit-muted);font-size:14px}
-  .fg-canvas{overflow-y:auto;max-height:450px;padding:4px 0}
-  .fg-row{padding:1px 0}
-  .fg-bar{height:24px;border-radius:4px;display:flex;align-items:center;padding:0 8px;
-    min-width:24px;transition:filter .1s;cursor:pointer;position:relative}
-  .fg-bar:hover{filter:brightness(1.15)}
-  .fg-bar-label{font-size:11px;color:#000;white-space:nowrap;overflow:hidden;
-    text-overflow:ellipsis;font-weight:500}
-  .fg-info{font-size:12px;color:var(--aikit-muted);padding:10px 0;
-    border-top:1px solid var(--aikit-border);margin-top:8px}
-</style>
-<div class="fg-breadcrumb" id="fgBreadcrumb"></div>
-<div class="fg-canvas" id="fgCanvas"></div>
-<div class="fg-info" id="fgInfo"></div>
-<script>
-(function(){
-  const profile = ${JSON.stringify(t)};
-  const colors = ['#e24d28','#e8602a','#edad2a','#f5c842','#fce94f','#c4a000','#e07028','#d45500'];
-  let current = profile;
-  const history = [profile];
-  const bc = document.getElementById('fgBreadcrumb');
-  const canvas = document.getElementById('fgCanvas');
-  const info = document.getElementById('fgInfo');
-
-  function renderFlame() {
-    bc.innerHTML = '';
-    history.forEach((node, i) => {
-      if(i > 0) { const sep = document.createElement('span'); sep.className='fg-sep'; sep.textContent='›'; bc.appendChild(sep); }
-      const btn = document.createElement('button');
-      btn.className = 'fg-crumb';
-      btn.textContent = node.name;
-      btn.addEventListener('click', () => { history.splice(i+1); current = node; renderFlame(); });
-      bc.appendChild(btn);
-    });
-    canvas.innerHTML = '';
-    renderLevel(current, 0, current.total);
-    info.textContent = current.name + ' — total: ' + current.total + (current.self != null ? ', self: '+current.self : '');
-  }
-
-  function renderLevel(node, depth, rootTotal) {
-    const row = document.createElement('div');
-    row.className = 'fg-row';
-    row.style.paddingLeft = (depth * 4) + 'px';
-    const bar = document.createElement('div');
-    bar.className = 'fg-bar';
-    bar.style.width = Math.max(2, (node.total / rootTotal) * 100) + '%';
-    bar.style.background = colors[depth % colors.length];
-    bar.title = node.name + ': ' + node.total;
-    const lbl = document.createElement('span');
-    lbl.className = 'fg-bar-label';
-    lbl.textContent = node.name + ' (' + node.total + ')';
-    bar.appendChild(lbl);
-    bar.addEventListener('mouseenter', () => {
-      info.textContent = node.name + ' — total: ' + node.total + (node.self != null ? ', self: '+node.self : '');
-    });
-    if(node.children && node.children.length) {
-      bar.addEventListener('click', () => { current = node; history.push(node); renderFlame(); });
-    }
-    row.appendChild(bar);
-    canvas.appendChild(row);
-    if(node.children) node.children.forEach(c => renderLevel(c, depth+1, rootTotal));
-  }
-
-  renderFlame();
-})();
-<\/script>`:`<p>No profile data provided</p>`}function o(t){let n=t.fields??[];return`
-<style>
-  .fm-container{display:grid;grid-template-columns:1fr 280px;gap:24px}
-  @media(max-width:640px){.fm-container{grid-template-columns:1fr}}
-  .fm-fields{display:flex;flex-direction:column;gap:16px}
-  .fm-group{display:flex;flex-direction:column;gap:5px}
-  .fm-label{font-size:11px;color:var(--aikit-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
-  .fm-input{padding:9px 14px;background:var(--aikit-surface);border:1px solid var(--aikit-border);
-    border-radius:8px;color:var(--aikit-text);font-size:13px;outline:none;font-family:inherit;width:100%;box-sizing:border-box}
-  .fm-input:focus{border-color:var(--aikit-accent)}
-  .fm-textarea{resize:vertical;min-height:80px}
-  .fm-multi{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
-  .fm-check-label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--aikit-text);cursor:pointer}
-  .fm-check-label input{accent-color:var(--aikit-accent)}
-  .fm-submit{margin-top:8px;width:100%;padding:10px;background:var(--aikit-accent);color:#fff;
-    border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
-  .fm-submit:hover{filter:brightness(1.1)}
-  .fm-preview{background:var(--aikit-surface);border:1px solid var(--aikit-border);border-radius:10px;
-    padding:16px;height:fit-content;position:sticky;top:20px}
-  .fm-preview-title{font-size:11px;color:var(--aikit-muted);text-transform:uppercase;
-    letter-spacing:.5px;margin-bottom:10px}
-  .fm-preview-json{font-size:12px;color:var(--aikit-text);margin:0;white-space:pre-wrap;
-    word-break:break-all;font-family:'SF Mono',Consolas,monospace;line-height:1.5}
-</style>
-<div class="fm-container">
-  <div class="fm-fields" id="fmFields">
-    ${n.map(t=>{let n=t.type??`text`,r;if(n===`select`&&t.options){let n=t.options.map(n=>`<option value="${e(n)}"${n===t.value?` selected`:``}>${e(n)}</option>`).join(``);r=`<select class="fm-input" data-field="${e(t.name)}">${n}</select>`}else r=n===`textarea`?`<textarea class="fm-input fm-textarea" data-field="${e(t.name)}" rows="4">${e(t.value??``)}</textarea>`:n===`multi-select`&&t.options?`<div class="fm-multi">${t.options.map(n=>`<label class="fm-check-label"><input type="checkbox" data-field="${e(t.name)}" value="${e(n)}"${t.value?.includes(n)?` checked`:``}> ${e(n)}</label>`).join(``)}</div>`:`<input class="fm-input" type="${e(n)}" data-field="${e(t.name)}" value="${e(t.value??``)}">`;return`<div class="fm-group"><label class="fm-label">${e(t.label)}</label>${r}</div>`}).join(``)}
-    <button class="fm-submit" id="fmSubmit">Submit</button>
-  </div>
-  <div class="fm-preview">
-    <div class="fm-preview-title">Live Preview</div>
-    <pre class="fm-preview-json" id="fmPreview">{}</pre>
-  </div>
-</div>
-<script>
-(function(){
-  const fields = document.getElementById('fmFields');
-  const preview = document.getElementById('fmPreview');
-  const fieldDefs = ${JSON.stringify(n.map(e=>({name:e.name,type:e.type??`text`})))};
-
-  function getValues() {
-    const vals = {};
-    fieldDefs.forEach(f => {
-      if(f.type === 'multi-select') {
-        vals[f.name] = [...fields.querySelectorAll('input[data-field="'+f.name+'"]:checked')].map(cb => cb.value).join(', ');
-      } else {
-        const el = fields.querySelector('[data-field="'+f.name+'"]');
-        if(el) vals[f.name] = el.value;
-      }
-    });
-    return vals;
-  }
-
-  function updatePreview() { preview.textContent = JSON.stringify(getValues(), null, 2); }
-  fields.addEventListener('input', updatePreview);
-  fields.addEventListener('change', updatePreview);
-  updatePreview();
-
-  document.getElementById('fmSubmit').addEventListener('click', () => {
-    if(window.__aikitCallback) {
-      fetch(window.__aikitCallback, {method:'POST',headers:{'Content-Type':'application/json'},
-        body:JSON.stringify({actionId:'submit',value:JSON.stringify(getValues())})}).catch(()=>{});
-    }
-  });
-})();
-<\/script>`}function s(t){let n=t.events??[],r={complete:`#22c55e`,active:`#3b82f6`,pending:`#9ca3af`,error:`#ef4444`};return`
-<style>
-  .tl-wrap{position:relative;padding-left:28px}
-  .tl-wrap::before{content:'';position:absolute;top:0;bottom:0;left:10px;width:2px;background:var(--aikit-border,#3c3c3c)}
-  .tl-event{position:relative;margin-bottom:16px;display:flex;align-items:flex-start;gap:12px}
-  .tl-dot{position:absolute;left:-28px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
-    justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
-  .tl-body{flex:1}
-  .tl-title{color:var(--aikit-text,#e5e7eb);font:600 13px/1.4 var(--aikit-font-sans,system-ui,sans-serif)}
-  .tl-time{color:var(--aikit-muted,#9ca3af);font:400 11px var(--aikit-font-sans,system-ui,sans-serif);margin-top:2px}
-  .tl-desc{color:var(--aikit-muted,#9ca3af);font:400 12px/1.5 var(--aikit-font-sans,system-ui,sans-serif);margin-top:4px}
-  .tl-cat{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--aikit-surface,#252526);
-    color:var(--aikit-muted,#9ca3af);font:500 10px var(--aikit-font-sans,system-ui,sans-serif);margin-top:4px}
-</style>
-<div class="tl-wrap">${n.map(t=>`
-    <div class="tl-event">
-      <span class="tl-dot" style="background:${r[t.status??`pending`]??r.pending}">${e(t.icon??(t.status===`complete`?`✓`:t.status===`error`?`✗`:`●`))}</span>
-      <div class="tl-body">
-        <div class="tl-title">${e(t.title)}</div>
-        ${t.timestamp?`<div class="tl-time">${e(t.timestamp)}</div>`:``}
-        ${t.description?`<div class="tl-desc">${e(t.description)}</div>`:``}
-        ${t.category?`<span class="tl-cat">${e(t.category)}</span>`:``}
-      </div>
-    </div>`).join(``)}</div>`}function c(t){let n=t.columns??[],r=t.cards??[];return`
-<style>
-  .kbn-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px}
-  .kbn-col{min-width:220px;flex:1;border:1px solid var(--aikit-border,#3c3c3c);border-radius:8px;background:var(--aikit-surface,#252526)}
-  .kbn-col-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--aikit-border,#3c3c3c)}
-  .kbn-col-dot{width:10px;height:10px;border-radius:50%}
-  .kbn-col-title{flex:1;color:var(--aikit-text,#e5e7eb);font:600 13px var(--aikit-font-sans,system-ui,sans-serif)}
-  .kbn-col-count{padding:2px 8px;border-radius:999px;background:var(--aikit-surface2,#2d2d30);color:var(--aikit-muted,#9ca3af);font:600 11px var(--aikit-font-sans,system-ui,sans-serif)}
-  .kbn-cards{display:grid;gap:8px;padding:10px}
-  .kbn-card{padding:10px;border:1px solid var(--aikit-border,#3c3c3c);border-left-width:3px;border-radius:6px;background:var(--aikit-surface2,#2d2d30)}
-  .kbn-card.priority-high{border-left-color:#ef4444}
-  .kbn-card.priority-medium{border-left-color:#f59e0b}
-  .kbn-card.priority-low{border-left-color:#9ca3af}
-  .kbn-card-title{color:var(--aikit-text,#e5e7eb);font:600 13px/1.4 var(--aikit-font-sans,system-ui,sans-serif)}
-  .kbn-card-desc{color:var(--aikit-muted,#9ca3af);font:400 12px/1.4 var(--aikit-font-sans,system-ui,sans-serif);margin-top:6px}
-  .kbn-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
-  .kbn-tag{padding:2px 6px;border-radius:999px;background:var(--aikit-surface,#252526);color:var(--aikit-muted,#9ca3af);font:500 10px var(--aikit-font-sans,system-ui,sans-serif)}
-</style>
-<div class="kbn-board">${n.map(t=>{let n=r.filter(e=>e.column===t.id),i=n.map(t=>`
-      <div class="kbn-card ${t.priority?`priority-${t.priority}`:``}">
-        <div class="kbn-card-title">${e(t.title)}</div>
-        ${t.description?`<div class="kbn-card-desc">${e(t.description)}</div>`:``}
-        ${t.tags?.length?`<div class="kbn-tags">${t.tags.map(t=>`<span class="kbn-tag">${e(t)}</span>`).join(``)}</div>`:``}
-      </div>`).join(``);return`
-    <div class="kbn-col">
-      <div class="kbn-col-hdr">
-        <span class="kbn-col-dot" style="background:${t.color??`var(--aikit-accent,#3b82f6)`}"></span>
-        <span class="kbn-col-title">${e(t.label)}</span>
-        <span class="kbn-col-count">${n.length}</span>
-      </div>
-      <div class="kbn-cards">${i}</div>
-    </div>`}).join(``)}</div>`}function l(t){let n=Array.isArray(t.root)?t.root:t.root?[t.root]:t.roots??[],r=0;function i(t,n){let a=`tn-${r++}`,o=t.children&&t.children.length>0,s=t.icon?`<span class="tr-icon">${e(t.icon)}</span>`:``,c=o?`<button class="tr-toggle" data-target="${a}">▸</button>`:`<span class="tr-spacer"></span>`,l=t.metadata?Object.entries(t.metadata).map(([t,n])=>`<span class="tr-meta">${e(t)}: ${e(n)}</span>`).join(` `):``,u=`<div class="tr-row">${c}${s}<span class="tr-label">${e(t.label)}</span>${l}</div>`;return o&&(u+=`<div class="tr-children" id="${a}" hidden>${(t.children??[]).map(e=>i(e,n+1)).join(``)}</div>`),`<div class="tr-node">${u}</div>`}return`
-<style>
-  .tr-wrap{font:13px var(--aikit-font-sans,system-ui,sans-serif)}
-  .tr-node{margin-left:16px}
-  .tr-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;color:var(--aikit-text,#e5e7eb)}
-  .tr-row:hover{background:var(--aikit-surface2,#2d2d30)}
-  .tr-toggle{border:0;background:0;color:var(--aikit-muted,#9ca3af);cursor:pointer;font-size:12px;width:18px;padding:0}
-  .tr-toggle.open{transform:rotate(90deg)}
-  .tr-spacer{width:18px;display:inline-block}
-  .tr-icon{width:18px;text-align:center}
-  .tr-label{color:var(--aikit-text,#e5e7eb)}
-  .tr-meta{color:var(--aikit-muted,#9ca3af);font-size:11px;margin-left:8px}
-  .tr-children{margin-left:4px;padding-left:10px;border-left:1px dashed var(--aikit-border,#3c3c3c)}
-  .tr-children[hidden]{display:none}
-</style>
-<div class="tr-wrap">${n.map(e=>i(e,0)).join(``)}</div>
-<script>
-(function(){
-  document.querySelectorAll('.tr-toggle').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const target = document.getElementById(btn.dataset.target);
-      if(target) { target.hidden = !target.hidden; btn.classList.toggle('open'); btn.textContent = target.hidden ? '▸' : '▾'; }
-    });
-  });
-})();
-<\/script>`}function u(t){let n=t.files??[],r=t.stats,i={added:`🟢`,modified:`🟡`,deleted:`🔴`,renamed:`🔵`};return`
-<style>
-  .dv-stats{padding:8px 12px;background:var(--aikit-surface,#252526);border-radius:6px;color:var(--aikit-text,#e5e7eb);font:600 13px var(--aikit-font-sans,system-ui,sans-serif);margin-bottom:12px}
-  .dv-add{color:#22c55e}.dv-del{color:#ef4444}
-  .dv-file{border:1px solid var(--aikit-border,#3c3c3c);border-radius:6px;margin-bottom:8px;overflow:hidden}
-  .dv-file-hdr{padding:10px 12px;background:var(--aikit-surface,#252526);cursor:pointer;color:var(--aikit-text,#e5e7eb);font:500 13px var(--aikit-font-sans,system-ui,sans-serif)}
-  .dv-hunk{border-top:1px solid var(--aikit-border,#3c3c3c)}
-  .dv-hunk-hdr{padding:4px 12px;background:var(--aikit-surface2,#2d2d30);color:var(--aikit-muted,#9ca3af);font:400 11px 'SF Mono',Consolas,monospace}
-  .dv-line-add,.dv-line-del,.dv-line-ctx{padding:1px 12px;font:400 12px/1.6 'SF Mono',Consolas,monospace}
-  .dv-line-add{background:rgba(34,197,94,.1);color:#22c55e}
-  .dv-line-del{background:rgba(239,68,68,.1);color:#ef4444}
-  .dv-line-ctx{color:var(--aikit-muted,#9ca3af)}
-  .dv-ln{display:inline-block;width:40px;text-align:right;margin-right:8px;color:var(--aikit-muted,#9ca3af);font-size:11px}
-</style>
-${r?`<div class="dv-stats"><span class="dv-add">+${r.additions}</span> <span class="dv-del">-${r.deletions}</span> in ${r.filesChanged} files</div>`:``}
-<div class="dv-wrap">${n.map(t=>{let n=t.hunks.map(t=>{let n=t.changes.map(t=>{let n=t.type===`add`?`dv-line-add`:t.type===`delete`?`dv-line-del`:`dv-line-ctx`,r=t.type===`add`?`+`:t.type===`delete`?`-`:` `;return`<div class="${n}">${t.line==null?``:`<span class="dv-ln">${t.line}</span>`}<code>${r} ${e(t.content)}</code></div>`}).join(``);return`<div class="dv-hunk"><div class="dv-hunk-hdr">${e(t.header)}</div>${n}</div>`}).join(``),r=i[t.status]??`⚪`,a=t.oldPath?` ← ${e(t.oldPath)}`:``;return`
-    <details class="dv-file" open>
-      <summary class="dv-file-hdr">${r} <strong>${e(t.path)}</strong>${a}
-        <span class="dv-add">+${t.additions}</span> <span class="dv-del">-${t.deletions}</span></summary>
-      ${n}
-    </details>`}).join(``)}</div>`}function d(t){let n=t.metrics??[],r={success:`#22c55e`,warning:`#f59e0b`,error:`#ef4444`,info:`#38bdf8`},i={up:`↑`,down:`↓`,neutral:`→`};return`
-<style>
-  .db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
-  .db-card{padding:14px;border:1px solid var(--aikit-border,#3c3c3c);border-left-width:4px;border-radius:8px;background:var(--aikit-surface,#252526)}
-  .db-label{color:var(--aikit-muted,#9ca3af);font:600 11px var(--aikit-font-sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.06em}
-  .db-value{color:var(--aikit-text,#e5e7eb);font:700 24px var(--aikit-font-sans,system-ui,sans-serif);margin-top:6px}
-  .db-trend{font:600 12px var(--aikit-font-sans,system-ui,sans-serif);margin-left:8px}
-  .db-trend.up{color:#22c55e}.db-trend.down{color:#ef4444}.db-trend.neutral{color:#9ca3af}
-  .db-progress{height:6px;background:var(--aikit-surface2,#2d2d30);border-radius:3px;margin-top:8px;overflow:hidden}
-  .db-progress-bar{height:100%;border-radius:3px;transition:width .3s}
-  .db-list{margin-top:8px;display:grid;gap:4px}
-  .db-list-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--aikit-muted,#9ca3af);font:400 12px var(--aikit-font-sans,system-ui,sans-serif);border-bottom:1px solid var(--aikit-border,#3c3c3c)}
-</style>
-<div class="db-grid">${n.map(t=>{let n=r[t.status??`info`]??r.info,a=t.trend?`<span class="db-trend ${t.trend.direction}">${i[t.trend.direction]??``} ${e(t.trend.value)}</span>`:``,o=`<div class="db-value">${e(String(t.value))}</div>${a}`;return t.type===`progress`&&t.progress!=null&&(o+=`<div class="db-progress"><div class="db-progress-bar" style="width:${Math.min(100,Math.max(0,t.progress))}%;background:${n}"></div></div>`),t.type===`list`&&t.items?.length&&(o+=`<div class="db-list">${t.items.map(t=>`<div class="db-list-row"><span>${e(t.label)}</span><span>${e(t.value)}</span></div>`).join(``)}</div>`),`
-    <div class="db-card" style="border-left-color:${n}">
-      <div class="db-label">${e(t.label)}</div>
-      ${o}
-    </div>`}).join(``)}</div>`}export{d as buildDashboardHtml,r as buildDataTableHtml,u as buildDiffViewHtml,a as buildFlameGraphHtml,o as buildFormHtml,c as buildKanbanHtml,n as buildListSortHtml,i as buildPickerHtml,t as buildTemplateHtml,s as buildTimelineHtml,l as buildTreeHtml};

package/packages/server/dist/tools/present/tool.d.ts

@@ -1,27 +0,0 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { UIResource } from "@mcp-ui/server";
-import { Elicitor } from "../../../../elicitation/dist/index.js";
-
-//#region packages/server/src/tools/present/tool.d.ts
-declare function resolvePresentHtml(): string;
-declare function getPresentHtml(): string;
-declare function registerPresentTool(server: McpServer, elicitor?: Elicitor): void;
-declare function formatAsBrowser(title: string | undefined, content: unknown, actions: unknown, elicitor: Elicitor | undefined, template?: string): Promise<{
-  content: Array<{
-    type: 'text';
-    text: string;
-  } | UIResource>;
-}>;
-declare function formatAsHtml(title: string | undefined, content: unknown, actions: unknown, template?: string): {
-  content: Array<{
-    type: 'text';
-    text: string;
-  } | UIResource>;
-  structuredContent?: {
-    title?: string;
-    content?: unknown;
-    actions: Array<Record<string, unknown>>;
-  };
-};
-//#endregion
-export { formatAsBrowser, formatAsHtml, getPresentHtml, registerPresentTool, resolvePresentHtml };

package/packages/server/dist/tools/present/tool.js

@@ -1,39 +0,0 @@
-import{getToolMeta as e}from"../../tool-metadata.js";import{normalizeContentForApp as t}from"./helpers.js";import{buildBrowserHtml as n}from"./browser.js";import{buildMarkdown as r}from"./markdown.js";import{readFileSync as i}from"node:fs";import{dirname as a,join as o}from"node:path";import{fileURLToPath as s}from"node:url";import{z as c}from"zod";import{RESOURCE_MIME_TYPE as l,registerAppResource as u,registerAppTool as d}from"@modelcontextprotocol/ext-apps/server";import{exec as f}from"node:child_process";import{createServer as p}from"node:http";import{createUIResource as m}from"@mcp-ui/server";const h=import.meta.dirname??a(s(import.meta.url)),g=`ui://aikit/present.html`,_=c.object({type:c.enum([`button`,`select`]).describe(`Action type`),id:c.string().describe(`Unique action identifier`),label:c.string().describe(`Display label`),variant:c.enum([`primary`,`danger`,`default`]).optional().describe(`Button style variant`),options:c.array(c.union([c.string(),c.object({label:c.string(),value:c.string()})])).optional().describe(`Select options (for type=select)`)}),v={format:c.enum([`html`,`browser`]).default(`html`).describe(`Output format.
-- "html" (default): Rich markdown in chat + embedded UIResource for MCP-UI hosts. Actions shown as numbered choices.
-- "browser": Rich markdown in chat + opens beautiful themed dashboard in the browser. When actions are provided, the browser shows interactive buttons and the tool blocks until user clicks, returning their selection.`),title:c.string().optional().describe(`Optional heading`),content:c.any().describe(`Content to present. Accepts these shapes:
-• markdown string — rendered as rich text
-• array of objects — auto-rendered as table
-• { nodes, edges } — rendered as mermaid graph
-• typed blocks array [{ type, title?, value }] — the primary format:
-  - type:"markdown" → value: string (markdown text)
-  - type:"code" → value: string, language?: string
-  - type:"mermaid" → value: string (mermaid syntax)
-  - type:"table" → value: Record[] | {headers:string[], rows:any[][]}
-  - type:"metrics" → value: [{label,value,trend?,status?}]
-  - type:"chart" → value: {chartType:"line"|"area"|"bar"|"horizontal-bar"|"pie"|"donut"|"sparkline"|"heatmap", data:Record[], xKey:string, yKeys:string[]}
-  - type:"cards" → value: [{title,body?,badge?,status?}]
-  - type:"tree" → value: {name,children?:[...]} | object
-  - type:"graph" → value: {nodes:[{id,label}], edges:[{from,to}]}
-  - type:"timeline" → value: [{title,description?,timestamp?,status?}]
-  - type:"checklist" → value: [{label,checked:boolean}]
-  - type:"status-board" → value: [{category,items:[{label,status}]}]
-  - type:"comparison" → value: [{title,items:string[]}] (columns)
-  - type:"progress" → value: {label,value:number,max?:number}
-• any JSON — rendered as collapsible tree
-IMPORTANT: For charts, use the ChartValue format above. Do NOT use Chart.js format ({labels, datasets}) — it will be auto-converted but the native format is preferred.`),actions:c.array(_).optional().describe(`Interactive actions (buttons/selects). In html mode, shown as numbered choices. In browser mode, rendered as clickable buttons and the tool blocks until user clicks.`),template:c.enum([`auto`,`list-sort`,`data-table`,`picker`,`flame-graph`,`form`,`timeline`,`kanban`,`tree`,`diff-view`,`dashboard`]).optional().describe(`UI template for interactive display in MCP Apps hosts.
-- auto (default): detect from content shape
-- list-sort: drag-drop reorderable list — content: { items: [{id, label}] }
-- data-table: filterable sortable table — content: { columns: [{key, label}], rows: [{...}], stats?: [{label, value}] }
-- picker: multi-select with categories/search — content: { categories: [{id, label}], items: [{id, label, category?, tags?[]}] }
-- flame-graph: hierarchical zoom visualization — content: { profile: {name, total, children:[]} }
-- form: input fields with live preview — content: { fields: [{name, label, type?, options?[], value?}] }
-- timeline: vertical event timeline — content: { events: [{title, description?, timestamp?, status?}] }
-- kanban: drag-drop board — content: { columns: [{id, label, color?}], cards: [{id, title, column, tags?[], priority?}] }
-- tree: collapsible tree view — content: { root: {label, children?:[...]} | [...] }
-- diff-view: side-by-side diff — content: { files: [{path, status, additions, deletions, hunks:[{header, changes:[{type, content}]}]}] }
-- dashboard: metric cards grid — content: { metrics: [{label, value, trend?, status?, type?}] }`)};let y,b=!1,x=null;process.on(`exit`,()=>{if(x){try{x.close()}catch{}x=null}});function S(){return o(h,`..`,`..`,`..`,`..`,`present`,`dist`,`index.html`)}function C(){if(!y)try{y=i(S(),`utf-8`)}catch{y=``}return y}function w(t,n){let r=e(`present`),i=C(),a=`Present content to the user in the best format. Two modes:
-- "html" (default): Rich markdown in chat + embedded UIResource. Use for display-only content (tables, charts, reports, status boards) where no user interaction is needed.
-- "browser": Serves a themed dashboard on a local URL. Use ONLY when you need user interaction back (confirmations, selections, form input). The tool blocks until user clicks an action button, then returns their selection.
-FORMAT RULE: If no user interaction is needed → use "html". If you need user input back → use "browser".
-CONTENT GUIDE: Pass typed blocks [{ type, title?, value }] for structured content. See the \`content\` parameter description for all supported block types and their value shapes. For charts: use {chartType, data:Record[], xKey, yKeys} — NOT Chart.js format.
-BROWSER WORKFLOW: After calling present with format "browser", you MUST extract the URL from the response and call openBrowserPage({ url }) tool - PlayWright MCP to open it in VS Code Simple Browser. A system browser fallback also opens automatically, but always call openBrowserPage tool - PlayWright MCP yourself.`,o=async({format:e,title:t,content:r,actions:i,template:a})=>(e??`html`)===`browser`||Array.isArray(i)&&i.length>0?await T(t,r,i,n,a):E(t,r,i,a);if(i){b||=(u(t,`AI Kit Present App`,g,{description:`Rich interactive content viewer for AI Kit tools`},async()=>({contents:[{uri:g,mimeType:l,text:i}]})),!0),d(t,`present`,{title:r.title,description:a,annotations:r.annotations,inputSchema:v,_meta:{ui:{resourceUri:g}}},o);return}t.tool(`present`,a,v,r.annotations,o)}async function T(e,t,i,a,o){let s=r(e,t,{compactTables:!0}),c=n(e,t,i,o),l=m({uri:`ui://aikit/present-browser.html`,content:{type:`rawHtml`,htmlString:c},encoding:`text`,adapters:{mcpApps:{enabled:!0}}}),u,d,h=Array.isArray(i)?i:[],g=``,_;try{x&&=(x.close(),null),h.length>0&&(u=new Promise(e=>{d=e}));let e=!1;g=await new Promise((t,n)=>{let r=p((t,n)=>{if(e||(e=!0,_&&clearTimeout(_)),t.method===`POST`&&t.url===`/callback`){let e=``;t.on(`data`,t=>{e+=t.toString()}),t.on(`end`,()=>{n.writeHead(200,{"Content-Type":`application/json`,"Access-Control-Allow-Origin":`*`}),n.end(`{"ok":true}`);try{let t=JSON.parse(e);d?.(t)}catch{}});return}if(t.method===`OPTIONS`){n.writeHead(204,{"Access-Control-Allow-Origin":`*`,"Access-Control-Allow-Methods":`POST`,"Access-Control-Allow-Headers":`Content-Type`}),n.end();return}n.writeHead(200,{"Content-Type":`text/html; charset=utf-8`}),n.end(c)});r.listen(0,`127.0.0.1`,()=>{let i=r.address();if(typeof i==`object`&&i){x=r;let n=`http://127.0.0.1:${i.port}`;_=setTimeout(()=>{if(!e)try{f(process.platform===`win32`?`start "" "${n}"`:process.platform===`darwin`?`open "${n}"`:`xdg-open "${n}"`)}catch{}},8e3),_.unref(),t(n)}else n(Error(`Failed to start present server`))}),setTimeout(()=>{r.close(),x===r&&(x=null)},300*1e3).unref()})}catch{}let v=g?`${s}\n\n---\n🌐 **Dashboard opened in browser:** ${g}\n\n**IMPORTANT:** You MUST now open this URL using the \`openBrowserPage\` tool - PlayWright MCP. If that tool is unavailable, open the URL in the system browser as a fallback. If neither works, ask the user to open the URL manually.`:s;if(h.length>0&&a?.available&&u)try{let e=await Promise.race([u,new Promise((e,t)=>setTimeout(()=>t(Error(`timeout`)),300*1e3))]);return{content:[{type:`text`,text:`${v}\n\n✅ **Selected:** ${e.actionId} = \`${e.value}\``},l]}}catch{return{content:[{type:`text`,text:`${v}\n\n⚠️ *No selection received (timed out).*`},l]}}return{content:[{type:`text`,text:v},l]}}function E(e,i,a,o){let s=Array.isArray(a)?a:[],c=r(e,i,{compactTables:!0}),l=m({uri:`ui://aikit/present-static.html`,content:{type:`rawHtml`,htmlString:n(e,i,a,o)},encoding:`text`,adapters:{mcpApps:{enabled:!0}}});return{content:[{type:`text`,text:c},l],structuredContent:{title:e,content:t(i),actions:s}}}export{T as formatAsBrowser,E as formatAsHtml,C as getPresentHtml,w as registerPresentTool,S as resolvePresentHtml};

package/packages/server/dist/tools/present-blocks.d.ts

@@ -1,46 +0,0 @@
-//#region packages/server/src/tools/present-blocks.d.ts
-/**
- * Present Blocks — New block-type renderers.
- *
- * Each function returns an HTML string that pairs with classes
- * already defined in present-theme.ts.
- */
-interface TimelineItem {
-  phase?: string;
-  title: string;
-  description?: string;
-  status?: 'done' | 'active' | 'pending' | 'error';
-}
-interface ChecklistItem {
-  label: string;
-  checked?: boolean;
-  note?: string;
-}
-interface ComparisonColumn {
-  title: string;
-  items: string[];
-}
-interface StatusItem {
-  label: string;
-  status: 'success' | 'warning' | 'error' | 'info' | 'pending';
-  detail?: string;
-}
-interface PromptValue {
-  question: string;
-  context?: string;
-  placeholder?: string;
-}
-interface ProgressItem {
-  label: string;
-  value: number;
-  max?: number;
-  color?: string;
-}
-declare function renderTimelineHtml(value: unknown): string;
-declare function renderChecklistHtml(value: unknown): string;
-declare function renderComparisonHtml(value: unknown): string;
-declare function renderStatusBoardHtml(value: unknown): string;
-declare function renderPromptHtml(value: unknown): string;
-declare function renderProgressHtml(value: unknown): string;
-//#endregion
-export { ChecklistItem, ComparisonColumn, ProgressItem, PromptValue, StatusItem, TimelineItem, renderChecklistHtml, renderComparisonHtml, renderProgressHtml, renderPromptHtml, renderStatusBoardHtml, renderTimelineHtml };

package/packages/server/dist/tools/present-blocks.js

@@ -1,27 +0,0 @@
-import{escHtml as e}from"./present-utils.js";const t=e;function n(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="timeline">${n.items.map(e=>{let n=e.status??`pending`,r=e.phase?`<div class="timeline-phase">${t(e.phase)}</div>`:``,i=e.description?`<div class="timeline-desc">${t(e.description)}</div>`:``;return`<div class="timeline-item">
-      <div class="timeline-dot ${n}"></div>
-      ${r}
-      <div class="timeline-title">${t(e.title)}</div>
-      ${i}
-    </div>`}).join(``)}</div>`}function r(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="checklist">${n.items.map(e=>{let n=e.checked?`checked`:``,r=e.checked?`✓`:``,i=e.note?`<div class="checklist-note">${t(e.note)}</div>`:``;return`<div class="checklist-item ${n}">
-      <div class="checklist-check ${n}">${r}</div>
-      <div>
-        <div class="checklist-label">${t(e.label)}</div>
-        ${i}
-      </div>
-    </div>`}).join(``)}</div>`}function i(e){let n=e;if(n?.left&&n?.right)return i({columns:[{title:n.left.label??`Left`,items:n.left.items??[]},{title:n.right.label??`Right`,items:n.right.items??[]}]});if(!n?.columns||!Array.isArray(n.columns)||n.columns.length===0)return``;let r=n.columns.length,a=Math.max(...n.columns.map(e=>e.items?.length??0));return`<div class="comparison-grid" style="grid-template-columns:repeat(${r},1fr)">${n.columns.map(e=>{let n=`<div class="comparison-header">${t(e.title)}</div>`,r=[];for(let n=0;n<a;n++){let i=e.items?.[n]??``;r.push(`<div class="comparison-item">${t(i)}</div>`)}return`<div class="comparison-col">${n}${r.join(``)}</div>`}).join(``)}</div>`}function a(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="status-board">${n.items.map(e=>{let n=e.detail?`<span class="status-detail">${t(e.detail)}</span>`:``;return`<div class="status-row">
-      <div class="status-indicator ${e.status??`pending`}"></div>
-      <span class="status-label">${t(e.label)}</span>
-      ${n}
-    </div>`}).join(``)}</div>`}function o(e){let n=e;if(!n?.question)return``;let r=n.context?`<div class="prompt-context">${t(n.context)}</div>`:``,i=n.placeholder?`<div class="prompt-placeholder">${t(n.placeholder)}</div>`:``;return`<div class="prompt-block">
-    <div class="prompt-question">${t(n.question)}</div>
-    ${r}${i}
-  </div>`}function s(e){let n=e;if(!n?.items||!Array.isArray(n.items))return``;let r=e=>e>=100?`var(--success)`:e>=60?`var(--primary)`:e>=30?`var(--warning)`:`var(--error)`;return`<div class="progress-list">${n.items.map(e=>{let n=e.max??100,i=n>0?Math.min(100,e.value/n*100):0,a=e.color??r(i);return`<div class="progress-item">
-      <div class="progress-header">
-        <span class="progress-label">${t(e.label)}</span>
-        <span class="progress-value">${e.value}/${n}</span>
-      </div>
-      <div class="progress-track">
-        <div class="progress-fill" style="width:${i.toFixed(1)}%;background:${a}"></div>
-      </div>
-    </div>`}).join(``)}</div>`}export{r as renderChecklistHtml,i as renderComparisonHtml,s as renderProgressHtml,o as renderPromptHtml,a as renderStatusBoardHtml,n as renderTimelineHtml};