vite-plugin-nora 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kate Lastoskie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,26 @@
+nora bundles two third-party works. Neither is a runtime
+dependency — both are copied into source so the package installs with nothing
+but its own four deps, and so the bar looks the same with no network.
+
+--------------------------------------------------------------------------------
+Geist and Geist Mono — SIL Open Font License 1.1
+Copyright 2024 The Geist Project Authors
+https://github.com/vercel/geist-font
+
+Subset and inlined as base64 in src/client/fonts.css. The @font-face families
+are named "Nora Geist" and "Nora Geist Mono" — a namespace, not a licence
+requirement: Geist declares no Reserved Font Name, but these faces carry only
+the glyphs this UI draws, and a project loading the real Geist should never
+find our partial one shadowing it.
+
+Full licence: licenses/geist-OFL.txt
+--------------------------------------------------------------------------------
+Lucide — ISC License
+Copyright (c) 2022 Lucide Contributors
+Portions © 2013-2022 Cole Bemis (Feather, MIT)
+https://github.com/lucide-icons/lucide
+
+Ten icon paths copied verbatim into src/client/toolbar/icons.jsx.
+
+Full licence: licenses/lucide-ISC.txt
+--------------------------------------------------------------------------------

package/README.md

@@ -0,0 +1,113 @@
+# nora
+
+A floating bar that switches your app between components.
+
+Point it at a folder and every component inside is one keystroke away. No story
+files, no config, nothing to add to your app.
+
+## Install
+
+```bash
+npm i -D vite-plugin-nora
+```
+
+## Usage
+
+```bash
+npx nora                                # current directory
+npx nora ./apps/web --dir src/ui --open
+```
+
+```
+--dir <path>    folder to open on boot, relative to the project
+--port <n>      port to listen on (default 5199)
+--open          open the browser on boot
+```
+
+It boots a Vite dev server using your project's own config, so aliases,
+Tailwind, PostCSS and tsconfig paths all work.
+
+## Features
+
+- **Pick any folder** and every component in it is found
+- **⌘K** opens one picker holding both components and the folders around them
+- **Viewport presets** 375 / 768 / 1280 / 1440, or fit to the canvas
+- **Sweep** drives the frame 320→1600 and flags overflow and real breakpoints
+- **Copy findings** as text built for pasting into an AI agent
+- **Light/dark toggle** on the canvas
+- **Drag the bar** anywhere; it remembers where you left it
+- **Selection lives in the URL**, so reload and HMR keep your place
+
+## Configuration
+
+Optional. Drop a `nora.config.jsx` in your project root. It loads through Vite,
+so JSX, your aliases and CSS imports all work inside it.
+
+```jsx
+import "./src/index.css";
+import { Providers } from "./src/app/providers";
+
+export default {
+  defaultDir: "src/components",
+  wrapper: ({ children }) => <Providers>{children}</Providers>,
+  exclude: ["**/*.test.*", "**/legacy/**"],
+};
+```
+
+| Option            | What it does                                                      |
+| ----------------- | ----------------------------------------------------------------- |
+| `wrapper`         | Wraps every previewed component: providers, router, theme         |
+| `defaultDir`      | Folder to open on boot                                            |
+| `defaultViewport` | `fit`, `375`, `768`, `1280`, or `1440`                            |
+| `include`         | Glob patterns to scan (default `**/*.{tsx,jsx}`)                  |
+| `exclude`         | Glob patterns to skip, added to the defaults                      |
+| `entry`           | Per-folder override for which component _is_ that folder's design |
+
+`wrapper` is the one most projects need. A component rendered outside your app
+has no providers around it, so anything reading context throws on mount.
+
+## Keyboard
+
+|                 |                                         |
+| --------------- | --------------------------------------- |
+| `⌘K` / `Ctrl K` | open the picker                         |
+| `⌘O` / `Ctrl O` | open the picker                         |
+| `⌥↑` / `⌥↓`     | step to the previous / next component   |
+| `Esc`           | close a panel, then clear the selection |
+
+These work even when focus is inside the preview.
+
+## Requirements
+
+- Node 20.19+
+- A project Vite can serve. Webpack and Next.js projects often work, but custom
+  loaders and Webpack aliases will not.
+- Desktop browsers.
+
+## Known gaps
+
+- Components with required props render as an error. The fix is a controls
+  panel, which does not exist yet.
+- No viewport height presets.
+- Sweep only checks width. No hover or focus states, and it cannot sweep a
+  component that needs props.
+- No file watching. A new component needs a refresh to appear.
+- Switching folders does a full reload.
+- React Server Components are detected and marked unsupported, not rendered.
+
+## Development
+
+```bash
+npm install
+npm run demo     # runs the CLI against fixtures/demo-app
+npm test
+npm run check    # lint, format, types, tests. What CI runs.
+```
+
+`fixtures/demo-app` is a small React project with its own Vite alias and a
+`Counter` that calls `useState`. If `Counter` throws "invalid hook call", two
+copies of React are loaded.
+
+## License
+
+MIT. See [NOTICE](NOTICE) for the bundled Geist and Lucide licenses.

package/licenses/geist-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) Geist-Italic[wght].ttf: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/licenses/lucide-ISC.txt

@@ -0,0 +1,17 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of
+Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors
+2022.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "vite-plugin-nora",
+  "version": "0.1.0",
+  "description": "A floating bar that switches your app between components. Point it at a folder.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Kate Zirotti",
+  "bin": {
+    "nora": "src/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "types",
+    "licenses",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "scripts": {
+    "demo": "node ./src/cli.js fixtures/demo-app",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit",
+    "types": "tsc -p tsconfig.build.json",
+    "test": "node --test test/*.test.js",
+    "check": "npm run lint && npm run format:check && npm run typecheck && npm test",
+    "prepublishOnly": "npm run check && npm run types"
+  },
+  "dependencies": {
+    "es-module-lexer": "^1.5.4",
+    "esbuild": "^0.21.5",
+    "fast-glob": "^3.3.2",
+    "picocolors": "^1.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.5.1",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^10.10.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.12.0",
+    "prettier": "^3.9.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^7.0.2",
+    "vite": "^5.4.11"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kate-lastoskie/nora.git"
+  },
+  "homepage": "https://github.com/kate-lastoskie/nora#readme",
+  "bugs": {
+    "url": "https://github.com/kate-lastoskie/nora/issues"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "react",
+    "components",
+    "preview",
+    "storybook",
+    "responsive"
+  ]
+}

package/src/cli.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+import path from "node:path";
+import process from "node:process";
+import pc from "picocolors";
+import { createPreviewServer, findProjectRoot } from "./server/create-server.js";
+
+const HELP = `
+${pc.bold("nora")} — a floating bar that switches your app between components
+
+${pc.dim("Usage")}
+  nora [project] [options]
+
+${pc.dim("Options")}
+  --dir <path>    folder to open on boot, relative to the project
+  --port <n>      port to listen on           ${pc.dim("(default 5199)")}
+  --open          open the browser on boot
+  --help          show this
+
+${pc.dim("Examples")}
+  nora
+  nora ./apps/web --dir src/components --open
+`;
+
+function parseArgs(argv) {
+  const opts = { project: ".", dir: null, port: 5199, open: false };
+  const rest = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") return { help: true };
+    else if (arg === "--open") opts.open = true;
+    else if (arg === "--dir") opts.dir = argv[++i];
+    else if (arg === "--port") opts.port = Number(argv[++i]);
+    else if (arg.startsWith("--")) throw new Error(`Unknown option: ${arg}`);
+    else rest.push(arg);
+  }
+
+  if (rest.length) opts.project = rest[0];
+  if (!Number.isFinite(opts.port)) throw new Error("--port must be a number");
+  return opts;
+}
+
+async function main() {
+  let opts;
+  try {
+    opts = parseArgs(process.argv.slice(2));
+  } catch (err) {
+    console.error(pc.red(err.message));
+    process.exit(1);
+  }
+
+  if (opts.help) {
+    console.log(HELP);
+    return;
+  }
+
+  const root = findProjectRoot(path.resolve(process.cwd(), opts.project));
+
+  const { server, url, inheritedConfig, configPath, addedReactPlugin } = await createPreviewServer({
+    root,
+    port: opts.port,
+    dir: opts.dir,
+  });
+
+  console.log("");
+  console.log(`  ${pc.bold(pc.cyan("nora"))}  ${pc.dim("v0.1.0")}`);
+  console.log("");
+  console.log(`  ${pc.dim("project")}  ${root}`);
+  console.log(
+    `  ${pc.dim("config")}   ${
+      inheritedConfig
+        ? pc.green(path.relative(root, configPath) || configPath)
+        : pc.yellow("none found — using defaults")
+    }`,
+  );
+  if (addedReactPlugin) {
+    console.log(`  ${pc.dim("react")}    ${pc.dim("added @vitejs/plugin-react")}`);
+  }
+  console.log(`  ${pc.dim("ready")}    ${pc.cyan(url)}`);
+  console.log("");
+
+  if (opts.open) {
+    const { default: open } = await import("node:child_process");
+    const cmd =
+      process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    open.spawn(cmd, [url], { stdio: "ignore", detached: true }).unref();
+  }
+
+  const shutdown = async () => {
+    await server.close();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+
+main().catch((err) => {
+  console.error(pc.red("\n  nora failed to start\n"));
+  console.error(err);
+  process.exit(1);
+});

package/src/client/App.jsx

@@ -0,0 +1,216 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { entries, currentDir, entryId, config } from "virtual:nora/registry";
+import { Toolbar } from "./toolbar/Toolbar.jsx";
+import { Canvas } from "./canvas/Canvas.jsx";
+import { findViewport, customViewport, DEFAULT_VIEWPORT } from "./viewports.js";
+import { runSweep } from "./sweep/run-sweep.js";
+import { consumeReopenFlag } from "./open-folder.js";
+import { readSelectionFromUrl, writeSelectionToUrl } from "./selection.js";
+import { matchChord } from "./chords.js";
+
+const THEME_KEY = "nora:theme";
+const EXPANDED_KEY = "nora:expanded";
+const VIEWPORT_KEY = "nora:viewport";
+/**
+ * Did we arrive here from opening a folder? Consumed on read, so it lives at
+ * module scope: a second read always misses. See open-folder.js.
+ */
+const REOPENING = consumeReopenFlag();
+
+function readStored(key, fallback) {
+  try {
+    return localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeStored(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    /* private window, or storage disabled — the app works without it */
+  }
+}
+
+export function App() {
+  // A folder's own design is the default subject, so pointing nora at a folder
+  // opens on the thing that folder *is* rather than on an empty canvas. The URL
+  // still wins, since it is the more specific statement of intent.
+  const [selectedId, setSelectedId] = useState(() => {
+    const fromUrl = readSelectionFromUrl();
+    if (entries.some((e) => e.id === fromUrl)) return fromUrl;
+    return entries.some((e) => e.id === entryId) ? entryId : null;
+  });
+  const [expanded, setExpanded] = useState(
+    () => REOPENING || readStored(EXPANDED_KEY, "1") === "1",
+  );
+  const [panel, setPanel] = useState(REOPENING ? "picker" : null);
+  const [theme, setTheme] = useState(() => readStored(THEME_KEY, "light"));
+  const [viewport, setViewport] = useState(() =>
+    findViewport(readStored(VIEWPORT_KEY, config?.defaultViewport ?? DEFAULT_VIEWPORT)),
+  );
+
+  const [sweeping, setSweeping] = useState(false);
+  const [sweepProgress, setSweepProgress] = useState(0);
+  const [sweepResult, setSweepResult] = useState(null);
+  const [scale, setScale] = useState(1);
+  const viewportRef = useRef(null);
+
+  useEffect(() => {
+    writeStored(THEME_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => writeStored(EXPANDED_KEY, expanded ? "1" : "0"), [expanded]);
+  useEffect(() => writeStored(VIEWPORT_KEY, viewport.id), [viewport]);
+
+  const select = useCallback((id) => {
+    setSelectedId(id);
+    writeSelectionToUrl(id);
+    // A previous component's findings say nothing about this one.
+    setSweepResult(null);
+  }, []);
+
+  const pickWidth = useCallback((width) => setViewport(customViewport(width)), []);
+
+  const sweep = useCallback(async () => {
+    const api = viewportRef.current;
+    if (!api || sweeping) return;
+
+    setPanel(null);
+    setSweeping(true);
+    setSweepProgress(0);
+    setSweepResult(null);
+
+    try {
+      // Measure a hidden copy, so the preview you are looking at holds still
+      // and its width never changes underneath you.
+      await api.begin();
+      const result = await runSweep({
+        setWidth: api.setWidth,
+        readDoc: api.readDoc,
+        onProgress: setSweepProgress,
+      });
+      setSweepResult(result);
+      setPanel("sweep");
+    } catch (err) {
+      console.error("[nora] sweep failed", err);
+    } finally {
+      api.end();
+      setSweeping(false);
+    }
+  }, [sweeping]);
+
+  // Clicking the sweep button when results already exist reopens them rather
+  // than re-running a six-second scan; "sweep again" inside the panel re-runs.
+  const toggleSweep = useCallback(() => {
+    if (sweeping) return;
+    if (sweepResult) {
+      setExpanded(true);
+      setPanel((p) => (p === "sweep" ? null : "sweep"));
+      return;
+    }
+    sweep();
+  }, [sweeping, sweepResult, sweep]);
+
+  // Step through the folder's components without opening the palette. Alt is
+  // deliberate: bare arrows would fight caret movement and page scrolling.
+  const step = useCallback(
+    (delta) => {
+      if (!entries.length) return;
+      const at = entries.findIndex((e) => e.id === selectedId);
+      const next = at === -1 ? 0 : (at + delta + entries.length) % entries.length;
+      select(entries[next].id);
+    },
+    [selectedId, select],
+  );
+
+  /**
+   * Act on a chord. Recognising one lives in chords.js; this only decides what
+   * it means. There is no guard here for whether a panel is open: a panel that
+   * claims a key stops it reaching this listener at all.
+   *
+   * @param {import("./chords.js").Chord} chord
+   */
+  const runChord = useCallback(
+    (chord) => {
+      if (chord === "picker") {
+        setExpanded(true);
+        setPanel((p) => (p === "picker" ? null : "picker"));
+      } else if (chord === "previous" || chord === "next") {
+        step(chord === "next" ? 1 : -1);
+      } else if (chord === "dismiss") {
+        if (panel) setPanel(null);
+        else if (selectedId) select(null);
+      }
+    },
+    [panel, selectedId, select, step],
+  );
+
+  useEffect(() => {
+    const onKey = (e) => {
+      const chord = matchChord(e);
+      if (!chord) return;
+      e.preventDefault();
+      runChord(chord);
+    };
+
+    // The same chords, relayed by the frame when focus is inside it. It already
+    // called preventDefault on its own event; there is nothing to prevent here.
+    const onMessage = (e) => {
+      if (e.origin !== location.origin) return;
+      const msg = e.data;
+      if (msg?.source !== "nora" || msg.type !== "shortcut") return;
+      runChord(msg.chord);
+    };
+
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [runChord]);
+
+  const entry = entries.find((e) => e.id === selectedId) ?? null;
+
+  return (
+    <div className="nora-app" data-theme={theme}>
+      <main className="nora-canvas">
+        <Canvas
+          ref={viewportRef}
+          selectedId={selectedId}
+          entry={entry}
+          entryCount={entries.length}
+          currentDir={currentDir}
+          theme={theme}
+          viewport={viewport}
+          sweeping={sweeping}
+          sweepProgress={sweepProgress}
+          onScale={setScale}
+        />
+      </main>
+
+      <Toolbar
+        expanded={expanded}
+        setExpanded={setExpanded}
+        panel={panel}
+        setPanel={setPanel}
+        entries={entries}
+        currentDir={currentDir}
+        selectedId={selectedId}
+        onSelect={select}
+        theme={theme}
+        onToggleTheme={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}
+        viewport={viewport}
+        scale={scale}
+        onPickViewport={(id) => setViewport(findViewport(id))}
+        onSweep={sweep}
+        onToggleSweep={toggleSweep}
+        sweeping={sweeping}
+        sweepResult={sweepResult}
+        onPickWidth={pickWidth}
+      />
+    </div>
+  );
+}