linecharts-demo 1.0.1

package/src/App.tsx

@@ -0,0 +1,965 @@
+import React, { useState, useRef, useMemo } from 'react';
+import {
+  LineChart,
+  MultiAxisLineChart,
+  SteppedLineChart,
+  SegmentedLineChart,
+  PointStyleLineChart,
+} from 'unisys-barcharts';
+
+// Unisys Design System Colors
+const colors = {
+  primary: '#003134',
+  secondary: '#007173',
+  accent: '#00E28B',
+  success: '#73EFBF',
+  warning: '#FFE085',
+  error: '#FC7673',
+  info: '#B2FFFF',
+  bgApp: '#E5EAEB',
+  bgHeader: '#E8EDED',
+  bgContent: '#F3F6F6',
+  textPrimary: '#003134',
+  textSecondary: '#007173',
+  textSupporting: '#555555',
+};
+
+type LineChartType = 'basic' | 'multi-axis' | 'stepped' | 'segmented' | 'point-style';
+type InterpolationMode = 'linear' | 'monotone' | 'step' | 'basis' | 'cardinal' | 'catmull-rom';
+type ThemeType = 'default' | 'dark' | 'pastel' | 'vibrant';
+
+interface DataPoint {
+  label: string;
+  value: number;
+  value2?: number;
+}
+
+const App: React.FC = () => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview');
+  const [copied, setCopied] = useState(false);
+  
+  // Chart configuration state
+  const [lineChartType, setLineChartType] = useState<LineChartType>('basic');
+  const [chartTitle, setChartTitle] = useState('My Custom Chart');
+  const [theme, setTheme] = useState<ThemeType>('default');
+  const [interpolation, setInterpolation] = useState<InterpolationMode>('monotone');
+  const [tension, setTension] = useState(0.4);
+  const [showPoints, setShowPoints] = useState(true);
+  const [fillArea, setFillArea] = useState(true);
+  const [showLegend, setShowLegend] = useState(true);
+  const [showSecondDataset, setShowSecondDataset] = useState(false);
+  const [steppedMode, setSteppedMode] = useState<'before' | 'after' | 'middle'>('after');
+  
+  // Data points
+  const [dataPoints, setDataPoints] = useState<DataPoint[]>([
+    { label: 'Jan', value: 400, value2: 300 },
+    { label: 'Feb', value: 300, value2: 400 },
+    { label: 'Mar', value: 600, value2: 350 },
+    { label: 'Apr', value: 800, value2: 500 },
+    { label: 'May', value: 500, value2: 600 },
+    { label: 'Jun', value: 700, value2: 450 },
+  ]);
+
+  const addDataPoint = () => {
+    const newLabel = `Point ${dataPoints.length + 1}`;
+    setDataPoints([...dataPoints, { label: newLabel, value: Math.floor(Math.random() * 500) + 100, value2: Math.floor(Math.random() * 500) + 100 }]);
+  };
+
+  const removeDataPoint = (index: number) => {
+    if (dataPoints.length > 2) {
+      setDataPoints(dataPoints.filter((_, i) => i !== index));
+    }
+  };
+
+  const updateDataPoint = (index: number, field: 'label' | 'value' | 'value2', value: string | number) => {
+    const newData = [...dataPoints];
+    if (field === 'label') {
+      newData[index].label = value as string;
+    } else if (field === 'value') {
+      newData[index].value = Number(value) || 0;
+    } else if (field === 'value2') {
+      newData[index].value2 = Number(value) || 0;
+    }
+    setDataPoints(newData);
+  };
+
+  // Generate dynamic code based on current configuration
+  const generatedCode = useMemo(() => {
+    const chartComponentMap: Record<LineChartType, string> = {
+      'basic': 'LineChart',
+      'multi-axis': 'MultiAxisLineChart',
+      'stepped': 'SteppedLineChart',
+      'segmented': 'SegmentedLineChart',
+      'point-style': 'PointStyleLineChart',
+    };
+    
+    const componentName = chartComponentMap[lineChartType];
+    const labels = dataPoints.map(d => `'${d.label}'`).join(', ');
+    const values = dataPoints.map(d => d.value).join(', ');
+    const values2 = dataPoints.map(d => d.value2 || 0).join(', ');
+    
+    let datasetsCode = '';
+    let extraProps = '';
+    
+    // Base dataset
+    const fillConfig = fillArea 
+      ? `{ enabled: true, opacity: 0.3 }` 
+      : `{ enabled: false }`;
+    
+    if (lineChartType === 'multi-axis') {
+      datasetsCode = `[
+    {
+      label: 'Dataset 1',
+      data: [${values}],
+      borderColor: '#007173',
+      fill: ${fillConfig},
+      yAxisID: 'y1',
+    },${showSecondDataset ? `
+    {
+      label: 'Dataset 2',
+      data: [${values2}],
+      borderColor: '#00E28B',
+      fill: { enabled: ${fillArea}, opacity: 0.2 },
+      yAxisID: 'y2',
+    },` : ''}
+  ]`;
+      extraProps = `
+  yAxes={[
+    { id: 'y1', position: 'left', title: { text: 'Dataset 1' } },${showSecondDataset ? `
+    { id: 'y2', position: 'right', title: { text: 'Dataset 2' } },` : ''}
+  ]}`;
+    } else if (lineChartType === 'stepped') {
+      datasetsCode = `[
+    {
+      label: 'Dataset 1',
+      data: [${values}],
+      borderColor: '#007173',
+      fill: ${fillConfig},
+    },${showSecondDataset ? `
+    {
+      label: 'Dataset 2',
+      data: [${values2}],
+      borderColor: '#00E28B',
+      fill: { enabled: ${fillArea}, opacity: 0.2 },
+    },` : ''}
+  ]`;
+      extraProps = `
+  stepped="${steppedMode}"`;
+    } else if (lineChartType === 'segmented') {
+      datasetsCode = `[
+    {
+      label: 'Dataset 1',
+      data: [${values}],
+      borderColor: '#007173',
+      fill: ${fillConfig},
+      segmentStyle: (ctx) => ({
+        borderColor: ctx.p1.value > ctx.p0.value ? '#73EFBF' : '#FC7673',
+      }),
+    },${showSecondDataset ? `
+    {
+      label: 'Dataset 2',
+      data: [${values2}],
+      borderColor: '#00E28B',
+      fill: { enabled: ${fillArea}, opacity: 0.2 },
+      segmentStyle: (ctx) => ({
+        borderColor: ctx.p1.value > ctx.p0.value ? '#73EFBF' : '#FC7673',
+      }),
+    },` : ''}
+  ]`;
+    } else if (lineChartType === 'point-style') {
+      datasetsCode = `[
+    {
+      label: 'Dataset 1',
+      data: [${values}],
+      borderColor: '#007173',
+      fill: ${fillConfig},
+      point: { pointStyle: 'circle', radius: 8, hoverRadius: 12 },
+    },${showSecondDataset ? `
+    {
+      label: 'Dataset 2',
+      data: [${values2}],
+      borderColor: '#00E28B',
+      fill: { enabled: ${fillArea}, opacity: 0.2 },
+      point: { pointStyle: 'triangle', radius: 8, hoverRadius: 12 },
+    },` : ''}
+  ]`;
+    } else {
+      datasetsCode = `[
+    {
+      label: 'Dataset 1',
+      data: [${values}],
+      borderColor: '#007173',
+      fill: ${fillConfig},
+    },${showSecondDataset ? `
+    {
+      label: 'Dataset 2',
+      data: [${values2}],
+      borderColor: '#00E28B',
+      fill: { enabled: ${fillArea}, opacity: 0.2 },
+    },` : ''}
+  ]`;
+    }
+    
+    const pointConfig = showPoints 
+      ? `{ radius: 5, hoverRadius: 7 }` 
+      : `{ radius: 0, hoverRadius: 0 }`;
+
+    return `// App.tsx - Complete CodeSandbox Example
+// Install: npm install unisys-barcharts react react-dom
+
+import React from 'react';
+import { ${componentName} } from 'unisys-barcharts';
+
+// Chart data
+const labels = [${labels}];
+
+const datasets = ${datasetsCode};
+
+// Chart configuration
+const chartConfig = {
+  title: "${chartTitle}",
+  theme: "${theme}",
+  interpolation: "${interpolation}",
+  tension: ${tension},
+  point: ${pointConfig},
+  legend: { display: ${showLegend}, position: 'bottom' as const },
+  tooltip: { enabled: true },
+  height: 400,
+};
+
+const App: React.FC = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1 style={{ marginBottom: '20px' }}>${chartTitle}</h1>
+      <${componentName}
+        title={chartConfig.title}
+        labels={labels}
+        datasets={datasets}
+        theme={chartConfig.theme}
+        interpolation={chartConfig.interpolation}
+        tension={chartConfig.tension}
+        point={chartConfig.point}
+        legend={chartConfig.legend}
+        tooltip={chartConfig.tooltip}
+        height={chartConfig.height}${extraProps}
+      />
+    </div>
+  );
+};
+
+export default App;
+
+/* 
+  index.tsx - Entry point:
+  
+  import React from 'react';
+  import ReactDOM from 'react-dom/client';
+  import App from './App';
+
+  const root = ReactDOM.createRoot(document.getElementById('root')!);
+  root.render(<App />);
+*/`;
+  }, [lineChartType, chartTitle, dataPoints, theme, interpolation, tension, showPoints, fillArea, showLegend, showSecondDataset, steppedMode]);
+
+  // Copy code to clipboard
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(generatedCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // Download functions
+  const downloadSVG = () => {
+    if (!chartRef.current) return;
+    const svg = chartRef.current.querySelector('svg');
+    if (!svg) return;
+    
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const blob = new Blob([svgData], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${chartTitle.replace(/\s+/g, '_')}.svg`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadPNG = () => {
+    if (!chartRef.current) return;
+    const svg = chartRef.current.querySelector('svg');
+    if (!svg) return;
+    
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const img = new Image();
+    
+    canvas.width = svg.clientWidth * 2;
+    canvas.height = svg.clientHeight * 2;
+    
+    img.onload = () => {
+      ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+      const link = document.createElement('a');
+      link.href = canvas.toDataURL('image/png');
+      link.download = `${chartTitle.replace(/\s+/g, '_')}.png`;
+      link.click();
+    };
+    
+    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
+  };
+
+  // Render the appropriate chart
+  const renderChart = () => {
+    const labels = dataPoints.map(d => d.label);
+    const values = dataPoints.map(d => d.value);
+    const values2 = dataPoints.map(d => d.value2 || 0);
+
+    const commonProps = {
+      title: chartTitle,
+      height: 400,
+      tooltip: { enabled: true },
+      legend: { display: showLegend, position: 'bottom' as const },
+      theme: theme,
+    };
+
+    const lineProps = {
+      ...commonProps,
+      labels,
+      interpolation: interpolation,
+      tension: tension,
+      point: showPoints ? { radius: 5, hoverRadius: 7 } : { radius: 0, hoverRadius: 0 },
+    };
+
+    const lineDatasets = [
+      {
+        label: 'Dataset 1',
+        data: values,
+        borderColor: colors.secondary,
+        fill: fillArea ? { enabled: true, opacity: 0.3 } : { enabled: false },
+      },
+      ...(showSecondDataset ? [{
+        label: 'Dataset 2',
+        data: values2,
+        borderColor: colors.accent,
+        fill: fillArea ? { enabled: true, opacity: 0.2 } : { enabled: false },
+      }] : []),
+    ];
+
+    switch (lineChartType) {
+      case 'multi-axis':
+        return (
+          <MultiAxisLineChart
+            {...lineProps}
+            datasets={lineDatasets.map((d, i) => ({ ...d, yAxisID: `y${i + 1}` }))}
+            yAxes={[
+              { id: 'y1', position: 'left', title: { text: 'Dataset 1' } },
+              ...(showSecondDataset ? [{ id: 'y2', position: 'right' as const, title: { text: 'Dataset 2' } }] : []),
+            ]}
+          />
+        );
+      case 'stepped':
+        return (
+          <SteppedLineChart
+            {...lineProps}
+            datasets={lineDatasets}
+            stepped={steppedMode}
+          />
+        );
+      case 'segmented':
+        return (
+          <SegmentedLineChart
+            {...lineProps}
+            datasets={lineDatasets.map(d => ({
+              ...d,
+              segmentStyle: (ctx: any) => {
+                if (ctx.p1.value > ctx.p0.value) {
+                  return { borderColor: colors.success };
+                }
+                return { borderColor: colors.error };
+              },
+            }))}
+          />
+        );
+      case 'point-style':
+        return (
+          <PointStyleLineChart
+            {...lineProps}
+            datasets={lineDatasets.map((d, i) => ({
+              ...d,
+              point: {
+                pointStyle: i === 0 ? 'circle' : 'triangle',
+                radius: 8,
+                hoverRadius: 12,
+              },
+            }))}
+          />
+        );
+      default:
+        return (
+          <LineChart
+            {...lineProps}
+            datasets={lineDatasets}
+          />
+        );
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      {/* Left Panel - Chart Preview & Code */}
+      <div style={styles.previewPanel}>
+        {/* Tab Header */}
+        <div style={styles.tabHeader}>
+          <div style={styles.tabButtons}>
+            <button
+              onClick={() => setActiveTab('preview')}
+              style={activeTab === 'preview' ? styles.tabBtnActive : styles.tabBtn}
+            >
+              📊 Preview
+            </button>
+            <button
+              onClick={() => setActiveTab('code')}
+              style={activeTab === 'code' ? styles.tabBtnActive : styles.tabBtn}
+            >
+              {'</>'} Code
+            </button>
+          </div>
+          <div style={styles.headerActions}>
+            {activeTab === 'preview' ? (
+              <>
+                <button onClick={downloadSVG} style={styles.actionBtn}>
+                  ⬇ SVG
+                </button>
+                <button onClick={downloadPNG} style={styles.actionBtnSecondary}>
+                  ⬇ PNG
+                </button>
+              </>
+            ) : (
+              <button onClick={copyToClipboard} style={styles.actionBtn}>
+                {copied ? '✓ Copied!' : '📋 Copy Code'}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <div style={styles.contentArea}>
+          {activeTab === 'preview' ? (
+            <div style={styles.chartContainer} ref={chartRef}>
+              {renderChart()}
+            </div>
+          ) : (
+            <div style={styles.codeContainer}>
+              <pre style={styles.codeBlock}>
+                <code>{generatedCode}</code>
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Panel - Controls */}
+      <div style={styles.controlPanel}>
+        <h2 style={styles.controlTitle}>Chart Configuration</h2>
+        
+        {/* Chart Type */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>Chart Type</label>
+          <div style={styles.typeGrid}>
+            {(['basic', 'multi-axis', 'stepped', 'segmented', 'point-style'] as LineChartType[]).map(type => (
+              <button
+                key={type}
+                onClick={() => setLineChartType(type)}
+                style={lineChartType === type ? styles.typeBtnActive : styles.typeBtn}
+              >
+                {type.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Chart Title */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>Chart Title</label>
+          <input
+            type="text"
+            value={chartTitle}
+            onChange={(e) => setChartTitle(e.target.value)}
+            style={styles.input}
+            placeholder="Enter chart title"
+          />
+        </div>
+
+        {/* Theme */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>Theme</label>
+          <select
+            value={theme}
+            onChange={(e) => setTheme(e.target.value as ThemeType)}
+            style={styles.select}
+          >
+            <option value="default">Default</option>
+            <option value="dark">Dark</option>
+            <option value="pastel">Pastel</option>
+            <option value="vibrant">Vibrant</option>
+          </select>
+        </div>
+
+        {/* Interpolation */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>Curve Type</label>
+          <select
+            value={interpolation}
+            onChange={(e) => setInterpolation(e.target.value as InterpolationMode)}
+            style={styles.select}
+          >
+            <option value="linear">Linear</option>
+            <option value="monotone">Smooth (Monotone)</option>
+            <option value="step">Step</option>
+            <option value="basis">Basis</option>
+            <option value="cardinal">Cardinal</option>
+            <option value="catmull-rom">Catmull-Rom</option>
+          </select>
+        </div>
+
+        {/* Curve Tension */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>
+            Curve Tension: <span style={styles.tensionValue}>{tension.toFixed(2)}</span>
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            value={tension}
+            onChange={(e) => setTension(parseFloat(e.target.value))}
+            style={styles.slider}
+          />
+        </div>
+
+        {/* Stepped Mode (only for stepped chart) */}
+        {lineChartType === 'stepped' && (
+          <div style={styles.section}>
+            <label style={styles.sectionLabel}>Step Mode</label>
+            <select
+              value={steppedMode}
+              onChange={(e) => setSteppedMode(e.target.value as 'before' | 'after' | 'middle')}
+              style={styles.select}
+            >
+              <option value="before">Before</option>
+              <option value="after">After</option>
+              <option value="middle">Middle</option>
+            </select>
+          </div>
+        )}
+
+        {/* Toggle Options */}
+        <div style={styles.section}>
+          <label style={styles.sectionLabel}>Display Options</label>
+          <div style={styles.toggleGrid}>
+            <label style={styles.toggleItem}>
+              <input
+                type="checkbox"
+                checked={showPoints}
+                onChange={(e) => setShowPoints(e.target.checked)}
+                style={styles.checkboxInput}
+              />
+              <span style={styles.toggleLabel}>Show Points</span>
+            </label>
+            <label style={styles.toggleItem}>
+              <input
+                type="checkbox"
+                checked={fillArea}
+                onChange={(e) => setFillArea(e.target.checked)}
+                style={styles.checkboxInput}
+              />
+              <span style={styles.toggleLabel}>Fill Area</span>
+            </label>
+            <label style={styles.toggleItem}>
+              <input
+                type="checkbox"
+                checked={showLegend}
+                onChange={(e) => setShowLegend(e.target.checked)}
+                style={styles.checkboxInput}
+              />
+              <span style={styles.toggleLabel}>Show Legend</span>
+            </label>
+            <label style={styles.toggleItem}>
+              <input
+                type="checkbox"
+                checked={showSecondDataset}
+                onChange={(e) => setShowSecondDataset(e.target.checked)}
+                style={styles.checkboxInput}
+              />
+              <span style={styles.toggleLabel}>Second Dataset</span>
+            </label>
+          </div>
+        </div>
+
+        {/* Data Points */}
+        <div style={styles.section}>
+          <div style={styles.dataHeader}>
+            <label style={styles.sectionLabel}>Data Points ({dataPoints.length})</label>
+            <button onClick={addDataPoint} style={styles.addBtn}>+ Add</button>
+          </div>
+          <div style={styles.dataList}>
+            {dataPoints.map((point, index) => (
+              <div key={index} style={styles.dataItem}>
+                <div style={styles.dataItemHeader}>
+                  <span style={styles.dataItemTitle}>Point {index + 1}</span>
+                  {dataPoints.length > 2 && (
+                    <button
+                      onClick={() => removeDataPoint(index)}
+                      style={styles.removeBtn}
+                      title="Remove point"
+                    >
+                      ×
+                    </button>
+                  )}
+                </div>
+                <div style={styles.dataInputRow}>
+                  <div style={styles.inputGroup}>
+                    <label style={styles.inputLabel}>Label</label>
+                    <input
+                      type="text"
+                      value={point.label}
+                      onChange={(e) => updateDataPoint(index, 'label', e.target.value)}
+                      style={styles.dataInput}
+                    />
+                  </div>
+                  <div style={styles.inputGroup}>
+                    <label style={styles.inputLabel}>Value</label>
+                    <input
+                      type="number"
+                      value={point.value}
+                      onChange={(e) => updateDataPoint(index, 'value', e.target.value)}
+                      style={styles.dataInputNumber}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Styles following Unisys Design System with enhanced UX
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    display: 'flex',
+    minHeight: '100vh',
+    backgroundColor: colors.bgApp,
+    fontFamily: '"Unisys", "Tomato Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  previewPanel: {
+    flex: 1,
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0',
+  },
+  tabHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: colors.primary,
+    padding: '12px 20px',
+    borderRadius: '12px 12px 0 0',
+  },
+  tabButtons: {
+    display: 'flex',
+    gap: '4px',
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    padding: '4px',
+    borderRadius: '8px',
+  },
+  tabBtn: {
+    padding: '10px 20px',
+    backgroundColor: 'transparent',
+    color: 'rgba(255,255,255,0.7)',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 500,
+    transition: 'all 0.2s',
+  },
+  tabBtnActive: {
+    padding: '10px 20px',
+    backgroundColor: colors.secondary,
+    color: '#fff',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 500,
+  },
+  headerActions: {
+    display: 'flex',
+    gap: '10px',
+  },
+  actionBtn: {
+    padding: '10px 16px',
+    backgroundColor: colors.accent,
+    color: colors.primary,
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: 600,
+    transition: 'all 0.2s',
+  },
+  actionBtnSecondary: {
+    padding: '10px 16px',
+    backgroundColor: 'transparent',
+    color: '#fff',
+    border: '1px solid rgba(255,255,255,0.5)',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: 500,
+    transition: 'all 0.2s',
+  },
+  contentArea: {
+    flex: 1,
+    backgroundColor: '#fff',
+    borderRadius: '0 0 12px 12px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+    overflow: 'hidden',
+  },
+  chartContainer: {
+    padding: '24px',
+    height: '100%',
+  },
+  codeContainer: {
+    height: '100%',
+    overflow: 'auto',
+    backgroundColor: '#1e1e1e',
+  },
+  codeBlock: {
+    margin: 0,
+    padding: '24px',
+    fontFamily: '"Fira Code", "Consolas", "Monaco", monospace',
+    fontSize: '13px',
+    lineHeight: 1.6,
+    color: '#d4d4d4',
+    whiteSpace: 'pre',
+    overflow: 'auto',
+  },
+  controlPanel: {
+    width: '380px',
+    backgroundColor: colors.primary,
+    padding: '24px',
+    overflowY: 'auto',
+    maxHeight: '100vh',
+  },
+  controlTitle: {
+    color: '#fff',
+    fontSize: '18px',
+    fontWeight: 600,
+    marginBottom: '24px',
+    paddingBottom: '16px',
+    borderBottom: '1px solid rgba(255,255,255,0.1)',
+  },
+  section: {
+    marginBottom: '20px',
+  },
+  sectionLabel: {
+    display: 'block',
+    color: 'rgba(255,255,255,0.9)',
+    fontSize: '12px',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+    marginBottom: '10px',
+  },
+  typeGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '8px',
+  },
+  typeBtn: {
+    padding: '12px 10px',
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    color: 'rgba(255,255,255,0.8)',
+    border: '1px solid rgba(255, 255, 255, 0.15)',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    fontWeight: 500,
+    transition: 'all 0.2s',
+  },
+  typeBtnActive: {
+    padding: '12px 10px',
+    backgroundColor: colors.secondary,
+    color: '#fff',
+    border: '1px solid ' + colors.secondary,
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    fontWeight: 600,
+  },
+  input: {
+    width: '100%',
+    padding: '12px 14px',
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    border: 'none',
+    borderRadius: '8px',
+    fontSize: '14px',
+    color: colors.textPrimary,
+    outline: 'none',
+    boxSizing: 'border-box',
+  },
+  select: {
+    width: '100%',
+    padding: '12px 14px',
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    border: 'none',
+    borderRadius: '8px',
+    fontSize: '14px',
+    color: colors.textPrimary,
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+  },
+  tensionValue: {
+    color: colors.accent,
+    fontWeight: 600,
+  },
+  slider: {
+    width: '100%',
+    height: '6px',
+    borderRadius: '3px',
+    background: 'rgba(255, 255, 255, 0.2)',
+    outline: 'none',
+    cursor: 'pointer',
+    accentColor: colors.accent,
+  },
+  toggleGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '10px',
+  },
+  toggleItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    cursor: 'pointer',
+    padding: '8px 10px',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    borderRadius: '6px',
+    transition: 'background-color 0.2s',
+  },
+  checkboxInput: {
+    width: '16px',
+    height: '16px',
+    accentColor: colors.accent,
+    cursor: 'pointer',
+  },
+  toggleLabel: {
+    color: 'rgba(255,255,255,0.9)',
+    fontSize: '12px',
+    fontWeight: 500,
+  },
+  dataHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '12px',
+  },
+  addBtn: {
+    backgroundColor: colors.accent,
+    color: colors.primary,
+    border: 'none',
+    padding: '8px 14px',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '12px',
+    fontWeight: 600,
+    transition: 'transform 0.1s',
+  },
+  dataList: {
+    maxHeight: '280px',
+    overflowY: 'auto',
+    paddingRight: '4px',
+  },
+  dataItem: {
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    borderRadius: '8px',
+    padding: '12px',
+    marginBottom: '8px',
+  },
+  dataItemHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '10px',
+  },
+  dataItemTitle: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: '11px',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  removeBtn: {
+    backgroundColor: colors.error,
+    color: '#fff',
+    border: 'none',
+    fontSize: '14px',
+    cursor: 'pointer',
+    padding: '2px 8px',
+    borderRadius: '4px',
+    lineHeight: 1,
+    transition: 'opacity 0.2s',
+  },
+  dataInputRow: {
+    display: 'flex',
+    gap: '10px',
+  },
+  inputGroup: {
+    flex: 1,
+  },
+  inputLabel: {
+    display: 'block',
+    color: 'rgba(255,255,255,0.5)',
+    fontSize: '10px',
+    fontWeight: 500,
+    textTransform: 'uppercase',
+    marginBottom: '4px',
+  },
+  dataInput: {
+    width: '100%',
+    padding: '10px 12px',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: colors.textPrimary,
+    outline: 'none',
+    boxSizing: 'border-box',
+  },
+  dataInputNumber: {
+    width: '100%',
+    padding: '10px 12px',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: colors.textPrimary,
+    outline: 'none',
+    textAlign: 'right' as const,
+    boxSizing: 'border-box',
+  },
+};
+
+export default App;