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>

web/DetailPanel.tsx

@@ -11,7 +11,7 @@ import { PageBuilderPanel } from './sections/PageBuilderPanel';
 import { PublishButton } from './PublishButton';
 import { SyncButton } from './SyncButton';
 import { SaveTargetProvider, useSaveButton } from './SaveTarget';
-import { DEVICES, ViewModeProvider, useViewMode, type DeviceName, type Mode } from './ViewMode';
+import { DEVICES, ViewModeProvider, useViewMode, type DeviceName } from './ViewMode';
 import { MessagesPanel } from './MessagesPanel';
 import { PlannedSection } from './PlannedSection';
 import { useReady } from './useReady';
@@ -84,39 +84,6 @@ const SaveButton = () => {
   );
 };
 
-/**
- * Editing, or just looking.
- *
- * Two buttons rather than one that toggles, so the current state is readable without knowing what the
- * label means. A single button saying "View" has to be interpreted — is that what it is, or what it
- * would become? — and that question is asked every time.
- */
-const ModeToggle = () => {
-  const { previewable, mode, setMode } = useViewMode();
-  if (!previewable) return null;
-
-  const options: { value: Mode; label: string; Icon: typeof Pencil }[] = [
-    { value: 'edit', label: 'Edit', Icon: Pencil },
-    { value: 'view', label: 'View', Icon: Eye },
-  ];
-
-  return (
-    <div className="flex items-center gap-0.5 rounded-md border border-border p-0.5">
-      {options.map(({ value, label, Icon }) => (
-        <Button
-          key={value}
-          size="sm"
-          variant={mode === value ? 'secondary' : 'ghost'}
-          className="h-5 gap-1 px-2 text-xs"
-          onClick={() => setMode(value)}
-        >
-          <Icon className="size-3" />
-          {label}
-        </Button>
-      ))}
-    </div>
-  );
-};
 
 /** The width the preview is rendered at. See DEVICES for why these three and not others. */
 const DeviceToggle = () => {
@@ -209,9 +176,11 @@ export const DetailPanel = () => {
             would never be in the same place twice.
           */}
           <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
-            <div className="flex flex-1 justify-start">
-              <ModeToggle />
-            </div>
+            {/* Empty, and deliberately still here: the middle group is centred against the BAR, so
+                removing the left group would let Desktop/Tablet/Mobile drift left as the right group
+                changes width. It held Edit/View — see the note in ViewMode about why there is no
+                longer a mode to toggle. */}
+            <div className="flex flex-1 justify-start" />
 
             <div className="flex justify-center">
               <DeviceToggle />