/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
// app.jsx · IFClite landing interactive bits
// Code tabs, package picker, bench explorer, stack builder.
const { useState, useEffect, useMemo, useRef } = React;
// ─────────────────────────── code samples ───────────────────────────
const CODE_SAMPLES = [
{
id: "parse",
label: "Parse",
title: "Parse a file",
desc: "Async with progress events. ~1,259 MB/s tokenized on M1/M2. Schema-aware down to property sets.",
imports: ["@ifc-lite/parser"],
code: `import { IfcParser } from '@ifc-lite/parser' ;
const parser = new IfcParser ();
const buf = await fetch ('model.ifc' ). then (r => r. arrayBuffer ());
const result = await parser . parse (buf , {
onProgress : ({ phase, percent }) =>
console . log (\`\${phase}: \${percent}%\` ),
});
// → 142,883 entities · IFC4 · 312 ms
console . log (result . entityCount, result . schemaVersion); `,
},
{
id: "view",
label: "View",
title: "WebGPU viewer",
desc: "Pass it a canvas. Picking, instancing, fit-to-view included. Or hand the meshes to Three.js / Babylon.js if you already have an engine.",
imports: ["@ifc-lite/parser", "@ifc-lite/geometry", "@ifc-lite/renderer"],
code: `import { IfcParser } from '@ifc-lite/parser' ;
import { GeometryProcessor } from '@ifc-lite/geometry' ;
import { Renderer } from '@ifc-lite/renderer' ;
const renderer = new Renderer (canvas );
const geom = new GeometryProcessor ();
await Promise . all ([renderer . init (), geom . init ()]);
const meshes = await geom . process (buffer );
renderer . loadGeometry (meshes );
renderer . fitToView (); renderer . render ();
// Pick at (x, y) in canvas pixels
const hit = await renderer . pick (120 , 240 ); `,
},
{
id: "query",
label: "Query",
title: "Type + property filters, or SQL",
desc: "Fluent builder for common cases, DuckDB-WASM for the rest. Columnar TypedArray storage stays fast on million-entity models.",
imports: ["@ifc-lite/query"],
code: `import { IfcQuery } from '@ifc-lite/query' ;
const query = new IfcQuery (store );
// External, load-bearing walls
const walls = query
. ofType ('IfcWall' , 'IfcWallStandardCase' )
. whereProperty ('Pset_WallCommon' , 'IsExternal' , '=' , true )
. whereProperty ('Pset_WallCommon' , 'LoadBearing' , '=' , true )
. execute ();
// Or drop into SQL when the builder runs out
const top = await query . sql (\`
SELECT type, COUNT(*) AS n FROM entities
GROUP BY type ORDER BY n DESC LIMIT 10
\` ); `,
},
{
id: "edit",
label: "Edit",
title: "Edit properties with undo",
desc: "Mutation layer over the columnar store. Track changes, replay, undo. STEP exporter applies pending mutations on export.",
imports: ["@ifc-lite/mutations", "@ifc-lite/data"],
code: `import { MutablePropertyView } from '@ifc-lite/mutations' ;
import { PropertyValueType } from '@ifc-lite/data' ;
const view = new MutablePropertyView (store . properties, 'model-a' );
view . setProperty (
wallExpressId ,
'Pset_WallCommon' ,
'FireRating' ,
'REI 120' ,
PropertyValueType . Label,
);
// Replayable change history; round-trips through STEP
const log = view . getMutations (); `,
},
{
id: "validate",
label: "Validate",
title: "Run IDS specifications",
desc: "Run IDS specifications against a model. Structured pass/fail report, translated failure messages, BCF handoff.",
imports: ["@ifc-lite/ids"],
code: `import { parseIDS , validateIDS , createTranslationService } from '@ifc-lite/ids' ;
const spec = parseIDS (idsXml );
const t = createTranslationService ('en' );
const report = await validateIDS (spec , store , { translator : t });
for (const s of report . specificationResults) {
console . log (\`\${s.specificationName}: \${s.passRate}% passed\` );
}
// Architecture: 96% · Fire Safety: 100% · Acoustics: 84% `,
},
{
id: "export",
label: "Export",
title: "STEP, glTF, Parquet, IFCX",
desc: "Write STEP for round-trips. glTF for the web. Parquet for analytics (~20× smaller than JSON). IFC5 / IFCX JSON.",
imports: ["@ifc-lite/export"],
code: `import {
exportToStep ,
GLTFExporter ,
ParquetExporter ,
Ifc5Exporter ,
} from '@ifc-lite/export' ;
// Back to STEP, applying any pending edits
const step = exportToStep (store , { schema : 'IFC4' , applyMutations : true });
// glTF / GLB for the web
const glb = await new GLTFExporter (). export (parseResult , { format : 'glb' });
// Parquet, queryable from DuckDB, Polars, pandas
const parquet = await new ParquetExporter (). exportEntities (parseResult ); `,
},
];
function CodeTabs() {
const [active, setActive] = useState("parse");
const sample = CODE_SAMPLES.find((s) => s.id === active);
return (
{CODE_SAMPLES.map((s) => (
setActive(s.id)}
>
{s.label}
))}
{sample.title}
{sample.desc}
{sample.imports.map((i) => (
{i}
))}
);
}
// ─────────────────────────── conveyor pipeline ───────────────────────────
// Real IFC sample: apps/landing/samples/hello-wall.ifc (Bonsai-authored IFC4).
// Parse and View use the real file. Query, Edit, Validate operate on a richer curated set
// of named entities so the demos can show meaningful filtering, mixed FireRating, etc.
const HELLO_WALL_PATH = "samples/hello-wall.ifc";
const HELLO_WALL_NAMED = [
{ id: 1, type: "IfcProject", name: "Demo House" },
{ id: 30, type: "IfcSite", name: "Site" },
{ id: 36, type: "IfcBuilding", name: "House" },
{ id: 42, type: "IfcBuildingStorey", name: "Level 1" },
// Walls: 4 total, mixed FireRating to make Validate interesting
{ id: 1222, type: "IfcWall", name: "Wall-North", height: 3.0, length: 10.0, fireRating: null },
{ id: 2001, type: "IfcWall", name: "Wall-South", height: 3.0, length: 10.0, fireRating: "REI60" },
{ id: 2002, type: "IfcWall", name: "Wall-East", height: 3.0, length: 5.0, fireRating: "REI60" },
{ id: 2003, type: "IfcWall", name: "Wall-West", height: 2.2, length: 5.0, fireRating: null },
// Slabs
{ id: 2010, type: "IfcSlab", name: "Floor", area: 50.0 },
{ id: 2011, type: "IfcSlab", name: "Roof", area: 50.0 },
// Openings
{ id: 1262, type: "IfcWindow", name: "Window-S1", height: 1.2, width: 0.9 },
{ id: 1407, type: "IfcWindow", name: "Window-S2", height: 1.2, width: 0.9 },
{ id: 2020, type: "IfcWindow", name: "Window-N", height: 1.4, width: 1.5 },
{ id: 2030, type: "IfcDoor", name: "Door-Main", height: 2.1, width: 0.9 },
{ id: 2031, type: "IfcDoor", name: "Door-Back", height: 2.1, width: 0.8 },
// Spaces
{ id: 1494, type: "IfcSpace", name: "Living", area: 22.0 },
{ id: 2040, type: "IfcSpace", name: "Kitchen", area: 12.0 },
{ id: 2041, type: "IfcSpace", name: "Bathroom", area: 6.0 },
// Structural
{ id: 2050, type: "IfcColumn", name: "Column-1", height: 3.0 },
{ id: 2051, type: "IfcColumn", name: "Column-2", height: 3.0 },
];
// Convert IFC uppercase form (IFCWALL) to Title case (IfcWall) for display.
function ifcTitleCase(raw) {
return "Ifc" + raw.charAt(0) + raw.slice(1).toLowerCase();
}
// Parse a STEP file's data lines into {id, type, name} chips.
// Stops at maxEntities so we don't choke the browser on big files.
function parseIfcEntities(text, maxEntities = 40) {
const out = [];
if (!text) return out;
const re = /^#(\d+)=IFC([A-Z_]+)\(/gm;
let m;
while ((m = re.exec(text)) !== null) {
const id = Number(m[1]);
const type = ifcTitleCase(m[2]);
// Try to extract Name (typically the second quoted field after a $ or GUID).
const lineEnd = text.indexOf("\n", m.index);
const line = text.slice(m.index, lineEnd === -1 ? undefined : lineEnd);
const nameMatch = line.match(/'[^']*',\$?[^,]*,'([^']*)'/);
const name = nameMatch ? nameMatch[1] : null;
out.push({ id, type, name });
if (out.length >= maxEntities) break;
}
return out;
}
const STAGES = [
{ id: "parse", num: "01", title: "Parse", blurb: "STEP · IFCX" },
{ id: "view", num: "02", title: "View", blurb: "WebGPU + point cloud" },
{ id: "query", num: "03", title: "Query", blurb: "Fluent · SQL" },
{ id: "edit", num: "04", title: "Edit", blurb: "Mutate · author" },
{ id: "validate", num: "05", title: "Validate", blurb: "IDS · BCF" },
{ id: "export", num: "06", title: "Export", blurb: "STEP · glTF · Parquet · IFCX · 2D" },
{ id: "automate", num: "07", title: "Automate", blurb: "CLI · SDK · MCP" },
];
const STAGE_DEMOS = {
parse: ParseDemo,
view: ViewDemo,
query: QueryDemo,
edit: EditDemo,
validate: ValidateDemo,
export: ExportDemo,
automate: AutomateDemo,
};
function ConveyorPipeline() {
const [active, setActive] = useState("parse");
const [ifcText, setIfcText] = useState(null);
const [entities, setEntities] = useState([]);
const [mountedSet, setMountedSet] = useState(() => new Set(["parse"]));
// Fetch real IFC sample once on mount.
useEffect(() => {
let cancelled = false;
fetch(HELLO_WALL_PATH)
.then((r) => (r.ok ? r.text() : Promise.reject(r.statusText)))
.then((text) => {
if (cancelled) return;
setIfcText(text);
setEntities(parseIfcEntities(text, 40));
})
.catch(() => {});
return () => { cancelled = true; };
}, []);
// Once a stage is visited, keep it mounted for instant tab switches.
useEffect(() => {
setMountedSet((s) => (s.has(active) ? s : new Set([...s, active])));
}, [active]);
// Pre-mount the View stage on idle so the embed iframe (~5 MB of WASM + the
// demo model) loads in the background; by the time the user clicks View, the
// model is already parsed, the camera has auto-fitted, and the panel becomes
// visible instantly. The panel stays display:none until activated — modern
// browsers still load DOM-mounted iframes inside hidden parents.
useEffect(() => {
if (typeof window === "undefined") return;
let cancelled = false;
const preload = () => {
if (cancelled) return;
setMountedSet((s) => (s.has("view") ? s : new Set([...s, "view"])));
};
if (typeof window.requestIdleCallback === "function") {
const id = window.requestIdleCallback(preload, { timeout: 2500 });
return () => { cancelled = true; window.cancelIdleCallback?.(id); };
}
const id = window.setTimeout(preload, 1500);
return () => { cancelled = true; window.clearTimeout(id); };
}, []);
const activeIndex = STAGES.findIndex((s) => s.id === active);
const move = (delta) => {
const next = Math.max(0, Math.min(STAGES.length - 1, activeIndex + delta));
setActive(STAGES[next].id);
};
const onKey = (e) => {
if (e.key === "ArrowRight") { e.preventDefault(); move(1); }
if (e.key === "ArrowLeft") { e.preventDefault(); move(-1); }
};
const sharedProps = { ifcText, entities, ifcPath: HELLO_WALL_PATH };
return (
{STAGES.map((s, i) => (
{i > 0 && (
= i} aria-hidden="true" />
)}
i}
onClick={() => setActive(s.id)}
>
{s.num}
{s.title}
{s.blurb}
))}
{STAGES.map((s) => {
if (!mountedSet.has(s.id)) return null;
const Demo = STAGE_DEMOS[s.id];
const hidden = s.id !== active ? { display: "none" } : null;
return (
);
})}
);
}
// ── stage demos ───────────────────────────────────────────────────────────
function ParseDemo({ ifcText, entities }) {
const [phase, setPhase] = useState("idle");
const [streamIdx, setStreamIdx] = useState(0);
const intervalRef = useRef(null);
const total = entities.length;
useEffect(() => () => intervalRef.current && clearInterval(intervalRef.current), []);
const start = () => {
if (phase === "running" || !total) return;
if (intervalRef.current) clearInterval(intervalRef.current);
setPhase("running");
setStreamIdx(0);
intervalRef.current = setInterval(() => {
setStreamIdx((i) => {
if (i >= total) {
clearInterval(intervalRef.current);
setPhase("done");
return i;
}
return i + 1;
});
}, 80);
};
const reset = () => {
if (intervalRef.current) clearInterval(intervalRef.current);
setPhase("idle");
setStreamIdx(0);
};
const stepDisplay = ifcText
? (ifcText.length > 1800 ? ifcText.slice(0, 1800) + "\n …" : ifcText)
: "loading hello-wall.ifc…";
const fileSize = ifcText ? (ifcText.length / 1024).toFixed(1) + " KB" : "…";
return (
@ifc-lite/parser · hello-wall.ifc
Read the file
Schema-aware reader. Streams entities into a columnar TypedArray store. Returns properties, quantities, relationships, and spatial structure.
{phase !== "running" ? (
{phase === "done" ? "↻ Re-parse" : "▶ Parse"}
) : (
■ Stop
)}
hello-wall.ifc
STEP · {fileSize}
{stepDisplay}
entities
{streamIdx}/{total} shown · 1,045 total
{entities.slice(0, streamIdx).map((e) => (
#{e.id}
{e.type}
{e.name && {e.name} }
))}
{phase === "idle" && (
Hit ▶ Parse to stream entities
)}
{phase === "done" && (
✓ 1,045 entities · IFC4
0.04 s
)}
);
}
function ViewDemo() {
// The iframe mounts as soon as this component renders. ConveyorPipeline
// pre-mounts the View panel on idle (in a display:none parent) so the embed
// boots + auto-loads the model before the user clicks the View tab — making
// the switch feel instant. Modern browsers still fetch and run scripts in
// iframes inside hidden ancestors.
// Mirror the landing's theme into the embed so a light-mode visitor doesn't get a
// black iframe popping out of the page. The embed treats anything other than
// 'dark' as light, so we only forward when we're definitely in dusk.
const [embedTheme, setEmbedTheme] = useState(() =>
typeof document !== "undefined" && document.documentElement.dataset.theme === "dusk" ? "dark" : "light"
);
useEffect(() => {
if (typeof document === "undefined") return;
const sync = () => setEmbedTheme(document.documentElement.dataset.theme === "dusk" ? "dark" : "light");
sync();
const mo = new MutationObserver(sync);
mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
return () => mo.disconnect();
}, []);
// embed.ifclite.com/v1 is the trimmed viewer with built-in URL-param model autoload.
// hello-wall.ifc is hosted on www.ifclite.com with CORS open.
const modelUrl = "https://www.ifclite.com/samples/hello-wall.ifc";
const iframeSrc = `https://embed.ifclite.com/v1?modelUrl=${encodeURIComponent(modelUrl)}&theme=${embedTheme}&autoLoad=true`;
return (
@ifc-lite/viewer-core · @ifc-lite/renderer · @ifc-lite/pointcloud
Inspect the model
The real viewer, embedded. hello-wall.ifc auto-loads on first visit. WebGPU rendering, picking, fit-to-view, section planes, point cloud overlay.
);
}
function QueryDemo() {
const [type, setType] = useState("IfcWall");
const [filter, setFilter] = useState("all");
const [sqlView, setSqlView] = useState(false);
const types = ["*", "IfcWall", "IfcSlab", "IfcDoor", "IfcWindow", "IfcSpace", "IfcColumn", "IfcBuildingStorey"];
const results = HELLO_WALL_NAMED.filter((e) => {
if (type !== "*" && e.type !== type) return false;
if (filter === "has-fire" && !e.fireRating) return false;
if (filter === "no-fire" && e.fireRating) return false;
return true;
});
const sql = `SELECT id, name, height, length, fireRating
FROM entities
WHERE ${type === "*" ? "1 = 1" : `type = '${type}'`}${filter === "has-fire" ? "\n AND fireRating IS NOT NULL" : filter === "no-fire" ? "\n AND fireRating IS NULL" : ""};`;
return (
@ifc-lite/query · @ifc-lite/lens · hello-wall.ifc
Filter the model
Type and property filters as a fluent builder. Toggle SQL for the long-tail. DuckDB-WASM under the hood for serious analytics.
setSqlView(false)}>Fluent
setSqlView(true)}>SQL
{!sqlView ? (
where
type
=
setType(e.target.value)} className="demo-select">
{types.map((t) => {t} )}
and
FireRating
setFilter(e.target.value)} className="demo-select">
is anything
is set
is null
) : (
{sql}
)}
results
{results.length} {results.length === 1 ? "row" : "rows"}
{results.length > 0 ? (
#id type name height length FireRating
{results.map((r) => (
#{r.id}
{r.type}
{r.name ?? "·"}
{r.height ?? "·"}
{r.length ?? "·"}
{r.fireRating ?? "·"}
))}
) : (
No matches.
)}
);
}
function EditDemo() {
// Target the real IfcWall entity from hello-wall.ifc (#1222)
const initial = useMemo(() => {
const base = HELLO_WALL_NAMED.find((e) => e.id === 1222);
return { ...base, fireRating: base.fireRating ?? "" };
}, []);
const [working, setWorking] = useState(initial);
const [diffs, setDiffs] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const set = (field, value) => {
const from = working[field];
const isNum = typeof initial[field] === "number";
const to = isNum ? Number(value) : (value || null);
if (from === to) return;
setDiffs((d) => [...d, { field, from, to }]);
setRedoStack([]);
setWorking((w) => ({ ...w, [field]: to }));
};
const undo = () => {
if (!diffs.length) return;
const last = diffs[diffs.length - 1];
setDiffs((d) => d.slice(0, -1));
setRedoStack((r) => [...r, last]);
setWorking((w) => ({ ...w, [last.field]: last.from }));
};
const redo = () => {
if (!redoStack.length) return;
const next = redoStack[redoStack.length - 1];
setRedoStack((r) => r.slice(0, -1));
setDiffs((d) => [...d, next]);
setWorking((w) => ({ ...w, [next.field]: next.to }));
};
const reset = () => { setWorking(initial); setDiffs([]); setRedoStack([]); };
const wallH = Math.max(20, 80 * (working.height / 3.0));
const wallW = Math.max(40, 140 * (working.length / 10.0));
return (
@ifc-lite/mutations · @ifc-lite/create · #{initial.id} IfcWall
Mutate the wall
Change a property; the diff strip grows. Undo, redo, replay. Round-trip back to STEP with every edit applied. No out-of-band metadata.
↶ undo
↷ redo
reset
diff log
{diffs.length} mutation{diffs.length === 1 ? "" : "s"}
{diffs.length ? (
{diffs.map((d, i) => (
{d.field}
{String(d.from ?? "null")}
→
{String(d.to ?? "null")}
))}
) : (
No edits yet. Change a value.
)}
);
}
// ── BCF zip writer (BCF v2.1 minimal) ─────────────────────────────────────
// Generates a real .bcfzip that BCF-aware tools can open. Plain "stored" ZIP
// (no deflate) keeps the implementation tiny.
function _bcfCrc32(bytes) {
let crc = ~0 >>> 0;
for (let i = 0; i < bytes.length; i++) {
crc ^= bytes[i];
for (let j = 0; j < 8; j++) crc = (crc >>> 1) ^ (0xEDB88320 & -(crc & 1));
}
return (~crc) >>> 0;
}
function _bcfDosTimeDate(d) {
const t = (d.getHours() << 11) | (d.getMinutes() << 5) | Math.floor(d.getSeconds() / 2);
const da = ((d.getFullYear() - 1980) << 9) | ((d.getMonth() + 1) << 5) | d.getDate();
return { t, da };
}
function _bcfBuildZip(files) {
const enc = new TextEncoder();
const { t, da } = _bcfDosTimeDate(new Date());
let offset = 0;
const local = [];
const central = [];
for (const f of files) {
const nb = enc.encode(f.name);
const data = typeof f.data === "string" ? enc.encode(f.data) : f.data;
const crc = _bcfCrc32(data);
const size = data.length;
const lfh = new Uint8Array(30 + nb.length);
const lv = new DataView(lfh.buffer);
lv.setUint32(0, 0x04034b50, true); lv.setUint16(4, 20, true); lv.setUint16(6, 0, true);
lv.setUint16(8, 0, true); lv.setUint16(10, t, true); lv.setUint16(12, da, true);
lv.setUint32(14, crc, true); lv.setUint32(18, size, true); lv.setUint32(22, size, true);
lv.setUint16(26, nb.length, true); lv.setUint16(28, 0, true);
lfh.set(nb, 30);
local.push(lfh, data);
const cd = new Uint8Array(46 + nb.length);
const cv = new DataView(cd.buffer);
cv.setUint32(0, 0x02014b50, true); cv.setUint16(4, 20, true); cv.setUint16(6, 20, true);
cv.setUint16(8, 0, true); cv.setUint16(10, 0, true); cv.setUint16(12, t, true);
cv.setUint16(14, da, true); cv.setUint32(16, crc, true); cv.setUint32(20, size, true);
cv.setUint32(24, size, true); cv.setUint16(28, nb.length, true); cv.setUint16(30, 0, true);
cv.setUint16(32, 0, true); cv.setUint16(34, 0, true); cv.setUint16(36, 0, true);
cv.setUint32(38, 0, true); cv.setUint32(42, offset, true);
cd.set(nb, 46);
central.push(cd);
offset += lfh.length + size;
}
const cdSize = central.reduce((s, c) => s + c.length, 0);
const eocd = new Uint8Array(22);
const ev = new DataView(eocd.buffer);
ev.setUint32(0, 0x06054b50, true); ev.setUint16(4, 0, true); ev.setUint16(6, 0, true);
ev.setUint16(8, files.length, true); ev.setUint16(10, files.length, true);
ev.setUint32(12, cdSize, true); ev.setUint32(16, offset, true); ev.setUint16(20, 0, true);
const total = offset + cdSize + 22;
const out = new Uint8Array(total);
let pos = 0;
for (const c of local) { out.set(c, pos); pos += c.length; }
for (const c of central) { out.set(c, pos); pos += c.length; }
out.set(eocd, pos);
return out;
}
function _bcfEscape(s) {
return String(s).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """);
}
function _bcfUuid() {
try { return crypto.randomUUID(); } catch (_) {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0;
return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16);
});
}
}
function buildBcfBlob({ rule, failures, source }) {
const iso = new Date().toISOString();
const author = "ifclite.com";
const files = [
{ name: "bcf.version", data: `\n2.1 \n \n ${_bcfEscape(source || "hello-wall.ifc")} \n \n extensions.xsd \n \n` },
];
for (const f of failures) {
const topicGuid = _bcfUuid();
const e = f.entity;
const title = `${rule.label}`;
const description = `${rule.reason}: ${e.name || e.type} (#${e.id})`;
files.push({
name: `${topicGuid}/markup.bcf`,
data: `
${_bcfEscape(title)}
Major
${iso}
${_bcfEscape(author)}
${iso}
${_bcfEscape(author)}
${_bcfEscape(description)}
`,
});
}
const bytes = _bcfBuildZip(files);
return new Blob([bytes], { type: "application/octet-stream" });
}
function ValidateDemo() {
const rules = [
{ id: "fire", label: "All IfcWall must have FireRating", applies: (e) => e.type === "IfcWall", check: (e) => !!e.fireRating, reason: "missing FireRating" },
{ id: "name", label: "All elements must have a Name", applies: () => true, check: (e) => !!e.name, reason: "missing Name" },
{ id: "height", label: "IfcWall.height must be ≥ 2.4 m", applies: (e) => e.type === "IfcWall", check: (e) => (e.height ?? 0) >= 2.4, reason: "height < 2.4 m" },
];
const [ruleId, setRuleId] = useState("fire");
const [phase, setPhase] = useState("idle");
const [progress, setProgress] = useState(0);
const intervalRef = useRef(null);
const rule = rules.find((r) => r.id === ruleId);
const targets = HELLO_WALL_NAMED.filter(rule.applies);
const results = targets.map((t) => ({ entity: t, pass: rule.check(t) }));
useEffect(() => () => intervalRef.current && clearInterval(intervalRef.current), []);
useEffect(() => { setPhase("idle"); setProgress(0); if (intervalRef.current) clearInterval(intervalRef.current); }, [ruleId]);
const start = () => {
if (phase === "running") return;
if (intervalRef.current) clearInterval(intervalRef.current);
setPhase("running");
setProgress(0);
intervalRef.current = setInterval(() => {
setProgress((p) => {
if (p >= targets.length) {
clearInterval(intervalRef.current);
setPhase("done");
return p;
}
return p + 1;
});
}, 220);
};
const failures = results.filter((r) => !r.pass);
const passes = results.filter((r) => r.pass);
return (
@ifc-lite/ids · @ifc-lite/bcf · hello-wall.ifc
Run an IDS check
Information Delivery Specification specs translated to structured pass/fail. Failures bundle into a BCF for your tracker.
{phase === "done" ? "↻ re-run" : phase === "running" ? "running…" : "▶ Run"}
{
const blob = buildBcfBlob({ rule, failures: results.filter((r) => !r.pass), source: "hello-wall.ifc" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `hello-wall-${rule.id}.bcfzip`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 1500);
}}
disabled={phase !== "done" || results.every((r) => r.pass)}
title={phase !== "done" ? "Run the check first" : results.every((r) => r.pass) ? "No issues to bundle" : "Download issues as BCF v2.1"}
>
↓ BCF
{rules.map((r) => (
setRuleId(r.id)}
>
IDS-{r.id.toUpperCase()}
{r.label}
))}
{targets.map((t, i) => {
const checked = i < progress;
const r = results[i];
return (
{!checked ? "·" : r.pass ? "✓" : "✗"}
{t.name || t.type}
);
})}
{phase === "done" && (
{passes.length} ✓
{failures.length} ✗
· 0.01 s
{failures.length > 0 && (
{failures.length} issue{failures.length > 1 ? "s" : ""} bundled to BCF
{failures.slice(0, 4).map((f) => (
#{f.entity.id}
{f.entity.name || f.entity.type}
{rule.reason}
))}
)}
)}
);
}
function ExportDemo() {
// Real, pre-generated artifacts live in apps/landing/samples/. STEP is the source IFC,
// the rest were converted once by @ifc-lite/export and committed.
const formats = [
{ id: "step", label: "STEP", ext: "ifc", bytes: 79592, mime: "application/x-step", desc: "Round-trip", path: "samples/hello-wall.ifc" },
{ id: "gltf", label: "glTF", ext: "gltf", bytes: 1336, mime: "model/gltf+json", desc: "Web 3D", path: "samples/hello-wall.gltf" },
{ id: "parquet", label: "Parquet", ext: "parquet", bytes: 2719, mime: "application/vnd.apache.parquet", desc: "Columnar analytics", path: "samples/hello-wall.parquet" },
{ id: "ifcx", label: "IFCX", ext: "ifcx.json", bytes: 2538, mime: "application/json", desc: "IFC5 / next-gen", path: "samples/hello-wall.ifcx.json" },
{ id: "2d", label: "2D", ext: "svg", bytes: 1868, mime: "image/svg+xml", desc: "Plans, sections", path: "samples/hello-wall-plan.svg" },
];
const [fmt, setFmt] = useState("step");
const sel = formats.find((f) => f.id === fmt);
const max = Math.max(...formats.map((f) => f.bytes));
const fmtBytes = (b) => b < 1024 ? `${b} B` : b < 1024 * 1024 ? `${(b / 1024).toFixed(1)} KB` : `${(b / 1024 / 1024).toFixed(2)} MB`;
const download = async () => {
const res = await fetch(sel.path);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = sel.path.split("/").pop();
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 1500);
};
return (
@ifc-lite/export · @ifc-lite/drawing-2d · hello-wall.ifc
Write it back out
STEP for round-trips, glTF for the web, Parquet for analytics (~20× smaller than JSON), IFC5 (IFCX) JSON, and 2D drawings as SVG.
↓ download hello-wall.{sel.ext}
{formats.map((f) => (
setFmt(f.id)}>
{f.label}
{fmtBytes(f.bytes)}
{f.desc}
))}
);
}
function AutomateDemo() {
const [tab, setTab] = useState("cli");
return (
@ifc-lite/cli · @ifc-lite/sdk · @ifc-lite/mcp · hello-wall.ifc
BIM your tools can talk to
Command line for scripts. A bim.* API for code. MCP server so agents (Claude, Cursor, your IDE) can read and edit IFC directly.
setTab("cli")}>CLI
setTab("sdk")}>SDK
setTab("mcp")}>MCP
{tab === "cli" &&
}
{tab === "sdk" &&
}
{tab === "mcp" &&
}
);
}
function AutomateCLI() {
const cmds = [
{
label: "query",
cmd: "ifc-lite query --type IfcWall hello-wall.ifc",
out: [
"#1222 IfcWall Wall-North 3.0m × 10.0m none",
"#2001 IfcWall Wall-South 3.0m × 10.0m REI60",
"#2002 IfcWall Wall-East 3.0m × 5.0m REI60",
"#2003 IfcWall Wall-West 2.2m × 5.0m none",
" 4 rows · 14 ms",
],
},
{
label: "validate",
cmd: "ifc-lite validate --ids fire.ids hello-wall.ifc",
out: [
"✗ #1222 Wall-North missing FireRating",
"✓ #2001 Wall-South REI60",
"✓ #2002 Wall-East REI60",
"✗ #2003 Wall-West missing FireRating",
" 2 pass · 2 fail",
],
},
{
label: "export",
cmd: "ifc-lite export --format parquet hello-wall.ifc",
out: ["✓ wrote hello-wall.parquet · 3.9 KB (was 78 KB STEP)"],
},
];
const [idx, setIdx] = useState(0);
const c = cmds[idx];
return (
{cmds.map((cm, i) => (
setIdx(i)}>
{cm.label}
))}
$ {c.cmd}
{c.out.map((line, i) => "\n" + line).join("")}
);
}
function AutomateSDK() {
const samples = [
{
label: "count by type",
code: `await bim.byType("IfcWall").length;`,
result: "4",
},
{
label: "walls without FireRating",
code: `await bim
.byType("IfcWall")
.where(w => !w.FireRating)
.map(w => w.Name);`,
result: `["Wall-North", "Wall-West"]`,
},
{
label: "patch & export",
code: `for (const w of await bim.byType("IfcWall")) {
if (!w.FireRating) w.FireRating = "REI60";
}
await bim.export("step", "patched.ifc");`,
result: `✓ wrote patched.ifc · 2 mutations`,
},
];
const [idx, setIdx] = useState(0);
const s = samples[idx];
return (
{samples.map((sm, i) => (
setIdx(i)}>
{sm.label}
))}
{s.code}
);
}
function AutomateMCP() {
const turns = [
{ who: "user", text: "Which walls in hello-wall.ifc are missing a FireRating?" },
{ who: "tool", call: "query", args: { type: "IfcWall", missing: ["FireRating"] }, result: { count: 2, names: ["Wall-North", "Wall-West"] } },
{ who: "assistant", text: "Two walls: Wall-North (#1222) and Wall-West (#2003). Set REI60 on both and re-export?" },
{ who: "user", text: "Yes." },
{ who: "tool", call: "mutate", args: { ids: [1222, 2003], set: { FireRating: "REI60" } }, result: { ok: true, mutations: 2 } },
{ who: "tool", call: "export", args: { format: "step", out: "patched.ifc" }, result: { ok: true, bytes: 79912 } },
{ who: "assistant", text: "Done. patched.ifc written (78 KB). Both walls now carry REI60." },
];
return (
{turns.map((t, i) => {
if (t.who === "user") {
return (
);
}
if (t.who === "assistant") {
return (
);
}
return (
tool · {t.call}
{JSON.stringify(t.args, null, 2)}
→ {JSON.stringify(t.result)}
);
})}
{PRESETS.map((p) => (
applyPreset(p)}
className="copy-btn picker-preset"
data-on={activePreset?.id === p.id}
>
{p.label}
))}
{list.length}/{PACKAGES.length}
packages selected
{ordered.map((p) => (
toggle(p.id)}
/>
))}
Install
{list.length} packages
$
{cmd}
est. bundle ~{totalKb} KB gzipped
{copied ? "✓ copied" : "copy"}
);
}
function PkgCard({ p, on, onToggle }) {
const shortName = p.name.replace("@ifc-lite/", "");
const npmUrl = `https://www.npmjs.com/package/${p.name}`;
return (
);
}
// Horizontal stacked bar + legend showing how the selected packages compose the bundle.
function BundleComposition({ items, total }) {
if (!items.length || total === 0) {
return (
Bundle composition
no packages selected
);
}
return (
Bundle composition
by gzipped size
{items.map((p, idx) => (
))}
{items.slice(0, 8).map((p, idx) => (
{p.name.replace("@ifc-lite/", "")}
{p.size} KB
))}
{items.length > 8 && (
+{items.length - 8} more
{items.slice(8).reduce((a, p) => a + p.size, 0)} KB
)}
);
}
// ─────────────────────────── bench explorer ───────────────────────────
// Canonical from louistrue/profiling@apples-to-apples-with-native, results/RESULTS.md
// Corpus: 21 public IFCs. Times are total parse + geometry, seconds.
// IOS rows reproduced from Moult's hardware; web-ifc + ifc-lite from M4 (10-core).
const BENCH_MODELS = [
{ id: "duplex", name: "duplex.ifc", size: 2.3, products: 215, ifclite_n: 0.02, ifclite_w: 0.11, webifc: 0.16, iosmax: 0.12, ios1c: 0.19 },
{ id: "ac20", name: "AC20-FZK-Haus.ifc", size: 2.4, products: 83, ifclite_n: 0.02, ifclite_w: 0.09, webifc: 0.13, iosmax: 0.15, ios1c: 0.22 },
{ id: "i005", name: "ISSUE_005_haus.ifc", size: 2.4, products: 83, ifclite_n: 0.02, ifclite_w: 0.08, webifc: 0.10, iosmax: 0.13, ios1c: 0.21 },
{ id: "i021", name: "ISSUE_021_Mini Project.ifc", size: 3.2, products: 2636, ifclite_n: 0.04, ifclite_w: 0.15, webifc: 0.29, iosmax: 0.29, ios1c: 0.53 },
{ id: "officeA", name: "Office_A_20110811.ifc", size: 3.8, products: 803, ifclite_n: 0.03, ifclite_w: 0.14, webifc: 0.11, iosmax: 0.25, ios1c: 0.29 },
{ id: "i126", name: "ISSUE_126_model.ifc", size: 4.2, products: 257, ifclite_n: 0.02, ifclite_w: 0.14, webifc: 0.07, iosmax: 0.32, ios1c: 0.46 },
{ id: "i034", name: "ISSUE_034_HouseZ.ifc", size: 4.8, products: 228, ifclite_n: 0.04, ifclite_w: 0.16, webifc: 0.09, iosmax: 0.38, ios1c: 0.71 },
{ id: "i102", name: "ISSUE_102_M3D-CON.ifc", size: 6.0, products: 138, ifclite_n: 0.04, ifclite_w: 0.22, webifc: 0.14, iosmax: 0.49, ios1c: 0.62 },
{ id: "i159", name: "ISSUE_159_kleine_Wohnung_R22.ifc", size: 9.5, products: 425, ifclite_n: 0.08, ifclite_w: 0.46, webifc: 0.33, iosmax: 0.91, ios1c: 1.65 },
{ id: "c20", name: "C20-Institute-Var-2.ifc", size: 10.3, products: 702, ifclite_n: 0.09, ifclite_w: 0.31, webifc: 0.30, iosmax: 0.67, ios1c: 0.71 },
{ id: "i129", name: "ISSUE_129_N1540_17_EXE.ifc", size: 11.5, products: 947, ifclite_n: 0.09, ifclite_w: 0.37, webifc: 0.33, iosmax: 0.89, ios1c: 1.52 },
{ id: "dental", name: "dental_clinic.ifc", size: 12.4, products: 2583, ifclite_n: 0.10, ifclite_w: 0.49, webifc: 0.42, iosmax: 0.99, ios1c: 1.25 },
{ id: "fmarc", name: "FM_ARC_DigitalHub.ifc", size: 13.4, products: 703, ifclite_n: 0.09, ifclite_w: 0.71, webifc: 0.53, iosmax: 1.54, ios1c: 2.43 },
{ id: "bridge", name: "ifcbridge-model01.ifc", size: 14.5, products: 165, ifclite_n: 0.12, ifclite_w: 0.54, webifc: 0.20, iosmax: 1.32, ios1c: 2.05 },
{ id: "i102cd", name: "ISSUE_102_M3D-CON-CD.ifc", size: 25.6, products: 1616, ifclite_n: 0.25, ifclite_w: 1.57, webifc: 1.89, iosmax: 2.66, ios1c: 4.02 },
{ id: "soffice", name: "S_Office_Integrated Design Archi.ifc", size: 29.6, products: 3396, ifclite_n: 0.25, ifclite_w: 1.17, webifc: 2.62, iosmax: 2.94, ios1c: 4.04 },
{ id: "advanced", name: "advanced_model.ifc", size: 33.7, products: 6401, ifclite_n: 0.29, ifclite_w: 1.46, webifc: 1.36, iosmax: 3.00, ios1c: 3.92 },
{ id: "schep", name: "schependomlaan.ifc", size: 47.0, products: 3569, ifclite_n: 0.41, ifclite_w: 1.70, webifc: 0.59, iosmax: 2.85, ios1c: 3.35 },
{ id: "i068", name: "ISSUE_068_ARK_NUS_skolebygg.ifc", size: 53.7, products: 4459, ifclite_n: 0.52, ifclite_w: 2.37, webifc: 3.32, iosmax: 4.11, ios1c: 5.72 },
{ id: "i098", name: "ISSUE_098_R8_F1_MAB_AR_M3_XX_XXX.ifc", size: 68.4, products: 11123, ifclite_n: 0.59, ifclite_w: 2.72, webifc: 13.05, iosmax: 5.82, ios1c: 8.42 },
{ id: "i053", name: "ISSUE_053_Holter_Tower_10.ifc", size: 169.2, products: 60285, ifclite_n: 1.70, ifclite_w: 8.23, webifc: 6.06, iosmax: 13.70, ios1c: 19.53 },
];
const BENCH_ENGINES = [
{ key: "ifclite_n", name: "ifc-lite", sub: "native, 10 threads", primary: true, shade: "deep" },
{ key: "ifclite_w", name: "ifc-lite", sub: "WASM, 1 thread", primary: true, shade: "light" },
{ key: "webifc", name: "web-ifc", sub: "WASM, 1 thread" },
{ key: "iosmax", name: "IfcOpenShell", sub: "native, multi-thread" },
];
const BENCH_SORTS = [
{ id: "random", label: "Random", fn: null },
{ id: "size-asc", label: "Size (small → large)", fn: (a, b) => a.size - b.size },
{ id: "size-desc", label: "Size (large → small)", fn: (a, b) => b.size - a.size },
{ id: "products-desc",label: "Most products", fn: (a, b) => b.products - a.products },
{ id: "ifclite-asc", label: "ifc-lite fastest",fn: (a, b) => a.ifclite_w - b.ifclite_w },
{ id: "ifclite-desc", label: "ifc-lite slowest",fn: (a, b) => b.ifclite_w - a.ifclite_w },
];
function pickRandomIds(n, exclude = new Set()) {
const pool = BENCH_MODELS.filter((m) => !exclude.has(m.id));
const shuffled = [...pool].sort(() => Math.random() - 0.5);
return shuffled.slice(0, n).map((m) => m.id);
}
function fmtSize(mb) {
return mb >= 1000 ? (mb / 1024).toFixed(1) + " GB" : mb.toFixed(1) + " MB";
}
function withViewTransition(fn) {
if (typeof document !== "undefined" && typeof document.startViewTransition === "function") {
document.startViewTransition(fn);
} else {
fn();
}
}
function BenchRow({ model, onShuffle, onRemove, canRemove }) {
const times = BENCH_ENGINES.map((e) => model[e.key]).filter((t) => t != null);
const maxTime = Math.max(...times);
const minTime = Math.min(...times);
return (
{model.name}
{fmtSize(model.size)} · {model.products.toLocaleString()} products
{BENCH_ENGINES.map((e) => {
const t = model[e.key];
const width = (t / maxTime) * 100;
const isFastest = t === minTime;
const cls = ["be-bar"];
if (e.primary) cls.push("us");
if (e.shade) cls.push(`shade-${e.shade}`);
if (isFastest) cls.push("fastest");
return (
{e.name}
{e.sub}
{t.toFixed(2)}s
);
})}
);
}
function BenchExplorer() {
const [slotIds, setSlotIds] = useState(() => pickRandomIds(3));
const [sort, setSort] = useState("random");
const [sortOpen, setSortOpen] = useState(false);
const slots = useMemo(
() => slotIds.map((id) => BENCH_MODELS.find((m) => m.id === id)).filter(Boolean),
[slotIds]
);
const sortFn = BENCH_SORTS.find((s) => s.id === sort)?.fn;
const sorted = useMemo(() => (sortFn ? [...slots].sort(sortFn) : slots), [slots, sortFn]);
const shuffleSlot = (idx) => {
withViewTransition(() => {
setSlotIds((cur) => {
const next = [...cur];
const used = new Set(cur);
const candidates = BENCH_MODELS.filter((m) => !used.has(m.id));
if (!candidates.length) return cur;
next[idx] = candidates[Math.floor(Math.random() * candidates.length)].id;
return next;
});
});
};
const removeSlot = (idx) => {
withViewTransition(() => setSlotIds((cur) => cur.filter((_, i) => i !== idx)));
};
const addSlot = () => {
withViewTransition(() => {
setSlotIds((cur) => {
const used = new Set(cur);
const pool = BENCH_MODELS.filter((m) => !used.has(m.id));
if (!pool.length) return cur;
return [...cur, pool[Math.floor(Math.random() * pool.length)].id];
});
});
};
const shuffleAll = () => {
withViewTransition(() => setSlotIds(pickRandomIds(Math.max(3, slotIds.length))));
};
const setSortAnimated = (id) => {
withViewTransition(() => {
setSort(id);
setSortOpen(false);
});
};
// close sort menu on outside click
const menuRef = useRef(null);
useEffect(() => {
if (!sortOpen) return;
const onDoc = (e) => { if (!menuRef.current?.contains(e.target)) setSortOpen(false); };
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, [sortOpen]);
return (
{BENCH_ENGINES.map((e) => {
const chipLabel = e.primary
? `${e.name} ${e.shade === "deep" ? "(native)" : "(WASM)"}`
: e.name;
const cls = ["be-chip"];
if (e.primary) cls.push("us");
if (e.shade) cls.push(`shade-${e.shade}`);
return (
);
})}
setSortOpen((v) => !v)}>
Sort: {BENCH_SORTS.find((s) => s.id === sort)?.label}
{sortOpen && (
{BENCH_SORTS.map((s) => (
setSortAnimated(s.id)}>
{s.label}
))}
)}
Shuffle
{sorted.map((m) => (
shuffleSlot(slotIds.indexOf(m.id))}
onRemove={() => removeSlot(slotIds.indexOf(m.id))}
canRemove={slotIds.length > 1}
/>
))}
{slotIds.length < 6 && (
+ Add another model
)}
);
}
// ─────────────────────────── stack builder ───────────────────────────
const SB_FRAMEWORKS = [
{ id: "react", label: "React", meta: "useEffect / hooks" },
{ id: "vue", label: "Vue", meta: "composition API" },
{ id: "svelte", label: "Svelte", meta: "reactive stores" },
{ id: "vanilla", label: "Vanilla", meta: "no framework" },
];
const SB_RENDERERS = [
{ id: "webgpu", label: "WebGPU (built-in)", tag: "WGPU", pkgs: ["geometry", "renderer"] },
{ id: "threejs", label: "Three.js", tag: "WebGL", pkgs: ["geometry"] },
{ id: "babylon", label: "Babylon.js", tag: "WebGL", pkgs: ["geometry"] },
{ id: "none", label: "Data only", tag: "none", pkgs: [] },
];
const SB_MODES = [
{ id: "browser", label: "Browser", meta: "client-side, runs from a CDN", pkgs: [] },
{ id: "server", label: "Server", meta: "Rust backend, streamed to clients", pkgs: ["server-client"], runtime: { tag: "RUST", name: "@ifc-lite/server", meta: "caching · streaming · parallel parse" } },
{ id: "desktop", label: "Desktop", meta: "Tauri build, native filesystem", pkgs: [], runtime: { tag: "TAURI", name: "Tauri runtime", meta: "multi-threaded · native fs · offline" } },
];
const SB_FEATURES = [
{ id: "query", label: "Query", pkg: "query", desc: "filters + SQL" },
{ id: "mutations", label: "Edit", pkg: "mutations", desc: "props + undo" },
{ id: "ids", label: "Validate", pkg: "ids", desc: "IDS specs" },
{ id: "drawing", label: "2D plans", pkg: "drawing-2d",desc: "sections · elevations" },
{ id: "bcf", label: "BCF", pkg: "bcf", desc: "issue tracking" },
{ id: "export", label: "Export", pkg: "export", desc: "glTF · Parquet · IFCX" },
];
function SBSeg({ value, options, onChange }) {
return (
{options.map((o) => (
onChange(o.id)}
>
{o.label}
))}
);
}
function SBLayer({ tag, tagKind, name, meta, kind, dim }) {
return (
);
}
function SBArrow() {
return (
);
}
function StackBuilder() {
const [framework, setFramework] = useState("react");
const [renderer, setRenderer] = useState("webgpu");
const [mode, setMode] = useState("browser");
const [features, setFeatures] = useState(() => new Set(["query"]));
const setFw = (v) => withViewTransition(() => setFramework(v));
const setRn = (v) => withViewTransition(() => setRenderer(v));
const setMd = (v) => withViewTransition(() => setMode(v));
const toggleFeature = (id) =>
withViewTransition(() => {
setFeatures((cur) => {
const next = new Set(cur);
next.has(id) ? next.delete(id) : next.add(id);
return next;
});
});
const r = SB_RENDERERS.find((x) => x.id === renderer);
const m = SB_MODES.find((x) => x.id === mode);
const fw = SB_FRAMEWORKS.find((x) => x.id === framework);
const pkgs = useMemo(() => {
const base = ["parser"];
r.pkgs.forEach((p) => base.push(p));
m.pkgs.forEach((p) => base.push(p));
SB_FEATURES.filter((f) => features.has(f.id)).forEach((f) => base.push(f.pkg));
return Array.from(new Set(base));
}, [r, m, features]);
const cmd = `npm install ${pkgs.map((p) => `@ifc-lite/${p}`).join(" ")}`;
// approximate gzipped sizes used in PACKAGES list
const sizeMap = Object.fromEntries(PACKAGES.map((p) => [p.id, p.size]));
const totalKb = pkgs.reduce((a, p) => a + (sizeMap[p] || 30), 0);
const [copied, setCopied] = useState(false);
const copy = async () => {
try {
await navigator.clipboard.writeText(cmd);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch (err) {
console.error("Clipboard copy failed:", err);
}
};
return (
Framework
3D engine
({ id: x.id, label: x.id === "webgpu" ? "WebGPU" : x.id === "threejs" ? "Three.js" : x.id === "babylon" ? "Babylon" : "Data only" }))} onChange={setRn} />
Runs on
Extras
{SB_FEATURES.map((f) => (
toggleFeature(f.id)}
title={f.desc}
>
{f.label}
))}
npm install · {pkgs.length} packages · ~{totalKb} KB gzipped
{copied ? "✓ copied" : "copy"}
$ {cmd}
);
}
// ─────────────────────────── browser test ───────────────────────────
const STATIC_BROWSERS = [
{ name: "Chrome", ver: "113+" },
{ name: "Edge", ver: "113+" },
{ name: "Firefox", ver: "127+" },
{ name: "Safari", ver: "18+" },
{ name: "Arc", ver: "stable" },
{ name: "Brave", ver: "1.65+" },
];
// 30-byte WASM module that uses v128 SIMD opcodes. Validating == SIMD supported.
const WASM_SIMD_PROBE = new Uint8Array([
0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123,
3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0, 253, 15, 253, 98, 11,
]);
async function runBrowserTests() {
const results = [];
// WebGPU
let webgpuOk = false;
let webgpuNote = "not detected";
try {
if ("gpu" in navigator) {
const adapter = await navigator.gpu.requestAdapter();
if (adapter) {
webgpuOk = true;
let info = "adapter ready";
try {
const ai = typeof adapter.requestAdapterInfo === "function"
? await adapter.requestAdapterInfo()
: adapter.info;
if (ai) {
const parts = [ai.vendor, ai.architecture, ai.description].filter(Boolean);
if (parts.length) info = parts.slice(0, 2).join(" · ");
}
} catch (_) { /* requestAdapterInfo not always exposed */ }
webgpuNote = info;
} else {
webgpuNote = "no adapter (driver or flag missing)";
}
}
} catch (_) { /* swallow */ }
results.push({ id: "webgpu", label: "WebGPU", ok: webgpuOk, note: webgpuNote });
// WebAssembly + SIMD
const wasmOk = typeof WebAssembly === "object" && typeof WebAssembly.validate === "function";
let simdOk = false;
if (wasmOk) {
try { simdOk = WebAssembly.validate(WASM_SIMD_PROBE); } catch (_) {}
}
results.push({
id: "wasm",
label: "WebAssembly · SIMD",
ok: wasmOk && simdOk,
warn: wasmOk && !simdOk,
note: simdOk ? "full speed Rust core" : wasmOk ? "available, no SIMD (slower core)" : "not available",
});
// SharedArrayBuffer is Spectre-gated: Chrome 91+, Firefox 79+, Safari 15.2+ hide
// the global from any page that isn't cross-origin isolated (COOP + COEP headers).
// So an "undefined" result here doesn't mean the browser lacks support — it
// usually means this specific page didn't enable cross-origin isolation.
// Distinguish the two cases so visitors don't blame their browser.
const sabAvailable = typeof SharedArrayBuffer !== "undefined";
const coiKnown = typeof crossOriginIsolated !== "undefined";
const coiOk = coiKnown && crossOriginIsolated;
let sabState;
if (sabAvailable && coiOk) {
sabState = { ok: true, warn: false, note: "threaded WASM enabled" };
} else if (sabAvailable && !coiOk) {
sabState = { ok: false, warn: true, note: "browser ready, this page not cross-origin isolated" };
} else if (coiKnown) {
// Browser knows the COI concept but withheld SAB → it's a page-header issue.
sabState = { ok: false, warn: true, note: "gated by cross-origin isolation (page needs COOP+COEP)" };
} else {
sabState = { ok: false, warn: false, note: "not available in this browser" };
}
results.push(Object.assign({ id: "sab", label: "SharedArrayBuffer" }, sabState));
// Origin Private File System (OPFS)
const opfsOk = typeof navigator !== "undefined"
&& "storage" in navigator
&& navigator.storage
&& typeof navigator.storage.getDirectory === "function";
results.push({
id: "opfs",
label: "OPFS",
ok: opfsOk,
note: opfsOk ? "fast cached reloads" : "cache falls back to IndexedDB",
});
// Worker + ResizeObserver
const workerOk = typeof Worker !== "undefined";
const roOk = typeof ResizeObserver !== "undefined";
results.push({
id: "worker",
label: "Worker · ResizeObserver",
ok: workerOk && roOk,
note: workerOk && roOk
? "parser off main thread"
: !workerOk ? "no Worker" : "no ResizeObserver",
});
return results;
}
function detectBrowserLabel() {
if (typeof navigator === "undefined") return "unknown";
const ua = navigator.userAgent || "";
let name = "unknown";
let pat = null;
if (/Edg\//.test(ua)) { name = "Edge"; pat = /Edg\/(\d+)/; }
else if (/Firefox\//.test(ua)) { name = "Firefox"; pat = /Firefox\/(\d+)/; }
else if (/Chrome\//.test(ua)) { name = "Chrome"; pat = /Chrome\/(\d+)/; }
else if (/Version\/[\d.]+ Safari/.test(ua)) { name = "Safari"; pat = /Version\/(\d+)/; }
const m = pat ? ua.match(pat) : null;
return name + (m ? " " + m[1] : "");
}
function BrowserTest() {
const [phase, setPhase] = useState("idle"); // idle | running | done
const [results, setResults] = useState(null);
const run = async () => {
setPhase("running");
try {
const r = await runBrowserTests();
setResults(r);
setPhase("done");
} catch (err) {
console.error("Browser test failed:", err);
setPhase("idle");
}
};
const reset = () => { setPhase("idle"); setResults(null); };
if (phase === "done" && results) {
const passCount = results.filter((r) => r.ok).length;
return (
{detectBrowserLabel()}
{passCount}/{results.length} ✓
↻ reset
{results.map((r) => (
{r.ok ? "✓" : r.warn ? "⚠" : "✗"}
{r.label}
{r.note}
))}
);
}
return (
{STATIC_BROWSERS.map((b) => (
{b.name}
{b.ver}
))}
{phase === "running" ? "Testing…" : "▶ Test my browser"}
);
}
// ─────────────────────────── mount ───────────────────────────
const pipelineRoot = document.getElementById("pipeline-root");
if (pipelineRoot) ReactDOM.createRoot(pipelineRoot).render(