3dtours
9aa3424e92
Every tab's bar is one strip of chips, and a chip that opens a strip of its own opened a second one under the first: WB, TONE, PRESENCE and DETAIL & EFFECTS kept the bar up while the panel's own strip sat above it. The way back to the tab's chips is the path under the bar (.crumb), which names the strip the visitor is in either way, so the bar only said it a second time — and charged the photo a row for the saying. So the strip a chip opens takes the bar's slot and the tab's own chips stand down. Only the two columns that ARE a strip a chip opened displace the bar: .col-sub[data-col="options"], which is where a panel's strip is drawn (LIGHT's four, FRAME's tools), and .col-sub[data-col="wm"], a watermark, which is a column and not a row of chips. Both wear the bar's slot and the bar's own skin — --bg, not the sub-column's --bg-elev, so in dark the strip paints black like the bar and not #131315 — and .col-main is dropped while one of them is up. The RECIPES list, a photo's history and the mask's own column are an open chip's content, not the strip its chip opened, so they keep the bar in sight under them. The ruler is unchanged: a knob opens it in the row above, and the strip stays under it, so the panel is still on screen while the number moves. Measured on 390x844, LIGHT, light and dark: with the bar up the photo is 641px; WB open, the bar is gone and its strip measures 73px in the bar's slot, the photo 608px (568px before, when the bar held its 40px over the same strip); COLOR TEMP opens its 60px ruler over that strip, photo 548px (508px before), path TABS > LIGHT > WB > COLOR TEMP; the ruler's "<" lands back on the WB strip (TABS > LIGHT > WB); crumb-strip and crumb-tab walk back up, the bar returning its 40px and the photo 641px. FRAME's WATERMARK takes the slot as a column (131px, --bg in both themes, path TABS > FRAME > WATERMARK) and crumb-tab stands the bar back up. PRESETS' recipes list leaves the bar at 40px with the list 40px under it. No page error and no sideways scroll (390px of 390px) in any state; on 1280x900 .dev-panels is painted and .dev-chips/.crumb are not. Checks: - npm run build (tsc --noEmit + vite) clean: dist/assets/index-kQeKfF3z.css 71.95 kB. - Chromium 390x844 light and dark: the strip-in-slot walk above, plus 1280x900 unchanged.
RecipesCam web — self-contained stack
A Docker-hosted web build of RecipesCam. Everything it needs is in this folder: move it to another machine, run two commands, and the app is up. It does not need the React Native project around it.
cp .env.example .env
docker compose up -d --build
# → http://localhost:8090
What runs where
| Service | Image | Role |
|---|---|---|
frontend |
nginx:1.27-alpine (built by frontend/Dockerfile) |
Static SPA + /api/ reverse proxy |
api |
node:22-slim (built by backend/Dockerfile) |
Accounts + saved recipes, SQLite on ./data |
frontend resolves api through Docker's embedded DNS and proxies /api/* to
it — that is why the API container is named api and why it is not published on
the host. Only ${WEB_PORT:-8090} is exposed.
Photos never leave the browser. The CanvasKit render pipeline (grade, frame, watermarks, JPEG encode) runs in the visitor's tab; the API only stores recipes as JSON.
Layout
docker-compose.yml the stack
.env.example WEB_PORT
data/ SQLite (created on first run, gitignored)
backend/ Fastify + better-sqlite3 API, own Dockerfile
frontend/ Vite + React + CanvasKit SPA, own Dockerfile + nginx.conf
shared/ vendored copies of the app's types + utils (see below)
src/engine/ skiaShim.ts (CanvasKit) + exportEngine.ts (render pipeline)
+ session.ts (localStorage/IndexedDB studio persistence)
Vendored files
frontend/shared/{types/index.ts,utils/*.ts} are byte-identical copies of
src/types/index.ts and ten src/utils/*.ts files from the React Native
project (@shopify/react-native-skia is aliased to src/engine/skiaShim.ts in
vite.config.ts + tsconfig.json, so those files compile unchanged):
cinemaShader colorUtils defaultRecipes exifWrite frameUtils jpegDpi
paramDefs recipeShare skiaImage toneShader.
The landing page needs no CDN: frontend/public/assets/fonts/*.woff2 are the
seven self-hosted faces behind the three font groups the Themes menu offers
(Plus Jakarta Sans / Inter / JetBrains Mono, Fraunces / Be Vietnam Pro /
Courier Prime, Be Vietnam Pro / Space Mono — all SIL OFL, pulled from Google
Fonts, vietnamese + latin + latin-ext subsets), and
frontend/public/assets/samples/s*.jpg are the six placeholder negatives the
film strip, preset tester and QR card show (swap them for real graded stills
whenever we have them). Its one foreign request is the QR image from
api.qrserver.com, which degrades to an empty slot offline.
When the app changes one of them, copy it back in — the renderer is only "parity" for as long as these stay in sync:
cd <repo>/docker/frontend/shared/utils
cp <repo>/src/utils/<name>.ts .
Operations
docker compose logs -f api # API log
docker compose restart api # after backend/src changes (rebuild: --build)
docker compose down # stop; ./data survives
Backup is the ./data folder — that is the whole database.
Checks
curl -s http://localhost:8090/api/health # {"ok":true}
curl -sI http://localhost:8090/ # 200, index.html
Then open the UI, drop a photo in, and confirm the preview shows the picture and
EXPORT downloads a JPEG that opens. The preview going solid black while the
export still reports a plausible size is the one failure mode worth knowing: it
means the CanvasKit GPU surfaces lost their shared GrDirectContext (see
frontend/src/engine/skiaShim.ts), and with no GPU the raster fallback renders
the same pipeline correctly, just slower.