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

package/src/fusion-fragment/ChartRenderer.tsx

@@ -10,12 +10,12 @@ import type { ChartTemplate } from '../types.js';
 import { useFusionFragmentContextSafe } from './FusionFragmentContext.js';
 
 export interface ChartRendererProps {
-  /** Chart template configuration */
-  chart: ChartTemplate;
-  /** Data context for dataKey resolution */
-  data: Record<string, unknown>;
-  /** CSS class name */
-  className?: string;
+    /** Chart template configuration */
+    chart: ChartTemplate;
+    /** Data context for dataKey resolution */
+    data: Record<string, unknown>;
+    /** CSS class name */
+    className?: string;
 }
 
 /**
@@ -23,105 +23,104 @@ export interface ChartRendererProps {
  * If dataKey is provided, it merges data from context into the spec.
  * Uses the ChartComponent from FusionFragmentContext if available.
  */
-export function ChartRenderer({
-  chart,
-  data,
-  className
-}: ChartRendererProps): ReactElement {
-  const context = useFusionFragmentContextSafe();
-  const ChartComponent = context?.ChartComponent;
-  const artifactRunId = context?.artifactRunId;
+export function ChartRenderer({ chart, data, className }: ChartRendererProps): ReactElement {
+    const context = useFusionFragmentContextSafe();
+    const ChartComponent = context?.ChartComponent;
+    const artifactRunId = context?.artifactRunId;
 
-  // Resolve data from context if dataKey is provided
-  const resolvedSpec = { ...chart.spec };
+    // Resolve data from context if dataKey is provided
+    const resolvedSpec = { ...chart.spec };
 
-  if (chart.dataKey && data[chart.dataKey]) {
-    const chartData = data[chart.dataKey];
-    if (Array.isArray(chartData)) {
-      // Inject data into spec
-      resolvedSpec.data = { values: chartData as Record<string, unknown>[] };
+    if (chart.dataKey && data[chart.dataKey]) {
+        const chartData = data[chart.dataKey];
+        if (Array.isArray(chartData)) {
+            // Inject data into spec
+            resolvedSpec.data = { values: chartData as Record<string, unknown>[] };
+        }
     }
-  }
 
-  // Build the VegaLiteChartSpec format expected by @vertesia/ui
-  const vegaSpec = {
-    library: 'vega-lite' as const,
-    title: chart.title,
-    description: chart.description,
-    spec: resolvedSpec,
-    options: {
-      height: chart.height,
+    // Build the VegaLiteChartSpec format expected by @vertesia/ui
+    const vegaSpec = {
+        library: 'vega-lite' as const,
+        title: chart.title,
+        description: chart.description,
+        spec: resolvedSpec,
+        options: {
+            height: chart.height,
+        },
+    };
+
+    // If a ChartComponent is provided via context, use it to render the actual chart
+    if (ChartComponent) {
+        return (
+            <div className={className}>
+                <ChartComponent spec={vegaSpec} artifactRunId={artifactRunId} />
+            </div>
+        );
     }
-  };
 
-  // If a ChartComponent is provided via context, use it to render the actual chart
-  if (ChartComponent) {
+    // Fallback: render a placeholder with spec info when no ChartComponent is injected
     return (
-      <div className={className}>
-        <ChartComponent spec={vegaSpec} artifactRunId={artifactRunId} />
-      </div>
-    );
-  }
-
-  // Fallback: render a placeholder with spec info when no ChartComponent is injected
-  return (
-    <div
-      className={className}
-      style={{
-        padding: '16px',
-        backgroundColor: 'var(--gray-2, #f9fafb)',
-        border: '1px solid var(--gray-5, #e5e7eb)',
-        borderRadius: '8px',
-        minHeight: chart.height || 280
-      }}
-    >
-      {chart.title && (
         <div
-          style={{
-            fontSize: '14px',
-            fontWeight: 600,
-            marginBottom: '8px',
-            color: 'var(--gray-12, #111827)'
-          }}
+            className={className}
+            style={{
+                padding: '16px',
+                backgroundColor: 'var(--gray-2, #f9fafb)',
+                border: '1px solid var(--gray-5, #e5e7eb)',
+                borderRadius: '8px',
+                minHeight: chart.height || 280,
+            }}
         >
-          {chart.title}
-        </div>
-      )}
-      {chart.description && (
-        <div
-          style={{
-            fontSize: '12px',
-            color: 'var(--gray-11, #6b7280)',
-            marginBottom: '12px'
-          }}
-        >
-          {chart.description}
-        </div>
-      )}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: (chart.height || 280) - 60,
-          backgroundColor: 'var(--gray-3, #f3f4f6)',
-          borderRadius: '4px',
-          color: 'var(--gray-11, #6b7280)',
-          fontSize: '12px'
-        }}
-        data-vega-spec={JSON.stringify(vegaSpec)}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ marginBottom: '4px' }}>
-            Chart: {resolvedSpec.mark ? String(typeof resolvedSpec.mark === 'string' ? resolvedSpec.mark : resolvedSpec.mark.type) : 'composite'}
-          </div>
-          {resolvedSpec.data?.values && (
-            <div style={{ fontSize: '11px', opacity: 0.8 }}>
-              {resolvedSpec.data.values.length} data points
+            {chart.title && (
+                <div
+                    style={{
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        marginBottom: '8px',
+                        color: 'var(--gray-12, #111827)',
+                    }}
+                >
+                    {chart.title}
+                </div>
+            )}
+            {chart.description && (
+                <div
+                    style={{
+                        fontSize: '12px',
+                        color: 'var(--gray-11, #6b7280)',
+                        marginBottom: '12px',
+                    }}
+                >
+                    {chart.description}
+                </div>
+            )}
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: (chart.height || 280) - 60,
+                    backgroundColor: 'var(--gray-3, #f3f4f6)',
+                    borderRadius: '4px',
+                    color: 'var(--gray-11, #6b7280)',
+                    fontSize: '12px',
+                }}
+                data-vega-spec={JSON.stringify(vegaSpec)}
+            >
+                <div style={{ textAlign: 'center' }}>
+                    <div style={{ marginBottom: '4px' }}>
+                        Chart:{' '}
+                        {resolvedSpec.mark
+                            ? String(typeof resolvedSpec.mark === 'string' ? resolvedSpec.mark : resolvedSpec.mark.type)
+                            : 'composite'}
+                    </div>
+                    {resolvedSpec.data?.values && (
+                        <div style={{ fontSize: '11px', opacity: 0.8 }}>
+                            {resolvedSpec.data.values.length} data points
+                        </div>
+                    )}
+                </div>
             </div>
-          )}
         </div>
-      </div>
-    </div>
-  );
+    );
 }

package/src/fusion-fragment/FieldRenderer.tsx

@@ -3,197 +3,196 @@
  * Renders a single field with formatting and optional edit capability
  */
 
-import { useMemo, useState, useCallback, type ReactElement } from 'react';
+import { type ReactElement, useCallback, useMemo, useState } from 'react';
 import type { FieldRendererProps, FieldTemplate } from '../types.js';
 
 // Styles as constants
 const styles = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: '2px',
-    minWidth: 0, // Allow text truncation
-  },
-  label: {
-    fontSize: '11px',
-    fontWeight: 500,
-    color: 'var(--gray-11, #6b7280)',
-    textTransform: 'uppercase' as const,
-    letterSpacing: '0.5px',
-  },
-  value: {
-    fontSize: '14px',
-    fontWeight: 500,
-    color: 'var(--gray-12, #1f2937)',
-    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-    fontVariantNumeric: 'tabular-nums' as const,
-    letterSpacing: '-0.02em',
-  },
-  unit: {
-    fontSize: '12px',
-    color: 'var(--gray-10, #9ca3af)',
-    marginLeft: '4px',
-  },
-  highlight: {
-    success: { color: 'var(--green-11, #15803d)' },
-    warning: { color: 'var(--yellow-11, #ca8a04)' },
-    error: { color: 'var(--red-11, #dc2626)' },
-    info: { color: 'var(--blue-11, #2563eb)' },
-  },
-  editable: {
-    cursor: 'pointer',
-    padding: '2px 4px',
-    borderRadius: '4px',
-    transition: 'background-color 0.15s',
-  },
-  tooltip: {
-    position: 'relative' as const,
-  },
-  nullValue: {
-    color: 'var(--gray-9, #9ca3af)',
-    fontStyle: 'italic' as const,
-  },
+    container: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: '2px',
+        minWidth: 0, // Allow text truncation
+    },
+    label: {
+        fontSize: '11px',
+        fontWeight: 500,
+        color: 'var(--gray-11, #6b7280)',
+        textTransform: 'uppercase' as const,
+        letterSpacing: '0.5px',
+    },
+    value: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--gray-12, #1f2937)',
+        fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+        fontVariantNumeric: 'tabular-nums' as const,
+        letterSpacing: '-0.02em',
+    },
+    unit: {
+        fontSize: '12px',
+        color: 'var(--gray-10, #9ca3af)',
+        marginLeft: '4px',
+    },
+    highlight: {
+        success: { color: 'var(--green-11, #15803d)' },
+        warning: { color: 'var(--yellow-11, #ca8a04)' },
+        error: { color: 'var(--red-11, #dc2626)' },
+        info: { color: 'var(--blue-11, #2563eb)' },
+    },
+    editable: {
+        cursor: 'pointer',
+        padding: '2px 4px',
+        borderRadius: '4px',
+        transition: 'background-color 0.15s',
+    },
+    tooltip: {
+        position: 'relative' as const,
+    },
+    nullValue: {
+        color: 'var(--gray-9, #9ca3af)',
+        fontStyle: 'italic' as const,
+    },
 };
 
 /**
  * Format a value according to the field's format specification
  */
 function formatValue(value: unknown, field: FieldTemplate): string {
-  if (value === null || value === undefined) {
-    return '\u2014'; // em-dash for null/undefined
-  }
-
-  switch (field.format) {
-    case 'number': {
-      const num = typeof value === 'number' ? value : parseFloat(String(value));
-      if (isNaN(num)) return String(value);
-
-      const options: Intl.NumberFormatOptions = {
-        minimumFractionDigits: field.decimals ?? 0,
-        maximumFractionDigits: field.decimals ?? 2,
-      };
-      return new Intl.NumberFormat('en-US', options).format(num);
+    if (value === null || value === undefined) {
+        return '\u2014'; // em-dash for null/undefined
     }
 
-    case 'currency': {
-      const num = typeof value === 'number' ? value : parseFloat(String(value));
-      if (isNaN(num)) return String(value);
-
-      const options: Intl.NumberFormatOptions = {
-        style: 'currency',
-        currency: field.currency || 'USD',
-        minimumFractionDigits: field.decimals ?? 0,
-        maximumFractionDigits: field.decimals ?? 0,
-      };
-      return new Intl.NumberFormat('en-US', options).format(num);
+    switch (field.format) {
+        case 'number': {
+            const num = typeof value === 'number' ? value : parseFloat(String(value));
+            if (Number.isNaN(num)) return String(value);
+
+            const options: Intl.NumberFormatOptions = {
+                minimumFractionDigits: field.decimals ?? 0,
+                maximumFractionDigits: field.decimals ?? 2,
+            };
+            return new Intl.NumberFormat('en-US', options).format(num);
+        }
+
+        case 'currency': {
+            const num = typeof value === 'number' ? value : parseFloat(String(value));
+            if (Number.isNaN(num)) return String(value);
+
+            const options: Intl.NumberFormatOptions = {
+                style: 'currency',
+                currency: field.currency || 'USD',
+                minimumFractionDigits: field.decimals ?? 0,
+                maximumFractionDigits: field.decimals ?? 0,
+            };
+            return new Intl.NumberFormat('en-US', options).format(num);
+        }
+
+        case 'percent': {
+            const num = typeof value === 'number' ? value : parseFloat(String(value));
+            if (Number.isNaN(num)) return String(value);
+
+            // Assume value is already a percentage (e.g., 25 for 25%)
+            // If it's a decimal (e.g., 0.25), multiply by 100
+            const pct = num < 1 && num > -1 && num !== 0 ? num * 100 : num;
+            const decimals = field.decimals ?? 1;
+            return `${pct.toFixed(decimals)}%`;
+        }
+
+        case 'date': {
+            if (!value) return '\u2014';
+
+            const date = value instanceof Date ? value : new Date(String(value));
+            if (Number.isNaN(date.getTime())) return String(value);
+
+            return new Intl.DateTimeFormat('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            }).format(date);
+        }
+
+        case 'boolean': {
+            const bool = typeof value === 'boolean' ? value : value === 'true' || value === '1';
+            return bool ? 'Yes' : 'No';
+        }
+        default:
+            return String(value);
     }
-
-    case 'percent': {
-      const num = typeof value === 'number' ? value : parseFloat(String(value));
-      if (isNaN(num)) return String(value);
-
-      // Assume value is already a percentage (e.g., 25 for 25%)
-      // If it's a decimal (e.g., 0.25), multiply by 100
-      const pct = num < 1 && num > -1 && num !== 0 ? num * 100 : num;
-      const decimals = field.decimals ?? 1;
-      return `${pct.toFixed(decimals)}%`;
-    }
-
-    case 'date': {
-      if (!value) return '\u2014';
-
-      const date = value instanceof Date ? value : new Date(String(value));
-      if (isNaN(date.getTime())) return String(value);
-
-      return new Intl.DateTimeFormat('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }).format(date);
-    }
-
-    case 'boolean': {
-      const bool = typeof value === 'boolean' ? value : value === 'true' || value === '1';
-      return bool ? 'Yes' : 'No';
-    }
-
-    case 'text':
-    default:
-      return String(value);
-  }
 }
 
 /**
  * FieldRenderer component
  * Displays a field with label, formatted value, and optional highlighting
  */
-export function FieldRenderer({
-  field,
-  value,
-  onUpdate,
-  agentMode,
-}: FieldRendererProps): ReactElement {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const formattedValue = useMemo(
-    () => formatValue(value, field),
-    [value, field]
-  );
-
-  const isNull = value === null || value === undefined;
-  const isEditable = field.editable && (onUpdate || agentMode);
-
-  const handleClick = useCallback(() => {
-    if (!isEditable) return;
-
-    if (agentMode?.enabled && agentMode.sendMessage) {
-      // Send message to agent for editing
-      agentMode.sendMessage(
-        `Please help me update the "${field.label}" field (key: ${field.key}). Current value: ${formattedValue}`
-      );
-    }
-    // Direct edit mode would go here (Phase 2)
-  }, [isEditable, agentMode, field, formattedValue]);
-
-  const valueStyle = useMemo(() => {
-    const base = { ...styles.value };
-
-    if (isNull) {
-      return { ...base, ...styles.nullValue };
-    }
-
-    if (field.highlight) {
-      return { ...base, ...styles.highlight[field.highlight] };
-    }
-
-    if (isEditable) {
-      return {
-        ...base,
-        ...styles.editable,
-        backgroundColor: isHovered ? 'var(--gray-3, #f3f4f6)' : 'transparent',
-      };
-    }
-
-    return base;
-  }, [isNull, field.highlight, isEditable, isHovered]);
-
-  return (
-    <div
-      style={styles.container}
-      title={field.tooltip}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={handleClick}
-      role={isEditable ? 'button' : undefined}
-      tabIndex={isEditable ? 0 : undefined}
-    >
-      <span style={styles.label}>{field.label}</span>
-      <span style={valueStyle}>
-        {formattedValue}
-        {field.unit && !isNull && (
-          <span style={styles.unit}>{field.unit}</span>
-        )}
-      </span>
-    </div>
-  );
+export function FieldRenderer({ field, value, onUpdate, agentMode }: FieldRendererProps): ReactElement {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const formattedValue = useMemo(() => formatValue(value, field), [value, field]);
+
+    const isNull = value === null || value === undefined;
+    const isEditable = field.editable && (onUpdate || agentMode);
+
+    const handleClick = useCallback(() => {
+        if (!isEditable) return;
+
+        if (agentMode?.enabled && agentMode.sendMessage) {
+            // Send message to agent for editing
+            agentMode.sendMessage(
+                `Please help me update the "${field.label}" field (key: ${field.key}). Current value: ${formattedValue}`,
+            );
+        }
+        // Direct edit mode would go here (Phase 2)
+    }, [isEditable, agentMode, field, formattedValue]);
+
+    const valueStyle = useMemo(() => {
+        const base = { ...styles.value };
+
+        if (isNull) {
+            return { ...base, ...styles.nullValue };
+        }
+
+        if (field.highlight) {
+            return { ...base, ...styles.highlight[field.highlight] };
+        }
+
+        if (isEditable) {
+            return {
+                ...base,
+                ...styles.editable,
+                backgroundColor: isHovered ? 'var(--gray-3, #f3f4f6)' : 'transparent',
+            };
+        }
+
+        return base;
+    }, [isNull, field.highlight, isEditable, isHovered]);
+
+    return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: hover handlers used for visual feedback only; interactive click+keyboard only added when isEditable is true.
+        <div
+            style={styles.container}
+            title={field.tooltip}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onClick={handleClick}
+            onKeyDown={
+                isEditable
+                    ? (e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              handleClick();
+                          }
+                      }
+                    : undefined
+            }
+            role={isEditable ? 'button' : undefined}
+            tabIndex={isEditable ? 0 : undefined}
+        >
+            <span style={styles.label}>{field.label}</span>
+            <span style={valueStyle}>
+                {formattedValue}
+                {field.unit && !isNull && <span style={styles.unit}>{field.unit}</span>}
+            </span>
+        </div>
+    );
 }