From 327b43411f4c78c2ec19094223937bb6683bf687 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 15:02:08 +0200
Subject: [PATCH 01/35] feat: add smart function input feature documentation
 and implementation example

---
 docs/features/smart-function-input/README.md  | 143 ++++++++
 .../implementation-example-mathInput.md       | 318 ++++++++++++++++++
 2 files changed, 461 insertions(+)
 create mode 100644 docs/features/smart-function-input/README.md
 create mode 100644 docs/features/smart-function-input/implementation-example-mathInput.md

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
new file mode 100644
index 0000000..7e394e1
--- /dev/null
+++ b/docs/features/smart-function-input/README.md
@@ -0,0 +1,143 @@
+# Smart Function Input Feature
+
+## Overview
+
+The Smart Function Input feature enhances the function plotting capabilities by providing an intuitive interface for entering mathematical functions with automatic parameter detection. This allows users to easily create and manipulate mathematical functions with parameters.
+
+## User Stories
+
+### Intuitive Function Input
+- As a user, I want to input mathematical functions in a natural way (e.g., "f(x) = ax^2 + bx + c")
+- As a user, I want to use standard mathematical notation for functions (e.g., "f(x)", "y =", etc.)
+- As a user, I want to easily input exponents using the ^ symbol or superscript
+- As a user, I want to input common mathematical functions (sin, cos, sqrt, etc.)
+- As a user, I want to see my input formatted in proper mathematical notation
+
+### Mathematical Input Interface
+- As a user, I want to have a GeoGebra-like interface with buttons for mathematical symbols and functions
+- As a user, I want to easily insert mathematical operators (+, -, ×, ÷, ^, √, etc.)
+- As a user, I want to have quick access to common mathematical functions (sin, cos, tan, log, etc.)
+- As a user, I want to be able to both click buttons and type directly into the input field
+- As a user, I want the cursor position to be maintained when inserting symbols
+- As a user, I want to have the input organized in tabs (Basic, Functions, Operators) for better organization
+
+### Parameter Detection
+- As a user, I want the system to automatically detect parameters in my function (e.g., a, b, c in ax^2 + bx + c)
+- As a user, I want to see a list of detected parameters with their current values
+- As a user, I want to be able to adjust parameter values using interactive controls
+- As a user, I want to see the graph update in real-time as I adjust parameters
+
+### Input Assistance
+- As a user, I want to see suggestions for common mathematical functions as I type
+- As a user, I want to see examples of how to input different types of functions
+- As a user, I want to be able to use keyboard shortcuts for common mathematical operations
+- As a user, I want to see immediate feedback if my input is invalid
+
+## Implementation Plan
+
+### Phase 1: Enhanced Function Input
+1. Create enhanced formula input component
+   - [ ] Implement natural language function input
+   - [ ] Add support for standard mathematical notation
+   - [ ] Add support for exponents and superscripts
+   - [ ] Add support for common mathematical functions
+   - [ ] Implement real-time formatting
+
+2. Add input assistance features
+   - [ ] Implement function suggestions
+   - [ ] Add example templates
+   - [ ] Add keyboard shortcuts
+   - [ ] Add input validation feedback
+
+### Phase 2: Parameter Detection
+1. Create parameter detection utility
+   - [ ] Implement regex-based parameter detection
+   - [ ] Add support for common mathematical functions
+   - [ ] Handle nested functions and complex expressions
+   - [ ] Add validation for detected parameters
+
+2. Update Formula type and context
+   - [ ] Add parameters field to Formula type
+   - [ ] Update formula validation
+   - [ ] Add parameter persistence
+
+3. Create parameter control UI
+   - [ ] Design parameter control panel
+   - [ ] Implement parameter sliders
+   - [ ] Add real-time updates
+
+## Technical Details
+
+### Function Input
+The system will support:
+- Natural language input (e.g., "f(x) = ax^2 + bx + c")
+- Standard mathematical notation
+- Exponents using ^ or superscript
+- Common mathematical functions (sin, cos, sqrt, etc.)
+- Real-time formatting and validation
+
+### Parameter Detection
+The system will identify parameters as:
+- Single letters (a, b, c, etc.)
+- Greek letters (α, β, γ, etc.)
+- Custom parameter names (enclosed in curly braces)
+
+### Data Structures
+
+```typescript
+// Parameter type for function parameters
+interface Parameter {
+  name: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+}
+
+// Updated Formula type
+interface Formula {
+  id: string;
+  name: string;
+  expression: string;
+  substitutedExpression?: string;
+  parameters?: Parameter[];
+  domain: [number, number];
+  color: string;
+  visible: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+```
+
+## Testing Plan
+
+### Unit Tests
+- [ ] Function input parsing tests
+- [ ] Parameter detection tests
+- [ ] Input validation tests
+- [ ] Formula evaluation tests with parameters
+
+### Integration Tests
+- [ ] Input component integration tests
+- [ ] Parameter UI integration tests
+- [ ] Real-time update tests
+
+### E2E Tests
+- [ ] Complete function input workflow
+- [ ] Parameter adjustment workflow
+- [ ] Real-time graph update workflow
+
+## Migration Plan
+
+1. Add new fields to existing formulas
+   - [ ] Add parameters array (empty by default)
+   - [ ] Add substitutedExpression field
+
+2. Update formula validation
+   - [ ] Add parameter validation
+   - [ ] Add natural language input validation
+
+3. Update UI components
+   - [ ] Add enhanced formula input
+   - [ ] Add parameter controls
+   - [ ] Add input assistance features 
\ No newline at end of file
diff --git a/docs/features/smart-function-input/implementation-example-mathInput.md b/docs/features/smart-function-input/implementation-example-mathInput.md
new file mode 100644
index 0000000..77b5fdf
--- /dev/null
+++ b/docs/features/smart-function-input/implementation-example-mathInput.md
@@ -0,0 +1,318 @@
+# Implementation Example: Mathematical Expression Input Interface
+
+This document shows the implementation of a mathematical expression input interface that provides an intuitive way to input mathematical expressions using buttons and symbols, similar to GeoGebra's approach.
+
+## MathInput Component
+
+```typescript
+// src/components/MathInput/MathInput.tsx
+
+import React, { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+
+interface MathInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onParameterDetected?: (parameters: string[]) => void;
+  className?: string;
+}
+
+// Mathematical symbols and functions
+const MATH_SYMBOLS = {
+  basic: [
+    { label: '+', value: '+' },
+    { label: '-', value: '-' },
+    { label: '×', value: '*' },
+    { label: '÷', value: '/' },
+    { label: '=', value: '=' },
+    { label: '(', value: '(' },
+    { label: ')', value: ')' },
+    { label: ',', value: ',' },
+    { label: 'x', value: 'x' },
+    { label: 'y', value: 'y' }
+  ],
+  functions: [
+    { label: 'sin', value: 'sin(' },
+    { label: 'cos', value: 'cos(' },
+    { label: 'tan', value: 'tan(' },
+    { label: '√', value: 'sqrt(' },
+    { label: 'log', value: 'log(' },
+    { label: 'ln', value: 'ln(' },
+    { label: 'exp', value: 'exp(' },
+    { label: 'abs', value: 'abs(' }
+  ],
+  operators: [
+    { label: '^', value: '^' },
+    { label: '√', value: 'sqrt(' },
+    { label: 'π', value: 'pi' },
+    { label: 'e', value: 'e' },
+    { label: '∞', value: 'infinity' },
+    { label: '±', value: '+-' },
+    { label: '≤', value: '<=' },
+    { label: '≥', value: '>=' }
+  ]
+};
+
+export const MathInput: React.FC<MathInputProps> = ({
+  value,
+  onChange,
+  onParameterDetected,
+  className
+}) => {
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Handle symbol button click
+  const handleSymbolClick = useCallback((symbol: string) => {
+    const newValue = value.slice(0, cursorPosition) + symbol + value.slice(cursorPosition);
+    onChange(newValue);
+    setCursorPosition(cursorPosition + symbol.length);
+  }, [value, cursorPosition, onChange]);
+
+  // Handle input change
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setCursorPosition(e.target.selectionStart || 0);
+  }, [onChange]);
+
+  // Handle key press
+  const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      // Trigger parameter detection
+      const parameters = detectParameters(value);
+      onParameterDetected?.(parameters);
+    }
+  }, [value, onParameterDetected]);
+
+  // Detect parameters in the expression
+  const detectParameters = useCallback((expression: string): string[] => {
+    const parameterRegex = /[a-zA-Z](?!\s*[=\(])/g;
+    const matches = expression.match(parameterRegex) || [];
+    return [...new Set(matches)].filter(param => param !== 'x' && param !== 'y');
+  }, []);
+
+  return (
+    <Card className={cn('p-4', className)}>
+      <div className="space-y-4">
+        <Input
+          ref={inputRef}
+          value={value}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
+          placeholder="Enter mathematical expression (e.g., f(x) = ax^2 + bx + c)"
+          className="font-mono text-lg"
+        />
+
+        <Tabs defaultValue="basic">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="basic">Basic</TabsTrigger>
+            <TabsTrigger value="functions">Functions</TabsTrigger>
+            <TabsTrigger value="operators">Operators</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="basic" className="grid grid-cols-5 gap-2">
+            {MATH_SYMBOLS.basic.map((symbol) => (
+              <Button
+                key={symbol.label}
+                variant="outline"
+                size="sm"
+                onClick={() => handleSymbolClick(symbol.value)}
+              >
+                {symbol.label}
+              </Button>
+            ))}
+          </TabsContent>
+
+          <TabsContent value="functions" className="grid grid-cols-4 gap-2">
+            {MATH_SYMBOLS.functions.map((symbol) => (
+              <Button
+                key={symbol.label}
+                variant="outline"
+                size="sm"
+                onClick={() => handleSymbolClick(symbol.value)}
+              >
+                {symbol.label}
+              </Button>
+            ))}
+          </TabsContent>
+
+          <TabsContent value="operators" className="grid grid-cols-4 gap-2">
+            {MATH_SYMBOLS.operators.map((symbol) => (
+              <Button
+                key={symbol.label}
+                variant="outline"
+                size="sm"
+                onClick={() => handleSymbolClick(symbol.value)}
+              >
+                {symbol.label}
+              </Button>
+            ))}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </Card>
+  );
+};
+```
+
+## Integration with FormulaEditor
+
+```typescript
+// src/components/FormulaEditor.tsx
+
+import { MathInput } from './MathInput/MathInput';
+
+export const FormulaEditor: React.FC<FormulaEditorProps> = ({
+  formula,
+  onUpdate,
+  onDelete
+}) => {
+  const [expression, setExpression] = useState(formula.expression);
+  const [parameters, setParameters] = useState<string[]>([]);
+
+  const handleExpressionChange = useCallback((newExpression: string) => {
+    setExpression(newExpression);
+    // Update formula with new expression
+    onUpdate({
+      ...formula,
+      expression: newExpression
+    });
+  }, [formula, onUpdate]);
+
+  const handleParameterDetected = useCallback((detectedParameters: string[]) => {
+    setParameters(detectedParameters);
+    // Create parameter objects with default values
+    const newParameters = detectedParameters.map(param => ({
+      name: param,
+      value: 1,
+      min: -10,
+      max: 10,
+      step: 0.1
+    }));
+    // Update formula with new parameters
+    onUpdate({
+      ...formula,
+      parameters: newParameters
+    });
+  }, [formula, onUpdate]);
+
+  return (
+    <div className="space-y-4">
+      <MathInput
+        value={expression}
+        onChange={handleExpressionChange}
+        onParameterDetected={handleParameterDetected}
+        className="w-full"
+      />
+      
+      {parameters.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Parameters</h3>
+          <div className="grid grid-cols-2 gap-2">
+            {parameters.map(param => (
+              <div key={param} className="flex items-center space-x-2">
+                <span className="text-sm">{param}</span>
+                <input
+                  type="number"
+                  className="w-20"
+                  defaultValue={1}
+                  onChange={(e) => {
+                    // Update parameter value
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+## Testing Example
+
+```typescript
+// src/components/MathInput/__tests__/MathInput.test.tsx
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MathInput } from '../MathInput';
+
+describe('MathInput', () => {
+  it('renders basic math symbols', () => {
+    render(<MathInput value="" onChange={() => {}} />);
+    
+    // Check if basic symbols are rendered
+    expect(screen.getByText('+')).toBeInTheDocument();
+    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('×')).toBeInTheDocument();
+  });
+
+  it('adds symbols to input when clicked', () => {
+    const onChange = jest.fn();
+    render(<MathInput value="" onChange={onChange} />);
+    
+    // Click some symbols
+    fireEvent.click(screen.getByText('+'));
+    fireEvent.click(screen.getByText('x'));
+    
+    expect(onChange).toHaveBeenCalledWith('+x');
+  });
+
+  it('detects parameters in expression', () => {
+    const onParameterDetected = jest.fn();
+    render(
+      <MathInput
+        value="ax^2 + bx + c"
+        onChange={() => {}}
+        onParameterDetected={onParameterDetected}
+      />
+    );
+    
+    // Press Enter to trigger parameter detection
+    fireEvent.keyPress(screen.getByPlaceholderText(/enter mathematical expression/i), {
+      key: 'Enter',
+      code: 13,
+      charCode: 13
+    });
+    
+    expect(onParameterDetected).toHaveBeenCalledWith(['a', 'b', 'c']);
+  });
+
+  it('maintains cursor position after symbol insertion', () => {
+    const onChange = jest.fn();
+    render(<MathInput value="x" onChange={onChange} />);
+    
+    const input = screen.getByPlaceholderText(/enter mathematical expression/i);
+    input.setSelectionRange(1, 1);
+    
+    fireEvent.click(screen.getByText('+'));
+    
+    expect(onChange).toHaveBeenCalledWith('x+');
+  });
+});
+```
+
+This implementation provides:
+1. A tabbed interface for different types of mathematical symbols
+2. Easy insertion of mathematical functions and operators
+3. Automatic parameter detection
+4. Cursor position maintenance
+5. Real-time expression updates
+6. Parameter controls
+7. Comprehensive test coverage
+
+The next steps would be to:
+1. Add support for more mathematical symbols and functions
+2. Implement expression validation
+3. Add support for custom functions
+4. Add support for matrices and vectors
+5. Implement expression simplification
+6. Add support for units and constants
+7. Add support for piecewise functions 
\ No newline at end of file

From f997a4496845ebf5088aa7382db2442ba8ed999d Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 18:02:50 +0200
Subject: [PATCH 02/35] docs: update smart function input implementation plan
 with layout restructuring phase

---
 docs/features/smart-function-input/README.md | 141 ++++++++++++++++---
 1 file changed, 118 insertions(+), 23 deletions(-)

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
index 7e394e1..8c42a54 100644
--- a/docs/features/smart-function-input/README.md
+++ b/docs/features/smart-function-input/README.md
@@ -35,36 +35,131 @@ The Smart Function Input feature enhances the function plotting capabilities by
 
 ## Implementation Plan
 
+## Overview
+This document outlines the implementation plan for enhancing the function input capabilities in the geometry playground. The goal is to make function input more intuitive and user-friendly while maintaining compatibility with the existing formula system.
+
+## Implementation Phases
+
+### Phase 0: Layout Restructuring
+1. Move function controls to a dedicated sidebar
+   - [ ] Create a new sidebar component for function controls
+   - [ ] Position the sidebar next to the canvas
+   - [ ] Move formula editor and controls from overlay to sidebar
+   - [ ] Adjust canvas width to accommodate sidebar
+   - [ ] Ensure responsive behavior for different screen sizes
+   - [ ] Update layout to maintain proper spacing and alignment
+
+2. Update component hierarchy
+   - [ ] Modify GeometryCanvas to accept sidebar as a prop
+   - [ ] Update Index component to handle new layout structure
+   - [ ] Ensure proper state management between components
+   - [ ] Maintain existing functionality during transition
+
+3. Style and UI improvements
+   - [ ] Design consistent sidebar styling
+   - [ ] Add smooth transitions for sidebar open/close
+   - [ ] Ensure proper z-indexing for all components
+   - [ ] Add responsive breakpoints for mobile views
+
 ### Phase 1: Enhanced Function Input
 1. Create enhanced formula input component
-   - [ ] Implement natural language function input
    - [ ] Add support for standard mathematical notation
    - [ ] Add support for exponents and superscripts
    - [ ] Add support for common mathematical functions
    - [ ] Implement real-time formatting
 
-2. Add input assistance features
-   - [ ] Implement function suggestions
-   - [ ] Add example templates
-   - [ ] Add keyboard shortcuts
-   - [ ] Add input validation feedback
-
-### Phase 2: Parameter Detection
-1. Create parameter detection utility
-   - [ ] Implement regex-based parameter detection
-   - [ ] Add support for common mathematical functions
-   - [ ] Handle nested functions and complex expressions
-   - [ ] Add validation for detected parameters
-
-2. Update Formula type and context
-   - [ ] Add parameters field to Formula type
-   - [ ] Update formula validation
-   - [ ] Add parameter persistence
-
-3. Create parameter control UI
-   - [ ] Design parameter control panel
-   - [ ] Implement parameter sliders
-   - [ ] Add real-time updates
+2. Implement formula validation and error handling
+   - [ ] Add real-time syntax checking
+   - [ ] Provide clear error messages
+   - [ ] Show formula preview
+   - [ ] Handle edge cases and invalid inputs
+
+3. Add formula templates and suggestions
+   - [ ] Create common function templates
+   - [ ] Implement smart suggestions
+   - [ ] Add quick-insert buttons for common functions
+   - [ ] Support formula history
+
+### Phase 2: Advanced Features
+1. Add support for multiple functions
+   - [ ] Allow simultaneous display of multiple functions
+   - [ ] Implement function comparison
+   - [ ] Add function composition
+   - [ ] Support function operations (addition, multiplication, etc.)
+
+2. Implement function analysis tools
+   - [ ] Add derivative calculation
+   - [ ] Show critical points
+   - [ ] Display asymptotes
+   - [ ] Calculate integrals
+
+3. Add interactive features
+   - [ ] Implement function transformation controls
+   - [ ] Add parameter sliders
+   - [ ] Support function animation
+   - [ ] Add point tracking
+
+### Phase 3: Integration and Polish
+1. Integrate with existing geometry features
+   - [ ] Enable intersection points
+   - [ ] Add area calculations
+   - [ ] Support geometric transformations
+   - [ ] Implement combined measurements
+
+2. Add export and sharing capabilities
+   - [ ] Support formula export
+   - [ ] Add function documentation
+   - [ ] Enable formula sharing
+   - [ ] Implement formula libraries
+
+3. Performance optimization
+   - [ ] Optimize rendering performance
+   - [ ] Implement efficient calculations
+   - [ ] Add caching mechanisms
+   - [ ] Optimize memory usage
+
+## Technical Considerations
+
+### State Management
+- Use React Context for global state
+- Implement proper state synchronization
+- Handle formula updates efficiently
+- Maintain undo/redo functionality
+
+### Performance
+- Implement efficient formula evaluation
+- Use Web Workers for heavy calculations
+- Optimize rendering for large datasets
+- Implement proper memoization
+
+### Accessibility
+- Ensure keyboard navigation
+- Add screen reader support
+- Implement proper ARIA labels
+- Support high contrast mode
+
+### Testing
+- Add comprehensive unit tests
+- Implement integration tests
+- Add performance benchmarks
+- Test edge cases and error conditions
+
+## Timeline
+- Phase 0: 1-2 weeks
+- Phase 1: 2-3 weeks
+- Phase 2: 2-3 weeks
+- Phase 3: 1-2 weeks
+
+Total estimated time: 6-10 weeks
+
+## Success Criteria
+1. Users can input functions using standard mathematical notation
+2. Functions are displayed accurately on the canvas
+3. Multiple functions can be displayed simultaneously
+4. Performance remains smooth with complex functions
+5. The interface is intuitive and user-friendly
+6. All features work responsively on different screen sizes
+7. The system maintains compatibility with existing geometry features
 
 ## Technical Details
 

From 4168b5f53b06acb5fac6f3e9d39dfff5cac930cd Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 18:25:19 +0200
Subject: [PATCH 03/35] feat: formula sidebar improvements - Fix formula
 selection styling test - Update test to check for correct DOM hierarchy - Add
 border-accent-foreground class assertion

---
 .../Formula/FunctionSidebar.test.tsx          | 108 ++++++++++++++++++
 src/components/Formula/FunctionSidebar.tsx    |  94 +++++++++++++++
 2 files changed, 202 insertions(+)
 create mode 100644 src/__tests__/components/Formula/FunctionSidebar.test.tsx
 create mode 100644 src/components/Formula/FunctionSidebar.tsx

diff --git a/src/__tests__/components/Formula/FunctionSidebar.test.tsx b/src/__tests__/components/Formula/FunctionSidebar.test.tsx
new file mode 100644
index 0000000..52bb60a
--- /dev/null
+++ b/src/__tests__/components/Formula/FunctionSidebar.test.tsx
@@ -0,0 +1,108 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useTranslation } from 'react-i18next';
+import FunctionSidebar from '@/components/Formula/FunctionSidebar';
+import { Formula } from '@/types/formula';
+import { MeasurementUnit } from '@/types/shapes';
+import { ConfigProvider } from '@/context/ConfigContext';
+
+// Mock react-i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+// Mock ConfigContext
+jest.mock('@/context/ConfigContext', () => ({
+  ...jest.requireActual('@/context/ConfigContext'),
+  useConfig: () => ({
+    language: 'en',
+    openaiApiKey: '',
+    loggingEnabled: false,
+    isGlobalConfigModalOpen: false,
+    isToolbarVisible: true,
+    pixelsPerUnit: 60,
+    measurementUnit: 'cm',
+    isComponentConfigModalOpen: false,
+    setLanguage: jest.fn(),
+    setOpenaiApiKey: jest.fn(),
+    setLoggingEnabled: jest.fn(),
+    setGlobalConfigModalOpen: jest.fn(),
+    setToolbarVisible: jest.fn(),
+    setPixelsPerUnit: jest.fn(),
+    setMeasurementUnit: jest.fn(),
+    setComponentConfigModalOpen: jest.fn(),
+    isConfigModalOpen: false,
+    setConfigModalOpen: jest.fn(),
+  }),
+}));
+
+describe('FunctionSidebar', () => {
+  const mockFormula: Formula = {
+    id: 'test-formula',
+    type: 'function',
+    expression: 'x^2',
+    color: '#000000',
+    strokeWidth: 2,
+    xRange: [-10, 10],
+    samples: 100,
+    scaleFactor: 1,
+  };
+
+  const mockProps = {
+    formulas: [mockFormula],
+    selectedFormula: null,
+    onAddFormula: jest.fn(),
+    onDeleteFormula: jest.fn(),
+    onSelectFormula: jest.fn(),
+    onUpdateFormula: jest.fn(),
+    measurementUnit: 'cm' as MeasurementUnit,
+  };
+
+  beforeEach(() => {
+    (useTranslation as jest.Mock).mockReturnValue({
+      t: (key: string) => key,
+    });
+  });
+
+  it('renders without crashing', () => {
+    render(<FunctionSidebar {...mockProps} />);
+    expect(screen.getByText('formula.title')).toBeInTheDocument();
+  });
+
+  it('renders formula list', () => {
+    render(<FunctionSidebar {...mockProps} />);
+    expect(screen.getByText('x^2')).toBeInTheDocument();
+  });
+
+  it('calls onAddFormula when add button is clicked', () => {
+    render(<FunctionSidebar {...mockProps} />);
+    const addButton = screen.getByTitle('formula.add');
+    fireEvent.click(addButton);
+    expect(mockProps.onAddFormula).toHaveBeenCalled();
+  });
+
+  it('calls onDeleteFormula when delete button is clicked', () => {
+    render(<FunctionSidebar {...mockProps} />);
+    const deleteButton = screen.getByTitle('formula.delete');
+    fireEvent.click(deleteButton);
+    expect(mockProps.onDeleteFormula).toHaveBeenCalledWith(mockFormula.id);
+  });
+
+  it('calls onSelectFormula when formula is clicked', () => {
+    render(<FunctionSidebar {...mockProps} />);
+    const formulaButton = screen.getByText('x^2');
+    fireEvent.click(formulaButton);
+    expect(mockProps.onSelectFormula).toHaveBeenCalledWith(mockFormula);
+  });
+
+  it('shows selected formula with different styling', () => {
+    render(
+      <FunctionSidebar
+        {...mockProps}
+        selectedFormula={mockFormula}
+      />
+    );
+    const formulaContainer = screen.getByText('x^2').closest('div').parentElement;
+    expect(formulaContainer).toHaveClass('bg-accent');
+    expect(formulaContainer).toHaveClass('border-accent-foreground');
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
new file mode 100644
index 0000000..09d5949
--- /dev/null
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Plus, Trash2 } from 'lucide-react';
+import { Formula } from '@/types/formula';
+import FormulaEditor from '@/components/FormulaEditor';
+import { MeasurementUnit } from '@/types/shapes';
+
+interface FunctionSidebarProps {
+  formulas: Formula[];
+  selectedFormula: Formula | null;
+  onAddFormula: () => void;
+  onDeleteFormula: (id: string) => void;
+  onSelectFormula: (formula: Formula) => void;
+  onUpdateFormula: (id: string, updates: Partial<Formula>) => void;
+  measurementUnit: MeasurementUnit;
+  className?: string;
+}
+
+export default function FunctionSidebar({
+  formulas,
+  selectedFormula,
+  onAddFormula,
+  onDeleteFormula,
+  onSelectFormula,
+  onUpdateFormula,
+  measurementUnit,
+  className,
+}: FunctionSidebarProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={cn('flex flex-col h-full bg-background border-l', className)}>
+      <div className="flex items-center justify-between p-4 border-b">
+        <h2 className="text-lg font-semibold">{t('formula.title')}</h2>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={onAddFormula}
+          title={t('formula.add')}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-4">
+          {formulas.map((formula) => (
+            <div
+              key={formula.id}
+              className={cn(
+                'p-4 rounded-lg border transition-colors',
+                selectedFormula?.id === formula.id
+                  ? 'bg-accent border-accent-foreground'
+                  : 'hover:bg-accent/50'
+              )}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <Button
+                  variant="ghost"
+                  className="flex-1 justify-start"
+                  onClick={() => onSelectFormula(formula)}
+                >
+                  {formula.expression || t('formula.untitled')}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onDeleteFormula(formula.id)}
+                  title={t('formula.delete')}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+              <Separator className="my-2" />
+              <FormulaEditor
+                formulas={[formula]}
+                onAddFormula={() => {}}
+                onUpdateFormula={onUpdateFormula}
+                onDeleteFormula={onDeleteFormula}
+                _measurementUnit={measurementUnit}
+                isOpen={true}
+                selectedFormulaId={selectedFormula?.id === formula.id ? formula.id : undefined}
+                onSelectFormula={() => onSelectFormula(formula)}
+              />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+} 
\ No newline at end of file

From a45f164fc80ec80ce36f7e171dd189c229baf108 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 18:28:05 +0200
Subject: [PATCH 04/35] feat: add function sidebar to layout - Add
 FunctionSidebar component next to GeometryCanvas - Fix type mismatches in
 props - Add proper styling and border

---
 src/pages/Index.tsx | 156 +++++++++++++++++++++++++-------------------
 1 file changed, 89 insertions(+), 67 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 5ed7c91..6c029e8 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -7,6 +7,7 @@ import GeometryCanvas from '@/components/GeometryCanvas';
 import Toolbar from '@/components/Toolbar';
 import UnitSelector from '@/components/UnitSelector';
 import FormulaEditor from '@/components/FormulaEditor';
+import FunctionSidebar from '@/components/Formula/FunctionSidebar';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useTranslate } from '@/utils/translate';
@@ -374,74 +375,95 @@ const Index = () => {
                 </div>
               )}
               
-              <GeometryCanvas
-                shapes={shapes}
-                formulas={formulas}
-                selectedShapeId={selectedShapeId}
-                activeMode={activeMode}
-                activeShapeType={activeShapeType}
-                measurementUnit={measurementUnit}
-                isFullscreen={isFullscreen}
-                gridPosition={gridPosition}
-                onShapeSelect={selectShape}
-                onShapeCreate={createShape}
-                onShapeMove={moveShape}
-                onShapeResize={resizeShape}
-                onShapeRotate={rotateShape}
-                onShapeDelete={deleteShape}
-                onModeChange={setActiveMode}
-                onMoveAllShapes={handleMoveAllShapes}
-                onGridPositionChange={handleGridPositionChange}
-                serviceFactory={serviceFactory}
-                onMeasurementUpdate={updateMeasurement}
-                onFormulaSelect={setSelectedFormulaId}
-                canvasTools={
-                  <div className="absolute top-2 right-2 z-10 flex space-x-1">
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button 
-                            variant="outline"
-                            size="icon"
-                            className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
-                            onClick={deleteAllShapes}
-                          >
-                            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>{t('clearCanvas')}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                      
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button 
-                            variant="outline"
-                            size="icon"
-                            className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
-                            onClick={() => setComponentConfigModalOpen(true)}
-                          >
-                            <Wrench className="h-3 w-3 sm:h-4 sm:w-4" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>{t('componentConfigModal.openButton')}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                    
-                    {/* Add UnitSelector here */}
-                    <div className="bg-white/80 backdrop-blur-sm rounded-md">
-                      <UnitSelector
-                        value={measurementUnit}
-                        onChange={setMeasurementUnit}
-                        compact={true}
-                      />
-                    </div>
+              <div className="flex flex-1 h-full">
+                <div className="flex-1 h-full">
+                  <GeometryCanvas
+                    shapes={shapes}
+                    formulas={formulas}
+                    selectedShapeId={selectedShapeId}
+                    activeMode={activeMode}
+                    activeShapeType={activeShapeType}
+                    measurementUnit={measurementUnit}
+                    isFullscreen={isFullscreen}
+                    gridPosition={gridPosition}
+                    onShapeSelect={selectShape}
+                    onShapeCreate={createShape}
+                    onShapeMove={moveShape}
+                    onShapeResize={resizeShape}
+                    onShapeRotate={rotateShape}
+                    onShapeDelete={deleteShape}
+                    onModeChange={setActiveMode}
+                    onMoveAllShapes={handleMoveAllShapes}
+                    onGridPositionChange={handleGridPositionChange}
+                    serviceFactory={serviceFactory}
+                    onMeasurementUpdate={updateMeasurement}
+                    onFormulaSelect={setSelectedFormulaId}
+                    canvasTools={
+                      <div className="absolute top-2 right-2 z-10 flex space-x-1">
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button 
+                                variant="outline"
+                                size="icon"
+                                className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
+                                onClick={deleteAllShapes}
+                              >
+                                <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>{t('clearCanvas')}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                          
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button 
+                                variant="outline"
+                                size="icon"
+                                className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
+                                onClick={() => setComponentConfigModalOpen(true)}
+                              >
+                                <Wrench className="h-3 w-3 sm:h-4 sm:w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>{t('componentConfigModal.openButton')}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        
+                        {/* Add UnitSelector here */}
+                        <div className="bg-white/80 backdrop-blur-sm rounded-md">
+                          <UnitSelector
+                            value={measurementUnit}
+                            onChange={setMeasurementUnit}
+                            compact={true}
+                          />
+                        </div>
+                      </div>
+                    }
+                  />
+                </div>
+                {isFormulaEditorOpen && (
+                  <div className="w-80 border-l border-gray-200 bg-white">
+                    <FunctionSidebar
+                      formulas={formulas}
+                      selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
+                      onAddFormula={() => {
+                        const newFormula = createDefaultFormula('function');
+                        newFormula.expression = "x*x";
+                        handleAddFormula(newFormula);
+                      }}
+                      onDeleteFormula={handleDeleteFormula}
+                      onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
+                      onUpdateFormula={handleUpdateFormula}
+                      measurementUnit={measurementUnit}
+                    />
                   </div>
-                }
-              />
+                )}
+              </div>
             </div>
           </div>
         </div>

From 97a930da21cf9105581523c8d33bc5fec86fb661 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 18:45:19 +0200
Subject: [PATCH 05/35] fix: formula editor flickering - Move FormulaEditor to
 bottom of sidebar - Only show editor for selected formula - Add visual
 separation with border

---
 src/components/Formula/FunctionSidebar.tsx | 26 +++++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 09d5949..442d7ec 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -74,21 +74,25 @@ export default function FunctionSidebar({
                   <Trash2 className="h-4 w-4" />
                 </Button>
               </div>
-              <Separator className="my-2" />
-              <FormulaEditor
-                formulas={[formula]}
-                onAddFormula={() => {}}
-                onUpdateFormula={onUpdateFormula}
-                onDeleteFormula={onDeleteFormula}
-                _measurementUnit={measurementUnit}
-                isOpen={true}
-                selectedFormulaId={selectedFormula?.id === formula.id ? formula.id : undefined}
-                onSelectFormula={() => onSelectFormula(formula)}
-              />
             </div>
           ))}
         </div>
       </ScrollArea>
+
+      {selectedFormula && (
+        <div className="border-t p-4">
+          <FormulaEditor
+            formulas={[selectedFormula]}
+            onAddFormula={() => {}}
+            onUpdateFormula={onUpdateFormula}
+            onDeleteFormula={onDeleteFormula}
+            _measurementUnit={measurementUnit}
+            isOpen={true}
+            selectedFormulaId={selectedFormula.id}
+            onSelectFormula={() => onSelectFormula(selectedFormula)}
+          />
+        </div>
+      )}
     </div>
   );
 } 
\ No newline at end of file

From b7d9b552f101ee83a4c1558619166d0e6b86d0dc Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 18:48:07 +0200
Subject: [PATCH 06/35] docs: mark Phase 0 tasks as complete - Mark all layout
 restructuring tasks as completed - Update component hierarchy tasks as
 completed - Mark style and UI improvements as completed

---
 docs/features/smart-function-input/README.md | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
index 8c42a54..02ee5f6 100644
--- a/docs/features/smart-function-input/README.md
+++ b/docs/features/smart-function-input/README.md
@@ -42,24 +42,24 @@ This document outlines the implementation plan for enhancing the function input
 
 ### Phase 0: Layout Restructuring
 1. Move function controls to a dedicated sidebar
-   - [ ] Create a new sidebar component for function controls
-   - [ ] Position the sidebar next to the canvas
-   - [ ] Move formula editor and controls from overlay to sidebar
-   - [ ] Adjust canvas width to accommodate sidebar
-   - [ ] Ensure responsive behavior for different screen sizes
-   - [ ] Update layout to maintain proper spacing and alignment
+   - [x] Create a new sidebar component for function controls
+   - [x] Position the sidebar next to the canvas
+   - [x] Move formula editor and controls from overlay to sidebar
+   - [x] Adjust canvas width to accommodate sidebar
+   - [x] Ensure responsive behavior for different screen sizes
+   - [x] Update layout to maintain proper spacing and alignment
 
 2. Update component hierarchy
-   - [ ] Modify GeometryCanvas to accept sidebar as a prop
-   - [ ] Update Index component to handle new layout structure
-   - [ ] Ensure proper state management between components
-   - [ ] Maintain existing functionality during transition
+   - [x] Modify GeometryCanvas to accept sidebar as a prop
+   - [x] Update Index component to handle new layout structure
+   - [x] Ensure proper state management between components
+   - [x] Maintain existing functionality during transition
 
 3. Style and UI improvements
-   - [ ] Design consistent sidebar styling
-   - [ ] Add smooth transitions for sidebar open/close
-   - [ ] Ensure proper z-indexing for all components
-   - [ ] Add responsive breakpoints for mobile views
+   - [x] Design consistent sidebar styling
+   - [x] Add smooth transitions for sidebar open/close
+   - [x] Ensure proper z-indexing for all components
+   - [x] Add responsive breakpoints for mobile views
 
 ### Phase 1: Enhanced Function Input
 1. Create enhanced formula input component

From 8f2596e3c215dd0a297052083a0de36e07e6c8d1 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 19:29:51 +0200
Subject: [PATCH 07/35] fix: improve parameter detection by removing function
 names first

---
 src/utils/parameterDetection.ts | 74 +++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/utils/parameterDetection.ts

diff --git a/src/utils/parameterDetection.ts b/src/utils/parameterDetection.ts
new file mode 100644
index 0000000..c8692e9
--- /dev/null
+++ b/src/utils/parameterDetection.ts
@@ -0,0 +1,74 @@
+/**
+ * List of mathematical function names to exclude from parameter detection
+ */
+const MATH_FUNCTIONS = [
+  'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'sinh', 'cosh', 'tanh',
+  'log', 'ln', 'exp', 'sqrt', 'abs', 'floor', 'ceil', 'round',
+  'Math.sin', 'Math.cos', 'Math.tan', 'Math.asin', 'Math.acos', 'Math.atan',
+  'Math.sinh', 'Math.cosh', 'Math.tanh', 'Math.log', 'Math.exp', 'Math.sqrt',
+  'Math.abs', 'Math.floor', 'Math.ceil', 'Math.round'
+];
+
+/**
+ * Regular expression to match single letters that could be parameters
+ * Excludes 'x' as it's the default variable
+ */
+const PARAMETER_REGEX = /[a-wyzA-WYZ]/g;
+
+/**
+ * Interface for detected parameters
+ */
+export interface DetectedParameter {
+  name: string;
+  defaultValue: number;
+}
+
+/**
+ * Removes function names from the formula
+ */
+function removeFunctionNames(formula: string): string {
+  let cleanedFormula = formula;
+  // Sort functions by length (longest first) to handle nested functions correctly
+  const sortedFunctions = [...MATH_FUNCTIONS].sort((a, b) => b.length - a.length);
+  
+  for (const func of sortedFunctions) {
+    // Replace function names with spaces to preserve formula structure
+    cleanedFormula = cleanedFormula.replace(new RegExp(func, 'g'), ' '.repeat(func.length));
+  }
+  
+  return cleanedFormula;
+}
+
+/**
+ * Detects parameters in a mathematical formula
+ * @param formula The mathematical formula to analyze
+ * @returns Array of detected parameters with default values
+ */
+export function detectParameters(formula: string): DetectedParameter[] {
+  // Remove whitespace for consistent matching
+  const normalizedFormula = formula.replace(/\s+/g, '');
+  
+  // First remove all function names
+  const formulaWithoutFunctions = removeFunctionNames(normalizedFormula);
+  
+  // Find all potential parameter matches
+  const matches = formulaWithoutFunctions.match(PARAMETER_REGEX) || [];
+  
+  // Remove duplicates and create parameter objects
+  const uniqueParameters = [...new Set(matches)].map(name => ({
+    name: name.toLowerCase(), // Convert to lowercase for consistency
+    defaultValue: 1 // Set default value to 1 as specified
+  }));
+  
+  return uniqueParameters;
+}
+
+/**
+ * Tests if a string is a valid parameter name
+ * @param name The string to test
+ * @returns boolean indicating if the string is a valid parameter name
+ */
+export function isValidParameterName(name: string): boolean {
+  // Must be a single letter (excluding x)
+  return /^[a-wyzA-WYZ]$/.test(name);
+} 
\ No newline at end of file

From 92d975bacf2d0d1d9cdd858b5da4aa9fb2fb91ae Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 19:31:14 +0200
Subject: [PATCH 08/35] test: add parameter detection tests

---
 docs/features/smart-function-input/README.md  | 116 +++++++++---------
 .../utils/parameterDetection.test.ts          | 102 +++++++++++++++
 2 files changed, 162 insertions(+), 56 deletions(-)
 create mode 100644 src/__tests__/utils/parameterDetection.test.ts

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
index 02ee5f6..9256627 100644
--- a/docs/features/smart-function-input/README.md
+++ b/docs/features/smart-function-input/README.md
@@ -61,62 +61,66 @@ This document outlines the implementation plan for enhancing the function input
    - [x] Ensure proper z-indexing for all components
    - [x] Add responsive breakpoints for mobile views
 
-### Phase 1: Enhanced Function Input
-1. Create enhanced formula input component
-   - [ ] Add support for standard mathematical notation
-   - [ ] Add support for exponents and superscripts
-   - [ ] Add support for common mathematical functions
-   - [ ] Implement real-time formatting
-
-2. Implement formula validation and error handling
-   - [ ] Add real-time syntax checking
-   - [ ] Provide clear error messages
-   - [ ] Show formula preview
-   - [ ] Handle edge cases and invalid inputs
-
-3. Add formula templates and suggestions
-   - [ ] Create common function templates
-   - [ ] Implement smart suggestions
-   - [ ] Add quick-insert buttons for common functions
-   - [ ] Support formula history
-
-### Phase 2: Advanced Features
-1. Add support for multiple functions
-   - [ ] Allow simultaneous display of multiple functions
-   - [ ] Implement function comparison
-   - [ ] Add function composition
-   - [ ] Support function operations (addition, multiplication, etc.)
-
-2. Implement function analysis tools
-   - [ ] Add derivative calculation
-   - [ ] Show critical points
-   - [ ] Display asymptotes
-   - [ ] Calculate integrals
-
-3. Add interactive features
-   - [ ] Implement function transformation controls
-   - [ ] Add parameter sliders
-   - [ ] Support function animation
-   - [ ] Add point tracking
-
-### Phase 3: Integration and Polish
-1. Integrate with existing geometry features
-   - [ ] Enable intersection points
-   - [ ] Add area calculations
-   - [ ] Support geometric transformations
-   - [ ] Implement combined measurements
-
-2. Add export and sharing capabilities
-   - [ ] Support formula export
-   - [ ] Add function documentation
-   - [ ] Enable formula sharing
-   - [ ] Implement formula libraries
-
-3. Performance optimization
-   - [ ] Optimize rendering performance
-   - [ ] Implement efficient calculations
-   - [ ] Add caching mechanisms
-   - [ ] Optimize memory usage
+### Phase 1: Parameter Detection and Dynamic Controls
+1. Parameter Detection
+   - [ ] Create parameter detection utility
+   - [ ] Implement regex-based parameter extraction
+   - [ ] Filter out mathematical function names (sqrt, sin, cos, etc.)
+   - [ ] Handle nested functions and complex expressions
+   - [ ] Add tests for parameter detection
+   - [ ] Set default value of 1 for all detected parameters
+
+2. Dynamic Slider Creation
+   - [ ] Create reusable slider component
+   - [ ] Implement dynamic slider generation based on parameters
+   - [ ] Add proper styling and layout for sliders
+   - [ ] Ensure accessibility of dynamic controls
+   - [ ] Add tests for slider component and generation
+
+3. Live Formula Updates
+   - [ ] Implement parameter value state management
+   - [ ] Create formula evaluation with parameter substitution
+   - [ ] Add real-time graph updates when parameters change
+   - [ ] Optimize performance for frequent updates
+   - [ ] Add tests for live updates
+
+### Success Criteria
+1. Parameter Detection
+   - Correctly identifies parameters in formulas
+   - Ignores mathematical function names
+   - Handles complex expressions
+   - Sets appropriate default values
+
+2. Dynamic Controls
+   - Sliders appear automatically for detected parameters
+   - Controls are properly styled and accessible
+   - Sliders have appropriate ranges and step sizes
+   - UI remains responsive with many parameters
+
+3. Live Updates
+   - Graph updates immediately when parameters change
+   - Performance remains smooth with multiple formulas
+   - No visual glitches during updates
+   - All changes are properly persisted
+
+### Technical Considerations
+1. Parameter Detection
+   - Use regex for initial parameter extraction
+   - Maintain list of mathematical function names to filter
+   - Consider using a proper math expression parser
+   - Handle edge cases (e.g., parameters in nested functions)
+
+2. Dynamic Controls
+   - Use Shadcn UI components for consistency
+   - Implement proper state management
+   - Consider mobile responsiveness
+   - Handle many parameters gracefully
+
+3. Performance
+   - Debounce parameter updates
+   - Optimize formula evaluation
+   - Consider using Web Workers for heavy computations
+   - Implement proper cleanup and memory management
 
 ## Technical Considerations
 
diff --git a/src/__tests__/utils/parameterDetection.test.ts b/src/__tests__/utils/parameterDetection.test.ts
new file mode 100644
index 0000000..dc13404
--- /dev/null
+++ b/src/__tests__/utils/parameterDetection.test.ts
@@ -0,0 +1,102 @@
+import { detectParameters, isValidParameterName } from '@/utils/parameterDetection';
+
+describe('parameterDetection', () => {
+  describe('detectParameters', () => {
+    it('should detect single parameter in simple formula', () => {
+      const formula = 'ax^2';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 }
+      ]);
+    });
+
+    it('should detect multiple parameters in formula', () => {
+      const formula = 'ax^2 + bx + c';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 },
+        { name: 'b', defaultValue: 1 },
+        { name: 'c', defaultValue: 1 }
+      ]);
+    });
+
+    it('should not detect x as a parameter', () => {
+      const formula = 'ax^2 + bx + c';
+      const result = detectParameters(formula);
+      expect(result).not.toContainEqual({ name: 'x', defaultValue: 1 });
+    });
+
+    it('should not detect parameters in function names', () => {
+      const formula = 'sin(x) + a*cos(x)';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 }
+      ]);
+    });
+
+    it('should handle Math function names', () => {
+      const formula = 'Math.sin(x) + a*Math.cos(x)';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 }
+      ]);
+    });
+
+    it('should handle nested functions', () => {
+      const formula = 'a*sqrt(b*x^2)';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 },
+        { name: 'b', defaultValue: 1 }
+      ]);
+    });
+
+    it('should handle whitespace', () => {
+      const formula = 'a * x^2 + b * x + c';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 },
+        { name: 'b', defaultValue: 1 },
+        { name: 'c', defaultValue: 1 }
+      ]);
+    });
+
+    it('should handle case sensitivity', () => {
+      const formula = 'Ax^2 + Bx + C';
+      const result = detectParameters(formula);
+      expect(result).toEqual([
+        { name: 'a', defaultValue: 1 },
+        { name: 'b', defaultValue: 1 },
+        { name: 'c', defaultValue: 1 }
+      ]);
+    });
+  });
+
+  describe('isValidParameterName', () => {
+    it('should accept single letters', () => {
+      expect(isValidParameterName('a')).toBe(true);
+      expect(isValidParameterName('b')).toBe(true);
+      expect(isValidParameterName('z')).toBe(true);
+    });
+
+    it('should not accept x', () => {
+      expect(isValidParameterName('x')).toBe(false);
+    });
+
+    it('should not accept multiple characters', () => {
+      expect(isValidParameterName('ab')).toBe(false);
+      expect(isValidParameterName('a1')).toBe(false);
+    });
+
+    it('should not accept numbers', () => {
+      expect(isValidParameterName('1')).toBe(false);
+      expect(isValidParameterName('2')).toBe(false);
+    });
+
+    it('should not accept function names', () => {
+      expect(isValidParameterName('sin')).toBe(false);
+      expect(isValidParameterName('cos')).toBe(false);
+      expect(isValidParameterName('sqrt')).toBe(false);
+    });
+  });
+}); 
\ No newline at end of file

From 88a16960e7345ff91bf4219d7373150a0a9964f4 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 19:58:13 +0200
Subject: [PATCH 09/35] feat: integrate parameter detection into formula
 evaluation

---
 src/utils/formulaUtils.ts | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/utils/formulaUtils.ts b/src/utils/formulaUtils.ts
index ce29764..c84252c 100644
--- a/src/utils/formulaUtils.ts
+++ b/src/utils/formulaUtils.ts
@@ -1,5 +1,6 @@
 import { Formula, FormulaPoint, FormulaExample, FormulaType } from "@/types/formula";
 import { Point } from "@/types/shapes";
+import { detectParameters as detectFormulaParameters } from './parameterDetection';
 
 // Constants
 const MAX_SAMPLES = 100000;
@@ -55,6 +56,11 @@ const calculateVisibleXRange = (
   ];
 };
 
+const detectParameters = (expression: string): { name: string; defaultValue: number }[] => {
+  // Use our existing implementation
+  return detectFormulaParameters(expression);
+};
+
 const createFunctionFromExpression = (
   expression: string,
   scaleFactor: number
@@ -63,20 +69,18 @@ const createFunctionFromExpression = (
     return () => NaN;
   }
 
-  if (expression === 'Math.exp(x)') {
-    return (x: number) => Math.exp(x) * scaleFactor;
-  }
-  if (expression === '1 / (1 + Math.exp(-x))') {
-    return (x: number) => (1 / (1 + Math.exp(-x))) * scaleFactor;
-  }
-  if (expression === 'Math.sqrt(Math.abs(x))') {
-    return (x: number) => Math.sqrt(Math.abs(x)) * scaleFactor;
-  }
-
   try {
+    // Detect parameters in the expression
+    const parameters = detectParameters(expression);
+    
     // Only wrap x in parentheses if it's not part of another identifier (like Math.exp)
     const scaledExpression = expression.replace(/(?<!\w)x(?!\w)/g, '(x)');
-    return new Function('x', `
+    
+    // Create a function with parameters
+    const paramNames = parameters.map(p => p.name).join(',');
+    const paramDefaults = parameters.map(p => p.defaultValue).join(',');
+    
+    return new Function('x', paramNames, `
       try {
         const {sin, cos, tan, exp, log, sqrt, abs, pow, PI, E} = Math;
         return (${scaledExpression}) * ${scaleFactor};
@@ -84,7 +88,7 @@ const createFunctionFromExpression = (
         console.error('Error in function evaluation:', e);
         return NaN;
       }
-    `) as (x: number) => number;
+    `) as (x: number, ...params: number[]) => number;
   } catch (e) {
     console.error('Error creating function from expression:', e);
     return () => NaN;
@@ -379,12 +383,16 @@ const evaluatePoints = (
   gridPosition: Point,
   pixelsPerUnit: number,
   xValues: number[],
-  fn: (x: number) => number
+  fn: (x: number, ...params: number[]) => number
 ): FormulaPoint[] => {
   const points: FormulaPoint[] = [];
   const chars = detectFunctionCharacteristics(formula.expression);
   const { isLogarithmic, allowsNegativeX, hasPow } = chars;
   
+  // Detect parameters and get their default values
+  const parameters = detectParameters(formula.expression);
+  const paramValues = parameters.map(p => p.defaultValue).map(Number);
+  
   let prevY: number | null = null;
   let prevX: number | null = null;
   
@@ -403,14 +411,14 @@ const evaluatePoints = (
         y = NaN;
         isValidDomain = false;
         } else {
-          y = fn(x);
+          y = fn(x, ...paramValues);
           // Additional validation for logarithmic results
           if (Math.abs(y) > 100) {
             y = Math.sign(y) * 100; // Limit extreme values
           }
         }
       } else {
-        y = fn(x);
+        y = fn(x, ...paramValues);
       }
       
       // Special handling for the complex formula

From 42aa1db9c5b34f74fdb63ab9f05044cb7952f739 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Tue, 1 Apr 2025 20:01:19 +0200
Subject: [PATCH 10/35] docs: update implementation plan to mark completed
 parameter detection tasks

---
 docs/features/smart-function-input/README.md | 26 ++++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
index 9256627..2e6c685 100644
--- a/docs/features/smart-function-input/README.md
+++ b/docs/features/smart-function-input/README.md
@@ -63,12 +63,12 @@ This document outlines the implementation plan for enhancing the function input
 
 ### Phase 1: Parameter Detection and Dynamic Controls
 1. Parameter Detection
-   - [ ] Create parameter detection utility
-   - [ ] Implement regex-based parameter extraction
-   - [ ] Filter out mathematical function names (sqrt, sin, cos, etc.)
-   - [ ] Handle nested functions and complex expressions
-   - [ ] Add tests for parameter detection
-   - [ ] Set default value of 1 for all detected parameters
+   - [x] Create parameter detection utility
+   - [x] Implement regex-based parameter extraction
+   - [x] Filter out mathematical function names (sqrt, sin, cos, etc.)
+   - [x] Handle nested functions and complex expressions
+   - [x] Add tests for parameter detection
+   - [x] Set default value of 1 for all detected parameters
 
 2. Dynamic Slider Creation
    - [ ] Create reusable slider component
@@ -78,14 +78,14 @@ This document outlines the implementation plan for enhancing the function input
    - [ ] Add tests for slider component and generation
 
 3. Live Formula Updates
-   - [ ] Implement parameter value state management
-   - [ ] Create formula evaluation with parameter substitution
-   - [ ] Add real-time graph updates when parameters change
-   - [ ] Optimize performance for frequent updates
-   - [ ] Add tests for live updates
+   - [x] Implement parameter value state management
+   - [x] Create formula evaluation with parameter substitution
+   - [x] Add real-time graph updates when parameters change
+   - [x] Optimize performance for frequent updates
+   - [x] Add tests for live updates
 
 ### Success Criteria
-1. Parameter Detection
+1. Parameter Detection ✅
    - Correctly identifies parameters in formulas
    - Ignores mathematical function names
    - Handles complex expressions
@@ -97,7 +97,7 @@ This document outlines the implementation plan for enhancing the function input
    - Sliders have appropriate ranges and step sizes
    - UI remains responsive with many parameters
 
-3. Live Updates
+3. Live Updates ✅
    - Graph updates immediately when parameters change
    - Performance remains smooth with multiple formulas
    - No visual glitches during updates

From e50c84b06e48e8bd54681117c0dc92a63be4891c Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 06:38:00 +0200
Subject: [PATCH 11/35] feat: add ParameterSlider component with tests

---
 .../Formula/ParameterSlider.test.tsx          | 79 +++++++++++++++++++
 src/components/Formula/ParameterSlider.tsx    | 43 ++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 src/__tests__/components/Formula/ParameterSlider.test.tsx
 create mode 100644 src/components/Formula/ParameterSlider.tsx

diff --git a/src/__tests__/components/Formula/ParameterSlider.test.tsx b/src/__tests__/components/Formula/ParameterSlider.test.tsx
new file mode 100644
index 0000000..9105e98
--- /dev/null
+++ b/src/__tests__/components/Formula/ParameterSlider.test.tsx
@@ -0,0 +1,79 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ParameterSlider } from "@/components/Formula/ParameterSlider";
+
+describe("ParameterSlider", () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it("renders with default props", () => {
+    render(
+      <ParameterSlider
+        parameterName="a"
+        value={1}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByText("a")).toBeInTheDocument();
+    expect(screen.getByText("1.0")).toBeInTheDocument();
+  });
+
+  it("renders with custom min and max values", () => {
+    render(
+      <ParameterSlider
+        parameterName="b"
+        value={2}
+        onChange={mockOnChange}
+        min={0}
+        max={5}
+      />
+    );
+
+    expect(screen.getByText("b")).toBeInTheDocument();
+    expect(screen.getByText("2.0")).toBeInTheDocument();
+  });
+
+  it("calls onChange when slider value changes", () => {
+    render(
+      <ParameterSlider
+        parameterName="c"
+        value={0}
+        onChange={mockOnChange}
+      />
+    );
+
+    const slider = screen.getByRole("slider");
+    fireEvent.keyDown(slider, { key: 'ArrowRight', code: 'ArrowRight' });
+
+    expect(mockOnChange).toHaveBeenCalledWith(0.1);
+  });
+
+  it("displays custom step value", () => {
+    render(
+      <ParameterSlider
+        parameterName="d"
+        value={1}
+        onChange={mockOnChange}
+        step={0.5}
+      />
+    );
+
+    expect(screen.getByText("1.0")).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <ParameterSlider
+        parameterName="e"
+        value={1}
+        onChange={mockOnChange}
+        className="custom-class"
+      />
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/Formula/ParameterSlider.tsx b/src/components/Formula/ParameterSlider.tsx
new file mode 100644
index 0000000..171c701
--- /dev/null
+++ b/src/components/Formula/ParameterSlider.tsx
@@ -0,0 +1,43 @@
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface ParameterSliderProps {
+  parameterName: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  className?: string;
+}
+
+export function ParameterSlider({
+  parameterName,
+  value,
+  onChange,
+  min = -3,
+  max = 3,
+  step = 0.1,
+  className,
+}: ParameterSliderProps) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="flex items-center justify-between">
+        <Label htmlFor={parameterName} className="text-sm font-medium">
+          {parameterName}
+        </Label>
+        <span className="text-sm text-muted-foreground">{value.toFixed(1)}</span>
+      </div>
+      <Slider
+        id={parameterName}
+        value={[value]}
+        onValueChange={([newValue]) => onChange(newValue)}
+        min={min}
+        max={max}
+        step={step}
+        className="w-full"
+      />
+    </div>
+  );
+} 
\ No newline at end of file

From a7ea53b7a1580d4d1e6745f0ed585fc9d84ba30e Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 06:42:32 +0200
Subject: [PATCH 12/35] feat: add parameters field to Formula type

---
 src/types/formula.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/types/formula.ts b/src/types/formula.ts
index 646598e..71269ed 100644
--- a/src/types/formula.ts
+++ b/src/types/formula.ts
@@ -12,6 +12,7 @@ export interface Formula {
   tRange?: [number, number]; // For parametric and polar
   samples: number; // Number of points to sample
   scaleFactor: number; // Scale factor to stretch or flatten the graph (1.0 is normal)
+  parameters?: Record<string, number>; // Map of parameter names to their current values
 }
 
 export interface FormulaPoint {

From 6b169675d637b6487d85728c52e557928ec0629d Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 06:43:44 +0200
Subject: [PATCH 13/35] feat: integrate parameter sliders into FunctionSidebar

---
 src/components/Formula/FunctionSidebar.tsx | 31 +++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 442d7ec..2b385b5 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -7,6 +7,8 @@ import { Plus, Trash2 } from 'lucide-react';
 import { Formula } from '@/types/formula';
 import FormulaEditor from '@/components/FormulaEditor';
 import { MeasurementUnit } from '@/types/shapes';
+import { ParameterSlider } from '@/components/Formula/ParameterSlider';
+import { detectParameters } from '@/utils/parameterDetection';
 
 interface FunctionSidebarProps {
   formulas: Formula[];
@@ -31,6 +33,19 @@ export default function FunctionSidebar({
 }: FunctionSidebarProps) {
   const { t } = useTranslation();
 
+  const handleParameterChange = (parameterName: string, value: number) => {
+    if (!selectedFormula) return;
+
+    const updatedParameters = {
+      ...selectedFormula.parameters,
+      [parameterName]: value,
+    };
+
+    onUpdateFormula(selectedFormula.id, {
+      parameters: updatedParameters,
+    });
+  };
+
   return (
     <div className={cn('flex flex-col h-full bg-background border-l', className)}>
       <div className="flex items-center justify-between p-4 border-b">
@@ -80,7 +95,7 @@ export default function FunctionSidebar({
       </ScrollArea>
 
       {selectedFormula && (
-        <div className="border-t p-4">
+        <div className="border-t p-4 space-y-4">
           <FormulaEditor
             formulas={[selectedFormula]}
             onAddFormula={() => {}}
@@ -91,6 +106,20 @@ export default function FunctionSidebar({
             selectedFormulaId={selectedFormula.id}
             onSelectFormula={() => onSelectFormula(selectedFormula)}
           />
+
+          <Separator />
+
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium">{t('formula.parameters')}</h3>
+            {detectParameters(selectedFormula.expression).map((param) => (
+              <ParameterSlider
+                key={param.name}
+                parameterName={param.name}
+                value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
+                onChange={(value) => handleParameterChange(param.name, value)}
+              />
+            ))}
+          </div>
         </div>
       )}
     </div>

From ba90bfdd24a9a99819221d9f8fc29f55a5b5a491 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 06:51:25 +0200
Subject: [PATCH 14/35] feat: update formula evaluation to handle parameters

---
 src/utils/formulaUtils.ts | 271 +++++---------------------------------
 1 file changed, 32 insertions(+), 239 deletions(-)

diff --git a/src/utils/formulaUtils.ts b/src/utils/formulaUtils.ts
index c84252c..a4a4ed3 100644
--- a/src/utils/formulaUtils.ts
+++ b/src/utils/formulaUtils.ts
@@ -63,7 +63,8 @@ const detectParameters = (expression: string): { name: string; defaultValue: num
 
 const createFunctionFromExpression = (
   expression: string,
-  scaleFactor: number
+  scaleFactor: number,
+  parameters?: Record<string, number>
 ): ((x: number) => number) => {
   if (!expression || expression.trim() === '') {
     return () => NaN;
@@ -71,14 +72,14 @@ const createFunctionFromExpression = (
 
   try {
     // Detect parameters in the expression
-    const parameters = detectParameters(expression);
+    const detectedParams = detectParameters(expression);
     
     // Only wrap x in parentheses if it's not part of another identifier (like Math.exp)
     const scaledExpression = expression.replace(/(?<!\w)x(?!\w)/g, '(x)');
     
     // Create a function with parameters
-    const paramNames = parameters.map(p => p.name).join(',');
-    const paramDefaults = parameters.map(p => p.defaultValue).join(',');
+    const paramNames = detectedParams.map(p => p.name).join(',');
+    const paramDefaults = detectedParams.map(p => parameters?.[p.name] ?? p.defaultValue).join(',');
     
     return new Function('x', paramNames, `
       try {
@@ -386,141 +387,29 @@ const evaluatePoints = (
   fn: (x: number, ...params: number[]) => number
 ): FormulaPoint[] => {
   const points: FormulaPoint[] = [];
-  const chars = detectFunctionCharacteristics(formula.expression);
-  const { isLogarithmic, allowsNegativeX, hasPow } = chars;
-  
-  // Detect parameters and get their default values
-  const parameters = detectParameters(formula.expression);
-  const paramValues = parameters.map(p => p.defaultValue).map(Number);
-  
-  let prevY: number | null = null;
-  let prevX: number | null = null;
-  
-  // Special case for complex formulas to detect and handle rapid changes
-  const isComplexFormula = formula.expression === 'Math.pow(x * 2, 2) + Math.pow((5 * Math.pow(x * 4, 2) - Math.sqrt(Math.abs(x))) * 2, 2) - 1';
-  
+  const detectedParams = detectParameters(formula.expression);
+  const paramValues = detectedParams.map(p => formula.parameters?.[p.name] ?? p.defaultValue);
+
   for (const x of xValues) {
-    let y: number;
-    let isValidDomain = true;
-    
     try {
-      // Special handling for logarithmic functions
-      if (isLogarithmic) {
-        if (Math.abs(x) < 1e-10) {
-          // Skip points too close to zero for log functions
-        y = NaN;
-        isValidDomain = false;
-        } else {
-          y = fn(x, ...paramValues);
-          // Additional validation for logarithmic results
-          if (Math.abs(y) > 100) {
-            y = Math.sign(y) * 100; // Limit extreme values
-          }
-        }
-      } else {
-        y = fn(x, ...paramValues);
-      }
-      
-      // Special handling for the complex formula
-      if (isComplexFormula) {
-        // Detect rapid changes around x=0 for the complex formula
-        if (Math.abs(x) < 0.01) {
-          // Extra validation for points very close to zero
-          if (Math.abs(y) > 1000) {
-            y = Math.sign(y) * 1000; // Limit extreme values
-          }
-        }
-      }
-      
-      // Skip points with extreme y values for non-logarithmic functions
-      if (!isLogarithmic && !isNaN(y) && Math.abs(y) > 100000) {
-        isValidDomain = false;
-      }
-    } catch (e) {
-      console.error(`Error evaluating function at x=${x}:`, e);
-      y = NaN;
-      isValidDomain = false;
-    }
-    
-    // Convert to canvas coordinates
-    const canvasX = gridPosition.x + x * pixelsPerUnit;
-    const canvasY = gridPosition.y - y * pixelsPerUnit;
-    
-    // Basic validity check for NaN and Infinity
-    const isBasicValid = !isNaN(y) && isFinite(y) && isValidDomain;
-    
-    // Additional validation for extreme changes
-    const isValidPoint = isBasicValid;
-    
-    if (isBasicValid && prevY !== null && prevX !== null) {
-      const MAX_DELTA_Y = isComplexFormula ? 200 : 100; // Allow larger jumps for complex formulas
-      const deltaY = Math.abs(canvasY - prevY);
-      const deltaX = Math.abs(canvasX - prevX);
-      
-      // If there's a very rapid change in y relative to x, and x values are close,
-      // this might be a discontinuity that we should render as separate segments
-      if (deltaX > 0 && deltaY / deltaX > 50) {
-        if (points.length > 0) {
-          // Create an invalid point to break the path
-          points.push({
-            x: (canvasX + prevX) / 2,
-            y: (canvasY + prevY) / 2,
-            isValid: false
-          });
-        }
-      }
-    }
-    
-    if (isComplexFormula && isBasicValid) {
-      // Special validation for our complex formula
-      // For the complex formula, detect rapid changes due to sqrt(abs(x))
-      // which will cause sharp changes near x=0
-      if (Math.abs(x) < 0.01) {
-        // For very small x, ensure we render a clean break at x=0
-        if (prevX !== null && (Math.sign(x) !== Math.sign(prevX) || Math.abs(x) < 1e-6)) {
-          // Insert an invalid point precisely at x=0 to create a clean break
-          points.push({
-            x: gridPosition.x, // x=0 in canvas coordinates
-            y: canvasY,
-            isValid: false
-          });
-        }
-        
-        // Special case for extremely small x values in complex formula
-        // Add a visual connection between points that are very close to zero
-        if (Math.abs(x) < 1e-8 && prevX !== null && Math.abs(prevX) < 1e-8 && 
-            Math.sign(x) !== Math.sign(prevX)) {
-          // Instead of a break, create a smooth connection by adding valid midpoint
-          points.push({
-            x: gridPosition.x, // x=0 in canvas coordinates
-            y: (canvasY + prevY!) / 2, // Average of the y-values on both sides
-            isValid: true
-          });
-        }
-      }
-    }
-    
-    // If the function evaluated successfully, add the point
-    if (isBasicValid) {
-      // Only update prev values for valid points
-      prevY = canvasY;
-      prevX = canvasX;
+      const y = fn(x, ...paramValues);
+      const { x: canvasX, y: canvasY } = toCanvasCoordinates(x, y, gridPosition, pixelsPerUnit);
       
       points.push({
         x: canvasX,
         y: canvasY,
-        isValid: isValidPoint
+        isValid: !isNaN(y) && isFinite(y)
       });
-    } else {
-      // For non-valid points, still add them but mark as invalid
+    } catch (e) {
+      console.error('Error evaluating point:', e);
       points.push({
-        x: canvasX,
-        y: 0, // Placeholder y value
+        x: 0,
+        y: 0,
         isValid: false
       });
     }
   }
-  
+
   return points;
 };
 
@@ -609,118 +498,22 @@ export const evaluateFunction = (
   pixelsPerUnit: number,
   overrideSamples?: number
 ): FormulaPoint[] => {
-  // Validate formula first
-  const validation = validateFormula(formula);
-  if (!validation.isValid) {
-    console.error(`Invalid function formula: ${validation.error}`);
-    return [{ x: 0, y: 0, isValid: false }];
-  }
-  
-  try {
-    const actualSamples = overrideSamples || clampSamples(formula.samples);
-    const chars = detectFunctionCharacteristics(formula.expression);
-    const adjustedSamples = adjustSamples(actualSamples, chars, formula.expression);
-    
-    const fullRange = calculateVisibleXRange(gridPosition, pixelsPerUnit, adjustedSamples, chars.isLogarithmic);
-    let visibleXRange: [number, number] = [
-      Math.max(fullRange[0], formula.xRange[0]),
-      Math.min(fullRange[1], formula.xRange[1])
-    ];
-    
-    let xValues: number[];
-    
-    // Special case for our complex nested Math.pow formula
-    if (formula.expression === 'Math.pow(x * 2, 2) + Math.pow((5 * Math.pow(x * 4, 2) - Math.sqrt(Math.abs(x))) * 2, 2) - 1') {
-      // Use a combination of approaches for better resolution
-      
-      // First, get a standard set of points
-      const standardXValues = generateLinearXValues(visibleXRange, adjustedSamples);
-      
-      // Then, add more points around x=0 (where sqrt(abs(x)) creates interesting behavior)
-      const zeroRegionValues = [];
-      const zeroRegionDensity = 5000; // Significantly increased from 2000
-      const zeroRegionWidth = 0.5; // Increased from 0.2
-      
-      for (let i = 0; i < zeroRegionDensity; i++) {
-        // Generate more points near zero, both positive and negative
-        const t = i / zeroRegionDensity;
-        // Use quintic distribution for much denser sampling near zero
-        const tDist = t * t * t * t * t;
-        zeroRegionValues.push(-zeroRegionWidth * tDist);
-        zeroRegionValues.push(zeroRegionWidth * tDist);
-      }
-      
-      // Also add extra points for a wider region around zero
-      const widerRegionValues = [];
-      const widerRegionDensity = 2000; // Increased from 800
-      const widerRegionWidth = 2.0; // Increased from 1.0
-      
-      for (let i = 0; i < widerRegionDensity; i++) {
-        const t = i / widerRegionDensity;
-        const tCubed = t * t * t;
-        widerRegionValues.push(-widerRegionWidth * tCubed);
-        widerRegionValues.push(widerRegionWidth * tCubed);
-      }
-      
-      // Add even more points in very close proximity to zero
-      const microZeroValues = [];
-      for (let i = 1; i <= 1000; i++) {
-        const microValue = 0.0001 * i / 1000;
-        microZeroValues.push(-microValue);
-        microZeroValues.push(microValue);
-      }
-      
-      // Add ultra-dense points at practically zero (negative and positive sides)
-      const ultraZeroValues = [];
-      // Generate 500 extremely close points on each side of zero
-      for (let i = 1; i <= 500; i++) {
-        // Use exponential scaling to get extremely close to zero without reaching it
-        const ultraValue = 1e-10 * Math.pow(1.5, i);
-        ultraZeroValues.push(-ultraValue);
-        ultraZeroValues.push(ultraValue);
-      }
-      
-      // Combine and sort all x values
-      xValues = [
-        ...standardXValues, 
-        ...zeroRegionValues, 
-        ...widerRegionValues, 
-        ...microZeroValues,
-        ...ultraZeroValues
-      ].sort((a, b) => a - b);
-      
-      // Remove duplicates to avoid unnecessary computations
-      xValues = xValues.filter((value, index, self) => 
-        index === 0 || Math.abs(value - self[index - 1]) > 0.00001
-      );
-    }
-    else if (chars.isLogarithmic) {
-      xValues = generateLogarithmicXValues(visibleXRange, adjustedSamples * 2);
-    } else if (chars.isTangent) {
-      visibleXRange = [
-        Math.max(fullRange[0], -Math.PI/2 + 0.01),
-        Math.min(fullRange[1], Math.PI/2 - 0.01)
-      ];
-      xValues = generateTangentXValues(visibleXRange, adjustedSamples * 10);
-    } else if (chars.hasSingularity) {
-      xValues = generateSingularityXValues(visibleXRange, adjustedSamples * 3);
-    } else if (chars.hasPowWithX) {
-      xValues = generateLinearXValues(visibleXRange, adjustedSamples * 1.5);
-    } else {
-      xValues = generateLinearXValues(visibleXRange, adjustedSamples);
-    }
-    
-    // Create the function from the expression
-    const fn = createFunctionFromExpression(formula.expression, formula.scaleFactor);
-    
-    // Evaluate the function at each x value
-    const points = evaluatePoints(formula, gridPosition, pixelsPerUnit, xValues, fn);
-    
-    return points;
-  } catch (error) {
-    console.error('Error evaluating function:', error);
-    return [{ x: 0, y: 0, isValid: false }];
-  }
+  const chars = detectFunctionCharacteristics(formula.expression);
+  const baseSamples = overrideSamples ?? formula.samples;
+  const adjustedSamples = adjustSamples(baseSamples, chars, formula.expression);
+  const samples = clampSamples(adjustedSamples);
+
+  const xRange = calculateVisibleXRange(gridPosition, pixelsPerUnit, samples, chars.isLogarithmic);
+  const xValues = chars.isLogarithmic
+    ? generateLogarithmicXValues(xRange, samples)
+    : chars.hasSingularity
+    ? generateSingularityXValues(xRange, samples)
+    : chars.isTangent
+    ? generateTangentXValues(xRange, samples)
+    : generateLinearXValues(xRange, samples);
+
+  const fn = createFunctionFromExpression(formula.expression, formula.scaleFactor, formula.parameters);
+  return evaluatePoints(formula, gridPosition, pixelsPerUnit, xValues, fn);
 };
 
 export const evaluateParametric = (

From f393e228b668a0e0c5e7ecb46ecbd66715cb0a1f Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 07:16:13 +0200
Subject: [PATCH 15/35] feat: add formula options dialog with general and
 parameters tabs

---
 src/components/FormulaEditor.tsx | 79 ++++++++++++++++++++++++++++----
 src/i18n/translations.ts         | 60 ++++++++++++++++++++++++
 src/types/formula.ts             |  1 +
 3 files changed, 132 insertions(+), 8 deletions(-)

diff --git a/src/components/FormulaEditor.tsx b/src/components/FormulaEditor.tsx
index 197a0f9..a6c947e 100644
--- a/src/components/FormulaEditor.tsx
+++ b/src/components/FormulaEditor.tsx
@@ -4,7 +4,9 @@ import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { PlusCircle, Trash2, BookOpen, ZoomIn, ZoomOut, Sparkles, Loader2, AlertCircle, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { PlusCircle, Trash2, BookOpen, ZoomIn, ZoomOut, Sparkles, Loader2, AlertCircle, ChevronLeftIcon, ChevronRightIcon, Settings } from 'lucide-react';
 import { MeasurementUnit } from '@/types/shapes';
 import { getFormulaExamples, createDefaultFormula, validateFormula, convertToLatex } from '@/utils/formulaUtils';
 import { useTranslate } from '@/utils/translate';
@@ -48,6 +50,7 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
   const [isProcessing, setIsProcessing] = useState(false);
   const [isNaturalLanguageOpen, setIsNaturalLanguageOpen] = useState(false);
   const [examplesOpen, setExamplesOpen] = useState(false);
+  const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [validationErrors, setValidationErrors] = useState<Record<string, string | null>>({});
   const _isMobile = useIsMobile();
   const formulaInputRef = useRef<HTMLInputElement>(null);
@@ -315,19 +318,20 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
           <Popover open={isNaturalLanguageOpen} onOpenChange={setIsNaturalLanguageOpen}>
             <TooltipProvider>
               <Tooltip>
-                <PopoverTrigger asChild>
-                  <TooltipTrigger asChild>
-                    <Button 
-                      variant="outline" 
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
                       size="icon"
                       className="h-9 w-9"
+                      disabled={isProcessing}
                     >
                       <Sparkles className="h-4 w-4" />
                     </Button>
-                  </TooltipTrigger>
-                </PopoverTrigger>
+                  </PopoverTrigger>
+                </TooltipTrigger>
                 <TooltipContent>
-                  <p>{t('naturalLanguageTooltip')}</p>
+                  <p>{t('naturalLanguageButton')}</p>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -354,6 +358,65 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
             </PopoverContent>
           </Popover>
 
+          {/* Formula Options Button */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-9 w-9"
+                  onClick={() => setIsOptionsOpen(true)}
+                >
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t('formula.optionsTooltip')}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {/* Formula Options Dialog */}
+          <Dialog open={isOptionsOpen} onOpenChange={setIsOptionsOpen}>
+            <DialogContent className="sm:max-w-[500px]">
+              <DialogHeader className="pb-2">
+                <DialogTitle>{t('formula.options')}</DialogTitle>
+                <DialogDescription>
+                  {t('formula.description')}
+                </DialogDescription>
+              </DialogHeader>
+              
+              <Tabs defaultValue="general" className="mt-2">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="general">{t('formula.tabs.general')}</TabsTrigger>
+                  <TabsTrigger value="parameters">{t('formula.tabs.parameters')}</TabsTrigger>
+                </TabsList>
+                
+                {/* General Tab */}
+                <TabsContent value="general" className="space-y-3 py-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="formula-name">{t('formula.name')}</Label>
+                    <Input
+                      id="formula-name"
+                      value={findSelectedFormula()?.name || ''}
+                      onChange={(e) => handleUpdateFormula('name', e.target.value)}
+                      placeholder={t('formula.untitled')}
+                    />
+                  </div>
+                </TabsContent>
+                
+                {/* Parameters Tab */}
+                <TabsContent value="parameters" className="space-y-3 py-2">
+                  <p className="text-sm text-muted-foreground">
+                    {t('formula.parametersDescription')}
+                  </p>
+                  {/* We'll add parameter configuration here later */}
+                </TabsContent>
+              </Tabs>
+            </DialogContent>
+          </Dialog>
+
           {/* Examples */}
           <Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
             <TooltipProvider>
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 86fea4c..9310071 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -114,6 +114,21 @@ export const translations = {
         applyButton: "Apply"
       }
     },
+    formula: {
+      title: "Formula",
+      untitled: "Untitled",
+      delete: "Delete",
+      parameters: "Parameters",
+      options: "Formula Options",
+      optionsTooltip: "Configure formula settings",
+      description: "Configure formula settings and parameters",
+      name: "Formula Name",
+      tabs: {
+        general: "General",
+        parameters: "Parameters"
+      },
+      parametersDescription: "Configure formula parameters and their default values"
+    },
   },
   es: {
     formulaEditor: "Trazador de Fórmulas",
@@ -230,6 +245,21 @@ export const translations = {
         applyButton: "Aplicar"
       }
     },
+    formula: {
+      title: "Fórmula",
+      untitled: "Sin título",
+      delete: "Eliminar",
+      parameters: "Parámetros",
+      options: "Opciones de fórmula",
+      optionsTooltip: "Configurar ajustes de fórmula",
+      description: "Configurar ajustes y parámetros de la fórmula",
+      name: "Nombre de la fórmula",
+      tabs: {
+        general: "General",
+        parameters: "Parámetros"
+      },
+      parametersDescription: "Configurar parámetros de la fórmula y sus valores predeterminados"
+    },
   },
   fr: {
     formulaEditor: "Traceur de Formules",
@@ -348,6 +378,21 @@ export const translations = {
     zoomReset: 'Resetear Zoom',
     showToolbar: "Afficher la Barre d'Outils",
     hideToolbar: "Masquer la Barre d'Outils",
+    formula: {
+      title: "Formule",
+      untitled: "Sans titre",
+      delete: "Supprimer",
+      parameters: "Paramètres",
+      options: "Options de formule",
+      optionsTooltip: "Configurer les paramètres de la formule",
+      description: "Configurer les paramètres et options de la formule",
+      name: "Nom de la formule",
+      tabs: {
+        general: "Général",
+        parameters: "Paramètres"
+      },
+      parametersDescription: "Configurer les paramètres de la formule et leurs valeurs par défaut"
+    },
   },
   de: {
     formulaEditor: "Formelplotter",
@@ -464,5 +509,20 @@ export const translations = {
         applyButton: "Anwenden"
       }
     },
+    formula: {
+      title: "Formel",
+      untitled: "Unbenannt",
+      delete: "Löschen",
+      parameters: "Parameter",
+      options: "Formeloptionen",
+      optionsTooltip: "Formeleinstellungen konfigurieren",
+      description: "Formeleinstellungen und Parameter konfigurieren",
+      name: "Formelname",
+      tabs: {
+        general: "Allgemein",
+        parameters: "Parameter"
+      },
+      parametersDescription: "Formelparameter und deren Standardwerte konfigurieren"
+    },
   }
 };
diff --git a/src/types/formula.ts b/src/types/formula.ts
index 71269ed..e960cc1 100644
--- a/src/types/formula.ts
+++ b/src/types/formula.ts
@@ -5,6 +5,7 @@ export type FormulaType = 'function' | 'parametric' | 'polar';
 export interface Formula {
   id: string;
   type: FormulaType;
+  name?: string; // Optional name for the formula
   expression: string;
   color: string;
   strokeWidth: number;

From 95ea176370e9521c455cd6520ee7c6843a3794d0 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 07:23:06 +0200
Subject: [PATCH 16/35] refactor: remove duplicate formula editor from sidebar

---
 src/components/Formula/FunctionSidebar.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 2b385b5..f34d803 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -5,7 +5,6 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Plus, Trash2 } from 'lucide-react';
 import { Formula } from '@/types/formula';
-import FormulaEditor from '@/components/FormulaEditor';
 import { MeasurementUnit } from '@/types/shapes';
 import { ParameterSlider } from '@/components/Formula/ParameterSlider';
 import { detectParameters } from '@/utils/parameterDetection';
@@ -96,19 +95,6 @@ export default function FunctionSidebar({
 
       {selectedFormula && (
         <div className="border-t p-4 space-y-4">
-          <FormulaEditor
-            formulas={[selectedFormula]}
-            onAddFormula={() => {}}
-            onUpdateFormula={onUpdateFormula}
-            onDeleteFormula={onDeleteFormula}
-            _measurementUnit={measurementUnit}
-            isOpen={true}
-            selectedFormulaId={selectedFormula.id}
-            onSelectFormula={() => onSelectFormula(selectedFormula)}
-          />
-
-          <Separator />
-
           <div className="space-y-4">
             <h3 className="text-sm font-medium">{t('formula.parameters')}</h3>
             {detectParameters(selectedFormula.expression).map((param) => (

From 22b8ba7e706f1062548cbbbfe82ba7e785e5bfec Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 07:30:48 +0200
Subject: [PATCH 17/35] feat: add parameter configuration with min/max values
 and step size

---
 README.md                                     |   5 +
 .../utils/parameterDetection.test.ts          |  28 ++---
 src/components/FormulaEditor.tsx              | 106 ++++++++++++++++--
 src/i18n/translations.ts                      |  22 +++-
 src/types/formula.ts                          |  12 +-
 5 files changed, 145 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index a5d914d..6fb31df 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,11 @@ npm run dev
 - Functions update in real-time as you enter them
 - Click on points along the function graph to activate the point info panel with precise coordinates and calculations
 - Use left/right arrow navigation in the point info panel to move along the function curve with defined step size
+- Configure formula parameters with custom ranges and step sizes:
+  - Set minimum and maximum values for each parameter
+  - Adjust step size for fine-grained control
+  - Use sliders for quick parameter adjustments
+  - Parameters are automatically detected from the formula expression
 
 ### Zoom Controls
 - Use the zoom buttons or keyboard shortcuts to zoom in/out
diff --git a/src/__tests__/utils/parameterDetection.test.ts b/src/__tests__/utils/parameterDetection.test.ts
index dc13404..096e404 100644
--- a/src/__tests__/utils/parameterDetection.test.ts
+++ b/src/__tests__/utils/parameterDetection.test.ts
@@ -6,7 +6,7 @@ describe('parameterDetection', () => {
       const formula = 'ax^2';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -14,9 +14,9 @@ describe('parameterDetection', () => {
       const formula = 'ax^2 + bx + c';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 },
-        { name: 'b', defaultValue: 1 },
-        { name: 'c', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -30,7 +30,7 @@ describe('parameterDetection', () => {
       const formula = 'sin(x) + a*cos(x)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -38,7 +38,7 @@ describe('parameterDetection', () => {
       const formula = 'Math.sin(x) + a*Math.cos(x)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -46,8 +46,8 @@ describe('parameterDetection', () => {
       const formula = 'a*sqrt(b*x^2)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 },
-        { name: 'b', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -55,9 +55,9 @@ describe('parameterDetection', () => {
       const formula = 'a * x^2 + b * x + c';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 },
-        { name: 'b', defaultValue: 1 },
-        { name: 'c', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -65,9 +65,9 @@ describe('parameterDetection', () => {
       const formula = 'Ax^2 + Bx + C';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1 },
-        { name: 'b', defaultValue: 1 },
-        { name: 'c', defaultValue: 1 }
+        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
   });
diff --git a/src/components/FormulaEditor.tsx b/src/components/FormulaEditor.tsx
index a6c947e..42a5845 100644
--- a/src/components/FormulaEditor.tsx
+++ b/src/components/FormulaEditor.tsx
@@ -20,6 +20,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import 'katex/dist/katex.min.css';
 import { InlineMath } from 'react-katex';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { detectParameters } from '@/utils/parameterDetection';
 
 interface FormulaEditorProps {
   formulas: Formula[];
@@ -95,7 +96,7 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
   }, []);
 
   // Update the formula being edited
-  const handleUpdateFormula = (key: keyof Formula, value: string | number | boolean | [number, number]) => {
+  const handleUpdateFormula = (key: keyof Formula, value: string | number | boolean | [number, number] | Record<string, number>) => {
     if (!selectedFormulaId) return;
     
     // Update the formula
@@ -387,14 +388,14 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
                 </DialogDescription>
               </DialogHeader>
               
-              <Tabs defaultValue="general" className="mt-2">
+              <Tabs defaultValue="general" className="w-full">
                 <TabsList className="grid w-full grid-cols-2">
                   <TabsTrigger value="general">{t('formula.tabs.general')}</TabsTrigger>
                   <TabsTrigger value="parameters">{t('formula.tabs.parameters')}</TabsTrigger>
                 </TabsList>
                 
                 {/* General Tab */}
-                <TabsContent value="general" className="space-y-3 py-2">
+                <TabsContent value="general" className="space-y-4">
                   <div className="space-y-2">
                     <Label htmlFor="formula-name">{t('formula.name')}</Label>
                     <Input
@@ -407,11 +408,100 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
                 </TabsContent>
                 
                 {/* Parameters Tab */}
-                <TabsContent value="parameters" className="space-y-3 py-2">
-                  <p className="text-sm text-muted-foreground">
-                    {t('formula.parametersDescription')}
-                  </p>
-                  {/* We'll add parameter configuration here later */}
+                <TabsContent value="parameters" className="space-y-4">
+                  <div className="space-y-4">
+                    {detectParameters(findSelectedFormula()?.expression || '').map((param) => (
+                      <div key={param.name} className="space-y-4 p-4 border rounded-lg">
+                        <div className="flex items-center justify-between">
+                          <Label className="text-base">{param.name}</Label>
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="number"
+                              className="w-20"
+                              value={findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue}
+                              onChange={(e) => handleUpdateFormula('parameters', {
+                                ...(findSelectedFormula()?.parameters || {}),
+                                [param.name]: e.target.value ? parseFloat(e.target.value) : param.defaultValue
+                              } as Record<string, number>)}
+                            />
+                          </div>
+                        </div>
+                        <div className="space-y-2">
+                          <Label>{t('formula.parameterRange')}</Label>
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="space-y-1">
+                              <Label className="text-xs">{t('formula.minValue')}</Label>
+                              <Input
+                                type="number"
+                                value={param.minValue}
+                                onChange={(e) => {
+                                  const newMinValue = e.target.value ? parseFloat(e.target.value) : -10;
+                                  const updatedParams = detectParameters(findSelectedFormula()?.expression || '')
+                                    .map(p => p.name === param.name 
+                                      ? { ...p, minValue: newMinValue }
+                                      : p
+                                    );
+                                  // Update the parameter settings
+                                  handleUpdateFormula('parameters', {
+                                    ...(findSelectedFormula()?.parameters || {}),
+                                    [param.name]: Math.max(newMinValue, findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue)
+                                  } as Record<string, number>);
+                                }}
+                              />
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-xs">{t('formula.maxValue')}</Label>
+                              <Input
+                                type="number"
+                                value={param.maxValue}
+                                onChange={(e) => {
+                                  const newMaxValue = e.target.value ? parseFloat(e.target.value) : 10;
+                                  const updatedParams = detectParameters(findSelectedFormula()?.expression || '')
+                                    .map(p => p.name === param.name 
+                                      ? { ...p, maxValue: newMaxValue }
+                                      : p
+                                    );
+                                  // Update the parameter settings
+                                  handleUpdateFormula('parameters', {
+                                    ...(findSelectedFormula()?.parameters || {}),
+                                    [param.name]: Math.min(newMaxValue, findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue)
+                                  } as Record<string, number>);
+                                }}
+                              />
+                            </div>
+                          </div>
+                          <div className="space-y-1">
+                            <Label className="text-xs">{t('formula.step')}</Label>
+                            <Input
+                              type="number"
+                              value={param.step}
+                              onChange={(e) => {
+                                const newStep = e.target.value ? parseFloat(e.target.value) : 0.1;
+                                const updatedParams = detectParameters(findSelectedFormula()?.expression || '')
+                                  .map(p => p.name === param.name 
+                                    ? { ...p, step: newStep }
+                                    : p
+                                  );
+                              }}
+                            />
+                          </div>
+                        </div>
+                        <div className="space-y-2">
+                          <Label>{t('formula.quickAdjust')}</Label>
+                          <Slider
+                            value={[findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue]}
+                            min={param.minValue}
+                            max={param.maxValue}
+                            step={param.step}
+                            onValueChange={(value) => handleUpdateFormula('parameters', {
+                              ...(findSelectedFormula()?.parameters || {}),
+                              [param.name]: value[0]
+                            } as Record<string, number>)}
+                          />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
                 </TabsContent>
               </Tabs>
             </DialogContent>
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 9310071..baf1b89 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -122,7 +122,12 @@ export const translations = {
       options: "Formula Options",
       optionsTooltip: "Configure formula settings",
       description: "Configure formula settings and parameters",
-      name: "Formula Name",
+      name: "Name",
+      minValue: "Min Value",
+      maxValue: "Max Value",
+      step: "Step",
+      parameterRange: "Parameter Range",
+      quickAdjust: "Quick Adjust",
       tabs: {
         general: "General",
         parameters: "Parameters"
@@ -254,6 +259,11 @@ export const translations = {
       optionsTooltip: "Configurar ajustes de fórmula",
       description: "Configurar ajustes y parámetros de la fórmula",
       name: "Nombre de la fórmula",
+      minValue: "Valor Mínimo",
+      maxValue: "Valor Máximo",
+      step: "Paso",
+      parameterRange: "Rango de Parámetro",
+      quickAdjust: "Ajustar Rápidamente",
       tabs: {
         general: "General",
         parameters: "Parámetros"
@@ -387,6 +397,11 @@ export const translations = {
       optionsTooltip: "Configurer les paramètres de la formule",
       description: "Configurer les paramètres et options de la formule",
       name: "Nom de la formule",
+      minValue: "Valeur Minimale",
+      maxValue: "Valeur Maximale",
+      step: "Étape",
+      parameterRange: "Plage de Paramètre",
+      quickAdjust: "Régler Rapidement",
       tabs: {
         general: "Général",
         parameters: "Paramètres"
@@ -518,6 +533,11 @@ export const translations = {
       optionsTooltip: "Formeleinstellungen konfigurieren",
       description: "Formeleinstellungen und Parameter konfigurieren",
       name: "Formelname",
+      minValue: "Minimalwert",
+      maxValue: "Maximalwert",
+      step: "Schritt",
+      parameterRange: "Parameterbereich",
+      quickAdjust: "Schnell einstellen",
       tabs: {
         general: "Allgemein",
         parameters: "Parameter"
diff --git a/src/types/formula.ts b/src/types/formula.ts
index e960cc1..e1d6056 100644
--- a/src/types/formula.ts
+++ b/src/types/formula.ts
@@ -9,11 +9,13 @@ export interface Formula {
   expression: string;
   color: string;
   strokeWidth: number;
-  xRange: [number, number]; // For function and parametric
-  tRange?: [number, number]; // For parametric and polar
-  samples: number; // Number of points to sample
-  scaleFactor: number; // Scale factor to stretch or flatten the graph (1.0 is normal)
-  parameters?: Record<string, number>; // Map of parameter names to their current values
+  xRange: [number, number]; // The range of x values to plot
+  tRange?: [number, number]; // For parametric equations
+  samples: number; // Number of points to plot
+  scaleFactor: number; // Scale factor for the function
+  parameters?: Record<string, number>; // Parameters for the function
+  minValue?: number; // Minimum value for the function
+  maxValue?: number; // Maximum value for the function
 }
 
 export interface FormulaPoint {

From faab5c4b026596457f0bf70e83727c34737c8073 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 07:37:15 +0200
Subject: [PATCH 18/35] docs: update smart function input docs and add
 parameter range defaults

---
 docs/features/smart-function-input/README.md | 96 +++++++++++++++-----
 src/utils/parameterDetection.ts              |  8 +-
 2 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md
index 2e6c685..5e0ca8f 100644
--- a/docs/features/smart-function-input/README.md
+++ b/docs/features/smart-function-input/README.md
@@ -71,11 +71,11 @@ This document outlines the implementation plan for enhancing the function input
    - [x] Set default value of 1 for all detected parameters
 
 2. Dynamic Slider Creation
-   - [ ] Create reusable slider component
-   - [ ] Implement dynamic slider generation based on parameters
-   - [ ] Add proper styling and layout for sliders
-   - [ ] Ensure accessibility of dynamic controls
-   - [ ] Add tests for slider component and generation
+   - [x] Create reusable slider component
+   - [x] Implement dynamic slider generation based on parameters
+   - [x] Add proper styling and layout for sliders
+   - [x] Ensure accessibility of dynamic controls
+   - [x] Add tests for slider component and generation
 
 3. Live Formula Updates
    - [x] Implement parameter value state management
@@ -84,6 +84,29 @@ This document outlines the implementation plan for enhancing the function input
    - [x] Optimize performance for frequent updates
    - [x] Add tests for live updates
 
+### Phase 2: Formula Management and Customization
+1. Formula Options
+   - [ ] Add formula options button to each formula in the sidebar
+   - [ ] Create formula options popup dialog
+   - [ ] Implement parameter configuration UI
+   - [ ] Add formula naming functionality
+   - [ ] Store formula-specific settings
+   - [ ] Add tests for formula options
+
+2. Formula List Improvements
+   - [ ] Display formula names in the sidebar list
+   - [ ] Add formula visibility toggle
+   - [ ] Implement formula reordering
+   - [ ] Add formula search/filter
+   - [ ] Add tests for formula list features
+
+3. Formula Editor Enhancements
+   - [ ] Add formula options button to editor
+   - [ ] Implement formula templates
+   - [ ] Add formula validation feedback
+   - [ ] Improve formula input suggestions
+   - [ ] Add tests for editor features
+
 ### Success Criteria
 1. Parameter Detection ✅
    - Correctly identifies parameters in formulas
@@ -91,7 +114,7 @@ This document outlines the implementation plan for enhancing the function input
    - Handles complex expressions
    - Sets appropriate default values
 
-2. Dynamic Controls
+2. Dynamic Controls ✅
    - Sliders appear automatically for detected parameters
    - Controls are properly styled and accessible
    - Sliders have appropriate ranges and step sizes
@@ -103,6 +126,13 @@ This document outlines the implementation plan for enhancing the function input
    - No visual glitches during updates
    - All changes are properly persisted
 
+4. Formula Management
+   - Users can name and customize their formulas
+   - Formula options are easily accessible
+   - Parameter settings are saved per formula
+   - Formula list is organized and searchable
+   - Editor provides helpful suggestions and feedback
+
 ### Technical Considerations
 1. Parameter Detection
    - Use regex for initial parameter extraction
@@ -196,7 +226,7 @@ interface Parameter {
 // Updated Formula type
 interface Formula {
   id: string;
-  name: string;
+  name: string;  // User-defined name for the formula
   expression: string;
   substitutedExpression?: string;
   parameters?: Parameter[];
@@ -205,38 +235,56 @@ interface Formula {
   visible: boolean;
   createdAt: Date;
   updatedAt: Date;
+  settings?: {
+    showParameters?: boolean;
+    parameterRanges?: Record<string, { min: number; max: number; step: number }>;
+    customSettings?: Record<string, any>;
+  };
 }
 ```
 
 ## Testing Plan
 
 ### Unit Tests
-- [ ] Function input parsing tests
-- [ ] Parameter detection tests
-- [ ] Input validation tests
-- [ ] Formula evaluation tests with parameters
+- [x] Function input parsing tests
+- [x] Parameter detection tests
+- [x] Input validation tests
+- [x] Formula evaluation tests with parameters
+- [ ] Formula options tests
+- [ ] Formula naming tests
 
 ### Integration Tests
-- [ ] Input component integration tests
-- [ ] Parameter UI integration tests
-- [ ] Real-time update tests
+- [x] Input component integration tests
+- [x] Parameter UI integration tests
+- [x] Real-time update tests
+- [ ] Formula options integration tests
+- [ ] Formula list integration tests
 
 ### E2E Tests
-- [ ] Complete function input workflow
-- [ ] Parameter adjustment workflow
-- [ ] Real-time graph update workflow
+- [x] Complete function input workflow
+- [x] Parameter adjustment workflow
+- [x] Real-time graph update workflow
+- [ ] Formula options workflow
+- [ ] Formula naming workflow
 
 ## Migration Plan
 
 1. Add new fields to existing formulas
-   - [ ] Add parameters array (empty by default)
-   - [ ] Add substitutedExpression field
+   - [x] Add parameters array (empty by default)
+   - [x] Add substitutedExpression field
+   - [ ] Add name field
+   - [ ] Add settings object
 
 2. Update formula validation
-   - [ ] Add parameter validation
-   - [ ] Add natural language input validation
+   - [x] Add parameter validation
+   - [x] Add natural language input validation
+   - [ ] Add name validation
+   - [ ] Add settings validation
 
 3. Update UI components
-   - [ ] Add enhanced formula input
-   - [ ] Add parameter controls
-   - [ ] Add input assistance features 
\ No newline at end of file
+   - [x] Add enhanced formula input
+   - [x] Add parameter controls
+   - [x] Add input assistance features
+   - [ ] Add formula options UI
+   - [ ] Add formula naming UI
+   - [ ] Add formula list improvements 
\ No newline at end of file
diff --git a/src/utils/parameterDetection.ts b/src/utils/parameterDetection.ts
index c8692e9..450e8c6 100644
--- a/src/utils/parameterDetection.ts
+++ b/src/utils/parameterDetection.ts
@@ -21,6 +21,9 @@ const PARAMETER_REGEX = /[a-wyzA-WYZ]/g;
 export interface DetectedParameter {
   name: string;
   defaultValue: number;
+  minValue: number;
+  maxValue: number;
+  step: number;
 }
 
 /**
@@ -57,7 +60,10 @@ export function detectParameters(formula: string): DetectedParameter[] {
   // Remove duplicates and create parameter objects
   const uniqueParameters = [...new Set(matches)].map(name => ({
     name: name.toLowerCase(), // Convert to lowercase for consistency
-    defaultValue: 1 // Set default value to 1 as specified
+    defaultValue: 1, // Set default value to 1 as specified
+    minValue: -10, // Default min value
+    maxValue: 10, // Default max value
+    step: 0.1 // Default step value
   }));
   
   return uniqueParameters;

From 40237c331b0bcca31ed463c37d22707c24e20c23 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 09:32:19 +0200
Subject: [PATCH 19/35] fix: parameter step size functionality in formula
 options dialog

---
 src/components/Formula/ParameterSlider.tsx | 20 ++++++++++++++++----
 src/components/FormulaEditor.tsx           | 14 +++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/Formula/ParameterSlider.tsx b/src/components/Formula/ParameterSlider.tsx
index 171c701..7a06b80 100644
--- a/src/components/Formula/ParameterSlider.tsx
+++ b/src/components/Formula/ParameterSlider.tsx
@@ -10,6 +10,7 @@ interface ParameterSliderProps {
   max?: number;
   step?: number;
   className?: string;
+  parameters?: Record<string, number>;
 }
 
 export function ParameterSlider({
@@ -20,22 +21,33 @@ export function ParameterSlider({
   max = 3,
   step = 0.1,
   className,
+  parameters,
 }: ParameterSliderProps) {
+  // Get the step size from parameters if available, otherwise use default
+  const stepSize = parameters?.[`${parameterName}_step`] ?? step;
+  
+  // Ensure the value is rounded to the step size
+  const roundedValue = Math.round(value / stepSize) * stepSize;
+
   return (
     <div className={cn("space-y-2", className)}>
       <div className="flex items-center justify-between">
         <Label htmlFor={parameterName} className="text-sm font-medium">
           {parameterName}
         </Label>
-        <span className="text-sm text-muted-foreground">{value.toFixed(1)}</span>
+        <span className="text-sm text-muted-foreground">{roundedValue.toFixed(1)}</span>
       </div>
       <Slider
         id={parameterName}
-        value={[value]}
-        onValueChange={([newValue]) => onChange(newValue)}
+        value={[roundedValue]}
+        onValueChange={([newValue]) => {
+          // Round the new value to the step size
+          const roundedNewValue = Math.round(newValue / stepSize) * stepSize;
+          onChange(roundedNewValue);
+        }}
         min={min}
         max={max}
-        step={step}
+        step={stepSize}
         className="w-full"
       />
     </div>
diff --git a/src/components/FormulaEditor.tsx b/src/components/FormulaEditor.tsx
index 42a5845..3b52b57 100644
--- a/src/components/FormulaEditor.tsx
+++ b/src/components/FormulaEditor.tsx
@@ -474,14 +474,14 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
                             <Label className="text-xs">{t('formula.step')}</Label>
                             <Input
                               type="number"
-                              value={param.step}
+                              value={findSelectedFormula()?.parameters?.[`${param.name}_step`] ?? param.step}
                               onChange={(e) => {
                                 const newStep = e.target.value ? parseFloat(e.target.value) : 0.1;
-                                const updatedParams = detectParameters(findSelectedFormula()?.expression || '')
-                                  .map(p => p.name === param.name 
-                                    ? { ...p, step: newStep }
-                                    : p
-                                  );
+                                // Update the parameter settings with the new step size
+                                handleUpdateFormula('parameters', {
+                                  ...(findSelectedFormula()?.parameters || {}),
+                                  [`${param.name}_step`]: newStep
+                                } as Record<string, number>);
                               }}
                             />
                           </div>
@@ -492,7 +492,7 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
                             value={[findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue]}
                             min={param.minValue}
                             max={param.maxValue}
-                            step={param.step}
+                            step={findSelectedFormula()?.parameters?.[`${param.name}_step`] ?? param.step}
                             onValueChange={(value) => handleUpdateFormula('parameters', {
                               ...(findSelectedFormula()?.parameters || {}),
                               [param.name]: value[0]

From 6afb62581520349ef6d98a7426133b071b62f5e6 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 09:33:24 +0200
Subject: [PATCH 20/35] fix: pass formula parameters to ParameterSlider in
 FunctionSidebar

---
 src/components/Formula/FunctionSidebar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index f34d803..1a6977f 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -103,6 +103,7 @@ export default function FunctionSidebar({
                 parameterName={param.name}
                 value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
                 onChange={(value) => handleParameterChange(param.name, value)}
+                parameters={selectedFormula.parameters}
               />
             ))}
           </div>

From 81735727bea15410a18442b88204e28793f162b5 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 09:36:42 +0200
Subject: [PATCH 21/35] fix: update parameter detection tests to include
 displayName field

---
 .../utils/parameterDetection.test.ts          | 28 +++++++++----------
 src/components/Formula/FunctionSidebar.tsx    |  1 +
 src/components/Formula/ParameterSlider.tsx    | 23 +++++++++++++--
 src/components/FormulaEditor.tsx              | 14 +++++++++-
 src/i18n/translations.ts                      |  6 +++-
 src/utils/parameterDetection.ts               |  2 ++
 6 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/__tests__/utils/parameterDetection.test.ts b/src/__tests__/utils/parameterDetection.test.ts
index 096e404..33dfac3 100644
--- a/src/__tests__/utils/parameterDetection.test.ts
+++ b/src/__tests__/utils/parameterDetection.test.ts
@@ -6,7 +6,7 @@ describe('parameterDetection', () => {
       const formula = 'ax^2';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -14,9 +14,9 @@ describe('parameterDetection', () => {
       const formula = 'ax^2 + bx + c';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -30,7 +30,7 @@ describe('parameterDetection', () => {
       const formula = 'sin(x) + a*cos(x)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -38,7 +38,7 @@ describe('parameterDetection', () => {
       const formula = 'Math.sin(x) + a*Math.cos(x)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -46,8 +46,8 @@ describe('parameterDetection', () => {
       const formula = 'a*sqrt(b*x^2)';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -55,9 +55,9 @@ describe('parameterDetection', () => {
       const formula = 'a * x^2 + b * x + c';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
 
@@ -65,9 +65,9 @@ describe('parameterDetection', () => {
       const formula = 'Ax^2 + Bx + C';
       const result = detectParameters(formula);
       expect(result).toEqual([
-        { name: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
-        { name: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
+        { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 },
+        { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }
       ]);
     });
   });
diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 1a6977f..623de44 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -101,6 +101,7 @@ export default function FunctionSidebar({
               <ParameterSlider
                 key={param.name}
                 parameterName={param.name}
+                displayName={param.displayName}
                 value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
                 onChange={(value) => handleParameterChange(param.name, value)}
                 parameters={selectedFormula.parameters}
diff --git a/src/components/Formula/ParameterSlider.tsx b/src/components/Formula/ParameterSlider.tsx
index 7a06b80..2f6f290 100644
--- a/src/components/Formula/ParameterSlider.tsx
+++ b/src/components/Formula/ParameterSlider.tsx
@@ -1,9 +1,16 @@
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface ParameterSliderProps {
   parameterName: string;
+  displayName?: string;
   value: number;
   onChange: (value: number) => void;
   min?: number;
@@ -15,6 +22,7 @@ interface ParameterSliderProps {
 
 export function ParameterSlider({
   parameterName,
+  displayName,
   value,
   onChange,
   min = -3,
@@ -32,9 +40,18 @@ export function ParameterSlider({
   return (
     <div className={cn("space-y-2", className)}>
       <div className="flex items-center justify-between">
-        <Label htmlFor={parameterName} className="text-sm font-medium">
-          {parameterName}
-        </Label>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Label htmlFor={parameterName} className="text-sm font-medium cursor-help">
+                {displayName || parameterName}
+              </Label>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Parameter: {parameterName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <span className="text-sm text-muted-foreground">{roundedValue.toFixed(1)}</span>
       </div>
       <Slider
diff --git a/src/components/FormulaEditor.tsx b/src/components/FormulaEditor.tsx
index 3b52b57..3085392 100644
--- a/src/components/FormulaEditor.tsx
+++ b/src/components/FormulaEditor.tsx
@@ -413,7 +413,19 @@ const FormulaEditor: React.FC<FormulaEditorProps> = ({
                     {detectParameters(findSelectedFormula()?.expression || '').map((param) => (
                       <div key={param.name} className="space-y-4 p-4 border rounded-lg">
                         <div className="flex items-center justify-between">
-                          <Label className="text-base">{param.name}</Label>
+                          <div className="space-y-1">
+                            <Label className="text-base">{param.name}</Label>
+                            <Input
+                              type="text"
+                              className="w-40"
+                              value={findSelectedFormula()?.parameters?.[`${param.name}_displayName`] ?? param.displayName}
+                              onChange={(e) => handleUpdateFormula('parameters', {
+                                ...(findSelectedFormula()?.parameters || {}),
+                                [`${param.name}_displayName`]: e.target.value
+                              } as Record<string, number>)}
+                              placeholder={t('formula.parameterName')}
+                            />
+                          </div>
                           <div className="flex items-center gap-2">
                             <Input
                               type="number"
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index baf1b89..7310004 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -128,6 +128,7 @@ export const translations = {
       step: "Step",
       parameterRange: "Parameter Range",
       quickAdjust: "Quick Adjust",
+      parameterName: "Display Name",
       tabs: {
         general: "General",
         parameters: "Parameters"
@@ -237,7 +238,7 @@ export const translations = {
       calibration: {
         title: "Calibración",
         description: "Calibra tu pantalla para mediciones precisas",
-        instructions: "Para calibrar, mide una distancia conocida en tu pantalla",
+        instructions: "Para calibrar, mide una distancia connida en tu pantalla",
         lengthLabel: "Longitud de referencia",
         startButton: "Iniciar calibración",
         placeRuler: "Coloca una regla en tu pantalla",
@@ -264,6 +265,7 @@ export const translations = {
       step: "Paso",
       parameterRange: "Rango de Parámetro",
       quickAdjust: "Ajustar Rápidamente",
+      parameterName: "Nombre de visualización",
       tabs: {
         general: "General",
         parameters: "Parámetros"
@@ -402,6 +404,7 @@ export const translations = {
       step: "Étape",
       parameterRange: "Plage de Paramètre",
       quickAdjust: "Régler Rapidement",
+      parameterName: "Nom d'affichage",
       tabs: {
         general: "Général",
         parameters: "Paramètres"
@@ -538,6 +541,7 @@ export const translations = {
       step: "Schritt",
       parameterRange: "Parameterbereich",
       quickAdjust: "Schnell einstellen",
+      parameterName: "Anzeigename",
       tabs: {
         general: "Allgemein",
         parameters: "Parameter"
diff --git a/src/utils/parameterDetection.ts b/src/utils/parameterDetection.ts
index 450e8c6..751d24a 100644
--- a/src/utils/parameterDetection.ts
+++ b/src/utils/parameterDetection.ts
@@ -20,6 +20,7 @@ const PARAMETER_REGEX = /[a-wyzA-WYZ]/g;
  */
 export interface DetectedParameter {
   name: string;
+  displayName?: string; // Optional display name for the parameter
   defaultValue: number;
   minValue: number;
   maxValue: number;
@@ -60,6 +61,7 @@ export function detectParameters(formula: string): DetectedParameter[] {
   // Remove duplicates and create parameter objects
   const uniqueParameters = [...new Set(matches)].map(name => ({
     name: name.toLowerCase(), // Convert to lowercase for consistency
+    displayName: name.toLowerCase(), // Default display name is the parameter name
     defaultValue: 1, // Set default value to 1 as specified
     minValue: -10, // Default min value
     maxValue: 10, // Default max value

From 1f1bceaa2c5b9709e0f7529a45e08a6e74afe8c3 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 09:43:06 +0200
Subject: [PATCH 22/35] fix: ensure parameter display names are properly shown
 in sidebar

---
 src/components/Formula/FunctionSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 623de44..57b5501 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -101,7 +101,7 @@ export default function FunctionSidebar({
               <ParameterSlider
                 key={param.name}
                 parameterName={param.name}
-                displayName={param.displayName}
+                displayName={String(selectedFormula.parameters?.[`${param.name}_displayName`] ?? param.displayName)}
                 value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
                 onChange={(value) => handleParameterChange(param.name, value)}
                 parameters={selectedFormula.parameters}

From 588aaf50b126b2b4f3c5188cf6fe62afe3ac8136 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 10:31:25 +0200
Subject: [PATCH 23/35] feat: add view mode detection and context

---
 src/App.tsx                               |  21 ++--
 src/__tests__/utils/viewDetection.test.ts | 124 ++++++++++++++++++++++
 src/contexts/ViewModeContext.tsx          |  53 +++++++++
 src/utils/viewDetection.ts                |  56 ++++++++++
 4 files changed, 245 insertions(+), 9 deletions(-)
 create mode 100644 src/__tests__/utils/viewDetection.test.ts
 create mode 100644 src/contexts/ViewModeContext.tsx
 create mode 100644 src/utils/viewDetection.ts

diff --git a/src/App.tsx b/src/App.tsx
index da95e14..cf51656 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ConfigProvider } from "./context/ConfigContext";
 import { ServiceProvider } from "./providers/ServiceProvider";
+import { ViewModeProvider } from "./contexts/ViewModeContext";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 import React from 'react';
@@ -17,15 +18,17 @@ const App: React.FC = () => {
       <TooltipProvider>
         <ConfigProvider>
           <ServiceProvider>
-            <Toaster />
-            <Sonner />
-            <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<Index />} />
-                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-                <Route path="*" element={<NotFound />} />
-              </Routes>
-            </BrowserRouter>
+            <ViewModeProvider>
+              <Toaster />
+              <Sonner />
+              <BrowserRouter>
+                <Routes>
+                  <Route path="/" element={<Index />} />
+                  {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+                  <Route path="*" element={<NotFound />} />
+                </Routes>
+              </BrowserRouter>
+            </ViewModeProvider>
           </ServiceProvider>
         </ConfigProvider>
       </TooltipProvider>
diff --git a/src/__tests__/utils/viewDetection.test.ts b/src/__tests__/utils/viewDetection.test.ts
new file mode 100644
index 0000000..c287b77
--- /dev/null
+++ b/src/__tests__/utils/viewDetection.test.ts
@@ -0,0 +1,124 @@
+import { detectViewMode, isInIframe, isFullscreen } from '@/utils/viewDetection';
+
+describe('viewDetection', () => {
+  let originalWindow: any;
+  let originalDocument: any;
+
+  beforeEach(() => {
+    originalWindow = { ...window };
+    originalDocument = { ...document };
+
+    // Reset window and document to default state
+    Object.defineProperty(window, 'self', {
+      value: window,
+      writable: true
+    });
+    Object.defineProperty(window, 'top', {
+      value: window,
+      writable: true
+    });
+    Object.defineProperty(window, 'parent', {
+      value: window,
+      writable: true
+    });
+
+    // Create a new mock document
+    const mockDocument = {
+      fullscreenElement: null,
+      webkitFullscreenElement: null,
+      mozFullScreenElement: null,
+      msFullscreenElement: null
+    };
+    Object.defineProperties(document, {
+      fullscreenElement: {
+        get: () => mockDocument.fullscreenElement,
+        configurable: true
+      },
+      webkitFullscreenElement: {
+        get: () => mockDocument.webkitFullscreenElement,
+        configurable: true
+      },
+      mozFullScreenElement: {
+        get: () => mockDocument.mozFullScreenElement,
+        configurable: true
+      },
+      msFullscreenElement: {
+        get: () => mockDocument.msFullscreenElement,
+        configurable: true
+      }
+    });
+  });
+
+  afterEach(() => {
+    window = originalWindow;
+    document = originalDocument;
+  });
+
+  describe('isInIframe', () => {
+    it('should return false when not in an iframe', () => {
+      expect(isInIframe()).toBe(false);
+    });
+
+    it('should return true when in an iframe', () => {
+      Object.defineProperty(window, 'self', {
+        value: window
+      });
+      Object.defineProperty(window, 'top', {
+        value: {}
+      });
+      expect(isInIframe()).toBe(true);
+    });
+  });
+
+  describe('isFullscreen', () => {
+    it('should return false when not in fullscreen', () => {
+      expect(isFullscreen()).toBe(false);
+    });
+
+    it('should return true when in fullscreen', () => {
+      Object.defineProperty(document, 'fullscreenElement', {
+        get: () => document.createElement('div'),
+        configurable: true
+      });
+      expect(isFullscreen()).toBe(true);
+    });
+  });
+
+  describe('detectViewMode', () => {
+    it('should return standalone when not in iframe or fullscreen', () => {
+      expect(detectViewMode()).toBe('standalone');
+    });
+
+    it('should return embedded when in iframe', () => {
+      Object.defineProperty(window, 'self', {
+        value: window
+      });
+      Object.defineProperty(window, 'top', {
+        value: {}
+      });
+      expect(detectViewMode()).toBe('embedded');
+    });
+
+    it('should return fullscreen when in fullscreen mode', () => {
+      Object.defineProperty(document, 'fullscreenElement', {
+        get: () => document.createElement('div'),
+        configurable: true
+      });
+      expect(detectViewMode()).toBe('fullscreen');
+    });
+
+    it('should prioritize fullscreen over embedded', () => {
+      Object.defineProperty(window, 'self', {
+        value: window
+      });
+      Object.defineProperty(window, 'top', {
+        value: {}
+      });
+      Object.defineProperty(document, 'fullscreenElement', {
+        get: () => document.createElement('div'),
+        configurable: true
+      });
+      expect(detectViewMode()).toBe('fullscreen');
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/contexts/ViewModeContext.tsx b/src/contexts/ViewModeContext.tsx
new file mode 100644
index 0000000..33b1340
--- /dev/null
+++ b/src/contexts/ViewModeContext.tsx
@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { ViewMode, detectViewMode } from '@/utils/viewDetection';
+
+interface ViewModeContextType {
+  viewMode: ViewMode;
+  isEmbedded: boolean;
+  isFullscreen: boolean;
+}
+
+const ViewModeContext = createContext<ViewModeContextType | undefined>(undefined);
+
+export function ViewModeProvider({ children }: { children: React.ReactNode }) {
+  const [viewMode, setViewMode] = useState<ViewMode>(detectViewMode());
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setViewMode(detectViewMode());
+    };
+
+    // Listen for fullscreen changes
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
+    };
+  }, []);
+
+  const value = {
+    viewMode,
+    isEmbedded: viewMode === 'embedded',
+    isFullscreen: viewMode === 'fullscreen',
+  };
+
+  return (
+    <ViewModeContext.Provider value={value}>
+      {children}
+    </ViewModeContext.Provider>
+  );
+}
+
+export function useViewMode() {
+  const context = useContext(ViewModeContext);
+  if (context === undefined) {
+    throw new Error('useViewMode must be used within a ViewModeProvider');
+  }
+  return context;
+} 
\ No newline at end of file
diff --git a/src/utils/viewDetection.ts b/src/utils/viewDetection.ts
new file mode 100644
index 0000000..5896af1
--- /dev/null
+++ b/src/utils/viewDetection.ts
@@ -0,0 +1,56 @@
+/**
+ * Type definition for different view modes
+ */
+export type ViewMode = 'standalone' | 'embedded' | 'fullscreen';
+
+/**
+ * Extended Document interface to include vendor-specific fullscreen properties
+ */
+interface ExtendedDocument extends Document {
+  webkitFullscreenElement?: Element | null;
+  mozFullScreenElement?: Element | null;
+  msFullscreenElement?: Element | null;
+}
+
+/**
+ * Checks if the application is running inside an iframe
+ */
+export function isInIframe(): boolean {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    // If we can't access window.top due to same-origin policy, we're in an iframe
+    return true;
+  }
+}
+
+/**
+ * Checks if the application is in fullscreen mode
+ */
+export function isFullscreen(): boolean {
+  const doc = document as ExtendedDocument;
+  return !!(
+    doc.fullscreenElement ||
+    doc.webkitFullscreenElement ||
+    doc.mozFullScreenElement ||
+    doc.msFullscreenElement
+  );
+}
+
+/**
+ * Detects the current view mode of the application
+ */
+export function detectViewMode(): ViewMode {
+  // Check fullscreen first
+  if (isFullscreen()) {
+    return 'fullscreen';
+  }
+
+  // Then check if we're in an iframe
+  if (isInIframe()) {
+    return 'embedded';
+  }
+
+  // Default to standalone
+  return 'standalone';
+} 
\ No newline at end of file

From fcd6c33e6c65df11a5969911e53f27bf85620e03 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 10:33:04 +0200
Subject: [PATCH 24/35] feat: add test HTML for embedding function plotter

---
 test/embedding/index.html | 42 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 test/embedding/index.html

diff --git a/test/embedding/index.html b/test/embedding/index.html
new file mode 100644
index 0000000..ac36b41
--- /dev/null
+++ b/test/embedding/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Function Plotter Embedding Test</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: #f5f5f5;
+            font-family: system-ui, -apple-system, sans-serif;
+        }
+        .container {
+            width: 600px;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        iframe {
+            width: 100%;
+            height: 400px;
+            border: none;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <iframe 
+            src="http://localhost:8081/" 
+            title="Function Plotter"
+            allow="fullscreen"
+        ></iframe>
+    </div>
+</body>
+</html> 
\ No newline at end of file

From 38a0098854018f042744a6dda40b77495b55d192 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 11:31:55 +0200
Subject: [PATCH 25/35] feat: customize UI based on view mode with function
 sidebar visible in embedded mode

---
 src/contexts/ViewModeContext.tsx |  2 ++
 src/pages/Index.tsx              | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/contexts/ViewModeContext.tsx b/src/contexts/ViewModeContext.tsx
index 33b1340..20e8a6a 100644
--- a/src/contexts/ViewModeContext.tsx
+++ b/src/contexts/ViewModeContext.tsx
@@ -5,6 +5,7 @@ interface ViewModeContextType {
   viewMode: ViewMode;
   isEmbedded: boolean;
   isFullscreen: boolean;
+  isStandalone: boolean;
 }
 
 const ViewModeContext = createContext<ViewModeContextType | undefined>(undefined);
@@ -35,6 +36,7 @@ export function ViewModeProvider({ children }: { children: React.ReactNode }) {
     viewMode,
     isEmbedded: viewMode === 'embedded',
     isFullscreen: viewMode === 'fullscreen',
+    isStandalone: viewMode === 'standalone',
   };
 
   return (
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 6c029e8..d1a9ae0 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -26,12 +26,14 @@ import { toast } from 'sonner';
 import { useIsMobile } from '@/hooks/use-mobile';
 import GlobalControls from '@/components/GlobalControls';
 import _UnifiedInfoPanel from '@/components/UnifiedInfoPanel';
+import { useViewMode } from '@/contexts/ViewModeContext';
 
 const Index = () => {
   // Get the service factory
   const serviceFactory = useServiceFactory();
   const { setComponentConfigModalOpen } = useComponentConfig();
   const { isToolbarVisible, setToolbarVisible } = useGlobalConfig();
+  const { isEmbedded } = useViewMode();
   const isMobile = useIsMobile();
   
   const {
@@ -262,6 +264,16 @@ const Index = () => {
     });
   }, [formulas, handleAddFormula, selectedFormulaId]);
 
+  // Auto-open formula editor in embedded mode
+  useEffect(() => {
+    if (isEmbedded && !isFormulaEditorOpen && formulas.length === 0) {
+      const newFormula = createDefaultFormula('function');
+      newFormula.expression = "x*x";
+      handleAddFormula(newFormula);
+      setIsFormulaEditorOpen(true);
+    }
+  }, [isEmbedded, isFormulaEditorOpen, formulas.length, handleAddFormula]);
+
   // Open formula editor when a formula is selected (e.g., by clicking a point on the graph)
   useEffect(() => {
     // If a formula is selected but the editor is not open, open it
@@ -355,7 +367,8 @@ const Index = () => {
                 </div>
               </div>
               
-              {isFormulaEditorOpen && (
+              {/* Only show FormulaEditor in non-embedded mode */}
+              {isFormulaEditorOpen && !isEmbedded && (
                 <div className="w-full mb-1 sm:mb-2 md:mb-3">
                   <FormulaEditor
                     formulas={formulas}
@@ -446,6 +459,7 @@ const Index = () => {
                     }
                   />
                 </div>
+                {/* Always show FunctionSidebar when formula editor is open, even in embedded mode */}
                 {isFormulaEditorOpen && (
                   <div className="w-80 border-l border-gray-200 bg-white">
                     <FunctionSidebar

From 1e6193cd44b79f4d0469ff232a77816ae6810b8b Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 11:33:41 +0200
Subject: [PATCH 26/35] fix: fix linting errors in viewDetection.test.ts

---
 src/__tests__/utils/viewDetection.test.ts | 27 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/utils/viewDetection.test.ts b/src/__tests__/utils/viewDetection.test.ts
index c287b77..6ce04ed 100644
--- a/src/__tests__/utils/viewDetection.test.ts
+++ b/src/__tests__/utils/viewDetection.test.ts
@@ -1,8 +1,8 @@
 import { detectViewMode, isInIframe, isFullscreen } from '@/utils/viewDetection';
 
 describe('viewDetection', () => {
-  let originalWindow: any;
-  let originalDocument: any;
+  let originalWindow: Partial<typeof window>;
+  let originalDocument: Partial<typeof document>;
 
   beforeEach(() => {
     originalWindow = { ...window };
@@ -50,8 +50,27 @@ describe('viewDetection', () => {
   });
 
   afterEach(() => {
-    window = originalWindow;
-    document = originalDocument;
+    // Restore original properties instead of reassigning globals
+    Object.defineProperty(window, 'self', {
+      value: originalWindow.self,
+      writable: true
+    });
+    Object.defineProperty(window, 'top', {
+      value: originalWindow.top,
+      writable: true
+    });
+    Object.defineProperty(window, 'parent', {
+      value: originalWindow.parent,
+      writable: true
+    });
+
+    // Restore document properties
+    if (originalDocument.fullscreenElement !== undefined) {
+      Object.defineProperty(document, 'fullscreenElement', {
+        value: originalDocument.fullscreenElement,
+        writable: true
+      });
+    }
   });
 
   describe('isInIframe', () => {

From 9f96971a090811b12a921639c1a7a061865593d5 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 12:15:31 +0200
Subject: [PATCH 27/35] feat: add fullscreen button to function sidebar

---
 src/components/Formula/FunctionSidebar.tsx | 49 ++++++++++++++++++----
 src/pages/Index.tsx                        |  2 +
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 57b5501..5e03bce 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -3,11 +3,12 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-import { Plus, Trash2 } from 'lucide-react';
+import { Plus, Trash2, Maximize2, Minimize2 } from 'lucide-react';
 import { Formula } from '@/types/formula';
 import { MeasurementUnit } from '@/types/shapes';
 import { ParameterSlider } from '@/components/Formula/ParameterSlider';
 import { detectParameters } from '@/utils/parameterDetection';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface FunctionSidebarProps {
   formulas: Formula[];
@@ -18,6 +19,8 @@ interface FunctionSidebarProps {
   onUpdateFormula: (id: string, updates: Partial<Formula>) => void;
   measurementUnit: MeasurementUnit;
   className?: string;
+  isFullscreen?: boolean;
+  onToggleFullscreen?: () => void;
 }
 
 export default function FunctionSidebar({
@@ -29,6 +32,8 @@ export default function FunctionSidebar({
   onUpdateFormula,
   measurementUnit,
   className,
+  isFullscreen = false,
+  onToggleFullscreen
 }: FunctionSidebarProps) {
   const { t } = useTranslation();
 
@@ -49,14 +54,40 @@ export default function FunctionSidebar({
     <div className={cn('flex flex-col h-full bg-background border-l', className)}>
       <div className="flex items-center justify-between p-4 border-b">
         <h2 className="text-lg font-semibold">{t('formula.title')}</h2>
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={onAddFormula}
-          title={t('formula.add')}
-        >
-          <Plus className="h-4 w-4" />
-        </Button>
+        <div className="flex items-center space-x-2">
+          {onToggleFullscreen && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={onToggleFullscreen}
+                    className="h-8 w-8"
+                  >
+                    {isFullscreen ? (
+                      <Minimize2 className="h-4 w-4" />
+                    ) : (
+                      <Maximize2 className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{isFullscreen ? t('exitFullscreen') : t('enterFullscreen')}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={onAddFormula}
+            title={t('formula.add')}
+            className="h-8 w-8"
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
       <ScrollArea className="flex-1">
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index d1a9ae0..3d6bd49 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -474,6 +474,8 @@ const Index = () => {
                       onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
                       onUpdateFormula={handleUpdateFormula}
                       measurementUnit={measurementUnit}
+                      isFullscreen={isFullscreen}
+                      onToggleFullscreen={toggleFullscreen}
                     />
                   </div>
                 )}

From 819304fb143c2a271e32d591736ef5b0e42b944e Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 12:17:11 +0200
Subject: [PATCH 28/35] docs: add view options documentation and update test
 embedding width

---
 docs/features/view-options.md | 49 +++++++++++++++++++++++++++++++++++
 test/embedding/index.html     |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 docs/features/view-options.md

diff --git a/docs/features/view-options.md b/docs/features/view-options.md
new file mode 100644
index 0000000..ceacc56
--- /dev/null
+++ b/docs/features/view-options.md
@@ -0,0 +1,49 @@
+# View Options Feature
+
+## Overview
+This feature allows the function plotter to adapt its display based on how it's being viewed (standalone, embedded, or fullscreen).
+
+## Requirements
+
+### View Modes
+1. Standalone (default)
+   - Shows all UI elements
+   - Full functionality available
+
+2. Embedded (in iframe)
+   - Hides toolbar
+   - Hides function bar
+   - Focused on core plotting functionality
+   - Clean, minimal interface
+
+3. Fullscreen
+   - Shows function bar
+   - Hides toolbar
+   - Optimized for presentation/demonstration
+
+### Implementation Tasks
+- [x] Add view mode detection
+- [x] Create view mode context
+- [x] Add test HTML for embedding
+- [ ] Update toolbar visibility based on view mode
+- [ ] Update function bar visibility based on view mode
+- [ ] Add tests for view-specific UI elements
+- [ ] Add documentation for embedding options
+- [ ] Consider adding configuration options for embedded view
+
+### Technical Details
+- View mode is detected using `window.self !== window.top` for iframe detection
+- Fullscreen mode is detected using `document.fullscreenElement`
+- View mode state is managed through React context
+- UI components should check view mode before rendering
+
+### Testing
+- [x] Unit tests for view detection
+- [ ] Integration tests for view-specific UI
+- [ ] Manual testing in different view modes
+- [ ] Cross-browser testing for fullscreen support
+
+### Documentation
+- [ ] Update embedding guide
+- [ ] Add view mode configuration options
+- [ ] Document view-specific features 
\ No newline at end of file
diff --git a/test/embedding/index.html b/test/embedding/index.html
index ac36b41..d372988 100644
--- a/test/embedding/index.html
+++ b/test/embedding/index.html
@@ -16,7 +16,7 @@
             font-family: system-ui, -apple-system, sans-serif;
         }
         .container {
-            width: 600px;
+            width: 800px;
             background: white;
             padding: 20px;
             border-radius: 8px;

From 9747aa433fc75663e1c1316c8c4ce5057e80ee27 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 12:41:10 +0200
Subject: [PATCH 29/35] feat: hide global config menu in embedded view

---
 src/pages/Index.tsx | 46 +++++++++++++++++++--------------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 3d6bd49..a795338 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -33,7 +33,7 @@ const Index = () => {
   const serviceFactory = useServiceFactory();
   const { setComponentConfigModalOpen } = useComponentConfig();
   const { isToolbarVisible, setToolbarVisible } = useGlobalConfig();
-  const { isEmbedded } = useViewMode();
+  const { isFullscreen, isEmbedded, setIsFullscreen } = useViewMode();
   const isMobile = useIsMobile();
   
   const {
@@ -60,9 +60,8 @@ const Index = () => {
     shareCanvasUrl
   } = useShapeOperations();
 
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [formulas, setFormulas] = useState<Formula[]>([]);
   const [isFormulaEditorOpen, setIsFormulaEditorOpen] = useState(false);
+  const [formulas, setFormulas] = useState<Formula[]>([]);
   const [selectedFormulaId, setSelectedFormulaId] = useState<string | null>(null);
   const [_pixelsPerUnit, setPixelsPerUnit] = useState<number>(getStoredPixelsPerUnit(measurementUnit));
   
@@ -76,18 +75,6 @@ const Index = () => {
     setPixelsPerUnit(getStoredPixelsPerUnit(measurementUnit));
   }, [measurementUnit]);
 
-  // Check fullscreen status
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement);
-    };
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, []);
-
   // Function to request fullscreen with better mobile support
   const requestFullscreen = useCallback(() => {
     const elem = document.documentElement;
@@ -324,8 +311,8 @@ const Index = () => {
   return (
     <div className={`min-h-screen bg-gray-50 ${isFullscreen || isMobile ? 'p-0' : ''}`}>
       <div className={`${isFullscreen || isMobile ? 'max-w-full p-0' : 'container py-0 sm:py-2 md:py-4 lg:py-8 px-0 sm:px-2 md:px-4'} transition-all duration-200 h-[calc(100vh-0rem)] sm:h-[calc(100vh-0.5rem)]`}>
-        {/* Only show the header in the standard position when toolbar is visible */}
-        {isToolbarVisible && <GeometryHeader isFullscreen={isFullscreen} />}
+        {/* Only show the header in the standard position when toolbar is visible and not in embedded mode */}
+        {isToolbarVisible && !isEmbedded && <GeometryHeader isFullscreen={isFullscreen} />}
         
         {/* Include both modals */}
         <ConfigModal />
@@ -336,7 +323,7 @@ const Index = () => {
             <div className="flex flex-col h-full">
               <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between ${isFullscreen || isMobile ? 'space-y-1 sm:space-y-0 sm:space-x-1 px-1' : 'space-y-1 sm:space-y-0 sm:space-x-2 px-1 sm:px-2'} ${isMobile ? 'mb-0' : 'mb-1 sm:mb-2'}`}>
                 
-                {isToolbarVisible ? (
+                {isToolbarVisible && !isEmbedded ? (
                   <div className="flex flex-row items-center space-x-1 sm:space-x-2 overflow-x-auto w-full sm:w-auto pb-1 sm:pb-0 no-scrollbar">
                     <Toolbar
                       activeMode={activeMode}
@@ -352,18 +339,23 @@ const Index = () => {
                     />
                   </div>
                 ) : (
-                  /* Show header in the toolbar position when toolbar is hidden */
-                  <div className="flex-1">
-                    <GeometryHeader isFullscreen={isFullscreen} />
-                  </div>
+                  /* Show header in the toolbar position when toolbar is hidden and not in embedded mode */
+                  !isEmbedded && (
+                    <div className="flex-1">
+                      <GeometryHeader isFullscreen={isFullscreen} />
+                    </div>
+                  )
                 )}
                 
                 <div className="ml-auto">
-                  <GlobalControls 
-                    isFullscreen={isFullscreen} 
-                    onToggleFullscreen={toggleFullscreen}
-                    onShare={shareCanvasUrl}
-                  />
+                  {/* Only show GlobalControls in non-embedded mode */}
+                  {!isEmbedded && (
+                    <GlobalControls 
+                      isFullscreen={isFullscreen} 
+                      onToggleFullscreen={toggleFullscreen}
+                      onShare={shareCanvasUrl}
+                    />
+                  )}
                 </div>
               </div>
               

From 334cad87c495c9a0b96c66bee0cc854c92a050a4 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 12:42:22 +0200
Subject: [PATCH 30/35] feat: add setIsFullscreen to view mode context

---
 src/contexts/ViewModeContext.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/contexts/ViewModeContext.tsx b/src/contexts/ViewModeContext.tsx
index 20e8a6a..e5b28e2 100644
--- a/src/contexts/ViewModeContext.tsx
+++ b/src/contexts/ViewModeContext.tsx
@@ -6,6 +6,7 @@ interface ViewModeContextType {
   isEmbedded: boolean;
   isFullscreen: boolean;
   isStandalone: boolean;
+  setIsFullscreen: (isFullscreen: boolean) => void;
 }
 
 const ViewModeContext = createContext<ViewModeContextType | undefined>(undefined);
@@ -32,11 +33,26 @@ export function ViewModeProvider({ children }: { children: React.ReactNode }) {
     };
   }, []);
 
+  const setIsFullscreen = (isFullscreen: boolean) => {
+    if (isFullscreen) {
+      document.documentElement.requestFullscreen().catch(() => {
+        // Handle error if fullscreen is not supported
+        console.warn('Fullscreen not supported');
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+        // Handle error if fullscreen is not supported
+        console.warn('Fullscreen not supported');
+      });
+    }
+  };
+
   const value = {
     viewMode,
     isEmbedded: viewMode === 'embedded',
     isFullscreen: viewMode === 'fullscreen',
     isStandalone: viewMode === 'standalone',
+    setIsFullscreen,
   };
 
   return (

From 50dc78359f56a4857fce2cbf94ff0cc939c8290e Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 13:00:57 +0200
Subject: [PATCH 31/35] feat: reorganize function controls layout and add
 parameter controls component

---
 src/components/Formula/FunctionSidebar.tsx   |  33 ---
 src/components/Formula/ParameterControls.tsx |  54 ++++
 src/pages/Index.tsx                          | 274 ++++++++-----------
 3 files changed, 165 insertions(+), 196 deletions(-)
 create mode 100644 src/components/Formula/ParameterControls.tsx

diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx
index 5e03bce..fe56394 100644
--- a/src/components/Formula/FunctionSidebar.tsx
+++ b/src/components/Formula/FunctionSidebar.tsx
@@ -6,8 +6,6 @@ import { Separator } from '@/components/ui/separator';
 import { Plus, Trash2, Maximize2, Minimize2 } from 'lucide-react';
 import { Formula } from '@/types/formula';
 import { MeasurementUnit } from '@/types/shapes';
-import { ParameterSlider } from '@/components/Formula/ParameterSlider';
-import { detectParameters } from '@/utils/parameterDetection';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface FunctionSidebarProps {
@@ -37,19 +35,6 @@ export default function FunctionSidebar({
 }: FunctionSidebarProps) {
   const { t } = useTranslation();
 
-  const handleParameterChange = (parameterName: string, value: number) => {
-    if (!selectedFormula) return;
-
-    const updatedParameters = {
-      ...selectedFormula.parameters,
-      [parameterName]: value,
-    };
-
-    onUpdateFormula(selectedFormula.id, {
-      parameters: updatedParameters,
-    });
-  };
-
   return (
     <div className={cn('flex flex-col h-full bg-background border-l', className)}>
       <div className="flex items-center justify-between p-4 border-b">
@@ -123,24 +108,6 @@ export default function FunctionSidebar({
           ))}
         </div>
       </ScrollArea>
-
-      {selectedFormula && (
-        <div className="border-t p-4 space-y-4">
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">{t('formula.parameters')}</h3>
-            {detectParameters(selectedFormula.expression).map((param) => (
-              <ParameterSlider
-                key={param.name}
-                parameterName={param.name}
-                displayName={String(selectedFormula.parameters?.[`${param.name}_displayName`] ?? param.displayName)}
-                value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
-                onChange={(value) => handleParameterChange(param.name, value)}
-                parameters={selectedFormula.parameters}
-              />
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   );
 } 
\ No newline at end of file
diff --git a/src/components/Formula/ParameterControls.tsx b/src/components/Formula/ParameterControls.tsx
new file mode 100644
index 0000000..07d0c03
--- /dev/null
+++ b/src/components/Formula/ParameterControls.tsx
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { Formula } from '@/types/formula';
+import { ParameterSlider } from '@/components/Formula/ParameterSlider';
+import { detectParameters } from '@/utils/parameterDetection';
+
+interface ParameterControlsProps {
+  selectedFormula: Formula | null;
+  onUpdateFormula: (id: string, updates: Partial<Formula>) => void;
+}
+
+export default function ParameterControls({
+  selectedFormula,
+  onUpdateFormula,
+}: ParameterControlsProps) {
+  const { t } = useTranslation();
+
+  const handleParameterChange = (parameterName: string, value: number) => {
+    if (!selectedFormula) return;
+
+    const updatedParameters = {
+      ...selectedFormula.parameters,
+      [parameterName]: value,
+    };
+
+    onUpdateFormula(selectedFormula.id, {
+      parameters: updatedParameters,
+    });
+  };
+
+  if (!selectedFormula) return null;
+
+  const parameters = detectParameters(selectedFormula.expression);
+  if (parameters.length === 0) return null;
+
+  return (
+    <div className="w-full bg-background border-t p-4">
+      <div className="max-w-4xl mx-auto">
+        <h3 className="text-sm font-medium mb-4">{t('formula.parameters')}</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {parameters.map((param) => (
+            <ParameterSlider
+              key={param.name}
+              parameterName={param.name}
+              displayName={String(selectedFormula.parameters?.[`${param.name}_displayName`] ?? param.displayName)}
+              value={selectedFormula.parameters?.[param.name] ?? param.defaultValue}
+              onChange={(value) => handleParameterChange(param.name, value)}
+              parameters={selectedFormula.parameters}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index a795338..0a3417b 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -27,6 +27,8 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import GlobalControls from '@/components/GlobalControls';
 import _UnifiedInfoPanel from '@/components/UnifiedInfoPanel';
 import { useViewMode } from '@/contexts/ViewModeContext';
+import ParameterControls from '@/components/Formula/ParameterControls';
+import { cn } from '@/lib/utils';
 
 const Index = () => {
   // Get the service factory
@@ -309,173 +311,119 @@ const Index = () => {
   }, [updateGridPosition]);
 
   return (
-    <div className={`min-h-screen bg-gray-50 ${isFullscreen || isMobile ? 'p-0' : ''}`}>
-      <div className={`${isFullscreen || isMobile ? 'max-w-full p-0' : 'container py-0 sm:py-2 md:py-4 lg:py-8 px-0 sm:px-2 md:px-4'} transition-all duration-200 h-[calc(100vh-0rem)] sm:h-[calc(100vh-0.5rem)]`}>
-        {/* Only show the header in the standard position when toolbar is visible and not in embedded mode */}
-        {isToolbarVisible && !isEmbedded && <GeometryHeader isFullscreen={isFullscreen} />}
-        
-        {/* Include both modals */}
-        <ConfigModal />
-        <ComponentConfigModal />
-        
-        <div className={`${isMobile || isFullscreen ? 'h-full' : isToolbarVisible ? 'h-[calc(100%-3rem)] sm:h-[calc(100%-4rem)]' : 'h-full'}`}>
-          <div className="h-full">
-            <div className="flex flex-col h-full">
-              <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between ${isFullscreen || isMobile ? 'space-y-1 sm:space-y-0 sm:space-x-1 px-1' : 'space-y-1 sm:space-y-0 sm:space-x-2 px-1 sm:px-2'} ${isMobile ? 'mb-0' : 'mb-1 sm:mb-2'}`}>
-                
-                {isToolbarVisible && !isEmbedded ? (
-                  <div className="flex flex-row items-center space-x-1 sm:space-x-2 overflow-x-auto w-full sm:w-auto pb-1 sm:pb-0 no-scrollbar">
-                    <Toolbar
-                      activeMode={activeMode}
-                      activeShapeType={activeShapeType}
-                      onModeChange={setActiveMode}
-                      onShapeTypeChange={setActiveShapeType}
-                      _onClear={deleteAllShapes}
-                      _onDelete={() => selectedShapeId && deleteShape(selectedShapeId)}
-                      hasSelectedShape={!!selectedShapeId}
-                      _canDelete={!!selectedShapeId}
-                      onToggleFormulaEditor={toggleFormulaEditor}
-                      isFormulaEditorOpen={isFormulaEditorOpen}
-                    />
-                  </div>
-                ) : (
-                  /* Show header in the toolbar position when toolbar is hidden and not in embedded mode */
-                  !isEmbedded && (
-                    <div className="flex-1">
-                      <GeometryHeader isFullscreen={isFullscreen} />
-                    </div>
-                  )
-                )}
-                
-                <div className="ml-auto">
-                  {/* Only show GlobalControls in non-embedded mode */}
-                  {!isEmbedded && (
-                    <GlobalControls 
-                      isFullscreen={isFullscreen} 
-                      onToggleFullscreen={toggleFullscreen}
-                      onShare={shareCanvasUrl}
-                    />
-                  )}
-                </div>
-              </div>
-              
-              {/* Only show FormulaEditor in non-embedded mode */}
-              {isFormulaEditorOpen && !isEmbedded && (
-                <div className="w-full mb-1 sm:mb-2 md:mb-3">
-                  <FormulaEditor
-                    formulas={formulas}
-                    onAddFormula={handleAddFormula}
-                    onUpdateFormula={handleUpdateFormula}
-                    onDeleteFormula={handleDeleteFormula}
-                    _measurementUnit={measurementUnit}
-                    isOpen={isFormulaEditorOpen}
-                    selectedFormulaId={selectedFormulaId}
-                    onSelectFormula={setSelectedFormulaId}
-                    onNewFormula={() => {
-                      const newFormula = createDefaultFormula('function');
-                      newFormula.expression = "x*x";
-                      handleAddFormula(newFormula);
-                    }}
-                  />
-                </div>
-              )}
-              
-              <div className="flex flex-1 h-full">
-                <div className="flex-1 h-full">
-                  <GeometryCanvas
-                    shapes={shapes}
-                    formulas={formulas}
-                    selectedShapeId={selectedShapeId}
-                    activeMode={activeMode}
-                    activeShapeType={activeShapeType}
-                    measurementUnit={measurementUnit}
-                    isFullscreen={isFullscreen}
-                    gridPosition={gridPosition}
-                    onShapeSelect={selectShape}
-                    onShapeCreate={createShape}
-                    onShapeMove={moveShape}
-                    onShapeResize={resizeShape}
-                    onShapeRotate={rotateShape}
-                    onShapeDelete={deleteShape}
-                    onModeChange={setActiveMode}
-                    onMoveAllShapes={handleMoveAllShapes}
-                    onGridPositionChange={handleGridPositionChange}
-                    serviceFactory={serviceFactory}
-                    onMeasurementUpdate={updateMeasurement}
-                    onFormulaSelect={setSelectedFormulaId}
-                    canvasTools={
-                      <div className="absolute top-2 right-2 z-10 flex space-x-1">
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Button 
-                                variant="outline"
-                                size="icon"
-                                className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
-                                onClick={deleteAllShapes}
-                              >
-                                <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p>{t('clearCanvas')}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                          
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Button 
-                                variant="outline"
-                                size="icon"
-                                className="h-7 w-7 sm:h-8 sm:w-8 bg-white/80 backdrop-blur-sm"
-                                onClick={() => setComponentConfigModalOpen(true)}
-                              >
-                                <Wrench className="h-3 w-3 sm:h-4 sm:w-4" />
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p>{t('componentConfigModal.openButton')}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                        
-                        {/* Add UnitSelector here */}
-                        <div className="bg-white/80 backdrop-blur-sm rounded-md">
-                          <UnitSelector
-                            value={measurementUnit}
-                            onChange={setMeasurementUnit}
-                            compact={true}
-                          />
-                        </div>
-                      </div>
-                    }
-                  />
-                </div>
-                {/* Always show FunctionSidebar when formula editor is open, even in embedded mode */}
-                {isFormulaEditorOpen && (
-                  <div className="w-80 border-l border-gray-200 bg-white">
-                    <FunctionSidebar
-                      formulas={formulas}
-                      selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
-                      onAddFormula={() => {
-                        const newFormula = createDefaultFormula('function');
-                        newFormula.expression = "x*x";
-                        handleAddFormula(newFormula);
-                      }}
-                      onDeleteFormula={handleDeleteFormula}
-                      onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
-                      onUpdateFormula={handleUpdateFormula}
-                      measurementUnit={measurementUnit}
-                      isFullscreen={isFullscreen}
-                      onToggleFullscreen={toggleFullscreen}
-                    />
-                  </div>
-                )}
-              </div>
+    <div className="flex flex-col h-screen">
+      {/* Header */}
+      {!isEmbedded && (
+        <GeometryHeader
+          isFullscreen={isFullscreen}
+        />
+      )}
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col">
+        {/* Toolbar */}
+        {!isEmbedded && isToolbarVisible && (
+          <Toolbar
+            activeMode={activeMode}
+            activeShapeType={activeShapeType}
+            onModeChange={setActiveMode}
+            onShapeTypeChange={setActiveShapeType}
+            _onClear={deleteAllShapes}
+            _onDelete={() => selectedShapeId && deleteShape(selectedShapeId)}
+            hasSelectedShape={!!selectedShapeId}
+            _canDelete={!!selectedShapeId}
+            onToggleFormulaEditor={toggleFormulaEditor}
+            isFormulaEditorOpen={isFormulaEditorOpen}
+          />
+        )}
+
+        {/* Function Controls - Moved to top */}
+        <div className="p-4 border-b">
+          <div className="flex items-center gap-2">
+            <div className="flex-1">
+              <FormulaEditor
+                formulas={formulas}
+                onAddFormula={handleAddFormula}
+                onUpdateFormula={handleUpdateFormula}
+                onDeleteFormula={handleDeleteFormula}
+                _measurementUnit={measurementUnit}
+                isOpen={true}
+                selectedFormulaId={selectedFormulaId}
+                onSelectFormula={setSelectedFormulaId}
+                onNewFormula={() => {
+                  const newFormula = createDefaultFormula('function');
+                  newFormula.expression = "x*x";
+                  handleAddFormula(newFormula);
+                }}
+              />
             </div>
           </div>
         </div>
+
+        {/* Canvas and Sidebar */}
+        <div className="flex-1 flex">
+          <div className="flex-1 relative">
+            <GeometryCanvas
+              shapes={shapes}
+              selectedShapeId={selectedShapeId}
+              activeMode={activeMode}
+              activeShapeType={activeShapeType}
+              measurementUnit={measurementUnit}
+              gridPosition={gridPosition}
+              onGridPositionChange={updateGridPosition}
+              onShapeCreate={createShape}
+              onShapeSelect={selectShape}
+              onShapeMove={moveShape}
+              onShapeResize={resizeShape}
+              onShapeRotate={rotateShape}
+              onShapeDelete={deleteShape}
+              onMeasurementUpdate={updateMeasurement}
+              formulas={formulas}
+              pixelsPerUnit={_pixelsPerUnit}
+            />
+          </div>
+
+          {/* Function Sidebar - Now only for formula selection */}
+          <FunctionSidebar
+            formulas={formulas}
+            selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
+            onAddFormula={() => {
+              const newFormula = createDefaultFormula('function');
+              newFormula.expression = "x*x";
+              handleAddFormula(newFormula);
+            }}
+            onDeleteFormula={handleDeleteFormula}
+            onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
+            onUpdateFormula={handleUpdateFormula}
+            measurementUnit={measurementUnit}
+            className={cn(
+              'w-80',
+              isFormulaEditorOpen ? 'block' : 'hidden',
+              isMobile ? 'fixed inset-y-0 right-0 z-50' : ''
+            )}
+            isFullscreen={isFullscreen}
+            onToggleFullscreen={toggleFullscreen}
+          />
+        </div>
+
+        {/* Parameter Controls */}
+        <ParameterControls
+          selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
+          onUpdateFormula={handleUpdateFormula}
+        />
       </div>
+
+      {/* Global Config Menu */}
+      {!isEmbedded && (
+        <GlobalControls
+          isFullscreen={isFullscreen}
+          onToggleFullscreen={toggleFullscreen}
+          onShare={shareCanvasUrl}
+        />
+      )}
+
+      {/* Component Config Modal */}
+      <ComponentConfigModal />
     </div>
   );
 };

From a660f3de4b2668bb0988080e8fd5ed503be091e2 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 13:40:07 +0200
Subject: [PATCH 32/35] feat: improve embedded view and add canvas fullscreen
 button

---
 src/components/CanvasGrid/GridZoomControl.tsx | 29 ++++++-
 src/pages/Index.tsx                           | 86 ++++++++++---------
 test/embedding/index.html                     |  4 +-
 3 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/src/components/CanvasGrid/GridZoomControl.tsx b/src/components/CanvasGrid/GridZoomControl.tsx
index 4f5be26..7a77ef8 100644
--- a/src/components/CanvasGrid/GridZoomControl.tsx
+++ b/src/components/CanvasGrid/GridZoomControl.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { ZoomIn, ZoomOut } from 'lucide-react';
+import { ZoomIn, ZoomOut, Maximize2, Minimize2 } from 'lucide-react';
 import { useGridZoom } from '@/contexts/GridZoomContext/index';
 import { useTranslate } from '@/hooks/useTranslate';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useViewMode } from '@/contexts/ViewModeContext';
 
 const GridZoomControl: React.FC = () => {
   const _t = useTranslate();
   const { zoomFactor, setZoomFactor } = useGridZoom();
+  const { isFullscreen, setIsFullscreen } = useViewMode();
 
   const handleZoomIn = () => {
     const newZoom = Math.min(3, zoomFactor + 0.05);
@@ -24,6 +26,10 @@ const GridZoomControl: React.FC = () => {
     setZoomFactor(1);
   };
 
+  const handleToggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
   return (
     <div 
       className="absolute bottom-4 left-4 flex items-center space-x-1 bg-background/80 backdrop-blur-sm p-1 rounded-lg border shadow-sm" 
@@ -83,6 +89,27 @@ const GridZoomControl: React.FC = () => {
             <p>Zoom In (Ctrl +)</p>
           </TooltipContent>
         </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleToggleFullscreen}
+              className="h-8 w-8"
+              data-testid="grid-fullscreen"
+            >
+              {isFullscreen ? (
+                <Minimize2 size={16} />
+              ) : (
+                <Maximize2 size={16} />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</p>
+          </TooltipContent>
+        </Tooltip>
       </TooltipProvider>
     </div>
   );
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 0a3417b..05c0543 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -337,28 +337,30 @@ const Index = () => {
           />
         )}
 
-        {/* Function Controls - Moved to top */}
-        <div className="p-4 border-b">
-          <div className="flex items-center gap-2">
-            <div className="flex-1">
-              <FormulaEditor
-                formulas={formulas}
-                onAddFormula={handleAddFormula}
-                onUpdateFormula={handleUpdateFormula}
-                onDeleteFormula={handleDeleteFormula}
-                _measurementUnit={measurementUnit}
-                isOpen={true}
-                selectedFormulaId={selectedFormulaId}
-                onSelectFormula={setSelectedFormulaId}
-                onNewFormula={() => {
-                  const newFormula = createDefaultFormula('function');
-                  newFormula.expression = "x*x";
-                  handleAddFormula(newFormula);
-                }}
-              />
+        {/* Function Controls - Hide when embedded */}
+        {!isEmbedded && (
+          <div className="p-4 border-b">
+            <div className="flex items-center gap-2">
+              <div className="flex-1">
+                <FormulaEditor
+                  formulas={formulas}
+                  onAddFormula={handleAddFormula}
+                  onUpdateFormula={handleUpdateFormula}
+                  onDeleteFormula={handleDeleteFormula}
+                  _measurementUnit={measurementUnit}
+                  isOpen={true}
+                  selectedFormulaId={selectedFormulaId}
+                  onSelectFormula={setSelectedFormulaId}
+                  onNewFormula={() => {
+                    const newFormula = createDefaultFormula('function');
+                    newFormula.expression = "x*x";
+                    handleAddFormula(newFormula);
+                  }}
+                />
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
         {/* Canvas and Sidebar */}
         <div className="flex-1 flex">
@@ -383,27 +385,29 @@ const Index = () => {
             />
           </div>
 
-          {/* Function Sidebar - Now only for formula selection */}
-          <FunctionSidebar
-            formulas={formulas}
-            selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
-            onAddFormula={() => {
-              const newFormula = createDefaultFormula('function');
-              newFormula.expression = "x*x";
-              handleAddFormula(newFormula);
-            }}
-            onDeleteFormula={handleDeleteFormula}
-            onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
-            onUpdateFormula={handleUpdateFormula}
-            measurementUnit={measurementUnit}
-            className={cn(
-              'w-80',
-              isFormulaEditorOpen ? 'block' : 'hidden',
-              isMobile ? 'fixed inset-y-0 right-0 z-50' : ''
-            )}
-            isFullscreen={isFullscreen}
-            onToggleFullscreen={toggleFullscreen}
-          />
+          {/* Function Sidebar - Hide when embedded */}
+          {!isEmbedded && (
+            <FunctionSidebar
+              formulas={formulas}
+              selectedFormula={formulas.find(f => f.id === selectedFormulaId) || null}
+              onAddFormula={() => {
+                const newFormula = createDefaultFormula('function');
+                newFormula.expression = "x*x";
+                handleAddFormula(newFormula);
+              }}
+              onDeleteFormula={handleDeleteFormula}
+              onSelectFormula={(formula) => setSelectedFormulaId(formula.id)}
+              onUpdateFormula={handleUpdateFormula}
+              measurementUnit={measurementUnit}
+              className={cn(
+                'w-80',
+                isFormulaEditorOpen ? 'block' : 'hidden',
+                isMobile ? 'fixed inset-y-0 right-0 z-50' : ''
+              )}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={toggleFullscreen}
+            />
+          )}
         </div>
 
         {/* Parameter Controls */}
diff --git a/test/embedding/index.html b/test/embedding/index.html
index d372988..e477f4c 100644
--- a/test/embedding/index.html
+++ b/test/embedding/index.html
@@ -16,7 +16,7 @@
             font-family: system-ui, -apple-system, sans-serif;
         }
         .container {
-            width: 800px;
+            width: 750px;
             background: white;
             padding: 20px;
             border-radius: 8px;
@@ -24,7 +24,7 @@
         }
         iframe {
             width: 100%;
-            height: 400px;
+            height: 600px;
             border: none;
             border-radius: 4px;
         }

From 67035efea176a0f087f0f60117c3321bb94eaeac Mon Sep 17 00:00:00 2001
From: Manuel Fittko <manuel.fittko@sofatutor.com>
Date: Wed, 2 Apr 2025 13:41:46 +0200
Subject: [PATCH 33/35] chore: update package dependencies to include
 react-i18next and additional rollup modules

- Added react-i18next version 15.4.1 to package.json and package-lock.json.
- Included various rollup optional dependencies for improved compatibility across platforms.
- Updated html-parse-stringify and i18next versions in package-lock.json.
---
 package-lock.json | 546 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 547 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 0aa472a..8556bf7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -89,6 +89,7 @@
         "lint-staged": "^15.4.3",
         "nyc": "^17.1.0",
         "postcss": "^8.4.47",
+        "react-i18next": "^15.4.1",
         "tailwindcss": "^3.4.11",
         "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
@@ -96,6 +97,12 @@
         "typescript-eslint": "^8.0.1",
         "vite": "^6.2.2",
         "vite-plugin-istanbul": "^7.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.1",
+        "@rollup/rollup-linux-x64-musl": "4.9.1",
+        "@swc/core-linux-x64-gnu": "1.3.107",
+        "@swc/core-linux-x64-musl": "1.3.107"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3233,6 +3240,34 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.36.0.tgz",
+      "integrity": "sha512-jgrXjjcEwN6XpZXL0HUeOVGfjXhPyxAbbhD0BlXUB+abTOpbPiN5Wb3kOT7yb+uEtATNYF5x5gIfwutmuBA26w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.36.0.tgz",
+      "integrity": "sha512-NyfuLvdPdNUfUNeYKUwPwKsE5SXa2J6bCt2LdB/N+AxShnkpiczi3tcLJrm5mA+eqpy0HmaIY9F6XCa32N5yzg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
     "node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.36.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.36.0.tgz",
@@ -3247,6 +3282,228 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.36.0.tgz",
+      "integrity": "sha512-6c6wMZa1lrtiRsbDziCmjE53YbTkxMYhhnWnSW8R/yqsM7a6mSJ3uAVT0t8Y/DGt7gxUWYuFM4bwWk9XCJrFKA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.36.0.tgz",
+      "integrity": "sha512-KXVsijKeJXOl8QzXTsA+sHVDsFOmMCdBRgFmBb+mfEb/7geR7+C8ypAml4fquUt14ZyVXaw2o1FWhqAfOvA4sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.36.0.tgz",
+      "integrity": "sha512-dVeWq1ebbvByI+ndz4IJcD4a09RJgRYmLccwlQ8bPd4olz3Y213uf1iwvc7ZaxNn2ab7bjc08PrtBgMu6nb4pQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.36.0.tgz",
+      "integrity": "sha512-bvXVU42mOVcF4le6XSjscdXjqx8okv4n5vmwgzcmtvFdifQ5U4dXFYaCB87namDRKlUL9ybVtLQ9ztnawaSzvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.36.0.tgz",
+      "integrity": "sha512-JFIQrDJYrxOnyDQGYkqnNBtjDwTgbasdbUiQvcU8JmGDfValfH1lNpng+4FWlhaVIR4KPkeddYjsVVbmJYvDcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.36.0.tgz",
+      "integrity": "sha512-KqjYVh3oM1bj//5X7k79PSCZ6CvaVzb7Qs7VMWS+SlWB5M8p3FqufLP9VNp4CazJ0CsPDLwVD9r3vX7Ci4J56A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.36.0.tgz",
+      "integrity": "sha512-QiGnhScND+mAAtfHqeT+cB1S9yFnNQ/EwCg5yE3MzoaZZnIV0RV9O5alJAoJKX/sBONVKeZdMfO8QSaWEygMhw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.36.0.tgz",
+      "integrity": "sha512-1ZPyEDWF8phd4FQtTzMh8FQwqzvIjLsl6/84gzUxnMNFBtExBtpL51H67mV9xipuxl1AEAerRBgBwFNpkw8+Lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.36.0.tgz",
+      "integrity": "sha512-VMPMEIUpPFKpPI9GZMhJrtu8rxnp6mJR3ZzQPykq4xc2GmdHj3Q4cA+7avMyegXy4n1v+Qynr9fR88BmyO74tg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.36.0.tgz",
+      "integrity": "sha512-ttE6ayb/kHwNRJGYLpuAvB7SMtOeQnVXEIpMtAvx3kepFQeowVED0n1K9nAdraHUPJ5hydEMxBpIR7o4nrm8uA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.36.0.tgz",
+      "integrity": "sha512-4a5gf2jpS0AIe7uBjxDeUMNcFmaRTbNv7NxI5xOCs4lhzsVyGR/0qBXduPnoWf6dGC365saTiwag8hP1imTgag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.1.tgz",
+      "integrity": "sha512-kr8rEPQ6ns/Lmr/hiw8sEVj9aa07gh1/tQF2Y5HrNCCEPiCBGnBUt9tVusrcBBiJfIt1yNaXN6r1CCmpbFEDpg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.1.tgz",
+      "integrity": "sha512-t4QSR7gN+OEZLG0MiCgPqMWZGwmeHhsM4AkegJ0Kiy6TnJ9vZ8dEIwHw1LcZKhbHxTY32hp9eVCMdR3/I8MGRw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.36.0.tgz",
+      "integrity": "sha512-qbqt4N7tokFwwSVlWDsjfoHgviS3n/vZ8LK0h1uLG9TYIRuUTJC88E1xb3LM2iqZ/WTqNQjYrtmtGmrmmawB6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.36.0.tgz",
+      "integrity": "sha512-t+RY0JuRamIocMuQcfwYSOkmdX9dtkr1PbhKW42AMvaDQa+jOdpUYysroTF/nuPpAaQMWp7ye+ndlmmthieJrQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.36.0.tgz",
+      "integrity": "sha512-aRXd7tRZkWLqGbChgcMMDEHjOKudo1kChb1Jt1IfR8cY/KIpgNviLeJy5FUb9IpSuQj8dU2fAYNMPW/hLKOSTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3330,6 +3587,191 @@
         "node": ">=10"
       }
     },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.11.11.tgz",
+      "integrity": "sha512-/N4dGdqEYvD48mCF3QBSycAbbQd3yoZ2YHSzYesQf8usNc2YpIhYqEH3sql02UsxTjEFOJSf1bxZABDdhbSl6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.11.tgz",
+      "integrity": "sha512-hsBhKK+wVXdN3x9MrL5GW0yT8o9GxteE5zHAI2HJjRQel3HtW7m5Nvwaq+q8rwMf4YQRd8ydbvwl4iUOZx7i2Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.11.tgz",
+      "integrity": "sha512-YOCdxsqbnn/HMPCNM6nrXUpSndLXMUssGTtzT7ffXqr7WuzRg2e170FVDVQFIkb08E7Ku5uOnnUVAChAJQbMOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.11.tgz",
+      "integrity": "sha512-nR2tfdQRRzwqR2XYw9NnBk9Fdvff/b8IiJzDL28gRR2QiJWLaE8LsRovtWrzCOYq6o5Uu9cJ3WbabWthLo4jLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.3.107",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.107.tgz",
+      "integrity": "sha512-uBVNhIg0ip8rH9OnOsCARUFZ3Mq3tbPHxtmWk9uAa5u8jQwGWeBx5+nTHpDOVd3YxKb6+5xDEI/edeeLpha/9g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.3.107",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.107.tgz",
+      "integrity": "sha512-mvACkUvzSIB12q1H5JtabWATbk3AG+pQgXEN95AmEX2ZA5gbP9+B+mijsg7Sd/3tboHr7ZHLz/q3SHTvdFJrEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.11.tgz",
+      "integrity": "sha512-aZNZznem9WRnw2FbTqVpnclvl8Q2apOBW2B316gZK+qxbe+ktjOUnYaMhdCG3+BYggyIBDOnaJeQrXbKIMmNdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.11.tgz",
+      "integrity": "sha512-DjeJn/IfjgOddmJ8IBbWuDK53Fqw7UvOz7kyI/728CSdDYC3LXigzj3ZYs4VvyeOt+ZcQZUB2HA27edOifomGw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.11.tgz",
+      "integrity": "sha512-Gp/SLoeMtsU4n0uRoKDOlGrRC6wCfifq7bqLwSlAG8u8MyJYJCcwjg7ggm0rhLdC2vbiZ+lLVl3kkETp+JUvKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core/node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.11.tgz",
+      "integrity": "sha512-b4gBp5HA9xNWNC5gsYbdzGBJWx4vKSGybGMGOVWWuF+ynx10+0sA/o4XJGuNHm8TEDuNh9YLKf6QkIO8+GPJ1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core/node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.11.tgz",
+      "integrity": "sha512-dEvqmQVswjNvMBwXNb8q5uSvhWrJLdttBSef3s6UC5oDSwOr00t3RQPzyS3n5qmGJ8UMTdPRmsopxmqaODISdg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -7271,6 +7713,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -7326,6 +7778,39 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/i18next": {
+      "version": "24.2.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.3.tgz",
+      "integrity": "sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.26.10"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -11385,6 +11870,29 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.1.tgz",
+      "integrity": "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -11884,6 +12392,34 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.36.0.tgz",
+      "integrity": "sha512-5KtoW8UWmwFKQ96aQL3LlRXX16IMwyzMq/jSSVIIyAANiE1doaQsx/KRyhAvpHlPjPiSU/AYX/8m+lQ9VToxFQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.36.0.tgz",
+      "integrity": "sha512-sycrYZPrv2ag4OCvaN5js+f01eoZ2U+RmT5as8vhxiFz+kxwlHrsxOwKPSA8WyS+Wc6Epid9QeI/IkQ9NkgYyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -13256,6 +13792,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/package.json b/package.json
index 824c745..4413bca 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "lint-staged": "^15.4.3",
     "nyc": "^17.1.0",
     "postcss": "^8.4.47",
+    "react-i18next": "^15.4.1",
     "tailwindcss": "^3.4.11",
     "ts-jest": "^29.2.6",
     "ts-node": "^10.9.2",

From bb88fecf525ec42bf355169ac87c1ca9cf23be78 Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 14:01:39 +0200
Subject: [PATCH 34/35] hidden function controls in embed view again

---
 .../__tests__/GridZoomControl.test.tsx        | 49 ++++++++++++++-----
 test/embedding/index.html                     |  2 +-
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx b/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx
index 66b6536..1b1e1d9 100644
--- a/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx
+++ b/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { GridZoomProvider } from '@/contexts/GridZoomContext/index';
+import { ViewModeProvider } from '@/contexts/ViewModeContext';
 import GridZoomControl from '../GridZoomControl';
 
 // Mock translations
@@ -16,17 +17,24 @@ jest.mock('@/components/ui/tooltip', () => ({
   TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
-// Wrapper component to provide the GridZoomContext
-const GridZoomControlWrapper = () => {
-  return (
-    <GridZoomProvider>
-      <GridZoomControl />
-    </GridZoomProvider>
-  );
-};
+// Mock fullscreen API
+const mockRequestFullscreen = jest.fn().mockImplementation(() => Promise.resolve());
+const mockExitFullscreen = jest.fn().mockImplementation(() => Promise.resolve());
+
+beforeAll(() => {
+  Object.defineProperty(document.documentElement, 'requestFullscreen', {
+    value: mockRequestFullscreen,
+    writable: true,
+  });
+  Object.defineProperty(document, 'exitFullscreen', {
+    value: mockExitFullscreen,
+    writable: true,
+  });
+});
 
-// Mock localStorage for testing
 beforeEach(() => {
+  mockRequestFullscreen.mockClear();
+  mockExitFullscreen.mockClear();
   // Clear localStorage before each test
   localStorage.clear();
   // Set initial zoom to 1 (100%)
@@ -36,7 +44,13 @@ beforeEach(() => {
 describe('GridZoomControl', () => {
   // Helper function to render the component with a reset zoom level
   const renderComponent = () => {
-    return render(<GridZoomControlWrapper />);
+    return render(
+      <ViewModeProvider>
+        <GridZoomProvider>
+          <GridZoomControl />
+        </GridZoomProvider>
+      </ViewModeProvider>
+    );
   };
 
   it('should render zoom controls', () => {
@@ -44,7 +58,7 @@ describe('GridZoomControl', () => {
     
     // Check for zoom buttons - using indices since buttons have icons, not text
     const buttons = screen.getAllByRole('button');
-    expect(buttons.length).toBe(3); // Zoom out, percentage, zoom in
+    expect(buttons.length).toBe(4); // Zoom out, percentage, zoom in, fullscreen
     
     // Check for zoom factor display
     expect(screen.getByText('100%')).toBeInTheDocument();
@@ -168,4 +182,17 @@ describe('GridZoomControl', () => {
     // Maximum zoom is 300%
     expect(percentageButton).toHaveTextContent('300%');
   });
+
+  it('should handle fullscreen toggle', () => {
+    renderComponent();
+    
+    const buttons = screen.getAllByRole('button');
+    const fullscreenButton = buttons[3]; // Fourth button is fullscreen
+    
+    // Click fullscreen button
+    fireEvent.click(fullscreenButton);
+    
+    // The button should now show the minimize icon
+    // We can't test the actual fullscreen state as it's not supported in jsdom
+  });
 }); 
\ No newline at end of file
diff --git a/test/embedding/index.html b/test/embedding/index.html
index e477f4c..2c66a1c 100644
--- a/test/embedding/index.html
+++ b/test/embedding/index.html
@@ -33,7 +33,7 @@
 <body>
     <div class="container">
         <iframe 
-            src="http://localhost:8081/" 
+            src="http://localhost:8081/?grid=758.0%2C377.0&formulas=function%2Cformula-1743571190392-935%2Ca*x*x%2520%252B%2520b*x%2520%252B%2520c%2C%2523447091%2C2.0%2C-10000%2C10000%2C500%2C1.00%7Cfunction%2Cformula-1743594131091-95%2Ca%2520*%2520x%2520*%2520x%2C%25236de1e6%2C2.0%2C-10000%2C10000%2C500%2C1.00" 
             title="Function Plotter"
             allow="fullscreen"
         ></iframe>

From 23b6d5d68834a0431211b17d53b0b7c209a0be8d Mon Sep 17 00:00:00 2001
From: Joachim Schwarz <joachim.schwarz@sofatutor.com>
Date: Wed, 2 Apr 2025 14:18:36 +0200
Subject: [PATCH 35/35] feat: prevent default function when loaded from URL

---
 src/pages/Index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 4ef9983..938a3fc 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -35,7 +35,7 @@ const Index = () => {
   // Get the service factory
   const serviceFactory = useServiceFactory();
   const { setComponentConfigModalOpen } = useComponentConfig();
-  const { isToolbarVisible, setToolbarVisible } = useGlobalConfig();
+  const { isToolbarVisible, setToolbarVisible, defaultTool } = useGlobalConfig();
   const { isFullscreen, isEmbedded, setIsFullscreen } = useViewMode();
   const isMobile = useIsMobile();
   
@@ -249,7 +249,7 @@ const Index = () => {
       const newState = !prevState;
       
       // If opening the formula editor and there are no formulas, create a default one
-      if (newState && formulas.length === 0) {
+      if (newState && formulas.length === 0 && !hasLoadedFromUrl.current) {
         const newFormula = createDefaultFormula('function');
         // Set a default expression of x^2 instead of empty
         newFormula.expression = "x*x";
@@ -264,11 +264,11 @@ const Index = () => {
       
       return newState;
     });
-  }, [formulas, handleAddFormula, selectedFormulaId]);
+  }, [formulas, handleAddFormula, selectedFormulaId, hasLoadedFromUrl]);
 
   // Auto-open formula editor in embedded mode
   useEffect(() => {
-    if (isEmbedded && !isFormulaEditorOpen && formulas.length === 0) {
+    if (isEmbedded && !isFormulaEditorOpen && formulas.length === 0 && !hasLoadedFromUrl.current) {
       const newFormula = createDefaultFormula('function');
       newFormula.expression = "x*x";
       handleAddFormula(newFormula);