thatcher 1.0.4

package/src/ui/advanced-widgets.js

@@ -0,0 +1,47 @@
+import { h } from '@/ui/webjsx.js'
+import { TOAST_SCRIPT } from '@/ui/render-helpers.js'
+
+export function dataGridAdvanced(config) {
+  const { columns = [], data = [], groupBy = null, sortable = true, filterable = true, expandable = false, detailRenderer = null } = config
+  const gridId = 'dg-' + Math.random().toString(36).slice(2, 8)
+  const colHeaders = columns.map((col, i) => {
+    const sortAttr = sortable ? ` data-dg-sort="${col.field}" data-action="dgSort" data-args='["${gridId}","${col.field}","${i},event"]'` : ''
+    const filterHtml = filterable ? `<div class="dg-filter"><input type="text" data-dg-filter="${col.field}" placeholder="Filter..." class="dg-filter-input" aria-label="Filter ${col.label || col.field}" oninput="dgFilter('${gridId}')"/></div>` : ''
+    return `<th${sortAttr} class="${sortable ? 'dg-sortable' : ''}">${col.label || col.field}<span class="dg-sort-indicator" data-dg-indicator="${col.field}"></span>${filterHtml}</th>`
+  }).join('')
+  const expandCol = expandable ? '<th class="dg-expand-col"></th>' : ''
+  const renderRow = (item, rowId, groupId) => {
+    const memberAttr = groupId ? ` data-dg-member="${groupId}"` : ''
+    const expandBtn = expandable ? `<td class="dg-expand-col"><button class="dg-expand-btn" data-dg-row="${rowId}" data-action="dgToggleDetail" data-args='["${gridId}"]' data-self aria-label="Expand row details" aria-expanded="false">&#9654;</button></td>` : ''
+    const cells = columns.map(col => `<td>${item[col.field] ?? '-'}</td>`).join('')
+    const detailRow = expandable ? `<tr class="dg-detail-row"${memberAttr} data-dg-detail="${rowId}" style="display:none"><td colspan="${columns.length + 1}"><div class="dg-detail-panel">${detailRenderer ? detailRenderer(item) : ''}</div></td></tr>` : ''
+    return `<tr class="dg-data-row"${memberAttr} data-dg-values='${JSON.stringify(columns.map(c => String(item[c.field] ?? '')))}'>${expandBtn}${cells}</tr>${detailRow}`
+  }
+  let bodyHtml = ''
+  if (groupBy) {
+    const groups = {}
+    data.forEach(item => { const key = String(item[groupBy] ?? 'Ungrouped'); if (!groups[key]) groups[key] = []; groups[key].push(item) })
+    bodyHtml = Object.entries(groups).map(([key, items]) => {
+      const gid = `${gridId}-g-${key.replace(/\W/g, '_')}`
+      const rows = items.map((item, i) => renderRow(item, `${gid}-r${i}`, gid)).join('')
+      return `<tr class="dg-group-header" data-dg-group="${gid}" tabindex="0" data-action="dgToggleGroup" data-args='["${gid}"]' onkeydown="if(event.key==='Enter')dgToggleGroup('${gid}')"><td colspan="${columns.length + (expandable ? 1 : 0)}"><span class="dg-group-arrow">&#9660;</span> <strong>${key}</strong> <span class="dg-group-count">(${items.length})</span></td></tr>${rows}`
+    }).join('')
+  } else {
+    bodyHtml = data.map((item, i) => renderRow(item, `${gridId}-r${i}`, null)).join('')
+  }
+  const script = `(function(){var sorts={};window.dgSort=function(gid,field,ci,evt){if(!sorts[gid])sorts[gid]=[];if(!evt.shiftKey)sorts[gid]=[];var ex=sorts[gid].find(function(s){return s.field===field});if(ex){ex.dir=ex.dir==='asc'?'desc':'asc'}else{sorts[gid].push({field:field,col:ci,dir:'asc'})}var t=document.getElementById(gid);t.querySelectorAll('[data-dg-indicator]').forEach(function(el){el.textContent=''});sorts[gid].forEach(function(s){var ind=t.querySelector('[data-dg-indicator="'+s.field+'"]');if(ind)ind.textContent=s.dir==='asc'?' \\u25B2':' \\u25BC'});var rows=Array.from(t.querySelectorAll('.dg-data-row'));var tb=t.querySelector('tbody');rows.sort(function(a,b){var va=JSON.parse(a.dataset.dgValues);var vb=JSON.parse(b.dataset.dgValues);for(var i=0;i<sorts[gid].length;i++){var s=sorts[gid][i];var cmp=va[s.col].localeCompare(vb[s.col],undefined,{numeric:true});if(cmp!==0)return s.dir==='asc'?cmp:-cmp}return 0});rows.forEach(function(r){var d=t.querySelector('[data-dg-detail="'+r.querySelector('.dg-expand-btn')?.dataset?.dgRow+'"]');tb.appendChild(r);if(d)tb.appendChild(d)})};window.dgFilter=function(gid){var t=document.getElementById(gid);var fs=Array.from(t.querySelectorAll('[data-dg-filter]'));var vals=fs.map(function(f){return f.value.toLowerCase()});t.querySelectorAll('.dg-data-row').forEach(function(r){var d=JSON.parse(r.dataset.dgValues||'[]');var show=vals.every(function(v,i){return !v||d[i].toLowerCase().indexOf(v)!==-1});r.style.display=show?'':'none';var det=t.querySelector('[data-dg-detail="'+(r.querySelector('.dg-expand-btn')||{}).dataset?.dgRow+'"]');if(det&&!show)det.style.display='none'})};window.dgToggleGroup=function(gid){var ms=document.querySelectorAll('[data-dg-member="'+gid+'"]');var h=document.querySelector('[data-dg-group="'+gid+'"]');var a=h.querySelector('.dg-group-arrow');var hidden=ms[0]&&ms[0].style.display==='none';ms.forEach(function(m){m.style.display=hidden?'':'none'});a.textContent=hidden?'\\u25BC':'\\u25B6'};window.dgToggleDetail=function(gid,btn){var rid=btn.dataset.dgRow;var det=document.querySelector('[data-dg-detail="'+rid+'"]');if(!det)return;var shown=det.style.display!=='none';det.style.display=shown?'none':'';btn.textContent=shown?'\\u25B6':'\\u25BC';btn.classList.toggle('dg-expand-open',!shown)}})();`
+  return `<div class="dg-wrapper"><table id="${gridId}" class="dg-table"><thead><tr>${expandCol}${colHeaders}</tr></thead><tbody>${bodyHtml}</tbody></table></div><script>${script}</script>`
+}
+
+export function collapsibleSidebar(sections, currentPath) {
+  const sidebarId = 'sidebar-' + Math.random().toString(36).slice(2, 8)
+  const sectionHtml = sections.map(section => {
+    const links = (section.items || []).map(item => {
+      const active = currentPath === item.href
+      return `<a href="${item.href}" class="sidebar-link${active ? ' sidebar-link-active' : ''}">${item.label}</a>`
+    }).join('')
+    return `<div class="sidebar-section"><div class="sidebar-section-header" data-action="sidebarToggleSection" data-self>${section.title}<span class="sidebar-section-arrow">&#9660;</span></div><div class="sidebar-section-body">${links}</div></div>`
+  }).join('')
+  const script = `(function(){var sb=document.getElementById('${sidebarId}');var saved=localStorage.getItem('sidebar-width');if(saved)sb.style.width=saved+'px';var collapsed=localStorage.getItem('sidebar-collapsed')==='true';if(collapsed)sb.classList.add('sidebar-collapsed');window.sidebarToggleSection=function(el){el.parentElement.classList.toggle('sidebar-section-closed')};window.sidebarToggleCollapse=function(){sb.classList.toggle('sidebar-collapsed');localStorage.setItem('sidebar-collapsed',sb.classList.contains('sidebar-collapsed'))};var handle=sb.querySelector('.sidebar-resize-handle');var startX,startW;handle.addEventListener('mousedown',function(e){startX=e.clientX;startW=sb.offsetWidth;function onMove(ev){var w=startW+(ev.clientX-startX);if(w>48&&w<400){sb.style.width=w+'px';localStorage.setItem('sidebar-width',w)}}function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp)}document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp)})})();`
+  return `<aside id="${sidebarId}" class="sidebar-collapsible"><div class="sidebar-inner"><button class="sidebar-collapse-btn" data-action="sidebarToggleCollapse" title="Toggle sidebar">&#9776;</button>${sectionHtml}</div><div class="sidebar-resize-handle"></div></aside><script>${script}</script>`
+}

package/src/ui/auth-pages.js

@@ -0,0 +1,114 @@
+import { generateHtml } from '@/ui/layout.js'
+import { nav as navFn } from '@/ui/layout.js'
+import { AUTH_CSS, GOOGLE_SVG, WARN_SVG, LOGO_SVG, authLogoHtml } from '@/ui/auth-styles.js'
+
+export function renderLogin(error = null, hasGoogleAuth = false) {
+  const errHtml = error
+    ? `<div class="auth-err" role="alert">${WARN_SVG}${String(error).replace(/</g, '&lt;')}</div>`
+    : ''
+  const googleBtn = hasGoogleAuth
+    ? `<a href="/api/auth/google" class="auth-google-btn" aria-label="Continue with Google">${GOOGLE_SVG}Continue with Google</a>
+       <div class="auth-divider"><div class="auth-divider-line"></div><span class="auth-divider-text">or</span><div class="auth-divider-line"></div></div>`
+    : ''
+  const body = `${AUTH_CSS}
+  <div class="auth-shell"><div class="auth-wrap">
+    ${authLogoHtml('Sign in to your account')}
+    <div class="auth-card">
+      <div id="login-err-area" role="alert" aria-live="assertive">${errHtml}</div>
+      ${googleBtn}
+      <form id="login-form" aria-label="Sign in" novalidate>
+        <div class="auth-field"><label class="auth-label" for="email">Email address</label>
+          <input type="email" name="email" id="email" class="auth-input" placeholder="you@example.com" required autocomplete="email" autofocus></div>
+        <div class="auth-field"><label class="auth-label" for="password">Password</label>
+          <input type="password" name="password" id="password" class="auth-input" placeholder="Your password" required autocomplete="current-password"></div>
+        <div class="auth-forgot"><a href="/password-reset">Forgot password?</a></div>
+        <button type="submit" id="login-btn" class="auth-submit">Sign In</button>
+      </form>
+    </div>
+  </div></div>`
+  const script = `
+var form=document.getElementById('login-form');
+form.addEventListener('submit',async function(e){
+  e.preventDefault();var btn=document.getElementById('login-btn'),errArea=document.getElementById('login-err-area');
+  btn.textContent='Signing in\u2026';btn.disabled=true;errArea.innerHTML='';
+  try{var res=await fetch('/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:form.email.value,password:form.password.value})});
+    var data=await res.json().catch(function(){return{};});
+    if(res.ok){btn.textContent='Redirecting\u2026';window.location.href=data.redirect||'/';}
+    else{var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=data.error||'Login failed. Please check your credentials.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Sign In';btn.disabled=false;}
+  }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Sign In';btn.disabled=false;}
+});`
+  return generateHtml('Sign In | Moonlanding', body, [script])
+}
+
+export function renderPasswordReset() {
+  const body = `${AUTH_CSS}
+  <div class="auth-shell"><div class="auth-wrap">
+    ${authLogoHtml('Reset your password')}
+    <div class="auth-card">
+      <div id="reset-success" class="auth-success" style="display:none" role="alert">If an account exists with that email, a reset link has been sent. Check your inbox.</div>
+      <form id="reset-form" aria-label="Password reset request" novalidate>
+        <div class="auth-field"><label class="auth-label" for="email">Email address</label>
+          <input type="email" name="email" id="email" class="auth-input" placeholder="you@example.com" required autocomplete="email" autofocus></div>
+        <div id="reset-err-area" role="alert" aria-live="assertive"></div>
+        <button type="submit" id="reset-btn" class="auth-submit">Send Reset Link</button>
+      </form>
+      <div class="auth-back"><a href="/login">Back to sign in</a></div>
+    </div>
+  </div></div>`
+  const script = `
+var form=document.getElementById('reset-form');
+form.addEventListener('submit',async function(e){
+  e.preventDefault();var btn=document.getElementById('reset-btn'),errArea=document.getElementById('reset-err-area');
+  btn.textContent='Sending\u2026';btn.disabled=true;errArea.innerHTML='';
+  try{var res=await fetch('/api/auth/password-reset',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:form.email.value})});
+    if(res.ok){form.style.display='none';document.getElementById('reset-success').style.display='block';}
+    else{var d=await res.json().catch(function(){return{};});var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=d.error||'Request failed. Please try again.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Send Reset Link';btn.disabled=false;}
+  }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Send Reset Link';btn.disabled=false;}
+});`
+  return generateHtml('Reset Password | Moonlanding', body, [script])
+}
+
+export function renderPasswordResetConfirm(token) {
+  const body = `${AUTH_CSS}
+  <div class="auth-shell"><div class="auth-wrap">
+    ${authLogoHtml('Set a new password')}
+    <div class="auth-card">
+      <div id="confirm-success" class="auth-success" style="display:none" role="alert">Password updated. <a href="/login" style="color:#15803d;text-decoration:underline;font-weight:600">Sign in now</a></div>
+      <form id="confirm-form" aria-label="Set new password" novalidate>
+        <input type="hidden" name="token" value="${token}">
+        <div class="auth-field"><label class="auth-label" for="password">New password</label>
+          <input type="password" name="password" id="password" class="auth-input" placeholder="At least 8 characters" minlength="8" required autocomplete="new-password" autofocus></div>
+        <div class="auth-field"><label class="auth-label" for="confirm_password">Confirm new password</label>
+          <input type="password" name="confirm_password" id="confirm_password" class="auth-input" placeholder="Same password again" minlength="8" required autocomplete="new-password"></div>
+        <div id="confirm-err-area" role="alert" aria-live="assertive"></div>
+        <button type="submit" id="confirm-btn" class="auth-submit">Update Password</button>
+      </form>
+      <div class="auth-back"><a href="/login">Back to sign in</a></div>
+    </div>
+  </div></div>`
+  const script = `
+var form=document.getElementById('confirm-form');
+form.addEventListener('submit',async function(e){
+  e.preventDefault();var pw=form.password.value,cpw=form.confirm_password.value,errArea=document.getElementById('confirm-err-area');
+  errArea.innerHTML='';
+  if(pw!==cpw){errArea.innerHTML='<div class="auth-err" role="alert">Passwords do not match.</div>';return;}
+  var btn=document.getElementById('confirm-btn');btn.textContent='Updating\u2026';btn.disabled=true;
+  try{var res=await fetch('/api/auth/password-reset',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({token:form.token.value,password:pw})});
+    var data=await res.json().catch(function(){return{};});
+    if(res.ok){form.style.display='none';document.getElementById('confirm-success').style.display='block';}
+    else{var el=document.createElement('div');el.className='auth-err';el.setAttribute('role','alert');el.textContent=data.error||'Reset failed. Please try again.';errArea.innerHTML='';errArea.appendChild(el);btn.textContent='Update Password';btn.disabled=false;}
+  }catch(err){errArea.innerHTML='<div class="auth-err" role="alert">Network error. Please try again.</div>';btn.textContent='Update Password';btn.disabled=false;}
+});`
+  return generateHtml('Set New Password | Moonlanding', body, [script])
+}
+
+export function renderAccessDenied(user, entityName, action) {
+  const txt = { list: 'view this list', view: 'view this item', create: 'create items here', edit: 'edit this item', delete: 'delete this item' }
+  const body = `<div class="min-h-screen">${navFn(user)}<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 20px">
+    <div style="font-size:48px;margin-bottom:16px" aria-hidden="true">&#128274;</div>
+    <h1 style="font-size:24px;font-weight:700;color:var(--color-text,#0f172a);margin:0 0 8px">Access Denied</h1>
+    <p style="color:var(--color-text-muted,#64748b);margin:0 0 24px;max-width:400px">You do not have permission to ${txt[action] || action} in ${entityName}.</p>
+    <a href="/" class="btn-primary-clean">Return to Dashboard</a>
+  </div></div>`
+  return generateHtml('Access Denied | Moonlanding', body)
+}

package/src/ui/auth-styles.js

@@ -0,0 +1,53 @@
+export const AUTH_CSS = `<style>
+  .auth-shell{min-height:100vh;background:var(--color-bg,#f1f5f9);display:flex;align-items:center;justify-content:center;padding:16px}
+  .auth-wrap{width:100%;max-width:400px}
+  .auth-logo{text-align:center;margin-bottom:32px}
+  .auth-logo-mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:#04141f;border-radius:14px;margin-bottom:14px;box-shadow:0 4px 12px rgba(4,20,31,0.25)}
+  .auth-logo-name{font-size:1.35rem;font-weight:800;color:var(--color-text,#0f172a);letter-spacing:0.5px;display:block;margin-bottom:4px}
+  .auth-logo-sub{color:var(--color-text-muted,#64748b);font-size:0.875rem}
+  .auth-card{background:var(--color-surface,#fff);border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,0.09);padding:32px;border:1px solid var(--color-border,#e2e8f0)}
+  .auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1px solid var(--color-border,#e2e8f0);border-radius:8px;background:var(--color-surface,#fff);color:var(--color-text,#0f172a);font-size:0.875rem;font-weight:500;text-decoration:none;margin-bottom:20px;transition:all 0.15s;cursor:pointer;min-height:44px}
+  .auth-google-btn:hover{background:var(--color-bg,#f1f5f9);border-color:#94a3b8}
+  .auth-google-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
+  .auth-divider{display:flex;align-items:center;gap:12px;margin-bottom:20px}
+  .auth-divider-line{flex:1;height:1px;background:var(--color-border,#e2e8f0)}
+  .auth-divider-text{font-size:0.75rem;color:var(--color-text-muted,#64748b);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
+  .auth-field{margin-bottom:18px}
+  .auth-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--color-text,#0f172a);margin-bottom:6px}
+  .auth-input{width:100%;padding:10px 13px;border:1.5px solid var(--color-border,#e2e8f0);border-radius:8px;font-size:0.9rem;outline:none;transition:border-color 0.15s,box-shadow 0.15s;background:var(--color-surface,#fff);color:var(--color-text,#0f172a);min-height:44px;box-sizing:border-box}
+  .auth-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
+  .auth-forgot{text-align:right;margin-bottom:22px}
+  .auth-forgot a{font-size:0.8125rem;color:#2563eb;text-decoration:none;font-weight:500}
+  .auth-forgot a:hover{text-decoration:underline}
+  .auth-submit{width:100%;padding:12px;background:#04141f;color:#fff;border:none;border-radius:8px;font-size:0.9375rem;font-weight:600;cursor:pointer;transition:all 0.15s;min-height:46px}
+  .auth-submit:hover:not(:disabled){background:#0a2535;box-shadow:0 4px 12px rgba(4,20,31,0.2)}
+  .auth-submit:disabled{opacity:0.65;cursor:not-allowed}
+  .auth-submit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
+  .auth-err{background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c;padding:11px 14px;border-radius:8px;margin-bottom:18px;font-size:0.875rem;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
+  .auth-success{background:#dcfce7;border:1px solid #86efac;color:#15803d;padding:12px 14px;border-radius:8px;margin-bottom:18px;font-size:0.875rem}
+  .auth-back{text-align:center;margin-top:16px;font-size:0.875rem;color:var(--color-text-muted,#64748b)}
+  .auth-back a{color:#2563eb;text-decoration:none;font-weight:500}
+  .auth-back a:hover{text-decoration:underline}
+  @media(prefers-color-scheme:dark){
+    .auth-logo-mark{background:#1e3a5f}
+    .auth-card{background:#1a1a1a;border-color:#334155;box-shadow:0 4px 24px rgba(0,0,0,0.4)}
+    .auth-google-btn{background:#1a1a1a;border-color:#334155;color:#f1f5f9}
+    .auth-google-btn:hover{background:#2d2d2d}
+    .auth-input{background:#1a1a1a;border-color:#334155;color:#f1f5f9}
+    .auth-submit{background:#1e3a5f}
+    .auth-submit:hover:not(:disabled){background:#1e293b}
+  }
+</style>`;
+
+export const GOOGLE_SVG = `<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z"/><path fill="#FBBC05" d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706s.102-1.166.282-1.706V4.962H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.038l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.962L3.964 7.294C4.672 5.167 6.656 3.58 9 3.58z"/></svg>`;
+
+export const WARN_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+
+export const LOGO_SVG = `<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m4.24-4.24l4.24-4.24"/></svg>`;
+
+export const authLogoHtml = (subtitle) => `
+  <div class="auth-logo">
+    <div class="auth-logo-mark">${LOGO_SVG}</div>
+    <span class="auth-logo-name">MOONLANDING</span>
+    <div class="auth-logo-sub">${subtitle}</div>
+  </div>`;

package/src/ui/client.js

@@ -0,0 +1,99 @@
+import { createElement, applyDiff } from 'webjsx';
+
+export { createElement, applyDiff };
+
+export function showToast(message, type = 'info') {
+  let container = document.getElementById('toast-container');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'toast-container';
+    container.className = 'toast-container';
+    document.body.appendChild(container);
+  }
+  const toast = document.createElement('div');
+  toast.className = 'toast toast-' + type;
+  toast.textContent = message;
+  toast.style.cssText = 'position:relative'; // Ensure proper stacking on mobile
+  container.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+export function showDialog(id) {
+  const el = document.getElementById(id);
+  if (el) {
+    el.style.display = 'flex';
+    const focusable = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (focusable) setTimeout(() => focusable.focus(), 100);
+  }
+}
+
+export function hideDialog(id) {
+  const el = document.getElementById(id);
+  if (el) el.style.display = 'none';
+}
+
+export async function submitForm(formId, url, method = 'POST') {
+  const form = document.getElementById(formId);
+  if (!form) return;
+  const fd = new FormData(form);
+  const data = {};
+  for (const [k, v] of fd.entries()) data[k] = v;
+  form.querySelectorAll('input[type=checkbox]').forEach(cb => {
+    data[cb.name] = cb.checked;
+  });
+  form.querySelectorAll('input[type=number]').forEach(inp => {
+    if (inp.name && data[inp.name] !== undefined && data[inp.name] !== '')
+      data[inp.name] = Number(data[inp.name]);
+  });
+  try {
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    });
+    const result = await res.json().catch(() => ({}));
+    if (res.ok) {
+      showToast(method === 'POST' ? 'Created' : 'Updated', 'success');
+      return { ok: true, data: result.data || result };
+    }
+    showToast(result.message || result.error || 'Save failed', 'error');
+    return { ok: false, data: result };
+  } catch (err) {
+    showToast('Error: ' + err.message, 'error');
+    return { ok: false, error: err };
+  }
+}
+
+export async function confirmDelete(url, redirectUrl) {
+  if (!confirm('Are you sure you want to delete this?')) return false;
+  try {
+    const res = await fetch(url, { method: 'DELETE' });
+    if (res.ok) {
+      showToast('Deleted', 'success');
+      if (redirectUrl) setTimeout(() => { window.location = redirectUrl; }, 500);
+      return true;
+    }
+    const d = await res.json().catch(() => ({}));
+    showToast(d.message || d.error || 'Delete failed', 'error');
+    return false;
+  } catch (err) {
+    showToast('Error: ' + err.message, 'error');
+    return false;
+  }
+}
+
+export function toggleElement(id) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.style.display = el.style.display === 'none' ? '' : 'none';
+}
+
+window.showToast = showToast;
+window.showDialog = showDialog;
+window.hideDialog = hideDialog;
+window.submitForm = submitForm;
+window.confirmDelete = confirmDelete;
+window.toggleElement = toggleElement;

package/src/ui/collaboration-dialogs.js

@@ -0,0 +1,31 @@
+export function collaboratorManagementDialog(entityType, entityId) {
+  return `<div id="collab-mgmt-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="collab-mgmt-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:640px">
+      <div class="dialog-header"><span class="dialog-title" id="collab-mgmt-dialog-title">Manage Collaborators</span><button class="dialog-close" data-dialog-close="collab-mgmt-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div id="cmd-list" class="flex flex-col gap-2" style="max-height:300px;overflow:auto"><div class="text-gray-500 text-sm text-center py-4">Loading...</div></div>
+        <div class="inline-form" style="margin-top:1rem">
+          <div class="inline-form-row">
+            <div class="inline-form-field" style="flex:1"><label for="cmd-email">Email</label><input type="email"  id="cmd-email" class="input input-bordered input-sm w-full" placeholder="collaborator@example.com"/></div>
+            <div class="inline-form-field"><label for="cmd-role">Role</label><select id="cmd-role" class="select select-bordered select-sm"><option value="viewer">Viewer</option><option value="commenter">Commenter</option><option value="reviewer" selected>Reviewer</option><option value="manager">Manager</option></select></div>
+            <div class="inline-form-field"><label>&nbsp;</label><button class="btn btn-primary btn-sm" data-action="cmdAdd">Add</button></div>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="collab-mgmt-dialog">Close</button></div>
+    </div></div>
+  <script>
+  window.openCollabMgmt=function(){document.getElementById('collab-mgmt-dialog').style.display='flex';cmdLoad()};
+  async function cmdLoad(){var c=document.getElementById('cmd-list');c.innerHTML='<div class="text-gray-500 text-sm text-center py-2">Loading...</div>';try{var res=await fetch('/api/collaborator?${entityType}_id=${entityId}');var d=await res.json();var items=d.data||d||[];c.innerHTML='';if(!items.length){c.innerHTML='<div class="text-gray-500 text-sm text-center py-2">No collaborators</div>';return}items.forEach(function(item){var div=document.createElement('div');div.className='flex items-center justify-between gap-2';div.style.padding='0.5rem 0';div.style.borderBottom='1px solid #f3f4f6';var expired=item.expires_at&&item.expires_at<=Math.floor(Date.now()/1000);var expiryText=item.expires_at?'Expires: '+new Date(item.expires_at*1000).toLocaleDateString():'Permanent';if(expired)expiryText='<span style="color:#ef4444">Expired</span>';div.innerHTML='<div><div class="text-sm font-medium">'+(item.email||item.name||'Unknown')+'</div><div class="text-xs text-gray-500">'+(item.role_type||item.access_type||'viewer')+' &middot; '+expiryText+'</div></div><div class="flex gap-1"><button class="btn btn-xs btn-ghost" data-action="cmdExtend" data-args='["'+item.id+'"]'>Extend</button><button class="btn btn-xs btn-error btn-outline" data-action="cmdRevoke" data-args='["'+item.id+'"]'>Revoke</button></div>';c.appendChild(div)})}catch(e){c.innerHTML='<div class="text-red-500 text-sm text-center">Error loading</div>'}}
+  window.cmdAdd=async function(){var email=document.getElementById('cmd-email').value.trim();var role=document.getElementById('cmd-role').value;if(!email){showToast('Email required','error');return}try{var r=await fetch('/api/collaborator',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,role_type:role,${entityType}_id:'${entityId}'})});if(r.ok){showToast('Collaborator added','success');document.getElementById('cmd-email').value='';cmdLoad()}else{var d=await r.json().catch(function(){return{}});showToast(d.error||'Failed','error')}}catch(e){showToast('Error','error')}};
+  window.cmdRevoke=async function(id){if(!confirm('Revoke access?'))return;try{var r=await fetch('/api/collaborator/'+id,{method:'DELETE'});if(r.ok){showToast('Revoked','success');cmdLoad()}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  window.cmdExtend=async function(id){var days=prompt('Extend by how many days?','7');if(!days)return;var ts=Math.floor(Date.now()/1000)+Number(days)*86400;try{var r=await fetch('/api/collaborator/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({expires_at:ts})});if(r.ok){showToast('Extended','success');cmdLoad()}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+
+export function collaboratorExpiryUI(entityType, entityId) {
+  return `<div class="card-clean" style="margin-bottom:1rem"><div class="card-clean-body"><div class="flex justify-between items-center"><h3 style="font-size:0.875rem;font-weight:600">Collaborator Access</h3><button class="btn btn-outline btn-sm" data-action="openCollabMgmt">Manage</button></div><div id="collab-expiry-list" class="mt-3 flex flex-col gap-1"></div></div></div>
+  <script>
+  (function(){fetch('/api/collaborator?${entityType}_id=${entityId}').then(function(r){return r.json()}).then(function(d){var items=d.data||d||[];var el=document.getElementById('collab-expiry-list');var now=Math.floor(Date.now()/1000);var expiring=items.filter(function(c){return c.expires_at&&c.expires_at>now&&c.expires_at-now<3*86400});var expired=items.filter(function(c){return c.expires_at&&c.expires_at<=now});if(!expiring.length&&!expired.length){el.innerHTML='<div class="text-xs text-gray-500">All access current</div>';return}var html='';expired.forEach(function(c){html+='<div class="text-xs" style="color:#ef4444">'+c.email+' - Expired</div>'});expiring.forEach(function(c){var days=Math.ceil((c.expires_at-now)/86400);html+='<div class="text-xs" style="color:#f59e0b">'+c.email+' - Expires in '+days+'d</div>'});el.innerHTML=html}).catch(function(){})})();
+  </script>`;
+}

package/src/ui/common-handlers.js

@@ -0,0 +1,156 @@
+export const commonHandlers = {
+  dialogs: {
+    close(dialogId) {
+      const el = document.getElementById(dialogId);
+      if (el) el.style.display = 'none';
+    },
+    open(dialogId, display = 'flex') {
+      const el = document.getElementById(dialogId);
+      if (el) el.style.display = display;
+    },
+    toggle(dialogId) {
+      const el = document.getElementById(dialogId);
+      if (el) el.style.display = el.style.display === 'none' ? 'flex' : 'none';
+    }
+  },
+
+  nav: {
+    go(path) { window.location = path; },
+    external(url) { window.open(url, '_blank'); },
+    back() { window.history.back(); }
+  },
+
+  forms: {
+    reset(formId) {
+      const form = document.getElementById(formId);
+      if (form?.reset) form.reset();
+    },
+    submit(formId) {
+      const form = document.getElementById(formId);
+      if (form) form.dispatchEvent(new Event('submit', { bubbles: true }));
+    },
+    disable(formId) {
+      const form = document.getElementById(formId);
+      if (form) {
+        form.querySelectorAll('input, button, select, textarea').forEach(el => el.disabled = true);
+      }
+    },
+    enable(formId) {
+      const form = document.getElementById(formId);
+      if (form) {
+        form.querySelectorAll('input, button, select, textarea').forEach(el => el.disabled = false);
+      }
+    }
+  },
+
+  dom: {
+    show(id) { const el = document.getElementById(id); if (el) el.style.display = ''; },
+    hide(id) { const el = document.getElementById(id); if (el) el.style.display = 'none'; },
+    toggle(id) {
+      const el = document.getElementById(id);
+      if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
+    },
+    addClass(id, cls) {
+      const el = document.getElementById(id);
+      if (el) el.classList.add(...cls.split(' '));
+    },
+    removeClass(id, cls) {
+      const el = document.getElementById(id);
+      if (el) el.classList.remove(...cls.split(' '));
+    },
+    toggleClass(id, cls) {
+      const el = document.getElementById(id);
+      if (el) el.classList.toggle(cls);
+    },
+    setText(id, text) {
+      const el = document.getElementById(id);
+      if (el) el.textContent = text;
+    },
+    setHtml(id, html) {
+      const el = document.getElementById(id);
+      if (el) el.innerHTML = html;
+    },
+    getValue(id) {
+      const el = document.getElementById(id);
+      return el?.value || '';
+    },
+    setValue(id, value) {
+      const el = document.getElementById(id);
+      if (el) el.value = value;
+    },
+    focus(id) {
+      const el = document.getElementById(id);
+      if (el) el.focus();
+    },
+    remove(id) {
+      const el = document.getElementById(id);
+      if (el) el.remove();
+    }
+  },
+
+  selection: {
+    toggleCheckbox(id) {
+      const el = document.getElementById(id);
+      if (el?.type === 'checkbox') el.checked = !el.checked;
+    },
+    setChecked(id, checked) {
+      const el = document.getElementById(id);
+      if (el?.type === 'checkbox') el.checked = checked;
+    },
+    isChecked(id) {
+      const el = document.getElementById(id);
+      return el?.type === 'checkbox' && el.checked;
+    },
+    toggleActive(id) {
+      const el = document.getElementById(id);
+      if (el) el.classList.toggle('active');
+    }
+  },
+
+  data: {
+    getSelectedRows() {
+      return Array.from(document.querySelectorAll('input[data-row-select]:checked'))
+        .map(el => el.dataset.rowId);
+    },
+    clearSelections() {
+      document.querySelectorAll('input[data-row-select]').forEach(el => el.checked = false);
+    },
+    selectAll(selector = 'input[data-row-select]') {
+      document.querySelectorAll(selector).forEach(el => el.checked = true);
+    }
+  },
+
+  notify: {
+    show(message, type = 'info') {
+      if (typeof showToast === 'function') {
+        showToast(message, type);
+      }
+    },
+    success(message) { this.show(message, 'success'); },
+    error(message) { this.show(message, 'error'); },
+    warning(message) { this.show(message, 'warning'); },
+    info(message) { this.show(message, 'info'); }
+  },
+
+  keyboard: {
+    isEnter(event) { return event.key === 'Enter'; },
+    isEscape(event) { return event.key === 'Escape'; },
+    isSpace(event) { return event.key === ' '; },
+    preventDefault(event) { event.preventDefault(); event.stopPropagation(); }
+  },
+
+  utils: {
+    debounce(fn, delay = 300) {
+      let timer;
+      return function(...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn.apply(this, args), delay);
+      };
+    },
+    confirm(message) { return window.confirm(message); },
+    prompt(message, defaultValue = '') { return window.prompt(message, defaultValue); },
+    wait(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
+  }
+};
+
+export const { dialogs, nav, forms, dom, selection, data, notify, keyboard, utils } = commonHandlers;

package/src/ui/component-engine.js

@@ -0,0 +1,103 @@
+import { getConfigEngineSync } from '@/lib/config-generator-engine';
+
+function getComponentDefs() {
+  try {
+    const engine = getConfigEngineSync();
+    const config = engine.getConfig();
+    return config?.components || {};
+  } catch {
+    return {};
+  }
+}
+
+let componentDefs = getComponentDefs();
+
+export function renderComponent(componentId, props = {}) {
+  const def = componentDefs[componentId];
+  if (!def) throw new Error(`Component not found: ${componentId}`);
+
+  const errors = validateComponentProps(componentId, props);
+  if (errors.length > 0) throw new Error(`Invalid props for ${componentId}: ${errors.join(', ')}`);
+
+  let html = def.template;
+  Object.entries(props).forEach(([key, value]) => {
+    const regex = new RegExp(`{{${key}}}`, 'g');
+    if (value && typeof value === 'object') {
+      if (Array.isArray(value)) {
+        html = html.replace(regex, value.map(v => renderItem(v, key)).join(''));
+      } else {
+        html = html.replace(regex, JSON.stringify(value));
+      }
+    } else {
+      html = html.replace(regex, String(value ?? ''));
+    }
+  });
+
+  html = html.replace(/{{[^}]+}}/g, '');
+
+  const cssClass = def.class ? ` class="${def.class}"` : '';
+  const element = def.element || 'div';
+
+  return `<${element}${cssClass}>${html}</${element}>`;
+}
+
+function renderItem(item, key) {
+  if (typeof item === 'string') return item;
+  if (typeof item === 'object' && item.name && item.color) {
+    return `<span class="avatar-item" style="background:${item.color}">${item.name.charAt(0)}</span>`;
+  }
+  return String(item);
+}
+
+export function getComponentConfig(componentId) {
+  const def = componentDefs[componentId];
+  if (!def) throw new Error(`Component not found: ${componentId}`);
+  return { ...def };
+}
+
+export function validateComponentProps(componentId, props = {}) {
+  const def = componentDefs[componentId];
+  if (!def) throw new Error(`Component not found: ${componentId}`);
+
+  const errors = [];
+  const propDefs = def.properties || [];
+
+  propDefs.forEach(propDef => {
+    if (propDef.required && !(propDef.name in props)) {
+      errors.push(`Missing required property: ${propDef.name}`);
+    }
+
+    if (propDef.name in props && propDef.type) {
+      const value = props[propDef.name];
+      const actualType = Array.isArray(value) ? 'list' : typeof value;
+
+      if (propDef.type !== 'function' && actualType !== propDef.type) {
+        errors.push(`Invalid type for ${propDef.name}: expected ${propDef.type}, got ${actualType}`);
+      }
+
+      if (propDef.type === 'number' && typeof value === 'number') {
+        if ('min' in propDef && value < propDef.min) {
+          errors.push(`${propDef.name} below minimum: ${propDef.min}`);
+        }
+        if ('max' in propDef && value > propDef.max) {
+          errors.push(`${propDef.name} exceeds maximum: ${propDef.max}`);
+        }
+      }
+
+      if (propDef.type === 'enum' && propDef.options) {
+        if (!propDef.options.includes(value)) {
+          errors.push(`${propDef.name} not in allowed options: ${propDef.options.join(',')}`);
+        }
+      }
+    }
+  });
+
+  return errors;
+}
+
+export function getAvailableComponents() {
+  return Object.keys(componentDefs).map(id => ({
+    id,
+    ...componentDefs[id]
+  }));
+}