feat: add a persistent app shell with a themed top bar and pattern panel #11

Merged

deiussum merged 1 commit from add-app-shell-layout into develop

2026-09-20 10:45:36 -05:00

deiussum commented

2026-09-20 00:26:25 -05:00

Owner

Summary

Adds AppShell: a persistent top bar wrapping both the Home and Editor screens, showing contextual actions depending on whether a mosaic is open, instead of each screen owning its own separate chrome
Written-pattern view moves from a blocking modal dialog to a toggleable right-side panel, opened/closed via a persistent handle on its own edge (not a top-bar button), so it can stay open alongside the canvas while you work
Adds a real MUI dark theme built around the app's existing colors, replacing the previous mismatch (MUI's default light theme against a hand-styled dark page)
Home's background image now scales properly instead of overflowing the app's default 800×600 window
Fixes the window title, a pre-rename leftover ("Deiussum's Pattern Maker" → "Tesserow")
A left-side toolbox is deliberately not part of this change — the shell's layout leaves room for one as a future, separate proposal
Includes the archived OpenSpec change (openspec/changes/archive/2026-09-20-add-app-shell-layout/) and syncs a new app-shell capability spec plus an updated mosaic-editor spec

Real bugs found and fixed during verification

This sandbox has no display, so verification was done by building the release binary, running it under Xvfb, and driving it with synthesized X11 input (python-xlib) rather than just screenshotting. That caught three real bugs, all fixed here:

A deep MUI import path (@mui/material/styles/ThemeProvider) that type-checked fine but broke the production build (package exports map resolution) — tsc/dev mode never caught it
A pre-existing bug in the written-pattern dialog's Copy button: the handler looked up an element id that didn't exist in the DOM, so clicking Copy would have thrown
MUI's Drawer defaulting to position: fixed even in the persistent variant, which overlapped the top bar and hid the Zoom/Close buttons whenever the pattern panel was open

Test plan

npm run lint — clean
npx tsc --noEmit — clean
npm test — 14/14 passing
Full click-through under Xvfb: Home → Create New → editor with correct action set → open pattern panel via handle → click a canvas cell (still interactive) → Copy (verified via real X11 clipboard read) → close panel via handle → close editor → back to Home with shell intact, no errors logged

🤖 Generated with Claude Code

https://claude.ai/code/session_01KoLHnQugaAW2eknKo8FxVp

## Summary - Adds `AppShell`: a persistent top bar wrapping both the Home and Editor screens, showing contextual actions depending on whether a mosaic is open, instead of each screen owning its own separate chrome - Written-pattern view moves from a blocking modal dialog to a toggleable right-side panel, opened/closed via a persistent handle on its own edge (not a top-bar button), so it can stay open alongside the canvas while you work - Adds a real MUI dark theme built around the app's existing colors, replacing the previous mismatch (MUI's default light theme against a hand-styled dark page) - Home's background image now scales properly instead of overflowing the app's default 800×600 window - Fixes the window title, a pre-rename leftover ("Deiussum's Pattern Maker" → "Tesserow") - A left-side toolbox is deliberately **not** part of this change — the shell's layout leaves room for one as a future, separate proposal - Includes the archived OpenSpec change (`openspec/changes/archive/2026-09-20-add-app-shell-layout/`) and syncs a new `app-shell` capability spec plus an updated `mosaic-editor` spec ## Real bugs found and fixed during verification This sandbox has no display, so verification was done by building the release binary, running it under Xvfb, and driving it with synthesized X11 input (`python-xlib`) rather than just screenshotting. That caught three real bugs, all fixed here: - A deep MUI import path (`@mui/material/styles/ThemeProvider`) that type-checked fine but broke the **production** build (package `exports` map resolution) — `tsc`/dev mode never caught it - A pre-existing bug in the written-pattern dialog's Copy button: the handler looked up an element `id` that didn't exist in the DOM, so clicking Copy would have thrown - MUI's `Drawer` defaulting to `position: fixed` even in the `persistent` variant, which overlapped the top bar and hid the Zoom/Close buttons whenever the pattern panel was open ## Test plan - [x] `npm run lint` — clean - [x] `npx tsc --noEmit` — clean - [x] `npm test` — 14/14 passing - [x] Full click-through under Xvfb: Home → Create New → editor with correct action set → open pattern panel via handle → click a canvas cell (still interactive) → Copy (verified via real X11 clipboard read) → close panel via handle → close editor → back to Home with shell intact, no errors logged 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01KoLHnQugaAW2eknKo8FxVp

deiussum added 1 commit

2026-09-20 00:26:26 -05:00

feat: add a persistent app shell with a themed top bar and pattern panel f676f5ae33

The app previously swapped between two visually unrelated full-screen
views (HomePage's branded background, MosaicEditor's own toolbar) with
no shared chrome, a Home layout already larger than the app's default
window size, and MUI components rendering in their default light theme
against a hand-styled dark page background.

Adds AppShell: a persistent top bar wrapping both the Home and Editor
states, showing contextual actions depending on whether a mosaic is
open. The written-pattern view moves from a blocking modal dialog to a
toggleable right-side panel, opened/closed via a persistent handle on
its own edge rather than a top-bar button, so it can stay open
alongside the canvas. A real MUI dark theme (built around the app's
existing colors) replaces the previous light/dark mismatch. Home's
background image is now properly scaled instead of overflowing the
default window. Window title fixed from a pre-rename leftover
("Deiussum's Pattern Maker") to "Tesserow".

A left-side toolbox is deliberately not part of this change; the
shell's layout leaves room for one as a future, separate proposal.

Verification (via click-through testing under Xvfb with synthesized
X11 input, since this sandbox has no display) caught three real bugs
along the way, all fixed here:
- A deep MUI import path that type-checked fine but broke the
  production build (package "exports" map resolution).
- A pre-existing bug in the written-pattern dialog's Copy button
  (missing element id meant it would have thrown on click).
- MUI's Drawer defaulting to position:fixed even in the "persistent"
  variant, which overlapped the top bar and hid buttons behind the
  panel when it was open.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KoLHnQugaAW2eknKo8FxVp

deiussum merged commit 2bd01318df into develop

2026-09-20 10:45:36 -05:00

deiussum deleted branch add-app-shell-layout

2026-09-20 10:45:36 -05:00

deiussum referenced this pull request from a commit

2026-09-20 10:45:37 -05:00

feat: add a persistent app shell with a themed top bar and pattern panel (#11)