@jxsuite/studio 4.1.0 → 5.1.0

package/dist/chunks/studio-t7qb9db8.js

@@ -1,665 +0,0 @@
-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

@@ -1,8 +0,0 @@
-// ../../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

package/dist/chunks/studio-z6nw2ek2.js

@@ -1,18 +0,0 @@
-import {
-  userFocusableSelector
-} from "./studio-8q517dfr.js";
-
-// ../../node_modules/@spectrum-web-components/shared/src/first-focusable-in.dev.js
-var firstFocusableIn = (root) => {
-  const firstFocusable = root.querySelector(userFocusableSelector);
-  return firstFocusable;
-};
-var firstFocusableSlottedIn = (root) => {
-  const firstFocusable = root.assignedElements().find((element) => element.matches(userFocusableSelector));
-  return firstFocusable;
-};
-
-export { firstFocusableIn, firstFocusableSlottedIn };
-
-//# debugId=E8E36975D588AAE064756E2164756E21
-//# sourceMappingURL=studio-z6nw2ek2.js.map