api_binding_ui 3.0.0 → 3.1.0

package/dist/app/index.html

@@ -2,6 +2,6 @@
 <html lang="en">
 <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Bind API</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap" />
-<style>html, body, #root { height: 100%; margin: 0; overflow: hidden; background: #f8fafc; }</style><link rel="stylesheet" crossorigin href="./index-aaxy714b.css"><script type="module" crossorigin src="./index-0n23yy5r.js"></script></head>
+<style>html, body, #root { height: 100%; margin: 0; overflow: hidden; background: #f8fafc; }</style><link rel="stylesheet" crossorigin href="./index-aaxy714b.css"><script type="module" crossorigin src="./index-4mgcb4wd.js"></script></head>
 <body><div id="root"></div></body>
 </html>

package/dist/cli.js

@@ -2,9 +2,8 @@
 
 // src/cli/cli.ts
 import { createServer } from "node:http";
-import { promises as fs2 } from "node:fs";
-import path2 from "node:path";
-import { fileURLToPath } from "node:url";
+import { promises as fs3 } from "node:fs";
+import path3 from "node:path";
 
 // src/framework/names.ts
 function humanize(id) {
@@ -763,16 +762,123 @@ ${apiType.join(`
   return { files, issues };
 }
 
-// src/cli/scan.ts
+// src/server/handler.ts
 import { promises as fs } from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+var TYPES = { ".html": "text/html; charset=utf-8", ".js": "text/javascript", ".css": "text/css", ".svg": "image/svg+xml", ".map": "application/json", ".woff2": "font/woff2" };
+var DIST = fileURLToPath(new URL(".", import.meta.url));
+var APP_DIR = path.join(DIST, "app");
+var OVERLAY_FILE = path.join(DIST, "overlay.js");
+var isUrl = (s) => /^https?:\/\//i.test(s);
+async function readDocs(src, base) {
+  if (isUrl(src)) {
+    const res = await fetch(src);
+    if (!res.ok)
+      throw new Error(`${src} returned HTTP ${res.status}.`);
+    return res.text();
+  }
+  if (!/\.(ya?ml|json)$/i.test(src))
+    throw new Error(`"${src}" is not a .yaml, .yml or .json file.`);
+  return fs.readFile(path.resolve(base, src), "utf8");
+}
+async function writeFileAtomic(file, text) {
+  const tmp = `${file}.${process.pid}.tmp`;
+  await fs.writeFile(tmp, text, "utf8");
+  await fs.rename(tmp, file);
+}
+async function readBody(req, limit = 20 * 1024 * 1024) {
+  const chunks = [];
+  let size = 0;
+  for await (const c of req) {
+    size += c.length;
+    if (size > limit)
+      throw new Error("Body too large.");
+    chunks.push(c);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+}
+function send(res, status, body, type = "text/plain; charset=utf-8") {
+  res.writeHead(status, { "Content-Type": type, "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff" }).end(body);
+}
+function createStudioHandler({ file, prefix, allowed }) {
+  const base = path.dirname(file);
+  return async (req, res) => {
+    const url = new URL(req.url ?? "/", "http://local");
+    if (prefix && url.pathname !== prefix && !url.pathname.startsWith(prefix + "/"))
+      return false;
+    const rel = url.pathname.slice(prefix.length) || "/";
+    try {
+      if (prefix && url.pathname === prefix) {
+        res.writeHead(302, { Location: prefix + "/" + url.search }).end();
+        return true;
+      }
+      if (rel.startsWith("/api/") && !allowed(req)) {
+        send(res, 403, "Forbidden.");
+        return true;
+      }
+      if (rel === "/api/bindings") {
+        if (req.method === "GET")
+          send(res, 200, await fs.readFile(file, "utf8"), "application/json");
+        else if (req.method === "PUT") {
+          const text = await readBody(req);
+          try {
+            parseBindingsFile(text);
+          } catch (e) {
+            send(res, 400, e.message);
+            return true;
+          }
+          await writeFileAtomic(file, text);
+          send(res, 204, "");
+        } else
+          send(res, 405, "Method not allowed.");
+        return true;
+      }
+      if (rel === "/api/openapi" && req.method === "GET") {
+        const src = url.searchParams.get("src") ?? "";
+        try {
+          send(res, 200, await readDocs(src, base), src.endsWith(".json") ? "application/json" : "text/yaml; charset=utf-8");
+        } catch (e) {
+          send(res, 502, e.message);
+        }
+        return true;
+      }
+      if (req.method !== "GET" && req.method !== "HEAD") {
+        send(res, 405, "Method not allowed.");
+        return true;
+      }
+      if (rel === "/overlay.js") {
+        send(res, 200, await fs.readFile(OVERLAY_FILE), TYPES[".js"]);
+        return true;
+      }
+      const target = path.resolve(APP_DIR, rel === "/" ? "index.html" : decodeURIComponent(rel.slice(1)));
+      if (!target.startsWith(APP_DIR + path.sep)) {
+        send(res, 404, "Not found.");
+        return true;
+      }
+      const data = await fs.readFile(target).catch(() => null);
+      if (!data) {
+        send(res, 404, "Not found.");
+        return true;
+      }
+      send(res, 200, data, TYPES[path.extname(target)] ?? "application/octet-stream");
+    } catch (e) {
+      send(res, 500, e.message);
+    }
+    return true;
+  };
+}
+
+// src/cli/scan.ts
+import { promises as fs2 } from "node:fs";
+import path2 from "node:path";
 var LITERAL = /componentId\s*(?:=\s*\{?\s*|:\s*)(["'`])([a-z0-9.-]+)\1/g;
 var SKIP = new Set(["node_modules", "dist", "build", ".git", ".next", ".output"]);
 async function* sources(dir) {
-  for (const e of await fs.readdir(dir, { withFileTypes: true })) {
+  for (const e of await fs2.readdir(dir, { withFileTypes: true })) {
     if (SKIP.has(e.name))
       continue;
-    const p = path.join(dir, e.name);
+    const p = path2.join(dir, e.name);
     if (e.isDirectory())
       yield* sources(p);
     else if (/\.(tsx?|jsx?)$/.test(e.name))
@@ -782,9 +888,9 @@ async function* sources(dir) {
 async function scanIds(dir, file) {
   const found = new Map;
   for await (const p of sources(dir))
-    for (const m of (await fs.readFile(p, "utf8")).matchAll(LITERAL))
+    for (const m of (await fs2.readFile(p, "utf8")).matchAll(LITERAL))
       if (!found.has(m[2]))
-        found.set(m[2], path.relative(dir, p));
+        found.set(m[2], path2.relative(dir, p));
   const registered = new Set(file.components.map((c) => c.id));
   const issues = [];
   for (const [id, where] of found)
@@ -802,6 +908,7 @@ var HELP = `Usage:
   api-binding generate [bindings.json] [--check] [--src <dir>]
 
   studio    Opens the binding studio on http://localhost:<port>. Edits are saved to the file.
+            Inside a Vite app, the dev plugin (api_binding_ui/vite) serves the same studio instead.
   generate  Writes one React Query hook per screen into output.dir, calling the Orval client.
             --check  writes nothing; exits 1 when the files are out of date (for CI).
             --src    also checks that every registered id appears in the app's source, and the reverse.`;
@@ -819,34 +926,17 @@ function args(argv) {
   }
   return { rest, flags };
 }
-var isUrl = (s) => /^https?:\/\//i.test(s);
-async function readDocs(src, base) {
-  if (isUrl(src)) {
-    const res = await fetch(src);
-    if (!res.ok)
-      throw new Error(`${src} returned HTTP ${res.status}.`);
-    return res.text();
-  }
-  if (!/\.(ya?ml|json)$/i.test(src))
-    throw new Error(`"${src}" is not a .yaml, .yml or .json file.`);
-  return fs2.readFile(path2.resolve(base, src), "utf8");
-}
 function report(issues) {
   for (const i of issues)
     console.log(`${i.severity === "error" ? "error  " : "warning"} ${[i.component ?? i.screen, i.slot].filter(Boolean).join(" · ")}: ${i.message}`);
 }
-async function writeFile(file, text) {
-  const tmp = `${file}.${process.pid}.tmp`;
-  await fs2.writeFile(tmp, text, "utf8");
-  await fs2.rename(tmp, file);
-}
 async function runGenerate(filePath, flags) {
-  const base = path2.dirname(filePath);
-  const file = parseBindingsFile(await fs2.readFile(filePath, "utf8"));
+  const base = path3.dirname(filePath);
+  const file = parseBindingsFile(await fs3.readFile(filePath, "utf8"));
   const catalog = catalogFromText(await readDocs(file.openapi, base), file.openapi);
   const { files, issues } = generate(file, catalog);
   if (typeof flags.src === "string")
-    issues.push(...await scanIds(path2.resolve(flags.src), file));
+    issues.push(...await scanIds(path3.resolve(flags.src), file));
   report(issues);
   const errors = issues.filter((i) => i.severity === "error").length;
   if (errors) {
@@ -854,98 +944,45 @@ async function runGenerate(filePath, flags) {
 ${errors} error(s). Nothing was written.`);
     return 1;
   }
-  const out = path2.resolve(base, file.output.dir);
-  await fs2.mkdir(out, { recursive: true });
-  const wanted = new Map(files.map((f) => [path2.join(out, f.path), f.content]));
-  const existing = (await fs2.readdir(out)).filter((n) => n.endsWith(".ts")).map((n) => path2.join(out, n));
+  const out = path3.resolve(base, file.output.dir);
+  await fs3.mkdir(out, { recursive: true });
+  const wanted = new Map(files.map((f) => [path3.join(out, f.path), f.content]));
+  const existing = (await fs3.readdir(out)).filter((n) => n.endsWith(".ts")).map((n) => path3.join(out, n));
   const changed = [];
   const stale = [];
   for (const [p, content] of wanted)
-    if (await fs2.readFile(p, "utf8").catch(() => null) !== content)
+    if (await fs3.readFile(p, "utf8").catch(() => null) !== content)
       changed.push(p);
   for (const p of existing)
-    if (!wanted.has(p) && (await fs2.readFile(p, "utf8")).startsWith(`// ${GENERATED_MARK}`))
+    if (!wanted.has(p) && (await fs3.readFile(p, "utf8")).startsWith(`// ${GENERATED_MARK}`))
       stale.push(p);
   if (flags.check) {
     if (changed.length || stale.length) {
-      console.log(`Out of date: ${[...changed, ...stale].map((p) => path2.relative(process.cwd(), p)).join(", ")}`);
+      console.log(`Out of date: ${[...changed, ...stale].map((p) => path3.relative(process.cwd(), p)).join(", ")}`);
       return 1;
     }
     console.log("Generated files are up to date.");
     return 0;
   }
   for (const p of changed)
-    await writeFile(p, wanted.get(p));
+    await writeFileAtomic(p, wanted.get(p));
   for (const p of stale)
-    await fs2.unlink(p);
-  console.log(`${files.length - 2} screen hook(s) in ${path2.relative(process.cwd(), out) || "."}: ${changed.length} written, ${stale.length} removed.`);
+    await fs3.unlink(p);
+  console.log(`${files.length - 2} screen hook(s) in ${path3.relative(process.cwd(), out) || "."}: ${changed.length} written, ${stale.length} removed.`);
   return 0;
 }
-var TYPES = { ".html": "text/html; charset=utf-8", ".js": "text/javascript", ".css": "text/css", ".svg": "image/svg+xml", ".map": "application/json", ".woff2": "font/woff2" };
-async function body(req, limit = 20 * 1024 * 1024) {
-  const chunks = [];
-  let size = 0;
-  for await (const c of req) {
-    size += c.length;
-    if (size > limit)
-      throw new Error("Body too large.");
-    chunks.push(c);
-  }
-  return Buffer.concat(chunks).toString("utf8");
-}
 async function runStudio(filePath, flags) {
   const port = Number(flags.port ?? 5180);
-  const base = path2.dirname(filePath);
-  parseBindingsFile(await fs2.readFile(filePath, "utf8"));
-  const app = fileURLToPath(new URL("./app/", import.meta.url));
+  parseBindingsFile(await fs3.readFile(filePath, "utf8"));
   const origins = new Set([`http://localhost:${port}`, `http://127.0.0.1:${port}`]);
-  const send = (res, status, text, type = "text/plain; charset=utf-8") => {
-    res.writeHead(status, { "Content-Type": type, "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff" }).end(text);
-  };
+  const allowed = (req) => origins.has(`http://${req.headers.host}`) && (!req.headers.origin || origins.has(String(req.headers.origin)));
+  const handle = createStudioHandler({ file: filePath, prefix: "", allowed });
   const server = createServer(async (req, res) => {
-    try {
-      const host = req.headers.host ?? "";
-      if (!origins.has(`http://${host}`))
-        return send(res, 403, "Forbidden host.");
-      if (req.headers.origin && !origins.has(req.headers.origin))
-        return send(res, 403, "Forbidden origin.");
-      const url = new URL(req.url ?? "/", `http://${host}`);
-      if (url.pathname === "/api/bindings") {
-        if (req.method === "GET")
-          return send(res, 200, await fs2.readFile(filePath, "utf8"), "application/json");
-        if (req.method === "PUT") {
-          const text = await body(req);
-          try {
-            parseBindingsFile(text);
-          } catch (e) {
-            return send(res, 400, e.message);
-          }
-          await writeFile(filePath, text);
-          return send(res, 204, "");
-        }
-        return send(res, 405, "Method not allowed.");
-      }
-      if (url.pathname === "/api/openapi" && req.method === "GET") {
-        const src = url.searchParams.get("src") ?? "";
-        try {
-          return send(res, 200, await readDocs(src, base), src.endsWith(".json") ? "application/json" : "text/yaml; charset=utf-8");
-        } catch (e) {
-          return send(res, 502, e.message);
-        }
-      }
-      if (req.method !== "GET")
-        return send(res, 405, "Method not allowed.");
-      const rel = url.pathname === "/" ? "index.html" : decodeURIComponent(url.pathname.slice(1));
-      const target = path2.resolve(app, rel);
-      if (!target.startsWith(app))
-        return send(res, 404, "Not found.");
-      const data = await fs2.readFile(target).catch(() => null);
-      if (!data)
-        return send(res, 404, "Not found.");
-      res.writeHead(200, { "Content-Type": TYPES[path2.extname(target)] ?? "application/octet-stream", "X-Content-Type-Options": "nosniff" }).end(data);
-    } catch (e) {
-      send(res, 500, e.message);
+    if (!origins.has(`http://${req.headers.host}`)) {
+      res.writeHead(403).end("Forbidden host.");
+      return;
     }
+    await handle(req, res);
   });
   server.listen(port, "127.0.0.1", () => console.log(`Binding studio: http://localhost:${port}
 Editing ${filePath}. Ctrl+C to stop.`));
@@ -953,7 +990,7 @@ Editing ${filePath}. Ctrl+C to stop.`));
 async function main() {
   const [cmd, ...argv] = process.argv.slice(2);
   const { rest, flags } = args(argv);
-  const filePath = path2.resolve(rest[0] ?? "bindings.json");
+  const filePath = path3.resolve(rest[0] ?? "bindings.json");
   if (cmd === "studio")
     return runStudio(filePath, flags);
   if (cmd === "generate")

package/dist/overlay.js

@@ -0,0 +1,24 @@
+function m(o,i){let n;for(let e of i)if(o.startsWith(e+".")&&(!n||e.length>n.length))n=e;return n}function b(o,i){let n=new Map;for(let s of o){let r=m(s,i);if(r)n.set(r,(n.get(r)??0)+1)}let e;for(let[s,r]of n){let l=e?n.get(e):-1;if(r>l||r===l&&s.length>e.length)e=s}return e}var y=new URL(".",import.meta.url).pathname,c="data-component-id",p=null;async function x(){if(p)return p;try{p=((await(await fetch(y+"api/bindings",{cache:"no-store"})).json()).screens??[]).map((i)=>i.id)}catch{p=[]}return p}var f=(o)=>o.getClientRects().length>0&&getComputedStyle(o).visibility!=="hidden";function w(){let o=[...document.querySelectorAll('dialog[open], [role="dialog"], [role="alertdialog"], [aria-modal="true"]')].filter(f);for(let i of o.reverse()){let n=[...i.querySelectorAll(`[${c}]`)].filter(f).map((e)=>e.getAttribute(c));if(n.length)return n}return[...document.querySelectorAll(`[${c}]`)].filter(f).map((i)=>i.getAttribute(c))}var v=`
+:host { all: initial; }
+.fab { position: fixed; z-index: 2147483000; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
+  display: grid; grid-template-columns: auto 0fr; align-items: center; height: 44px; padding: 0 13px; border-radius: 10px; cursor: pointer;
+  border: 1px solid #e2e8f0; background: #fff; color: #0f172a; font: 500 13px/1 Inter, system-ui, -apple-system, sans-serif;
+  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.18);
+  transition: grid-template-columns 240ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.7,.2,1); }
+.fab svg { color: #3b82f6; display: block; }
+.fab span { overflow: hidden; }
+.fab span > span { display: block; padding-left: 8px; white-space: nowrap; opacity: 0; transition: opacity 180ms ease; }
+.fab:hover, .fab:focus-visible { grid-template-columns: auto 1fr; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px -8px rgba(15,23,42,.24); }
+.fab:hover span > span, .fab:focus-visible span > span { opacity: 1; transition-delay: 60ms; }
+.fab:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.fab[hidden] { display: none; }
+dialog { width: min(1440px, calc(100vw - 32px)); height: min(920px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0;
+  border: 0; border-radius: 12px; overflow: hidden; background: #f8fafc; box-shadow: 0 24px 64px -16px rgba(15,23,42,.35); animation: in 240ms cubic-bezier(.2,.7,.2,1); }
+dialog::backdrop { background: rgba(15,23,42,.32); backdrop-filter: blur(2px); }
+iframe { width: 100%; height: 100%; border: 0; display: block; }
+.hl { position: fixed; z-index: 2147482999; pointer-events: none; border: 2px solid #3b82f6; border-radius: 6px; background: rgba(59,130,246,.08); display: none; }
+@keyframes in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
+@media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
+`,k='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 7 4 12l5 5M15 7l5 5-5 5"/></svg>';function h(){if(document.getElementById("api-binding-overlay"))return;let o=document.createElement("div");o.id="api-binding-overlay";let i=o.attachShadow({mode:"open"});i.innerHTML=`<style>${v}</style>
+    <button class="fab" type="button" aria-label="Bind API" title="Bind API (Alt+click a component to open it)">${k}<span><span>Bind API</span></span></button>
+    <dialog aria-label="Bind API"></dialog><div class="hl"></div>`,document.body.appendChild(o);let n=i.querySelector(".fab"),e=i.querySelector("dialog"),s=i.querySelector(".hl"),r=async(t)=>{let a=await x(),d=t?void 0:b(w(),a),u=new URLSearchParams({embed:"1"});if(d)u.set("screen",d);if(t)u.set("component",t);e.innerHTML=`<iframe title="Bind API studio" src="${y}?${u}"></iframe>`,n.hidden=!0,e.showModal()},l=()=>{if(!e.open)return;e.close(),e.innerHTML="",n.hidden=!1,n.focus()};n.addEventListener("click",()=>void r()),e.addEventListener("close",l),window.addEventListener("message",(t)=>{if(t.origin===location.origin&&t.data==="api-binding:close")l()});let g=(t)=>t.altKey&&!e.open?t.target?.closest?.(`[${c}]`)??null:null;document.addEventListener("click",(t)=>{let a=g(t);if(!a)return;t.preventDefault(),t.stopPropagation(),r(a.getAttribute(c))},!0),document.addEventListener("mousemove",(t)=>{let a=g(t);if(!a){s.style.display="none";return}let d=a.getBoundingClientRect();Object.assign(s.style,{display:"block",left:`${d.left-2}px`,top:`${d.top-2}px`,width:`${d.width+4}px`,height:`${d.height+4}px`})},{passive:!0}),document.addEventListener("keyup",(t)=>{if(t.key==="Alt")s.style.display="none"})}if(document.body)h();else document.addEventListener("DOMContentLoaded",h);

package/dist/server/handler.d.ts

@@ -0,0 +1,18 @@
+/** Studio HTTP handling shared by the CLI server and the Vite plugin: the studio page, the bindings file, the docs. */
+import type { IncomingMessage, ServerResponse } from "node:http";
+export interface StudioHandlerOptions {
+    /** Absolute path of bindings.json. */
+    file: string;
+    /** Path prefix the studio is served under, e.g. "" or "/__binding". */
+    prefix: string;
+    /** True when the request may read and write the file (host and origin checks live with the caller). */
+    allowed: (req: IncomingMessage) => boolean;
+}
+export declare const APP_DIR: string;
+export declare const OVERLAY_FILE: string;
+/** The OpenAPI text: fetched for a URL, read for a .yaml/.yml/.json path relative to `base`. */
+export declare function readDocs(src: string, base: string): Promise<string>;
+/** Writes atomically, so an interrupted save never leaves half a file. */
+export declare function writeFileAtomic(file: string, text: string): Promise<void>;
+/** Handles a request under `prefix`. Returns false when the path is not the studio's, so the caller can pass it on. */
+export declare function createStudioHandler({ file, prefix, allowed }: StudioHandlerOptions): (req: IncomingMessage, res: ServerResponse) => Promise<boolean>;

package/dist/studio/BindingStudio.d.ts

@@ -8,9 +8,11 @@ export interface BindingStudioProps {
     docsUrl?: (openapi: string) => string;
     /** Screen to open first. */
     initialScreen?: ScreenId;
+    /** Component to open first; its screen is found from its id. */
+    initialComponent?: string;
     /** Shown in the top bar. */
     title?: string;
     /** Shows a close button in the top bar. */
     onClose?: () => void;
 }
-export declare function BindingStudio({ store, docsUrl, initialScreen, title, onClose }: BindingStudioProps): React.JSX.Element;
+export declare function BindingStudio({ store, docsUrl, initialScreen, initialComponent, title, onClose }: BindingStudioProps): React.JSX.Element;

package/dist/studio/index.js

@@ -2,6 +2,7 @@ import {
   catalogFromText2,
   loadCatalog2,
   humanize,
+  screenOf2,
   fromFile2,
   toFile2,
   createEngine2,
@@ -2471,7 +2472,7 @@ var EMPTY_HINT = /* @__PURE__ */ jsxs16("aside", {
     })
   ]
 });
-function BindingStudio({ store, docsUrl = same, initialScreen, title = "Bind API", onClose }) {
+function BindingStudio({ store, docsUrl = same, initialScreen, initialComponent, title = "Bind API", onClose }) {
   const [file, setFile] = React14.useState(null);
   const [fileError, setFileError] = React14.useState();
   const latest = React14.useRef({ file: null, index: {} });
@@ -2626,13 +2627,14 @@ function BindingStudio({ store, docsUrl = same, initialScreen, title = "Bind API
     initial: model.index,
     save,
     title,
-    initialScreen,
+    initialScreen: initialComponent ? screenOf2(initialComponent, model.fw.registry.screens.map((s) => s.id)) ?? initialScreen : initialScreen,
+    initialComponent,
     settingsButton
   });
 }
-function Workbench({ fw, initial, save, title, initialScreen, settingsButton }) {
+function Workbench({ fw, initial, save, title, initialScreen, initialComponent, settingsButton }) {
   const { index, loaded, status, removed, put, drop, undo, dismiss, retry } = useBindings(initial, save);
-  const [place, go] = React14.useState({ screen: initialScreen });
+  const [place, go] = React14.useState({ screen: initialScreen, component: initialComponent });
   const engine = React14.useMemo(() => createEngine2(fw, index), [fw, index]);
   const screen = place.screen && engine.SCR.get(place.screen) || fw.registry.screens[0];
   const comp = screen && place.component ? engine.compOf(screen.id, place.component) : undefined;
@@ -2734,5 +2736,5 @@ export {
   BindingStudio
 };
 
-//# debugId=5CC922DF10302EB664756E2164756E21
+//# debugId=033A885DE9DD742964756E2164756E21
 //# sourceMappingURL=index.js.map