@portel/photon 1.4.1 → 1.6.0

package/dist/auto-ui/rendering/layout-selector.js

@@ -0,0 +1,352 @@
+/**
+ * Layout Selector - Auto-detect best layout for data
+ *
+ * Determines the optimal component/layout to render data based on:
+ * 1. Explicit @format annotation (highest priority)
+ * 2. Data shape (array vs object vs primitive)
+ * 3. Data content (has images -> grid, etc.)
+ */
+// Map legacy @format values to new layout types
+const FORMAT_TO_LAYOUT = {
+    table: 'list', // table -> list (smart rendering)
+    list: 'list',
+    grid: 'grid',
+    card: 'card',
+    kv: 'kv',
+    tree: 'tree',
+    json: 'json',
+    markdown: 'markdown',
+    mermaid: 'mermaid',
+    code: 'code',
+    text: 'text',
+    primitive: 'text',
+    chips: 'chips',
+    html: 'html',
+};
+/**
+ * Select the best layout type for given data
+ */
+export function selectLayout(data, format, hints) {
+    // 1. Explicit format takes precedence (backward compat)
+    if (format) {
+        // Handle code:language format
+        if (format.startsWith('code:'))
+            return 'code';
+        const layout = FORMAT_TO_LAYOUT[format] || 'json';
+        // Smart fallback: if list/table format but data is not an array, use card
+        if ((layout === 'list' || format === 'table') &&
+            !Array.isArray(data) &&
+            typeof data === 'object' &&
+            data !== null) {
+            return 'card';
+        }
+        return layout;
+    }
+    // 2. Null/undefined
+    if (data === null || data === undefined) {
+        return 'text';
+    }
+    // 3. Primitives
+    if (typeof data === 'string') {
+        // Check if it looks like markdown
+        if (hasMarkdownSyntax(data))
+            return 'markdown';
+        // Check if it looks like mermaid
+        if (data.trim().startsWith('graph ') || data.trim().startsWith('flowchart ')) {
+            return 'mermaid';
+        }
+        return 'text';
+    }
+    if (typeof data === 'number' || typeof data === 'boolean') {
+        return 'text';
+    }
+    // 4. Arrays
+    if (Array.isArray(data)) {
+        if (data.length === 0)
+            return 'text'; // Empty array
+        const first = data[0];
+        // Array of strings -> chips
+        if (typeof first === 'string') {
+            return 'chips';
+        }
+        // Array of objects
+        if (typeof first === 'object' && first !== null) {
+            // Check if items have image fields -> grid
+            if (hasImageFields(first)) {
+                return 'grid';
+            }
+            // Default: list
+            return 'list';
+        }
+        // Mixed or primitive arrays
+        return 'chips';
+    }
+    // 5. Objects
+    if (typeof data === 'object') {
+        // Check for special fields
+        if ('diagram' in data && typeof data.diagram === 'string') {
+            return 'mermaid';
+        }
+        // Check if deeply nested -> tree
+        if (isNested(data)) {
+            return 'tree';
+        }
+        // Flat object -> card (or kv for many fields)
+        const fieldCount = Object.keys(data).length;
+        if (fieldCount > 10) {
+            return 'kv'; // Too many fields for card
+        }
+        return 'card';
+    }
+    // Fallback
+    return 'json';
+}
+/**
+ * Check if object has fields that look like actual images (not just icon characters)
+ * We need to verify the VALUE looks like an image URL, not just the field name
+ */
+export function hasImageFields(obj) {
+    const imageFieldNames = /^(image|photo|thumbnail|picture|poster|cover)$/i;
+    const avatarFieldName = /^(avatar)$/i;
+    const imageUrlPattern = /\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i;
+    const dataUrlPattern = /^data:image\//i;
+    for (const [key, value] of Object.entries(obj)) {
+        // Skip non-string values
+        if (typeof value !== 'string')
+            continue;
+        // Check for image URL patterns in value
+        if (imageUrlPattern.test(value) || dataUrlPattern.test(value))
+            return true;
+        // For image field names (not avatar), check if value looks like a URL
+        if (imageFieldNames.test(key) && (value.startsWith('http') || value.startsWith('/'))) {
+            return true;
+        }
+        // For avatar fields specifically, only treat as image if it's actually a URL
+        // Single characters or short strings are icons, not images
+        if (avatarFieldName.test(key) &&
+            value.length > 10 &&
+            (value.startsWith('http') || value.startsWith('/'))) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Check if object is nested (has object/array values)
+ */
+export function isNested(obj, depth = 0) {
+    if (depth > 2)
+        return true; // Max depth check
+    for (const value of Object.values(obj)) {
+        if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'object') {
+            return true;
+        }
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            if (isNested(value, depth + 1))
+                return true;
+        }
+    }
+    return false;
+}
+/**
+ * Check if string contains markdown syntax
+ */
+export function hasMarkdownSyntax(text) {
+    // Check for common markdown patterns
+    const patterns = [
+        /^#{1,6}\s/m, // Headers
+        /\*\*[^*]+\*\*/, // Bold
+        /\*[^*]+\*/, // Italic
+        /\[[^\]]+\]\([^)]+\)/, // Links
+        /```[\s\S]*```/, // Code blocks
+        /^\s*[-*+]\s/m, // Lists
+        /^\s*\d+\.\s/m, // Numbered lists
+    ];
+    return patterns.some((p) => p.test(text));
+}
+/**
+ * Parse layout hints from nested JSDoc syntax
+ * Example: {@title name, @subtitle email, @style inset}
+ */
+export function parseLayoutHints(hintsString) {
+    const hints = {};
+    if (!hintsString)
+        return hints;
+    // Split by comma and parse each hint
+    const parts = hintsString.split(',').map((s) => s.trim());
+    for (const part of parts) {
+        // Match @key value or @key value:renderer
+        const match = part.match(/@(\w+)\s+([^:]+)(?::(\w+))?/);
+        if (match) {
+            const [, key, value, renderer] = match;
+            const cleanValue = value.trim();
+            switch (key) {
+                case 'title':
+                    hints.title = cleanValue;
+                    break;
+                case 'subtitle':
+                    hints.subtitle = cleanValue;
+                    break;
+                case 'icon':
+                    hints.icon = cleanValue;
+                    break;
+                case 'badge':
+                    hints.badge = cleanValue;
+                    break;
+                case 'detail':
+                    hints.detail = cleanValue;
+                    break;
+                case 'image':
+                    hints.image = cleanValue;
+                    break;
+                case 'style':
+                    hints.style = cleanValue;
+                    break;
+                case 'accessory':
+                    hints.accessory = cleanValue;
+                    break;
+                case 'columns':
+                    hints.columns = parseInt(cleanValue, 10);
+                    break;
+                case 'fields':
+                    hints.fields = cleanValue.split(/\s+/);
+                    break;
+            }
+        }
+    }
+    return hints;
+}
+/**
+ * Generate JavaScript code for layout selector (to embed in HTML)
+ */
+export function generateLayoutSelectorJS() {
+    return `
+// Layout Selector - Auto-detect best layout for data
+const FORMAT_TO_LAYOUT = {
+  'table': 'list',
+  'list': 'list',
+  'grid': 'grid',
+  'card': 'card',
+  'kv': 'kv',
+  'tree': 'tree',
+  'json': 'json',
+  'markdown': 'markdown',
+  'mermaid': 'mermaid',
+  'code': 'code',
+  'text': 'text',
+  'primitive': 'text',
+  'chips': 'chips',
+  'html': 'html',
+};
+
+function selectLayout(data, format, hints) {
+  if (format) {
+    if (format.startsWith('code:')) return 'code';
+    var layout = FORMAT_TO_LAYOUT[format] || 'json';
+    // Smart fallback: if list/table format but data is not an array, use card
+    if ((layout === 'list' || format === 'table') && !Array.isArray(data) && typeof data === 'object' && data !== null) {
+      return 'card';
+    }
+    return layout;
+  }
+
+  if (data === null || data === undefined) return 'text';
+
+  if (typeof data === 'string') {
+    if (hasMarkdownSyntax(data)) return 'markdown';
+    if (data.trim().startsWith('graph ') || data.trim().startsWith('flowchart ')) {
+      return 'mermaid';
+    }
+    return 'text';
+  }
+
+  if (typeof data === 'number' || typeof data === 'boolean') return 'text';
+
+  if (Array.isArray(data)) {
+    if (data.length === 0) return 'text';
+    const first = data[0];
+    if (typeof first === 'string') return 'chips';
+    if (typeof first === 'object' && first !== null) {
+      if (hasImageFields(first)) return 'grid';
+      return 'list';
+    }
+    return 'chips';
+  }
+
+  if (typeof data === 'object') {
+    if ('diagram' in data && typeof data.diagram === 'string') return 'mermaid';
+    if (isNested(data)) return 'tree';
+    const fieldCount = Object.keys(data).length;
+    if (fieldCount > 10) return 'kv';
+    return 'card';
+  }
+
+  return 'json';
+}
+
+function hasImageFields(obj) {
+  const imageFieldNames = /^(image|photo|thumbnail|picture|poster|cover)$/i;
+  const avatarFieldName = /^(avatar)$/i;
+  const imageUrlPattern = /\\.(jpg|jpeg|png|gif|webp|svg)(\\?.*)?$/i;
+  const dataUrlPattern = /^data:image\\//i;
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value !== 'string') continue;
+    if (imageUrlPattern.test(value) || dataUrlPattern.test(value)) return true;
+    if (imageFieldNames.test(key) && (value.startsWith('http') || value.startsWith('/'))) return true;
+    if (avatarFieldName.test(key) && value.length > 10 && (value.startsWith('http') || value.startsWith('/'))) return true;
+  }
+  return false;
+}
+
+function isNested(obj, depth = 0) {
+  if (depth > 2) return true;
+  for (const value of Object.values(obj)) {
+    if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'object') return true;
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      if (isNested(value, depth + 1)) return true;
+    }
+  }
+  return false;
+}
+
+function hasMarkdownSyntax(text) {
+  const patterns = [
+    /^#{1,6}\\s/m,
+    /\\*\\*[^*]+\\*\\*/,
+    /\\*[^*]+\\*/,
+    /\\[[^\\]]+\\]\\([^)]+\\)/,
+    /\`\`\`[\\s\\S]*\`\`\`/,
+    /^\\s*[-*+]\\s/m,
+    /^\\s*\\d+\\.\\s/m,
+  ];
+  return patterns.some(p => p.test(text));
+}
+
+function parseLayoutHints(hintsString) {
+  const hints = {};
+  if (!hintsString) return hints;
+  const parts = hintsString.split(',').map(s => s.trim());
+  for (const part of parts) {
+    const match = part.match(/@(\\w+)\\s+([^:]+)(?::(\\w+))?/);
+    if (match) {
+      const [, key, value, renderer] = match;
+      const cleanValue = value.trim();
+      switch (key) {
+        case 'title': hints.title = cleanValue; break;
+        case 'subtitle': hints.subtitle = cleanValue; break;
+        case 'icon': hints.icon = cleanValue; break;
+        case 'badge': hints.badge = cleanValue; break;
+        case 'detail': hints.detail = cleanValue; break;
+        case 'image': hints.image = cleanValue; break;
+        case 'style': hints.style = cleanValue; break;
+        case 'accessory': hints.accessory = cleanValue; break;
+        case 'columns': hints.columns = parseInt(cleanValue, 10); break;
+        case 'fields': hints.fields = cleanValue.split(/\\s+/); break;
+      }
+    }
+  }
+  return hints;
+}
+`;
+}
+//# sourceMappingURL=layout-selector.js.map

package/dist/auto-ui/rendering/layout-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-selector.js","sourceRoot":"","sources":["../../../src/auto-ui/rendering/layout-selector.ts"],"names":[],"mappings":"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"}

package/dist/auto-ui/rendering/template-engine.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Template Engine - Custom HTML Template Support
+ *
+ * Enables custom UI templates that map elements to class methods.
+ * Perfect for specialized interfaces like:
+ * - TV remote control
+ * - Numeric keypad
+ * - Dashboard with gauges
+ * - Media player controls
+ *
+ * Template Binding Attributes:
+ * - data-method: Method to call on click
+ * - data-args: JSON arguments to pass
+ * - data-result: Container for method output
+ * - data-bind: Live data binding
+ * - data-if: Conditional visibility
+ */
+export interface TemplateBinding {
+    element: string;
+    method: string;
+    args?: any;
+    event?: string;
+}
+export interface TemplateConfig {
+    id: string;
+    path: string;
+    bindings?: TemplateBinding[];
+}
+/**
+ * Parse template HTML and extract data-method bindings
+ */
+export declare function parseTemplateBindings(html: string): TemplateBinding[];
+/**
+ * Generate JavaScript for template engine (to embed in HTML)
+ */
+export declare function generateTemplateEngineJS(): string;
+/**
+ * Generate CSS for template engine
+ */
+export declare function generateTemplateEngineCSS(): string;
+//# sourceMappingURL=template-engine.d.ts.map

package/dist/auto-ui/rendering/template-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-engine.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/rendering/template-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,EAAE,CAWrE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CA0IjD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CA8DlD"}

package/dist/auto-ui/rendering/template-engine.js

@@ -0,0 +1,238 @@
+/**
+ * Template Engine - Custom HTML Template Support
+ *
+ * Enables custom UI templates that map elements to class methods.
+ * Perfect for specialized interfaces like:
+ * - TV remote control
+ * - Numeric keypad
+ * - Dashboard with gauges
+ * - Media player controls
+ *
+ * Template Binding Attributes:
+ * - data-method: Method to call on click
+ * - data-args: JSON arguments to pass
+ * - data-result: Container for method output
+ * - data-bind: Live data binding
+ * - data-if: Conditional visibility
+ */
+/**
+ * Parse template HTML and extract data-method bindings
+ */
+export function parseTemplateBindings(html) {
+    const bindings = [];
+    // Match elements with data-method attribute
+    const methodRegex = /data-method=["']([^"']+)["']/g;
+    const argsRegex = /data-args=["']([^"']+)["']/g;
+    // Note: This is a simplified parser - actual implementation
+    // would use DOM parsing in the browser
+    return bindings;
+}
+/**
+ * Generate JavaScript for template engine (to embed in HTML)
+ */
+export function generateTemplateEngineJS() {
+    return `
+// ==========================================================================
+// Template Engine - Custom UI Template Support
+// ==========================================================================
+
+/**
+ * Initialize template bindings for custom UI
+ * Finds all elements with data-method and binds click handlers
+ */
+function initTemplateBindings(container, invokeMethod) {
+  // Find all elements with data-method attribute
+  const methodElements = container.querySelectorAll('[data-method]');
+
+  methodElements.forEach(el => {
+    const methodName = el.getAttribute('data-method');
+    const argsStr = el.getAttribute('data-args');
+    const eventType = el.getAttribute('data-event') || 'click';
+
+    // Parse args if present
+    let args = {};
+    if (argsStr) {
+      try {
+        args = JSON.parse(argsStr);
+      } catch (e) {
+        console.warn('Invalid data-args JSON:', argsStr);
+      }
+    }
+
+    // Add event listener
+    el.addEventListener(eventType, async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Add loading state
+      el.classList.add('template-loading');
+
+      try {
+        // Invoke the method
+        const result = await invokeMethod(methodName, args);
+
+        // Find result container and update
+        const resultContainer = container.querySelector('[data-result]');
+        if (resultContainer && result !== undefined) {
+          // Use smart rendering for the result
+          const rendered = renderSmartResult(result, null, null);
+          if (rendered) {
+            resultContainer.innerHTML = rendered;
+          } else {
+            resultContainer.textContent = JSON.stringify(result, null, 2);
+          }
+        }
+      } catch (error) {
+        console.error('Template method error:', error);
+        const resultContainer = container.querySelector('[data-result]');
+        if (resultContainer) {
+          resultContainer.innerHTML = '<div class="template-error">' + escapeHtml(error.message) + '</div>';
+        }
+      } finally {
+        el.classList.remove('template-loading');
+      }
+    });
+  });
+
+  // Handle data-bind for live updates
+  const bindElements = container.querySelectorAll('[data-bind]');
+  bindElements.forEach(el => {
+    const bindKey = el.getAttribute('data-bind');
+    // Store reference for later updates
+    el._bindKey = bindKey;
+  });
+
+  // Handle data-if for conditional visibility
+  const ifElements = container.querySelectorAll('[data-if]');
+  ifElements.forEach(el => {
+    const condition = el.getAttribute('data-if');
+    el._ifCondition = condition;
+    // Initially hidden until condition is evaluated
+    el.style.display = 'none';
+  });
+}
+
+/**
+ * Update bound elements with new data
+ */
+function updateTemplateBindings(container, data) {
+  // Update data-bind elements
+  const bindElements = container.querySelectorAll('[data-bind]');
+  bindElements.forEach(el => {
+    const bindKey = el._bindKey || el.getAttribute('data-bind');
+    if (bindKey && data[bindKey] !== undefined) {
+      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
+        el.value = data[bindKey];
+      } else {
+        el.textContent = data[bindKey];
+      }
+    }
+  });
+
+  // Update data-if elements
+  const ifElements = container.querySelectorAll('[data-if]');
+  ifElements.forEach(el => {
+    const condition = el._ifCondition || el.getAttribute('data-if');
+    if (condition) {
+      // Evaluate condition against data
+      const value = data[condition];
+      el.style.display = value ? '' : 'none';
+    }
+  });
+}
+
+/**
+ * Load and render a custom template
+ */
+async function loadTemplate(templatePath, container, invokeMethod) {
+  try {
+    // Fetch template content
+    const response = await fetch('/api/template?path=' + encodeURIComponent(templatePath), {
+      signal: AbortSignal.timeout(10000), // 10s for template load
+    });
+    if (!response.ok) {
+      throw new Error('Failed to load template: ' + response.statusText);
+    }
+
+    const html = await response.text();
+    container.innerHTML = html;
+
+    // Initialize bindings
+    initTemplateBindings(container, invokeMethod);
+
+    return true;
+  } catch (error) {
+    console.error('Template load error:', error);
+    container.innerHTML = '<div class="template-error">Failed to load template: ' + escapeHtml(error.message) + '</div>';
+    return false;
+  }
+}
+`;
+}
+/**
+ * Generate CSS for template engine
+ */
+export function generateTemplateEngineCSS() {
+    return `
+/* Template Engine Styles */
+.template-loading {
+  opacity: 0.6;
+  pointer-events: none;
+  position: relative;
+}
+
+.template-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid var(--accent);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: template-spin 0.8s linear infinite;
+}
+
+@keyframes template-spin {
+  to { transform: rotate(360deg); }
+}
+
+.template-error {
+  color: var(--error);
+  padding: 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+
+/* Template button styles */
+[data-method] {
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+[data-method]:hover {
+  filter: brightness(1.1);
+}
+
+[data-method]:active {
+  transform: scale(0.98);
+}
+
+/* Result container */
+[data-result] {
+  min-height: 40px;
+  padding: 8px;
+  border-radius: 8px;
+  background: var(--bg-tertiary);
+}
+
+[data-result]:empty::before {
+  content: '—';
+  color: var(--text-muted);
+}
+`;
+}
+//# sourceMappingURL=template-engine.js.map

package/dist/auto-ui/rendering/template-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-engine.js","sourceRoot":"","sources":["../../../src/auto-ui/rendering/template-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAeH;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,MAAM,QAAQ,GAAsB,EAAE,CAAC;IAEvC,4CAA4C;IAC5C,MAAM,WAAW,GAAG,+BAA+B,CAAC;IACpD,MAAM,SAAS,GAAG,6BAA6B,CAAC;IAEhD,4DAA4D;IAC5D,uCAAuC;IAEvC,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIR,CAAC;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,yBAAyB;IACvC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DR,CAAC;AACF,CAAC"}