@scaleflex/template-builder 0.2.0 → 0.4.1

package/dist/template-builder-B9Cwo_Q-.js

@@ -0,0 +1,651 @@
+import { LitElement as L, css as M, html as f, nothing as k } from "lit";
+import { property as n, state as y } from "lit/decorators.js";
+const de = 3, P = "design-templates:builder:ready", K = "design-templates:builder:open", $ = "design-templates:builder:close", B = "design-templates:builder:save", F = "design-templates:builder:error", x = "design-templates:builder:content-request", j = "design-templates:builder:content", q = "design-templates:builder:dirty", H = "design-templates:host:load", Q = `<?xml version="1.0" encoding="UTF-8"?>
+<template><templateInfo><version>0.3</version></templateInfo><rootStack/><layouts/><variables/></template>`, J = "design-templates:host:config", X = "design-templates:host:saved", c = {
+  SESSION_UUID: "suuid",
+  COMPANY_UUID: "cuuid",
+  PROJECT_UUID: "puuid",
+  SASS_KEY: "sassKey",
+  FILEROBOT_TOKEN: "ftoken",
+  /**
+   * Filerobot security-template key, the alternative to a Hub session. The app
+   * exchanges it for a sass key itself and runs in a reduced mode — see
+   * `AUTH_MODES`. Sent *instead of* `sassKey` + `suuid`, never alongside them.
+   */
+  SEC_TEMPLATE: "secTemplate",
+  IFRAME: "iframe",
+  /** Origin of the embedding page; the app uses it as postMessage targetOrigin. */
+  EMBED_ORIGIN: "embedOrigin",
+  /**
+   * Accent colour for the editor chrome, as `#rgb` / `#rrggbb`. The app derives
+   * its whole accent ramp from it. Rejected server-side if it doesn't match
+   * that shape — it ends up inside a stylesheet.
+   */
+  BRAND_COLOR: "brandColor",
+  /** Colour scheme for the editor chrome: `light` | `dark` | `auto`. */
+  THEME: "theme"
+}, le = {
+  SESSION: "session",
+  SEC_TEMPLATE: "secTemplate"
+}, ce = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function Y(s) {
+  return s ? `/templates/${encodeURIComponent(s)}/edit` : "/templates/new";
+}
+const G = "/templates/embed", _ = "https://api.filerobot.com";
+async function V(s) {
+  if (!s.secTemplate) return s.sassKey ?? "";
+  const e = await fetch(
+    `${_}/${encodeURIComponent(s.token)}/v5/key/${encodeURIComponent(s.secTemplate)}`,
+    { headers: { "X-Filerobot-Key": s.secTemplate } }
+  ), t = await e.json().catch(() => ({}));
+  if (!e.ok || !t.key)
+    throw new Error(t.msg ?? `key exchange failed: ${e.status}`);
+  return t.key;
+}
+function R(s, e) {
+  const t = { "X-Filerobot-Key": e };
+  return s.secTemplate || (s.sessionUuid && (t["X-Session-Token"] = s.sessionUuid), s.companyUuid && (t["X-Company-Token"] = s.companyUuid), s.projectUuid && (t["X-Project-Token"] = s.projectUuid)), t;
+}
+function W(s) {
+  return /^[0-9a-f][0-9a-f-]{18,}$/i.test(s);
+}
+async function I(s, e, t) {
+  let o;
+  try {
+    o = await fetch(
+      `${_}/${encodeURIComponent(s.token)}/v5/files/${encodeURIComponent(t)}`,
+      { headers: R(s, e) }
+    );
+  } catch (l) {
+    throw new Error(
+      `file lookup failed: ${l instanceof Error ? l.message : String(l)}`
+    );
+  }
+  const i = await o.json().catch(() => ({}));
+  if ([400, 404, 410, 422].includes(o.status)) return null;
+  const d = i.msg ?? i.message ?? "";
+  if (!o.ok || i.status === "error") {
+    if (/not[ _-]?found|does not exist|no such file/i.test(d)) return null;
+    throw new Error(d || `file lookup failed: ${o.status}`);
+  }
+  return i.file ?? null;
+}
+async function z(s, e, t, o) {
+  const i = new URL(
+    `${_}/${encodeURIComponent(s.token)}/v5/files`
+  );
+  i.searchParams.set("q", `name:"${t}"`), i.searchParams.set("folder", o), i.searchParams.set("sort", "modified_at:desc"), i.searchParams.set("limit", "5");
+  const d = await fetch(i, { headers: R(s, e) }), l = await d.json().catch(() => ({}));
+  return !d.ok || l.status === "error" ? null : l.files?.find((h) => h.name === t) ?? null;
+}
+function Z(s) {
+  let e = 2166136261;
+  for (let t = 0; t < s.length; t++)
+    e ^= s.charCodeAt(t), e = Math.imul(e, 16777619);
+  return (e >>> 0).toString(36);
+}
+function ee(s) {
+  let e;
+  try {
+    e = decodeURIComponent(s);
+  } catch {
+    e = s;
+  }
+  const t = e.split("/").filter(Boolean);
+  return t.pop(), "/" + t.join("/");
+}
+function te(s, e) {
+  if (!s) return s;
+  let t;
+  try {
+    const i = new DOMParser().parseFromString(e, "application/xml");
+    if (i.querySelector("parsererror")) return s;
+    t = i.querySelectorAll(
+      'variable[custom_ckey][source="URL"][type="text_placeholder"]'
+    );
+  } catch {
+    return s;
+  }
+  if (t.length === 0) return s;
+  const o = new Set([...t].map((i) => i.getAttribute("name") ?? ""));
+  return s.split("&").filter(Boolean).filter((i) => !o.has(i.split("=")[0].replace(/^(\$|%24)/, ""))).join("&");
+}
+let se = 0;
+const ie = /* @__PURE__ */ new Set([
+  "ERROR_SHA1_CONFLICT",
+  "SAME_ASSET_EXISTS_SKIP_UPLOAD"
+]);
+async function oe(s, e, t, o) {
+  if (!e.token) throw new Error("dam-store needs a token");
+  const i = await V(e);
+  if (!i) throw new Error("dam-store needs a sass key or a security template");
+  const d = !!s.templateId && W(s.templateId), l = !!o && o !== s.templateId, [h, b] = await Promise.allSettled([
+    d ? I(e, i, s.templateId) : Promise.resolve(null),
+    l ? I(e, i, o) : Promise.resolve(null)
+  ]);
+  if (h.status === "rejected") throw h.reason;
+  const g = h.value;
+  let v = null;
+  if (b.status === "fulfilled") v = b.value;
+  else if (!g) throw b.reason;
+  const m = g ?? v, C = m?.url?.path ? ee(m.url.path) : t || "/", D = (s.name ?? "").trim().replace(/\.fdt$/i, "") || "template", A = m?.name ? m.name : s.templateId ? `${D}_${Z(s.templateId)}.fdt` : `${D}_${Date.now().toString(36)}-${++se}.fdt`, S = new FormData();
+  S.append(
+    "files[]",
+    new Blob([s.content], { type: "text/xml+sfxtemplate" }),
+    A
+  );
+  const N = te(s.templateQuery ?? "", s.content);
+  N && S.append(
+    "info[files[]]",
+    JSON.stringify({ custom: { template_query: N } })
+  );
+  const E = await fetch(
+    `${_}/${encodeURIComponent(e.token)}/v4/files?folder=${encodeURIComponent(C)}`,
+    {
+      method: "POST",
+      headers: { ...R(e, i), "X-Filerobot-Template": "true" },
+      body: S
+    }
+  ), p = await E.json().catch(() => ({})), U = p.code ?? p.files?.failed?.[0]?.code;
+  if (U && ie.has(U)) {
+    let u = v ?? g;
+    if (u?.uuid || (u = await z(e, i, A, C).catch(() => null)), u?.uuid)
+      return {
+        uuid: u.uuid,
+        url: u.url?.cdn ?? u.url?.public ?? ""
+      };
+    throw new Error(
+      `this project's deduplication policy already stores this exact content as another file (${U}) — edit the content, or pass that file's uuid as stored-uuid so the save can resolve to it`
+    );
+  }
+  if (!E.ok || p.status === "error")
+    throw new Error(p.msg ?? p.message ?? `upload failed: ${E.status}`);
+  const T = p.file?.uuid ?? p.files?.uploaded?.[0]?.uuid;
+  if (!T) throw new Error("upload succeeded but no file uuid in the response");
+  let w = null;
+  try {
+    w = await I(e, i, T);
+  } catch {
+  }
+  return {
+    uuid: T,
+    url: w?.url?.cdn ?? w?.url?.public ?? p.file?.url?.cdn ?? ""
+  };
+}
+var re = Object.defineProperty, a = (s, e, t, o) => {
+  for (var i = void 0, d = s.length - 1, l; d >= 0; d--)
+    (l = s[d]) && (i = l(e, t, i) || i);
+  return i && re(e, t, i), i;
+};
+const O = class O extends L {
+  constructor() {
+    super(...arguments), this.baseUrl = "", this.token = "", this.sassKey = "", this.sessionUuid = "", this.secTemplate = "", this.companyUuid = "", this.projectUuid = "", this.templateId = "", this.mode = "inline", this.stateless = !1, this.content = "", this.newTemplate = !1, this.templateName = "", this.templateQuery = "", this.brandColor = "", this.theme = "", this.customMetadata = [], this.customMetadataLabel = "", this.damStore = !1, this.storeFolder = "/", this.storedUuid = "", this.readyTimeout = 2e4, this._status = "idle", this._open = !1, this._src = "", this._contentRequested = !1, this._reportedStatelessRequired = !1, this._isDirty = !1, this._autoOpenDecided = !1, this._onMessage = (e) => {
+      if (!this._open || !e.origin || e.origin !== this._appOrigin) return;
+      const t = this.shadowRoot?.querySelector("iframe");
+      if (!t || e.source !== t.contentWindow) return;
+      const o = e.data;
+      if (!(!o || typeof o.type != "string"))
+        switch (o.type) {
+          case P:
+          case K:
+            this._clearHandshakeTimer(), this._status !== "ready" && (this._status = "ready", this._emit("ready")), o.type === P && (this._sentConfigKey = void 0), this._maybeSendConfig(), o.type === K && this._emit("open");
+            break;
+          case B:
+            this._emit("save", o.data);
+            break;
+          case x:
+            this._contentRequested = !0, this._sentKey = void 0, this._sentSaveKey = void 0, this._maybeSendContent();
+            break;
+          case j: {
+            const i = o.data;
+            if (this._sentKey = this._contentKey(i.content), this._sentSaveKey = this._detailKey(i), this.damStore) {
+              this._pendingSaves.add(i);
+              const d = this._docEpoch, l = {
+                auth: {
+                  token: this.token,
+                  sassKey: this.sassKey,
+                  secTemplate: this.secTemplate,
+                  sessionUuid: this.sessionUuid,
+                  companyUuid: this.companyUuid,
+                  projectUuid: this.projectUuid
+                },
+                storeFolder: this.storeFolder || "/"
+              };
+              this._storeQueue = this._storeQueue.then(
+                () => this._storeAndEmitSave(i, d, l)
+              );
+            } else
+              this._emit("save", i);
+            break;
+          }
+          case q: {
+            const i = o.data;
+            this._isDirty = !!i?.isDirty, this._emit("dirtychange", { isDirty: this._isDirty });
+            break;
+          }
+          case $:
+            this._emit("close"), this.mode === "modal" && (this._open = !1);
+            break;
+          case F:
+            this._fail(o.data ?? { code: "unknown" });
+            break;
+        }
+    }, this._storeQueue = Promise.resolve(), this._pendingSaves = /* @__PURE__ */ new Set(), this._docEpoch = 0;
+  }
+  get status() {
+    return this._status;
+  }
+  /**
+   * Stateless mode: whether the editor holds edits that have not been handed
+   * back yet. Check this before calling `load()` — a swap discards them.
+   * Always false in DAM-backed mode, where the app owns saving.
+   */
+  get isDirty() {
+    return this._isDirty;
+  }
+  /** Open the editor (loads the iframe). Optionally switch template first. */
+  open(e) {
+    e !== void 0 && (this.templateId = e), this._open = !0;
+  }
+  /** Close the editor and unload the iframe. Does not emit `close`. */
+  close() {
+    this._open = !1;
+  }
+  /**
+   * Stateless mode: load a template, opening the editor if needed. Equivalent
+   * to assigning `templateId` / `content` / `templateName` and calling `open()`.
+   */
+  load({
+    content: e,
+    templateId: t,
+    name: o,
+    templateQuery: i,
+    storedUuid: d
+  }) {
+    t !== void 0 && (this.templateId = t), o !== void 0 && (this.templateName = o), i !== void 0 && (this.templateQuery = i), this.storedUuid = d ?? "", this.newTemplate = !1, this.content = e, this._open = !0;
+  }
+  /**
+   * Stateless mode: open the editor on a new, empty template, opening it if
+   * needed. Equivalent to setting `new-template` and calling `open()`.
+   *
+   * The user chooses the canvas size from the editor's empty state; `save`
+   * then hands back a complete `.fdt` document — the first one you store for
+   * this record. Pass `templateId` if you have already allocated one; leave it
+   * out and the `save` payload simply comes back without an id.
+   *
+   * Calling it again on an editor that is already showing the blank document
+   * does nothing — resending would discard whatever the user has built since.
+   * To genuinely start over, `close()` and reopen.
+   */
+  createNew({
+    templateId: e,
+    name: t
+  } = {}) {
+    e !== void 0 && (this.templateId = e), t !== void 0 && (this.templateName = t), this.templateQuery = "", this.storedUuid = "", this.newTemplate = !0, this.content = "", this._open = !0;
+  }
+  /**
+   * Stateless mode: report back whether a `save` was persisted on your side.
+   *
+   * Optional. The editor clears its unsaved-changes flag as soon as it hands
+   * the content over, so not calling this leaves the previous behaviour intact.
+   * Calling it with `false` is what earns something: the editor restores the
+   * dirty flag and tells the user, rather than showing a failed write as saved.
+   *
+   * No-op outside stateless mode, where the app did the saving and has nothing
+   * to hear back about.
+   */
+  confirmSave(e, t) {
+    this.stateless && this._postToApp({ type: X, data: { ok: e, message: t } });
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("message", this._onMessage);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("message", this._onMessage), this._clearHandshakeTimer(), setTimeout(() => {
+      this.isConnected || this._flushPendingSaves("widget removed before the rendering copy completed");
+    }, 0);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), this._autoOpenDecided || (this._autoOpenDecided = !0, this.mode === "inline" && (this._open = !0));
+    const t = this._computeSrc();
+    t !== this._src && (this._src = t, this._status = t ? "loading" : "idle");
+  }
+  updated(e) {
+    e.has("_src") && (this._clearHandshakeTimer(), this._contentRequested = !1, this._sentKey = void 0, this._sentSaveKey = void 0, this._sentConfigKey = void 0, this._isDirty && (this._isDirty = !1, this._emit("dirtychange", { isDirty: !1 })), this._src && this._startHandshakeTimer()), (e.has("content") || e.has("newTemplate") || e.has("templateId") || e.has("templateName") || e.has("templateQuery")) && this._maybeSendContent(), (e.has("customMetadata") || e.has("customMetadataLabel")) && this._status === "ready" && this._maybeSendConfig();
+  }
+  render() {
+    const e = this._src ? f`<iframe
+          part="iframe"
+          title="Template builder"
+          src=${this._src}
+          allow="clipboard-read; clipboard-write"
+        ></iframe>` : k, t = this._status === "loading" ? f`<div class="spinner" part="spinner"></div>` : k;
+    return this.mode === "modal" ? this._open ? f`<div class="overlay" part="overlay">
+            <div class="stage">${e}${t}</div>
+          </div>` : k : f`${e}${t}`;
+  }
+  _computeSrc() {
+    if (!this._open || !this.baseUrl || !this.token) return "";
+    if (this.secTemplate) {
+      if (!this.stateless)
+        return this._reportedStatelessRequired || (this._reportedStatelessRequired = !0, queueMicrotask(
+          () => this._fail({
+            code: "invalid-config",
+            message: "sec-template requires stateless mode — the app accepts a security template on the stateless embed route only."
+          })
+        )), "";
+      this._reportedStatelessRequired = !1;
+    } else if (!this.sassKey || !this.sessionUuid)
+      return "";
+    let e;
+    try {
+      const t = this.stateless ? G : Y(this.templateId || void 0), o = this.baseUrl.endsWith("/") ? this.baseUrl : `${this.baseUrl}/`;
+      e = new URL(t.replace(/^\//, ""), o);
+    } catch {
+      return this._reportedBadBaseUrl !== this.baseUrl && (this._reportedBadBaseUrl = this.baseUrl, queueMicrotask(
+        () => this._fail({
+          code: "invalid-base-url",
+          message: `base-url is not a valid URL: ${this.baseUrl}`
+        })
+      )), "";
+    }
+    return this._reportedBadBaseUrl = void 0, e.searchParams.set(c.FILEROBOT_TOKEN, this.token), this.secTemplate ? e.searchParams.set(c.SEC_TEMPLATE, this.secTemplate) : (e.searchParams.set(c.SASS_KEY, this.sassKey), e.searchParams.set(c.SESSION_UUID, this.sessionUuid), this.companyUuid && e.searchParams.set(c.COMPANY_UUID, this.companyUuid), this.projectUuid && e.searchParams.set(c.PROJECT_UUID, this.projectUuid)), this.brandColor && e.searchParams.set(c.BRAND_COLOR, this.brandColor), this.theme && e.searchParams.set(c.THEME, this.theme), e.searchParams.set(c.IFRAME, "1"), e.searchParams.set(c.EMBED_ORIGIN, window.location.origin), e.toString();
+  }
+  get _appOrigin() {
+    try {
+      return new URL(this.baseUrl).origin;
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Emit every not-yet-emitted `dam-store` save immediately, raw content with
+   * `storeError` in place of the links. Called when waiting any longer risks
+   * the event finding no listener; a still-running upload for a flushed save
+   * is left to finish (the copy usually lands) but will not emit again.
+   *
+   * Public for framework wrappers: one that unsubscribes its listeners before
+   * unmounting must call this first, while they are still attached — the
+   * element's own disconnect-time flush fires only after the wrapper has
+   * stopped listening, and the raw save would be lost. The React wrapper does
+   * this; a vanilla host never needs to call it.
+   */
+  flushPendingSaves(e = "widget removed before the rendering copy completed") {
+    this._flushPendingSaves(e);
+  }
+  _flushPendingSaves(e) {
+    for (const t of this._pendingSaves)
+      this._pendingSaves.delete(t), this._emit("save", { ...t, storeError: e });
+  }
+  /**
+   * The `dam-store` save path: upload the edited template to Filerobot, then
+   * emit `save` with the stored copy's links on the detail. The upload is the
+   * render side of the save — the CDN renders only stored files — while the
+   * raw `content` stays the host's copy exactly as without the flag.
+   *
+   * A failed upload still emits `save` (the raw data must reach the host
+   * either way), with `storeError` in place of `stored`; whether a save
+   * without a rendering copy counts as saved is the host's decision, made
+   * where it always is — the save ack.
+   */
+  async _storeAndEmitSave(e, t, o) {
+    if (!this._pendingSaves.has(e)) return;
+    const i = (this._storeMemory?.epoch === t ? this._storeMemory.uuid : void 0) || t === this._docEpoch && this.storedUuid || void 0;
+    let d, l;
+    try {
+      d = await oe(e, o.auth, o.storeFolder, i);
+    } catch (h) {
+      l = h instanceof Error ? h.message : String(h);
+    }
+    this._pendingSaves.delete(e) && (d && (this._storeMemory = { epoch: t, uuid: d.uuid }), this._emit("save", d ? { ...e, stored: d } : { ...e, storeError: l }));
+  }
+  /**
+   * Deliver `content` to the app once both sides are ready: it has asked, and
+   * we have something new to give it. Skips a re-send of identical content so
+   * an unrelated re-render can't discard the user's in-progress edits.
+   */
+  _maybeSendContent() {
+    if (!this.stateless || !this._contentRequested) return;
+    const e = this.content || (this.newTemplate ? Q : "");
+    if (!e) return;
+    const t = {
+      templateId: this.templateId || void 0,
+      content: e,
+      name: this.templateName || void 0,
+      templateQuery: this.templateQuery || void 0
+    }, o = this._contentKey(e), i = JSON.stringify({
+      templateId: this.templateId || void 0,
+      content: e,
+      name: this.templateName || void 0
+    });
+    if (o === this._sentKey || o === this._sentSaveKey) {
+      this._lastDocKey = i;
+      return;
+    }
+    this._postToApp({ type: H, data: t }) && (i !== this._lastDocKey && this._docEpoch++, this._lastDocKey = i, this._sentKey = o, this._sentSaveKey = void 0);
+  }
+  /**
+   * Deliver host config to the app. Unlike content this is not requested — the
+   * app has no way to know a host means to send any — so it goes out on the
+   * ready signal and on every later change.
+   *
+   * Sending an empty model is meaningful: it is how a host clears one it set
+   * before. What is skipped is only a *repeat* of what the app already holds,
+   * and the very first send when there was never anything to say.
+   */
+  _maybeSendConfig() {
+    const e = Array.isArray(this.customMetadata) ? this.customMetadata : [], t = typeof this.customMetadataLabel == "string" ? this.customMetadataLabel.trim() : "", o = JSON.stringify({ customMetadata: e, customMetadataLabel: t });
+    o !== this._sentConfigKey && (this._sentConfigKey === void 0 && e.length === 0 && t === "" || this._postToApp({
+      type: J,
+      data: {
+        customMetadata: e,
+        ...t ? { customMetadataLabel: t } : {}
+      }
+    }) && (this._sentConfigKey = o));
+  }
+  /** Identity of a delivered template, as compared against `_sentKey`. */
+  _contentKey(e) {
+    return JSON.stringify({
+      templateId: this.templateId || void 0,
+      content: e,
+      name: this.templateName || void 0,
+      templateQuery: this.templateQuery || void 0
+    });
+  }
+  /**
+   * Identity of a save the app handed back — the same shape as
+   * `_contentKey`, but built from the save detail rather than the props, so
+   * a host echoing the detail (whose name/query the save changed) matches.
+   */
+  _detailKey(e) {
+    return JSON.stringify({
+      templateId: e.templateId || void 0,
+      content: e.content,
+      name: e.name || void 0,
+      templateQuery: e.templateQuery || void 0
+    });
+  }
+  /** Post into the iframe, targeted at the app origin. False if not mounted. */
+  _postToApp(e) {
+    const t = this.shadowRoot?.querySelector("iframe")?.contentWindow, o = this._appOrigin;
+    return !t || !o ? !1 : (t.postMessage(e, o), !0);
+  }
+  _startHandshakeTimer() {
+    this.readyTimeout <= 0 || (this._handshakeTimer = window.setTimeout(() => {
+      this._fail({
+        code: "handshake-timeout",
+        message: `No ready signal from ${this.baseUrl} within ${this.readyTimeout}ms. Check that this origin is in the app's frame-ancestors allowlist and that third-party cookies are not blocked.`
+      });
+    }, this.readyTimeout));
+  }
+  _clearHandshakeTimer() {
+    this._handshakeTimer !== void 0 && (window.clearTimeout(this._handshakeTimer), this._handshakeTimer = void 0);
+  }
+  _fail(e) {
+    this._clearHandshakeTimer(), this._status = "error", this._emit("error", e);
+  }
+  _emit(e, t) {
+    this.dispatchEvent(
+      new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 })
+    );
+  }
+};
+O.styles = M`
+    :host {
+      display: block;
+      position: relative;
+    }
+    :host([mode='modal']) {
+      display: contents;
+    }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483000;
+      background: rgba(0, 0, 0, 0.55);
+      display: flex;
+    }
+    .stage {
+      position: relative;
+      flex: 1;
+      display: flex;
+    }
+    iframe {
+      border: 0;
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+    .spinner {
+      position: absolute;
+      inset: 0;
+      margin: auto;
+      width: 32px;
+      height: 32px;
+      border: 3px solid rgba(128, 128, 128, 0.3);
+      border-top-color: currentColor;
+      border-radius: 50%;
+      animation: sfx-tb-spin 0.8s linear infinite;
+      pointer-events: none;
+    }
+    @keyframes sfx-tb-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+let r = O;
+a([
+  n({ attribute: "base-url" })
+], r.prototype, "baseUrl");
+a([
+  n()
+], r.prototype, "token");
+a([
+  n({ attribute: "sass-key" })
+], r.prototype, "sassKey");
+a([
+  n({ attribute: "session-uuid" })
+], r.prototype, "sessionUuid");
+a([
+  n({ attribute: "sec-template" })
+], r.prototype, "secTemplate");
+a([
+  n({ attribute: "company-uuid" })
+], r.prototype, "companyUuid");
+a([
+  n({ attribute: "project-uuid" })
+], r.prototype, "projectUuid");
+a([
+  n({ attribute: "template-id" })
+], r.prototype, "templateId");
+a([
+  n({ reflect: !0 })
+], r.prototype, "mode");
+a([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "stateless");
+a([
+  n({ attribute: !1 })
+], r.prototype, "content");
+a([
+  n({ type: Boolean, attribute: "new-template" })
+], r.prototype, "newTemplate");
+a([
+  n({ attribute: "template-name" })
+], r.prototype, "templateName");
+a([
+  n({ attribute: "template-query" })
+], r.prototype, "templateQuery");
+a([
+  n({ attribute: "brand-color" })
+], r.prototype, "brandColor");
+a([
+  n()
+], r.prototype, "theme");
+a([
+  n({
+    attribute: "custom-metadata",
+    converter: {
+      fromAttribute: (s) => {
+        if (!s) return [];
+        try {
+          const e = JSON.parse(s);
+          return Array.isArray(e) ? e : [];
+        } catch {
+          return console.warn("[sfx-template-builder] custom-metadata is not valid JSON — ignoring."), [];
+        }
+      },
+      toAttribute: (s) => JSON.stringify(s ?? [])
+    }
+  })
+], r.prototype, "customMetadata");
+a([
+  n({ attribute: "custom-metadata-label" })
+], r.prototype, "customMetadataLabel");
+a([
+  n({ type: Boolean, attribute: "dam-store" })
+], r.prototype, "damStore");
+a([
+  n({ attribute: "store-folder" })
+], r.prototype, "storeFolder");
+a([
+  n({ attribute: "stored-uuid" })
+], r.prototype, "storedUuid");
+a([
+  n({ type: Number, attribute: "ready-timeout" })
+], r.prototype, "readyTimeout");
+a([
+  y()
+], r.prototype, "_status");
+a([
+  y()
+], r.prototype, "_open");
+a([
+  y()
+], r.prototype, "_src");
+a([
+  y()
+], r.prototype, "_isDirty");
+export {
+  le as A,
+  Q as B,
+  c as E,
+  J as H,
+  de as P,
+  r as S,
+  ce as a,
+  $ as b,
+  j as c,
+  x as d,
+  q as e,
+  F as f,
+  K as g,
+  P as h,
+  B as i,
+  G as j,
+  H as k,
+  X as l,
+  Y as m
+};
+//# sourceMappingURL=template-builder-B9Cwo_Q-.js.map