feat(view): Explorer-style view sizes with Ctrl+scroll

CLAUDE.md

@@ -27,6 +27,8 @@ options panel can only describe one target set. See `src/shared/tabs.ts`.
 **Signed-off redesign (2026-10-04):** `docs/mockups/terminal-v5/10-s2-vscode-grouped.html`, dark-only,
 strict monochrome. Rules and feedback trail: `docs/design/redesign-direction.md`.
 
+**View sizes (2026-10-05):** `docs/mockups/view-zoom/04-explorer-style.html`; spec `docs/superpowers/specs/2026-10-05-view-sizes-design.md`.
+
 **The look is designed collaboratively with the owner. Make NO visual assumptions.**
 Before building or restyling any UI, present mockups (self-contained browser HTML, like the
 RCMM Show/Hide exploration), offer options, and iterate to explicit sign-off. This covers

docs/design/redesign-direction.md

@@ -32,3 +32,6 @@ Mockup rounds live in `docs/mockups/terminal*/` (each has an `index.html` galler
   multi-selection ("Select one file to preview").
 - Wind is a reference, not a template. Avoid its signatures: the floating progress+button pill, the icon-tile
   header band, and big rounded cards of right-aligned setting rows.
+- View sizes (2026-10-05): the files view has Explorer-style sizes (Details, Tiles, Medium / Large / Extra
+  large icons), Ctrl+wheel and a View menu. Chosen: `docs/mockups/view-zoom/04-explorer-style.html`; spec
+  `docs/superpowers/specs/2026-10-05-view-sizes-design.md`.

docs/mockups/view-zoom/index.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>View Zoom Mockups</title>
+<style>
+:root{--bg:#000000;--fg1:#ededed;--fg2:#b4b4b4;--fg3:#8c8c8c;--line:#262626;--hover:#1a1a1a;
+  --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;color-scheme:dark}
+*{box-sizing:border-box;border-radius:0}
+body{margin:0;background:var(--bg);color:var(--fg2);font:13px/1.5 var(--mono);padding:32px 24px 48px}
+h1{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--fg1)}
+.lead{margin:0 0 28px;color:var(--fg3)}
+.lead b{color:var(--fg1);font-weight:600}
+section{border-top:1px solid var(--line);padding:20px 0 24px}
+h2{margin:0 0 4px;font-size:14px;font-weight:600}
+h2 a{color:var(--fg1);text-decoration:none}
+h2 a:hover{text-decoration:underline}
+section p{margin:0 0 14px;color:var(--fg3);max-width:900px}
+.row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
+.fig{display:block;color:var(--fg3);text-decoration:none;border:1px solid var(--line);background:#0a0a0a}
+.fig:hover,.fig:focus-visible{border-color:#5c5c5c;color:var(--fg1);outline:none}
+.fig img{display:block;width:100%;aspect-ratio:1440/900;object-fit:cover}
+.fig span{display:block;padding:6px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--line)}
+@media (max-width:900px){.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
+</style>
+</head>
+<body>
+<h1>Filesmith view zoom</h1>
+<p class="lead">Four concepts for resizing the files view. Each screenshot opens the live mockup at that size: <b>hold Ctrl and scroll inside the files view</b> (or Ctrl+= / Ctrl+-, Ctrl+0 resets).</p>
+<section><h2><a href="01-steps-with-toast.html#size=1">01 Steps with toast</a></h2><p>Five fixed steps from compact list to large grid; a brief toast names the size, a view dropdown at the toolbar end sets it without a wheel.</p><div class="row"><a class="fig" href="01-steps-with-toast.html#size=0"><img src="shots/01-steps-with-toast-size0.png" alt="01 Steps with toast, compact list" loading="lazy"><span>#size=0  compact list</span></a><a class="fig" href="01-steps-with-toast.html#size=1"><img src="shots/01-steps-with-toast-size1.png" alt="01 Steps with toast, list" loading="lazy"><span>#size=1  list</span></a><a class="fig" href="01-steps-with-toast.html#size=2"><img src="shots/01-steps-with-toast-size2.png" alt="01 Steps with toast, large list" loading="lazy"><span>#size=2  large list</span></a><a class="fig" href="01-steps-with-toast.html#size=3"><img src="shots/01-steps-with-toast-size3.png" alt="01 Steps with toast, grid S" loading="lazy"><span>#size=3  grid S</span></a><a class="fig" href="01-steps-with-toast.html#size=4"><img src="shots/01-steps-with-toast-size4.png" alt="01 Steps with toast, grid L" loading="lazy"><span>#size=4  grid L</span></a><a class="fig" href="01-steps-with-toast.html#size=1&menu=open"><img src="shots/01-steps-with-toast-menu.png" alt="01 Steps with toast, view menu" loading="lazy"><span>view menu</span></a></div></section><section><h2><a href="02-slider-in-toolbar.html#size=0">02 Slider in toolbar</a></h2><p>A list-to-grid slider with a size label sits in the files toolbar and always shows the current size; Ctrl+wheel snaps it between six stops.</p><div class="row"><a class="fig" href="02-slider-in-toolbar.html#size=0"><img src="shots/02-slider-in-toolbar-size0.png" alt="02 Slider in toolbar, compact list" loading="lazy"><span>#size=0  compact list</span></a><a class="fig" href="02-slider-in-toolbar.html#size=1"><img src="shots/02-slider-in-toolbar-size1.png" alt="02 Slider in toolbar, list" loading="lazy"><span>#size=1  list</span></a><a class="fig" href="02-slider-in-toolbar.html#size=2"><img src="shots/02-slider-in-toolbar-size2.png" alt="02 Slider in toolbar, large list" loading="lazy"><span>#size=2  large list</span></a><a class="fig" href="02-slider-in-toolbar.html#size=3"><img src="shots/02-slider-in-toolbar-size3.png" alt="02 Slider in toolbar, small grid" loading="lazy"><span>#size=3  small grid</span></a><a class="fig" href="02-slider-in-toolbar.html#size=4"><img src="shots/02-slider-in-toolbar-size4.png" alt="02 Slider in toolbar, grid" loading="lazy"><span>#size=4  grid</span></a><a class="fig" href="02-slider-in-toolbar.html#size=5"><img src="shots/02-slider-in-toolbar-size5.png" alt="02 Slider in toolbar, large grid" loading="lazy"><span>#size=5  large grid</span></a></div></section><section><h2><a href="03-list-grid-toggle-plus-zoom.html#size=1">03 List/Grid toggle plus zoom</a></h2><p>A List/Grid segmented toggle picks the mode; Ctrl+wheel changes density inside it (3 list sizes, 3 grid sizes) with a -/+ readout.</p><div class="row"><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=0"><img src="shots/03-list-grid-toggle-plus-zoom-size0.png" alt="03 List/Grid toggle plus zoom, list 1/3" loading="lazy"><span>#size=0  list 1/3</span></a><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=1"><img src="shots/03-list-grid-toggle-plus-zoom-size1.png" alt="03 List/Grid toggle plus zoom, list 2/3" loading="lazy"><span>#size=1  list 2/3</span></a><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=2"><img src="shots/03-list-grid-toggle-plus-zoom-size2.png" alt="03 List/Grid toggle plus zoom, list 3/3" loading="lazy"><span>#size=2  list 3/3</span></a><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=3"><img src="shots/03-list-grid-toggle-plus-zoom-size3.png" alt="03 List/Grid toggle plus zoom, grid 1/3" loading="lazy"><span>#size=3  grid 1/3</span></a><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=4"><img src="shots/03-list-grid-toggle-plus-zoom-size4.png" alt="03 List/Grid toggle plus zoom, grid 2/3" loading="lazy"><span>#size=4  grid 2/3</span></a><a class="fig" href="03-list-grid-toggle-plus-zoom.html#size=5"><img src="shots/03-list-grid-toggle-plus-zoom-size5.png" alt="03 List/Grid toggle plus zoom, grid 3/3" loading="lazy"><span>#size=5  grid 3/3</span></a></div></section><section><h2><a href="04-explorer-style.html#size=0">04 Explorer style</a></h2><p>Sizes named like Windows File Explorer (Details, Tiles, Medium, Large, Extra large icons) in a View menu with Ctrl+Shift+1..5.</p><div class="row"><a class="fig" href="04-explorer-style.html#size=0"><img src="shots/04-explorer-style-size0.png" alt="04 Explorer style, details" loading="lazy"><span>#size=0  details</span></a><a class="fig" href="04-explorer-style.html#size=1"><img src="shots/04-explorer-style-size1.png" alt="04 Explorer style, tiles" loading="lazy"><span>#size=1  tiles</span></a><a class="fig" href="04-explorer-style.html#size=2"><img src="shots/04-explorer-style-size2.png" alt="04 Explorer style, medium icons" loading="lazy"><span>#size=2  medium icons</span></a><a class="fig" href="04-explorer-style.html#size=3"><img src="shots/04-explorer-style-size3.png" alt="04 Explorer style, large icons" loading="lazy"><span>#size=3  large icons</span></a><a class="fig" href="04-explorer-style.html#size=4"><img src="shots/04-explorer-style-size4.png" alt="04 Explorer style, extra large icons" loading="lazy"><span>#size=4  extra large icons</span></a><a class="fig" href="04-explorer-style.html#size=1&menu"><img src="shots/04-explorer-style-menu.png" alt="04 Explorer style, view menu" loading="lazy"><span>view menu</span></a></div></section>
+</body>
+</html>