@jxsuite/studio 3.0.0 → 4.1.0

package/dist/chunks/studio-t7qb9db8.js

@@ -0,0 +1,665 @@
+import {
+  dismiss,
+  effect,
+  effectScope,
+  shallowRef,
+  toasts
+} from "./studio-xrapxwwc.js";
+import {
+  live,
+  ref,
+  repeat
+} from "./studio-4rzyrtjz.js";
+import {
+  html,
+  nothing,
+  render
+} from "./studio-kryvsw6j.js";
+
+// src/ui/choice-field.ts
+function choiceField(spec) {
+  const current = spec.options.find((option) => option.value === spec.value);
+  if (spec.options.length < 2) {
+    return html`<div class="choice-row">
+      <sp-field-label size="s">${spec.label}</sp-field-label>
+      <span class="choice-static">${current?.label ?? spec.value}</span>
+    </div>`;
+  }
+  return html`<div class="choice-row">
+    <sp-field-label size="s">${spec.label}</sp-field-label>
+    <sp-picker
+      size="s"
+      label=${spec.label}
+      .value=${live(spec.value)}
+      @change=${(e) => spec.onChange(e.target.value)}
+    >
+      ${spec.options.map((option) => html`${option.dividerBefore === true ? html`<sp-menu-divider></sp-menu-divider>` : nothing}<sp-menu-item value=${option.value}>${option.label}</sp-menu-item>`)}
+    </sp-picker>
+  </div>`;
+}
+
+// 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(".media-picker-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/commands/active-registry.ts
+var _registry = shallowRef(null);
+function setActiveRegistry(registry) {
+  _registry.value = registry;
+}
+function activeRegistry() {
+  return _registry.value;
+}
+
+// src/ui/layers.ts
+var _popoverLayer;
+var _modalLayer;
+var _dialogLayer;
+var _toastLayer;
+function layerHost(kind) {
+  const host = kind === "popover" ? _popoverLayer : kind === "modal" ? _modalLayer : kind === "toast" ? _toastLayer : _dialogLayer;
+  return host || document.body;
+}
+function initLayers() {
+  _popoverLayer = document.querySelector("#layer-popover");
+  _modalLayer = document.querySelector("#layer-modal");
+  _dialogLayer = document.querySelector("#layer-dialog");
+  _toastLayer = document.querySelector("#layer-toast");
+  mountToastHost();
+}
+var UNDERLAID = "sp-dialog-wrapper[open], sp-underlay[open]";
+function isModalOpen() {
+  return Boolean(_dialogLayer?.querySelector(UNDERLAID) || _modalLayer?.querySelector(UNDERLAID));
+}
+var BODY_FOCUSABLE = 'a[href], input, textarea, select, button, sp-textfield, sp-button, sp-action-button, sp-picker, sp-checkbox, sp-menu-item, [tabindex]:not([tabindex="-1"])';
+function focusablesIn(slot) {
+  return [...slot.querySelectorAll(BODY_FOCUSABLE)].filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true");
+}
+function focusOverlay(slot) {
+  requestAnimationFrame(() => {
+    if (!slot.isConnected || slot.contains(document.activeElement)) {
+      return;
+    }
+    const wrapper = slot.querySelector("sp-dialog-wrapper");
+    const target = focusablesIn(slot)[0] ?? wrapper?.shadowRoot?.querySelector("sp-button") ?? slot;
+    target.focus();
+  });
+}
+function trapTab(slot, e) {
+  e.preventDefault();
+  const items = focusablesIn(slot);
+  if (items.length === 0) {
+    return;
+  }
+  const at = items.indexOf(document.activeElement);
+  const next = e.shiftKey ? items[at <= 0 ? items.length - 1 : at - 1] : items[at === -1 || at === items.length - 1 ? 0 : at + 1];
+  next?.focus();
+}
+function openOverlaySlot(opts) {
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion(opts.kind, opts.regionId));
+  slot.tabIndex = -1;
+  slot.style.outline = "none";
+  opts.layer.append(slot);
+  const restoreTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const onKeydown = (e) => {
+    if (e.key === "Escape") {
+      opts.onEscape?.(e, slot);
+      return;
+    }
+    if (e.key === "Tab" && opts.trapFocus) {
+      trapTab(slot, e);
+    }
+  };
+  slot.addEventListener("keydown", onKeydown);
+  return {
+    release() {
+      slot.removeEventListener("keydown", onKeydown);
+      render(nothing, slot);
+      slot.remove();
+      if (restoreTo?.isConnected) {
+        restoreTo.focus();
+      }
+    },
+    slot
+  };
+}
+function showDialog(templateFn, opts = {}) {
+  return new Promise((resolve) => {
+    const { release, slot } = openOverlaySlot({
+      kind: "dialog",
+      layer: layerHost("dialog"),
+      regionId: opts.region,
+      onEscape(e, host) {
+        const wrapper = host.querySelector("sp-dialog-wrapper");
+        if (!wrapper) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        wrapper.dispatchEvent(new Event("close", { bubbles: true }));
+      }
+    });
+    slot.setAttribute("role", "dialog");
+    slot.setAttribute("aria-modal", "true");
+    let resolved = false;
+    const done = (value) => {
+      if (resolved) {
+        return;
+      }
+      resolved = true;
+      release();
+      resolve(value);
+    };
+    render(templateFn(done), slot);
+    const headline = opts.label ?? slot.querySelector("sp-dialog-wrapper")?.getAttribute("headline") ?? null;
+    if (headline !== null && headline !== "") {
+      slot.setAttribute("aria-label", headline);
+    }
+    focusOverlay(slot);
+  });
+}
+function showConfirmDialog(headline, message, opts = {}) {
+  const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
+  return showDialog((done) => html`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline=${headline}
+        confirm-label=${confirmLabel}
+        cancel-label=${cancelLabel}
+        size="s"
+        @confirm=${() => done(true)}
+        @cancel=${() => done(false)}
+        @close=${() => done(false)}
+        class=${destructive ? "dialog-destructive" : ""}
+      >
+        <p>${message}</p>
+      </sp-dialog-wrapper>
+    `);
+}
+function showSaveDiscardDialog(headline, message, opts = {}) {
+  const { saveLabel = "Save", discardLabel = "Discard", cancelLabel = "Cancel" } = opts;
+  return showDialog((done) => html`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline=${headline}
+        confirm-label=${saveLabel}
+        secondary-label=${discardLabel}
+        cancel-label=${cancelLabel}
+        size="s"
+        @confirm=${() => done("save")}
+        @secondary=${() => done("discard")}
+        @cancel=${() => done("cancel")}
+        @close=${() => done("cancel")}
+      >
+        <p>${message}</p>
+      </sp-dialog-wrapper>
+    `);
+}
+function showPromptDialog(headline, opts = {}) {
+  const {
+    cancelLabel = "Cancel",
+    choice,
+    confirmLabel = "OK",
+    message,
+    placeholder = "",
+    select = "all",
+    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 wrapperEl = null;
+  let focusRequested = false;
+  let touched = false;
+  return showDialog((done) => {
+    function rerender() {
+      const host = wrapperEl?.parentElement;
+      if (host) {
+        render(buildTpl(), host);
+      }
+    }
+    function confirm() {
+      error = check(value);
+      if (error) {
+        rerender();
+        return;
+      }
+      done(value.trim());
+    }
+    function onInput(e) {
+      touched = true;
+      value = e.target.value || "";
+      const next = check(value);
+      if (next !== error) {
+        error = next;
+        rerender();
+      }
+    }
+    function onPick(next) {
+      chosen = next;
+      choice?.onChange?.(next);
+      const candidate = check(value);
+      error = touched || error ? candidate : "";
+      rerender();
+    }
+    function onKeydown(e) {
+      if (e.key === "Enter") {
+        confirm();
+      }
+    }
+    function onWrapperRef(el) {
+      if (el) {
+        wrapperEl = el;
+      }
+    }
+    function onFieldRef(el) {
+      if (!el || focusRequested) {
+        return;
+      }
+      focusRequested = true;
+      const field = el;
+      requestAnimationFrame(() => {
+        field.focus();
+        const input = field.shadowRoot?.querySelector("input");
+        if (!input || select === "none") {
+          return;
+        }
+        if (select === "stem") {
+          const dot = input.value.lastIndexOf(".");
+          input.setSelectionRange(0, dot > 0 ? dot : input.value.length);
+          return;
+        }
+        input.select();
+      });
+    }
+    function buildTpl() {
+      return html`
+        <sp-dialog-wrapper
+          open
+          underlay
+          headline=${headline}
+          confirm-label=${confirmLabel}
+          cancel-label=${cancelLabel}
+          size="s"
+          @confirm=${confirm}
+          @cancel=${() => done(null)}
+          @close=${() => done(null)}
+          ${ref(onWrapperRef)}
+        >
+          ${message ? html`<p style="margin:0 0 8px">${message}</p>` : nothing}
+          ${choice ? choiceField({
+        label: choice.label,
+        onChange: onPick,
+        options: choice.options(),
+        value: chosen
+      }) : nothing}
+          <sp-textfield
+            style="width:100%"
+            placeholder=${typeof placeholder === "function" ? placeholder() : placeholder}
+            value=${value}
+            ?invalid=${Boolean(error)}
+            @input=${onInput}
+            @keydown=${onKeydown}
+            ${ref(onFieldRef)}
+          >
+            ${error ? html`<sp-help-text slot="negative-help-text">${error}</sp-help-text>` : nothing}
+          </sp-textfield>
+        </sp-dialog-wrapper>
+      `;
+    }
+    return buildTpl();
+  });
+}
+function openModal(template, opts) {
+  const { release, slot } = openOverlaySlot({
+    kind: "modal",
+    layer: layerHost("modal"),
+    onEscape(e) {
+      if (opts.dismissible === false) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      (opts.onDismiss ?? handle.close)();
+    },
+    regionId: opts.region,
+    trapFocus: true
+  });
+  slot.setAttribute("role", "dialog");
+  slot.setAttribute("aria-modal", "true");
+  slot.setAttribute("aria-label", opts.label);
+  const handle = {
+    close() {
+      release();
+    },
+    host: slot,
+    update(tpl) {
+      render(tpl, slot);
+    }
+  };
+  render(template, slot);
+  focusOverlay(slot);
+  return handle;
+}
+function renderPopover(template, opts = {}) {
+  const kind = opts.layer ?? "popover";
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion(kind, opts.region));
+  layerHost(kind).append(slot);
+  render(template, slot);
+  let outsideClickHandler = null;
+  if (opts.dismissOnOutsideClick !== false) {
+    outsideClickHandler = (e) => {
+      if (!slot.contains(e.target)) {
+        handle.dismiss();
+        opts.onDismiss?.();
+      }
+    };
+    requestAnimationFrame(() => {
+      if (outsideClickHandler) {
+        document.addEventListener("mousedown", outsideClickHandler, true);
+      }
+    });
+  }
+  const handle = {
+    dismiss() {
+      if (outsideClickHandler) {
+        document.removeEventListener("mousedown", outsideClickHandler, true);
+        outsideClickHandler = null;
+      }
+      render(nothing, slot);
+      slot.remove();
+    },
+    host: slot,
+    update(tpl) {
+      render(tpl, slot);
+    }
+  };
+  return handle;
+}
+var _namedSlots = new Map;
+function popoverLayerFor(anchor) {
+  if (anchor?.closest("#layer-dialog")) {
+    return "dialog";
+  }
+  return anchor?.closest("#layer-modal") ? "modal" : "popover";
+}
+function getLayerSlot(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));
+  layerHost(layer).append(slot);
+  _namedSlots.set(key, slot);
+  return slot;
+}
+function clearLayerSlot(layer, id) {
+  const key = `${layer}:${id}`;
+  const slot = _namedSlots.get(key);
+  if (slot) {
+    render(nothing, 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 overlayIdleBlockers() {
+  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);
+  dismiss(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));
+}
+function toastActionTpl(record) {
+  const registry = record.action === undefined ? null : activeRegistry();
+  const id = record.action;
+  if (!registry || id === undefined || !registry.get(id) || !registry.isVisible(id)) {
+    return nothing;
+  }
+  const command = registry.get(id);
+  const reason = registry.disabledReason(id);
+  return html`
+    <button
+      class="toast-action"
+      ?disabled=${reason !== undefined}
+      title=${reason === undefined ? command.title : `${command.title} — requires ${reason}`}
+      @click=${() => {
+    retireToast(record.id);
+    registry.run(id, record.actionArgs);
+  }}
+    >
+      ${command.title}
+    </button>
+  `;
+}
+function toastTpl(record) {
+  return html`
+    <div class="toast toast--${record.severity}">
+      <span class="toast-icon" aria-hidden="true">${TOAST_ICON[record.severity]}</span>
+      <span class="toast-message">${record.message}</span>
+      ${toastActionTpl(record)}
+      <button
+        class="toast-dismiss"
+        title="Dismiss"
+        aria-label="Dismiss notification"
+        @click=${() => retireToast(record.id)}
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+  `;
+}
+function toastStackTemplate() {
+  return html`
+    <div class="toast-stack">
+      ${repeat(toasts, (record) => record.id, (record) => toastTpl(record))}
+    </div>
+  `;
+}
+function mountToastHost() {
+  unmountToastHost();
+  if (!_toastLayer) {
+    return;
+  }
+  _toastScope = effectScope();
+  _toastScope.run(() => {
+    effect(() => {
+      toasts.length;
+      activeRegistry();
+      for (const record of toasts) {
+        scheduleToast(record);
+      }
+      render(toastStackTemplate(), _toastLayer);
+    });
+  });
+}
+function unmountToastHost() {
+  _toastScope?.stop();
+  _toastScope = null;
+  for (const timer of _toastTimers.values()) {
+    clearTimeout(timer);
+  }
+  _toastTimers.clear();
+  _toastEntering.clear();
+  if (_toastLayer) {
+    render(nothing, _toastLayer);
+  }
+}
+
+export { REGION_ATTR, resolveRegion, REGION_FOR_FOCUS, paneRegion, paneStripRegion, navigatorPanelRegion, inspectorTabRegion, NAVIGATOR_STATEMENTS_REGION, inspectorStatementsRegion, bottomPanelRegion, overlayRegion, setActiveRegistry, activeRegistry, initLayers, isModalOpen, showDialog, showConfirmDialog, showSaveDiscardDialog, showPromptDialog, openModal, renderPopover, popoverLayerFor, getLayerSlot, clearLayerSlot, TOAST_ENTER_MS, toastsAreHeld, overlayIdleBlockers, toastStackTemplate, mountToastHost, unmountToastHost };
+
+//# debugId=8A616F848280CD3764756E2164756E21
+//# sourceMappingURL=studio-t7qb9db8.js.map

package/dist/chunks/studio-tmc5emrw.js

@@ -0,0 +1,8 @@
+// ../../node_modules/lit-html/development/directives/when.js
+function when(condition, trueCase, falseCase) {
+  return condition ? trueCase(condition) : falseCase?.(condition);
+}
+export { when };
+
+//# debugId=BA8B685BA2BBF07D64756E2164756E21
+//# sourceMappingURL=studio-tmc5emrw.js.map