@sheetxl/studio-vanilla/cdn/index.js

SheetXL Studio - Vanilla entry point for integrating SheetXL UI.

/**
 * @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.6.4
 *
 * (C) 2025-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
 */
const S = /* @__PURE__ */ new Map(), k = (e, o = {}) => {
  const { message: s, icon: a, customElement: n, hide: i = !1, className: r, cssVars: f = {} } = o;
  if (i) return;
  const c = typeof e == "string" ? document.querySelector(e) : e;
  if (!c) return void console.warn(`Element with selector "${e}" not found for panel.`);
  let t;
  if (m(e), n) t = n;
  else {
    t = document.createElement("div"), t.className = r ? `sheetxl-panel ${r}` : "sheetxl-panel";
    const u = Object.entries(f).map(([l, w]) => `--sheetxl-panel-${l}: ${w};`).join(" "), x = `
        @keyframes sheetxl-spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .sheetxl-panel {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(4px);
          border-radius: 4px;
          z-index: 9999;
          gap: 16px;

          /* CSS variables with fallbacks */
          color: var(--sheetxl-panel-color, #333);
        }

        .sheetxl-panel.dark {
          color: var(--sheetxl-panel-color, #e0e0e0);
        }

        .sheetxl-icon {
          width: 24px;
          height: 24px;
          color: var(--sheetxl-panel-icon-color, #1976d2);
        }

        .sheetxl-panel.loading {
          /* Loading panel defaults */
          color: var(--sheetxl-panel-color, #333);
        }

        .sheetxl-panel.loading.dark {
          color: var(--sheetxl-panel-color, #e0e0e0);
        }

        .sheetxl-panel.error {
          /* Error panel defaults */
          color: var(--sheetxl-panel-color, #d32f2f);
        }

        .sheetxl-panel.error.dark {
          color: var(--sheetxl-panel-color, #f44336);
        }

        .sheetxl-panel.error .sheetxl-icon {
          color: var(--sheetxl-panel-icon-color, #d32f2f);
        }

        .sheetxl-panel.error.dark .sheetxl-icon {
          color: var(--sheetxl-panel-icon-color, #f44336);
        }

        .sheetxl-message {
          font-size: 1.1em;
          font-weight: 500;
          letter-spacing: 0.1px;
          text-align: center;
          margin: 0;
        }
      `, p = document.createElement("style");
    if (p.textContent = x, t.appendChild(p), a) {
      const l = document.createElement("div");
      l.className = "sheetxl-icon", typeof a == "string" ? l.innerHTML = a : a instanceof HTMLElement && l.appendChild(a), t.appendChild(l);
    }
    if (s) {
      const l = document.createElement("div");
      l.className = "sheetxl-message", l.textContent = s, t.appendChild(l);
    }
    u && (t.style.cssText += u), window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches && t.classList.add("dark");
  }
  window.getComputedStyle(c).position === "static" && (c.style.position = "relative"), c.appendChild(t), S.set(e, t);
}, m = (e) => {
  const o = S.get(e);
  o && o.parentNode && (o.parentNode.removeChild(o), S.delete(e));
}, b = (e, o = {}) => {
  k(e, { icon: `
      <svg width="24" height="24" viewBox="0 0 24 24" style="animation: sheetxl-spin 1s linear infinite;">
        <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.416" stroke-dashoffset="31.416">
          <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
          <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
        </circle>
      </svg>
    `, className: "loading", ...o });
}, L = (e, o = {}) => {
  k(e, { message: "Failed to load SheetXL", icon: `
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
      </svg>
    `, className: "error", ...o });
}, g = /* @__PURE__ */ new Map();
let d;
const C = async (e) => {
  if (d) return d;
  const { resolveDependencies: o } = await import("./assets/CkuMHJ2UQRlXqJRP.js"), s = await o(typeof e == "object" ? e?.dependencies : void 0);
  return d = await (async (a, n) => {
    typeof n == "string" && (n = { selector: n });
    try {
      if (n?.selector && b(n?.selector, n?.loading), !a) throw new Error("No runtime provided");
      n?.licenseKey && await a.StudioMUI.LicenseManager.setLicenseKey(n.licenseKey), n?.selector && m(n?.selector);
    } catch (i) {
      throw n?.selector && (m(n.selector), L(n.selector, { message: `Failed to initialize: ${i instanceof Error ? i.message : String(i)}`, ...n?.error })), console.error("Failed to initialize:", i), i;
    }
    return a;
  })(s, e), d;
}, M = { attachStudio: async (e, o) => (d || (d = await C(e)), (async (s, a, n, i) => {
  if (!a) throw new Error("Either a 'selector' or a 'InitializationOptions' must be provided to attach.");
  const r = typeof a == "string" ? a : a.selector || "#sheetxl", f = typeof r == "string" ? document.querySelector(r) : r;
  if (!f) throw new Error(`Element with selector "${r}" not found.`);
  if (g.has(r) && g.get(r) !== null) throw new Error(`SheetXL already attached to "${r}". Detach first if you want to re-attach.`);
  const c = typeof a == "object" ? a : null;
  b(r, c?.loading);
  try {
    m(r);
    const t = s.ReactDOMClient.createRoot(f), u = s.React.createRef(), x = s.StudioMUI[n];
    let p = null;
    await new Promise((y) => {
      t.render(s.React.createElement(x, { ...i, ref: (h) => {
        h && (p = h, y());
      } }));
    });
    const w = { runtime: s, root: t };
    g.set(r, w);
    let E = !1;
    return new Proxy(p, { get(y, h, N) {
      if (E) throw new Error(`SheetXL instance attached to "${r}" has been detached. Cannot access properties.`);
      return h === "update" ? (z) => {
        const $ = { ...i, ...z, ref: u };
        return t.render(s.React.createElement(x, $)), Promise.resolve();
      } : h === "detach" ? () => (g.delete(r), t.unmount(), E = !0, Promise.resolve()) : Reflect.get(y, h, N);
    } });
  } catch (t) {
    throw m(r), L(r, { message: `Failed to initialize: ${t instanceof Error ? t.message : String(t)}`, ...c?.error }), console.error("Failed to initialize:", t), t;
  }
})(d, e, "Studio", o)), async initialize(e) {
  await C(e);
} }, v = document.currentScript;
if (v) {
  const e = v.dataset ? v.dataset.target : "#sheetxl";
  document.querySelector(e) || console.error(`SheetXL: Target element "${e}" not found in the document.`), M.attachStudio(e, { autoFocus: !0 }).then((o) => {
  }).catch((o) => {
    console.error("Error creating SheetXL studio:", o);
  });
}
const R = M;
export {
  R as SheetXL,
  R as default
};