Add the node builder app, served at /node_builder #36

Merged

rob merged 6 commits from node-builder into main 2026-10-20 08:21:11 +00:00

Conversation 0 Commits 6 Files changed 19 +2523 -6

Claude commented 2026-10-20 07:54:46 +00:00

Collaborator

• Copy link
• Copy Markdown

Ports the Claude Design Node Builder and Node Builder Mobile files into a self-contained app in node_builder/, served at /node_builder. It shares only the font files with the rest of the site. The design's logic class is kept almost verbatim; the template is rewritten with htm because the design runtime needs eval and CDN React, which the CSP blocks. The design-system components it uses are copied from the bundle and the Lucide icons are vendored as a sprite. React, htm, js-yaml and JSZip are pinned copies under vendor/.

Under 900px it switches to the mobile design: sheets instead of side panels, tap-to-connect, a tile-based add sheet and a full-screen problems list.

Behavioural changes to the site: server.js serves a directory's index.html, and the build copies the folder into dist/node_builder/ with content-hashed asset links and adds the page to the sitemap. No CSP change.

Tested with node --test (20 passing, 1 skipped), html-validate on the built output, and a headless Chromium run through both layouts: selecting, pin assignment, wire drag and the bind/command chooser, YAML, zip download, dark theme, and on the phone layout the sheets, tap-to-connect, add, problems and pinch zoom. No console errors or failed requests.

Not included: no Umami tag on the builder page and no link to it from the site nav.

Ports the Claude Design Node Builder and Node Builder Mobile files into a self-contained app in `node_builder/`, served at `/node_builder`. It shares only the font files with the rest of the site. The design's logic class is kept almost verbatim; the template is rewritten with htm because the design runtime needs `eval` and CDN React, which the CSP blocks. The design-system components it uses are copied from the bundle and the Lucide icons are vendored as a sprite. React, htm, js-yaml and JSZip are pinned copies under `vendor/`. Under 900px it switches to the mobile design: sheets instead of side panels, tap-to-connect, a tile-based add sheet and a full-screen problems list. Behavioural changes to the site: `server.js` serves a directory's `index.html`, and the build copies the folder into `dist/node_builder/` with content-hashed asset links and adds the page to the sitemap. No CSP change. Tested with `node --test` (20 passing, 1 skipped), html-validate on the built output, and a headless Chromium run through both layouts: selecting, pin assignment, wire drag and the bind/command chooser, YAML, zip download, dark theme, and on the phone layout the sheets, tap-to-connect, add, problems and pinch zoom. No console errors or failed requests. Not included: no Umami tag on the builder page and no link to it from the site nav.

Claude added 1 commit 2026-10-20 07:54:46 +00:00

Add the node builder app, served at /node_builder ... f81c517483

A self-contained React app in node_builder/, ported from the Claude Design
Node Builder and Node Builder Mobile files. It shares only the font files
with the site. The design runtime needs eval and CDN scripts, which the
CSP blocks, so the logic class was kept and the template rewritten with
htm; the design-system components it uses are copied from the bundle and
the icons vendored as a sprite.

The server now serves a directory's index.html, and the build copies the
folder into dist with content-hashed asset links.

rob added 1 commit 2026-10-20 08:06:20 +00:00

Animate sheets and programmatic board pans in the node builder ... 5118efef9a

Sheets slide up and the scrim fades in. The board eases when the app
moves it (revealing a tapped row, fit, zoom buttons) but not while the
user is dragging or pinching. Ports are re-measured when the pan ends so
wires stay attached. Honours prefers-reduced-motion.

rob added 1 commit 2026-10-20 08:08:27 +00:00

Slide sheets out when they close ... ee48ab8fff

A small wrapper keeps a closed sheet mounted for 240ms with a leaving
class so it can animate down while the scrim fades. Taps are ignored
during that beat. Reduced-motion users get an instant close.

rob added 1 commit 2026-10-20 08:17:26 +00:00

Centre and zoom to the tapped row on a phone, fit the board in connect mode ... c893917ab6

Revealing a row used to pan vertically only. It now also centres the
card and zooms to at least 0.75 (or to fit the card width), skipping the
move when the row is already well placed. Entering connect mode fits the
whole board so every target is on screen.

rob added 1 commit 2026-10-20 08:20:07 +00:00

Link to the node builder from the site header cbdb8ccfeb

rob added 1 commit 2026-10-20 08:20:39 +00:00

Keep header nav labels on one line on small screens ... f5d44927c9

With four links the labels wrapped inside their pills at 360px. The
pills now wrap onto a second row instead.

rob merged commit f414c0e666 into main 2026-10-20 08:21:11 +00:00

rob deleted branch node-builder 2026-10-20 08:21:11 +00:00

rob referenced this pull request from a commit 2026-10-20 08:21:12 +00:00

Merge pull request 'Add the node builder app, served at /node_builder' (#36) from node-builder into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

rob/CamperCan!36

No description provided.