@portel/photon 1.6.1 → 1.8.0

package/dist/auto-ui/platform-compat.js.map

@@ -1 +1 @@
-{"version":3,"file":"platform-compat.js","sourceRoot":"","sources":["../../src/auto-ui/platform-compat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAG3E,0DAA0D;AAC1D,OAAO,EAQL,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AA0C7B,mFAAmF;AACnF,mCAAmC;AACnC,mFAAmF;AAEnF;;;GAGG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAwB;IACnE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO;;;;;;;;;cASK,WAAW;sBACH,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAwkB3B,CAAC;AACX,CAAC;AAED,mFAAmF;AACnF,oBAAoB;AACpB,mFAAmF"}
+{"version":3,"file":"platform-compat.js","sourceRoot":"","sources":["../../src/auto-ui/platform-compat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAG3E,0DAA0D;AAC1D,OAAO,EAQL,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AA0C7B,mFAAmF;AACnF,mCAAmC;AACnC,mFAAmF;AAEnF;;;GAGG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAwB;IACnE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO;;;;;;;;;cASK,WAAW;sBACH,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAklB3B,CAAC;AACX,CAAC;AAED,mFAAmF;AACnF,oBAAoB;AACpB,mFAAmF"}

package/dist/auto-ui/playground-html.js

@@ -690,20 +690,20 @@ export function generatePlaygroundHTML(options) {
 
       container.innerHTML = photons.map(photon => {
         const toolsHtml = photon.tools.map(t => \`
-          <div class="tool-item" data-tool="\${t.name}" data-photon="\${photon.name}">
+          <div class="tool-item" data-tool="\${escapeHtml(t.name)}" data-photon="\${escapeHtml(photon.name)}">
             <div class="tool-name">
-              \${t.name}
+              \${escapeHtml(t.name)}
               \${t.ui ? '<span class="ui-badge">UI</span>' : ''}
             </div>
-            <div class="tool-desc">\${t.description || 'No description'}</div>
+            <div class="tool-desc">\${escapeHtml(t.description || 'No description')}</div>
           </div>
         \`).join('');
 
         return \`
           <div class="photon-group">
-            <div class="photon-header" data-photon="\${photon.name}">
+            <div class="photon-header" data-photon="\${escapeHtml(photon.name)}">
               <span class="photon-toggle">▶</span>
-              <span class="photon-name">\${photon.name}</span>
+              <span class="photon-name">\${escapeHtml(photon.name)}</span>
               <span class="photon-count">\${photon.tools.length}</span>
             </div>
             <div class="photon-tools collapsed">

package/dist/auto-ui/rendering/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/rendering/components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,MAAM,CAAC;CACrF;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAiZ7C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgW7C"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/rendering/components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,MAAM,CAAC;CACrF;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAwrB7C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAinB7C"}

package/dist/auto-ui/rendering/components.js

@@ -385,6 +385,301 @@ export function generateComponentCSS() {
   color: var(--color-on-surface-variant);
 }
 
+/* Metric Component */
+.smart-metric {
+  text-align: center;
+  padding: var(--space-5) var(--space-4);
+}
+
+.smart-metric-value {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--color-on-surface);
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.smart-metric-label {
+  font-size: var(--text-body-sm);
+  color: var(--color-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: var(--space-1);
+}
+
+.smart-metric-delta {
+  display: inline-block;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-weight: 600;
+  margin-top: var(--space-2);
+}
+
+.smart-metric-delta.up { color: var(--color-success); }
+.smart-metric-delta.down { color: var(--color-error); }
+
+/* Gauge Component */
+.smart-gauge {
+  text-align: center;
+  padding: var(--space-4);
+}
+
+/* Timeline Component */
+.smart-timeline {
+  position: relative;
+  padding-left: var(--space-6);
+}
+
+.smart-timeline::before {
+  content: '';
+  position: absolute;
+  left: calc(var(--space-2) + 4px);
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--color-outline-variant);
+}
+
+.timeline-item {
+  position: relative;
+  padding: var(--space-2) 0 var(--space-2) var(--space-4);
+}
+
+.timeline-item::before {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--space-4));
+  top: calc(var(--space-2) + 6px);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  border: 2px solid var(--color-surface);
+}
+
+.timeline-item-title {
+  font-weight: var(--weight-semibold);
+  color: var(--color-on-surface);
+}
+
+.timeline-item-time {
+  font-size: var(--text-label-sm);
+  color: var(--color-on-surface-variant);
+}
+
+.timeline-item-description {
+  font-size: var(--text-body-sm);
+  color: var(--color-on-surface-variant);
+  margin-top: var(--space-1);
+}
+
+/* Dashboard Component */
+.smart-dashboard {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+
+.dashboard-panel {
+  background: var(--color-surface-container);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.dashboard-panel-header {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-label-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--color-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--color-outline-variant);
+}
+
+.dashboard-panel-content {
+  padding: var(--space-2);
+}
+
+/* Cart Component */
+.smart-cart-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-outline-variant, #334155);
+}
+
+.smart-cart-item:last-of-type {
+  border-bottom: none;
+}
+
+.smart-cart-item-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.smart-cart-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.smart-cart-item-name {
+  font-weight: 500;
+}
+
+.smart-cart-qty {
+  padding: 2px 8px;
+  background: rgba(255,255,255,0.05);
+  border-radius: 4px;
+  font-size: 0.8rem;
+  color: #94a3b8;
+}
+
+.smart-cart-line-total {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  min-width: 60px;
+  text-align: right;
+}
+
+.smart-cart-divider {
+  height: 1px;
+  background: var(--color-outline-variant, #334155);
+  margin: 8px 0;
+}
+
+.smart-cart-summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 12px;
+  font-size: 0.9rem;
+}
+
+.smart-cart-summary-row.total {
+  font-weight: 700;
+  font-size: 1rem;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-outline-variant, #334155);
+  margin-top: 4px;
+}
+
+/* Panels Container */
+.smart-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.smart-panels.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.smart-panels.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.smart-panels.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+.smart-panel {
+  border: 1px solid var(--color-outline-variant, #334155);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.smart-panel-header {
+  padding: 8px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--color-outline-variant, #334155);
+}
+
+.smart-panel-content {
+  padding: 8px;
+}
+
+/* Tabs Container */
+.smart-tabs-bar {
+  display: flex;
+  border-bottom: 1px solid var(--color-outline-variant, #334155);
+  margin-bottom: 12px;
+}
+
+.smart-tab {
+  padding: 8px 16px;
+  border-bottom: 2px solid transparent;
+  color: #64748b;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.smart-tab.active {
+  color: #6366f1;
+  border-bottom-color: #6366f1;
+}
+
+.smart-tab-content { display: none; }
+.smart-tab-content.active { display: block; }
+
+/* Accordion Container */
+.smart-accordion {
+  border: 1px solid var(--color-outline-variant, #334155);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.smart-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.02);
+  font-weight: 500;
+  border-bottom: 1px solid var(--color-outline-variant, #334155);
+}
+
+.smart-accordion-header:last-child { border-bottom: none; }
+.smart-accordion-body { display: none; padding: 8px 12px; }
+.smart-accordion-body.expanded { display: block; }
+
+/* Stack Container */
+.smart-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.smart-stack-item {
+  border: 1px solid var(--color-outline-variant, #334155);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.smart-stack-label {
+  padding: 6px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--color-outline-variant, #334155);
+}
+
+.smart-stack-content {
+  padding: 8px;
+}
+
+/* Columns Container */
+.smart-columns {
+  display: grid;
+  gap: 16px;
+}
+
+.smart-columns.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.smart-columns.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.smart-columns.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
 /* JSON Syntax Highlighting */
 .json-highlighted {
   margin: 0;
@@ -500,6 +795,29 @@ function renderSmartResult(data, format, layoutHints) {
       return typeof data === 'string' ? data : (data?.html || String(data));
     case 'code':
       return '<pre class="code-block">' + escapeHtml(String(data)) + '</pre>';
+    case 'metric':
+      return renderMetric(data);
+    case 'gauge':
+      return renderGauge(data);
+    case 'timeline':
+      return renderTimeline(data);
+    case 'dashboard':
+      return renderDashboard(data);
+    case 'cart':
+      return renderCart(data);
+    case 'panels':
+      return renderPanels(data, layoutHints);
+    case 'tabs':
+      return renderTabs(data, layoutHints);
+    case 'accordion':
+      return renderAccordion(data, layoutHints);
+    case 'stack':
+      return renderStack(data, layoutHints);
+    case 'columns':
+      return renderColumns(data, layoutHints);
+    case 'chart':
+      // Charts require Chart.js (only in Beam). Fallback to table/JSON in playground.
+      return '<pre class="json-highlighted">' + syntaxHighlightJson(data) + '</pre>';
     case 'json':
     default:
       return '<pre class="json-highlighted">' + syntaxHighlightJson(data) + '</pre>';
@@ -768,6 +1086,256 @@ function getStatusClass(value) {
   if (/pending|warning|waiting|processing/.test(lower)) return 'status-pending';
   return '';
 }
+
+function renderMetric(data) {
+  if (!data || typeof data !== 'object') {
+    if (typeof data === 'number') {
+      return '<div style="text-align:center;padding:24px;"><div style="font-size:3rem;font-weight:700;">' + data.toLocaleString() + '</div></div>';
+    }
+    return '<div>No metric data</div>';
+  }
+  var keys = Object.keys(data);
+  var numericKey = keys.find(function(k) { return typeof data[k] === 'number'; });
+  if (!numericKey) return '<pre class="json-highlighted">' + syntaxHighlightJson(data) + '</pre>';
+  var value = data[numericKey];
+  var label = data.label || data.name || data.title || (numericKey !== 'value' ? formatFieldLabel(numericKey) : '');
+  var delta = data.delta || data.change || data.diff;
+  var html = '<div style="text-align:center;padding:24px;">';
+  html += '<div style="font-size:3rem;font-weight:700;">' + value.toLocaleString() + '</div>';
+  if (label) html += '<div style="font-size:0.85rem;color:#64748b;text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;">' + escapeHtml(label) + '</div>';
+  if (delta) {
+    var color = String(delta).startsWith('+') ? '#16a34a' : String(delta).startsWith('-') ? '#dc2626' : '#64748b';
+    html += '<div style="display:inline-block;padding:2px 10px;border-radius:12px;margin-top:8px;font-weight:600;color:' + color + ';">' + escapeHtml(String(delta)) + '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderGauge(data) {
+  if (!data || typeof data !== 'object') return '<div>No gauge data</div>';
+  var value, min = 0, max = 100, label;
+  if ('progress' in data && typeof data.progress === 'number') {
+    value = data.progress * 100;
+    label = data.label || 'Progress';
+  } else {
+    value = data.value || 0;
+    min = data.min || 0;
+    max = data.max || 100;
+    label = data.label;
+  }
+  var pct = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));
+  var displayVal = data.progress !== undefined ? Math.round(value) + '%' : Math.round(value);
+  var html = '<div style="text-align:center;padding:16px;">';
+  html += '<div style="width:160px;margin:0 auto;">';
+  html += '<div style="position:relative;width:160px;height:12px;background:#334155;border-radius:6px;overflow:hidden;">';
+  html += '<div style="height:100%;width:' + pct + '%;background:linear-gradient(90deg,#22c55e,#eab308,#ef4444);border-radius:6px;transition:width 0.5s;"></div>';
+  html += '</div>';
+  html += '<div style="font-size:1.5rem;font-weight:700;margin-top:8px;">' + displayVal + '</div>';
+  if (label) html += '<div style="font-size:0.8rem;color:#64748b;text-transform:uppercase;">' + escapeHtml(label) + '</div>';
+  html += '</div></div>';
+  return html;
+}
+
+function renderTimeline(data) {
+  if (!Array.isArray(data) || data.length === 0) return '<div>No timeline data</div>';
+  var datePattern = /^(date|time|createdAt|updatedAt|created|updated|timestamp)/i;
+  var titlePattern = /^(title|event|name|label|subject|action)/i;
+  var descPattern = /^(description|details|body|content|message|summary)/i;
+  var sample = data[0];
+  var dateField, titleField, descField;
+  var fields = Object.keys(sample);
+  for (var i = 0; i < fields.length; i++) {
+    if (!dateField && datePattern.test(fields[i])) dateField = fields[i];
+    if (!titleField && titlePattern.test(fields[i])) titleField = fields[i];
+    if (!descField && descPattern.test(fields[i])) descField = fields[i];
+  }
+  var html = '<div style="position:relative;padding-left:24px;">';
+  html += '<div style="position:absolute;left:9px;top:0;bottom:0;width:2px;background:#334155;"></div>';
+  for (var j = 0; j < data.length; j++) {
+    var item = data[j];
+    html += '<div style="position:relative;padding:8px 0 8px 16px;">';
+    html += '<div style="position:absolute;left:-4px;top:14px;width:10px;height:10px;border-radius:50%;background:#6366f1;border:2px solid #0f172a;z-index:1;"></div>';
+    if (titleField) html += '<div style="font-weight:600;">' + escapeHtml(String(item[titleField])) + '</div>';
+    if (dateField) {
+      try { html += '<div style="font-size:0.75rem;color:#64748b;">' + new Date(item[dateField]).toLocaleString() + '</div>'; }
+      catch(e) { html += '<div style="font-size:0.75rem;color:#64748b;">' + escapeHtml(String(item[dateField])) + '</div>'; }
+    }
+    if (descField && item[descField]) html += '<div style="font-size:0.85rem;color:#94a3b8;margin-top:4px;">' + escapeHtml(String(item[descField])) + '</div>';
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderDashboard(data) {
+  if (!data || typeof data !== 'object') return '<div>No dashboard data</div>';
+  var keys = Object.keys(data);
+  var html = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;">';
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var val = data[key];
+    html += '<div style="border:1px solid #334155;border-radius:8px;overflow:hidden;">';
+    html += '<div style="padding:8px 12px;font-size:0.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid #334155;">' + formatFieldLabel(key) + '</div>';
+    html += '<div style="padding:8px;">';
+    if (typeof val === 'number') {
+      html += '<div style="text-align:center;padding:16px;font-size:2rem;font-weight:700;">' + val.toLocaleString() + '</div>';
+    } else if (Array.isArray(val)) {
+      html += renderSmartResult(val, null, null);
+    } else if (typeof val === 'object' && val !== null) {
+      if ('value' in val && typeof val.value === 'number') {
+        html += renderMetric(val);
+      } else if ('progress' in val && typeof val.progress === 'number') {
+        html += renderGauge(val);
+      } else {
+        html += renderSmartResult(val, null, null);
+      }
+    } else {
+      html += '<div style="padding:8px;">' + escapeHtml(String(val)) + '</div>';
+    }
+    html += '</div></div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderInnerContent(data, innerLayout) {
+  if (innerLayout) {
+    return renderSmartResult(data, innerLayout, null);
+  }
+  // Auto-detect
+  return renderSmartResult(data, null, null);
+}
+
+function renderCart(data) {
+  if (!data) return '<div>No cart data</div>';
+  var items, summary = {};
+  if (Array.isArray(data)) {
+    items = data;
+  } else {
+    items = data.items || [];
+    for (var k in data) {
+      if (k !== 'items' && typeof data[k] === 'number') summary[k] = data[k];
+    }
+  }
+  if (items.length === 0) return '<div>Cart is empty</div>';
+  var computedTotal = 0;
+  for (var i = 0; i < items.length; i++) {
+    var qty = items[i].quantity || items[i].qty || 1;
+    computedTotal += (items[i].price || 0) * qty;
+  }
+  if (Object.keys(summary).length === 0) summary = { total: computedTotal };
+  var html = '<div>';
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var qty = item.quantity || item.qty || 1;
+    var lineTotal = (item.price || 0) * qty;
+    var name = item.name || item.title || item.label || item.product || 'Item';
+    html += '<div class="smart-cart-item">';
+    if (item.image) html += '<img class="smart-cart-item-image" src="' + escapeHtml(item.image) + '" alt="">';
+    html += '<div class="smart-cart-item-info"><div class="smart-cart-item-name">' + escapeHtml(name) + '</div></div>';
+    if (qty > 1) html += '<span class="smart-cart-qty">&times;' + qty + '</span>';
+    html += '<span class="smart-cart-line-total">$' + lineTotal.toFixed(2) + '</span>';
+    html += '</div>';
+  }
+  html += '<div class="smart-cart-divider"></div>';
+  var summaryKeys = Object.keys(summary);
+  for (var i = 0; i < summaryKeys.length; i++) {
+    var sk = summaryKeys[i];
+    var isTotal = sk.toLowerCase() === 'total';
+    html += '<div class="smart-cart-summary-row' + (isTotal ? ' total' : '') + '">';
+    html += '<span>' + formatFieldLabel(sk) + '</span>';
+    html += '<span>$' + summary[sk].toFixed(2) + '</span>';
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderPanels(data, layoutHints) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return '<div>Panels require an object</div>';
+  var keys = Object.keys(data);
+  var cols = layoutHints && layoutHints.columns ? parseInt(layoutHints.columns) : 0;
+  var colsClass = cols >= 2 && cols <= 4 ? ' cols-' + cols : '';
+  var inner = layoutHints ? layoutHints.inner : null;
+  var html = '<div class="smart-panels' + colsClass + '">';
+  for (var i = 0; i < keys.length; i++) {
+    html += '<div class="smart-panel">';
+    html += '<div class="smart-panel-header">' + formatFieldLabel(keys[i]) + '</div>';
+    html += '<div class="smart-panel-content">' + renderInnerContent(data[keys[i]], inner) + '</div>';
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderTabs(data, layoutHints) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return '<div>Tabs require an object</div>';
+  var keys = Object.keys(data);
+  var inner = layoutHints ? layoutHints.inner : null;
+  var tabId = 'tabs-' + Math.random().toString(36).slice(2, 8);
+  var html = '<div>';
+  html += '<div class="smart-tabs-bar">';
+  for (var i = 0; i < keys.length; i++) {
+    html += '<div class="smart-tab' + (i === 0 ? ' active' : '') + '" onclick="(function(el){var bar=el.parentElement;var tabs=bar.parentElement.querySelectorAll(\\'.smart-tab-content\\');bar.querySelectorAll(\\'.smart-tab\\').forEach(function(t){t.classList.remove(\\'active\\')});el.classList.add(\\'active\\');tabs.forEach(function(t){t.classList.remove(\\'active\\')});tabs[' + i + '].classList.add(\\'active\\');})(this)">' + formatFieldLabel(keys[i]) + '</div>';
+  }
+  html += '</div>';
+  for (var i = 0; i < keys.length; i++) {
+    html += '<div class="smart-tab-content' + (i === 0 ? ' active' : '') + '">';
+    html += renderInnerContent(data[keys[i]], inner);
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderAccordion(data, layoutHints) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return '<div>Accordion requires an object</div>';
+  var keys = Object.keys(data);
+  var inner = layoutHints ? layoutHints.inner : null;
+  var html = '<div class="smart-accordion">';
+  for (var i = 0; i < keys.length; i++) {
+    var bodyId = 'acc-' + Math.random().toString(36).slice(2, 8);
+    html += '<div class="smart-accordion-header" onclick="var b=document.getElementById(\\'' + bodyId + '\\');b.classList.toggle(\\'expanded\\')">';
+    html += '<span>' + formatFieldLabel(keys[i]) + '</span><span>&#x25B6;</span>';
+    html += '</div>';
+    html += '<div id="' + bodyId + '" class="smart-accordion-body' + (i === 0 ? ' expanded' : '') + '">';
+    html += renderInnerContent(data[keys[i]], inner);
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderStack(data, layoutHints) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return '<div>Stack requires an object</div>';
+  var keys = Object.keys(data);
+  var inner = layoutHints ? layoutHints.inner : null;
+  var html = '<div class="smart-stack">';
+  for (var i = 0; i < keys.length; i++) {
+    html += '<div class="smart-stack-item">';
+    html += '<div class="smart-stack-label">' + formatFieldLabel(keys[i]) + '</div>';
+    html += '<div class="smart-stack-content">' + renderInnerContent(data[keys[i]], inner) + '</div>';
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function renderColumns(data, layoutHints) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return '<div>Columns require an object</div>';
+  var keys = Object.keys(data);
+  var cols = layoutHints && layoutHints.columns ? Math.min(Math.max(parseInt(layoutHints.columns), 2), 4) : Math.min(keys.length, 4);
+  var inner = layoutHints ? layoutHints.inner : null;
+  var html = '<div class="smart-columns cols-' + cols + '">';
+  for (var i = 0; i < keys.length; i++) {
+    html += '<div>';
+    html += '<div style="font-size:0.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;">' + formatFieldLabel(keys[i]) + '</div>';
+    html += renderInnerContent(data[keys[i]], inner);
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
 `;
 }
 //# sourceMappingURL=components.js.map

package/dist/auto-ui/rendering/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/auto-ui/rendering/components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAaH;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+YR,CAAC;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8VR,CAAC;AACF,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/auto-ui/rendering/components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAaH;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsrBR,CAAC;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+mBR,CAAC;AACF,CAAC"}