npm - vite-plugin-nora - Versions diffs - 0.1.0 - Mend

vite-plugin-nora 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/LICENSE +21 -0
package/NOTICE +26 -0
package/README.md +113 -0
package/licenses/geist-OFL.txt +93 -0
package/licenses/lucide-ISC.txt +17 -0
package/package.json +90 -0
package/src/cli.js +101 -0
package/src/client/App.jsx +216 -0
package/src/client/canvas/Canvas.jsx +95 -0
package/src/client/canvas/ErrorBoundary.jsx +56 -0
package/src/client/canvas/Preview.jsx +70 -0
package/src/client/canvas/Viewport.jsx +211 -0
package/src/client/chords.js +38 -0
package/src/client/css.d.ts +5 -0
package/src/client/fonts.css +48 -0
package/src/client/frame.css +107 -0
package/src/client/frame.html +11 -0
package/src/client/frame.jsx +73 -0
package/src/client/index.html +12 -0
package/src/client/main.jsx +10 -0
package/src/client/open-folder.js +84 -0
package/src/client/selection.js +22 -0
package/src/client/styles.css +1264 -0
package/src/client/sweep/SweepPanel.jsx +206 -0
package/src/client/sweep/measure.js +230 -0
package/src/client/sweep/report.js +54 -0
package/src/client/sweep/run-sweep.js +185 -0
package/src/client/toolbar/Picker.jsx +343 -0
package/src/client/toolbar/Toolbar.jsx +231 -0
package/src/client/toolbar/ViewportMenu.jsx +83 -0
package/src/client/toolbar/bar-shape.js +402 -0
package/src/client/toolbar/icons.jsx +129 -0
package/src/client/toolbar/use-draggable-bar.js +204 -0
package/src/client/viewports.js +43 -0
package/src/client/virtual.d.ts +28 -0
package/src/index.js +4 -0
package/src/server/create-server.js +147 -0
package/src/server/plugin.js +207 -0
package/src/server/safe-path.js +42 -0
package/src/server/scan.js +350 -0
package/types/index.d.ts +3 -0
package/types/server/create-server.d.ts +22 -0
package/types/server/plugin.d.ts +20 -0
package/types/server/safe-path.d.ts +25 -0
package/types/server/scan.d.ts +106 -0

package/src/client/frame.css ADDED Viewed

@@ -0,0 +1,107 @@
+/* =========================================================================
+   Styles for the iframe document only.
+   Deliberately minimal: this document holds the user's component, so the less
+   we impose the closer the preview is to their real app. No box-sizing reset,
+   no inherited font, no margin collapsing tricks — only what the error surface
+   needs, all namespaced under .noraf-.
+   The bundled faces are imported here too, because an error card is *our*
+   chrome even though it renders in the user's document, and it looked
+   borrowed while the bar beside it did not. Nothing inherits them: the
+   @font-face rules are inert until one of the .noraf- rules below asks for them,
+   so a component that renders fine never decodes a byte. And the families are
+   namespaced ("Nora Geist"), so a project that loads the real Geist into its own
+   components is untouched by ours.
+   ========================================================================= */
+@import "./fonts.css";
+:root {
+  --noraf-bg: #f1f2f4;
+  --noraf-ink: #14171c;
+  --noraf-muted: #5c6672;
+  --noraf-line: #d8dce1;
+  --noraf-danger: #a32f2f;
+  --noraf-danger-bg: #fbeeee;
+  --noraf-mono: "Nora Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --noraf-sans:
+    "Nora Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+:root[data-nora-theme="dark"] {
+  --noraf-bg: #101317;
+  --noraf-ink: #e6e9ed;
+  --noraf-muted: #8b95a2;
+  --noraf-line: #262d36;
+  --noraf-danger: #e07575;
+  --noraf-danger-bg: #2a1818;
+}
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--noraf-bg);
+}
+#nora-frame-root {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+/* The stage itself adds nothing — no padding, no background — so a component
+   with its own margins behaves exactly as it does in the real app. */
+.noraf-stage {
+  max-width: 100%;
+}
+.noraf-loading {
+  font-family: var(--noraf-mono);
+  font-size: 0.78rem;
+  color: var(--noraf-muted);
+}
+.noraf-error {
+  box-sizing: border-box;
+  max-width: 60ch;
+  border: 1px solid var(--noraf-danger);
+  background: var(--noraf-danger-bg);
+  border-radius: 8px;
+  padding: 1rem 1.15rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  font-family: var(--noraf-sans);
+}
+.noraf-error-head {
+  font-family: var(--noraf-sans);
+  font-size: 0.86rem;
+  letter-spacing: -0.01em;
+  font-weight: 600;
+  color: var(--noraf-danger);
+}
+.noraf-error-msg {
+  margin: 0;
+  font-family: var(--noraf-mono);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--noraf-ink);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 12rem;
+  overflow: auto;
+}
+.noraf-error-hint {
+  font-size: 0.84rem;
+  line-height: 1.55;
+  color: var(--noraf-muted);
+  border-top: 1px dashed var(--noraf-line);
+  padding-top: 0.6rem;
+}

package/src/client/frame.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>nora frame</title>
+  </head>
+  <body>
+    <div id="nora-frame-root"></div>
+    <script type="module" src="__CP_ENTRY__"></script>
+  </body>
+</html>

package/src/client/frame.jsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { entries, config } from "virtual:nora/registry";
+import { Preview } from "./canvas/Preview.jsx";
+import { matchChord } from "./chords.js";
+import "./frame.css";
+const CHANNEL = "nora";
+/**
+ * The document inside the iframe. It holds the whole render path — the config
+ * wrapper, the error boundary, and the component — so that everything the
+ * component can observe about its environment (viewport width, media queries,
+ * `vw` units, `window.innerWidth`) is the size the toolbar asked for.
+ *
+ * The shell talks to it over postMessage rather than by swapping the iframe
+ * src, so switching components does not tear down and rebuild the document.
+ */
+function Frame() {
+  const [selectedId, setSelectedId] = useState(null);
+  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    const onMessage = (event) => {
+      if (event.origin !== location.origin) return;
+      const msg = event.data;
+      if (!msg || msg.source !== CHANNEL) return;
+      if (msg.type === "select") {
+        setSelectedId(msg.id ?? null);
+        if (msg.theme) setTheme(msg.theme);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    // Clicking anything in the preview moves focus into this iframe, and from
+    // then on every keystroke lands here instead of on the shell — so ⌘K and
+    // friends silently stop working the moment you interact with the component
+    // you are inspecting. Forward the shortcuts we own back up.
+    //
+    // Deliberately narrow: only our own chords. Plain keys stay in the frame so
+    // a previewed text field, slider, or menu still behaves normally.
+    const onKey = (event) => {
+      const chord = matchChord(event);
+      if (!chord) return;
+      event.preventDefault();
+      window.parent?.postMessage({ source: CHANNEL, type: "shortcut", chord }, location.origin);
+    };
+    window.addEventListener("keydown", onKey);
+    // Tell the shell we are mounted and ready to be told what to render.
+    // The shell also posts on iframe load, so this is belt and braces for HMR.
+    window.parent?.postMessage({ source: CHANNEL, type: "ready" }, location.origin);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, []);
+  // The one thing a previewed component can rely on: the active theme, named on
+  // the root of the document it renders in. frame.css keys its own dark palette
+  // off the same attribute, and so can yours.
+  useEffect(() => {
+    document.documentElement.dataset.noraTheme = theme;
+  }, [theme]);
+  const entry = entries.find((e) => e.id === selectedId) ?? null;
+  if (!entry) return null;
+  return <Preview entry={entry} wrapper={config?.wrapper} />;
+}
+createRoot(document.getElementById("nora-frame-root")).render(<Frame />);

package/src/client/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>nora</title>
+  </head>
+  <body>
+    <div id="nora-root"></div>
+    <script type="module" src="__CP_ENTRY__"></script>
+  </body>
+</html>

package/src/client/main.jsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.jsx";
+import "./styles.css";
+createRoot(document.getElementById("nora-root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/client/open-folder.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { writeSelectionToUrl } from "./selection.js";
+const REOPEN_KEY = "nora:reopen-picker";
+/**
+ * Point nora at a folder.
+ *
+ * This used to be half an operation in two places: the picker ran the fetch and
+ * handed back the folder the server confirmed, and the shell reloaded without
+ * accepting it. The value crossed a seam and was dropped on the other side.
+ *
+ * One module owns the whole thing now, and it contains no React, so it can be
+ * exercised without a renderer.
+ *
+ * **It does not return on success.** Changing folders rebuilds the registry on
+ * the server, which ends this document rather than updating it, so the only
+ * outcomes are "the page is being replaced" and "it threw". Callers should
+ * treat a rejection as the sole case worth handling, and leave any pending
+ * state set: there is no render after this to clear it in.
+ *
+ * @param {string} dir folder to scan, relative to the project root
+ * @returns {Promise<never>}
+ */
+export async function openFolder(dir) {
+  // Raised before the request, not after. A successful scan makes the server
+  // tell every client to reload, and that broadcast can reach this one while it
+  // is still awaiting the response — so the flag has to already be set, or the
+  // picker would vanish on the way through.
+  setFlag(true);
+  try {
+    const res = await fetch("/__nora/scan", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: dir }),
+    });
+    const json = await res.json();
+    if (json?.error) throw new Error(json.error);
+  } catch (err) {
+    setFlag(false); // no reload is coming; don't leave it armed for the next one
+    throw err;
+  }
+  // The selection belonged to the folder we are leaving.
+  writeSelectionToUrl(null);
+  location.reload();
+  return await new Promise(() => {});
+}
+/** @param {boolean} on */
+function setFlag(on) {
+  try {
+    if (on) sessionStorage.setItem(REOPEN_KEY, "1");
+    else sessionStorage.removeItem(REOPEN_KEY);
+  } catch {
+    /* storage disabled — the picker just won't reopen by itself */
+  }
+}
+/**
+ * Did this document begin with someone opening a folder?
+ *
+ * The flag is the only thing that survives the reload above, and it is what
+ * keeps that reload from being felt: the picker was open before and is open
+ * after, now listing the folder just opened.
+ *
+ * Consumed on read, so call it exactly once, at module scope. A second call
+ * always misses, and a call inside a component would miss on every render after
+ * the first.
+ *
+ * @returns {boolean}
+ */
+export function consumeReopenFlag() {
+  try {
+    if (sessionStorage.getItem(REOPEN_KEY) === "1") {
+      sessionStorage.removeItem(REOPEN_KEY);
+      return true;
+    }
+  } catch {
+    /* storage disabled — the handoff just doesn't happen */
+  }
+  return false;
+}

package/src/client/selection.js ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * The selected component lives in the URL, so a reload, an HMR update and a
+ * pasted link all keep your place.
+ *
+ * Its own module because two things need it and they are not in the same tree:
+ * the shell reads it on boot, and opening a folder clears it on the way out
+ * (see open-folder.js). Duplicating four lines of URLSearchParams across both
+ * is how the two drift.
+ */
+/** @returns {string | null} */
+export function readSelectionFromUrl() {
+  return new URLSearchParams(location.search).get("c");
+}
+/** @param {string | null} id */
+export function writeSelectionToUrl(id) {
+  const url = new URL(location.href);
+  if (id) url.searchParams.set("c", id);
+  else url.searchParams.delete("c");
+  history.replaceState(null, "", url);
+}