api_binding_ui 2.0.1 → 3.0.0

package/dist/studio/index.js

@@ -1,21 +1,15 @@
 import {
-  catalogFromOpenApi2,
-  localStorageAdapter2,
-  toManifest2,
-  markDirty,
-  savePending,
-  loadAll,
-  putBinding,
-  dropBinding,
-  parseManifests,
+  catalogFromText2,
+  loadCatalog2,
   humanize,
+  fromFile2,
+  toFile2,
   createEngine2,
-  validateRegistry2,
-  useBindingRuntime
-} from "../index-3q1vx729.js";
+  validateRegistry2
+} from "../index-jj8twdw9.js";
 
 // src/studio/BindingStudio.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 
 // src/studio/ComponentList.tsx
 import * as React2 from "react";
@@ -2052,58 +2046,151 @@ function Navigator({ engine, current, onPick }) {
 // src/studio/SettingsPanel.tsx
 import * as React12 from "react";
 
-// src/studio/useSettings.ts
+// src/studio/useCatalog.ts
 import * as React11 from "react";
 var DEFAULT_DOCS_URL = "https://apidocs.highradius.com/documentation-ui/index.yaml";
-var KEY = "abs.settings.v1";
-function read(defaults) {
-  try {
-    const raw = globalThis.localStorage?.getItem(KEY);
-    const saved = raw ? JSON.parse(raw) : {};
-    return { docsUrl: typeof saved.docsUrl === "string" && saved.docsUrl ? saved.docsUrl : defaults.docsUrl };
-  } catch {
-    return defaults;
-  }
-}
-function useSettings(defaults) {
-  const [settings, setSettings] = React11.useState(() => read(defaults));
-  const update = React11.useCallback((patch) => {
-    setSettings((prev) => {
-      const next = { ...prev, ...patch };
-      try {
-        globalThis.localStorage?.setItem(KEY, JSON.stringify(next));
-      } catch {}
-      return next;
+function useCatalog(url, provided) {
+  const [state, setState] = React11.useState(() => provided ? { status: "ready", catalog: provided, loadedAt: new Date, source: "provided" } : { status: "loading" });
+  const [nonce, setNonce] = React11.useState(0);
+  const [pasted, setPasted] = React11.useState(null);
+  React11.useEffect(() => {
+    if (pasted) {
+      setState({ status: "ready", catalog: pasted, loadedAt: new Date, source: "pasted" });
+      return;
+    }
+    if (provided) {
+      setState({ status: "ready", catalog: provided, loadedAt: new Date, source: "provided" });
+      return;
+    }
+    if (!url)
+      return;
+    const ctrl = new AbortController;
+    setState((s) => ({ status: "loading", catalog: s.catalog }));
+    loadCatalog2(url, { signal: ctrl.signal }).then((catalog) => setState({ status: "ready", catalog, loadedAt: new Date, source: "url" }), (e) => {
+      if (!ctrl.signal.aborted)
+        setState((s) => ({ status: "error", catalog: s.catalog, error: e instanceof Error ? e.message : String(e) }));
     });
+    return () => ctrl.abort();
+  }, [url, provided, nonce, pasted]);
+  const reload = React11.useCallback(() => {
+    setPasted(null);
+    setNonce((n) => n + 1);
   }, []);
-  return [settings, update];
+  const loadPasted = React11.useCallback((text) => new Promise((resolve) => {
+    setTimeout(() => {
+      try {
+        setPasted(catalogFromText2(text, "pasted"));
+        resolve(undefined);
+      } catch (e) {
+        resolve(e instanceof Error ? e.message : String(e));
+      }
+    }, 0);
+  }), []);
+  return [state, reload, loadPasted];
 }
 
 // src/studio/SettingsPanel.tsx
 import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment9 } from "react/jsx-runtime";
 var TIME = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" });
-function isUrl(v) {
-  try {
-    const u = new URL(v, location.href);
-    return u.protocol === "https:" || u.protocol === "http:" || u.protocol === "blob:";
-  } catch {
-    return false;
-  }
-}
+var isSource = (v) => v.trim().length > 0 && !/^\s*(javascript|data):/i.test(v);
 function docsSummary(c) {
   if (c.status === "loading")
     return "Loading…";
   if (c.status === "error")
     return c.error;
   const products = new Set(c.catalog.operations.map((o) => o.product).filter(Boolean));
-  return `${products.size || 1} ${products.size === 1 ? "product" : "products"} · ${c.catalog.operations.length} APIs · loaded ${TIME.format(c.loadedAt)}`;
+  const where = c.source === "pasted" ? "Pasted file · " : "";
+  return `${where}${products.size || 1} ${products.size === 1 ? "product" : "products"} · ${c.catalog.operations.length} ${c.catalog.operations.length === 1 ? "API" : "APIs"} · loaded ${TIME.format(c.loadedAt)}`;
 }
-function SettingsPanel({ docsUrl, onDocsUrl, catalog, onReload, manifests, onImport, onClose }) {
+var SIZE = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });
+var kb = (chars) => chars < 1e6 ? `${SIZE.format(chars / 1000)} KB` : `${SIZE.format(chars / 1e6)} MB`;
+function PasteDocs({ onPaste, onDone }) {
+  const area = React12.useRef(null);
+  const [size, setSize] = React12.useState(0);
+  const [busy, setBusy] = React12.useState(false);
+  const [error, setError] = React12.useState();
+  const load = async () => {
+    const text = area.current?.value ?? "";
+    setBusy(true);
+    setError(undefined);
+    const problem = await onPaste(text);
+    setBusy(false);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    if (area.current)
+      area.current.value = "";
+    onDone();
+  };
+  return /* @__PURE__ */ jsxs15("div", {
+    className: "abs-paste",
+    children: [
+      /* @__PURE__ */ jsx17("textarea", {
+        ref: area,
+        id: "abs-docs-paste",
+        className: "abs-input abs-paste-area",
+        rows: 7,
+        wrap: "off",
+        spellCheck: false,
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoFocus: true,
+        placeholder: "Paste the contents of index.yaml (or the JSON version)",
+        "aria-label": "OpenAPI document",
+        "aria-describedby": "abs-paste-note",
+        "aria-invalid": !!error,
+        onInput: (e) => setSize(e.currentTarget.value.length)
+      }),
+      /* @__PURE__ */ jsxs15("div", {
+        className: "abs-set-row",
+        children: [
+          /* @__PURE__ */ jsx17("button", {
+            type: "button",
+            className: "abs-btn abs-btn-primary",
+            onClick: () => void load(),
+            disabled: busy || size === 0,
+            children: busy ? /* @__PURE__ */ jsxs15(Fragment9, {
+              children: [
+                /* @__PURE__ */ jsx17(Icon, {
+                  name: "refresh",
+                  size: 14,
+                  className: "abs-spin"
+                }),
+                "Reading…"
+              ]
+            }) : "Load"
+          }),
+          /* @__PURE__ */ jsx17("button", {
+            type: "button",
+            className: "abs-btn abs-btn-ghost",
+            onClick: onDone,
+            disabled: busy,
+            children: "Cancel"
+          }),
+          /* @__PURE__ */ jsx17("span", {
+            className: "abs-paste-size",
+            "aria-live": "polite",
+            children: size ? kb(size) : ""
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx17("p", {
+        id: "abs-paste-note",
+        className: "abs-set-status" + (error ? " is-error" : ""),
+        role: error ? "alert" : undefined,
+        children: error ?? "Used for this session only. Nothing is saved; the URL is used again next time."
+      })
+    ]
+  });
+}
+function SettingsPanel({ docsUrl, onDocsUrl, catalog, onReload, onPaste, onClose }) {
   const [draft, setDraft] = React12.useState(docsUrl);
-  const [importMsg, setImportMsg] = React12.useState(null);
+  const [pasting, setPasting] = React12.useState(false);
+  const usingPaste = catalog.status === "ready" && catalog.source === "pasted";
   const panel = React12.useRef(null);
-  const file = React12.useRef(null);
-  const valid = isUrl(draft);
+  const valid = isSource(draft);
   const dirty = draft.trim() !== docsUrl;
   React12.useEffect(() => {
     const key = (e) => {
@@ -2132,192 +2219,144 @@ function SettingsPanel({ docsUrl, onDocsUrl, catalog, onReload, manifests, onImp
     else
       onReload();
   };
-  const download = () => {
-    const blob = new Blob([JSON.stringify(manifests(), null, 2) + `
-`], { type: "application/json" });
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = "bindings.json";
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
-  };
-  const readFile = async (f) => {
-    if (!f)
-      return;
-    try {
-      const list = parseManifests(await f.text());
-      onImport(list);
-      setImportMsg({ ok: true, text: `Imported ${list.length} ${list.length === 1 ? "screen" : "screens"}.` });
-    } catch (err) {
-      setImportMsg({ ok: false, text: err instanceof Error ? err.message : "The file could not be read." });
-    } finally {
-      if (file.current)
-        file.current.value = "";
-    }
-  };
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsx17("div", {
     className: "abs-settings abs-pop",
     ref: panel,
     role: "dialog",
     "aria-label": "Settings",
-    children: [
-      /* @__PURE__ */ jsxs15("form", {
-        className: "abs-set-sec",
-        onSubmit: apply,
-        children: [
-          /* @__PURE__ */ jsx17("label", {
-            className: "abs-set-h",
-            htmlFor: "abs-docs-url",
-            children: "API docs"
-          }),
-          /* @__PURE__ */ jsx17("p", {
-            className: "abs-set-d",
-            children: "The OpenAPI file every API in the studio is read from."
-          }),
-          /* @__PURE__ */ jsxs15("div", {
-            className: "abs-set-row",
-            children: [
-              /* @__PURE__ */ jsx17("input", {
-                id: "abs-docs-url",
-                name: "docsUrl",
-                type: "url",
-                inputMode: "url",
-                autoComplete: "off",
-                spellCheck: false,
-                className: "abs-input" + (valid ? "" : " is-invalid"),
-                value: draft,
-                onChange: (e) => setDraft(e.target.value),
-                "aria-invalid": !valid,
-                "aria-describedby": "abs-docs-status"
-              }),
-              /* @__PURE__ */ jsx17("button", {
-                type: "submit",
-                className: "abs-btn abs-btn-primary",
-                disabled: !valid || catalog.status === "loading",
-                children: dirty ? "Use" : /* @__PURE__ */ jsxs15(Fragment9, {
-                  children: [
-                    /* @__PURE__ */ jsx17(Icon, {
-                      name: "refresh",
-                      size: 14,
-                      className: catalog.status === "loading" ? "abs-spin" : ""
-                    }),
-                    "Reload"
-                  ]
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx17("p", {
-            id: "abs-docs-status",
-            className: "abs-set-status" + (catalog.status === "error" ? " is-error" : ""),
-            "aria-live": "polite",
-            children: valid ? docsSummary(catalog) : "Enter a full URL, for example " + DEFAULT_DOCS_URL
-          }),
-          docsUrl !== DEFAULT_DOCS_URL ? /* @__PURE__ */ jsx17("button", {
-            type: "button",
-            className: "abs-link abs-more",
-            onClick: () => {
-              setDraft(DEFAULT_DOCS_URL);
-              onDocsUrl(DEFAULT_DOCS_URL);
-            },
-            children: "Use the default URL"
-          }) : null
-        ]
-      }),
-      /* @__PURE__ */ jsxs15("div", {
-        className: "abs-set-sec",
-        children: [
-          /* @__PURE__ */ jsx17("span", {
-            className: "abs-set-h",
-            children: "Bindings"
-          }),
-          /* @__PURE__ */ jsx17("p", {
-            className: "abs-set-d",
-            children: "Download to commit them with the app. Import replaces the screens the file contains."
-          }),
-          /* @__PURE__ */ jsxs15("div", {
-            className: "abs-set-row",
-            children: [
-              /* @__PURE__ */ jsxs15("button", {
-                type: "button",
-                className: "abs-btn",
-                onClick: download,
-                children: [
-                  /* @__PURE__ */ jsx17(Icon, {
-                    name: "download",
-                    size: 14
-                  }),
-                  "Download"
-                ]
-              }),
-              /* @__PURE__ */ jsxs15("button", {
-                type: "button",
-                className: "abs-btn",
-                onClick: () => file.current?.click(),
+    children: /* @__PURE__ */ jsxs15("form", {
+      className: "abs-set-sec",
+      onSubmit: apply,
+      children: [
+        /* @__PURE__ */ jsx17("label", {
+          className: "abs-set-h",
+          htmlFor: "abs-docs-url",
+          children: "API docs"
+        }),
+        /* @__PURE__ */ jsx17("p", {
+          className: "abs-set-d",
+          children: "The OpenAPI file every API is read from: a URL, or a path next to the bindings file."
+        }),
+        /* @__PURE__ */ jsxs15("div", {
+          className: "abs-set-row",
+          children: [
+            /* @__PURE__ */ jsx17("input", {
+              id: "abs-docs-url",
+              name: "docsUrl",
+              type: "text",
+              inputMode: "url",
+              autoComplete: "off",
+              spellCheck: false,
+              className: "abs-input" + (valid ? "" : " is-invalid"),
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              "aria-invalid": !valid,
+              "aria-describedby": "abs-docs-status"
+            }),
+            /* @__PURE__ */ jsx17("button", {
+              type: "submit",
+              className: "abs-btn abs-btn-primary",
+              disabled: !valid || catalog.status === "loading",
+              children: dirty ? "Use" : /* @__PURE__ */ jsxs15(Fragment9, {
                 children: [
                   /* @__PURE__ */ jsx17(Icon, {
-                    name: "upload",
-                    size: 14
+                    name: "refresh",
+                    size: 14,
+                    className: catalog.status === "loading" ? "abs-spin" : ""
                   }),
-                  "Import…"
+                  "Reload"
                 ]
-              }),
-              /* @__PURE__ */ jsx17("input", {
-                ref: file,
-                type: "file",
-                accept: "application/json,.json",
-                hidden: true,
-                onChange: (e) => void readFile(e.target.files?.[0])
               })
-            ]
-          }),
-          importMsg ? /* @__PURE__ */ jsx17("p", {
-            className: "abs-set-status" + (importMsg.ok ? "" : " is-error"),
-            role: "status",
-            children: importMsg.text
-          }) : null
-        ]
-      })
-    ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx17("p", {
+          id: "abs-docs-status",
+          className: "abs-set-status" + (catalog.status === "error" ? " is-error" : ""),
+          "aria-live": "polite",
+          children: valid ? docsSummary(catalog) : "Enter a URL or a path, for example " + DEFAULT_DOCS_URL
+        }),
+        pasting ? /* @__PURE__ */ jsx17(PasteDocs, {
+          onPaste,
+          onDone: () => setPasting(false)
+        }) : /* @__PURE__ */ jsxs15("div", {
+          className: "abs-set-links",
+          children: [
+            usingPaste ? /* @__PURE__ */ jsxs15("button", {
+              type: "button",
+              className: "abs-link",
+              onClick: onReload,
+              children: [
+                /* @__PURE__ */ jsx17(Icon, {
+                  name: "refresh",
+                  size: 14
+                }),
+                "Use the URL again"
+              ]
+            }) : /* @__PURE__ */ jsxs15("button", {
+              type: "button",
+              className: "abs-link",
+              onClick: () => setPasting(true),
+              children: [
+                /* @__PURE__ */ jsx17(Icon, {
+                  name: "upload",
+                  size: 14
+                }),
+                "Paste the file instead"
+              ]
+            }),
+            docsUrl !== DEFAULT_DOCS_URL ? /* @__PURE__ */ jsx17("button", {
+              type: "button",
+              className: "abs-link",
+              onClick: () => {
+                setDraft(DEFAULT_DOCS_URL);
+                onDocsUrl(DEFAULT_DOCS_URL);
+              },
+              children: "Use the default URL"
+            }) : null
+          ]
+        })
+      ]
+    })
   });
 }
 
 // src/studio/useBindings.ts
 import * as React13 from "react";
-function useBindings(fw, adapter) {
-  const [index, setIndex] = React13.useState({});
-  const [loaded, setLoaded] = React13.useState(false);
+
+// src/framework/store.ts
+function putBinding(idx, screen, b) {
+  const list = (idx[screen] ?? []).filter((x) => !(x.component === b.component && x.slot === b.slot));
+  return { ...idx, [screen]: [...list, b] };
+}
+function dropBinding(idx, screen, component, slot) {
+  return { ...idx, [screen]: (idx[screen] ?? []).filter((x) => !(x.component === component && x.slot === slot)) };
+}
+
+// src/studio/useBindings.ts
+function useBindings(initial, save) {
+  const [index, setIndex] = React13.useState(initial);
   const [status, setStatus] = React13.useState("idle");
   const [removed, setRemoved] = React13.useState(null);
-  const pending = React13.useRef(new Map);
+  const edits = React13.useRef(0);
   const latest = React13.useRef(index);
   latest.current = index;
-  const screenIds = fw?.registry.screens.map((s) => s.id).join(`
-`) ?? "";
-  React13.useEffect(() => {
-    if (!screenIds)
-      return;
-    let live = true;
-    loadAll(adapter, screenIds.split(`
-`)).then((i) => {
-      if (live) {
-        setIndex(i);
-        setLoaded(true);
-      }
-    });
-    return () => {
-      live = false;
-    };
-  }, [adapter, screenIds]);
   const flush = React13.useCallback(async () => {
-    if (!pending.current.size || !fw)
+    const at = edits.current;
+    if (!at)
       return;
     setStatus("saving");
-    const failed = await savePending(adapter, fw, latest.current, pending.current);
-    setStatus(failed.length ? "failed" : pending.current.size ? "saving" : "saved");
-  }, [adapter, fw]);
+    try {
+      await save(latest.current);
+      if (edits.current === at)
+        edits.current = 0;
+      setStatus(edits.current ? "saving" : "saved");
+    } catch {
+      setStatus("failed");
+    }
+  }, [save]);
   React13.useEffect(() => {
-    if (!pending.current.size)
+    if (!edits.current)
       return;
     setStatus("saving");
     const t = setTimeout(flush, 400);
@@ -2328,21 +2367,21 @@ function useBindings(fw, adapter) {
   }, [flush]);
   React13.useEffect(() => {
     const warn = (e) => {
-      if (pending.current.size)
+      if (edits.current)
         e.preventDefault();
     };
     window.addEventListener("beforeunload", warn);
     return () => window.removeEventListener("beforeunload", warn);
   }, []);
   const put = React13.useCallback((screen, b) => {
-    markDirty(pending.current, screen);
+    edits.current++;
     setIndex((i) => putBinding(i, screen, b));
   }, []);
   const drop = React13.useCallback((screen, component, slot) => {
     const binding = latest.current[screen]?.find((x) => x.component === component && x.slot === slot);
     if (binding)
       setRemoved({ screen, binding });
-    markDirty(pending.current, screen);
+    edits.current++;
     setIndex((i) => dropBinding(i, screen, component, slot));
   }, []);
   const undo = React13.useCallback(() => {
@@ -2351,72 +2390,12 @@ function useBindings(fw, adapter) {
     setRemoved(null);
   }, [put, removed]);
   const dismiss = React13.useCallback(() => setRemoved(null), []);
-  const importManifests = React13.useCallback((manifests) => {
-    manifests.forEach((m) => markDirty(pending.current, m.screen));
-    setIndex((i) => ({ ...i, ...Object.fromEntries(manifests.map((m) => [m.screen, m.bindings])) }));
-  }, []);
-  return { index, loaded, status, removed, put, drop, undo, dismiss, importManifests, retry: flush };
-}
-
-// src/studio/useCatalog.ts
-import * as React14 from "react";
-
-// src/framework/loadCatalog.ts
-import { parse } from "yaml";
-class CatalogLoadError extends Error {
-  url;
-  constructor(message, url) {
-    super(message);
-    this.url = url;
-    this.name = "CatalogLoadError";
-  }
-}
-async function loadCatalog(url, init) {
-  let res;
-  try {
-    res = await fetch(url, { ...init, headers: { Accept: "application/yaml, application/json, text/yaml, */*", ...init?.headers } });
-  } catch {
-    throw new CatalogLoadError("The docs could not be reached. Check the URL, your network, and that the docs server allows this site (CORS).", url);
-  }
-  if (!res.ok)
-    throw new CatalogLoadError(`The docs server answered ${res.status} ${res.statusText}. Check the URL.`, url);
-  const text = await res.text();
-  let doc;
-  try {
-    doc = text.trimStart().startsWith("{") ? JSON.parse(text) : parse(text);
-  } catch {
-    throw new CatalogLoadError("The file is not valid JSON or YAML.", url);
-  }
-  try {
-    return catalogFromOpenApi2(doc, { url });
-  } catch (e) {
-    throw new CatalogLoadError(e instanceof Error ? e.message : "The file is not an OpenAPI document.", url);
-  }
-}
-
-// src/studio/useCatalog.ts
-function useCatalog(url, provided) {
-  const [state, setState] = React14.useState(() => provided ? { status: "ready", catalog: provided, loadedAt: new Date } : { status: "loading" });
-  const [nonce, setNonce] = React14.useState(0);
-  React14.useEffect(() => {
-    if (provided) {
-      setState({ status: "ready", catalog: provided, loadedAt: new Date });
-      return;
-    }
-    const ctrl = new AbortController;
-    setState((s) => ({ status: "loading", catalog: s.catalog }));
-    loadCatalog(url, { signal: ctrl.signal }).then((catalog) => setState({ status: "ready", catalog, loadedAt: new Date }), (e) => {
-      if (!ctrl.signal.aborted)
-        setState((s) => ({ status: "error", catalog: s.catalog, error: e instanceof Error ? e.message : String(e) }));
-    });
-    return () => ctrl.abort();
-  }, [url, provided, nonce]);
-  const reload = React14.useCallback(() => setNonce((n) => n + 1), []);
-  return [state, reload];
+  return { index, loaded: true, status, removed, put, drop, undo, dismiss, retry: flush };
 }
 
 // src/studio/BindingStudio.tsx
 import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment10 } from "react/jsx-runtime";
+var same = (s) => s;
 function SaveState({ status, onRetry }) {
   return /* @__PURE__ */ jsx18("span", {
     className: "abs-saved is-" + status,
@@ -2452,7 +2431,7 @@ function SaveState({ status, onRetry }) {
   });
 }
 function UndoToast({ removed, label, onUndo, onDismiss }) {
-  React15.useEffect(() => {
+  React14.useEffect(() => {
     const t = setTimeout(onDismiss, 6000);
     return () => clearTimeout(t);
   }, [removed, onDismiss]);
@@ -2492,15 +2471,45 @@ var EMPTY_HINT = /* @__PURE__ */ jsxs16("aside", {
     })
   ]
 });
-function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, initialScreen, title = "Bind API", onClose }) {
-  const [settings, updateSettings] = useSettings({ docsUrl });
-  const [catalogState, reloadCatalog] = useCatalog(settings.docsUrl, framework.catalog);
-  const [settingsOpen, setSettingsOpen] = React15.useState(false);
-  const closeSettings = React15.useCallback(() => setSettingsOpen(false), []);
-  const adapter = React15.useMemo(() => persistence ?? localStorageAdapter2(), [persistence]);
+function BindingStudio({ store, docsUrl = same, initialScreen, title = "Bind API", onClose }) {
+  const [file, setFile] = React14.useState(null);
+  const [fileError, setFileError] = React14.useState();
+  const latest = React14.useRef({ file: null, index: {} });
+  React14.useEffect(() => {
+    let live = true;
+    store.load().then((f) => {
+      if (live) {
+        latest.current.file = f;
+        setFile(f);
+      }
+    }, (e) => live && setFileError(e instanceof Error ? e.message : String(e)));
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  const [catalogState, reloadCatalog, loadPasted] = useCatalog(file ? docsUrl(file.openapi) : "");
+  const [settingsOpen, setSettingsOpen] = React14.useState(false);
+  const closeSettings = React14.useCallback(() => setSettingsOpen(false), []);
   const catalog = catalogState.catalog;
-  const fw = React15.useMemo(() => catalog ? { ...framework, catalog, registry: validateRegistry2({ ...framework, catalog }).registry } : null, [framework, catalog]);
-  const binds = useBindings(fw, adapter);
+  const model = React14.useMemo(() => {
+    if (!file || !catalog)
+      return null;
+    const { fw, index } = fromFile2(file, catalog);
+    return { fw: { ...fw, registry: validateRegistry2(fw).registry }, index };
+  }, [file?.kinds, file?.screens, file?.components, catalog]);
+  const save = React14.useCallback(async (index) => {
+    latest.current.index = index;
+    if (latest.current.file)
+      await store.save(toFile2(latest.current.file, index));
+  }, [store]);
+  const setOpenapi = (openapi) => {
+    const f = latest.current.file;
+    if (!f)
+      return;
+    latest.current.file = { ...f, openapi };
+    setFile(latest.current.file);
+    store.save(toFile2(latest.current.file, Object.keys(latest.current.index).length ? latest.current.index : model?.index ?? {}));
+  };
   const settingsButton = /* @__PURE__ */ jsxs16("div", {
     className: "abs-settings-wrap",
     children: [
@@ -2529,18 +2538,18 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
           name: "close"
         })
       }) : null,
-      settingsOpen ? /* @__PURE__ */ jsx18(SettingsPanel, {
-        docsUrl: settings.docsUrl,
-        onDocsUrl: (url) => updateSettings({ docsUrl: url }),
+      settingsOpen && file ? /* @__PURE__ */ jsx18(SettingsPanel, {
+        docsUrl: file.openapi,
+        onDocsUrl: setOpenapi,
         catalog: catalogState,
         onReload: reloadCatalog,
-        manifests: () => fw ? Object.entries(binds.index).map(([s, b]) => toManifest2(fw, s, b)) : [],
-        onImport: binds.importManifests,
+        onPaste: loadPasted,
         onClose: closeSettings
       }) : null
     ]
   });
-  if (!fw) {
+  if (!model) {
+    const error = fileError ?? (catalogState.status === "error" ? catalogState.error : undefined);
     return /* @__PURE__ */ jsxs16("div", {
       className: "abs-root",
       children: [
@@ -2557,7 +2566,7 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
         }),
         /* @__PURE__ */ jsx18("div", {
           className: "abs-state-page",
-          children: catalogState.status === "error" ? /* @__PURE__ */ jsxs16(Fragment10, {
+          children: error ? /* @__PURE__ */ jsxs16(Fragment10, {
             children: [
               /* @__PURE__ */ jsx18("span", {
                 className: "abs-empty-ico is-bad",
@@ -2567,12 +2576,12 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
                 })
               }),
               /* @__PURE__ */ jsx18("b", {
-                children: "The API docs did not load"
+                children: fileError ? "The bindings file did not load" : "The API docs did not load"
               }),
               /* @__PURE__ */ jsx18("span", {
-                children: catalogState.error
+                children: error
               }),
-              /* @__PURE__ */ jsxs16("div", {
+              fileError ? null : /* @__PURE__ */ jsxs16("div", {
                 className: "abs-set-row",
                 children: [
                   /* @__PURE__ */ jsxs16("button", {
@@ -2591,7 +2600,7 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
                     type: "button",
                     className: "abs-btn",
                     onClick: () => setSettingsOpen(true),
-                    children: "Change the URL"
+                    children: "Change the URL or paste the file"
                   })
                 ]
               })
@@ -2604,7 +2613,7 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
               }),
               /* @__PURE__ */ jsx18("span", {
                 "aria-live": "polite",
-                children: "Loading API docs…"
+                children: file ? "Loading API docs…" : "Loading bindings…"
               })
             ]
           })
@@ -2613,26 +2622,27 @@ function BindingStudio({ framework, docsUrl = DEFAULT_DOCS_URL, persistence, ini
     });
   }
   return /* @__PURE__ */ jsx18(Workbench, {
-    fw,
-    binds,
+    fw: model.fw,
+    initial: model.index,
+    save,
     title,
     initialScreen,
     settingsButton
   });
 }
-function Workbench({ fw, binds, title, initialScreen, settingsButton }) {
-  const { index, loaded, status, removed, put, drop, undo, dismiss, retry } = binds;
-  const [place, go] = React15.useState({ screen: initialScreen });
-  const engine = React15.useMemo(() => createEngine2(fw, index), [fw, index]);
+function Workbench({ fw, initial, save, title, initialScreen, settingsButton }) {
+  const { index, loaded, status, removed, put, drop, undo, dismiss, retry } = useBindings(initial, save);
+  const [place, go] = React14.useState({ screen: initialScreen });
+  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;
   const screenId = screen?.id;
-  const select = React15.useCallback((component) => go({ screen: screenId, component }), [go, screenId]);
-  const putHere = React15.useCallback((b) => {
+  const select = React14.useCallback((component) => go({ screen: screenId, component }), [go, screenId]);
+  const putHere = React14.useCallback((b) => {
     if (screenId)
       put(screenId, b);
   }, [put, screenId]);
-  const dropHere = React15.useCallback((c, s) => {
+  const dropHere = React14.useCallback((c, s) => {
     if (screenId)
       drop(screenId, c, s);
   }, [drop, screenId]);
@@ -2720,87 +2730,9 @@ function Workbench({ fw, binds, title, initialScreen, settingsButton }) {
     ]
   });
 }
-// src/studio/BindingWidget.tsx
-import * as React16 from "react";
-import { jsx as jsx19, jsxs as jsxs17, Fragment as Fragment11 } from "react/jsx-runtime";
-var fallbackStore = localStorageAdapter2();
-function BindingWidget({ framework, docsUrl, title }) {
-  const runtime = useBindingRuntime();
-  const dialog = React16.useRef(null);
-  const fab = React16.useRef(null);
-  const [state, setState] = React16.useState("closed");
-  const [screen, setScreen] = React16.useState();
-  const open = () => {
-    setScreen(runtime.activeScreen());
-    setState("open");
-  };
-  const requestClose = React16.useCallback(() => setState((s) => s === "open" ? "closing" : s), []);
-  React16.useLayoutEffect(() => {
-    if (state === "open" && !dialog.current?.open)
-      dialog.current?.showModal();
-  }, [state]);
-  const finishClose = (e) => {
-    if (e.target !== dialog.current || state !== "closing")
-      return;
-    dialog.current?.close();
-    setState("closed");
-    runtime.reloadSaved();
-    fab.current?.focus();
-  };
-  return /* @__PURE__ */ jsxs17(Fragment11, {
-    children: [
-      /* @__PURE__ */ jsxs17("button", {
-        ref: fab,
-        type: "button",
-        className: "abs-fab",
-        onClick: open,
-        "aria-haspopup": "dialog",
-        "aria-expanded": state !== "closed",
-        children: [
-          /* @__PURE__ */ jsx19("span", {
-            className: "abs-fab-ico",
-            children: /* @__PURE__ */ jsx19(Icon, {
-              name: "link",
-              size: 18
-            })
-          }),
-          /* @__PURE__ */ jsx19("span", {
-            className: "abs-fab-label",
-            children: /* @__PURE__ */ jsx19("span", {
-              children: title ?? "Bind API"
-            })
-          })
-        ]
-      }),
-      state !== "closed" ? /* @__PURE__ */ jsx19("dialog", {
-        ref: dialog,
-        className: "abs-widget" + (state === "closing" ? " is-closing" : ""),
-        "aria-label": title ?? "Bind API",
-        onCancel: (e) => {
-          e.preventDefault();
-          requestClose();
-        },
-        onClick: (e) => {
-          if (e.target === e.currentTarget)
-            requestClose();
-        },
-        onAnimationEnd: finishClose,
-        children: /* @__PURE__ */ jsx19(BindingStudio, {
-          framework,
-          docsUrl,
-          title,
-          initialScreen: screen,
-          persistence: runtime.persistence ?? fallbackStore,
-          onClose: requestClose
-        })
-      }) : null
-    ]
-  });
-}
 export {
-  BindingStudio,
-  BindingWidget
+  BindingStudio
 };
 
-//# debugId=34079C9B227D68B264756E2164756E21
+//# debugId=5CC922DF10302EB664756E2164756E21
 //# sourceMappingURL=index.js.map