The editor is rebuilt around the journey

Asked for and approved by the owner on 2026-10-18. It changes parts of 2026-10-14-git-model (the sidebar) and 2026-10-17-drawn-elements (where you draw). Everything else in those decisions stays.

Decision

The sidebar

• The rail is Journey, Pages, Components, Styles, then Analysis below a line.
• Icons is part of Styles. It is no longer its own rail item. Icons has a Logos section at the top and a search box. There are no Illustrations.
• Journey has no side panels, left or right. A selected page shows as a small card on the canvas; a click action is set in a card beside its arrow.
• Opening a product goes to Journey · All.

One item per page

• Each panel row opens one item at its own address: pages/<id>, components/<id>, styles/<group>, styles/<group>/<id>.
• Nothing scrolls on forever. Pages shows one page. Components shows one component. Each Styles group is its own page.

View and Edit

• One switch in the bottom toolbar: View · Edit, like Figma's Dev Mode switch. Shortcut ⇧E.
• View is the default for everyone, every time a product opens. In View you look and take: inspect elements, read values, copy code, switch states and sizes, and preview. The CLI and MCP see what View sees.
• Edit needs Can edit or higher. Can view sees Edit locked. A company that is read-only after its free month sees Edit locked too.
• In Edit, every change goes to your draft. Drawing tools and the AI tab appear only in Edit.
• This replaces the Use · Edit switch that only Components had.

The canvas toolbar

Every canvas (Journey, Pages, Components) has the same tools at the bottom centre:

• Viewport: Mobile · Tablet · Website. On Journey it changes every frame.
• State: Empty · Loading · Data · Error. On Journey it changes every frame.
• Preview: opens the selected page in a new tab, working like the live site, with the draft's changes, in the chosen viewport and state. Links in it follow the journey.

Work like Figma

The owner wants Trunk as close to Figma as it can be (2026-10-18, after the first screens).

• The bottom toolbar holds the work: tools, zoom, viewport, state, Preview, Actions (⌘K) and View · Edit. The top bar holds only where you are: company, product, branch, Review, Versions.
• ⌘K opens Actions: one search over pages, components, styles and commands.
• Right-click on the canvas, a page frame, an element or a component opens a menu of what can be done there, each with its shortcut.
• Keyboard shortcuts for every tool and command; ⌘/ shows them all.
• Every side panel has a search box.

Light and dark

• Trunk has a light and a dark theme. Light is the default (owner, 2026-10-18). The design set draws both: :root is light, .phone--dark is dark, and the bar's toggle switches them.
• Text on a coloured fill (a primary button, an avatar, a step number) uses on-fill, white in both themes.
• The app is dark today. Building 0020 adds the light theme and the toggle, makes light the default, and moves packages/ui/src/theme.test.ts to compare both palettes.

Roles

• The Capture step asks who uses the product, next to the URL. The default is Open: no sign-in.
• + Add role asks for a name, the sign-in address (optional), an email and a password. A product can have many roles, such as User and Admin.
• Trunk keeps role passwords, encrypted. Only the capture worker can read them. It uses them to capture, re-capture and Verify as that role. Nobody can read a password back in the app; it can only be replaced or deleted. Trunk asks for test accounts, not real ones.
• A role with 2FA or single sign-on cannot be signed in by the worker. It is captured with Walk it yourself. The password typed into the frame there is still not kept.
• Capture runs once for Open and once per role. A page seen by several roles is one page, marked with each role that can reach it.

Journeys

• Journey shows the whole product by default, as page frames joined by arrows. The rules are in journeys.
• Filters across the top: All · Open · Sign-in · one per role · your own journeys.
• Journeys start from the capture, and you can add to them. In Edit, select an element on a page and drag its + to another page, then pick the action: Tap, Submit a form, After sign-in, Redirect or Back. Right-click the canvas (or press N) for a new page. There is no Add button. Before this, journeys were only derived.

Everything lands in its place

• Whatever you make goes to its home, wherever you made it. A page made on Journey is in Pages. A colour made in a component's inspector is in Styles › Colors. An icon imported while editing a page is in Styles › Icons.
• A session has one draft. Every change you make, on any screen, goes to the same draft. Review lists each item added, changed or removed, grouped by Journey, Pages, Components and Styles.

Why

• The owner was not happy with the designs (2026-10-18). The journey is how people think about a product, so it comes first.
• One item per page gives each thing an address, so back, forward and sharing a link work. A long scroll has none of that.
• Most people who open Trunk read it: designers, developers and agents. One View mode for all of them, with Edit as a separate step, keeps main safe and keeps the screen calm.
• Most products have pages behind a sign-in. Without roles, capture misses them, and Verify can never check them again.

Impact

• Designs: the rail and the bottom toolbar change on every editor screen. Journey, Pages, Components and Styles are redrawn. Icons moves under styles/. The Capture step gains roles. The plan is features/0020-editor-redesign.md.
• Concepts: capture-reads-the-product, onboarding-steps, design-set, the new journeys.
• Entities: access-levels (View · Edit), demo-tenants (roles and journeys).
• Schema: roles, encrypted role credentials, custom journeys, which roles reach a page, and links with an action. This needs the owner's review before any code.
• Security: role passwords are a new kind of secret Trunk holds. The key that encrypts them lives outside the database, in the worker's environment.
• Already built and reused: icon capture, Get code and the Styles token page.

Status

Accepted 2026-10-18. Designs drawn the same day, waiting for review.

Sources

• The owner's instructions in the session of 2026-10-18.