feat: draw the Brillouin zone from geometry instead of a per-lattice image

[timurbazhirov]

Adds a BrillouinZone component that draws the zone as inline SVG, superseding the <img>-based BrillouinZoneImage.

Why

BrillouinZoneImage points an <img> at /images/brillouin_zone/<lattice>.png (the path @mat3ra/wove derives from the material). Two problems:

1. That asset ships in no package — only the web app serves those files, so every other consumer renders a broken image. Confirmed against the workflow-designer standalone demo, where it 404s. The path is absolute too, so it cannot resolve under a non-root deployment base.
2. One image per lattice type is lossy. A graphene monolayer and bulk GaN are both HEX, but the monolayer's vacuum padding shrinks its third reciprocal vector and flattens the zone — a per-type image shows them identically.

What

• src/components/BrillouinZone.tsx — projects zone faces with a fixed three-quarter view, sorts them back-to-front (painter's algorithm, valid because the zone is convex), shades by face orientation, and scales to fit the requested size.
• Exported from exports.ts alongside the existing component; BrillouinZoneImage is untouched.

Faces are typed structurally (BrillouinZoneFaceLike) rather than imported from @mat3ra/made, so this view layer does not pin a made version — pass new ReciprocalLattice(material.lattice).brillouinZone straight in once mat3ra/made#295 lands. And imgSrc still renders when no faces are given, so hosts with their own artwork keep working and this can be dropped in as wove's injected component today.

Validation

• Tests: tests/brillouinZone.tests.ts (5 new, run by npm test) covers the projection against a unit cube: every face keeps its vertex count, nothing is drawn outside the viewport, faces come out ordered back-to-front, shading varies by orientation and never goes negative, and output scales with size. Suite: 12 passing.
• Types: tsc --noEmit clean.
• Lint: the new test file and exports.ts are clean. BrillouinZone.tsx reports 3 errors, all @mui/material should be listed in dependencies, not devDependencies — a repo-wide condition every existing component shares (Model.tsx alone has 4 of them; src totals 130 errors before this change). Prettier clean on all three files.
• The identical renderer is already running in the workflow-designer standalone demo, where silicon draws a truncated octahedron, graphene a flat hexagonal plate and bulk GaN a tall hexagonal prism.

Note for maintainers: npm run lint cannot run from a clean checkout

package.json declares no eslint, prettier, or @exabyte-io/eslint-config dependencies, though .eslintrc.json extends that config and the lint script invokes both. The working combination is eslint 8 + eslint-plugin-prettier 5 + prettier 3 (plugin-prettier 4 breaks on prettier 3, and eslint 9+ rejects .eslintrc.json). Happy to open a follow-up PR adding those devDependencies.

Related

• feat: compute the first Brillouin zone from the reciprocal lattice made#295 — ReciprocalLattice.brillouinZone, the geometry this consumes.
• feat: designer-facing card flags, deduped property chips, readable auto-fit, zone geometry wove#12 — passes faces to the injected component.
• SOF-8024: workflow designer UX — review, plan, and portions 1, 3, 6 (plus 4 and 5 started) workflow-designer#12 (SOF-8024) — where this shipped first as a local stopgap.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FFFpkKD3zHysJXgAbT2uYV