there is no View, only Edit

The bar offered Edit and View, and View existed to see the page without the builder's outlines and
handles on top of it. It was the DEFAULT, which put a click in front of every arrival at the one panel
whose job is editing — and it put a branch in every painter that did nothing but wait for that click.

So the mode is gone rather than defaulted the other way: no toggle, no `?mode=`, no guard. The clean
page is still one click away and always was — it is the site, on its own URL. What the admin owes is
the editing surface, always.

The left group in the bar stays, empty. The middle one is centred against the BAR rather than against
its neighbours, so removing the left group would let Desktop/Tablet/Mobile drift as the right group
changes width.

The preview's caption stays too. It reads as a duplicate of the device buttons and is not: they say the
width, and it says which SERVER — development, not production — which nothing else on the screen does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-31 19:23:37 +01:00
co-authored by Claude Opus 5
parent 8c9e4ecb85
commit 8f673792d1
5 changed files with 32 additions and 87 deletions
+3 -6
View File
@@ -219,7 +219,7 @@ export const LayoutPanel = () => {
useSaveTarget(dirty, busy, save);
// This section has a preview, so the bar offers Edit/View and the three widths.
usePreviewable();
const { mode, device } = useViewMode();
const { device } = useViewMode();
/*
The measure, and nothing else.
@@ -242,7 +242,6 @@ export const LayoutPanel = () => {
const onDocument = useCallback(
(frameDocument: Document) => {
if (mode === 'view') return;
const measure = paintMeasure(frameDocument);
const spacing = applyGutter(frameDocument, gutter);
return () => {
@@ -250,7 +249,7 @@ export const LayoutPanel = () => {
measure();
};
},
[mode, gutter],
[gutter],
);
if (!draft) return <div className="p-4 text-xs text-muted-foreground">{error ?? 'Loading…'}</div>;
@@ -292,8 +291,7 @@ export const LayoutPanel = () => {
`shrink-0` so they never take height from the preview, and no `max-h` any more: one tab is short
enough that it does not need capping, which is the other thing this bought.
*/}
{mode === 'edit' && (
<Tabs value={tab} onValueChange={setTab} className="shrink-0 gap-2">
<Tabs value={tab} onValueChange={setTab} className="shrink-0 gap-2">
<TabsList className="h-7">
<TabsTrigger value="colours" className="text-xs">
Colours
@@ -425,7 +423,6 @@ export const LayoutPanel = () => {
</div>
</div>
</Tabs>
)}
</div>
);