### Install lin-ldf Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md Installs the lin-ldf package using npm. ```bash npm install lin-ldf ``` -------------------------------- ### Usage Example Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md Demonstrates how to use the lin-ldf library to parse, validate, and get statistics from LDF content in a JavaScript environment. ```javascript import * as linLdf from "lin-ldf"; const ldfContent = `/* MY BLOCK COMMENT */ LIN_description_file ; LIN_protocol_version = "2.1" ; LIN_language_version = "2.1" ; LIN_speed = 19.2 kbps ; Nodes { Master: Master, 5 ms, 0.1 ms ; Slaves: Slave1, Slave2, Slave3 ; } // MY LINE COMMENT Signals { Signal1: 10, 0, Master, Slave1 , Slave2 ; Signal2: 10, 0, Master, Slave1 ; Signal3: 10, 0, Master, Slave1 ; Signal4: 10, 0, Slave1, Master ; Signal5: 2, 0, Slave1, Master ; Signal6: 1, 0, Slave1, Master ; } Diagnostic_signals { MasterReqB0: 8, 0 ; /* MID SECTION COMMENT */ MasterReqB1: 8, 0 ; MasterReqB2: 8, 0 ; MasterReqB3: 8, 0 ; MasterReqB4: 8, 0 ; MasterReqB5: 8, 0 ; /* MID SECTION COMMENT */ } Frames { Frame1: 0, Master, 8 { Signal1, 0 ; /* MID SECTION COMMENT */ Signal2, 10 ; } Frame2: 0x16, Slave1, 8 { Signal3, 0 ; Signal4, 10 ; } } Diagnostic_frames { MasterReq: 0x3C { MasterReqB0, 0 ; MasterReqB1, 8 ; MasterReqB2, 16 ; MasterReqB3, 24 ; MasterReqB4, 32 ; MasterReqB5, 40 ; MasterReqB6, 48 ; MasterReqB7, 56 ; } SlaveResp: 0x3D { SlaveRespB0, 0 ; SlaveRespB1, 8 ; SlaveRespB2, 16 ; SlaveRespB3, 24 ; SlaveRespB4, 32 ; SlaveRespB5, 40 ; SlaveRespB6, 48 ; SlaveRespB7, 56 ; } } Node_attributes { Slave1{ LIN_protocol = "2.1" ; configured_NAD = 0xB ; initial_NAD = 0xB ; product_id = 0x123, 0x4567, 8 ; response_error = Signal1 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } Slave2{ LIN_protocol = "2.1" ; configured_NAD = 0xC ; initial_NAD = 0xC ; product_id = 0x124, 0x4568, 0x66 ; response_error = Signal2 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } } Schedule_tables { AllFrames { Frame1 delay 10 ms ; Frame2 delay 10 ms ; } } Signal_encoding_types { ENC_BOOL { logical_value, 0, "FALSE" ; logical_value, 1, "TRUE" ; } ENC_TEMP { physical_value, 0, 1023, 0.2, -40, "degC" ; } ENC_RPM { physical_value, 0, 1023, 10, 0, "rpm" ; } } Signal_representation { ENC_BOOL: Signal1, Signal2 ; ENC_TEMP: Signal3, Signal4 ; ENC_RPM: Signal5, Signal6 ; }`; try { // Parse LDF file and get JavaScript object const parsed = linLdf.parse_ldf_file(ldfContent); console.log("Parsed LDF:", parsed); // Or get as JSON string const jsonString = linLdf.parse_ldf_to_json(ldfContent); console.log("LDF as JSON:", jsonString); // Validate LDF content const isValid = linLdf.validate_ldf(ldfContent); console.log("Is valid:", isValid); // Get statistics const stats = linLdf.get_ldf_stats(ldfContent); console.log("LDF stats:", stats); } catch (error) { console.error("Parse error:", error); } ``` -------------------------------- ### Build and Run WebAssembly Demo Source: https://github.com/zpg6/lin-ldf/blob/main/README.md Builds the WebAssembly module for the lin-ldf parser and serves a local demo using Python's HTTP server. This is useful for testing the parser in a browser without installation. ```bash cd wasm ./build.sh python3 -m http.server 8000 # Then open http://localhost:8000 ``` -------------------------------- ### Install lin-ldf NPM Package Source: https://github.com/zpg6/lin-ldf/blob/main/README.md Installs the lin-ldf WebAssembly package via npm. This allows using the LIN Description File parser in JavaScript environments. ```bash npm install lin-ldf ``` -------------------------------- ### Running lin-ldf WASM Tests with Bun Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/tests/README.md Provides commands to install dependencies, run all tests, execute specific test files, and use watch mode for the lin-ldf WASM package tests using the Bun runtime. ```bash # Install dependencies bun install # Run all tests bun test # Run specific test file bun test tests/basic.test.ts # Watch mode bun test --watch ``` -------------------------------- ### Load Example LDF Content Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Populates the LDF input textarea with a comprehensive example LDF string. This includes various sections like LIN description, nodes, signals, diagnostic signals, frames, diagnostic frames, node attributes, schedule tables, and signal encoding types. ```javascript function loadExample() { const exampleLdf = `/* MY BLOCK COMMENT */ LIN_description_file ; LIN_protocol_version = "2.1" ; LIN_language_version = "2.1" ; LIN_speed = 19.2 kbps ; Nodes { Master: Master, 5 ms, 0.1 ms ; Slaves: Slave1, Slave2, Slave3 ; } // MY LINE COMMENT Signals { Signal1: 10, 0, Master, Slave1 , Slave2 ; Signal2: 10, 0, Master, Slave1 ; Signal3: 10, 0, Master, Slave1 ; Signal4: 10, 0, Slave1, Master ; Signal5: 2, 0, Slave1, Master ; Signal6: 1, 0, Slave1, Master ; } Diagnostic_signals { MasterReqB0: 8, 0 ; /* MID SECTION COMMENT */ MasterReqB1: 8, 0 ; MasterReqB2: 8, 0 ; MasterReqB3: 8, 0 ; MasterReqB4: 8, 0 ; MasterReqB5: 8, 0 ; MasterReqB6: 8, 0 ; MasterReqB7: 8, 0 ; SlaveRespB0: 8, 0 ; SlaveRespB1: 8, 0 ; SlaveRespB2: 8, 0 ; SlaveRespB3: 8, 0 ; SlaveRespB4: 8, 0 ; SlaveRespB5: 8, 0 ; SlaveRespB6: 8, 0 ; SlaveRespB7: 8, 0 ; /* MID SECTION COMMENT */ } Frames { Frame1: 0, Master, 8 { Signal1, 0 ; /* MID SECTION COMMENT */ Signal2, 10 ; } Frame2: 0x16, Slave1, 8 { Signal3, 0 ; Signal4, 10 ; } } Diagnostic_frames { MasterReq: 0x3C { MasterReqB0, 0 ; MasterReqB1, 8 ; MasterReqB2, 16 ; MasterReqB3, 24 ; MasterReqB4, 32 ; MasterReqB5, 40 ; MasterReqB6, 48 ; MasterReqB7, 56 ; } SlaveResp: 0x3D { SlaveRespB0, 0 ; SlaveRespB1, 8 ; SlaveRespB2, 16 ; SlaveRespB3, 24 ; SlaveRespB4, 32 ; SlaveRespB5, 40 ; SlaveRespB6, 48 ; SlaveRespB7, 56 ; } } Node_attributes { Slave1{ LIN_protocol = "2.1" ; configured_NAD = 0xB ; initial_NAD = 0xB ; product_id = 0x123, 0x4567, 8 ; response_error = Signal1 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } Slave2{ LIN_protocol = "2.1" ; configured_NAD = 0xC ; initial_NAD = 0xC ; product_id = 0x124, 0x4568, 0x66 ; response_error = Signal2 ; P2_min = 100 ms ; ST_min = 0 ms ; N_As_timeout = 1000 ms ; N_Cr_timeout = 1000 ms ; configurable_frames { Frame1 ; Frame2 ; } } } Schedule_tables { AllFrames { Frame1 delay 10 ms ; Frame2 delay 10 ms ; } } Signal_encoding_types { ENC_BOOL { logical_value, 0, "FALSE" ; logical_value, 1, "TRUE" ; } ENC_TEMP { physical_value, 0, 1023, 0.2, -40, "degC" ; } ENC_RPM { physical_value, 0, 1023, 10, 0, "rpm" ; } } Signal_representation { ENC_BOOL: Signal1, Signal2 ; ENC_TEMP: Signal3, Signal4 ; ENC_RPM: Signal5, Signal6 ; }`; document.getElementById("ldf-input").value = exampleLdf; showStatus('Example LDF loaded. Click "Parse LDF" to analyze it.', "success"); } ``` -------------------------------- ### Event Listeners and Initial State Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Sets up event listeners for the parse, load example, and clear buttons. It also initializes the page by disabling the parse button and adding a loading class until the WASM module is ready. ```javascript // Event listeners document.getElementById("parse-button").addEventListener("click", parseLdf); document.getElementById("load-example").addEventListener("click", loadExample); document.getElementById("clear-button").addEventListener("click", clearAll); // Initially disable parse button until WASM loads document.getElementById("parse-button").disabled = true; document.getElementById("parse-button").classList.add("loading"); // Initialize WASM run(); ``` -------------------------------- ### Parse LDF File and Access Data in Rust Source: https://github.com/zpg6/lin-ldf/blob/main/README.md This snippet demonstrates parsing a LIN Description File (LDF) string using the `lin_ldf::parse_ldf` function. It then accesses and prints information about the LIN protocol version, speed, frames, and signals within the parsed data. The example assumes a valid LDF string is provided. ```rust use lin_ldf::parse_ldf; let ldf = r#"\nLIN_description_file ;\nLIN_protocol_version = \"2.1\" ;\nLIN_language_version = \"2.1\" ;\nLIN_speed = 19.2 kbps ;\n\n/* PARSING IGNORES BLOCK COMMENTS */\n// AND LINE COMMENTS\n\nNodes {\n Master: Master, 5 ms, 0.1 ms ;\n Slaves: Slave1, Slave2, Slave3 ;\n}\n\nSignals {\n Signal1: 10, 0, Master, Slave1 , Slave2 ;\n Signal2: 10, 0, Master, Slave1 ;\n Signal3: 10, 0, Slave1, Master ;\n Signal4: 10, 0, Slave1, Master ;\n Signal5: 2, 0, Slave1, Master ;\n Signal6: 1, 0, Slave1, Master ;\n}\n\nFrames {\n Frame1: 0, Master, 8 {\n Signal1, 0 ;\n Signal2, 10 ;\n }\n Frame2: 0x16, Slave1, 8 {\n Signal3, 0 ;\n Signal4, 10 ;\n }\n}\n\nNode_attributes {\n Slave1 {\n LIN_protocol = \"2.1\" ;\n configured_NAD = 0xB ;\n initial_NAD = 0xB ;\n product_id = 0x123, 0x4567, 8 ;\n response_error = Signal1 ;\n P2_min = 100 ms ;\n ST_min = 0 ms ;\n N_As_timeout = 1000 ms ;\n N_Cr_timeout = 1000 ms ;\n configurable_frames {\n Frame1 ;\n Frame2 ;\n }\n }\n Slave2 {\n LIN_protocol = \"2.1\" ;\n configured_NAD = 0xC ;\n initial_NAD = 0xC ;\n product_id = 0x124, 0x4568, 0x66 ;\n response_error = Signal2 ;\n P2_min = 100 ms ;\n ST_min = 0 ms ;\n N_As_timeout = 1000 ms ;\n N_Cr_timeout = 1000 ms ;\n configurable_frames {\n Frame1 ;\n Frame2 ;\n }\n }\n}\n\nSchedule_tables {\n AllFrames {\n Frame1 delay 10 ms ;\n Frame2 delay 10 ms ;\n }\n}\n"#; let parsed_ldf = parse_ldf(ldf).expect("Failed to parse LDF file"); println!("LIN Version: {}", parsed_ldf.lin_protocol_version); // 2.1 println!("LIN Speed: {}", parsed_ldf.lin_speed); // 19200 for frame in parsed_ldf.frames { println!("Frame: `{}` is {} bytes long", frame.frame_name, frame.frame_size); for signal in frame.signals { println!("\tSignal: `{}` at bit position {}", signal.signal_name, signal.start_bit); } } ``` -------------------------------- ### lin-ldf API Documentation Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/README.md Documentation for the lin-ldf library functions, including parsing, validation, and conversion utilities. ```APIDOC lin-ldf API: - parse_ldf_file(content: string): object Parses LDF content and returns a JavaScript object representing the LDF structure. Parameters: - content: A string containing the LDF file content. Returns: A JavaScript object with the parsed LDF data. - parse_ldf_to_json(content: string): string Parses LDF content and returns it as a JSON string. Parameters: - content: A string containing the LDF file content. Returns: A JSON string representation of the LDF data. - parse_ldf_to_pretty_json(content: string): string Parses LDF content and returns it as a formatted JSON string. Parameters: - content: A string containing the LDF file content. Returns: A pretty-printed JSON string representation of the LDF data. - validate_ldf(content: string): boolean Validates the LDF content without performing a full parse. Parameters: - content: A string containing the LDF file content. Returns: true if the LDF content is valid, false otherwise. - get_ldf_stats(content: string): object Retrieves statistics about the LDF file. Parameters: - content: A string containing the LDF file content. Returns: An object containing statistics about the LDF file. - ldf_from_json(json: string): object Creates an LDF object from a JSON string. Parameters: - json: A JSON string representing LDF data. Returns: A JavaScript object representing the LDF structure. ``` -------------------------------- ### Initialize and Load WASM Module Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Initializes the lin-ldf WebAssembly module and retrieves its version. It also enables a parse button and displays a success or error message. ```javascript import init, { parse_ldf_file, get_wasm_version } from "./pkg/lin_ldf.js"; let wasm; async function run() { try { wasm = await init(); console.log("lin-ldf-wasm module loaded, version:", get_wasm_version()); document.getElementById("parse-button").disabled = false; document.getElementById("parse-button").classList.remove("loading"); showStatus("lin-ldf-wasm module loaded successfully!", "success"); } catch (error) { console.error("Failed to load lin-ldf-wasm module:", error); showStatus("Failed to load lin-ldf-wasm module: " + error.message, "error"); } } ``` -------------------------------- ### LIN LDF Parsing Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html This snippet demonstrates the core functionality of parsing LIN Description Files (LDF). It takes LDF content as input and processes it to extract network configuration details such as nodes, signals, frames, and scheduling. The underlying implementation uses the lin-ldf Rust crate, compiled to WebAssembly for browser execution. ```javascript import init, { parse_ldf } from 'lin-ldf'; async function loadLDFParser() { await init(); // Initialize the WASM module } function parseLDFContent(ldfContent) { try { const parsedData = parse_ldf(ldfContent); return parsedData; } catch (error) { console.error("Error parsing LDF content:", error); return null; } } // Example Usage: // loadLDFParser().then(() => { // const ldfString = "... your LDF content here ..."; // const result = parseLDFContent(ldfString); // if (result) { // console.log(result); // } // }); ``` ```rust use lin_ldf::parse_ldf; #[wasm_bindgen] pub fn parse_ldf(ldf_content: &str) -> Result { match parse_ldf(ldf_content) { Ok(data) => Ok(serde_wasm_bindgen::to_value(&data).unwrap()), Err(e) => Err(JsValue::from_str(&format!("Failed to parse LDF: {}", e))) } } // Note: This Rust code is intended to be compiled to WASM and called from JavaScript. ``` -------------------------------- ### Display Parsing Statistics Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Populates a stats div with key statistics from the parsed LIN description file, including the number of signals, frames, nodes, and schedule tables. ```javascript function showStats(parsedLdf) { const statsDiv = document.getElementById("stats"); statsDiv.innerHTML = `
${parsedLdf.signals.length} Signals
${parsedLdf.frames.length} Frames
${parsedLdf.nodes.slaves.length + 1} Nodes
${parsedLdf.schedule_tables.length} Schedules
`; } ``` -------------------------------- ### Basic HTML Structure for LDF Parser Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html This snippet outlines the fundamental HTML structure for the LDF parser application. It includes sections for the header, input area, control buttons, output display, and statistics. ```HTML LDF Reader

LDF Reader

Parsing Results

Statistics

``` -------------------------------- ### Format Parsed LDF Data for Display Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Generates HTML content from a parsed LIN description object. It includes a table of contents and detailed sections for header information, network nodes, signals, frames, and schedule tables. ```javascript function formatParsedData(parsedLdf) { let output = ""; // Build table of contents let toc = `

Table of Contents

`; output += toc; // Header Information output += `

Header Information

`; output += ` ${ parsedLdf.header.channel_name ? `` : "" }
PropertyValue
Protocol Version${parsedLdf.header.lin_protocol_version}
Language Version${parsedLdf.header.lin_language_version}
Speed${parsedLdf.header.lin_speed} bps
Channel Name${parsedLdf.header.channel_name}
`; // Nodes output += `

Network Nodes

`; output += `
TypeNameTime BaseJitter
Master${parsedLdf.nodes.master.name}${parsedLdf.nodes.master.time_base}${parsedLdf.nodes.master.jitter}
`; if (parsedLdf.nodes.slaves.length > 0) { output += ` ${parsedLdf.nodes.slaves.map(slave => ``).join("")}
Slave Nodes
${slave.name}
`; } // Signals if (parsedLdf.signals.length > 0) { output += `

Signals

`; output += ` ${parsedLdf.signals .map( signal => ` ` ) .join("")}
NameSize (bits)Init ValuePublisherSubscribers
${signal.name} ${signal.signal_size} ${JSON.stringify(signal.init_value)} ${signal.published_by} ${signal.subscribed_by.join(", ")}
`; } // Frames if (parsedLdf.frames.length > 0) { output += `

Frames

`; parsedLdf.frames.forEach(frame => { output += `
`; output += `

${frame.frame_name} LIN ID: 0x${frame.frame_id .toString(16) .padStart(2, "0") .toUpperCase()}

`; output += `
PropertyValue
Publisher${frame.published_by}
Size${frame.frame_size} bytes
`; if (frame.signals.length > 0) { output += ` ${frame.signals .map( signal => ` ` ) .join("")}
SignalStart Bit
${signal.signal_name} ${signal.start_bit}
`; } output += `
`; }); } // Schedule Tables if (parsedLdf.schedule_tables.length > 0) { output += `

Schedule Tables

`; parsedLdf.schedule_tables.forEach(schedule => { output += `

${schedule.schedule_table_name}

`; output += ` ${schedule.frame_delays .map( entry => ` ` ) .join("")}
FrameDelay (ms)
${entry.frame_name} ${entry.frame_time}
`; }); } return output; } ``` -------------------------------- ### LDF Parsing and Display Logic Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Handles the core logic for parsing LDF content, displaying results, and managing status messages. It relies on an external `wasm` module and utility functions like `showStatus`, `showStats`, and `formatParsedData`. ```javascript function parseLdf() { const input = document.getElementById("ldf-input").value.trim(); if (!input) { showStatus("Please enter LDF content to parse", "error"); return; } if (!wasm) { showStatus("lin-ldf-wasm module not loaded yet", "error"); return; } try { const result = parse_ldf_file(input); console.log("Parsed LDF:", result); showStatus("LDF parsed successfully!", "success"); showStats(result); const formattedOutput = formatParsedData(result); document.getElementById("result").innerHTML = formattedOutput; } catch (error) { console.error("Parse error:", error); showStatus("Parse error: " + error, "error"); document.getElementById("result").innerHTML = ""; document.getElementById("stats").innerHTML = ""; } } ``` -------------------------------- ### CSS Styling for LDF Parser UI Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html This CSS code provides the styling for the LDF parser web application. It defines the color scheme, typography, layout, and interactive elements like buttons and text areas, creating a dark-themed, user-friendly interface. ```CSS * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background: #09090b; color: #fafafa; line-height: 1.6; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } .header { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid #27272a; } h1 { font-size: 2.5rem; font-weight: 700; margin: 0 0 1rem 0; background: linear-gradient(135deg, #fafafa 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-links { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; } .nav-links a { color: #d4d4d8; text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all 0.2s ease; border: 1px solid #27272a; background: #18181b; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); } .nav-links a:hover { color: #fafafa; background: #27272a; border-color: #3f3f46; transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .info-card { background: #18181b; border: 1px solid #27272a; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); } .info-card strong { color: #fafafa; } .info-card a { color: #60a5fa; text-decoration: none; font-weight: 500; } .info-card a:hover { color: #93c5fd; text-decoration: underline; } .input-section { margin-bottom: 2rem; } label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: #fafafa; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; } textarea { width: 100%; height: 200px; padding: 1rem; background: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; color: #fafafa; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 0.875rem; resize: vertical; transition: all 0.2s ease; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); } textarea:focus { outline: none; border-color: #3f3f46; box-shadow: 0 0 0 3px rgba(63, 63, 70, 0.3); } textarea::placeholder { color: #71717a; } .buttons { display: flex; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; } button { background: #fafafa; color: #09090b; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } button:hover { background: #e4e4e7; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); } button:active { transform: translateY(0); } button:disabled { background: #3f3f46; color: #71717a; cursor: not-allowed; transform: none; box-shadow: none; } #parse-button { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color: white; } #parse-button:hover:not(:disabled) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .output-section { margin-top: 2rem; } .result { background: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 0.875rem; max-height: 400px; overflow-y: auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .result::-webkit-scrollbar { width: 8px; } .result::-webkit-scrollbar-track { background: #27272a; border-radius: 4px; } .result::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; } .result::-webkit-scrollbar-thumb:hover { background: #52525b; } .error { background: #1f1315; border-color: #7c2d12; color: #fca5a5; } .success { background: #1414; border-color: #166534; color: #86efac; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 1.5rem; background: #18181b; border: 1px solid #27272a; border-radius: 0.75rem; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .stat-item { text-align: center; padding: 1rem; background: #09090b; border-radius: 0.5rem; border: 1px solid #27272a; } .stat-number { font-size: 2rem; font-weight: 700; color: #60a5fa; display: block; margin-bottom: 0.25rem; } .stat-label { font-size: 0.75rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .section-title { color: #fafafa; font-size: 1.25rem; font-weight: 600; margin: 2.5rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid #3f3f46; position: relative; } .section-title::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 3rem; height: 2px; background: #60a5fa; } .data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #18181b; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #27272a; } .data-table th { background: #3f3f46; font-weight: 600; color: #fafafa; } ``` -------------------------------- ### Display Status Messages Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Updates a status div with messages indicating success or errors during module loading or parsing. The message is styled based on the type provided. ```javascript function showStatus(message, type) { const statusDiv = document.getElementById("status"); statusDiv.innerHTML = `
${message}
`; } ``` -------------------------------- ### Clear Input and Output Fields Source: https://github.com/zpg6/lin-ldf/blob/main/wasm/index.html Resets all input and output fields on the page to their default empty states. This includes the LDF input textarea, the result display area, the stats display area, and the status message area. ```javascript function clearAll() { document.getElementById("ldf-input").value = ""; document.getElementById("result").innerHTML = ""; document.getElementById("stats").innerHTML = ""; document.getElementById("status").innerHTML = ""; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.