11.04 — Showcase · Web application

Pattern library manager.

Three panes, default density, canonical palette. This surface exists to test the principle that does the most product work and is the easiest to talk about without proving: continuity. Nothing here opens a modal, nothing loses work, and every destructive action has a return path.

The surface

Density

default · P = 8

Fork

kavi · canonical, unforked

Pattern coverage

content, not decoration

Modals

zero

Density

studio.margazhi / library / margazhi-12

Library

Filter patterns

Margazhi 124471

7 × 7 · D4 · 84 segments · edited 2h ago

Margazhi 111188

9 × 9 · D4 · 144 segments · edited yesterday

Doorstep study302

5 × 5 · D2 · 44 segments · draft

Threshold border8890

7 × 7 · D2 · 84 segments · edited 3 days ago

Crossing weave6013

11 × 11 · free · 220 segments · edited last week

Margazhi 12

Closed line

Grid 7 × 7

Crossing 0.20

Symmetry

Seed4471
Segments84
Boundary loops12
Open endpoints0
Stored size5 numbers

Crossing changed to 0.20.

The detail pane is a static mock; the live, fully wired version of these controls is on the Generator page.

Continuity in practice

Principle 02 is easy to agree with and hard to hold. Here is what holding it actually changed.

Usual pattern	What this does instead	Why
Click an item → modal editor → Save / Cancel	Three-pane, edit in place. Selection changes the detail pane; the list stays visible and navigable throughout.	The user never loses their position in the list, and Cancel never means "return to an unknown state".
Delete → confirmation dialog → gone	Sweep → toast with Undo, eight seconds, timer paused on hover and focus.	A return path is cheaper than a confirmation and less annoying. Confirmations are reserved for actions that genuinely cannot be undone.
Change a setting → nothing until Save	Every parameter change is applied and announced, with Undo on the change itself.	The preview is the feedback. A Save button that gates a live preview is two mental models fighting.
Navigating away silently discards edits	Parameters are the document. There is no unsaved buffer to lose — the pattern is five numbers, and they are in the URL.	The strongest form of the principle: design the data so the failure mode cannot occur, rather than warning about it.

Note the URL in the frame bar. /library/margazhi-12 — the selected item is a route, not component state. Continuity includes the back button, and a three-pane app that cannot be linked into has failed the principle regardless of how smooth its transitions are.

What it stresses

Held up

Three panes with no new layout tokens. The rail is 8 P, the list 34 P, the detail fluid — all lattice multiples, all collapsing predictably at 900px.
The generator as a feature. Every control here is the same control documented on the Generator page. The pattern engine is product functionality on this surface, not decoration — which is the case the density ceiling was never meant to restrict.
Selection without colour alone. The current list item carries an accent left border, an accent background, and aria-current. Three signals, because one of them is invisible to some users and one is invisible to assistive technology.
The toast doing real work. It is the component that makes the no-confirmation-dialog decision affordable.

Worth noting

Compact density suits this surface. Try the switch — a three-pane tool at P = 6 fits noticeably more of the list without hurting legibility, since type does not follow the pitch. Density tiers are a per-surface decision, not a per-product one.
Icon-only rail items each carry an aria-label. The library styles the rail; it cannot invent names, and an unlabelled icon rail is the most common accessibility failure in this layout.
The detail pane scrolls, the list scrolls, the page does not. Independent scroll regions are what make three-pane layouts usable and what make them easy to get wrong.