@jxsuite/studio 4.1.0 → 5.1.0

package/dist/chunks/studio-vfq8qpjt.js

@@ -0,0 +1,1219 @@
+import {
+  nothing2,
+  render4
+} from "./studio-1k325pwf.js";
+import {
+  mount3,
+  preloadDocument,
+  showModal,
+  close2,
+  selectValue,
+  registerUi,
+  activeRegistry
+} from "./studio-kkqkcp3d.js";
+import {
+  effectScope,
+  effect,
+  reactive,
+  toasts2,
+  notify2,
+  dismiss2
+} from "./studio-p1dw8wfw.js";
+import {
+  errorMessage2
+} from "./studio-yxa81f45.js";
+
+// src/ui/regions.ts
+var REGION_ATTR = "data-jx-region";
+var REGION_SURFACES = [
+  "rail",
+  "navigator",
+  "inspector",
+  "pane",
+  "dock.bottom",
+  "statusbar",
+  "commandbar",
+  "overlay"
+];
+var DOTTED_SURFACES = new Set(["dock.bottom"]);
+function parseRegionId(id) {
+  const slash = id.indexOf("/");
+  const head = slash === -1 ? id : id.slice(0, slash);
+  const part = slash === -1 ? undefined : id.slice(slash + 1);
+  if (part === "" || head === "") {
+    return null;
+  }
+  let surface = head;
+  let instance;
+  if (!DOTTED_SURFACES.has(head)) {
+    const dot = head.indexOf(".");
+    if (dot !== -1) {
+      surface = head.slice(0, dot);
+      instance = head.slice(dot + 1);
+      if (instance === "") {
+        return null;
+      }
+    }
+  }
+  if (!REGION_SURFACES.includes(surface)) {
+    return null;
+  }
+  return instance === undefined ? part === undefined ? { surface } : { part, surface } : part === undefined ? { instance, surface } : { instance, part, surface };
+}
+function isRegionId(id) {
+  return parseRegionId(id) !== null;
+}
+function canonicalRegionId(id) {
+  if (id === "pane") {
+    return "pane.primary";
+  }
+  return id.startsWith("pane/") ? `pane.primary/${id.slice(5)}` : id;
+}
+function regionRoot(root) {
+  return root ?? document;
+}
+var DERIVED_RESOLVERS = [
+  {
+    locate: ([, prop], root) => {
+      const row = resolveRegion(`inspector/field:${prop}`, root);
+      const browse = row?.querySelector('[part="browse"]');
+      return browse ? [browse] : [];
+    },
+    pattern: /^inspector\/field:(.+)\/browse$/
+  },
+  {
+    locate: ([, prop], root) => {
+      const inspector = resolveRegion("inspector", root);
+      return inspector ? [...inspector.querySelectorAll(`[data-prop="${CSS.escape(prop)}"]`)] : [];
+    },
+    pattern: /^inspector\/field:(.+)$/
+  }
+];
+function resolveAllRegions(id, root) {
+  const canonical = canonicalRegionId(id);
+  if (!isRegionId(canonical)) {
+    return [];
+  }
+  const stamped = [
+    ...regionRoot(root).querySelectorAll(`[${REGION_ATTR}="${CSS.escape(canonical)}"]`)
+  ];
+  if (stamped.length > 0) {
+    return stamped;
+  }
+  for (const resolver of DERIVED_RESOLVERS) {
+    const match = canonical.match(resolver.pattern);
+    if (match) {
+      return resolver.locate(match, regionRoot(root));
+    }
+  }
+  return [];
+}
+function resolveRegion(id, root) {
+  const all = resolveAllRegions(id, root);
+  return all.at(-1) ?? null;
+}
+var REGION_FOR_FOCUS = {
+  dock: "dock.bottom",
+  inspector: "inspector",
+  navigator: "navigator",
+  pane: "pane.primary",
+  rail: "rail",
+  status: "statusbar"
+};
+function paneRegion(paneId, part) {
+  return part ? `pane.${paneId}/${part}` : `pane.${paneId}`;
+}
+function paneStripRegion(paneId) {
+  return paneRegion(paneId, "tabs");
+}
+function navigatorPanelRegion(panelId) {
+  return `navigator/panel:${panelId}`;
+}
+function inspectorTabRegion(tabId) {
+  return `inspector/tab:${tabId}`;
+}
+var NAVIGATOR_STATEMENTS_REGION = "navigator/statements";
+function inspectorStatementsRegion(eventKey) {
+  return `inspector/statements:${eventKey}`;
+}
+function bottomPanelRegion(panelId) {
+  return `dock.bottom/panel:${panelId}`;
+}
+var OVERLAY_INSTANCE = {
+  dialog: "dialog",
+  modal: "dialog",
+  popover: "menu",
+  toast: "toasts"
+};
+function overlayRegion(layer, id) {
+  const instance = OVERLAY_INSTANCE[layer];
+  return id ? `overlay.${instance}:${id}` : `overlay.${instance}`;
+}
+
+// src/services/surface-registry.ts
+var mounts = new Map;
+var nextId = 1;
+function registerMount(entry) {
+  const id = nextId;
+  nextId += 1;
+  mounts.set(id, { ...entry, id });
+  return id;
+}
+function unregisterMount(id) {
+  mounts.delete(id);
+}
+function surfaceMounts() {
+  return [...mounts.values()];
+}
+function mountsUsing(tag) {
+  const lower = tag.toLowerCase();
+  return surfaceMounts().filter((m) => m.elements.has(lower));
+}
+function mountsOf(name) {
+  return surfaceMounts().filter((m) => m.name === name);
+}
+
+// src/ui/kit.ts
+var ready = null;
+function registerKit(doc = document) {
+  ready ??= registerUi({ document: doc });
+  return ready;
+}
+function kitReady() {
+  return ready ?? registerKit();
+}
+
+// src/ui/surface.ts
+var SURFACES_BASE = "jx-studio:/surfaces/";
+var surfaces = new Map;
+function registerSurface(name, doc) {
+  surfaces.set(name, doc);
+  preloadDocument(surfaceUrl(name), doc);
+}
+function surfaceUrl(name) {
+  return `${SURFACES_BASE}${name}.json`;
+}
+function surfaceDocument(name) {
+  return surfaces.get(name);
+}
+function surfaceResolver(url) {
+  if (!url.startsWith(SURFACES_BASE) || !url.endsWith(".json")) {
+    return;
+  }
+  return surfaces.get(url.slice(SURFACES_BASE.length, -".json".length));
+}
+async function mountSurface(name, hostScope, host, options = {}) {
+  const doc = surfaces.get(name);
+  if (!doc) {
+    throw new Error(`Studio surface "${name}" is not registered`);
+  }
+  await kitReady();
+  if (options.region) {
+    host.setAttribute(REGION_ATTR, options.region);
+  }
+  const handle = await mount3(doc, host, {
+    scope: hostScope,
+    base: SURFACES_BASE,
+    resolver: surfaceResolver,
+    ...options.onNodeCreated ? { onNodeCreated: options.onNodeCreated } : {},
+    ...options.onNodeMoved ? { onNodeMoved: options.onNodeMoved } : {},
+    ...options.signal ? { signal: options.signal } : {}
+  });
+  const surfaceHandle = (dispose) => ({
+    dispose,
+    elements: handle.elements,
+    root: handle.root,
+    scope: handle.scope
+  });
+  if (options.signal?.aborted) {
+    return surfaceHandle(handle.dispose);
+  }
+  let id = 0;
+  const dispose = () => {
+    handle.dispose();
+    unregisterMount(id);
+  };
+  id = registerMount({
+    elements: handle.elements,
+    host,
+    name,
+    remount: async () => {
+      dispose();
+      await mountSurface(name, hostScope, host, options);
+    }
+  });
+  options.signal?.addEventListener("abort", () => unregisterMount(id), { once: true });
+  return surfaceHandle(dispose);
+}
+// src/surfaces/dialog.json
+var dialog_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioDialog",
+  $description: "Studio's confirm, save-or-discard and prompt dialogs: one jx-dialog whose body is projected from the adapter's scope. `message` is a sentence; `choice` is a `jx-select` over the options; `field` is the prompt's jx-textfield with its refusal. The four answers call the host's functions, and the host decides when the dialog closes.",
+  tagName: "jx-dialog",
+  $props: {
+    headline: {
+      $ref: "#/state/headline"
+    },
+    confirmLabel: {
+      $ref: "#/state/confirmLabel"
+    },
+    secondaryLabel: {
+      $ref: "#/state/secondaryLabel"
+    },
+    cancelLabel: {
+      $ref: "#/state/cancelLabel"
+    },
+    destructive: {
+      $ref: "#/state/destructive"
+    },
+    size: {
+      $ref: "#/state/size"
+    }
+  },
+  attributes: {
+    headline: "${state.headline}",
+    "confirm-label": "${state.confirmLabel || null}",
+    "secondary-label": "${state.secondaryLabel || null}",
+    "cancel-label": "${state.cancelLabel || null}",
+    part: "dialog-host"
+  },
+  onconfirm: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/confirm"
+        },
+        value: []
+      }
+    ]
+  },
+  onsecondary: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/secondary"
+        },
+        value: []
+      }
+    ]
+  },
+  oncancel: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/cancel"
+        },
+        value: []
+      }
+    ]
+  },
+  onclose: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  style: {
+    '& [part="message"]': {
+      margin: "0 0 var(--jx-space-3)"
+    },
+    '& [part="message"]:last-child': {
+      margin: "0"
+    },
+    '& [part="island"]:empty': {
+      display: "none"
+    },
+    '& [part="message-slot"], & [part="choice-slot"], & [part="field-slot"]': {
+      display: "contents"
+    },
+    '& [part="choice-row"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-1)",
+      margin: "0 0 var(--jx-space-3)"
+    },
+    '& [part="choice-label"]': {
+      fontSize: "var(--jx-text-sm)",
+      color: "var(--jx-fg-dim)"
+    },
+    "& jx-textfield": {
+      width: "100%"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "message-slot",
+        role: "none"
+      },
+      $switch: {
+        $ref: "#/state/hasMessage"
+      },
+      cases: {
+        true: {
+          tagName: "p",
+          attributes: {
+            part: "message"
+          },
+          textContent: "${state.message}"
+        }
+      }
+    },
+    {
+      tagName: "div",
+      attributes: {
+        part: "island"
+      }
+    },
+    {
+      tagName: "div",
+      attributes: {
+        part: "choice-slot",
+        role: "none"
+      },
+      $switch: {
+        $ref: "#/state/hasChoice"
+      },
+      cases: {
+        true: {
+          tagName: "div",
+          attributes: {
+            part: "choice-row"
+          },
+          children: [
+            {
+              tagName: "span",
+              attributes: {
+                part: "choice-label"
+              },
+              textContent: "${state.choiceLabel}"
+            },
+            {
+              tagName: "jx-select",
+              $props: {
+                label: {
+                  $ref: "#/state/choiceLabel"
+                },
+                options: {
+                  $ref: "#/state/options"
+                },
+                value: {
+                  $ref: "#/state/chosen"
+                }
+              },
+              attributes: {
+                part: "choice"
+              },
+              onchange: {
+                $prototype: "Function",
+                body: [
+                  {
+                    operator: "call",
+                    target: {
+                      $ref: "#/state/pick"
+                    },
+                    value: [
+                      {
+                        $ref: "event#/target/value"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      tagName: "div",
+      attributes: {
+        part: "field-slot",
+        role: "none"
+      },
+      $switch: {
+        $ref: "#/state/hasField"
+      },
+      cases: {
+        true: {
+          tagName: "jx-textfield",
+          $props: {
+            label: {
+              $ref: "#/state/headline"
+            },
+            value: {
+              $ref: "#/state/value"
+            },
+            placeholder: {
+              $ref: "#/state/placeholder"
+            },
+            invalid: {
+              $ref: "#/state/invalid"
+            },
+            error: {
+              $ref: "#/state/error"
+            },
+            multiline: {
+              $ref: "#/state/multiline"
+            },
+            rows: {
+              $ref: "#/state/rows"
+            },
+            mono: {
+              $ref: "#/state/mono"
+            }
+          },
+          attributes: {
+            part: "field"
+          },
+          oninput: {
+            $prototype: "Function",
+            body: [
+              {
+                operator: "call",
+                target: {
+                  $ref: "#/state/input"
+                },
+                value: [
+                  {
+                    $ref: "event#/target/value"
+                  }
+                ]
+              }
+            ]
+          },
+          onkeydown: {
+            $prototype: "Function",
+            body: [
+              {
+                $switch: {
+                  $ref: "#/state/singleLine"
+                },
+                cases: {
+                  true: [
+                    {
+                      $switch: {
+                        $ref: "event#/key"
+                      },
+                      cases: {
+                        Enter: [
+                          {
+                            preventDefault: true
+                          },
+                          {
+                            operator: "call",
+                            target: {
+                              $ref: "#/state/confirm"
+                            },
+                            value: []
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          },
+          $description: "The prompt's one field. `multiline` is what makes it a paste box rather than a line: an import the author copied out of a `_redirects` file is column-aligned, so it also asks for `mono`. A multiline field takes Enter as a newline, which is why the Enter-confirms handler below is guarded on it — a paste box whose second line submits the dialog cannot be typed into."
+        }
+      }
+    }
+  ]
+};
+
+// src/surfaces/dialog.ts
+registerSurface("dialog", dialog_default);
+function whenReady(element) {
+  if (element.querySelector('[part="dialog"]')) {
+    return Promise.resolve(element);
+  }
+  return new Promise((resolve) => {
+    element.addEventListener("jx-ready", function ready(event) {
+      if (event.target !== element && !element.querySelector('[part="dialog"]')) {
+        return;
+      }
+      element.removeEventListener("jx-ready", ready);
+      resolve(element);
+    });
+  });
+}
+function openDialogSurface(options) {
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion("dialog", options.region));
+  options.layer.append(slot);
+  const scope = reactive({
+    cancel: () => {
+      options.onCancel();
+    },
+    cancelLabel: options.cancelLabel,
+    choiceLabel: options.choice?.label ?? "",
+    chosen: options.choice?.chosen ?? "",
+    closed: () => {
+      options.onClosed();
+    },
+    confirm: () => {
+      options.onConfirm();
+    },
+    confirmLabel: options.confirmLabel,
+    destructive: options.destructive === true,
+    error: "",
+    hasChoice: options.choice !== undefined,
+    hasField: options.field !== undefined,
+    mono: options.field?.mono === true,
+    multiline: options.field?.multiline === true,
+    rows: options.field?.rows ?? "3",
+    singleLine: options.field !== undefined && options.field.multiline !== true ? "true" : "false",
+    hasMessage: options.message !== undefined && options.message !== "",
+    headline: options.headline,
+    input: (value) => {
+      scope.value = value;
+      options.onInput?.(value);
+    },
+    invalid: false,
+    message: options.message ?? "",
+    options: options.choice?.options ?? [],
+    pick: (value) => {
+      options.onPick?.(value);
+    },
+    placeholder: options.field?.placeholder ?? "",
+    secondary: () => {
+      options.onSecondary?.();
+    },
+    secondaryLabel: options.secondaryLabel ?? "",
+    size: options.size ?? "sm",
+    value: options.field?.value ?? ""
+  });
+  let handle = null;
+  let closed = false;
+  let abort = () => {};
+  const aborted = new Promise((resolve) => {
+    abort = resolve;
+  });
+  const mounted = mountSurface("dialog", scope, slot);
+  const ready = mounted.then(async (surface) => {
+    const element = surface.root;
+    if (closed) {
+      surface.dispose();
+      return element;
+    }
+    handle = surface;
+    await Promise.race([whenReady(element), aborted]);
+    if (closed) {
+      return element;
+    }
+    options.island?.(element.querySelector('[part="island"]') ?? element);
+    showModal(element);
+    if (options.field) {
+      const field = element.querySelector("jx-textfield");
+      if (field) {
+        setTimeout(() => {
+          if (!closed) {
+            selectValue(field, options.field?.select ?? "all");
+          }
+        }, 0);
+      }
+    }
+    return element;
+  });
+  return {
+    close() {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      abort();
+      const element = handle?.root;
+      if (element instanceof HTMLElement) {
+        close2(element);
+      }
+      handle?.dispose();
+      handle = null;
+      slot.remove();
+    },
+    host: slot,
+    ready,
+    update(patch) {
+      if (patch.confirmLabel !== undefined) {
+        scope.confirmLabel = patch.confirmLabel;
+      }
+      if (patch.cancelLabel !== undefined) {
+        scope.cancelLabel = patch.cancelLabel;
+      }
+      if (patch.message !== undefined) {
+        scope.message = patch.message;
+        scope.hasMessage = patch.message !== "";
+      }
+      if (patch.value !== undefined) {
+        scope.value = patch.value;
+      }
+      if (patch.placeholder !== undefined) {
+        scope.placeholder = patch.placeholder;
+      }
+      if (patch.invalid !== undefined) {
+        scope.invalid = patch.invalid;
+      }
+      if (patch.error !== undefined) {
+        if (patch.error !== "" && patch.error === scope.error) {
+          scope.error = "";
+          const repeated = patch.error;
+          queueMicrotask(() => {
+            scope.error = repeated;
+          });
+        } else {
+          scope.error = patch.error;
+        }
+      }
+      if (patch.options !== undefined) {
+        scope.options = patch.options;
+      }
+      if (patch.chosen !== undefined) {
+        scope.chosen = patch.chosen;
+      }
+    }
+  };
+}
+// src/surfaces/toasts.json
+var toasts_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioToasts",
+  $description: "The toast stack: a rendering of the notification service's toasts, newest last. Each row is projected by ui/layers.ts with its severity glyph and, where a recovery command exists, that command's title and gate; the two buttons call back into the host, which owns the records and their timers.",
+  tagName: "div",
+  attributes: {
+    part: "stack"
+  },
+  style: {
+    position: "absolute",
+    right: "var(--jx-space-4)",
+    bottom: "36px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--jx-space-3)",
+    alignItems: "flex-end",
+    maxWidth: "min(420px, calc(100vw - 24px))",
+    '& [part="toast"]': {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--jx-space-3)",
+      pointerEvents: "auto",
+      padding: "var(--jx-space-3)",
+      border: "1px solid var(--jx-border)",
+      borderLeft: "3px solid var(--jx-fg-dim)",
+      borderRadius: "var(--jx-radius-md)",
+      background: "var(--jx-bg-panel)",
+      color: "var(--jx-fg)",
+      fontSize: "var(--jx-text-sm)",
+      lineHeight: "var(--jx-leading-sm)",
+      boxShadow: "var(--jx-shadow-popover)"
+    },
+    '& [part="toast"][data-severity="success"]': {
+      borderLeftColor: "var(--jx-success)"
+    },
+    '& [part="toast"][data-severity="info"]': {
+      borderLeftColor: "var(--jx-accent)"
+    },
+    '& [part="toast"][data-severity="warn"]': {
+      borderLeftColor: "var(--jx-warning)"
+    },
+    '& [part="toast"][data-severity="error"]': {
+      borderLeftColor: "var(--jx-danger)"
+    },
+    '& [part="icon"]': {
+      flex: "none",
+      width: "14px",
+      textAlign: "center",
+      fontWeight: "700"
+    },
+    '& [data-severity="success"] [part="icon"]': {
+      color: "var(--jx-success)"
+    },
+    '& [data-severity="info"] [part="icon"]': {
+      color: "var(--jx-accent)"
+    },
+    '& [data-severity="warn"] [part="icon"]': {
+      color: "var(--jx-warning)"
+    },
+    '& [data-severity="error"] [part="icon"]': {
+      color: "var(--jx-danger)"
+    },
+    '& [part="message"]': {
+      flex: "1",
+      minWidth: "0",
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: "3"
+    },
+    '& [part="action-slot"]': {
+      display: "contents"
+    },
+    '& [part="action"] > [part="control"]': {
+      color: "var(--jx-accent)"
+    }
+  },
+  children: [
+    {
+      $prototype: "Array",
+      items: {
+        $ref: "#/state/toasts"
+      },
+      key: {
+        $ref: "$map/item/id"
+      },
+      map: {
+        tagName: "div",
+        attributes: {
+          part: "toast",
+          "data-severity": "${$map.item.severity}"
+        },
+        children: [
+          {
+            tagName: "span",
+            attributes: {
+              part: "icon",
+              "aria-hidden": "true"
+            },
+            textContent: "${$map.item.icon}"
+          },
+          {
+            tagName: "span",
+            attributes: {
+              part: "message"
+            },
+            textContent: "${$map.item.message}"
+          },
+          {
+            tagName: "span",
+            attributes: {
+              part: "action-slot",
+              role: "none"
+            },
+            $switch: {
+              $ref: "$map/item/hasAction"
+            },
+            cases: {
+              true: {
+                tagName: "jx-button",
+                $props: {
+                  size: "sm",
+                  quiet: true,
+                  disabled: {
+                    $ref: "$map/item/actionDisabled"
+                  }
+                },
+                attributes: {
+                  part: "action",
+                  title: "${$map.item.actionTitle}"
+                },
+                onclick: {
+                  $prototype: "Function",
+                  body: [
+                    {
+                      operator: "call",
+                      target: {
+                        $ref: "#/state/runAction"
+                      },
+                      value: [
+                        {
+                          $ref: "$map/item/id"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                children: [
+                  {
+                    tagName: "span",
+                    textContent: "${$map.item.actionLabel}"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            tagName: "jx-action-button",
+            $props: {
+              label: "Dismiss notification",
+              hint: "Dismiss notification",
+              icon: "x",
+              size: "sm"
+            },
+            attributes: {
+              part: "dismiss"
+            },
+            onclick: {
+              $prototype: "Function",
+              body: [
+                {
+                  operator: "call",
+                  target: {
+                    $ref: "#/state/dismissToast"
+                  },
+                  value: [
+                    {
+                      $ref: "$map/item/id"
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+};
+
+// src/commands/run-reported.ts
+function isRefusal(error) {
+  return error instanceof RangeError || error instanceof Error && error.name === "CommandUnavailableError";
+}
+function runReported(registry, id, args, source = id) {
+  const report = (error) => {
+    if (!isRefusal(error)) {
+      console.error(`${source}: command "${id}" failed`, error);
+    }
+    notify2.error(errorMessage2(error), { key: `command.run:${id}`, source });
+  };
+  let result;
+  try {
+    result = registry.run(id, args);
+  } catch (error) {
+    report(error);
+    return Promise.resolve();
+  }
+  return Promise.resolve(result).catch(report);
+}
+function runActiveReported(id, args, source) {
+  const registry = activeRegistry();
+  return registry ? runReported(registry, id, args, source) : Promise.resolve();
+}
+
+// src/ui/layers.ts
+var _popoverLayer;
+var _modalLayer;
+var _dialogLayer;
+var _toastLayer;
+function layerHost2(kind) {
+  const host = kind === "popover" ? _popoverLayer : kind === "modal" ? _modalLayer : kind === "toast" ? _toastLayer : _dialogLayer;
+  return host || document.body;
+}
+function initLayers2() {
+  _popoverLayer = document.querySelector("#layer-popover");
+  _modalLayer = document.querySelector("#layer-modal");
+  _dialogLayer = document.querySelector("#layer-dialog");
+  _toastLayer = document.querySelector("#layer-toast");
+  mountToastHost();
+}
+var UNDERLAID = "jx-dialog[data-open], dialog[open]";
+function isModalOpen2() {
+  return Boolean(_dialogLayer?.querySelector(UNDERLAID) || _modalLayer?.querySelector(UNDERLAID));
+}
+function showConfirmDialog2(headline, message, opts = {}) {
+  const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(value);
+    };
+    const handle = openDialogSurface({
+      cancelLabel,
+      confirmLabel,
+      destructive,
+      headline,
+      layer: layerHost2("dialog"),
+      ...messageOptions(message),
+      onCancel: () => done(false),
+      onClosed: () => done(false),
+      onConfirm: () => done(true)
+    });
+  });
+}
+function showSaveDiscardDialog2(headline, message, opts = {}) {
+  const { saveLabel = "Save", discardLabel = "Discard", cancelLabel = "Cancel" } = opts;
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(value);
+    };
+    const handle = openDialogSurface({
+      cancelLabel,
+      confirmLabel: saveLabel,
+      headline,
+      layer: layerHost2("dialog"),
+      ...messageOptions(message),
+      onCancel: () => done("cancel"),
+      onClosed: () => done("cancel"),
+      onConfirm: () => done("save"),
+      onSecondary: () => done("discard"),
+      secondaryLabel: discardLabel
+    });
+  });
+}
+function messageOptions(message) {
+  if (typeof message === "string") {
+    return { message };
+  }
+  return {
+    island: (host) => {
+      render4(message, host);
+    }
+  };
+}
+function showPromptDialog2(headline, opts = {}) {
+  const {
+    cancelLabel = "Cancel",
+    choice,
+    confirmLabel = "OK",
+    message,
+    mono = false,
+    multiline = false,
+    placeholder = "",
+    rows = "3",
+    select = "all",
+    size,
+    validate,
+    value: initialValue = ""
+  } = opts;
+  const check = (candidate) => validate ? validate(candidate, chosen) : candidate.trim() ? "" : "Enter a value.";
+  let value = initialValue;
+  let chosen = choice?.initial ?? "";
+  let error = "";
+  let touched = false;
+  const placeholderNow = () => typeof placeholder === "function" ? placeholder() : placeholder;
+  const optionsNow = () => choice ? choice.options().map((option) => ({ label: option.label, value: option.value })) : [];
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (result) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(result);
+    };
+    const showError = (next) => {
+      error = next;
+      handle.update({ error, invalid: error !== "" });
+    };
+    const handle = openDialogSurface({
+      cancelLabel,
+      confirmLabel,
+      headline,
+      layer: layerHost2("dialog"),
+      ...message === undefined ? {} : messageOptions(message),
+      ...choice ? { choice: { chosen, label: choice.label, options: optionsNow() } } : {},
+      field: { mono, multiline, placeholder: placeholderNow(), rows, select, value },
+      ...size === undefined ? {} : { size },
+      onCancel: () => done(null),
+      onClosed: () => done(null),
+      onConfirm: () => {
+        const refused = check(value);
+        if (refused) {
+          showError(refused);
+          return;
+        }
+        done(value.trim());
+      },
+      onInput: (next) => {
+        touched = true;
+        value = next;
+        const candidate = check(value);
+        if (candidate !== error) {
+          showError(candidate);
+        }
+      },
+      onPick: (next) => {
+        chosen = next;
+        choice?.onChange?.(next);
+        const candidate = check(value);
+        error = touched || error ? candidate : "";
+        handle.update({
+          chosen,
+          error,
+          invalid: error !== "",
+          options: optionsNow(),
+          placeholder: placeholderNow()
+        });
+      }
+    });
+  });
+}
+var _namedSlots = new Map;
+function getLayerSlot2(layer, id) {
+  const key = `${layer}:${id}`;
+  let slot = _namedSlots.get(key);
+  if (slot && slot.parentElement) {
+    return slot;
+  }
+  slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion(layer, id));
+  layerHost2(layer).append(slot);
+  _namedSlots.set(key, slot);
+  return slot;
+}
+function clearLayerSlot2(layer, id) {
+  const key = `${layer}:${id}`;
+  const slot = _namedSlots.get(key);
+  if (slot) {
+    render4(nothing2, slot);
+    slot.remove();
+    _namedSlots.delete(key);
+  }
+}
+var TOAST_ENTER_MS = 180;
+var TOAST_ICON = {
+  error: "✕",
+  info: "ℹ",
+  success: "✓",
+  warn: "!"
+};
+var _toastScope = null;
+var _toastTimers = new Map;
+var _toastEntering = new Set;
+function reducedMotion() {
+  return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function toastsAreHeld() {
+  try {
+    return new URLSearchParams(globalThis.location?.search ?? "").get("automation") === "1";
+  } catch {
+    return false;
+  }
+}
+function overlayIdleBlockers2() {
+  return [..._toastEntering].map((id) => `overlay: toast ${id} settling in`);
+}
+function retireToast(id) {
+  const timer = _toastTimers.get(id);
+  if (timer !== undefined) {
+    clearTimeout(timer);
+    _toastTimers.delete(id);
+  }
+  _toastEntering.delete(id);
+  dismiss2(id);
+}
+function scheduleToast(record) {
+  if (_toastTimers.has(record.id) || _toastEntering.has(record.id)) {
+    return;
+  }
+  const settle = reducedMotion() ? 0 : TOAST_ENTER_MS;
+  if (settle > 0) {
+    _toastEntering.add(record.id);
+    setTimeout(() => _toastEntering.delete(record.id), settle);
+  }
+  const rest = record.timeoutMs ?? 0;
+  if (rest <= 0 || toastsAreHeld()) {
+    return;
+  }
+  _toastTimers.set(record.id, setTimeout(() => retireToast(record.id), rest));
+}
+registerSurface("toasts", toasts_default);
+var _toastState = null;
+var _toastMount = null;
+var _toastHandle = null;
+function toastScope() {
+  _toastState ??= reactive({
+    dismissToast: (id) => {
+      retireToast(id);
+    },
+    runAction: (id) => {
+      const record = toasts2.find((candidate) => candidate.id === id);
+      const registry = activeRegistry();
+      if (!record?.action || !registry) {
+        return;
+      }
+      retireToast(id);
+      runReported(registry, record.action, record.actionArgs, "Notifications");
+    },
+    toasts: []
+  });
+  return _toastState;
+}
+function projectToast(record) {
+  const registry = record.action === undefined ? null : activeRegistry();
+  const id = record.action;
+  const known = registry && id !== undefined ? registry.get(id) : undefined;
+  const command = known && id !== undefined && registry.isVisible(id) ? known : null;
+  const reason = command && id !== undefined ? registry.disabledReason(id) : undefined;
+  return {
+    actionDisabled: reason !== undefined,
+    actionLabel: command?.title ?? "",
+    actionTitle: command === null || command === undefined ? "" : reason === undefined ? command.title : `${command.title} — requires ${reason}`,
+    hasAction: command !== null && command !== undefined,
+    icon: TOAST_ICON[record.severity],
+    id: record.id,
+    message: record.message,
+    severity: record.severity
+  };
+}
+function mountToastHost() {
+  unmountToastHost();
+  if (!_toastLayer) {
+    return;
+  }
+  _toastScope = effectScope();
+  _toastScope.run(() => {
+    effect(() => {
+      toasts2.length;
+      activeRegistry();
+      for (const record of toasts2) {
+        scheduleToast(record);
+      }
+      toastScope().toasts = toasts2.map((record) => projectToast(record));
+    });
+  });
+  _toastMount = mountSurface("toasts", toastScope(), _toastLayer);
+  _toastMount.then((handle) => {
+    _toastHandle = handle;
+  });
+}
+function unmountToastHost() {
+  _toastScope?.stop();
+  _toastScope = null;
+  for (const timer of _toastTimers.values()) {
+    clearTimeout(timer);
+  }
+  _toastTimers.clear();
+  _toastEntering.clear();
+  const pending = _toastMount;
+  _toastMount = null;
+  if (_toastHandle) {
+    _toastHandle.dispose();
+    _toastHandle = null;
+  } else if (pending) {
+    pending.then((handle) => handle.dispose());
+  }
+  _toastState = null;
+}
+
+export { mountsUsing, mountsOf, registerKit, REGION_ATTR, resolveRegion, REGION_FOR_FOCUS, paneRegion, paneStripRegion, navigatorPanelRegion, inspectorTabRegion, NAVIGATOR_STATEMENTS_REGION, inspectorStatementsRegion, bottomPanelRegion, overlayRegion, registerSurface, surfaceDocument, mountSurface, whenReady, openDialogSurface, runReported, runActiveReported, layerHost2, initLayers2, isModalOpen2, showConfirmDialog2, showSaveDiscardDialog2, showPromptDialog2, getLayerSlot2, clearLayerSlot2, overlayIdleBlockers2 };
+
+//# debugId=0892C6B4A7BF4FE464756E2164756E21
+//# sourceMappingURL=studio-vfq8qpjt.js.map