leglas 1.2.0 → 1.2.1

package/README.md

@@ -21,30 +21,36 @@
 
 <p align="center"><i>Every direction in the rail, the selected one running as your actual app. Arrow keys flip between them.</i></p>
 
-Code is becoming the source of truth. Features go from prompt to
-working code in minutes, and mockups/design files eventually lag behind the product and drift out of sync. The
-fastest teams already design in the medium they ship. Leglas is built
-for working that way: it lets you explore many design directions at
-once, live, in your own app.
-
-The goal is to help devs and designers try many variations of a component, feature, page or user-flow quickly and make coming up with ideas extremely easy.
-
-Ask your agent for a handful of directions for the landing page,
-or the checkout component, or the empty states, or your onboarding flow. Leglas runs them all as your
-actual app, side by side in one place, and holds your notes on each. Explore far and wide without losing focus: you see more ideas
-without losing your opinion of any of them.
-
-And because every variation is the real product, your judgment is real
+Code is becoming the source of truth. Features go from prompt to working
+code in minutes, while mockups and design files fall behind the product
+they describe. The fastest teams already design in the medium they ship, and
+Leglas is built for working that way: many design directions, explored at
+once, live in your own app.
+
+The goal is to help devs and designers try many variations of a component,
+feature, page or user-flow quickly and make coming up with ideas extremely
+easy.
+
+Ask your agent for a handful of directions for the landing page, the
+checkout, the empty states or your onboarding flow. Leglas runs every one
+of them as your actual app, in one place, and keeps your notes on each.
+Explore far and wide without losing focus: you see more ideas without
+losing your opinion of any of them.
+
+And because every direction is the real product, your judgment is real
 too. Everything behaves the way it will in production, motion and data
-included. Choosing between two directions is choosing between two
-things that already exist, and the winner never has to be rebuilt from
-a picture or design file.
+included. Choosing between two directions is choosing between two things
+that already exist, and the winner never has to be rebuilt from a picture.
 
-Your app doesn't change to make any of this work. Leglas proxies the same
-dev server in your project: one config file to delete when you're done
-and sessions that clean up after themselves.
+Leglas asks nothing of your app: no package, no import, no build step. It
+sits in front of the dev server you already run, and its config file is
+optional. New directions go in `.leglas/`, a folder Leglas adds to your
+`.gitignore`, and keeping a winner clears the rest away. Sessions clean up
+after themselves too: stopping Leglas shuts down everything it started,
+from dev servers and branch checkouts to the share tunnel and any agent
+still at work.
 
-## What it does
+## What Leglas does
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/FredAmartey/leglas/main/.github/assets/screenshots/compare-artboards.jpg" width="900" alt="The Leglas interface: the rail on the left, and two directions running side by side as the real app, each labelled with its name and the width it is drawn at." />
@@ -53,11 +59,12 @@ and sessions that clean up after themselves.
 <p align="center"><i>Two directions for the same page, running side by side as the actual app.</i></p>
 
 - Put any two directions side by side when it gets hard to choose.
-- Name each direction, drag to reorder, set aside the ones that don't feel
-  right. Your opinion of every idea survives a long exploration.
+- Name each direction, drag to reorder and set aside the ones that don't
+  feel right. Your opinion of every idea survives a long exploration.
 - Share the rail with someone who has no repo: a client, a cofounder, a
   teammate on another machine. They get the real app, in your order, and
-  cannot change anything. See [Sharing](https://github.com/FredAmartey/leglas/blob/main/docs/sharing.md).
+  cannot change anything. Share it from the interface, from a terminal with
+  `npx leglas share` or by asking your agent. See [Sharing](https://github.com/FredAmartey/leglas/blob/main/docs/sharing.md).
 - Compare things no design tool can hold: three git branches, a local build
   against production, yesterday's direction against today's.
 - Hand the workflow to your coding agent. `leglas init` teaches it, and
@@ -67,13 +74,14 @@ and sessions that clean up after themselves.
 - Ask for changes without leaving the comparison. Describe what you want on
   the direction you are looking at, or point at it, and Leglas turns that
   into a precise request for your agent, file path and screenshots
-  included. The agents on your machine are one click away next to the send
-  button. Your agent, your subscription, no keys.
-- A change makes a variant, not a rewrite. The result registers under the
+  included. Pick any agent on your machine from beside the send button.
+  Your agent, your subscription, no keys.
+- A change makes a variant, not a rewrite. The result appears under the
   direction it came from, with the original still there to compare against.
 - Keep the winner with one command. Leglas moves it into your source tree,
-  writes down what the exploration decided and clears the rest away.
-- No app yet? Plain HTML files compare the same way, no dev server needed.
+  writes down what the exploration decided and cleans up after itself.
+- No app yet? Leglas compares plain HTML files the same way, with no dev
+  server.
 
 ## Get started
 
@@ -99,16 +107,18 @@ export default {
 };
 ```
 
-Each preview is a URL your dev server already answers. Every field, plain
-HTML files with no dev server, git branches side by side and how the proxy
-works are in [Setting up a project](https://github.com/FredAmartey/leglas/blob/main/docs/configuration.md).
+Each preview is a URL your dev server already answers. [Setting up a
+project](https://github.com/FredAmartey/leglas/blob/main/docs/configuration.md)
+covers every field, plain HTML files with no dev server, git branches side
+by side and how the proxy works.
 
 It works with whatever you are building in. Leglas never imports or
 executes your framework, so the target can be Next, Vite, Remix, SvelteKit,
-Astro or a folder of static files. It needs Node 24 or newer, and nothing
-else: `npx` fetches the CLI on first use and starts from the cache after
-that. To pin a version for a project, `npm install -D leglas`; to type
-`leglas` without the prefix, `npm install -g leglas`.
+Astro or a folder of static files. It needs Node 24 or newer and nothing
+else; `npx` fetches it the first time you run it. Leglas tells you when a
+newer version is out and can update itself. To pin a version for a
+project, `npm install -D leglas`; to type `leglas` without `npx`,
+`npm install -g leglas`.
 
 ## With your agent
 
@@ -121,9 +131,9 @@ pricing page" as a Leglas exploration in any project, including ones that
 have never seen Leglas. In a project, `npx leglas init` writes the whole
 workflow into `AGENTS.md`, so Claude Code, Cursor, Codex or whatever you
 switch to next opens the project already knowing how to add design
-directions to it. The one rule that workflow centers on, the commands an
-agent runs, the MCP server and the Agent Plugin are in
-[Working with agents](https://github.com/FredAmartey/leglas/blob/main/docs/agents.md).
+directions to it. [Working with agents](https://github.com/FredAmartey/leglas/blob/main/docs/agents.md)
+has the one rule that workflow is built around, the commands an agent runs,
+the MCP server and the Agent Plugin.
 
 ## Documentation
 

package/dist/bin.js

@@ -2427,6 +2427,12 @@ var LOCATOR = `(function (selector, text, tag) {
   if (r.width === 0 && r.height === 0) return null;
   return { x: r.left + window.scrollX, y: r.top + window.scrollY, width: r.width, height: r.height };
 })`;
+var DRAWN_WITH = /* @__PURE__ */ new Set(["Script", "Stylesheet", "Font", "Image"]);
+var LAID_OUT = `(async () => {
+  await new Promise((next) => requestAnimationFrame(() => requestAnimationFrame(next)));
+  if (document.fonts) await document.fonts.ready;
+  return true;
+})()`;
 function clamp(value, low, high) {
   return Math.min(high, Math.max(low, value));
 }
@@ -2508,6 +2514,22 @@ async function render(page, input) {
     errors.push(message2);
   };
   let documentStatus = null;
+  const pending = /* @__PURE__ */ new Set();
+  const afterLoadScripts = /* @__PURE__ */ new Set();
+  let loadFired = false;
+  let scriptLanded = null;
+  let asked = 0;
+  let emptied = () => {
+  };
+  const received = (id) => {
+    if (afterLoadScripts.delete(id))
+      scriptLanded = Date.now();
+    if (pending.delete(id) && pending.size === 0)
+      emptied();
+  };
+  const landed = () => pending.size === 0 ? Promise.resolve() : new Promise((resolve5) => {
+    emptied = resolve5;
+  });
   const unlisten = [
     page.on("Network.responseReceived", (params) => {
       if (documentStatus !== null || params?.type !== "Document")
@@ -2516,6 +2538,25 @@ async function render(page, input) {
       if (isNumber(status))
         documentStatus = status;
     }),
+    page.on("Network.requestWillBeSent", (params) => {
+      const id = params?.requestId;
+      if (!DRAWN_WITH.has(params?.type) || !isString(id))
+        return;
+      if (!pending.has(id)) {
+        asked += 1;
+        if (loadFired && params?.type === "Script")
+          afterLoadScripts.add(id);
+      }
+      pending.add(id);
+    }),
+    page.on("Network.loadingFinished", (params) => {
+      if (isString(params?.requestId))
+        received(params.requestId);
+    }),
+    page.on("Network.loadingFailed", (params) => {
+      if (isString(params?.requestId))
+        received(params.requestId);
+    }),
     page.on("Runtime.exceptionThrown", (params) => remember(params?.exceptionDetails?.exception?.description ?? params?.exceptionDetails?.text)),
     page.on("Runtime.consoleAPICalled", (params) => {
       if (params?.type !== "error")
@@ -2542,7 +2583,10 @@ async function render(page, input) {
     const load = new Promise((resolve5) => {
       loaded = resolve5;
     });
-    const stopLoad = page.on("Page.loadEventFired", () => loaded());
+    const stopLoad = page.on("Page.loadEventFired", () => {
+      loadFired = true;
+      loaded();
+    });
     unlisten.push(stopLoad);
     const navigation = await page.send("Page.navigate", { url: input.url });
     if (isString(navigation.errorText) && navigation.errorText !== "") {
@@ -2553,12 +2597,28 @@ async function render(page, input) {
     if (documentStatus !== null && documentStatus >= 500) {
       throw new Error(`The page did not load: the app answered HTTP ${documentStatus}.`);
     }
-    await bounded(page.send("Runtime.evaluate", {
-      expression: "document.fonts ? document.fonts.ready.then(() => true) : true",
-      awaitPromise: true,
-      returnByValue: true
-    }), 2e3, void 0).catch(() => {
-    });
+    const until = Date.now() + 2e3;
+    let waitedForScript = null;
+    while (Date.now() < until) {
+      await bounded(landed(), until - Date.now(), void 0);
+      const before = asked;
+      const answered = await bounded(page.send("Runtime.evaluate", {
+        expression: LAID_OUT,
+        awaitPromise: true,
+        returnByValue: true
+      }), Math.max(0, until - Date.now()), void 0).then(() => true, () => false);
+      if (!answered)
+        break;
+      if (pending.size !== 0 || asked !== before)
+        continue;
+      const latestScript = scriptLanded;
+      if (latestScript === null || latestScript === waitedForScript)
+        break;
+      const remaining = Math.min(latestScript + 300, until) - Date.now();
+      if (remaining > 0)
+        await new Promise((resolve5) => setTimeout(resolve5, remaining));
+      waitedForScript = latestScript;
+    }
     await bounded(page.send("Runtime.evaluate", {
       expression: `(async () => {
           // The page stops itself before the caller's deadline can. Without
@@ -9260,8 +9320,10 @@ type SearchParams = Record<string, string | string[] | undefined>;
 /**
  * Production always renders the fallback, whatever the URL says, so a branch
  * point that reaches a deployed build cannot expose an unreleased direction.
+ * It is not exported because a file whose exports are all components hot-swaps
+ * in place, while an extra export makes every edit reload the page.
  */
-export function resolve${titleCase(slug).replace(/\s/g, "")}(searchParams: SearchParams): Direction {
+function resolve${titleCase(slug).replace(/\s/g, "")}(searchParams: SearchParams): Direction {
   if (process.env.NODE_ENV === "production") return FALLBACK;
   const raw = searchParams["v-${slug}"];
   const value = Array.isArray(raw) ? raw[0] : raw;
@@ -9307,8 +9369,10 @@ function isProduction(): boolean {
 /**
  * Production always renders the fallback, whatever the URL says, so a branch
  * point that reaches a deployed build cannot expose an unreleased direction.
+ * It is not exported because a file whose exports are all components hot-swaps
+ * in place, while an extra export makes every edit reload the page.
  */
-export function resolve${name}(): Direction {
+function resolve${name}(): Direction {
   if (isProduction()) return FALLBACK;
   const value = new URLSearchParams(window.location.search).get("v-${slug}");
   return value !== null && value in DIRECTIONS ? (value as Direction) : FALLBACK;

package/dist/index.js

@@ -598,8 +598,10 @@ type SearchParams = Record<string, string | string[] | undefined>;
 /**
  * Production always renders the fallback, whatever the URL says, so a branch
  * point that reaches a deployed build cannot expose an unreleased direction.
+ * It is not exported because a file whose exports are all components hot-swaps
+ * in place, while an extra export makes every edit reload the page.
  */
-export function resolve${titleCase(slug).replace(/\s/g, "")}(searchParams: SearchParams): Direction {
+function resolve${titleCase(slug).replace(/\s/g, "")}(searchParams: SearchParams): Direction {
   if (process.env.NODE_ENV === "production") return FALLBACK;
   const raw = searchParams["v-${slug}"];
   const value = Array.isArray(raw) ? raw[0] : raw;
@@ -645,8 +647,10 @@ function isProduction(): boolean {
 /**
  * Production always renders the fallback, whatever the URL says, so a branch
  * point that reaches a deployed build cannot expose an unreleased direction.
+ * It is not exported because a file whose exports are all components hot-swaps
+ * in place, while an extra export makes every edit reload the page.
  */
-export function resolve${name}(): Direction {
+function resolve${name}(): Direction {
   if (isProduction()) return FALLBACK;
   const value = new URLSearchParams(window.location.search).get("v-${slug}");
   return value !== null && value in DIRECTIONS ? (value as Direction) : FALLBACK;
@@ -2819,6 +2823,12 @@ var LOCATOR = `(function (selector, text, tag) {
   if (r.width === 0 && r.height === 0) return null;
   return { x: r.left + window.scrollX, y: r.top + window.scrollY, width: r.width, height: r.height };
 })`;
+var DRAWN_WITH = /* @__PURE__ */ new Set(["Script", "Stylesheet", "Font", "Image"]);
+var LAID_OUT = `(async () => {
+  await new Promise((next) => requestAnimationFrame(() => requestAnimationFrame(next)));
+  if (document.fonts) await document.fonts.ready;
+  return true;
+})()`;
 function clamp(value, low, high) {
   return Math.min(high, Math.max(low, value));
 }
@@ -2900,6 +2910,22 @@ async function render(page, input) {
     errors.push(message2);
   };
   let documentStatus = null;
+  const pending = /* @__PURE__ */ new Set();
+  const afterLoadScripts = /* @__PURE__ */ new Set();
+  let loadFired = false;
+  let scriptLanded = null;
+  let asked = 0;
+  let emptied = () => {
+  };
+  const received = (id) => {
+    if (afterLoadScripts.delete(id))
+      scriptLanded = Date.now();
+    if (pending.delete(id) && pending.size === 0)
+      emptied();
+  };
+  const landed = () => pending.size === 0 ? Promise.resolve() : new Promise((resolve5) => {
+    emptied = resolve5;
+  });
   const unlisten = [
     page.on("Network.responseReceived", (params) => {
       if (documentStatus !== null || params?.type !== "Document")
@@ -2908,6 +2934,25 @@ async function render(page, input) {
       if (isNumber(status))
         documentStatus = status;
     }),
+    page.on("Network.requestWillBeSent", (params) => {
+      const id = params?.requestId;
+      if (!DRAWN_WITH.has(params?.type) || !isString(id))
+        return;
+      if (!pending.has(id)) {
+        asked += 1;
+        if (loadFired && params?.type === "Script")
+          afterLoadScripts.add(id);
+      }
+      pending.add(id);
+    }),
+    page.on("Network.loadingFinished", (params) => {
+      if (isString(params?.requestId))
+        received(params.requestId);
+    }),
+    page.on("Network.loadingFailed", (params) => {
+      if (isString(params?.requestId))
+        received(params.requestId);
+    }),
     page.on("Runtime.exceptionThrown", (params) => remember(params?.exceptionDetails?.exception?.description ?? params?.exceptionDetails?.text)),
     page.on("Runtime.consoleAPICalled", (params) => {
       if (params?.type !== "error")
@@ -2934,7 +2979,10 @@ async function render(page, input) {
     const load = new Promise((resolve5) => {
       loaded = resolve5;
     });
-    const stopLoad = page.on("Page.loadEventFired", () => loaded());
+    const stopLoad = page.on("Page.loadEventFired", () => {
+      loadFired = true;
+      loaded();
+    });
     unlisten.push(stopLoad);
     const navigation = await page.send("Page.navigate", { url: input.url });
     if (isString(navigation.errorText) && navigation.errorText !== "") {
@@ -2945,12 +2993,28 @@ async function render(page, input) {
     if (documentStatus !== null && documentStatus >= 500) {
       throw new Error(`The page did not load: the app answered HTTP ${documentStatus}.`);
     }
-    await bounded(page.send("Runtime.evaluate", {
-      expression: "document.fonts ? document.fonts.ready.then(() => true) : true",
-      awaitPromise: true,
-      returnByValue: true
-    }), 2e3, void 0).catch(() => {
-    });
+    const until = Date.now() + 2e3;
+    let waitedForScript = null;
+    while (Date.now() < until) {
+      await bounded(landed(), until - Date.now(), void 0);
+      const before = asked;
+      const answered = await bounded(page.send("Runtime.evaluate", {
+        expression: LAID_OUT,
+        awaitPromise: true,
+        returnByValue: true
+      }), Math.max(0, until - Date.now()), void 0).then(() => true, () => false);
+      if (!answered)
+        break;
+      if (pending.size !== 0 || asked !== before)
+        continue;
+      const latestScript = scriptLanded;
+      if (latestScript === null || latestScript === waitedForScript)
+        break;
+      const remaining = Math.min(latestScript + 300, until) - Date.now();
+      if (remaining > 0)
+        await new Promise((resolve5) => setTimeout(resolve5, remaining));
+      waitedForScript = latestScript;
+    }
     await bounded(page.send("Runtime.evaluate", {
       expression: `(async () => {
           // The page stops itself before the caller's deadline can. Without

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leglas",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Compare design directions inside your own running app.",
   "license": "MIT",
   "repository": {
@@ -28,8 +28,8 @@
   "types": "./dist/index.d.ts",
   "devDependencies": {
     "tsup": "^8.5.0",
-    "@leglas/server": "0.0.0",
-    "@leglas/shell": "0.0.0"
+    "@leglas/shell": "0.0.0",
+    "@leglas/server": "0.0.0"
   },
   "engines": {
     "node": ">=24"