api_binding_ui 1.0.0 → 2.0.0

package/dist/studio/index.js

@@ -0,0 +1,2806 @@
+import {
+  catalogFromOpenApi2,
+  localStorageAdapter2,
+  toManifest2,
+  markDirty,
+  savePending,
+  loadAll,
+  putBinding,
+  dropBinding,
+  parseManifests,
+  humanize,
+  createEngine2,
+  validateRegistry2,
+  useBindingRuntime
+} from "../index-e9twc25y.js";
+
+// src/studio/BindingStudio.tsx
+import * as React15 from "react";
+
+// src/studio/ComponentList.tsx
+import * as React2 from "react";
+
+// src/studio/Collapse.tsx
+import { jsx } from "react/jsx-runtime";
+function Collapse({ open, children }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: "abs-collapse" + (open ? " is-open" : ""),
+    "aria-hidden": !open,
+    children: /* @__PURE__ */ jsx("div", {
+      className: "abs-collapse-in",
+      children
+    })
+  });
+}
+
+// src/studio/icons.tsx
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+var paths = {
+  search: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "7.25",
+        cy: "7.25",
+        r: "4.5"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "m13.5 13.5-2.9-2.9"
+      })
+    ]
+  }),
+  check: /* @__PURE__ */ jsx2("path", {
+    d: "m3.5 8.25 3 3 6-6.5"
+  }),
+  bound: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "m5.6 8.1 1.7 1.7 3.2-3.4"
+      })
+    ]
+  }),
+  suggested: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "2",
+        fill: "currentColor",
+        stroke: "none"
+      })
+    ]
+  }),
+  partial: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M8 2a6 6 0 0 1 0 12z",
+        fill: "currentColor",
+        stroke: "none"
+      })
+    ]
+  }),
+  unbound: /* @__PURE__ */ jsx2("circle", {
+    cx: "8",
+    cy: "8",
+    r: "6",
+    strokeDasharray: "2.2 2.4"
+  }),
+  data: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("ellipse", {
+        cx: "8",
+        cy: "4",
+        rx: "5",
+        ry: "1.75"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M3 4v8c0 .97 2.24 1.75 5 1.75s5-.78 5-1.75V4M3 8c0 .97 2.24 1.75 5 1.75S13 8.97 13 8"
+      })
+    ]
+  }),
+  action: /* @__PURE__ */ jsx2("path", {
+    d: "M8.75 1.75 3.75 9h4.5l-1 5.25 5-7.25h-4.5z"
+  }),
+  row: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("rect", {
+        x: "2",
+        y: "3",
+        width: "12",
+        height: "10",
+        rx: "2"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M2 7h12"
+      })
+    ]
+  }),
+  plus: /* @__PURE__ */ jsx2("path", {
+    d: "M8 3.25v9.5M3.25 8h9.5"
+  }),
+  chevronRight: /* @__PURE__ */ jsx2("path", {
+    d: "m6.25 3.75 4.25 4.25-4.25 4.25"
+  }),
+  chevronDown: /* @__PURE__ */ jsx2("path", {
+    d: "m3.75 6.25 4.25 4.25 4.25-4.25"
+  }),
+  close: /* @__PURE__ */ jsx2("path", {
+    d: "m4.25 4.25 7.5 7.5M11.75 4.25l-7.5 7.5"
+  }),
+  screen: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("rect", {
+        x: "1.75",
+        y: "2.75",
+        width: "12.5",
+        height: "10.5",
+        rx: "2"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M1.75 6h12.5"
+      })
+    ]
+  }),
+  dialog: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("rect", {
+        x: "1.75",
+        y: "2.75",
+        width: "12.5",
+        height: "10.5",
+        rx: "2"
+      }),
+      /* @__PURE__ */ jsx2("rect", {
+        x: "4.75",
+        y: "6",
+        width: "6.5",
+        height: "4.5",
+        rx: "1"
+      })
+    ]
+  }),
+  api: /* @__PURE__ */ jsx2("path", {
+    d: "M5.25 4.5 1.75 8l3.5 3.5M10.75 4.5 14.25 8l-3.5 3.5M9.25 3l-2.5 10"
+  }),
+  trash: /* @__PURE__ */ jsx2("path", {
+    d: "M2.75 4.25h10.5M6.25 4.25v-1.5h3.5v1.5M4.25 4.25l.6 8.5a1 1 0 0 0 1 .9h4.3a1 1 0 0 0 1-.9l.6-8.5"
+  }),
+  link: /* @__PURE__ */ jsx2("path", {
+    d: "M6.75 9.25a2.75 2.75 0 0 0 3.9 0l2-2a2.75 2.75 0 0 0-3.9-3.9l-.6.6M9.25 6.75a2.75 2.75 0 0 0-3.9 0l-2 2a2.75 2.75 0 0 0 3.9 3.9l.6-.6"
+  }),
+  repeat: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("path", {
+        d: "m11.25 1.75 2 2-2 2"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M2.75 7.5v-.75a3 3 0 0 1 3-3h7.5M4.75 14.25l-2-2 2-2"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M13.25 8.5v.75a3 3 0 0 1-3 3h-7.5"
+      })
+    ]
+  }),
+  arrowLeft: /* @__PURE__ */ jsx2("path", {
+    d: "M13 8H3m4-4L3 8l4 4"
+  }),
+  component: /* @__PURE__ */ jsx2("rect", {
+    x: "2.5",
+    y: "2.5",
+    width: "11",
+    height: "11",
+    rx: "2"
+  }),
+  pointer: /* @__PURE__ */ jsx2("path", {
+    d: "m3.25 3.25 3.5 9.5 1.5-4 4-1.5zM8.75 8.75l3.5 3.5"
+  }),
+  refresh: /* @__PURE__ */ jsx2("path", {
+    d: "M13.25 8A5.25 5.25 0 1 1 11.7 4.3M13.25 2.5v2.75H10.5"
+  }),
+  list: /* @__PURE__ */ jsx2("path", {
+    d: "M5.75 4h7.5M5.75 8h7.5M5.75 12h7.5M2.75 4h.01M2.75 8h.01M2.75 12h.01"
+  }),
+  todo: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6",
+        strokeDasharray: "2.2 2.4"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M8 5.5V8l1.75 1.25"
+      })
+    ]
+  }),
+  target: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "3"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: ".6",
+        fill: "currentColor"
+      })
+    ]
+  }),
+  apply: /* @__PURE__ */ jsx2("path", {
+    d: "M12.75 3.25v3.5a2 2 0 0 1-2 2h-7.5m3-3-3 3 3 3"
+  }),
+  info: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M8 7.25v3.5M8 5.25h.01"
+      })
+    ]
+  }),
+  settings: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("path", {
+        d: "M6.6 1.75h2.8l.4 1.7 1.3.75 1.65-.55 1.4 2.43-1.25 1.17v1.5l1.25 1.17-1.4 2.43-1.65-.55-1.3.75-.4 1.7H6.6l-.4-1.7-1.3-.75-1.65.55-1.4-2.43 1.25-1.17v-1.5L1.85 6.08l1.4-2.43 1.65.55 1.3-.75z"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "2"
+      })
+    ]
+  }),
+  download: /* @__PURE__ */ jsx2("path", {
+    d: "M8 2.75v7.5m-3-3 3 3 3-3M2.75 11.75v.5a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1v-.5"
+  }),
+  upload: /* @__PURE__ */ jsx2("path", {
+    d: "M8 10.25v-7.5m-3 3 3-3 3 3M2.75 11.75v.5a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1v-.5"
+  }),
+  alert: /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M8 5v3.25M8 10.75h.01"
+      })
+    ]
+  })
+};
+function Icon({ name, size = 16, className }) {
+  return /* @__PURE__ */ jsx2("svg", {
+    className: "abs-ico " + (className ?? ""),
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: paths[name]
+  });
+}
+function KindIcon({ svg }) {
+  if (svg && /^\s*<svg[\s>]/i.test(svg)) {
+    const svgDoc = /xmlns=/.test(svg) ? svg : svg.replace(/<svg/i, '<svg xmlns="http://www.w3.org/2000/svg"');
+    const url = `url("data:image/svg+xml,${encodeURIComponent(svgDoc)}")`;
+    return /* @__PURE__ */ jsx2("span", {
+      className: "abs-kico",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("span", {
+        className: "abs-kico-m",
+        style: { maskImage: url, WebkitMaskImage: url }
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx2("span", {
+    className: "abs-kico",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx2(Icon, {
+      name: "component"
+    })
+  });
+}
+var STATE_LABEL = { bound: "Connected", suggested: "Needs review", partial: "Partly connected", unbound: "Not connected" };
+var stateLabel = (s) => STATE_LABEL[s];
+function StateIcon({ state, size = 16 }) {
+  return /* @__PURE__ */ jsxs("span", {
+    className: `abs-state abs-state-${state}`,
+    title: STATE_LABEL[state],
+    children: [
+      /* @__PURE__ */ jsx2(Icon, {
+        name: state,
+        size
+      }),
+      /* @__PURE__ */ jsx2("span", {
+        className: "abs-sr",
+        children: STATE_LABEL[state]
+      })
+    ]
+  });
+}
+function Ring({ done, total, size = 18, stroke = 2.5 }) {
+  const f = total ? done / total : 0;
+  if (size <= 16) {
+    const pr = size / 4 - 0.25, pc = 2 * Math.PI * pr, h = size / 2;
+    return /* @__PURE__ */ jsxs("svg", {
+      className: "abs-ring abs-pie" + (total && done === total ? " is-done" : ""),
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("circle", {
+          cx: h,
+          cy: h,
+          r: h - 0.75,
+          strokeWidth: 1.5,
+          className: "abs-ring-bg"
+        }),
+        /* @__PURE__ */ jsx2("circle", {
+          cx: h,
+          cy: h,
+          r: pr,
+          strokeWidth: pr * 2,
+          className: "abs-ring-fg",
+          strokeDasharray: pc,
+          strokeDashoffset: pc * (1 - f),
+          transform: `rotate(-90 ${h} ${h})`
+        })
+      ]
+    });
+  }
+  const r = (size - stroke) / 2, c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs("svg", {
+    className: "abs-ring" + (total && done === total ? " is-done" : ""),
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: size / 2,
+        cy: size / 2,
+        r,
+        strokeWidth: stroke,
+        className: "abs-ring-bg"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: size / 2,
+        cy: size / 2,
+        r,
+        strokeWidth: stroke,
+        className: "abs-ring-fg",
+        strokeDasharray: c,
+        strokeDashoffset: c * (1 - f),
+        transform: `rotate(-90 ${size / 2} ${size / 2})`
+      })
+    ]
+  });
+}
+
+// src/studio/useGlide.tsx
+import * as React from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function useGlide(active) {
+  const ref = React.useRef(null);
+  const bar = React.useRef(null);
+  const moveTo = React.useCallback((el) => {
+    const box = ref.current, b = bar.current;
+    if (!box || !b)
+      return;
+    if (!el) {
+      b.style.opacity = "0";
+      return;
+    }
+    const r = el.getBoundingClientRect(), c = box.getBoundingClientRect();
+    const first = b.style.opacity !== "1";
+    b.style.transition = first ? "opacity 120ms ease" : "";
+    b.style.transform = `translate(${r.left - c.left + box.scrollLeft}px, ${r.top - c.top + box.scrollTop}px)`;
+    b.style.width = `${r.width}px`;
+    b.style.height = `${r.height}px`;
+    b.style.opacity = "1";
+  }, []);
+  React.useEffect(() => {
+    if (active !== undefined)
+      moveTo(active);
+  }, [active, moveTo]);
+  const handlers = React.useMemo(() => ({
+    onPointerOver: (e) => {
+      if (active !== undefined)
+        return;
+      moveTo(e.target.closest("[data-glide]"));
+    },
+    onPointerLeave: () => {
+      if (active === undefined)
+        moveTo(null);
+    }
+  }), [active, moveTo]);
+  const indicator = /* @__PURE__ */ jsx3("span", {
+    ref: bar,
+    className: "abs-glide",
+    "aria-hidden": "true"
+  });
+  return { ref, handlers, indicator, moveTo };
+}
+
+// src/studio/ComponentList.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ComponentList({ engine, screen, selected, onSelect }) {
+  const [todo, setTodo] = React2.useState(false);
+  const [open, setOpen] = React2.useState({});
+  const all = screen.components.filter((c) => engine.bindable(engine.descOf(c)).length);
+  const byParent = new Map;
+  all.forEach((c) => {
+    if (c.parent)
+      byParent.set(c.parent, [...byParent.get(c.parent) ?? [], c]);
+  });
+  const kids = (id) => byParent.get(id) ?? [];
+  const t = engine.tally([screen]);
+  const pending = (c) => engine.compState(screen.id, c) !== "bound";
+  const visible = (c) => !todo || pending(c) || kids(c.bindId).some(visible);
+  const glide = useGlide();
+  const row = (c, depth) => {
+    const ch = kids(c.bindId).filter(visible);
+    const isOpen = open[c.bindId] ?? true;
+    const d = engine.descOf(c);
+    return /* @__PURE__ */ jsxs2("div", {
+      role: "listitem",
+      children: [
+        /* @__PURE__ */ jsxs2("div", {
+          "data-glide": true,
+          className: "abs-comp" + (c.bindId === selected ? " is-on" : ""),
+          style: { paddingLeft: 8 + depth * 24 },
+          children: [
+            ch.length ? /* @__PURE__ */ jsx4("button", {
+              type: "button",
+              className: "abs-iconbtn abs-twist",
+              onClick: () => setOpen((o) => ({ ...o, [c.bindId]: !isOpen })),
+              "aria-label": isOpen ? "Collapse" : "Expand",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx4(Icon, {
+                name: "chevronRight",
+                size: 14,
+                className: isOpen ? "abs-rot90" : ""
+              })
+            }) : /* @__PURE__ */ jsx4("span", {
+              className: "abs-twist"
+            }),
+            /* @__PURE__ */ jsxs2("button", {
+              type: "button",
+              className: "abs-comp-main",
+              onClick: () => onSelect(c.bindId),
+              "aria-current": c.bindId === selected ? "true" : undefined,
+              children: [
+                /* @__PURE__ */ jsx4(KindIcon, {
+                  svg: d.icon
+                }),
+                /* @__PURE__ */ jsx4("span", {
+                  className: "abs-comp-l",
+                  children: c.label
+                }),
+                /* @__PURE__ */ jsxs2("span", {
+                  className: "abs-comp-k",
+                  children: [
+                    d.label,
+                    ch.length ? ` · ${ch.length}` : ""
+                  ]
+                }),
+                /* @__PURE__ */ jsx4(StateIcon, {
+                  state: engine.compState(screen.id, c)
+                })
+              ]
+            })
+          ]
+        }),
+        ch.length > 0 && /* @__PURE__ */ jsx4(Collapse, {
+          open: isOpen,
+          children: ch.map((k) => row(k, depth + 1))
+        })
+      ]
+    }, c.bindId);
+  };
+  const todoCount = all.filter(pending).length;
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "abs-center abs-scroll",
+    children: [
+      /* @__PURE__ */ jsxs2("header", {
+        className: "abs-screen-h",
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            className: "abs-screen-t",
+            children: [
+              /* @__PURE__ */ jsx4("div", {
+                className: "abs-crumbs",
+                children: [...screen.path, ...screen.parent ? [engine.SCR.get(screen.parent)?.label] : []].join(" / ")
+              }),
+              /* @__PURE__ */ jsx4("h1", {
+                children: screen.label
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "abs-progress",
+            children: [
+              /* @__PURE__ */ jsx4(Ring, {
+                done: t.bound,
+                total: t.total,
+                size: 36,
+                stroke: 3.5
+              }),
+              /* @__PURE__ */ jsxs2("div", {
+                children: [
+                  /* @__PURE__ */ jsxs2("b", {
+                    children: [
+                      t.bound,
+                      /* @__PURE__ */ jsxs2("span", {
+                        children: [
+                          "/",
+                          t.total
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx4("small", {
+                    children: "connected"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "abs-seg",
+        role: "group",
+        "aria-label": "Show",
+        children: [
+          /* @__PURE__ */ jsx4("span", {
+            className: "abs-seg-thumb",
+            style: { transform: `translateX(${todo ? 100 : 0}%)` },
+            "aria-hidden": "true"
+          }),
+          /* @__PURE__ */ jsxs2("button", {
+            type: "button",
+            className: !todo ? "is-on" : "",
+            onClick: () => setTodo(false),
+            "aria-pressed": !todo,
+            children: [
+              /* @__PURE__ */ jsx4(Icon, {
+                name: "list",
+                size: 14
+              }),
+              "All",
+              /* @__PURE__ */ jsx4("span", {
+                children: all.length
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("button", {
+            type: "button",
+            className: todo ? "is-on" : "",
+            onClick: () => setTodo(true),
+            "aria-pressed": todo,
+            children: [
+              /* @__PURE__ */ jsx4(Icon, {
+                name: "todo",
+                size: 14
+              }),
+              "To do",
+              /* @__PURE__ */ jsx4("span", {
+                children: todoCount
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "abs-comps abs-glide-box",
+        role: "list",
+        ref: glide.ref,
+        ...glide.handlers,
+        children: [
+          glide.indicator,
+          all.filter((c) => !c.parent && visible(c)).map((c) => row(c, 0)),
+          todo && !todoCount && /* @__PURE__ */ jsxs2("div", {
+            className: "abs-done",
+            children: [
+              /* @__PURE__ */ jsx4(Icon, {
+                name: "bound",
+                size: 24
+              }),
+              /* @__PURE__ */ jsx4("b", {
+                children: "Everything here is connected"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/FindAnything.tsx
+import * as React3 from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function FindAnything({ engine, onGo }) {
+  const [q, setQ] = React3.useState("");
+  const [open, setOpen] = React3.useState(false);
+  const [active, setActive] = React3.useState(0);
+  const input = React3.useRef(null);
+  const box = React3.useRef(null);
+  const glide = useGlide(null);
+  const list = glide.ref;
+  const index = React3.useMemo(() => engine.fw.registry.screens.flatMap((screen) => [
+    { hit: { screen }, text: [screen.label, ...screen.path].join(" ").toLowerCase() },
+    ...screen.components.filter((c) => engine.bindable(engine.descOf(c)).length).map((comp) => ({
+      hit: { screen, comp },
+      text: [comp.label, engine.descOf(comp).label, screen.label].join(" ").toLowerCase()
+    }))
+  ]), [engine.fw]);
+  const hits = React3.useMemo(() => {
+    const words = q.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+      return [];
+    return index.filter((x) => words.every((w) => x.text.includes(w))).sort((a, b) => Number(!a.text.startsWith(words[0])) - Number(!b.text.startsWith(words[0]))).slice(0, 40).map((x) => x.hit);
+  }, [q, index]);
+  React3.useEffect(() => {
+    const key = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        input.current?.focus();
+        setOpen(true);
+      }
+    };
+    const away = (e) => {
+      if (!box.current?.contains(e.target))
+        setOpen(false);
+    };
+    window.addEventListener("keydown", key);
+    document.addEventListener("pointerdown", away);
+    return () => {
+      window.removeEventListener("keydown", key);
+      document.removeEventListener("pointerdown", away);
+    };
+  }, []);
+  React3.useEffect(() => setActive(0), [q]);
+  React3.useEffect(() => {
+    const el = list.current?.querySelector(`[data-i="${active}"]`) ?? null;
+    el?.scrollIntoView({ block: "nearest" });
+    glide.moveTo(el);
+  }, [active, hits, list, glide]);
+  const go = (h) => {
+    onGo(h.screen.id, h.comp?.bindId);
+    setOpen(false);
+    setQ("");
+    input.current?.blur();
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => Math.min(hits.length - 1, a + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => Math.max(0, a - 1));
+    } else if (e.key === "Enter" && hits[active])
+      go(hits[active]);
+    else if (e.key === "Escape" && (show || q)) {
+      e.preventDefault();
+      setOpen(false);
+      setQ("");
+    }
+  };
+  const show = open && q.trim().length > 0;
+  return /* @__PURE__ */ jsxs3("div", {
+    className: "abs-find",
+    ref: box,
+    children: [
+      /* @__PURE__ */ jsxs3("div", {
+        className: "abs-find-box",
+        children: [
+          /* @__PURE__ */ jsx5(Icon, {
+            name: "search",
+            className: "abs-c-muted"
+          }),
+          /* @__PURE__ */ jsx5("input", {
+            ref: input,
+            value: q,
+            onChange: (e) => {
+              setQ(e.target.value);
+              setOpen(true);
+            },
+            onFocus: () => setOpen(true),
+            onKeyDown: onKey,
+            placeholder: "Find a component or screen",
+            "aria-label": "Find a component or screen",
+            role: "combobox",
+            "aria-expanded": show,
+            "aria-controls": "abs-find-list"
+          }),
+          /* @__PURE__ */ jsx5("kbd", {
+            children: "Ctrl K"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: "abs-pop abs-find-pop abs-glide-box" + (show ? " is-open" : ""),
+        role: "listbox",
+        id: "abs-find-list",
+        ref: list,
+        children: [
+          glide.indicator,
+          show && !hits.length ? /* @__PURE__ */ jsxs3("div", {
+            className: "abs-empty-sm",
+            children: [
+              "Nothing matches “",
+              q,
+              "”. Try a screen or component name."
+            ]
+          }) : null,
+          show ? hits.map((h, i) => {
+            const d = h.comp && engine.descOf(h.comp);
+            return /* @__PURE__ */ jsxs3("div", {
+              "data-i": i,
+              role: "option",
+              "aria-selected": i === active,
+              className: "abs-opt" + (i === active ? " is-active" : ""),
+              onPointerEnter: () => setActive(i),
+              onPointerDown: (e) => {
+                e.preventDefault();
+                go(h);
+              },
+              children: [
+                h.comp ? /* @__PURE__ */ jsx5(KindIcon, {
+                  svg: d?.icon
+                }) : /* @__PURE__ */ jsx5("span", {
+                  className: "abs-kico",
+                  children: /* @__PURE__ */ jsx5(Icon, {
+                    name: h.screen.parent ? "dialog" : "screen"
+                  })
+                }),
+                /* @__PURE__ */ jsxs3("span", {
+                  className: "abs-opt-t",
+                  children: [
+                    /* @__PURE__ */ jsx5("span", {
+                      children: h.comp?.label ?? h.screen.label
+                    }),
+                    /* @__PURE__ */ jsx5("code", {
+                      children: h.comp ? `${d?.label} · ${h.screen.label}` : h.screen.path.join(" / ")
+                    })
+                  ]
+                }),
+                h.comp ? /* @__PURE__ */ jsx5(StateIcon, {
+                  state: engine.compState(h.screen.id, h.comp)
+                }) : /* @__PURE__ */ jsx5("span", {
+                  className: "abs-nav-count",
+                  children: count(engine.tally([h.screen]))
+                })
+              ]
+            }, h.screen.id + (h.comp?.bindId ?? ""));
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+var count = (t) => `${t.bound}/${t.total}`;
+
+// src/studio/Tip.tsx
+import * as React4 from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function placeTip(anchor, tip, viewport, gap = 8, margin = 8) {
+  const side = anchor.top - gap - tip.height >= margin || anchor.bottom + gap + tip.height > viewport.height - margin ? "top" : "bottom";
+  const top = side === "top" ? anchor.top - gap - tip.height : anchor.bottom + gap;
+  const centred = anchor.left + anchor.width / 2 - tip.width / 2;
+  const left = Math.min(Math.max(centred, margin), Math.max(margin, viewport.width - margin - tip.width));
+  return { top: Math.max(margin, top), left, side };
+}
+var SHOW_DELAY = 250;
+function Tip({ text }) {
+  const id = React4.useId();
+  const btn = React4.useRef(null);
+  const body = React4.useRef(null);
+  const timer = React4.useRef(undefined);
+  const [open, setOpen] = React4.useState(false);
+  const show = React4.useCallback((delay) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), delay);
+  }, []);
+  const hide = React4.useCallback(() => {
+    clearTimeout(timer.current);
+    setOpen(false);
+  }, []);
+  React4.useEffect(() => () => clearTimeout(timer.current), []);
+  React4.useLayoutEffect(() => {
+    const el = body.current, anchor = btn.current;
+    if (!open || !el || !anchor)
+      return;
+    el.showPopover();
+    const p = placeTip(anchor.getBoundingClientRect(), el.getBoundingClientRect(), { width: innerWidth, height: innerHeight });
+    el.style.top = `${p.top}px`;
+    el.style.left = `${p.left}px`;
+    el.dataset.side = p.side;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        hide();
+      }
+    };
+    addEventListener("scroll", hide, true);
+    addEventListener("resize", hide);
+    addEventListener("keydown", onKey);
+    return () => {
+      removeEventListener("scroll", hide, true);
+      removeEventListener("resize", hide);
+      removeEventListener("keydown", onKey);
+      if (el.matches(":popover-open"))
+        el.hidePopover();
+    };
+  }, [open, hide]);
+  return /* @__PURE__ */ jsxs4("span", {
+    className: "abs-tip",
+    children: [
+      /* @__PURE__ */ jsx6("button", {
+        ref: btn,
+        type: "button",
+        className: "abs-tip-btn",
+        "aria-describedby": id,
+        "aria-label": "More information",
+        onClick: (e) => e.stopPropagation(),
+        onPointerEnter: () => show(SHOW_DELAY),
+        onPointerLeave: hide,
+        onFocus: (e) => {
+          if (e.currentTarget.matches(":focus-visible"))
+            show(0);
+        },
+        onBlur: hide,
+        children: /* @__PURE__ */ jsx6(Icon, {
+          name: "info",
+          size: 14
+        })
+      }),
+      /* @__PURE__ */ jsx6("span", {
+        ref: body,
+        role: "tooltip",
+        id,
+        popover: "manual",
+        className: "abs-tip-body",
+        children: text
+      })
+    ]
+  });
+}
+
+// src/studio/editors/ConsumeEditor.tsx
+import * as React7 from "react";
+
+// src/studio/ApiPicker.tsx
+import * as React5 from "react";
+import { jsx as jsx7, jsxs as jsxs5, Fragment as Fragment3 } from "react/jsx-runtime";
+var opTitle = (v) => v.op.summary?.trim() || `${v.op.method} ${v.op.path}`;
+function MethodTag({ method }) {
+  return /* @__PURE__ */ jsx7("span", {
+    className: `abs-method abs-method-${method.toLowerCase()}`,
+    children: method
+  });
+}
+function ApiPicker({ engine, ranked, value, onPick, label = "Choose API", autoOpen = false }) {
+  const [open, setOpen] = React5.useState(autoOpen);
+  const [q, setQ] = React5.useState("");
+  const [active, setActive] = React5.useState(0);
+  const root = React5.useRef(null);
+  const glide = useGlide(null);
+  const list = glide.ref;
+  const id = React5.useId();
+  const top = React5.useMemo(() => open ? ranked().filter((r) => r.score >= 0.4).slice(0, 3) : [], [open, ranked]);
+  const items = React5.useMemo(() => {
+    if (!open)
+      return [];
+    const needle = q.trim().toLowerCase();
+    const hit = (v) => !needle || [v.op.id, v.op.summary, v.op.path, ...v.op.tags].join(" ").toLowerCase().includes(needle);
+    const out = [];
+    if (!needle)
+      top.forEach((r) => out.push({ v: r.view, best: r, group: "Best matches" }));
+    const shown = new Set(out.map((x) => x.v.op.id));
+    const groupOf = (v) => [v.op.product, v.op.tags[0] ?? "Other"].filter(Boolean).join(" · ");
+    [...engine.OPS].sort((a, b) => groupOf(a).localeCompare(groupOf(b)) || opTitle(a).localeCompare(opTitle(b))).forEach((v) => {
+      if (!shown.has(v.op.id) && hit(v))
+        out.push({ v, group: groupOf(v) });
+    });
+    return out;
+  }, [open, q, top, engine]);
+  React5.useEffect(() => {
+    if (!open)
+      return;
+    const close = (e) => {
+      if (!root.current?.contains(e.target))
+        setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [open]);
+  React5.useEffect(() => {
+    setActive(0);
+  }, [q, open]);
+  React5.useEffect(() => {
+    const el = list.current?.querySelector(`[data-i="${active}"]`) ?? null;
+    el?.scrollIntoView({ block: "nearest" });
+    glide.moveTo(el);
+  }, [active, items, list, glide]);
+  const pick = (opId) => {
+    onPick(opId);
+    setOpen(false);
+    setQ("");
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => Math.min(items.length - 1, a + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => Math.max(0, a - 1));
+    } else if (e.key === "Enter" && items[active]) {
+      e.preventDefault();
+      pick(items[active].v.op.id);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  const current = value ? engine.OPV.get(value) : undefined;
+  let lastGroup = "";
+  return /* @__PURE__ */ jsxs5("div", {
+    className: "abs-picker",
+    ref: root,
+    children: [
+      current ? /* @__PURE__ */ jsxs5("button", {
+        type: "button",
+        className: "abs-opcard",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx7(MethodTag, {
+            method: current.op.method
+          }),
+          /* @__PURE__ */ jsxs5("span", {
+            className: "abs-opcard-t",
+            children: [
+              /* @__PURE__ */ jsx7("b", {
+                children: opTitle(current)
+              }),
+              /* @__PURE__ */ jsx7("code", {
+                children: current.op.path
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx7("span", {
+            className: "abs-link",
+            children: "Change"
+          })
+        ]
+      }) : /* @__PURE__ */ jsxs5("button", {
+        type: "button",
+        className: "abs-btn abs-btn-dashed",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx7(Icon, {
+            name: "api"
+          }),
+          " ",
+          label
+        ]
+      }),
+      open ? /* @__PURE__ */ jsxs5("div", {
+        className: "abs-pop",
+        role: "dialog",
+        "aria-label": "Choose an API",
+        children: [
+          /* @__PURE__ */ jsxs5("div", {
+            className: "abs-pop-search",
+            children: [
+              /* @__PURE__ */ jsx7(Icon, {
+                name: "search"
+              }),
+              /* @__PURE__ */ jsx7("input", {
+                autoFocus: true,
+                value: q,
+                onChange: (e) => setQ(e.target.value),
+                onKeyDown: onKey,
+                placeholder: `Search ${engine.OPS.length} APIs`,
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-controls": id,
+                "aria-activedescendant": items[active] ? `${id}-${active}` : undefined
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs5("div", {
+            className: "abs-pop-list abs-glide-box",
+            ref: list,
+            id,
+            role: "listbox",
+            children: [
+              glide.indicator,
+              items.length === 0 ? /* @__PURE__ */ jsxs5("div", {
+                className: "abs-empty-sm",
+                children: [
+                  "No API matches “",
+                  q,
+                  "”. Search by name, path or tag."
+                ]
+              }) : null,
+              items.map((it, i) => {
+                const head = it.group !== lastGroup ? lastGroup = it.group : null;
+                return /* @__PURE__ */ jsxs5(React5.Fragment, {
+                  children: [
+                    head ? /* @__PURE__ */ jsx7("div", {
+                      className: "abs-pop-group",
+                      role: "presentation",
+                      children: head === "Best matches" ? /* @__PURE__ */ jsxs5(Fragment3, {
+                        children: [
+                          /* @__PURE__ */ jsx7(Icon, {
+                            name: "target",
+                            size: 12
+                          }),
+                          " Best matches"
+                        ]
+                      }) : head
+                    }) : null,
+                    /* @__PURE__ */ jsxs5("div", {
+                      id: `${id}-${i}`,
+                      "data-i": i,
+                      role: "option",
+                      "aria-selected": i === active,
+                      className: "abs-opt" + (i === active ? " is-active" : "") + (it.v.op.id === value ? " is-current" : ""),
+                      onPointerEnter: () => setActive(i),
+                      onPointerDown: (e) => {
+                        e.preventDefault();
+                        pick(it.v.op.id);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx7(MethodTag, {
+                          method: it.v.op.method
+                        }),
+                        /* @__PURE__ */ jsxs5("span", {
+                          className: "abs-opt-t",
+                          children: [
+                            /* @__PURE__ */ jsx7("span", {
+                              children: opTitle(it.v)
+                            }),
+                            /* @__PURE__ */ jsx7("code", {
+                              children: it.v.op.path
+                            })
+                          ]
+                        }),
+                        it.v.op.id === value ? /* @__PURE__ */ jsx7(Icon, {
+                          name: "check",
+                          className: "abs-c-accent"
+                        }) : null
+                      ]
+                    })
+                  ]
+                }, it.group + it.v.op.id);
+              })
+            ]
+          }),
+          items[active]?.best?.reasons.length ? /* @__PURE__ */ jsxs5("div", {
+            className: "abs-pop-why",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx7(Icon, {
+                name: "info",
+                size: 14
+              }),
+              /* @__PURE__ */ jsxs5("span", {
+                children: [
+                  /* @__PURE__ */ jsx7("b", {
+                    children: "Why suggested:"
+                  }),
+                  " ",
+                  items[active].best.reasons.join(" · ")
+                ]
+              })
+            ]
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+}
+
+// src/studio/editors/RequestInputs.tsx
+import * as React6 from "react";
+
+// src/studio/editors/types.ts
+var GROUP_LABEL = { item: "Row", screen: "This screen", context: "Passed in", provider: "App" };
+
+// src/studio/editors/SourceSelect.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function SourceSelect({ engine, value, type, sources, onChange, id }) {
+  const waiting = sources.filter((s) => s.waitsFor);
+  const fits = sources.filter((s) => s.type !== "list" && !s.waitsFor).map((s) => ({ s, fit: engine.typeFit(type, s.type) })).filter((x) => x.fit.ok);
+  const groups = new Map;
+  fits.forEach((x) => {
+    const g = GROUP_LABEL[x.s.group];
+    groups.set(g, [...groups.get(g) ?? [], x]);
+  });
+  const known = !value || fits.some((x) => x.s.expr + (x.fit.transform ? ` | ${x.fit.transform}()` : "") === value);
+  return /* @__PURE__ */ jsxs6("select", {
+    id,
+    className: "abs-select" + (value ? "" : " is-empty"),
+    value: value ?? "",
+    onChange: (e) => onChange(e.target.value || undefined),
+    children: [
+      /* @__PURE__ */ jsx8("option", {
+        value: "",
+        children: "Not set"
+      }),
+      !known && /* @__PURE__ */ jsx8("option", {
+        value,
+        children: value
+      }),
+      [...groups].map(([g, xs]) => /* @__PURE__ */ jsx8("optgroup", {
+        label: g,
+        children: xs.map(({ s, fit }) => /* @__PURE__ */ jsx8("option", {
+          value: s.expr + (fit.transform ? ` | ${fit.transform}()` : ""),
+          children: s.label
+        }, s.expr))
+      }, g)),
+      waiting.length > 0 && /* @__PURE__ */ jsx8("optgroup", {
+        label: "Connect first",
+        children: waiting.map((s) => /* @__PURE__ */ jsxs6("option", {
+          disabled: true,
+          children: [
+            s.label,
+            ": connect ",
+            s.waitsFor
+          ]
+        }, s.expr))
+      })
+    ]
+  });
+}
+
+// src/studio/editors/RequestInputs.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function RequestInputs({ engine, view, request, sources, onChange, idp }) {
+  const req = [...view.req].sort((a, b) => Number(b[2]) - Number(a[2]));
+  const required = req.filter((r) => r[2]), optional = req.filter((r) => !r[2]);
+  const filled = req.filter(([p]) => request[p]).length;
+  const [more, setMore] = React6.useState(false);
+  if (!req.length)
+    return null;
+  const row = ([ptr, type, isReq]) => /* @__PURE__ */ jsxs7("div", {
+    className: "abs-map-row",
+    children: [
+      /* @__PURE__ */ jsxs7("label", {
+        htmlFor: idp + ptr,
+        title: ptr,
+        children: [
+          humanize(ptr),
+          isReq && /* @__PURE__ */ jsx9("span", {
+            className: "abs-req",
+            "aria-label": "required",
+            children: "*"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx9(Icon, {
+        name: "arrowLeft",
+        size: 14,
+        className: "abs-c-muted"
+      }),
+      /* @__PURE__ */ jsx9(SourceSelect, {
+        engine,
+        id: idp + ptr,
+        type,
+        value: request[ptr],
+        sources,
+        onChange: (v) => {
+          const r = { ...request };
+          if (v)
+            r[ptr] = v;
+          else
+            delete r[ptr];
+          onChange(r);
+        }
+      })
+    ]
+  }, ptr);
+  const shownOptional = optional.filter(([p]) => more || request[p]);
+  const shown = required.length + shownOptional.length;
+  return /* @__PURE__ */ jsxs7("div", {
+    className: "abs-block",
+    children: [
+      shown > 0 && /* @__PURE__ */ jsxs7("div", {
+        className: "abs-block-h",
+        children: [
+          /* @__PURE__ */ jsx9("span", {
+            children: "Sends"
+          }),
+          /* @__PURE__ */ jsxs7("span", {
+            className: "abs-count",
+            children: [
+              filled,
+              "/",
+              req.length
+            ]
+          })
+        ]
+      }),
+      shown > 0 && /* @__PURE__ */ jsxs7("div", {
+        className: "abs-map",
+        children: [
+          required.map(row),
+          shownOptional.map(row)
+        ]
+      }),
+      optional.length > shownOptional.length && /* @__PURE__ */ jsxs7("button", {
+        type: "button",
+        className: "abs-link abs-more",
+        onClick: () => setMore(true),
+        children: [
+          /* @__PURE__ */ jsx9(Icon, {
+            name: "plus",
+            size: 14
+          }),
+          " ",
+          shown ? `${optional.length - shownOptional.length} more inputs` : `Add inputs (${optional.length} optional)`
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/editors/ConsumeEditor.tsx
+import { jsx as jsx10, jsxs as jsxs8, Fragment as Fragment4 } from "react/jsx-runtime";
+function ConsumeEditor(p) {
+  const { engine, screen, comp, slot, put } = p;
+  const b = engine.getB(screen, comp.bindId, slot.id);
+  const shape = engine.shapeOf(screen, comp, slot);
+  const ranked = React7.useCallback(() => engine.rank(screen, comp, slot), [engine, screen, comp, slot]);
+  const srcs = React7.useMemo(() => engine.sources(screen), [engine, screen]);
+  const op = b?.type === "operation" ? b : undefined;
+  const view = op ? engine.OPV.get(op.operation) : undefined;
+  const choose = (opId) => {
+    const main = engine.proposeConsume(screen, comp, slot, opId);
+    if (!main)
+      return;
+    const siblings = op ? [] : engine.siblingFills(screen, comp, slot, opId);
+    [main, ...siblings].forEach(put);
+  };
+  const fieldsAt = engine.fieldsAt;
+  const update = (patch) => op && put({ ...op, ...patch, state: "draft" });
+  const props = shape.fields && !shape.via ? shape.fields : null;
+  const choices = view ? shape.many || props ? [...view.lists.map((l) => [l.select, l.fields.length]), ...view.one ? [["$", 0]] : []] : view.scalars.map(([s]) => [s, 0]) : [];
+  return /* @__PURE__ */ jsxs8(Fragment4, {
+    children: [
+      /* @__PURE__ */ jsx10(ApiPicker, {
+        engine,
+        ranked,
+        value: op?.operation,
+        onPick: choose
+      }),
+      view && op && /* @__PURE__ */ jsxs8(Fragment4, {
+        children: [
+          choices.length > 1 && /* @__PURE__ */ jsxs8("div", {
+            className: "abs-field",
+            children: [
+              /* @__PURE__ */ jsx10("label", {
+                htmlFor: `sel-${comp.bindId}-${slot.id}`,
+                children: shape.many || props ? "Use list" : "Use value"
+              }),
+              /* @__PURE__ */ jsx10("select", {
+                id: `sel-${comp.bindId}-${slot.id}`,
+                className: "abs-select",
+                value: op.select,
+                onChange: (e) => update({ select: e.target.value, map: props ? engine.proposeMap(props, fieldsAt(view, e.target.value)) : undefined }),
+                children: choices.map(([s]) => /* @__PURE__ */ jsx10("option", {
+                  value: s,
+                  children: s === "$" ? "Whole response" : humanize(s)
+                }, s))
+              })
+            ]
+          }),
+          props && /* @__PURE__ */ jsxs8("div", {
+            className: "abs-block",
+            children: [
+              /* @__PURE__ */ jsx10("div", {
+                className: "abs-block-h",
+                children: /* @__PURE__ */ jsx10("span", {
+                  children: "Shows"
+                })
+              }),
+              /* @__PURE__ */ jsx10("div", {
+                className: "abs-map",
+                children: props.map(([f, t]) => /* @__PURE__ */ jsxs8("div", {
+                  className: "abs-map-row",
+                  children: [
+                    /* @__PURE__ */ jsx10("label", {
+                      htmlFor: `map-${comp.bindId}-${f}`,
+                      children: humanize(f)
+                    }),
+                    /* @__PURE__ */ jsx10(Icon, {
+                      name: "arrowLeft",
+                      size: 14,
+                      className: "abs-c-muted"
+                    }),
+                    /* @__PURE__ */ jsxs8("select", {
+                      id: `map-${comp.bindId}-${f}`,
+                      className: "abs-select" + (op.map?.[f] ? "" : " is-empty"),
+                      value: op.map?.[f] ?? "",
+                      onChange: (e) => {
+                        const m = { ...op.map ?? {} };
+                        if (e.target.value)
+                          m[f] = e.target.value;
+                        else
+                          delete m[f];
+                        update({ map: m });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx10("option", {
+                          value: "",
+                          children: "Not set"
+                        }),
+                        fieldsAt(view, op.select).map(([ff, ft]) => [ff, engine.typeFit(t, ft)]).filter(([, fit]) => fit.ok).map(([ff, fit]) => /* @__PURE__ */ jsx10("option", {
+                          value: `$item.${ff}${fit.transform ? ` | ${fit.transform}()` : ""}`,
+                          children: humanize(ff)
+                        }, ff))
+                      ]
+                    })
+                  ]
+                }, f))
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx10(RequestInputs, {
+            engine,
+            view,
+            request: op.request,
+            sources: srcs,
+            onChange: (request) => update({ request }),
+            idp: `req-${comp.bindId}-${slot.id}`
+          }),
+          /* @__PURE__ */ jsxs8("div", {
+            className: "abs-field abs-field-inline",
+            children: [
+              /* @__PURE__ */ jsx10("label", {
+                htmlFor: `load-${comp.bindId}-${slot.id}`,
+                children: "Load"
+              }),
+              /* @__PURE__ */ jsxs8("select", {
+                id: `load-${comp.bindId}-${slot.id}`,
+                className: "abs-select abs-select-sm",
+                value: op.load === "demand" ? "demand" : "open",
+                onChange: (e) => update({ load: e.target.value }),
+                children: [
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "open",
+                    children: "When the screen opens"
+                  }),
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "demand",
+                    children: "When first used"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/editors/ScopedEditor.tsx
+import { jsx as jsx11, jsxs as jsxs9, Fragment as Fragment5 } from "react/jsx-runtime";
+function ScopedEditor({ engine, screen, comp, slot, put, goTo }) {
+  const b = engine.getB(screen, comp.bindId, slot.id);
+  const fields = engine.scopeFields(screen, comp, slot);
+  const parent = comp.parent ? engine.compOf(screen, comp.parent) : undefined;
+  if (!fields?.length) {
+    return /* @__PURE__ */ jsxs9("div", {
+      className: "abs-hint",
+      children: [
+        /* @__PURE__ */ jsx11(Icon, {
+          name: "link"
+        }),
+        /* @__PURE__ */ jsxs9("span", {
+          children: [
+            "Uses data from ",
+            /* @__PURE__ */ jsx11("b", {
+              children: parent?.label
+            }),
+            "."
+          ]
+        }),
+        parent && /* @__PURE__ */ jsx11("button", {
+          type: "button",
+          className: "abs-link",
+          onClick: () => goTo(parent.bindId),
+          children: "Connect it first"
+        })
+      ]
+    });
+  }
+  const type = engine.shapeOf(screen, comp, slot).type ?? "any";
+  const item = fields.map(([f, t]) => ({ expr: `$item.${f}`, label: humanize(f), name: f, type: t, group: "item" }));
+  const suggestions = !b ? engine.rankSources(comp.label, type, item, 0.45).slice(0, 3) : [];
+  const id = `scope-${comp.bindId}-${slot.id}`;
+  return /* @__PURE__ */ jsxs9(Fragment5, {
+    children: [
+      /* @__PURE__ */ jsxs9("div", {
+        className: "abs-field",
+        children: [
+          /* @__PURE__ */ jsxs9("label", {
+            htmlFor: id,
+            children: [
+              "Field from ",
+              parent?.label
+            ]
+          }),
+          /* @__PURE__ */ jsxs9("select", {
+            id,
+            className: "abs-select" + (b ? "" : " is-empty"),
+            value: b?.value ?? "",
+            onChange: (e) => e.target.value && put({ component: comp.bindId, slot: slot.id, type: "expression", value: e.target.value, origin: "manual", state: "draft" }),
+            children: [
+              /* @__PURE__ */ jsx11("option", {
+                value: "",
+                children: "Choose a field"
+              }),
+              item.filter((s) => engine.typeFit(type, s.type).ok).map((s) => /* @__PURE__ */ jsx11("option", {
+                value: s.expr,
+                children: s.label
+              }, s.expr))
+            ]
+          })
+        ]
+      }),
+      suggestions.length > 0 && /* @__PURE__ */ jsx11("div", {
+        className: "abs-suggests",
+        children: suggestions.map((sg) => /* @__PURE__ */ jsxs9("button", {
+          type: "button",
+          className: "abs-suggest",
+          onClick: () => put({ component: comp.bindId, slot: slot.id, type: "expression", value: sg.expr, origin: "suggested", state: "draft" }),
+          children: [
+            /* @__PURE__ */ jsx11(Icon, {
+              name: "apply",
+              size: 14
+            }),
+            " ",
+            sg.source.label
+          ]
+        }, sg.expr))
+      })
+    ]
+  });
+}
+
+// src/studio/editors/TriggerEditor.tsx
+import * as React9 from "react";
+
+// src/studio/editors/StepCard.tsx
+import * as React8 from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function StepCard({ engine, screen, comp, slot, step, index, total, onChange, onRemove, onMove }) {
+  const ranked = React8.useCallback(() => engine.rank(screen, comp, slot), [engine, screen, comp, slot]);
+  const mc = engine.manyContext(screen);
+  const view = engine.OPV.get(step.operation);
+  const srcs = React8.useMemo(() => step.forEach ? engine.triggerSources(screen) : engine.sources(screen), [engine, screen, step]);
+  return /* @__PURE__ */ jsxs10("div", {
+    className: "abs-step",
+    children: [
+      /* @__PURE__ */ jsxs10("div", {
+        className: "abs-step-h",
+        children: [
+          /* @__PURE__ */ jsx12("span", {
+            className: "abs-step-n",
+            children: index + 1
+          }),
+          /* @__PURE__ */ jsx12(Icon, {
+            name: "api",
+            className: "abs-c-muted"
+          }),
+          /* @__PURE__ */ jsx12("span", {
+            className: "abs-step-t",
+            children: "Call API"
+          }),
+          /* @__PURE__ */ jsxs10("span", {
+            className: "abs-step-tools",
+            children: [
+              index > 0 && /* @__PURE__ */ jsx12("button", {
+                type: "button",
+                className: "abs-iconbtn",
+                onClick: () => onMove(-1),
+                "aria-label": "Move up",
+                children: /* @__PURE__ */ jsx12(Icon, {
+                  name: "chevronDown",
+                  className: "abs-rot180"
+                })
+              }),
+              index < total - 1 && /* @__PURE__ */ jsx12("button", {
+                type: "button",
+                className: "abs-iconbtn",
+                onClick: () => onMove(1),
+                "aria-label": "Move down",
+                children: /* @__PURE__ */ jsx12(Icon, {
+                  name: "chevronDown"
+                })
+              }),
+              /* @__PURE__ */ jsx12("button", {
+                type: "button",
+                className: "abs-iconbtn",
+                onClick: onRemove,
+                "aria-label": "Remove step",
+                children: /* @__PURE__ */ jsx12(Icon, {
+                  name: "trash"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      view && /* @__PURE__ */ jsxs10("div", {
+        className: "abs-step-b",
+        children: [
+          /* @__PURE__ */ jsx12(ApiPicker, {
+            engine,
+            ranked,
+            value: step.operation,
+            onPick: (id) => onChange({ ...step, operation: id, request: engine.proposeRequest(engine.OPV.get(id), srcs) })
+          }),
+          mc && /* @__PURE__ */ jsxs10("label", {
+            className: "abs-toggle",
+            children: [
+              /* @__PURE__ */ jsx12("input", {
+                type: "checkbox",
+                checked: !!step.forEach,
+                onChange: (e) => onChange({ ...step, forEach: e.target.checked ? `$context.${mc.id}` : undefined })
+              }),
+              /* @__PURE__ */ jsx12("span", {
+                className: "abs-toggle-ui",
+                "aria-hidden": "true"
+              }),
+              /* @__PURE__ */ jsx12(Icon, {
+                name: "repeat",
+                size: 14,
+                className: "abs-c-muted"
+              }),
+              " Run for each ",
+              /* @__PURE__ */ jsx12("span", {
+                className: "abs-toggle-of",
+                children: mc.label
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx12(RequestInputs, {
+            engine,
+            view,
+            request: step.request,
+            sources: srcs,
+            onChange: (request) => onChange({ ...step, request }),
+            idp: `st-${comp.bindId}-${index}-`
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/editors/TriggerEditor.tsx
+import { jsx as jsx13, jsxs as jsxs11, Fragment as Fragment6 } from "react/jsx-runtime";
+function TriggerEditor(p) {
+  const { engine, screen, comp, slot, put } = p;
+  const b = engine.getB(screen, comp.bindId, slot.id);
+  const steps = b?.type === "steps" ? b.steps : [];
+  const [adding, setAdding] = React9.useState(false);
+  const set = (next) => next.length ? put({ component: comp.bindId, slot: slot.id, type: "steps", steps: next, origin: b?.origin ?? "manual", state: "draft" }) : p.drop();
+  const none = () => put({ component: comp.bindId, slot: slot.id, type: "none", origin: "manual", state: "confirmed" });
+  const mc = engine.manyContext(screen);
+  const ranked = React9.useCallback(() => engine.rank(screen, comp, slot), [engine, screen, comp, slot]);
+  if (b?.type === "none")
+    return /* @__PURE__ */ jsxs11("div", {
+      className: "abs-hint",
+      children: [
+        /* @__PURE__ */ jsx13(Icon, {
+          name: "check"
+        }),
+        /* @__PURE__ */ jsx13("span", {
+          children: "Calls no API."
+        })
+      ]
+    });
+  const addCall = (opId) => {
+    const v = engine.OPV.get(opId);
+    const forEach = mc ? `$context.${mc.id}` : undefined;
+    const next = 1 + Math.max(0, ...steps.map((x) => Number(x.id.replace(/^s/, "")) || 0));
+    set([...steps, { type: "call", id: `s${next}`, operation: opId, request: engine.proposeRequest(v, engine.triggerSources(screen)), forEach, onError: "stop" }]);
+    setAdding(false);
+  };
+  return /* @__PURE__ */ jsxs11("div", {
+    className: "abs-steps",
+    children: [
+      steps.map((st, i) => /* @__PURE__ */ jsx13(StepCard, {
+        ...p,
+        step: st,
+        index: i,
+        total: steps.length,
+        onChange: (x) => set(steps.map((y, j) => j === i ? x : y)),
+        onRemove: () => set(steps.filter((_, j) => j !== i)),
+        onMove: (d) => {
+          const n = [...steps];
+          [n[i], n[i + d]] = [n[i + d], n[i]];
+          set(n);
+        }
+      }, i)),
+      adding ? /* @__PURE__ */ jsxs11("div", {
+        className: "abs-addstep",
+        children: [
+          /* @__PURE__ */ jsx13(ApiPicker, {
+            engine,
+            ranked,
+            onPick: addCall,
+            label: "Call API",
+            autoOpen: true
+          }),
+          /* @__PURE__ */ jsx13("button", {
+            type: "button",
+            className: "abs-link abs-more",
+            onClick: () => setAdding(false),
+            children: "Cancel"
+          })
+        ]
+      }) : /* @__PURE__ */ jsxs11(Fragment6, {
+        children: [
+          /* @__PURE__ */ jsxs11("button", {
+            type: "button",
+            className: "abs-btn abs-btn-dashed",
+            onClick: () => setAdding(true),
+            children: [
+              /* @__PURE__ */ jsx13(Icon, {
+                name: "plus"
+              }),
+              " ",
+              steps.length ? "Call another API" : "Call an API"
+            ]
+          }),
+          !steps.length && /* @__PURE__ */ jsx13("button", {
+            type: "button",
+            className: "abs-link abs-more",
+            onClick: none,
+            children: "No API needed"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/editors/SlotSection.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var ROLE_HELP = {
+  consume: "Data this component shows. Pick the API that returns it.",
+  scoped: "A value shown for each row. Pick the field from the row's data.",
+  trigger: "What happens when this is used. Pick the API calls it makes, or mark it as calling none."
+};
+function SlotSection(p) {
+  const { engine, screen, comp, slot } = p;
+  const state = engine.slotState(screen, comp.bindId, slot.id);
+  const b = engine.getB(screen, comp.bindId, slot.id);
+  const kind = slot.role === "trigger" ? "trigger" : slot.scope ? "scoped" : "consume";
+  return /* @__PURE__ */ jsxs12("section", {
+    className: `abs-slot abs-slot-${state}`,
+    "aria-labelledby": `slot-${comp.bindId}-${slot.id}`,
+    children: [
+      /* @__PURE__ */ jsxs12("header", {
+        className: "abs-slot-h",
+        children: [
+          /* @__PURE__ */ jsx14(Icon, {
+            name: kind === "trigger" ? "action" : kind === "scoped" ? "row" : "data",
+            className: "abs-c-muted"
+          }),
+          /* @__PURE__ */ jsxs12("h3", {
+            id: `slot-${comp.bindId}-${slot.id}`,
+            children: [
+              slot.label,
+              slot.required ? /* @__PURE__ */ jsx14("span", {
+                className: "abs-req",
+                "aria-label": "required",
+                children: "*"
+              }) : null
+            ]
+          }),
+          /* @__PURE__ */ jsx14(Tip, {
+            text: slot.description ? `${slot.description}. ${ROLE_HELP[kind]}` : ROLE_HELP[kind]
+          }),
+          /* @__PURE__ */ jsxs12("span", {
+            className: `abs-pill abs-pill-${state}`,
+            children: [
+              /* @__PURE__ */ jsx14(StateIcon, {
+                state,
+                size: 13
+              }),
+              stateLabel(state)
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx14("div", {
+        className: "abs-slot-b",
+        children: kind === "trigger" ? /* @__PURE__ */ jsx14(TriggerEditor, {
+          ...p
+        }) : kind === "scoped" ? /* @__PURE__ */ jsx14(ScopedEditor, {
+          ...p
+        }) : /* @__PURE__ */ jsx14(ConsumeEditor, {
+          ...p
+        })
+      }),
+      b ? /* @__PURE__ */ jsxs12("footer", {
+        className: "abs-slot-f" + (state === "suggested" ? "" : " is-plain"),
+        children: [
+          state === "suggested" ? /* @__PURE__ */ jsxs12("button", {
+            type: "button",
+            className: "abs-btn abs-btn-primary",
+            onClick: () => p.put({ ...b, state: "confirmed" }),
+            children: [
+              /* @__PURE__ */ jsx14(Icon, {
+                name: "check"
+              }),
+              " Confirm"
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx14("button", {
+            type: "button",
+            className: "abs-btn abs-btn-ghost",
+            onClick: p.drop,
+            children: state === "suggested" ? "Discard" : b.type === "none" ? "Undo" : "Disconnect"
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+
+// src/studio/Inspector.tsx
+import { jsx as jsx15, jsxs as jsxs13, Fragment as Fragment7 } from "react/jsx-runtime";
+function Inspector({ engine, screen, comp, put, drop, goTo, onClose }) {
+  const d = engine.descOf(comp);
+  const parent = comp.parent ? engine.compOf(screen.id, comp.parent) : undefined;
+  return /* @__PURE__ */ jsxs13("aside", {
+    className: "abs-insp abs-enter",
+    "aria-label": `${comp.label} settings`,
+    children: [
+      /* @__PURE__ */ jsxs13("header", {
+        className: "abs-insp-h",
+        children: [
+          /* @__PURE__ */ jsx15(KindIcon, {
+            svg: d.icon
+          }),
+          /* @__PURE__ */ jsxs13("div", {
+            children: [
+              /* @__PURE__ */ jsx15("h2", {
+                children: comp.label
+              }),
+              /* @__PURE__ */ jsxs13("span", {
+                children: [
+                  d.label,
+                  parent && /* @__PURE__ */ jsxs13(Fragment7, {
+                    children: [
+                      " in ",
+                      /* @__PURE__ */ jsx15("button", {
+                        type: "button",
+                        className: "abs-link",
+                        onClick: () => goTo(parent.bindId),
+                        children: parent.label
+                      })
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx15("button", {
+            type: "button",
+            className: "abs-iconbtn",
+            onClick: onClose,
+            "aria-label": "Close panel",
+            children: /* @__PURE__ */ jsx15(Icon, {
+              name: "close"
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx15("div", {
+        className: "abs-insp-b abs-scroll",
+        children: engine.bindable(d).map((sl) => /* @__PURE__ */ jsx15(SlotSection, {
+          engine,
+          screen: screen.id,
+          comp,
+          slot: sl,
+          put,
+          drop: () => drop(comp.bindId, sl.id),
+          goTo
+        }, comp.bindId + sl.id))
+      })
+    ]
+  });
+}
+
+// src/studio/Navigator.tsx
+import * as React10 from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function buildTree(screens) {
+  const root = { key: "", name: "", nodes: [], screens: [], all: [] };
+  for (const s of screens) {
+    let node = root;
+    node.all.push(s);
+    for (const seg of s.path.length ? s.path : ["Other"]) {
+      const key = node.key + "/" + seg;
+      let next = node.nodes.find((n) => n.key === key);
+      if (!next) {
+        next = { key, name: seg, nodes: [], screens: [], all: [] };
+        node.nodes.push(next);
+      }
+      node = next;
+      node.all.push(s);
+    }
+    if (!s.parent)
+      node.screens.push(s);
+  }
+  return root.nodes;
+}
+function Navigator({ engine, current, onPick }) {
+  const [q, setQ] = React10.useState("");
+  const [open, setOpen] = React10.useState({});
+  const screens = engine.fw.registry.screens;
+  const tree = React10.useMemo(() => buildTree(screens), [screens]);
+  const byParent = React10.useMemo(() => {
+    const m = new Map;
+    screens.forEach((s) => {
+      if (s.parent)
+        m.set(s.parent, [...m.get(s.parent) ?? [], s]);
+    });
+    return m;
+  }, [screens]);
+  const needle = q.trim().toLowerCase();
+  const match = (s) => !needle || [s.label, ...s.path].join(" ").toLowerCase().includes(needle);
+  React10.useEffect(() => {
+    const path = screens.find((s) => s.id === current)?.path ?? [];
+    setOpen((o) => {
+      const n = { ...o };
+      path.forEach((_, i) => {
+        n["/" + path.slice(0, i + 1).join("/")] = true;
+      });
+      return n;
+    });
+  }, [current, screens]);
+  const glide = useGlide();
+  const screenRow = (s, depth) => {
+    const kids = byParent.get(s.id) ?? [];
+    if (!(match(s) || kids.some(match)))
+      return null;
+    const t = engine.tally([s]);
+    return /* @__PURE__ */ jsxs14(React10.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxs14("button", {
+          type: "button",
+          "data-glide": true,
+          className: "abs-nav-item" + (s.id === current ? " is-on" : ""),
+          style: { paddingLeft: 12 + depth * 16 },
+          onClick: () => onPick(s.id),
+          "aria-current": s.id === current ? "page" : undefined,
+          "aria-label": `${s.label}, ${t.bound} of ${t.total} connected`,
+          children: [
+            /* @__PURE__ */ jsx16(Icon, {
+              name: s.parent ? "dialog" : "screen"
+            }),
+            /* @__PURE__ */ jsx16("span", {
+              className: "abs-nav-l",
+              children: s.label
+            }),
+            t.total > 0 && t.bound === t.total ? /* @__PURE__ */ jsx16(Icon, {
+              name: "check",
+              size: 14,
+              className: "abs-c-ok"
+            }) : /* @__PURE__ */ jsxs14("span", {
+              className: "abs-nav-count",
+              children: [
+                t.bound,
+                "/",
+                t.total
+              ]
+            })
+          ]
+        }),
+        kids.map((k) => screenRow(k, depth + 1))
+      ]
+    }, s.id);
+  };
+  const group = (n, depth) => {
+    if (needle && !n.all.some(match))
+      return null;
+    const isOpen = !!needle || !!open[n.key];
+    const t = engine.tally(n.all);
+    const holdsCurrent = n.all.some((s) => s.id === current);
+    return /* @__PURE__ */ jsxs14("div", {
+      className: "abs-tree",
+      role: "treeitem",
+      "aria-expanded": isOpen,
+      children: [
+        /* @__PURE__ */ jsxs14("button", {
+          type: "button",
+          "data-glide": true,
+          className: "abs-nav-group-h" + (holdsCurrent ? " has-current" : ""),
+          style: { paddingLeft: 12 + depth * 16 },
+          onClick: () => setOpen((o) => ({ ...o, [n.key]: !isOpen })),
+          "aria-expanded": isOpen,
+          "aria-label": `${n.name}, ${t.bound} of ${t.total} connected`,
+          children: [
+            /* @__PURE__ */ jsx16("span", {
+              className: "abs-nav-l",
+              children: n.name
+            }),
+            /* @__PURE__ */ jsxs14("span", {
+              className: "abs-nav-count",
+              children: [
+                t.bound,
+                "/",
+                t.total
+              ]
+            }),
+            /* @__PURE__ */ jsx16(Icon, {
+              name: "chevronRight",
+              size: 14,
+              className: "abs-chev" + (isOpen ? " abs-rot90" : "")
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx16(Collapse, {
+          open: isOpen,
+          children: /* @__PURE__ */ jsxs14("div", {
+            role: "group",
+            children: [
+              n.nodes.map((x) => group(x, depth + 1)),
+              n.screens.map((s) => screenRow(s, depth + 1))
+            ]
+          })
+        })
+      ]
+    }, n.key);
+  };
+  return /* @__PURE__ */ jsxs14("nav", {
+    className: "abs-nav",
+    "aria-label": "Screens",
+    children: [
+      /* @__PURE__ */ jsx16("div", {
+        className: "abs-nav-head",
+        children: /* @__PURE__ */ jsxs14("div", {
+          className: "abs-search",
+          children: [
+            /* @__PURE__ */ jsx16(Icon, {
+              name: "search",
+              className: "abs-c-muted",
+              size: 14
+            }),
+            /* @__PURE__ */ jsx16("input", {
+              value: q,
+              onChange: (e) => setQ(e.target.value),
+              placeholder: "Filter screens",
+              "aria-label": "Filter screens"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsxs14("div", {
+        className: "abs-nav-scroll abs-scroll abs-glide-box",
+        role: "tree",
+        "aria-label": "Products",
+        ref: glide.ref,
+        ...glide.handlers,
+        children: [
+          glide.indicator,
+          /* @__PURE__ */ jsx16("div", {
+            className: "abs-eyebrow abs-eyebrow-sm",
+            children: "Products"
+          }),
+          tree.map((n) => group(n, 0)),
+          needle && !screens.some(match) ? /* @__PURE__ */ jsxs14("div", {
+            className: "abs-empty-sm",
+            children: [
+              "No screen matches “",
+              q,
+              "”."
+            ]
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/SettingsPanel.tsx
+import * as React12 from "react";
+
+// src/studio/useSettings.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;
+    });
+  }, []);
+  return [settings, update];
+}
+
+// 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;
+  }
+}
+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)}`;
+}
+function SettingsPanel({ docsUrl, onDocsUrl, catalog, onReload, manifests, onImport, onClose }) {
+  const [draft, setDraft] = React12.useState(docsUrl);
+  const [importMsg, setImportMsg] = React12.useState(null);
+  const panel = React12.useRef(null);
+  const file = React12.useRef(null);
+  const valid = isUrl(draft);
+  const dirty = draft.trim() !== docsUrl;
+  React12.useEffect(() => {
+    const key = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    const away = (e) => {
+      if (!panel.current?.contains(e.target) && !e.target.closest?.(".abs-settings-btn"))
+        onClose();
+    };
+    window.addEventListener("keydown", key);
+    document.addEventListener("pointerdown", away);
+    return () => {
+      window.removeEventListener("keydown", key);
+      document.removeEventListener("pointerdown", away);
+    };
+  }, [onClose]);
+  const apply = (e) => {
+    e.preventDefault();
+    if (!valid)
+      return;
+    if (dirty)
+      onDocsUrl(draft.trim());
+    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", {
+    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__ */ jsx17(Icon, {
+                    name: "upload",
+                    size: 14
+                  }),
+                  "Import…"
+                ]
+              }),
+              /* @__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
+        ]
+      })
+    ]
+  });
+}
+
+// src/studio/useBindings.ts
+import * as React13 from "react";
+function useBindings(fw, adapter) {
+  const [index, setIndex] = React13.useState({});
+  const [loaded, setLoaded] = React13.useState(false);
+  const [status, setStatus] = React13.useState("idle");
+  const [removed, setRemoved] = React13.useState(null);
+  const pending = React13.useRef(new Map);
+  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)
+      return;
+    setStatus("saving");
+    const failed = await savePending(adapter, fw, latest.current, pending.current);
+    setStatus(failed.length ? "failed" : pending.current.size ? "saving" : "saved");
+  }, [adapter, fw]);
+  React13.useEffect(() => {
+    if (!pending.current.size)
+      return;
+    setStatus("saving");
+    const t = setTimeout(flush, 400);
+    return () => clearTimeout(t);
+  }, [index, flush]);
+  React13.useEffect(() => () => {
+    flush();
+  }, [flush]);
+  React13.useEffect(() => {
+    const warn = (e) => {
+      if (pending.current.size)
+        e.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, []);
+  const put = React13.useCallback((screen, b) => {
+    markDirty(pending.current, screen);
+    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);
+    setIndex((i) => dropBinding(i, screen, component, slot));
+  }, []);
+  const undo = React13.useCallback(() => {
+    if (removed)
+      put(removed.screen, removed.binding);
+    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];
+}
+
+// src/studio/BindingStudio.tsx
+import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment10 } from "react/jsx-runtime";
+function SaveState({ status, onRetry }) {
+  return /* @__PURE__ */ jsx18("span", {
+    className: "abs-saved is-" + status,
+    "aria-live": "polite",
+    children: status === "failed" ? /* @__PURE__ */ jsxs16("button", {
+      type: "button",
+      onClick: onRetry,
+      children: [
+        /* @__PURE__ */ jsx18(Icon, {
+          name: "alert",
+          size: 14
+        }),
+        "Not saved · Retry"
+      ]
+    }) : status === "saving" ? /* @__PURE__ */ jsxs16(Fragment10, {
+      children: [
+        /* @__PURE__ */ jsx18(Icon, {
+          name: "refresh",
+          size: 14,
+          className: "abs-spin"
+        }),
+        "Saving…"
+      ]
+    }) : status === "saved" ? /* @__PURE__ */ jsxs16(Fragment10, {
+      children: [
+        /* @__PURE__ */ jsx18(Icon, {
+          name: "check",
+          size: 14
+        }),
+        "Saved"
+      ]
+    }) : null
+  });
+}
+function UndoToast({ removed, label, onUndo, onDismiss }) {
+  React15.useEffect(() => {
+    const t = setTimeout(onDismiss, 6000);
+    return () => clearTimeout(t);
+  }, [removed, onDismiss]);
+  return /* @__PURE__ */ jsxs16("div", {
+    className: "abs-toast",
+    role: "status",
+    children: [
+      /* @__PURE__ */ jsxs16("span", {
+        children: [
+          label,
+          " disconnected"
+        ]
+      }),
+      /* @__PURE__ */ jsx18("button", {
+        type: "button",
+        onClick: onUndo,
+        children: "Undo"
+      })
+    ]
+  });
+}
+var EMPTY_HINT = /* @__PURE__ */ jsxs16("aside", {
+  className: "abs-insp abs-insp-empty abs-enter",
+  children: [
+    /* @__PURE__ */ jsx18("span", {
+      className: "abs-empty-ico",
+      children: /* @__PURE__ */ jsx18(Icon, {
+        name: "pointer",
+        size: 20
+      })
+    }),
+    /* @__PURE__ */ jsx18("b", {
+      children: "Select a component"
+    }),
+    /* @__PURE__ */ jsx18("span", {
+      children: "Pick something from the list to connect it to an API."
+    })
+  ]
+});
+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]);
+  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 settingsButton = /* @__PURE__ */ jsxs16("div", {
+    className: "abs-settings-wrap",
+    children: [
+      /* @__PURE__ */ jsxs16("button", {
+        type: "button",
+        className: "abs-iconbtn abs-settings-btn" + (settingsOpen ? " is-on" : ""),
+        "aria-label": "Settings",
+        "aria-expanded": settingsOpen,
+        onClick: () => setSettingsOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsx18(Icon, {
+            name: "settings"
+          }),
+          catalogState.status === "error" ? /* @__PURE__ */ jsx18("span", {
+            className: "abs-dot-bad",
+            "aria-hidden": "true"
+          }) : null
+        ]
+      }),
+      onClose ? /* @__PURE__ */ jsx18("button", {
+        type: "button",
+        className: "abs-iconbtn",
+        "aria-label": "Close",
+        onClick: onClose,
+        children: /* @__PURE__ */ jsx18(Icon, {
+          name: "close"
+        })
+      }) : null,
+      settingsOpen ? /* @__PURE__ */ jsx18(SettingsPanel, {
+        docsUrl: settings.docsUrl,
+        onDocsUrl: (url) => updateSettings({ docsUrl: url }),
+        catalog: catalogState,
+        onReload: reloadCatalog,
+        manifests: () => fw ? Object.entries(binds.index).map(([s, b]) => toManifest2(fw, s, b)) : [],
+        onImport: binds.importManifests,
+        onClose: closeSettings
+      }) : null
+    ]
+  });
+  if (!fw) {
+    return /* @__PURE__ */ jsxs16("div", {
+      className: "abs-root",
+      children: [
+        /* @__PURE__ */ jsxs16("header", {
+          className: "abs-top",
+          children: [
+            /* @__PURE__ */ jsx18("div", {
+              className: "abs-brand",
+              children: title
+            }),
+            /* @__PURE__ */ jsx18("span", {}),
+            settingsButton
+          ]
+        }),
+        /* @__PURE__ */ jsx18("div", {
+          className: "abs-state-page",
+          children: catalogState.status === "error" ? /* @__PURE__ */ jsxs16(Fragment10, {
+            children: [
+              /* @__PURE__ */ jsx18("span", {
+                className: "abs-empty-ico is-bad",
+                children: /* @__PURE__ */ jsx18(Icon, {
+                  name: "alert",
+                  size: 20
+                })
+              }),
+              /* @__PURE__ */ jsx18("b", {
+                children: "The API docs did not load"
+              }),
+              /* @__PURE__ */ jsx18("span", {
+                children: catalogState.error
+              }),
+              /* @__PURE__ */ jsxs16("div", {
+                className: "abs-set-row",
+                children: [
+                  /* @__PURE__ */ jsxs16("button", {
+                    type: "button",
+                    className: "abs-btn abs-btn-primary",
+                    onClick: reloadCatalog,
+                    children: [
+                      /* @__PURE__ */ jsx18(Icon, {
+                        name: "refresh",
+                        size: 14
+                      }),
+                      "Try again"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx18("button", {
+                    type: "button",
+                    className: "abs-btn",
+                    onClick: () => setSettingsOpen(true),
+                    children: "Change the URL"
+                  })
+                ]
+              })
+            ]
+          }) : /* @__PURE__ */ jsxs16(Fragment10, {
+            children: [
+              /* @__PURE__ */ jsx18("span", {
+                className: "abs-loader",
+                "aria-hidden": "true"
+              }),
+              /* @__PURE__ */ jsx18("span", {
+                "aria-live": "polite",
+                children: "Loading API docs…"
+              })
+            ]
+          })
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx18(Workbench, {
+    fw,
+    binds,
+    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]);
+  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) => {
+    if (screenId)
+      put(screenId, b);
+  }, [put, screenId]);
+  const dropHere = React15.useCallback((c, s) => {
+    if (screenId)
+      drop(screenId, c, s);
+  }, [drop, screenId]);
+  if (!screen)
+    return /* @__PURE__ */ jsx18("div", {
+      className: "abs-root",
+      children: /* @__PURE__ */ jsx18("div", {
+        className: "abs-empty",
+        children: "No screens are registered yet."
+      })
+    });
+  const total = engine.tally(fw.registry.screens);
+  const removedLabel = removed ? engine.compOf(removed.screen, removed.binding.component)?.label ?? removed.binding.component : "";
+  return /* @__PURE__ */ jsxs16("div", {
+    className: "abs-root",
+    children: [
+      /* @__PURE__ */ jsxs16("header", {
+        className: "abs-top",
+        children: [
+          /* @__PURE__ */ jsx18("div", {
+            className: "abs-brand",
+            children: title
+          }),
+          /* @__PURE__ */ jsx18(FindAnything, {
+            engine,
+            onGo: (s, c) => go({ screen: s, component: c })
+          }),
+          /* @__PURE__ */ jsxs16("div", {
+            className: "abs-top-meta",
+            children: [
+              /* @__PURE__ */ jsx18(SaveState, {
+                status,
+                onRetry: retry
+              }),
+              /* @__PURE__ */ jsxs16("span", {
+                className: "abs-overall",
+                title: `Components connected across all ${fw.registry.screens.length} screens`,
+                children: [
+                  /* @__PURE__ */ jsx18("b", {
+                    children: total.bound
+                  }),
+                  "/",
+                  total.total,
+                  " connected"
+                ]
+              }),
+              settingsButton
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs16("div", {
+        className: "abs-body" + (comp ? " has-insp" : ""),
+        children: [
+          /* @__PURE__ */ jsx18(Navigator, {
+            engine,
+            current: screen.id,
+            onPick: (id) => go({ screen: id })
+          }),
+          loaded ? /* @__PURE__ */ jsx18(ComponentList, {
+            engine,
+            screen,
+            selected: comp?.bindId,
+            onSelect: select
+          }, screen.id) : /* @__PURE__ */ jsx18("div", {
+            className: "abs-center"
+          }),
+          comp ? /* @__PURE__ */ jsx18(Inspector, {
+            engine,
+            screen,
+            comp,
+            put: putHere,
+            drop: dropHere,
+            goTo: select,
+            onClose: () => select(undefined)
+          }, screen.id + comp.bindId) : loaded ? EMPTY_HINT : null
+        ]
+      }),
+      removed ? /* @__PURE__ */ jsx18(UndoToast, {
+        removed,
+        label: removedLabel,
+        onUndo: undo,
+        onDismiss: dismiss
+      }) : null
+    ]
+  });
+}
+// 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
+};
+
+//# debugId=34079C9B227D68B264756E2164756E21
+//# sourceMappingURL=index.js.map