@vertesia/fusion-ux 1.2.0 → 1.4.0-dev.20260614.160504Z

package/src/fusion-fragment/FusionFragmentRenderer.tsx

@@ -3,91 +3,90 @@
  * Renders a model-generated template with actual data values
  */
 
-import { useMemo, type ReactElement } from 'react';
+import { type ReactElement, useMemo } from 'react';
 import type { FusionFragmentRendererProps, ValidationError } from '../types.js';
 import { validateTemplate } from '../validation/validateTemplate.js';
 import { SectionRenderer } from './SectionRenderer.js';
 
 const styles = {
-  container: {
-    backgroundColor: 'var(--gray-2, #f9fafb)',
-    border: '1px solid var(--gray-5, #e5e7eb)',
-    borderRadius: '8px',
-    padding: '16px 20px',
-  },
-  title: {
-    fontSize: '16px',
-    fontWeight: 600,
-    color: 'var(--gray-12, #1f2937)',
-    marginBottom: '16px',
-    paddingBottom: '12px',
-    borderBottom: '1px solid var(--gray-5, #e5e7eb)',
-  },
-  footer: {
-    fontSize: '12px',
-    color: 'var(--gray-10, #9ca3af)',
-    marginTop: '16px',
-    paddingTop: '12px',
-    borderTop: '1px solid var(--gray-5, #e5e7eb)',
-  },
-  error: {
-    backgroundColor: 'var(--red-2, #fef2f2)',
-    border: '1px solid var(--red-6, #fca5a5)',
-    borderRadius: '8px',
-    padding: '16px',
-  },
-  errorTitle: {
-    fontSize: '14px',
-    fontWeight: 600,
-    color: 'var(--red-11, #dc2626)',
-    marginBottom: '12px',
-  },
-  errorList: {
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-  },
-  errorItem: {
-    fontSize: '13px',
-    color: 'var(--red-11, #dc2626)',
-    marginBottom: '8px',
-    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-  },
-  errorPath: {
-    fontSize: '11px',
-    color: 'var(--red-9, #ef4444)',
-    display: 'block',
-  },
-  errorSuggestion: {
-    fontSize: '12px',
-    color: 'var(--gray-11, #6b7280)',
-    marginTop: '4px',
-    fontStyle: 'italic',
-  },
+    container: {
+        backgroundColor: 'var(--gray-2, #f9fafb)',
+        border: '1px solid var(--gray-5, #e5e7eb)',
+        borderRadius: '8px',
+        padding: '16px 20px',
+    },
+    title: {
+        fontSize: '16px',
+        fontWeight: 600,
+        color: 'var(--gray-12, #1f2937)',
+        marginBottom: '16px',
+        paddingBottom: '12px',
+        borderBottom: '1px solid var(--gray-5, #e5e7eb)',
+    },
+    footer: {
+        fontSize: '12px',
+        color: 'var(--gray-10, #9ca3af)',
+        marginTop: '16px',
+        paddingTop: '12px',
+        borderTop: '1px solid var(--gray-5, #e5e7eb)',
+    },
+    error: {
+        backgroundColor: 'var(--red-2, #fef2f2)',
+        border: '1px solid var(--red-6, #fca5a5)',
+        borderRadius: '8px',
+        padding: '16px',
+    },
+    errorTitle: {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: 'var(--red-11, #dc2626)',
+        marginBottom: '12px',
+    },
+    errorList: {
+        listStyle: 'none',
+        padding: 0,
+        margin: 0,
+    },
+    errorItem: {
+        fontSize: '13px',
+        color: 'var(--red-11, #dc2626)',
+        marginBottom: '8px',
+        fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+    },
+    errorPath: {
+        fontSize: '11px',
+        color: 'var(--red-9, #ef4444)',
+        display: 'block',
+    },
+    errorSuggestion: {
+        fontSize: '12px',
+        color: 'var(--gray-11, #6b7280)',
+        marginTop: '4px',
+        fontStyle: 'italic',
+    },
 };
 
 /**
  * Component to display validation errors
  */
 function ValidationErrors({ errors }: { errors: ValidationError[] }): ReactElement {
-  return (
-    <div style={styles.error}>
-      <div style={styles.errorTitle}>
-        Template Validation Failed ({errors.length} error{errors.length > 1 ? 's' : ''})
-      </div>
-      <ul style={styles.errorList}>
-        {errors.map((error, index) => (
-          <li key={index} style={styles.errorItem}>
-            <span>{error.message}</span>
-            <span style={styles.errorPath}>at {error.path}</span>
-            {error.suggestion && (
-              <span style={styles.errorSuggestion}>\u2192 {error.suggestion}</span>
-            )}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
+    return (
+        <div style={styles.error}>
+            <div style={styles.errorTitle}>
+                Template Validation Failed ({errors.length} error{errors.length > 1 ? 's' : ''})
+            </div>
+            <ul style={styles.errorList}>
+                {errors.map((error, index) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
+                    <li key={index} style={styles.errorItem}>
+                        <span>{error.message}</span>
+                        <span style={styles.errorPath}>at {error.path}</span>
+                        {error.suggestion && <span style={styles.errorSuggestion}>\u2192 {error.suggestion}</span>}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 /**
@@ -115,42 +114,38 @@ function ValidationErrors({ errors }: { errors: ValidationError[] }): ReactEleme
  * ```
  */
 export function FusionFragmentRenderer({
-  template,
-  data,
-  onUpdate,
-  agentMode,
-  className,
+    template,
+    data,
+    onUpdate,
+    agentMode,
+    className,
 }: FusionFragmentRendererProps): ReactElement {
-  // Validate template against data keys
-  const validation = useMemo(() => {
-    const dataKeys = Object.keys(data);
-    return validateTemplate(template, dataKeys);
-  }, [template, data]);
+    // Validate template against data keys
+    const validation = useMemo(() => {
+        const dataKeys = Object.keys(data);
+        return validateTemplate(template, dataKeys);
+    }, [template, data]);
 
-  // Show validation errors if any
-  if (!validation.valid) {
-    return <ValidationErrors errors={validation.errors} />;
-  }
+    // Show validation errors if any
+    if (!validation.valid) {
+        return <ValidationErrors errors={validation.errors} />;
+    }
 
-  return (
-    <div style={styles.container} className={className}>
-      {template.title && (
-        <div style={styles.title}>{template.title}</div>
-      )}
+    return (
+        <div style={styles.container} className={className}>
+            {template.title && <div style={styles.title}>{template.title}</div>}
 
-      {template.sections.map((section, index) => (
-        <SectionRenderer
-          key={section.title || index}
-          section={section}
-          data={data}
-          onUpdate={onUpdate}
-          agentMode={agentMode}
-        />
-      ))}
+            {template.sections.map((section, index) => (
+                <SectionRenderer
+                    key={section.title || index}
+                    section={section}
+                    data={data}
+                    onUpdate={onUpdate}
+                    agentMode={agentMode}
+                />
+            ))}
 
-      {template.footer && (
-        <div style={styles.footer}>{template.footer}</div>
-      )}
-    </div>
-  );
+            {template.footer && <div style={styles.footer}>{template.footer}</div>}
+        </div>
+    );
 }

package/src/fusion-fragment/SectionRenderer.tsx

@@ -3,193 +3,198 @@
  * Renders a section with grid layout and collapsible behavior
  */
 
-import { useState, useMemo, type ReactElement } from 'react';
+import { type ReactElement, useMemo, useState } from 'react';
 import type { SectionRendererProps } from '../types.js';
+import { ChartRenderer } from './ChartRenderer.js';
 import { FieldRenderer } from './FieldRenderer.js';
 import { TableRenderer } from './TableRenderer.js';
-import { ChartRenderer } from './ChartRenderer.js';
 
 // Layout grid configurations
 const gridLayouts = {
-  'grid-2': {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: '16px',
-  },
-  'grid-3': {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gap: '16px',
-  },
-  'grid-4': {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(4, 1fr)',
-    gap: '16px',
-  },
-  list: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: '12px',
-  },
+    'grid-2': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '16px',
+    },
+    'grid-3': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '16px',
+    },
+    'grid-4': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '16px',
+    },
+    list: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: '12px',
+    },
 };
 
 const styles = {
-  section: {
-    marginBottom: '20px',
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    marginBottom: '12px',
-    cursor: 'default',
-  },
-  headerCollapsible: {
-    cursor: 'pointer',
-    userSelect: 'none' as const,
-  },
-  title: {
-    fontSize: '11px',
-    fontWeight: 600,
-    color: 'var(--gray-11, #6b7280)',
-    textTransform: 'uppercase' as const,
-    letterSpacing: '0.5px',
-  },
-  chevron: {
-    width: '14px',
-    height: '14px',
-    color: 'var(--gray-10, #9ca3af)',
-    transition: 'transform 0.2s',
-  },
-  chevronCollapsed: {
-    transform: 'rotate(-90deg)',
-  },
-  content: {
-    overflow: 'hidden',
-    transition: 'max-height 0.2s ease-out',
-  },
-  contentCollapsed: {
-    maxHeight: '0',
-    opacity: 0,
-  },
-  contentExpanded: {
-    maxHeight: '2000px', // Large enough for most content
-    opacity: 1,
-  },
-  divider: {
-    height: '1px',
-    backgroundColor: 'var(--gray-5, #e5e7eb)',
-    marginTop: '16px',
-  },
+    section: {
+        marginBottom: '20px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        marginBottom: '12px',
+        cursor: 'default',
+    },
+    headerCollapsible: {
+        cursor: 'pointer',
+        userSelect: 'none' as const,
+    },
+    title: {
+        fontSize: '11px',
+        fontWeight: 600,
+        color: 'var(--gray-11, #6b7280)',
+        textTransform: 'uppercase' as const,
+        letterSpacing: '0.5px',
+    },
+    chevron: {
+        width: '14px',
+        height: '14px',
+        color: 'var(--gray-10, #9ca3af)',
+        transition: 'transform 0.2s',
+    },
+    chevronCollapsed: {
+        transform: 'rotate(-90deg)',
+    },
+    content: {
+        overflow: 'hidden',
+        transition: 'max-height 0.2s ease-out',
+    },
+    contentCollapsed: {
+        maxHeight: '0',
+        opacity: 0,
+    },
+    contentExpanded: {
+        maxHeight: '2000px', // Large enough for most content
+        opacity: 1,
+    },
+    divider: {
+        height: '1px',
+        backgroundColor: 'var(--gray-5, #e5e7eb)',
+        marginTop: '16px',
+    },
 };
 
 // Simple chevron SVG component
 function ChevronIcon({ collapsed }: { collapsed: boolean }): ReactElement {
-  return (
-    <svg
-      style={{
-        ...styles.chevron,
-        ...(collapsed ? styles.chevronCollapsed : {}),
-      }}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="6 9 12 15 18 9" />
-    </svg>
-  );
+    return (
+        <svg
+            style={{
+                ...styles.chevron,
+                ...(collapsed ? styles.chevronCollapsed : {}),
+            }}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+        >
+            <polyline points="6 9 12 15 18 9" />
+        </svg>
+    );
 }
 
 /**
  * SectionRenderer component
  * Displays a section with title, optional collapse, and grid of fields
  */
-export function SectionRenderer({
-  section,
-  data,
-  onUpdate,
-  agentMode,
-}: SectionRendererProps): ReactElement {
-  const [isCollapsed, setIsCollapsed] = useState(section.collapsed ?? false);
-
-  const layout = section.layout || 'grid-3';
-  const isTable = layout === 'table';
-  const isChart = layout === 'chart';
-
-  const isCollapsible = section.collapsed !== undefined;
-
-  // Get table rows from data
-  const tableRows = useMemo(() => {
-    if (!isTable || !section.dataKey) return [];
-    const rows = data[section.dataKey];
-    return Array.isArray(rows) ? rows as Record<string, unknown>[] : [];
-  }, [isTable, section.dataKey, data]);
-
-  const headerStyle = useMemo(
-    () => ({
-      ...styles.header,
-      ...(isCollapsible ? styles.headerCollapsible : {}),
-    }),
-    [isCollapsible]
-  );
-
-  const contentStyle = useMemo(
-    () => ({
-      ...styles.content,
-      ...(isTable || isChart ? {} : gridLayouts[layout as keyof typeof gridLayouts]),
-      ...(isCollapsed ? styles.contentCollapsed : styles.contentExpanded),
-    }),
-    [isCollapsed, isTable, isChart, layout]
-  );
-
-  const handleHeaderClick = () => {
-    if (isCollapsible) {
-      setIsCollapsed(!isCollapsed);
-    }
-  };
-
-  // Render content based on layout type
-  const renderContent = () => {
-    if (isTable && section.columns) {
-      return <TableRenderer columns={section.columns} rows={tableRows} />;
-    }
-
-    if (isChart && section.chart) {
-      return <ChartRenderer chart={section.chart} data={data} />;
-    }
-
-    // Default: render fields
-    return section.fields?.map((field, index) => (
-      <FieldRenderer
-        key={field.key || index}
-        field={field}
-        value={data[field.key]}
-        onUpdate={
-          onUpdate ? (value) => onUpdate(field.key, value) : undefined
+export function SectionRenderer({ section, data, onUpdate, agentMode }: SectionRendererProps): ReactElement {
+    const [isCollapsed, setIsCollapsed] = useState(section.collapsed ?? false);
+
+    const layout = section.layout || 'grid-3';
+    const isTable = layout === 'table';
+    const isChart = layout === 'chart';
+
+    const isCollapsible = section.collapsed !== undefined;
+
+    // Get table rows from data
+    const tableRows = useMemo(() => {
+        if (!isTable || !section.dataKey) return [];
+        const rows = data[section.dataKey];
+        return Array.isArray(rows) ? (rows as Record<string, unknown>[]) : [];
+    }, [isTable, section.dataKey, data]);
+
+    const headerStyle = useMemo(
+        () => ({
+            ...styles.header,
+            ...(isCollapsible ? styles.headerCollapsible : {}),
+        }),
+        [isCollapsible],
+    );
+
+    const contentStyle = useMemo(
+        () => ({
+            ...styles.content,
+            ...(isTable || isChart ? {} : gridLayouts[layout as keyof typeof gridLayouts]),
+            ...(isCollapsed ? styles.contentCollapsed : styles.contentExpanded),
+        }),
+        [isCollapsed, isTable, isChart, layout],
+    );
+
+    const handleHeaderClick = () => {
+        if (isCollapsible) {
+            setIsCollapsed(!isCollapsed);
+        }
+    };
+
+    // Render content based on layout type
+    const renderContent = () => {
+        if (isTable && section.columns) {
+            return <TableRenderer columns={section.columns} rows={tableRows} />;
         }
-        agentMode={agentMode}
-      />
-    ));
-  };
-
-  return (
-    <div style={styles.section}>
-      <div
-        style={headerStyle}
-        onClick={handleHeaderClick}
-        role={isCollapsible ? 'button' : undefined}
-        aria-expanded={isCollapsible ? !isCollapsed : undefined}
-      >
-        {isCollapsible && <ChevronIcon collapsed={isCollapsed} />}
-        <span style={styles.title}>{section.title}</span>
-      </div>
-
-      <div style={contentStyle}>
-        {renderContent()}
-      </div>
-    </div>
-  );
+
+        if (isChart && section.chart) {
+            return <ChartRenderer chart={section.chart} data={data} />;
+        }
+
+        // Default: render fields
+        return section.fields?.map((field, index) => (
+            <FieldRenderer
+                key={field.key || index}
+                field={field}
+                value={data[field.key]}
+                onUpdate={onUpdate ? (value) => onUpdate(field.key, value) : undefined}
+                agentMode={agentMode}
+            />
+        ));
+    };
+
+    return (
+        <div style={styles.section}>
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: onClick is no-op when not collapsible; interactive role/keyboard only added when isCollapsible is true. */}
+            {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-expanded only emitted when role='button' is also set (both gated on isCollapsible). */}
+            <div
+                style={headerStyle}
+                onClick={handleHeaderClick}
+                onKeyDown={
+                    isCollapsible
+                        ? (e) => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                  e.preventDefault();
+                                  handleHeaderClick();
+                              }
+                          }
+                        : undefined
+                }
+                role={isCollapsible ? 'button' : undefined}
+                tabIndex={isCollapsible ? 0 : undefined}
+                aria-expanded={isCollapsible ? !isCollapsed : undefined}
+            >
+                {isCollapsible && <ChevronIcon collapsed={isCollapsed} />}
+                <span style={styles.title}>{section.title}</span>
+            </div>
+
+            <div style={contentStyle}>{renderContent()}</div>
+        </div>
+    );
 }