[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { ChevronLeft, ChevronRight, Info, Play, RotateCcw, BookOpen, Pause, PlayCircle } from "lucide-react" import type { JSX } from "react" interface State { id: string x: number y: number isInitial?: boolean isFinal?: boolean } interface Transition { from: string to: string label: string isEpsilon?: boolean curveOffset?: number } interface AutomatonData { states: State[] transitions: Transition[] alphabet: string[] } interface RegexNode { type: "concat" | "union" | "star" | "symbol" value?: string left?: RegexNode right?: RegexNode x?: number y?: number } interface ConversionExample { id: string name: string type: "nfa-to-dfa" | "nfa-to-regex" | "dfa-to-regex" | "enfa-to-dfa" description: string originalAutomaton: AutomatonData convertedAutomaton: AutomatonData regexResult?: string regexTree?: RegexNode steps: ConversionStep[] } interface ConversionStep { id: number title: string description: string explanation: string highlightedElements: string[] newElements: string[] currentAutomaton?: AutomatonData } const examples: ConversionExample[] = [ // NFA to DFA Examples { id: "nfa-dfa-1", name: "NFA to DFA - Ending with 01", type: "nfa-to-dfa", description: 'Convert NFA accepting strings ending with "01"', originalAutomaton: { states: [ { id: "q0", x: 100, y: 150, isInitial: true }, { id: "q1", x: 280, y: 100 }, { id: "q2", x: 450, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q0", label: "0,1", curveOffset: -40 }, { from: "q0", to: "q1", label: "0", curveOffset: 0 }, { from: "q1", to: "q2", label: "1", curveOffset: 0 }, ], alphabet: ["0", "1"], }, convertedAutomaton: { states: [ { id: "{q0}", x: 80, y: 150, isInitial: true }, { id: "{q0,q1}", x: 240, y: 100 }, { id: "{q2}", x: 400, y: 150, isFinal: true }, { id: "∅", x: 240, y: 200 }, ], transitions: [ { from: "{q0}", to: "{q0,q1}", label: "0", curveOffset: 0 }, { from: "{q0}", to: "{q0}", label: "1", curveOffset: -40 }, { from: "{q0,q1}", to: "{q0,q1}", label: "0", curveOffset: -40 }, { from: "{q0,q1}", to: "{q2}", label: "1", curveOffset: 0 }, { from: "{q2}", to: "∅", label: "0,1", curveOffset: 0 }, { from: "∅", to: "∅", label: "0,1", curveOffset: -40 }, ], alphabet: ["0", "1"], }, steps: [ { id: 1, title: "Initialize with start state", description: "Create initial DFA state from NFA start state", explanation: "The DFA construction begins with the ε-closure of the NFA start state. Since there are no ε-transitions, {q0} becomes our initial DFA state.", highlightedElements: ["q0"], newElements: ["{q0}"], }, { id: 2, title: "Process transitions from {q0}", description: "Find all possible transitions on input symbols", explanation: "From q0 on input 0: we can go to both q0 and q1. This creates the new DFA state {q0,q1}. On input 1: we stay in q0.", highlightedElements: ["q0", "q1"], newElements: ["{q0,q1}"], }, { id: 3, title: "Process transitions from {q0,q1}", description: "Handle the compound state transitions", explanation: "From the set {q0,q1}: On input 0, both q0 and q1 can be reached, so result is {q0,q1}. On input 1, q0 stays and q1 goes to q2, so result is {q2}.", highlightedElements: ["q0", "q1", "q2"], newElements: ["{q2}"], }, { id: 4, title: "Complete remaining states", description: "Process all remaining unprocessed states", explanation: "State {q2} has no outgoing transitions in the original NFA, so it goes to ∅ on both inputs. State ∅ transitions to itself on all inputs (dead state).", highlightedElements: ["q2"], newElements: ["∅"], }, ], }, { id: "nfa-dfa-2", name: "NFA to DFA - Multiple Paths", type: "nfa-to-dfa", description: 'Convert NFA with parallel paths for "ab" or "ba"', originalAutomaton: { states: [ { id: "q0", x: 100, y: 150, isInitial: true }, { id: "q1", x: 250, y: 100 }, { id: "q2", x: 400, y: 100, isFinal: true }, { id: "q3", x: 250, y: 200 }, { id: "q4", x: 400, y: 200, isFinal: true }, ], transitions: [ { from: "q0", to: "q1", label: "a", curveOffset: 0 }, { from: "q0", to: "q3", label: "b", curveOffset: 0 }, { from: "q1", to: "q2", label: "b", curveOffset: 0 }, { from: "q3", to: "q4", label: "a", curveOffset: 0 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [ { id: "{q0}", x: 80, y: 150, isInitial: true }, { id: "{q1}", x: 220, y: 100 }, { id: "{q3}", x: 220, y: 200 }, { id: "{q2}", x: 360, y: 100, isFinal: true }, { id: "{q4}", x: 360, y: 200, isFinal: true }, { id: "∅", x: 480, y: 150 }, ], transitions: [ { from: "{q0}", to: "{q1}", label: "a", curveOffset: 0 }, { from: "{q0}", to: "{q3}", label: "b", curveOffset: 0 }, { from: "{q1}", to: "{q2}", label: "b", curveOffset: 0 }, { from: "{q1}", to: "∅", label: "a", curveOffset: 0 }, { from: "{q3}", to: "{q4}", label: "a", curveOffset: 0 }, { from: "{q3}", to: "∅", label: "b", curveOffset: 0 }, { from: "{q2}", to: "∅", label: "a,b", curveOffset: 0 }, { from: "{q4}", to: "∅", label: "a,b", curveOffset: 0 }, { from: "∅", to: "∅", label: "a,b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, steps: [ { id: 1, title: "Start with initial state", description: "Begin DFA construction with {q0}", explanation: "The conversion starts with the initial state of the NFA, which becomes the first state of our DFA.", highlightedElements: ["q0"], newElements: ["{q0}"], }, { id: 2, title: "Process transitions from {q0}", description: "Create new states for each transition", explanation: 'From q0: on input "a" we go to q1, creating DFA state {q1}. On input "b" we go to q3, creating DFA state {q3}.', highlightedElements: ["q0", "q1", "q3"], newElements: ["{q1}", "{q3}"], }, { id: 3, title: "Complete all transitions", description: "Process remaining states and add dead state", explanation: "From {q1} on 'b' we get {q2}, from {q3} on 'a' we get {q4}. All other transitions lead to the dead state ∅.", highlightedElements: ["q1", "q2", "q3", "q4"], newElements: ["{q2}", "{q4}", "∅"], }, ], }, // Epsilon NFA to DFA Examples { id: "enfa-dfa-1", name: "ε-NFA to DFA - Basic", type: "enfa-to-dfa", description: "Convert ε-NFA with epsilon transitions", originalAutomaton: { states: [ { id: "q0", x: 80, y: 150, isInitial: true }, { id: "q1", x: 200, y: 100 }, { id: "q2", x: 200, y: 200 }, { id: "q3", x: 350, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q1", label: "ε", isEpsilon: true, curveOffset: 0 }, { from: "q0", to: "q2", label: "a", curveOffset: 0 }, { from: "q1", to: "q3", label: "b", curveOffset: 0 }, { from: "q2", to: "q3", label: "b", curveOffset: 0 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [ { id: "{q0,q1}", x: 100, y: 150, isInitial: true }, { id: "{q2}", x: 250, y: 100 }, { id: "{q3}", x: 400, y: 150, isFinal: true }, { id: "∅", x: 250, y: 200 }, ], transitions: [ { from: "{q0,q1}", to: "{q2}", label: "a", curveOffset: 0 }, { from: "{q0,q1}", to: "{q3}", label: "b", curveOffset: 0 }, { from: "{q2}", to: "{q3}", label: "b", curveOffset: 0 }, { from: "{q2}", to: "∅", label: "a", curveOffset: 0 }, { from: "{q3}", to: "∅", label: "a,b", curveOffset: 0 }, { from: "∅", to: "∅", label: "a,b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, steps: [ { id: 1, title: "Compute ε-closure of start state", description: "Find all states reachable via ε-transitions", explanation: "ε-closure(q0) = {q0, q1} because q0 can reach q1 via an ε-transition. This becomes our initial DFA state.", highlightedElements: ["q0", "q1"], newElements: ["{q0,q1}"], }, { id: 2, title: "Process transitions from {q0,q1}", description: "Find transitions for the compound state", explanation: "From {q0,q1}: on 'a', q0 goes to q2, so we get {q2}. On 'b', q1 goes to q3, so we get {q3}.", highlightedElements: ["q0", "q1", "q2", "q3"], newElements: ["{q2}", "{q3}"], }, { id: 3, title: "Complete remaining transitions", description: "Process all remaining states", explanation: "From {q2} on 'b' we get {q3}, on 'a' we get ∅. From {q3} all transitions go to ∅.", highlightedElements: ["q2", "q3"], newElements: ["∅"], }, ], }, { id: "enfa-dfa-2", name: "ε-NFA to DFA - Complex", type: "enfa-to-dfa", description: "Convert complex ε-NFA with multiple epsilon paths", originalAutomaton: { states: [ { id: "q0", x: 80, y: 150, isInitial: true }, { id: "q1", x: 180, y: 100 }, { id: "q2", x: 180, y: 200 }, { id: "q3", x: 280, y: 100 }, { id: "q4", x: 280, y: 200 }, { id: "q5", x: 400, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q1", label: "ε", isEpsilon: true, curveOffset: 0 }, { from: "q0", to: "q2", label: "ε", isEpsilon: true, curveOffset: 0 }, { from: "q1", to: "q3", label: "a", curveOffset: 0 }, { from: "q2", to: "q4", label: "b", curveOffset: 0 }, { from: "q3", to: "q5", label: "ε", isEpsilon: true, curveOffset: 0 }, { from: "q4", to: "q5", label: "ε", isEpsilon: true, curveOffset: 0 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [ { id: "{q0,q1,q2}", x: 100, y: 150, isInitial: true }, { id: "{q3,q5}", x: 280, y: 100, isFinal: true }, { id: "{q4,q5}", x: 280, y: 200, isFinal: true }, { id: "∅", x: 400, y: 150 }, ], transitions: [ { from: "{q0,q1,q2}", to: "{q3,q5}", label: "a", curveOffset: 0 }, { from: "{q0,q1,q2}", to: "{q4,q5}", label: "b", curveOffset: 0 }, { from: "{q3,q5}", to: "∅", label: "a,b", curveOffset: 0 }, { from: "{q4,q5}", to: "∅", label: "a,b", curveOffset: 0 }, { from: "∅", to: "∅", label: "a,b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, steps: [ { id: 1, title: "Compute ε-closure of start state", description: "Find all states reachable via ε-transitions from q0", explanation: "ε-closure(q0) = {q0, q1, q2} because q0 can reach both q1 and q2 via ε-transitions.", highlightedElements: ["q0", "q1", "q2"], newElements: ["{q0,q1,q2}"], }, { id: 2, title: "Process transitions and compute ε-closures", description: "Find transitions and their ε-closures", explanation: "From {q0,q1,q2}: on 'a', q1→q3, then ε-closure(q3)={q3,q5}. On 'b', q2→q4, then ε-closure(q4)={q4,q5}.", highlightedElements: ["q1", "q2", "q3", "q4", "q5"], newElements: ["{q3,q5}", "{q4,q5}"], }, { id: 3, title: "Complete the DFA", description: "All final states lead to dead state", explanation: "Both {q3,q5} and {q4,q5} are final states (contain q5). All their transitions lead to the dead state ∅.", highlightedElements: ["q3", "q4", "q5"], newElements: ["∅"], }, ], }, // NFA to Regular Expression Examples { id: "nfa-regex-1", name: "NFA to RegEx - Simple", type: "nfa-to-regex", description: "Convert simple NFA to regular expression using state elimination", originalAutomaton: { states: [ { id: "q0", x: 100, y: 150, isInitial: true }, { id: "q1", x: 250, y: 100 }, { id: "q2", x: 400, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q1", label: "a", curveOffset: 0 }, { from: "q0", to: "q2", label: "b", curveOffset: 0 }, { from: "q1", to: "q2", label: "b", curveOffset: 0 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [], transitions: [], alphabet: ["a", "b"], }, regexResult: "ab + b", regexTree: { type: "union", left: { type: "concat", left: { type: "symbol", value: "a", x: 150, y: 120 }, right: { type: "symbol", value: "b", x: 200, y: 120 }, x: 175, y: 100, }, right: { type: "symbol", value: "b", x: 275, y: 120 }, x: 225, y: 80, }, steps: [ { id: 1, title: "Add new start and final states", description: "Prepare automaton for state elimination method", explanation: "Add a new start state with ε-transition to original start, and new final state with ε-transitions from all original final states.", highlightedElements: ["q0", "q2"], newElements: ["qs", "qf"], }, { id: 2, title: "Eliminate state q1", description: "Remove q1 and update transitions", explanation: "When eliminating q1, we create a direct transition from q0 to q2 with label 'ab' (combining q0→q1 'a' and q1→q2 'b').", highlightedElements: ["q1"], newElements: [], }, { id: 3, title: "Final regular expression", description: "Complete elimination to get final regex", explanation: "After eliminating all intermediate states, we get the regular expression: ab + b", highlightedElements: ["q0", "q2"], newElements: [], }, ], }, { id: "nfa-regex-2", name: "NFA to RegEx - With Loop", type: "nfa-to-regex", description: "Convert NFA with self-loop to regular expression", originalAutomaton: { states: [ { id: "q0", x: 100, y: 150, isInitial: true }, { id: "q1", x: 300, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q0", label: "a", curveOffset: -40 }, { from: "q0", to: "q1", label: "b", curveOffset: 0 }, { from: "q1", to: "q1", label: "b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [], transitions: [], alphabet: ["a", "b"], }, regexResult: "a*bb*", regexTree: { type: "concat", left: { type: "star", left: { type: "symbol", value: "a", x: 120, y: 120 }, x: 120, y: 100, }, right: { type: "concat", left: { type: "symbol", value: "b", x: 180, y: 120 }, right: { type: "star", left: { type: "symbol", value: "b", x: 240, y: 120 }, x: 240, y: 100, }, x: 210, y: 100, }, x: 180, y: 80, }, steps: [ { id: 1, title: "Identify self-loops", description: "Handle self-loops in the automaton", explanation: "State q0 has a self-loop with 'a', and q1 has a self-loop with 'b'. These become Kleene stars in the regex.", highlightedElements: ["q0", "q1"], newElements: [], }, { id: 2, title: "Apply state elimination", description: "Eliminate states to build regex", explanation: "The self-loop on q0 becomes 'a*', the transition q0→q1 is 'b', and the self-loop on q1 becomes 'b*'.", highlightedElements: ["q0", "q1"], newElements: [], }, { id: 3, title: "Construct final regex", description: "Combine all parts into final expression", explanation: "Concatenating all parts: a* (from q0 self-loop) + b (transition) + b* (from q1 self-loop) = a*bb*", highlightedElements: [], newElements: [], }, ], }, // DFA to Regular Expression Examples { id: "dfa-regex-1", name: "DFA to RegEx - Simple", type: "dfa-to-regex", description: "Convert simple DFA to regular expression using state elimination", originalAutomaton: { states: [ { id: "q0", x: 100, y: 150, isInitial: true }, { id: "q1", x: 300, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q0", label: "b", curveOffset: -40 }, { from: "q0", to: "q1", label: "a", curveOffset: 0 }, { from: "q1", to: "q1", label: "a,b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [], transitions: [], alphabet: ["a", "b"], }, regexResult: "b*a(a+b)*", regexTree: { type: "concat", left: { type: "star", left: { type: "symbol", value: "b", x: 120, y: 120 }, x: 120, y: 100, }, right: { type: "concat", left: { type: "symbol", value: "a", x: 180, y: 120 }, right: { type: "star", left: { type: "union", left: { type: "symbol", value: "a", x: 220, y: 140 }, right: { type: "symbol", value: "b", x: 260, y: 140 }, x: 240, y: 120, }, x: 240, y: 100, }, x: 210, y: 100, }, x: 180, y: 80, }, steps: [ { id: 1, title: "Add new start and final states", description: "Prepare automaton for state elimination method", explanation: "Add a new start state with ε-transition to original start, and new final state with ε-transitions from all original final states.", highlightedElements: ["q0", "q1"], newElements: ["qs", "qf"], }, { id: 2, title: "Eliminate state q0", description: "Remove q0 and update transitions", explanation: "When eliminating q0, the self-loop 'b' becomes 'b*', and the transition to q1 becomes 'b*a'.", highlightedElements: ["q0"], newElements: [], }, { id: 3, title: "Eliminate state q1", description: "Remove q1 and create final expression", explanation: "Eliminating q1 with its self-loop '(a+b)' creates the final regular expression: b*a(a+b)*", highlightedElements: ["q1"], newElements: [], }, ], }, { id: "dfa-regex-2", name: "DFA to RegEx - Complex", type: "dfa-to-regex", description: "Convert more complex DFA with multiple states", originalAutomaton: { states: [ { id: "q0", x: 80, y: 150, isInitial: true }, { id: "q1", x: 200, y: 100 }, { id: "q2", x: 320, y: 150, isFinal: true }, ], transitions: [ { from: "q0", to: "q1", label: "a", curveOffset: 0 }, { from: "q0", to: "q0", label: "b", curveOffset: -40 }, { from: "q1", to: "q2", label: "b", curveOffset: 0 }, { from: "q1", to: "q0", label: "a", curveOffset: 20 }, { from: "q2", to: "q2", label: "a,b", curveOffset: -40 }, ], alphabet: ["a", "b"], }, convertedAutomaton: { states: [], transitions: [], alphabet: ["a", "b"], }, regexResult: "(b+aa)*ab(a+b)*", regexTree: { type: "concat", left: { type: "star", left: { type: "union", left: { type: "symbol", value: "b", x: 100, y: 140 }, right: { type: "concat", left: { type: "symbol", value: "a", x: 130, y: 140 }, right: { type: "symbol", value: "a", x: 150, y: 140 }, x: 140, y: 140, }, x: 120, y: 120, }, x: 120, y: 100, }, right: { type: "concat", left: { type: "concat", left: { type: "symbol", value: "a", x: 200, y: 140 }, right: { type: "symbol", value: "b", x: 220, y: 140 }, x: 210, y: 120, }, right: { type: "star", left: { type: "union", left: { type: "symbol", value: "a", x: 260, y: 140 }, right: { type: "symbol", value: "b", x: 280, y: 140 }, x: 270, y: 120, }, x: 270, y: 100, }, x: 240, y: 100, }, x: 200, y: 80, }, steps: [ { id: 1, title: "Setup for elimination", description: "Add new start and final states", explanation: "Add new start state qs with ε-transition to q0, and new final state qf with ε-transition from q2.", highlightedElements: ["q0", "q2"], newElements: ["qs", "qf"], }, { id: 2, title: "Eliminate q1", description: "Remove intermediate state q1", explanation: "Eliminating q1 creates new transitions: q0 to q2 with 'ab', and q0 to q0 with 'aa'.", highlightedElements: ["q1"], newElements: [], }, { id: 3, title: "Final expression", description: "Complete the regular expression", explanation: "Final regular expression: (b+aa)*ab(a+b)*", highlightedElements: ["q0", "q2"], newElements: [], }, ], }, ] export default function FormalLanguageConverter() { const [selectedExample, setSelectedExample] = useState(examples[0]) const [currentStep, setCurrentStep] = useState(0) const [showAllSteps, setShowAllSteps] = useState(false) const [isAutoPlaying, setIsAutoPlaying] = useState(false) const [autoPlayInterval, setAutoPlayInterval] = useState(null) const handleExampleChange = (exampleId: string) => { const example = examples.find((ex) => ex.id === exampleId) if (example) { setSelectedExample(example) setCurrentStep(0) stopAutoPlay() } } const nextStep = () => { if (currentStep < selectedExample.steps.length - 1) { setCurrentStep(currentStep + 1) } else { stopAutoPlay() } } const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const resetSteps = () => { setCurrentStep(0) stopAutoPlay() } const startAutoPlay = () => { if (!isAutoPlaying) { setIsAutoPlaying(true) const interval = setInterval(() => { setCurrentStep((prev) => { if (prev < selectedExample.steps.length - 1) { return prev + 1 } else { setIsAutoPlaying(false) return prev } }) }, 2500) setAutoPlayInterval(interval) } } const stopAutoPlay = () => { setIsAutoPlaying(false) if (autoPlayInterval) { clearInterval(autoPlayInterval) setAutoPlayInterval(null) } } useEffect(() => { return () => { if (autoPlayInterval) { clearInterval(autoPlayInterval) } } }, [autoPlayInterval]) const getConversionTypeLabel = (type: string) => { switch (type) { case "nfa-to-dfa": return "NFA → DFA" case "nfa-to-regex": return "NFA → RegEx" case "dfa-to-regex": return "DFA → RegEx" case "enfa-to-dfa": return "ε-NFA → DFA" default: return "Conversion" } } const RegexTreeDiagram = ({ tree, title }: { tree: RegexNode; title: string }) => { const renderNode = (node: RegexNode): JSX.Element => { const { x = 0, y = 0 } = node switch (node.type) { case "symbol": return ( {node.value} ) case "union": return ( + {node.left && ( )} {node.right && ( )} {node.left && renderNode(node.left)} {node.right && renderNode(node.right)} ) case "concat": return ( · {node.left && ( )} {node.right && ( )} {node.left && renderNode(node.left)} {node.right && renderNode(node.right)} ) case "star": return ( * {node.left && ( )} {node.left && renderNode(node.left)} ) default: return } } return (

{title}

{selectedExample.regexResult}

Regular Expression

) } const AutomatonDiagram = ({ automaton, title, highlightedStates = [], newStates = [], isRegexResult = false, }: { automaton: AutomatonData title: string highlightedStates?: string[] newStates?: string[] isRegexResult?: boolean }) => { if (isRegexResult && selectedExample.regexTree) { return } if (isRegexResult || automaton.states.length === 0) { return (

{title}

{selectedExample.regexResult || "Regular Expression"}

Final regular expression representing the language

) } return (

{title}

) } const getCurrentHighlights = () => { if (currentStep < selectedExample.steps.length) { return { highlighted: selectedExample.steps[currentStep].highlightedElements, new: selectedExample.steps[currentStep].newElements, } } return { highlighted: [], new: [] } } const { highlighted, new: newElements } = getCurrentHighlights() return (

{/* Header */}

Formal Language Converter

Interactive tool for visualizing conversions between formal language representations

{/* Example Selection */}

Select Example:

{/* Main Content */}

{/* Original Formalism Panel */}

Original ({selectedExample.type.split("-")[0].toUpperCase()}) selectedExample.originalAutomaton.states.some((s) => s.id === h), )} />

Structure Summary

States: {selectedExample.originalAutomaton.states.map((s) => s.id).join(", ")}

Final States:{" "} {selectedExample.originalAutomaton.states .filter((s) => s.isFinal) .map((s) => s.id) .join(", ")}

Alphabet: {selectedExample.originalAutomaton.alphabet.join(", ")}

Description: {selectedExample.description}

{/* Converted Formalism Panel */}

Converted ({selectedExample.type.split("-to-")[1].toUpperCase()}) selectedExample.convertedAutomaton.states.some((s) => s.id === h), )} newStates={newElements.filter((n) => selectedExample.convertedAutomaton.states.some((s) => s.id === n))} isRegexResult={selectedExample.type.includes("regex")} />

Structure Summary

{selectedExample.type.includes("regex") ? ( <>

Result: {selectedExample.regexResult}

Type: Regular Expression

Language: Same as original automaton

) : ( <>

States: {selectedExample.convertedAutomaton.states.map((s) => s.id).join(", ")}

Final States:{" "} {selectedExample.convertedAutomaton.states .filter((s) => s.isFinal) .map((s) => s.id) .join(", ")}

)}

Conversion: {getConversionTypeLabel(selectedExample.type)}

{/* Step-by-Step Conversion */} Step-by-Step Conversion

Show All Steps

Step {currentStep + 1} of {selectedExample.steps.length}

{!showAllSteps ? ( /* Single Step View */

{selectedExample.steps[currentStep] && (

{selectedExample.steps[currentStep].title}

{selectedExample.steps[currentStep].description}

Highlighted Elements:{" "} {selectedExample.steps[currentStep].highlightedElements.join(", ") || "None"}

{selectedExample.steps[currentStep].newElements.length > 0 && (

New Elements: {selectedExample.steps[currentStep].newElements.join(", ")}

)}

) : ( /* All Steps View */

{selectedExample.steps.map((step, index) => (

Step {step.id}

{step.title}

{step.description}

Highlights: {step.highlightedElements.join(", ") || "None"}

))}

)}

) }