diff --git a/CLAUDE.md b/CLAUDE.md
index da012e53..e75e12cf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2649,9 +2649,28 @@ Filesmith's conventions.
   **PROJECT SETTINGS IS ITS OWN PAGE, AND THE TREE ALWAYS FOLLOWS THE OPEN FILE** (#296; owner,
   2026-10-06: "project specific settings should be in a tab called project settings not in
   explorer. and remove the setting for scroll to open file, it should just be on by default, no
-  setting"). `ProjectPage.tsx` holds Sidebar position and First view of a new project; Folder for
+  setting"). `ProjectPage.tsx` holds Sidebar position (the tree's) and First view of a new project; Folder for
   new tabs stays on Explorer, since the + and Ctrl+T open an Explorer tab. Scroll to the open file
   is gone and a stored `prism.tree.autoscroll` is ignored.
+- **SIDEBAR POSITION IS TWO SETTINGS: THE EXPLORER'S PLACES AND THE PROJECT TREE, AND THE PREVIEW
+  TAKES THE OTHER SIDE** (#304; owner, 2026-10-07: "fix the setting in Explorer for the sidebar where
+  you can put it on the right side or the left side? I think that's just an empty setting for now,
+  but actually implement it. And remember that when the sidebar goes on the right, the preview menu
+  and button to open it would have to go on the left"; then, the same day, after testing one shared
+  row: "No, it should be two settings, one on the project tab and one on the explorer tab").
+  Explorer > Layout opens with `explorer-side` (key `prism.explorer.side`, `lib/explorerSidePrefs.ts`,
+  default Left): the Explorer tab's places panel, and nothing else. Project settings keeps
+  `tree-side` (key `prism.tree.side`, unchanged): the project tree, and nothing else. Neither moves
+  the other; App reads the Explorer's for an Explorer tab and the tree's for a project tab
+  (`workspaceSide`), and each panel peeks from its own. On the Explorer's Right:
+  `.folder-browser[data-side='right']` is a three-column grid (preview, list, places;
+  the preview column 0px while shut, so its slide still tweens one column), the places come after
+  the list in the DOM (Tab walks left to right), the preview toggle LEADS the address row (before
+  Back, the end nearest the pane), the viewer laid over the slot sits at `left: 0`
+  (`.browse-workspace[data-sidebar-side='right']`), each grip is its left twin turned round
+  (`ExplorerResize`'s `edge`: a drag toward the middle widens), and the places peek from the right
+  edge. Left is the window as it was, box for box. The `explorerSide` e2e holds it (it fails on
+  main), one coat of a see-through ground included, and that each row moves only its own panel.
 
 
 - **The viewer lives here for now.** The plan is a shared package, **`prism-core`**, which
diff --git a/package-lock.json b/package-lock.json
index 4f6150d3..c5797b71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "prism",
-  "version": "0.92.1",
+  "version": "0.93.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "prism",
-      "version": "0.92.1",
+      "version": "0.93.0",
       "license": "MIT",
       "dependencies": {
         "@codemirror/commands": "^6.11.0",
diff --git a/package.json b/package.json
index be068b68..af0b71d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prism",
-  "version": "0.92.1",
+  "version": "0.93.0",
   "description": "A fast, universal media viewer for Windows.",
   "author": "Max",
   "license": "MIT",
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 4a28afee..be5322bb 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -104,6 +104,7 @@ import { PropertiesDialog } from './components/PropertiesDialog'
 import './components/browse/workspace.css'
 import { focusTermSession } from 'prism-term-core/renderer/components/TerminalPanel'
 import { sortFiles, useSort } from './lib/sortPrefs'
+import { useExplorerSide } from './lib/explorerSidePrefs'
 import { useTreeSide } from './lib/treePrefs'
 import { VideoView } from './components/VideoView'
 import { AudioView } from './components/AudioView'
@@ -996,7 +997,12 @@ export default function App(): JSX.Element {
   )
   // The file tree. Off on a fresh install: the media is the point.
   const [sidebar, setSidebar] = useState(() => localStorage.getItem(SIDEBAR_KEY) === '1')
+  // TWO SIDEBAR POSITIONS (#304; owner, 2026-10-07: "No, it should be two
+  // settings, one on the project tab and one on the explorer tab"): the
+  // project tree's (Project settings) and the Explorer's places (Explorer >
+  // Layout). Neither moves the other.
   const treeSide = useTreeSide()
+  const explorerSide = useExplorerSide()
   // A PANEL SLIDES WHEN IT IS OPENED OR CLOSED, AND ONLY THEN (owner,
   // 2026-09-23: "when you collapse the explorer sidebar its not animated, it
   // should be", and "when you switch between a project and explorer with
@@ -2608,7 +2614,8 @@ export default function App(): JSX.Element {
   const peekPlaces = !!peekTarget?.startsWith('places:')
   const { phase: peekPhase, end: endPeek } = useSidebarPeek({
     target: peekTarget,
-    side: peekPlaces ? 'left' : treeSide,
+    // Each panel peeks from its own Sidebar position (#304).
+    side: peekPlaces ? explorerSide : treeSide,
     zone: () => document.querySelector<HTMLElement>('.browse-workspace'),
     panel: () =>
       document.querySelector<HTMLElement>(
@@ -2616,6 +2623,9 @@ export default function App(): JSX.Element {
       )
   })
   peekingRef.current = peekPhase === 'in'
+  // The side the open tab's sidebar sits on: an Explorer tab's places, else
+  // the project tree (#304).
+  const workspaceSide = active && isExplorerTab(active) ? explorerSide : treeSide
   // The peeking panel's own toggle pins it; so does Ctrl+B (togglePanel).
   const pinFromPeek = useCallback(() => {
     endPeek()
@@ -4034,7 +4044,8 @@ export default function App(): JSX.Element {
             : undefined
         }
         data-preview-sliding={previewSlide.sliding || undefined}
-        className={`browse-workspace relative flex min-h-0 flex-1 ${browsing.folder ? 'is-browsing' : ''} ${treeSide === 'right' ? 'flex-row-reverse' : ''} ${
+        data-sidebar-side={workspaceSide === 'right' ? 'right' : undefined}
+        className={`browse-workspace relative flex min-h-0 flex-1 ${browsing.folder ? 'is-browsing' : ''} ${workspaceSide === 'right' ? 'flex-row-reverse' : ''} ${
           settingsOpen || setup ? 'invisible' : ''
         }`}
       >
@@ -4046,7 +4057,7 @@ export default function App(): JSX.Element {
             section="places"
             bounds={explorerWidths.bounds.places}
             onResize={(width) => explorerWidths.resize('places', width)}
-            right={!browsing.folder && treeSide === 'right'}
+            edge={explorerSide}
           />
         )}
         {active && active.kind !== 'settings' && !fullscreen && (
@@ -4140,6 +4151,7 @@ export default function App(): JSX.Element {
                 placesVisible={isExplorerTab(active) ? placesVisible : false}
                 placesSliding={isExplorerTab(active) && panelSliding}
                 placesPeek={peekPlaces ? peekPhase : null}
+                side={explorerSide}
                 onPinPlaces={pinFromPeek}
                 onPlacePicked={endPeek}
                 onOpenProject={isExplorerTab(active) ? openAsProject : undefined}
@@ -4239,6 +4251,7 @@ export default function App(): JSX.Element {
               section="preview"
               bounds={explorerWidths.bounds.preview}
               onResize={(width) => explorerWidths.resize('preview', width)}
+              edge={explorerSide === 'right' ? 'left' : 'right'}
             />
           )}
           {!browsing.folder &&
diff --git a/src/renderer/src/components/browse/BrowseToolbar.tsx b/src/renderer/src/components/browse/BrowseToolbar.tsx
index 883d3644..0b44730c 100644
--- a/src/renderer/src/components/browse/BrowseToolbar.tsx
+++ b/src/renderer/src/components/browse/BrowseToolbar.tsx
@@ -30,6 +30,10 @@ type Props = Pick<
   /** What sits after the address field: the Explorer's preview toggle and
    *  search button (#267). The file viewer's toolbar has none. */
   trailing?: ReactNode
+  /** What sits BEFORE the history buttons: the preview toggle, when the
+   *  sidebar is on the right and the preview pane on the left (#304), so the
+   *  toggle is at the end nearest the pane it opens. */
+  leading?: ReactNode
   /** The archives along the path (#300, `ArchiveMeta.chain`): those crumbs
    *  wear the archive icon. Before main has answered, a crumb named like an
    *  archive with more path after it is taken to be one. */
@@ -71,6 +75,7 @@ export function BrowseToolbar(props: Props): JSX.Element {
   }
   return (
     <div className="browse-toolbar" data-testid="browse-toolbar">
+      {props.leading}
       <div className="browse-history">
         <button
           className="browse-icon-button"
diff --git a/src/renderer/src/components/browse/ExplorerResize.tsx b/src/renderer/src/components/browse/ExplorerResize.tsx
index 2d5f7b8a..ab4b1ef7 100644
--- a/src/renderer/src/components/browse/ExplorerResize.tsx
+++ b/src/renderer/src/components/browse/ExplorerResize.tsx
@@ -5,17 +5,28 @@ export function ExplorerResize({
   section,
   bounds,
   onResize,
-  right = false
+  edge
 }: {
   section: ExplorerSection
   bounds: ExplorerWidthBounds
   onResize: (value: number | null) => void
-  right?: boolean
+  /** The window edge the panel sits against (#304: Sidebar position moves
+   *  the places to the right and the preview to the left). A drag or an
+   *  arrow toward the middle widens it. */
+  edge: 'left' | 'right'
 }): JSX.Element {
   const drag = useRef<{ x: number; value: number } | null>(null)
   const [dragging, setDragging] = useState(false)
   const [pointerResize, setPointerResize] = useState(false)
-  const direction = section === 'preview' || right ? -1 : 1
+  const direction = edge === 'right' ? -1 : 1
+  // Only a panel off its usual edge says so: the left side's classes are
+  // the ones the window always had.
+  const turned =
+    section === 'places' && edge === 'right'
+      ? ' is-right'
+      : section === 'preview' && edge === 'left'
+        ? ' is-left'
+        : ''
   return (
     <div
       role="separator"
@@ -26,7 +37,7 @@ export function ExplorerResize({
       aria-valuenow={bounds.value}
       tabIndex={0}
       title="Drag to resize. Arrow keys adjust width. Double-click to reset."
-      className={`explorer-resize explorer-resize-${section}${right ? ' is-right' : ''}`}
+      className={`explorer-resize explorer-resize-${section}${turned}`}
       data-dragging={dragging || undefined}
       data-pointer-resize={pointerResize || undefined}
       onPointerDown={(event) => {
diff --git a/src/renderer/src/components/browse/FolderBrowser.tsx b/src/renderer/src/components/browse/FolderBrowser.tsx
index 3081fa60..62fc1bb4 100644
--- a/src/renderer/src/components/browse/FolderBrowser.tsx
+++ b/src/renderer/src/components/browse/FolderBrowser.tsx
@@ -278,6 +278,56 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
             : 'This folder is empty.'
           : null)
 
+  // SIDEBAR POSITION (#304; owner, 2026-10-07): on the right the places
+  // panel takes the right edge and the preview the left. The places come
+  // after the list in the DOM then too, so Tab walks the row left to right.
+  const right = props.side === 'right'
+  const previewToggle = (
+    <button
+      className="browse-icon-button"
+      aria-label="Preview pane"
+      title="Preview pane"
+      aria-pressed={props.previewEnabled}
+      onClick={props.onPreviewToggle}
+    >
+      <BrowseIcon name="preview" />
+    </button>
+  )
+  const places = (props.placesVisible !== false || sliding || !!props.placesPeek) && (
+    <BrowsePlaces
+      places={props.places}
+      onDropInto={props.onDropInto}
+      quickAccess={props.quickAccess}
+      readDrives={props.readDrives}
+      onQuickAccessFile={
+        props.placesPeek && props.onQuickAccessFile
+          ? (path, full) => {
+              props.onPlacePicked?.()
+              props.onQuickAccessFile?.(path, full)
+            }
+          : props.onQuickAccessFile
+      }
+      onPin={props.placesPeek === 'in' ? props.onPinPlaces : undefined}
+      onUnpinQuickAccess={props.onUnpinQuickAccess}
+      onMoveQuickAccess={props.onMoveQuickAccess}
+      onPinQuickAccessPaths={props.onPinQuickAccessPaths}
+      directory={props.directory}
+      chosenPlace={chosenPlace}
+      onChoosePlace={setChosenPlace}
+      onNavigate={
+        props.placesPeek
+          ? (path) => {
+              props.onPlacePicked?.()
+              props.onNavigate(path)
+            }
+          : props.onNavigate
+      }
+      onNewTerminal={props.onNewTerminal}
+      onOpenProject={props.onOpenProject}
+      onOpenNewTab={props.onOpenNewTab}
+    />
+  )
+
   return (
     <div
       ref={shell}
@@ -299,6 +349,7 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
       data-places-hidden={props.placesVisible === false || undefined}
       data-places-sliding={sliding || undefined}
       data-places-peek={props.placesPeek || undefined}
+      data-side={right ? 'right' : undefined}
       data-testid="folder-browser"
       // Where the user last acted (useActiveArea): the side not acted in
       // draws its mark dimmed, File Explorer's inactive selection.
@@ -389,20 +440,16 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
         // The address commits at once; the rows follow when they answer.
         directory={props.pendingPath ?? props.directory}
         archiveChain={props.pendingPath ? undefined : props.listing ? (props.listing.archive?.chain ?? []) : undefined}
+        // The preview toggle sits at the end of the row nearest the pane it
+        // opens (#304): after the address with the pane on the right, before
+        // the history buttons with it on the left.
+        leading={right ? previewToggle : undefined}
         trailing={
           <>
             {props.terminalControls && (
               <div className="browse-terminal-controls">{props.terminalControls}</div>
             )}
-            <button
-              className="browse-icon-button"
-              aria-label="Preview pane"
-              title="Preview pane"
-              aria-pressed={props.previewEnabled}
-              onClick={props.onPreviewToggle}
-            >
-              <BrowseIcon name="preview" />
-            </button>
+            {!right && previewToggle}
             <button
               className="browse-icon-button browse-search-button"
               aria-label="Search this folder and subfolders"
@@ -438,40 +485,7 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
           }}
         />
       )}
-      {(props.placesVisible !== false || sliding || !!props.placesPeek) && (
-        <BrowsePlaces
-          places={props.places}
-          onDropInto={props.onDropInto}
-          quickAccess={props.quickAccess}
-          readDrives={props.readDrives}
-          onQuickAccessFile={
-            props.placesPeek && props.onQuickAccessFile
-              ? (path, full) => {
-                  props.onPlacePicked?.()
-                  props.onQuickAccessFile?.(path, full)
-                }
-              : props.onQuickAccessFile
-          }
-          onPin={props.placesPeek === 'in' ? props.onPinPlaces : undefined}
-          onUnpinQuickAccess={props.onUnpinQuickAccess}
-          onMoveQuickAccess={props.onMoveQuickAccess}
-          onPinQuickAccessPaths={props.onPinQuickAccessPaths}
-          directory={props.directory}
-          chosenPlace={chosenPlace}
-          onChoosePlace={setChosenPlace}
-          onNavigate={
-            props.placesPeek
-              ? (path) => {
-                  props.onPlacePicked?.()
-                  props.onNavigate(path)
-                }
-              : props.onNavigate
-          }
-          onNewTerminal={props.onNewTerminal}
-          onOpenProject={props.onOpenProject}
-          onOpenNewTab={props.onOpenNewTab}
-        />
-      )}
+      {!right && places}
       <BrowseList
         {...props}
         loading={props.pending !== 'none'}
@@ -513,6 +527,7 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
         message={message}
         onVisibleFolders={onVisibleFolders}
       />
+      {right && places}
       {props.previewVisible && (
         <aside className="browse-preview-slot" aria-label="File preview">
           {props.preview}
diff --git a/src/renderer/src/components/browse/browse.css b/src/renderer/src/components/browse/browse.css
index ca9ed128..c319973c 100644
--- a/src/renderer/src/components/browse/browse.css
+++ b/src/renderer/src/components/browse/browse.css
@@ -85,6 +85,52 @@
   pointer-events: none;
   animation-name: p-peek-out-left;
 }
+/* SIDEBAR POSITION, RIGHT (#304; owner, 2026-10-07: "when the sidebar goes on
+   the right, the preview menu and button to open it would have to go on the
+   left"). The grid mirrors: preview, list, places. Three columns always, the
+   preview's at 0px while it is shut, so its slide tweens one column as the
+   left side's does; the places column keeps its own variable, so hiding and
+   sliding it are the same rules as on the left. Every edge, peek and freeze
+   below is the left side's rule turned round. */
+.folder-browser[data-side='right'] {
+  grid-template-columns: 0px minmax(0, 1fr) var(--browse-places-width);
+}
+.folder-browser[data-side='right'][data-preview] {
+  grid-template-columns: var(--browse-preview-width, clamp(280px, 40%, 720px)) minmax(0, 1fr) var(
+      --browse-places-width
+    );
+}
+.folder-browser[data-side='right'] > .browse-places {
+  grid-column: 3;
+  border-right: 0;
+  border-left: 1px solid var(--p-divider);
+}
+.folder-browser[data-side='right'] > .browse-preview-slot {
+  grid-column: 1;
+  border-left: 0;
+  border-right: 1px solid var(--p-divider);
+}
+.folder-browser[data-side='right'] > .browse-status {
+  grid-column: 1 / 3;
+}
+/* Mid-slide the contents keep their open width against the WINDOW's edge, so
+   the panel is wiped from its inner side, as the left one is. */
+.folder-browser[data-side='right'][data-places-sliding] .browse-places {
+  align-items: flex-end;
+}
+.folder-browser[data-side='right'][data-places-peek] .browse-places {
+  /* Out of the grid, as on the left: an absolute box in a grid AREA would
+     measure its top from that area, not from the browser. */
+  grid-column: auto;
+  grid-row: auto;
+  left: auto;
+  right: 0;
+  box-shadow: -10px 0 28px -8px rgb(0 0 0 / 0.45);
+  animation-name: p-peek-in-right;
+}
+.folder-browser[data-side='right'][data-places-peek='out'] .browse-places {
+  animation-name: p-peek-out-right;
+}
 .browse-places-peekhead {
   display: flex;
   justify-content: flex-end;
diff --git a/src/renderer/src/components/browse/types.ts b/src/renderer/src/components/browse/types.ts
index 3d307f06..22f526a7 100644
--- a/src/renderer/src/components/browse/types.ts
+++ b/src/renderer/src/components/browse/types.ts
@@ -59,6 +59,9 @@ export interface FolderBrowserProps {
   /** THE COLLAPSED PANEL PEEKS (#250): 'in' while the hidden places panel is
    *  out OVER the list, 'out' for its slide away. */
   placesPeek?: 'in' | 'out' | null
+  /** SIDEBAR POSITION (#304): the edge the places panel sits on. On the
+   *  right, the preview pane and its toggle take the left. */
+  side?: 'left' | 'right'
   /** The peeking panel's own toggle: keep it open. */
   onPinPlaces?: () => void
   /** A place or a pin was picked from the peeking panel: the peek is over. */
diff --git a/src/renderer/src/components/browse/workspace.css b/src/renderer/src/components/browse/workspace.css
index e60b532b..70968956 100644
--- a/src/renderer/src/components/browse/workspace.css
+++ b/src/renderer/src/components/browse/workspace.css
@@ -63,10 +63,16 @@
   top: 48px;
   bottom: 26px;
 }
+/* SIDEBAR POSITION, RIGHT (#304): each handle is its left twin turned round,
+   on the same side of the same edge, its line against the edge. */
 .explorer-resize-places.is-right {
   left: auto;
   right: var(--explorer-places-width);
-  transform: translateX(100%);
+}
+.explorer-resize.is-right::after,
+.explorer-resize.is-left::after {
+  left: auto;
+  right: 0;
 }
 .explorer-resize-preview {
   top: 48px;
@@ -74,6 +80,11 @@
   right: var(--browse-preview-width);
   transform: translateX(100%);
 }
+.explorer-resize-preview.is-left {
+  right: auto;
+  left: var(--browse-preview-width);
+  transform: translateX(-100%);
+}
 .browse-viewer-places > .browse-places {
   width: 100%;
 }
@@ -91,6 +102,13 @@
   width: var(--browse-preview-width);
   border-left: 1px solid var(--p-divider);
 }
+/* With the sidebar on the right the preview is on the left (#304). */
+.browse-workspace[data-sidebar-side='right'] [data-browse-preview] {
+  right: auto;
+  left: 0;
+  border-left: 0;
+  border-right: 1px solid var(--p-divider);
+}
 /* The preview pane slides open and shut on its toggle (#207, owner,
    2026-09-23), at the places panel's pace: the list's grid column, the viewer
    laid over the slot and its action bar all tween the same width at once.
@@ -112,6 +130,14 @@
   width: var(--browse-preview-frozen, 100%);
   flex: none;
 }
+/* On the left the contents ride the pane's inner edge, its right. */
+.browse-workspace[data-sidebar-side='right'][data-preview-sliding] [data-browse-preview] {
+  justify-content: flex-end;
+}
+.browse-workspace[data-sidebar-side='right'][data-preview-sliding] [data-browse-preview] > * {
+  left: auto;
+  right: 0;
+}
 /* A TEXT PREVIEW STARTS ON THE COLUMN HEADER'S LINE (#283; owner, 2026-10-04:
    "the position of the sorting bar with name, type, size etc. that's the
    height I want the txt files to start at"): the first line is centred in
diff --git a/src/renderer/src/components/settings/ExplorerPage.tsx b/src/renderer/src/components/settings/ExplorerPage.tsx
index b0ba85a3..1bb7c8ee 100644
--- a/src/renderer/src/components/settings/ExplorerPage.tsx
+++ b/src/renderer/src/components/settings/ExplorerPage.tsx
@@ -8,6 +8,8 @@ import { setRememberFolders, useRememberFolders } from '../../lib/listingCachePr
 import { setNewTabMode, useNewTabFolder, useNewTabMode } from '../../lib/newTabPrefs'
 import { setOpenMode, useOpenMode, type OpenMode } from '../../lib/openPrefs'
 import { setRememberTabs, useRememberTabs } from '../../lib/tabRestorePrefs'
+import { setExplorerSide, useExplorerSide, type ExplorerSide } from '../../lib/explorerSidePrefs'
+import { TREE_SIDES } from '../../lib/treePrefs'
 import { visitedDirectories } from '../../lib/visitedDirectories'
 import { APP_SECTIONS, appOpt } from './appOptions'
 import { iconPath } from './icons'
@@ -28,8 +30,16 @@ const row = (id: string): { icon: string; label: string; sub: string } => {
 function LayoutSection(): JSX.Element {
   const size = useExplorerSize()
   const drives = useDriveStyle()
+  const side = useExplorerSide()
   return (
     <SettingsSection id="layout" title={APP_SECTIONS.layout}>
+      {/* THE EXPLORER'S OWN SIDEBAR POSITION (#304; owner, 2026-10-07: "No,
+          it should be two settings, one on the project tab and one on the
+          explorer tab"). It moves the places panel; on the right the preview
+          pane takes the left. The project tree's row is on Project settings. */}
+      <SettingRow id="explorer-side" {...row('explorer-side')}>
+        <Segmented value={side} onChange={(v) => setExplorerSide(v as ExplorerSide)} options={TREE_SIDES} />
+      </SettingRow>
       {/* The Explorer's rows alone (owner, 2026-10-03): the tree and the rest
           of the app keep Font size. */}
       <SettingRow id="explorer-size" {...row('explorer-size')}>
diff --git a/src/renderer/src/components/settings/ProjectPage.tsx b/src/renderer/src/components/settings/ProjectPage.tsx
index a65a2851..3fcc7c98 100644
--- a/src/renderer/src/components/settings/ProjectPage.tsx
+++ b/src/renderer/src/components/settings/ProjectPage.tsx
@@ -11,7 +11,10 @@ import { iconPath } from './icons'
 // should be in a tab called project settings not in explorer"). The rows only
 // a project tab uses: the side its file tree sits on, and what a folder
 // opened as a project shows first. Folder for new tabs stays on Explorer,
-// since the + and Ctrl+T open an Explorer tab.
+// since the + and Ctrl+T open an Explorer tab. Sidebar position here moves the
+// project tree only; the Explorer has its own row (#304; owner, 2026-10-07:
+// "No, it should be two settings, one on the project tab and one on the
+// explorer tab").
 
 const row = (id: string): { icon: string; label: string; sub: string } => {
   const o = appOpt(id)
diff --git a/src/renderer/src/components/settings/appOptions.test.ts b/src/renderer/src/components/settings/appOptions.test.ts
index e8a8a0cf..b63ce691 100644
--- a/src/renderer/src/components/settings/appOptions.test.ts
+++ b/src/renderer/src/components/settings/appOptions.test.ts
@@ -56,6 +56,7 @@ describe("Prism's own settings rows", () => {
         "tab-width=prism.window.tabWidth",
         "c-edges=prism.style.draft",
         "c-corners=prism.style.draft",
+        "explorer-side=prism.explorer.side",
         "explorer-size=prism.explorer.size",
         "drive-style=prism.sidebar.driveStyle",
         "newtab-mode=prism.newtab.mode+prism.newtab.folder",
@@ -119,6 +120,10 @@ describe('Find a setting', () => {
     expect(at['win-e-shortcut']).toBe('explorer/Windows')
     expect(at['tree-side']).toBe('project/Project tabs')
     expect(at['newtab-show']).toBe('project/Project tabs')
+    // Two Sidebar positions (#304; owner, 2026-10-07: "two settings, one on
+    // the project tab and one on the explorer tab"), each on its own page.
+    expect(at['explorer-side']).toBe('explorer/Layout')
+    expect(at['explorer-size']).toBe('explorer/Layout')
     expect(at['newtab-mode']).toBe('explorer/Opening things')
     expect(at['transport-bg']).toBe('media/Behind the controls/progress')
     expect(at['viz-glow']).toBe('media/Visualizer colour/visualizer')
diff --git a/src/renderer/src/components/settings/appOptions.ts b/src/renderer/src/components/settings/appOptions.ts
index a8e7c29a..b3ab63df 100644
--- a/src/renderer/src/components/settings/appOptions.ts
+++ b/src/renderer/src/components/settings/appOptions.ts
@@ -76,6 +76,7 @@ export const APP_OPTIONS: readonly AppOption[] = [
   { id: 'tab-width', label: 'Tab width', sub: 'Sized to the name, or all equal.', section: 'window', page: 'appearance', icon: 'tabs', keywords: 'size wide narrow equal fixed dynamic', store: ['prism.window.tabWidth'] },
   { id: 'c-edges', label: 'Panel edges', sub: 'Lines between panels and around the window.', section: 'window', page: 'appearance', icon: 'edges', keywords: 'border lines hairline outline faint strong', store: DRAFT },
   { id: 'c-corners', label: 'Corner roundness', sub: 'How round the larger surfaces are.', section: 'window', page: 'appearance', icon: 'corners', keywords: 'radius square soft round', store: DRAFT },
+  { id: 'explorer-side', label: 'Sidebar position', sub: 'The side the places panel sits on.', section: 'layout', page: 'explorer', icon: 'sidebar', keywords: 'left right side places quick access panel preview explorer', store: ['prism.explorer.side'] },
   { id: 'explorer-size', label: 'Explorer row size', sub: 'Row height, with text and icons.', section: 'layout', page: 'explorer', icon: 'rows', keywords: 'small medium large density compact', store: ['prism.explorer.size'] },
   { id: 'drive-style', label: 'Drive style', sub: 'How drives show in the sidebar.', section: 'layout', page: 'explorer', icon: 'drive', keywords: 'disk this pc space usage free full tiles ring gauge meter bar', store: ['prism.sidebar.driveStyle'] },
   { id: 'newtab-mode', label: 'Folder for new tabs', sub: 'Where a new tab starts.', section: 'opening', page: 'explorer', icon: 'newtab', keywords: 'home directory start ask chosen', store: ['prism.newtab.mode', 'prism.newtab.folder'] },
@@ -85,7 +86,7 @@ export const APP_OPTIONS: readonly AppOption[] = [
   { id: 'win-e-shortcut', label: 'Open in place of File Explorer', sub: 'A small helper starts with Windows.', section: 'windows', page: 'explorer', icon: 'win', keywords: 'shortcut replace file explorer hotkey', store: 'windows' },
   { id: 'explorer-verb', label: 'Add to the Explorer menu', sub: 'Open files and folders in Prism.', section: 'windows', page: 'explorer', icon: 'menu', keywords: 'context menu right click open with', store: 'windows' },
   { id: 'default-apps', label: 'Default app for file types', sub: 'Windows keeps this choice.', section: 'windows', page: 'explorer', icon: 'filecheck', keywords: 'associations default viewer open with', store: 'windows' },
-  { id: 'tree-side', label: 'Sidebar position', sub: 'The side the file tree sits on.', section: 'project', page: 'project', icon: 'sidebar', keywords: 'left right tree panel', store: ['prism.tree.side'] },
+  { id: 'tree-side', label: 'Sidebar position', sub: 'The side the file tree sits on.', section: 'project', page: 'project', icon: 'sidebar', keywords: 'left right tree panel project', store: ['prism.tree.side'] },
   { id: 'newtab-show', label: 'First view of a new project', sub: 'What a folder opened as a project shows.', section: 'project', page: 'project', icon: 'project', keywords: 'project terminal browser first file', store: ['prism.newtab.show'] },
   { id: 'viz-style', label: 'Visualizer style', sub: '', section: 'viz-style', page: 'media', view: 'visualizer', icon: 'media', keywords: 'music audio shape bars halo preset', store: ['prism.viz.style', 'prism.viz.presets'] },
   { id: 'viz-colour', label: 'Visualizer colour', sub: '', section: 'viz-colour', page: 'media', view: 'visualizer', icon: 'droplet', keywords: 'color solid gradient palette', store: ['prism.viz.theme'] },
diff --git a/src/renderer/src/components/settings/settingsIndex.ts b/src/renderer/src/components/settings/settingsIndex.ts
index 51d7acb8..eb351271 100644
--- a/src/renderer/src/components/settings/settingsIndex.ts
+++ b/src/renderer/src/components/settings/settingsIndex.ts
@@ -44,7 +44,7 @@ const PAGE_OF: Record<SettingsSectionId, AppPageId> = {
 export const ROW_ORDER = [
   'style-theme', 'see-through', 'theme-edits', 'c-bg', 'c-chrome', 'c-accent', 'c-selection', 'c-text', 'c-folder-icon',
   'c-font', 'tree-size', 'title-bar', 'tab-width', 'c-edges', 'c-corners',
-  'explorer-size', 'drive-style', 'newtab-mode', 'open-external',
+  'explorer-side', 'explorer-size', 'drive-style', 'newtab-mode', 'open-external',
   'remember-tabs', 'remember-folders', 'win-e-shortcut', 'explorer-verb', 'default-apps',
   'tree-side', 'newtab-show',
   'term-shell', 'term-font-family', 'term-font', 'term-theme', 'term-acrylic',
diff --git a/src/renderer/src/lib/explorerSidePrefs.test.ts b/src/renderer/src/lib/explorerSidePrefs.test.ts
new file mode 100644
index 00000000..1edd7248
--- /dev/null
+++ b/src/renderer/src/lib/explorerSidePrefs.test.ts
@@ -0,0 +1,29 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { explorerSide, explorerSideOf, reloadExplorerSide, setExplorerSide } from './explorerSidePrefs'
+
+// Two Sidebar positions (#304; owner, 2026-10-07: "No, it should be two
+// settings, one on the project tab and one on the explorer tab").
+describe("the Explorer's sidebar position", () => {
+  beforeEach(() => {
+    localStorage.clear()
+    reloadExplorerSide()
+  })
+
+  it('is Left until somebody chooses', () => {
+    expect(explorerSide()).toBe('left')
+  })
+
+  it('reads anything but Right as Left', () => {
+    expect(explorerSideOf(null)).toBe('left')
+    expect(explorerSideOf('middle')).toBe('left')
+    expect(explorerSideOf('right')).toBe('right')
+  })
+
+  it('is its own key, and leaves the project tree alone', () => {
+    setExplorerSide('right')
+    expect(localStorage.getItem('prism.explorer.side')).toBe('right')
+    expect(localStorage.getItem('prism.tree.side')).toBeNull()
+    reloadExplorerSide()
+    expect(explorerSide()).toBe('right')
+  })
+})
diff --git a/src/renderer/src/lib/explorerSidePrefs.ts b/src/renderer/src/lib/explorerSidePrefs.ts
new file mode 100644
index 00000000..d2c90125
--- /dev/null
+++ b/src/renderer/src/lib/explorerSidePrefs.ts
@@ -0,0 +1,59 @@
+import { useSyncExternalStore } from 'react'
+import type { TreeSide } from './treePrefs'
+
+// THE EXPLORER'S SIDEBAR POSITION, ITS OWN SETTING (#304; owner, 2026-10-07,
+// after testing one shared row: "No, it should be two settings, one on the
+// project tab and one on the explorer tab"). Settings > Explorer > Layout >
+// Sidebar position. It moves the Explorer tab's places panel; the preview
+// pane and its toggle take the other side. The project tree keeps its own
+// row on Project settings (`prism.tree.side`, treePrefs.ts), and neither
+// moves the other.
+
+export type ExplorerSide = TreeSide
+
+const KEY = 'prism.explorer.side'
+
+/** A stored side, made safe: anything but 'right' reads as Left. */
+export function explorerSideOf(raw: unknown): ExplorerSide {
+  return raw === 'right' ? 'right' : 'left'
+}
+
+function load(): ExplorerSide {
+  try {
+    return explorerSideOf(localStorage.getItem(KEY))
+  } catch {
+    return 'left'
+  }
+}
+
+let side: ExplorerSide = load()
+const listeners = new Set<() => void>()
+
+export function setExplorerSide(s: ExplorerSide): void {
+  side = explorerSideOf(s)
+  try {
+    localStorage.setItem(KEY, side)
+  } catch {
+    /* no storage: it lasts the session */
+  }
+  listeners.forEach((l) => l())
+}
+
+export function explorerSide(): ExplorerSide {
+  return side
+}
+
+export function useExplorerSide(): ExplorerSide {
+  return useSyncExternalStore(
+    (l) => {
+      listeners.add(l)
+      return () => listeners.delete(l)
+    },
+    () => side
+  )
+}
+
+/** For tests: read the store again, as a fresh launch would. */
+export function reloadExplorerSide(): void {
+  side = load()
+}
diff --git a/tools/e2e/run.mjs b/tools/e2e/run.mjs
index 036981dc..522a371c 100644
--- a/tools/e2e/run.mjs
+++ b/tools/e2e/run.mjs
@@ -5101,7 +5101,7 @@ async function tabsScenario(fixtures) {
 const SETTINGS_PAGE_OF = {
   'style-theme': 'appearance', 'see-through': 'appearance', 'theme-edits': 'appearance', 'c-bg': 'appearance', 'c-accent': 'appearance', 'c-font': 'appearance',
   'tree-size': 'appearance', 'title-bar': 'appearance', 'tab-width': 'appearance', 'c-edges': 'appearance', 'c-corners': 'appearance',
-  'tree-side': 'project', 'explorer-size': 'explorer', 'drive-style': 'explorer', 'newtab-mode': 'explorer', 'newtab-show': 'project',
+  'explorer-side': 'explorer', 'tree-side': 'project', 'explorer-size': 'explorer', 'drive-style': 'explorer', 'newtab-mode': 'explorer', 'newtab-show': 'project',
   'open-external': 'explorer', 'remember-tabs': 'explorer', 'remember-folders': 'explorer', 'explorer-verb': 'explorer', 'default-apps': 'explorer',
   'term-shell': 'terminal', 'term-theme': 'terminal', 'agent-indicator': 'agents', 'agent-color': 'agents',
   'dictation-enabled': 'dictation', 'transport-bg': 'media', 'app-version': 'about'
@@ -14522,6 +14522,14 @@ async function settingsSearchScenario(fixtures) {
       if ((await find.inputValue()) !== '') misses.push(`${id}: the field kept its text`)
     }
     ok(misses.length === 0, `every row is found by its label and opened (${JSON.stringify(misses)})`)
+    // TWO SIDEBAR POSITIONS (#304; owner, 2026-10-07: "two settings, one on
+    // the project tab and one on the explorer tab"): one search finds both.
+    await find.fill('sidebar position')
+    ok(
+      await until(async () => (await win.locator('[data-settings-page] [role="option"][data-hit="explorer-side"]').count()) === 1 && (await win.locator('[data-settings-page] [role="option"][data-hit="tree-side"]').count()) === 1, 3000, 30),
+      'Sidebar position finds the Explorer row and the project row'
+    )
+    await find.fill('')
     // KEYBOARD ONLY: the field, Down, Enter, and the control has the focus.
     await find.focus()
     await win.keyboard.type('explorer menu')
@@ -14593,6 +14601,62 @@ async function settingsSearchScenario(fixtures) {
   }
 }
 
+/** The coats under a box (#294): at points along its middle row (and one
+ *  lower down for a tall box) where nothing carrying text is on top, every box
+ *  from the top of the stack to the root, background alphas composited. The
+ *  worst point is returned, with the coats that made it. Shared by
+ *  `seeThrough` and `explorerSide` (#304). */
+const coatsUnder = (win, sel, at) =>
+  win.evaluate(([q, y0]) => {
+    const el = document.querySelector(q)
+    if (!el) return null
+    const alphaOf = (c) => {
+      if (!c || c === 'transparent') return 0
+      const v = (c.match(/[\d.]+/g) ?? []).map(Number)
+      return v.length > 3 ? v[3] : 1
+    }
+    const r = el.getBoundingClientRect()
+    const rows = y0 !== null ? [r.top + y0] : r.height > 120 ? [r.top + 16, r.top + r.height * 0.5, r.bottom - 24] : [r.top + r.height / 2]
+    let worst = null
+    for (const y of rows)
+      for (let x = r.left + 6; x < r.right - 6; x += 9) {
+        const stack = document.elementsFromPoint(x, y)
+        if (!stack.length || !(stack[0] === el || el.contains(stack[0]))) continue
+        const top = stack[0]
+        if (top !== el && [...top.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())) continue
+        // The file itself (a picture, a PDF page, a line of code) and a
+        // control (the address field, the transport) are not grounds. A
+        // film's box is measured: its letterbox is the pane's ground. A
+        // CARD (the archive's member list) is a flat panel, like a menu.
+        if (top.closest('img, canvas, svg, button, input, .browse-field, [data-page], [data-scrub], [data-transport-row], .p-sheet, .cm-line, .cm-gutterElement, [class~="bg-[var(--p-side-flat)]"]')) continue
+        let clear = 1
+        const coats = []
+        for (const b of stack) {
+          const a = alphaOf(getComputedStyle(b).backgroundColor)
+          if (a > 0.01) {
+            clear *= 1 - a
+            const cls = typeof b.className === 'string' ? b.className.trim().split(/\s+/).filter((c) => !c.includes('[')).slice(0, 3).join('.') : ''
+            coats.push(`${b.tagName.toLowerCase()}${cls ? '.' + cls : ''}@${a.toFixed(2)}`)
+          }
+        }
+        const total = 1 - clear
+        if (!worst || total > worst.total) worst = { total, x: Math.round(x), y: Math.round(y), coats }
+      }
+    return worst
+  }, [sel, at ?? null])
+
+/** The alpha of the window's see-through ground, --p-bg. */
+const groundAlphaOf = (win) =>
+  win.evaluate(() => {
+    const probe = document.createElement('span')
+    probe.style.backgroundColor = 'var(--p-bg)'
+    document.body.appendChild(probe)
+    const c = getComputedStyle(probe).backgroundColor
+    probe.remove()
+    const v = (c.match(/[\d.]+/g) ?? []).map(Number)
+    return v.length > 3 ? v[3] : 1
+  })
+
 /**
  * A SEE-THROUGH STYLE IS SEE-THROUGH EVERYWHERE (#294; owner, 2026-10-06, of
  * Prism on a glass style: "the top bar and settings sidebar don't follow the
@@ -14642,58 +14706,9 @@ async function seeThroughScenario(fixtures) {
   }
   const { app, win } = await launch(join(dir, 'notes.md'))
   let styleBefore = null
-  /** The coats under a box: at points along its middle row (and one lower
-   *  down for a tall box) where nothing carrying text is on top, every box
-   *  from the top of the stack to the root, background alphas composited.
-   *  The worst point is returned, with the coats that made it. */
-  const coatsOf = (sel, at) =>
-    win.evaluate(([q, y0]) => {
-      const el = document.querySelector(q)
-      if (!el) return null
-      const alphaOf = (c) => {
-        if (!c || c === 'transparent') return 0
-        const v = (c.match(/[\d.]+/g) ?? []).map(Number)
-        return v.length > 3 ? v[3] : 1
-      }
-      const r = el.getBoundingClientRect()
-      const rows = y0 !== null ? [r.top + y0] : r.height > 120 ? [r.top + 16, r.top + r.height * 0.5, r.bottom - 24] : [r.top + r.height / 2]
-      let worst = null
-      for (const y of rows)
-        for (let x = r.left + 6; x < r.right - 6; x += 9) {
-          const stack = document.elementsFromPoint(x, y)
-          if (!stack.length || !(stack[0] === el || el.contains(stack[0]))) continue
-          const top = stack[0]
-          if (top !== el && [...top.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())) continue
-          // The file itself (a picture, a PDF page, a line of code) and a
-          // control (the address field, the transport) are not grounds. A
-          // film's box is measured: its letterbox is the pane's ground. A
-          // CARD (the archive's member list) is a flat panel, like a menu.
-          if (top.closest('img, canvas, svg, button, input, .browse-field, [data-page], [data-scrub], [data-transport-row], .p-sheet, .cm-line, .cm-gutterElement, [class~="bg-[var(--p-side-flat)]"]')) continue
-          let clear = 1
-          const coats = []
-          for (const b of stack) {
-            const a = alphaOf(getComputedStyle(b).backgroundColor)
-            if (a > 0.01) {
-              clear *= 1 - a
-              const cls = typeof b.className === 'string' ? b.className.trim().split(/\s+/).filter((c) => !c.includes('[')).slice(0, 3).join('.') : ''
-              coats.push(`${b.tagName.toLowerCase()}${cls ? '.' + cls : ''}@${a.toFixed(2)}`)
-            }
-          }
-          const total = 1 - clear
-          if (!worst || total > worst.total) worst = { total, x: Math.round(x), y: Math.round(y), coats }
-        }
-      return worst
-    }, [sel, at ?? null])
-  const groundAlpha = () =>
-    win.evaluate(() => {
-      const probe = document.createElement('span')
-      probe.style.backgroundColor = 'var(--p-bg)'
-      document.body.appendChild(probe)
-      const c = getComputedStyle(probe).backgroundColor
-      probe.remove()
-      const v = (c.match(/[\d.]+/g) ?? []).map(Number)
-      return v.length > 3 ? v[3] : 1
-    })
+  /** The coats under a box (`coatsUnder`, above). */
+  const coatsOf = (sel, at) => coatsUnder(win, sel, at)
+  const groundAlpha = () => groundAlphaOf(win)
   const oneCoat = async (label, sel, want, at) => {
     let m = null
     await until(async () => {
@@ -15055,6 +15070,329 @@ async function previewClearsScenario(fixtures) {
   }
 }
 
+/**
+ * SIDEBAR POSITION MOVES THE EXPLORER'S SIDEBAR (#304; owner, 2026-10-07: "fix
+ * the setting in Explorer for the sidebar where you can put it on the right
+ * side or the left side? I think that's just an empty setting for now ... when
+ * the sidebar goes on the right, the preview menu and button to open it would
+ * have to go on the left"), AND IT IS TWO SETTINGS (owner, the same day, after
+ * testing one shared row: "No, it should be two settings, one on the project
+ * tab and one on the explorer tab"). Explorer > Layout's row (`explorer-side`)
+ * moves the places and leaves a project's tree where it is; Project settings'
+ * row (`tree-side`) moves the tree and leaves the Explorer where it is. On the
+ * right: the places against the window's right edge, the preview pane against
+ * its left, the preview toggle before the history buttons; the toggle, both
+ * grips, the hide, the peek and the pin all work turned round, one coat of a
+ * see-through ground everywhere, and Left again gives back every box exactly.
+ * Both choices outlive a restart.
+ */
+async function explorerSideScenario(fixtures) {
+  console.log('explorer sidebar side (#304)')
+  const dir = join(fixtures, 'explorerside')
+  rmSync(dir, { recursive: true, force: true })
+  mkdirSync(join(dir, 'sub'), { recursive: true })
+  writeFileSync(join(dir, 'notes.txt'), Array.from({ length: 30 }, (_, i) => `line ${i + 1} of the notes`).join('\n'))
+  writeFileSync(join(dir, 'other.txt'), 'other\n')
+  let { app, win } = await launch(join(dir, 'notes.txt'))
+  let widthsBefore = null
+  let styleBefore
+  const browser = '[data-testid="folder-browser"]'
+  const boxes = () =>
+    win.evaluate((b) => {
+      const at = (q) => {
+        const el = document.querySelector(q)
+        if (!el || !el.getClientRects().length) return null
+        const r = el.getBoundingClientRect()
+        return { x: Math.round(r.left), r: Math.round(r.right), y: Math.round(r.top), w: Math.round(r.width), h: Math.round(r.height) }
+      }
+      return {
+        side: document.querySelector(b)?.getAttribute('data-side') ?? 'left',
+        work: at('.browse-workspace'),
+        places: at(`${b} .browse-places`),
+        list: at(`${b} .browse-list-area`),
+        pane: at('[data-browse-preview]'),
+        toggle: at(`${b} [aria-label="Preview pane"]`),
+        back: at(`${b} [aria-label="Back"]`),
+        field: at(`${b} .browse-path`),
+        search: at('[data-testid="browse-search-button"]'),
+        status: at(`${b} .browse-status`),
+        placesGrip: at('.explorer-resize-places'),
+        previewGrip: at('.explorer-resize-preview')
+      }
+    }, browser)
+  const say = (m) => JSON.stringify(m)
+  const settle = () => sleep(500)
+  const toExplorer = async () => {
+    await win.locator('[role="tablist"] [data-pinned] [role="tab"]').click()
+    await win.waitForSelector(`${browser} .browse-row`, { timeout: 10000 })
+  }
+  const pick = async (name) => {
+    await zipRow(win, name).click()
+    ok(
+      await until(() => win.evaluate(() => !!document.querySelector('[data-browse-preview]')?.textContent?.includes('line 1 of the notes')), 10000),
+      `${name} previews`
+    )
+    await win.mouse.move(400, 300)
+    await settle()
+  }
+  const toggle = () => win.locator(`${browser} [aria-label="Preview pane"]`)
+  const placesShown = async () => (await win.locator(`${browser} .browse-places`).count()) === 1
+  const drag = async (sel, dx) => {
+    const g = await win.locator(sel).boundingBox()
+    const x = g.x + g.width / 2
+    const y = g.y + g.height / 2
+    await win.mouse.move(x, y)
+    await win.mouse.down()
+    await win.mouse.move(x + dx / 2, y, { steps: 3 })
+    await win.mouse.move(x + dx, y, { steps: 3 })
+    await win.mouse.up()
+    await settle()
+  }
+  const project = () =>
+    win.evaluate(() => {
+      const at = (el) => {
+        if (!el || !el.getClientRects().length) return null
+        const r = el.getBoundingClientRect()
+        return { x: Math.round(r.left), r: Math.round(r.right), w: Math.round(r.width) }
+      }
+      return {
+        work: at(document.querySelector('.browse-workspace')),
+        tree: at(document.querySelector('[data-project-sidebar]')),
+        viewer: at(document.querySelector('[data-workspace-viewer]'))
+      }
+    })
+  try {
+    widthsBefore = await win.evaluate(() => localStorage.getItem('prism.explorer.widths'))
+    // 0. TWO ROWS, one per page: the Explorer's first in its Layout, the
+    // project tree's first in Project settings, each only there.
+    await gotoPref(win, 'explorer-side')
+    const firstInLayout = await win.evaluate(() => document.querySelector('[data-settings-section="layout"] [data-pref]')?.getAttribute('data-pref'))
+    ok(firstInLayout === 'explorer-side', `the Explorer's Sidebar position is the first row of its Layout (${firstInLayout})`)
+    ok((await win.locator('[data-pref="tree-side"]').count()) === 0, 'and the Explorer page has no project tree row')
+    const explorerSub = (await win.locator('[data-pref="explorer-side"]').innerText()).replace(/\s+/g, ' ')
+    ok(/Sidebar position/.test(explorerSub) && /places panel/.test(explorerSub), `it names the places panel (${explorerSub})`)
+    await settingsPage(win, 'project')
+    await win.locator('[data-pref="tree-side"]').waitFor({ timeout: 10000 })
+    const firstInProject = await win.evaluate(() => document.querySelector('[data-settings-section="project"] [data-pref]')?.getAttribute('data-pref'))
+    ok(firstInProject === 'tree-side', `the project tree's Sidebar position is back on Project settings, first (${firstInProject})`)
+    ok((await win.locator('[data-pref="explorer-side"]').count()) === 0, 'and Project settings has no Explorer row')
+    const treeSub = (await win.locator('[data-pref="tree-side"]').innerText()).replace(/\s+/g, ' ')
+    ok(/Sidebar position/.test(treeSub) && /file tree/.test(treeSub), `it names the file tree (${treeSub})`)
+    await win.click('[aria-label="Settings"]')
+    await sleep(400)
+    await pickStyleSegment(win, 'explorer-side', 'Left')
+    await pickStyleSegment(win, 'tree-side', 'Left')
+
+    // 1. LEFT, as it always was: the project tab and the Explorer.
+    await win.locator('[role="tablist"] [role="tab"]').last().click()
+    await win.waitForSelector('[data-project-sidebar]', { timeout: 10000 })
+    await settle()
+    const projLeft = await project()
+    ok(!!projLeft.tree && projLeft.tree.x === projLeft.work.x, `Left: the project tree is at the left edge (${say(projLeft)})`)
+    await explorerAt(win, dir)
+    if (!(await placesShown())) await win.click('[data-panel-toggle]')
+    ok(await until(placesShown, 4000), 'the places are shown')
+    if ((await toggle().getAttribute('aria-pressed')) !== 'true') await toggle().click()
+    await pick('notes.txt')
+    // The panels at their own widths, so a later scenario starts where it did.
+    await win.locator('.explorer-resize-places').dblclick()
+    await win.locator('.explorer-resize-preview').dblclick()
+    await win.mouse.move(400, 300)
+    await settle()
+    const left = await boxes()
+    console.log(`  left: ${say(left)}`)
+    ok(left.side === 'left' && left.places?.x === left.work.x, 'Left: the places are at the left edge')
+    ok(left.pane?.r === left.work.r && left.pane.x >= left.list.r - 1, 'Left: the preview is at the right edge, right of the list')
+    ok(left.toggle.x >= left.field.r && left.toggle.r <= left.search.x, 'Left: the preview toggle is after the address, before search')
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-left.png') })
+
+    // 2. THE EXPLORER'S RIGHT.
+    await pickStyleSegment(win, 'explorer-side', 'Right')
+    ok((await win.evaluate(() => [localStorage.getItem('prism.explorer.side'), localStorage.getItem('prism.tree.side')])).join('/') === 'right/left', 'the Explorer row stores its own key and leaves the tree\'s')
+    await toExplorer()
+    await pick('notes.txt')
+    const right = await boxes()
+    console.log(`  right: ${say(right)}`)
+    ok(right.side === 'right', 'Right: the browser says so')
+    ok(right.places?.r === right.work.r, `Right: the places are at the window's right edge (${say(right.places)} in ${say(right.work)})`)
+    ok(right.pane?.x === right.work.x && right.pane.r <= right.list.x + 1, `Right: the preview is at the left edge, left of the list (${say(right.pane)}, list ${say(right.list)})`)
+    ok(right.list.r <= right.places.x + 1, 'Right: the list sits between them')
+    ok(right.toggle.r <= right.back.x && right.toggle.r <= right.field.x, `Right: the preview toggle leads the address row, before Back (${say(right.toggle)} back ${say(right.back)})`)
+    ok(right.search.x >= right.field.r, 'Right: search stays at the far end')
+    ok(right.places.w === left.places.w && right.pane.w === left.pane.w && right.list.w === left.list.w, `Right: every panel keeps its width (${left.places.w}/${left.list.w}/${left.pane.w} -> ${right.places.w}/${right.list.w}/${right.pane.w})`)
+    ok(right.placesGrip?.r === right.places.x && left.placesGrip?.x === left.places.r, `the places grip is its left twin turned round (${say(left.placesGrip)} / ${say(right.placesGrip)})`)
+    ok(right.previewGrip?.r === right.pane.r && left.previewGrip?.x === left.pane.x, `the preview grip too (${say(left.previewGrip)} / ${say(right.previewGrip)})`)
+    ok(right.status.x === right.work.x && right.status.r === right.places.x, `the status line runs under the preview and the list (${say(right.status)})`)
+    for (const [scheme, style] of [['dark', 'new-void'], ['light', 'paper']]) {
+      const was = await switchStyle(win, style)
+      if (styleBefore === undefined) styleBefore = was
+      await win.mouse.move(400, 300)
+      await sleep(700)
+      await win.screenshot({ path: join(SHOTS, `explorer-side-right-${scheme}.png`) })
+    }
+
+    // 3. One coat of a see-through ground on every panel, turned round too.
+    await switchStyle(win, 'glacier')
+    await win.mouse.move(400, 300)
+    await sleep(800)
+    const want = await groundAlphaOf(win)
+    ok(want < 1, 'Glacier is a see-through style')
+    for (const [label, sel] of [
+      ['the list', '[data-testid="browse-list"]'],
+      ['the places', `${browser} .browse-places`],
+      ['the preview pane', '[data-browse-preview]'],
+      ['the status line', `${browser} .browse-status`],
+      ['the address bar', `${browser} > .browse-toolbar`]
+    ]) {
+      let m = null
+      await until(async () => {
+        m = await coatsUnder(win, sel)
+        return !!m && Math.abs(m.total - want) <= 0.02
+      }, 3000, 100)
+      ok(!!m && Math.abs(m.total - want) <= 0.02, `Right, ${label}: one coat of the see-through ground (${m ? `${m.total.toFixed(3)} of ${want.toFixed(3)}: ${m.coats.join(' + ')}` : 'not found'})`)
+    }
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-right-glass.png') })
+    await switchStyle(win, 'new-void')
+    await sleep(400)
+
+    // 4. THE TOGGLE: shut, the list reaches the left edge; open, the pane is back.
+    await toggle().click()
+    ok(await until(async () => !(await boxes()).pane, 3000, 50), 'Right: the toggle shuts the preview')
+    await settle()
+    let now = await boxes()
+    ok(now.list.x === now.work.x && now.places.r === now.work.r, `and the list reaches the left edge (${say(now.list)})`)
+    await toggle().click()
+    ok(await until(async () => !!(await boxes()).pane, 3000, 50), 'the toggle opens it again')
+    await sleep(700)
+    now = await boxes()
+    ok(now.pane.x === now.work.x && now.pane.w === right.pane.w && now.list.x === right.list.x, `at the left edge, at its width (${say(now.pane)})`)
+
+    // 5. THE GRIPS: toward the middle widens, the far side stays put.
+    await drag('.explorer-resize-places', -40)
+    now = await boxes()
+    ok(now.places.w === right.places.w + 40 && now.places.r === now.work.r, `dragging the places' grip left widens them, against the right edge (${right.places.w} -> ${now.places.w})`)
+    await win.locator('.explorer-resize-places').focus()
+    await win.keyboard.press('ArrowLeft')
+    await settle()
+    const keyed = await boxes()
+    ok(keyed.places.w === now.places.w + 16, `ArrowLeft on it widens them too (${now.places.w} -> ${keyed.places.w})`)
+    await drag('.explorer-resize-preview', 40)
+    now = await boxes()
+    ok(now.pane.w === right.pane.w + 40 && now.pane.x === now.work.x, `dragging the preview's grip right widens it, against the left edge (${right.pane.w} -> ${now.pane.w})`)
+    const saved = JSON.parse(await win.evaluate(() => localStorage.getItem('prism.explorer.widths') ?? '{}'))
+    ok(saved.places === keyed.places.w && saved.preview === now.pane.w, `and both widths are remembered (${JSON.stringify(saved)})`)
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-right-resized.png') })
+    await win.locator('.explorer-resize-places').dblclick()
+    await win.locator('.explorer-resize-preview').dblclick()
+    await win.mouse.move(400, 300)
+    await settle()
+    now = await boxes()
+    ok(now.places.w === right.places.w && now.pane.w === right.pane.w, 'a double-click gives each its own width back')
+
+    // 6. HIDDEN, the list takes the right edge; the edge peeks them over it.
+    await win.click('[data-panel-toggle]')
+    ok(await until(async () => !(await placesShown()), 3000), 'the toggle hides the places')
+    await settle()
+    const hiddenBoxes = await boxes()
+    ok(hiddenBoxes.list.r === hiddenBoxes.work.r, `and the list reaches the right edge (${say(hiddenBoxes.list)})`)
+    const edgeY = Math.round(hiddenBoxes.work.y + hiddenBoxes.work.h / 2)
+    const away = { x: Math.round(hiddenBoxes.work.x + hiddenBoxes.work.w * 0.4), y: edgeY }
+    await win.mouse.move(away.x, away.y)
+    await sleep(50)
+    await win.mouse.move(hiddenBoxes.work.r - 2, edgeY)
+    ok(
+      await until(async () => (await win.locator(`${browser}[data-places-peek="in"] .browse-places`).count()) === 1, 2000, 25),
+      'resting on the RIGHT edge brings the places out'
+    )
+    await sleep(300)
+    const peek = await boxes()
+    ok(peek.places.r === peek.work.r && Math.abs(peek.places.w - right.places.w) <= 1, `over the list at the right edge, at their own width (${say(peek.places)})`)
+    ok(JSON.stringify(peek.list) === JSON.stringify(hiddenBoxes.list), 'and the list did not move')
+    const shadow = await win.evaluate((b) => getComputedStyle(document.querySelector(`${b} .browse-places`)).boxShadow, browser)
+    ok(/-10px/.test(shadow), `the shadow falls on the list's side (${shadow})`)
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-right-peek.png') })
+    await win.mouse.move(away.x, away.y, { steps: 4 })
+    ok(await until(async () => !(await placesShown()), 2000, 25), 'they go when the pointer leaves')
+    await win.mouse.move(hiddenBoxes.work.r - 2, edgeY)
+    ok(await until(async () => (await win.locator(`${browser}[data-places-peek="in"]`).count()) === 1, 2000, 25), 'out again')
+    await sleep(300)
+    await win.locator(`${browser} [data-peek-pin]`).click()
+    ok(
+      await until(async () => (await win.locator(`${browser}[data-places-peek]`).count()) === 0 && (await placesShown()), 3000),
+      'and their pin keeps them'
+    )
+    await win.mouse.move(400, 300)
+    await settle()
+    now = await boxes()
+    ok(now.places.r === now.work.r && now.places.w === right.places.w, `pinned at the right edge (${say(now.places)})`)
+
+    // 7. THE PROJECT TAB stays put under the Explorer's Right.
+    const toProject = async () => {
+      await win.locator('[role="tablist"] [role="tab"]').last().click()
+      await win.waitForSelector('[data-project-sidebar]', { timeout: 10000 })
+      await settle()
+    }
+    await toProject()
+    const projStill = await project()
+    ok(JSON.stringify(projStill) === JSON.stringify(projLeft), `the Explorer's Right leaves the project tree at the left edge (${say(projStill)} vs ${say(projLeft)})`)
+
+    // 8. THE PROJECT'S RIGHT: the tree on the right, the file left of it.
+    await pickStyleSegment(win, 'tree-side', 'Right')
+    ok((await win.evaluate(() => [localStorage.getItem('prism.explorer.side'), localStorage.getItem('prism.tree.side')])).join('/') === 'right/right', 'the project row stores its own key')
+    await toProject()
+    const projRight = await project()
+    ok(projRight.tree?.r === projRight.work.r && projRight.viewer?.r <= projRight.tree.x + 1, `Right: the project tree is at the right edge, the file left of it (${say(projRight)})`)
+    ok(projRight.tree.w === projLeft.tree.w, 'at the width it had')
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-right-project.png') })
+
+    // 9. THE EXPLORER'S LEFT AGAIN, with the project's Right kept: every
+    // Explorer box exactly as it was, so the project row moved nothing here.
+    await pickStyleSegment(win, 'explorer-side', 'Left')
+    await toExplorer()
+    await pick('notes.txt')
+    const back = await boxes()
+    ok(JSON.stringify(back) === JSON.stringify(left), `the project's Right leaves the Explorer as it was, every box exactly (${say(back)} vs ${say(left)})`)
+    await win.screenshot({ path: join(SHOTS, 'explorer-side-left-again.png') })
+    await toProject()
+    const projKept = await project()
+    ok(projKept.tree?.r === projKept.work.r, `and the project tree is still on the right (${say(projKept)})`)
+
+    // 10. A RESTART keeps both, each its own. (Measured against the window it
+    // opens at: a restart restores the window's size, not to the pixel.)
+    await pickStyleSegment(win, 'explorer-side', 'Right')
+    await app.close()
+    await sleep(900)
+    ;({ app, win } = await launch(join(dir, 'notes.txt')))
+    ok((await win.evaluate(() => [localStorage.getItem('prism.explorer.side'), localStorage.getItem('prism.tree.side')])).join('/') === 'right/right', 'both choices are stored')
+    await explorerAt(win, dir)
+    await pick('notes.txt')
+    const again = await boxes()
+    ok(again.side === 'right' && again.places?.r === again.work.r && again.pane?.x === again.work.x, `after a restart the places are on the right and the preview on the left (${say(again)})`)
+    ok(again.toggle.r <= again.back.x, 'and the preview toggle still leads the address row')
+    await toProject()
+    const projAgain = await project()
+    ok(projAgain.tree?.r === projAgain.work.r, `and the project tree is on the right (${say(projAgain)})`)
+    await pickStyleSegment(win, 'explorer-side', 'Left')
+    await pickStyleSegment(win, 'tree-side', 'Left')
+    await toProject()
+    const projLeftAgain = await project()
+    ok(projLeftAgain.tree?.x === projLeftAgain.work.x, `the project row's Left puts the tree back at the left edge (${say(projLeftAgain)})`)
+  } finally {
+    await win
+      .evaluate((w) => {
+        localStorage.setItem('prism.tree.side', 'left')
+        localStorage.setItem('prism.explorer.side', 'left')
+        localStorage.setItem('prism.explorer.places', '1')
+        if (w === null) localStorage.removeItem('prism.explorer.widths')
+        else localStorage.setItem('prism.explorer.widths', w)
+      }, widthsBefore)
+      .catch(() => {})
+    if (styleBefore !== undefined) await switchStyle(win, styleBefore).catch(() => {})
+    await app.close().catch(() => {})
+    rmSync(dir, { recursive: true, force: true })
+  }
+}
+
 /** The labels of the open context menu, top to bottom. */
 const menuLabels = (win) =>
   win.evaluate(() =>
@@ -15452,6 +15790,7 @@ await run(sidebarGroundScenario)
 await run(rightClickSelectScenario)
 await run(columnHeadersScenario)
 await run(panelsAlignScenario)
+await run(explorerSideScenario)
 await run(downloadsDateScenario)
 await run(noLoadingEverScenario)
 await run(coldLaunchCachedScenario)