Add interactive layer stack diagram to docs

[jackgdsf]

Summary

• Adds .github/write_layer_stack.py that generates docs/layer_stack.md with interactive SVG/JS visualizations
• Covers all platforms: Si220 C/O-band, Si500, SiN300, Si340, SiN200, Ge-on-Si, Si Suspended
• Each platform section has a Layer Stack diagram (Uniform/To Scale toggle) and Cross-Section diagram
• Interactive: hover tooltips, Ctrl+scroll zoom, drag pan, double-click reset
• Integrated into make docs / make docs-serve / make docs-pdf
• Nav updated in docs/zensical.toml under Reference

Closes #319

Reminder

⚠️ AI-created PR — requires human review of the actual code changes before merge.

Test plan

• Run make docs locally and verify docs/layer_stack.md is generated
• Open the built docs and check the Layer Stack page renders correctly
• Verify each platform section has both layer stack and cross-section diagrams
• Test Uniform/To Scale toggle, tooltips, pan+zoom
• Verify CI passes

🤖 Generated with Claude Code

Summary by Sourcery

Generate an interactive layer stack documentation page for all available PDK platforms and integrate it into the docs build and navigation.

New Features:

• Add a .github script that builds docs/layer_stack.md with interactive SVG/JS visualizations of layer stacks and cross-sections across supported PDK bands.
• Introduce a new Layer Stack reference page in the documentation navigation.

Enhancements:

• Hook layer stack doc generation into docs, docs-serve, and docs-pdf Makefile targets so it is produced with the rest of the documentation.

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[sourcery-ai]

Reviewer's Guide

Adds an auto-generated docs/layer_stack.md page with interactive SVG/JS layer stack and cross-section visualizations for multiple PDK bands, integrates its generation into all docs Makefile targets, and exposes it under the Reference section in the docs navigation.

File-Level Changes

Change	Details	Files
Generate docs/layer_stack.md from PDK layer_stack and cross_sections with interactive SVG/JS visualizations.	Add .github/write_layer_stack.py script that imports PDKs for various platforms, including optional ones if installed. Traverse each PDK's layer_stack to extract layer metadata (z positions, thickness, material, GDS, inferred type) and compute layout for uniform and to-scale views. Extract cross-section definitions from PDK.cross_sections, resolving layer references via layer_stack and layer map to build width/z profiles. Render interactive layer stack SVGs with mode toggle, hover tooltips, and custom zoom/pan implemented via inline JavaScript. Render interactive cross-section SVGs with cladding/substrate backgrounds, per-cross-section columns, and tooltips, also with zoom/pan support. Compose a markdown document with sections per band containing the SVG blocks, shared CSS, and write it to docs/layer_stack.md.	.github/write_layer_stack.py
Hook layer_stack docs generation into the docs build pipeline and navigation.	Invoke .github/write_layer_stack.py in docs, docs-serve, and docs-pdf Makefile targets so layer_stack.md is generated before building or serving docs. Add a 'Layer Stack' entry pointing to layer_stack.md under the Reference section in docs/zensical.toml navigation.	Makefile docs/zensical.toml

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#319	Create an interactive docs page (layer_stack.md) that shows SVG/JS visualizations of the layer stack and cross-sections for each platform (Si220 C-band, Si220 O-band, Si500, SiN300), including Uniform/To Scale toggle, tooltips with layer details, and pan/zoom (Ctrl+scroll).	✅
#319	Integrate automatic generation of layer_stack.md into the documentation build process and add it to the docs navigation.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The CSS block CSS is appended inside every band section, which duplicates style tags in the generated markdown; consider emitting the <style> once at the top of the page or moving it to a shared docs stylesheet and referencing it to keep the output leaner and easier to maintain.
• The output path is derived from PATH.repo imported from cspdk.si220.cband.config, which couples this script to a specific PDK; using something like Path(__file__).resolve().parents[1] / "docs" / "layer_stack.md" (or a similar repo-root discovery) would make the script more robust if Si220 paths or configs change.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The CSS block `CSS` is appended inside every band section, which duplicates style tags in the generated markdown; consider emitting the `<style>` once at the top of the page or moving it to a shared docs stylesheet and referencing it to keep the output leaner and easier to maintain.
- The output path is derived from `PATH.repo` imported from `cspdk.si220.cband.config`, which couples this script to a specific PDK; using something like `Path(__file__).resolve().parents[1] / "docs" / "layer_stack.md"` (or a similar repo-root discovery) would make the script more robust if Si220 paths or configs change.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}