@atomm-developer/generator-workbench 0.1.7 → 0.1.8

package/dist/index.es.js

@@ -166,7 +166,11 @@ function createExportController(args) {
         element
       }));
       await ensureLoggedIn();
-      const usage = await ensureUsageAllowsExport(await getBillingUsage());
+      const initialUsage = await getBillingUsage();
+      const usage = await ensureUsageAllowsExport(initialUsage);
+      if (!initialUsage) {
+        return sdk.export.download({ format: "svg" });
+      }
       if (!usage) {
         return {
           success: false,
@@ -185,7 +189,11 @@ function createExportController(args) {
         element
       }));
       await ensureLoggedIn();
-      const usage = await ensureUsageAllowsExport(await getBillingUsage());
+      const initialUsage = await getBillingUsage();
+      const usage = await ensureUsageAllowsExport(initialUsage);
+      if (!initialUsage) {
+        return sdk.export.openInStudio({ format: "svg" });
+      }
       if (!usage) {
         return {
           success: false
@@ -470,7 +478,7 @@ function createTemplateController(args) {
       };
     },
     prepareTemplateExport,
-    async exportTemplate(selectedFieldPaths) {
+    buildTemplate(selectedFieldPaths) {
       var _a;
       const prepared = prepareTemplateExport();
       const finalSelectedFieldPaths = (selectedFieldPaths == null ? void 0 : selectedFieldPaths.length) ? collectPanelFieldPaths(prepared.panelSchema, selectedFieldPaths) : prepared.selectedFieldPaths;
@@ -485,6 +493,10 @@ function createTemplateController(args) {
         selectedFieldPaths: finalSelectedFieldPaths,
         templateMeta: (_a = config.getTemplateMeta) == null ? void 0 : _a.call(config)
       });
+      return template;
+    },
+    async exportTemplate(selectedFieldPaths) {
+      const template = this.buildTemplate(selectedFieldPaths);
       sdk.template.download(template);
       return { template };
     }
@@ -578,6 +590,7 @@ const ATOMM_UI_CDN_SCRIPT_URL = "https://minio-download.makeblock.com/resource/a
 const CREDIT_ICON_DATA_URI = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='12'%20cy='12'%20r='9'%20fill='url(%23paint0_linear_503_69253)'/%3e%3cg%20filter='url(%23filter0_d_503_69253)'%3e%3crect%20x='7.75781'%20y='12'%20width='6'%20height='6'%20rx='1'%20transform='rotate(-45%207.75781%2012)'%20fill='url(%23paint1_linear_503_69253)'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_503_69253'%20x='2.17188'%20y='4.17188'%20width='19.6572'%20height='19.6562'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='2'/%3e%3cfeGaussianBlur%20stdDeviation='3'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%200.206957%200%200%200%200%200.0670085%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_503_69253'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_503_69253'%20result='shape'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_503_69253'%20x1='12'%20y1='3'%20x2='12'%20y2='21'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFA346'/%3e%3cstop%20offset='1'%20stop-color='%23FF7C23'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_503_69253'%20x1='13.2327'%20y1='12.5252'%20x2='8.63652'%20y2='18.5356'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='white'/%3e%3cstop%20offset='1'%20stop-color='%23FFD3B5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
 const EXPORT_ICON_DATA_URI = "data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%201088%201024'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M416%20128v85.312h-128A42.688%2042.688%200%200%200%20245.312%20256v512c0%2023.552%2019.136%2042.688%2042.688%2042.688h512a42.688%2042.688%200%200%200%2042.688-42.688V597.312H928V768a128%20128%200%200%201-128%20128h-512a128%20128%200%200%201-128-128V256a128%20128%200%200%201%20128-128h128z'%20fill%3D'%23ffffff'/%3E%3Cpath%20d%3D'M723.52%20520.832L924.352%20320l-200.832-200.832-60.352%2060.352%2097.856%2097.792h-67.712A298.688%20298.688%200%200%200%20394.688%20576v85.312H480V576a213.312%20213.312%200%200%201%20213.312-213.312h67.712l-97.856%2097.792%2060.352%2060.352z'%20fill%3D'%23ffffff'/%3E%3C/svg%3E";
 const INVITATION_ICON_URL = "https://storage-us.atomm.com/resource/static/atomm/icon/Vector.svg";
+const NO_LOGIN_AVATAR_URL = "https://storage-us.atomm.com/resource/xart/static/agent/imgs/no-login.png";
 const WORKBENCH_SHELL_STYLES = `
   :host {
     display: block;
@@ -801,6 +814,22 @@ const WORKBENCH_SHELL_STYLES = `
     transition: background 150ms ease;
   }
 
+  .auth-avatar-button {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .auth-avatar-button--guest {
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+  }
+
 
   .auth-avatar {
     width: 40px;
@@ -822,6 +851,10 @@ const WORKBENCH_SHELL_STYLES = `
     font-size: 14px;
   }
 
+  .auth-avatar--guest {
+    background: transparent;
+  }
+
   .auth-avatar img {
     width: 100%;
     height: 100%;
@@ -991,10 +1024,19 @@ const WORKBENCH_SHELL_STYLES = `
   }
 
   .export-credits-hint-value {
-    color: white;
-    font-size: 13px;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
+    width: 100%;
+    background: linear-gradient(90deg, #fce1bf, #ecb678 67.02%, #f9c991);
+    border-radius: 4px;
+    gap: 2px;
+    height: 16px;
+    padding: 2px 4px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    color: #581e06;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .export-overlay-menu,
@@ -1201,12 +1243,11 @@ const WORKBENCH_VUE_TEMPLATE = `
       </div>
       <div class="app-topbar-auth">
         <button
-          v-if="state.isLogin && state.invitationEnabled"
+          v-if="state.invitationEnabled"
           type="button"
           class="invite-entry"
           data-role="open-invitation"
-          :disabled="!state.invitationReady"
-          @click="openInvitationModal()"
+          @click="callbacks.onOpenInvitation()"
         >
           <img
             src="${INVITATION_ICON_URL}"
@@ -1217,7 +1258,7 @@ const WORKBENCH_VUE_TEMPLATE = `
           <span class="invite-entry-text">{{ state.invitationButtonText }}</span>
         </button>
         <div
-          v-if="state.isLogin"
+          v-if="state.isLogin && state.creditsEnabled"
           class="topbar-credits-badge"
           data-role="topbar-credits"
           title="Remaining credits"
@@ -1300,14 +1341,22 @@ const WORKBENCH_VUE_TEMPLATE = `
           </template>
         </xt-dropdown-menu>
 
-        <xt-button
-          size="small"
-          type="secondary"
+        <button
+          type="button"
+          class="auth-avatar-button auth-avatar-button--guest"
           data-role="login"
-          :loading="state.loginLoading"
           v-if="!state.isLogin"
           @click="callbacks.onLogin()"
-        >Login</xt-button>
+        >
+          <div class="auth-avatar auth-avatar--guest">
+            <img
+              src="${NO_LOGIN_AVATAR_URL}"
+              alt="Login"
+              data-role="guest-avatar-image"
+              draggable="false"
+            />
+          </div>
+        </button>
       </div>
     </header>
 
@@ -1814,6 +1863,7 @@ function stateFromConfig(vue, config, invitationReady) {
     panelTarget: config.panelTarget || "right",
     avatarMenuTrigger: config.avatarMenuTrigger || "hover",
     templateEnabled: config.templateEnabled !== false,
+    creditsEnabled: config.creditsEnabled !== false,
     invitationEnabled: isInvitationEnabled(config),
     invitationReady,
     invitationConfigKey: ((_a = config.invitationConfigKey) == null ? void 0 : _a.trim()) || "",
@@ -1855,6 +1905,8 @@ function createNoopCallbacks() {
   return {
     onLogin: () => {
     },
+    onOpenInvitation: () => {
+    },
     onLogout: () => {
     },
     onImportTemplate: () => {
@@ -2120,6 +2172,15 @@ async function renderWorkbenchShell(root, config) {
   const state = stateFromConfig(vue, config, invitationRuntime !== null);
   const callbacks = createNoopCallbacks();
   const invitationModalRef = vue.ref(null);
+  const triggerInvitationModal = () => {
+    var _a2, _b2;
+    const modalInstance = invitationModalRef.value;
+    const open = (modalInstance == null ? void 0 : modalInstance.open) || ((_b2 = (_a2 = modalInstance == null ? void 0 : modalInstance.$) == null ? void 0 : _a2.exposed) == null ? void 0 : _b2.open);
+    open == null ? void 0 : open({
+      configKey: state.invitationConfigKey || "default",
+      showDetail: false
+    });
+  };
   const container = document.createElement("div");
   container.setAttribute("data-workbench-vue-root", "");
   root.appendChild(container);
@@ -2142,18 +2203,10 @@ async function renderWorkbenchShell(root, config) {
   }) : null;
   const app = vue.createApp({
     setup() {
-      const openInvitationModal = () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = invitationModalRef.value) == null ? void 0 : _a2.open) == null ? void 0 : _b2.call(_a2, {
-          configKey: state.invitationConfigKey || "default",
-          showDetail: false
-        });
-      };
       return {
         state,
         callbacks,
-        invitationModalRef,
-        openInvitationModal
+        invitationModalRef
       };
     },
     template: WORKBENCH_VUE_TEMPLATE
@@ -2184,6 +2237,7 @@ async function renderWorkbenchShell(root, config) {
     callbacks,
     app,
     refs,
+    openInvitationModal: triggerInvitationModal,
     requestCreditsPurchase: async (options) => {
       if (!purchaseBridge) {
         await injectStyleSheetIntoDocumentHead(
@@ -2215,6 +2269,295 @@ function unmountWorkbenchShell(context) {
   context.disposeCreditsPurchaseBridge();
   context.app.unmount();
 }
+function createIframeBridge(args) {
+  const {
+    targetWindow = window,
+    parentWindow = window.parent,
+    targetOrigin = "*",
+    validateOrigin,
+    handlers
+  } = args;
+  let disposed = false;
+  const post = (type, data) => {
+    if (disposed) return;
+    logBridge("outgoing", {
+      type,
+      data,
+      targetOrigin
+    });
+    parentWindow.postMessage(
+      {
+        type,
+        data
+      },
+      targetOrigin
+    );
+  };
+  const postTemplateError = (action, error) => {
+    logBridge("error", {
+      type: "generator_toTemplateError",
+      action,
+      message: toErrorMessage(error)
+    });
+    post("generator_toTemplateError", {
+      action,
+      message: toErrorMessage(error)
+    });
+  };
+  const postFileError = (action, error) => {
+    logBridge("error", {
+      type: "generator_toFileError",
+      action,
+      message: toErrorMessage(error)
+    });
+    post("generator_toFileError", {
+      action,
+      message: toErrorMessage(error)
+    });
+  };
+  const onMessage = (event) => {
+    if (disposed) return;
+    if (validateOrigin && !validateOrigin(event.origin, event)) {
+      return;
+    }
+    const message = event.data;
+    if (!message || typeof message !== "object") {
+      return;
+    }
+    const type = "type" in message && typeof message.type === "string" ? message.type : "";
+    const data = "data" in message ? message.data : void 0;
+    logBridge("incoming", {
+      type,
+      data,
+      origin: event.origin
+    });
+    switch (type) {
+      case "generator_getGeneratorData":
+        void handlers.getGeneratorData().then((payload) => {
+          post("generator_toGeneratorData", payload);
+        }).catch((error) => {
+          postTemplateError("getGeneratorData", error);
+        });
+        return;
+      case "generator_setGeneratorData":
+        void Promise.resolve(handlers.setGeneratorData(data || {}));
+        return;
+      case "generator_loadTemplateData":
+        void handlers.loadTemplateData(data || {}).then((payload) => {
+          post("generator_toTemplateLoaded", {
+            template: (payload == null ? void 0 : payload.template) || (data && "template" in data ? data.template : data) || null
+          });
+        }).catch((error) => {
+          postTemplateError("loadTemplateData", error);
+        });
+        return;
+      case "generator_getTemplateData":
+        void handlers.getTemplateData().then((payload) => {
+          post("generator_toTemplateData", payload);
+        }).catch((error) => {
+          postTemplateError("getTemplateData", error);
+        });
+        return;
+      case "generator_getFile": {
+        const action = normalizeFileAction(data == null ? void 0 : data.action);
+        void handlers.getFile(action).then((payload) => {
+          post("generator_toFile", payload);
+        }).catch((error) => {
+          postFileError(action, error);
+        });
+        return;
+      }
+      case "generator_getTemplateFieldOptions":
+        postTemplateError(
+          "getTemplateFieldOptions",
+          new Error("Template field options are not supported")
+        );
+        return;
+      case "generator_publishTemplate":
+        postTemplateError(
+          "publishTemplate",
+          new Error("Template publishing is not supported")
+        );
+        return;
+      default:
+        return;
+    }
+  };
+  targetWindow.addEventListener("message", onMessage);
+  post("generator_pageLoaded");
+  return {
+    dispose() {
+      if (disposed) return;
+      logBridge("lifecycle", {
+        type: "dispose"
+      });
+      disposed = true;
+      targetWindow.removeEventListener("message", onMessage);
+    }
+  };
+}
+async function resolveIframeBridgeFile(args) {
+  var _a, _b;
+  const { action, sdk, runtime, config, element } = args;
+  const context = {
+    sdk,
+    runtime,
+    element
+  };
+  const configuredExportData = await Promise.resolve(
+    (_b = (_a = config.embedBridge) == null ? void 0 : _a.getExportData) == null ? void 0 : _b.call(_a, action, context)
+  );
+  const exportData = configuredExportData || await resolveSdkExportData(sdk, action);
+  if (!exportData) {
+    throw new Error("No export data available");
+  }
+  return {
+    action,
+    ...await exportDataToBridgeFile(exportData)
+  };
+}
+async function resolveIframeBridgeOriginImageUrl(args) {
+  var _a, _b;
+  const { sdk, runtime, config, element } = args;
+  return await Promise.resolve(
+    (_b = (_a = config.embedBridge) == null ? void 0 : _a.getOriginImageUrl) == null ? void 0 : _b.call(_a, {
+      sdk,
+      runtime,
+      element
+    })
+  ) || "";
+}
+async function resolveSdkExportData(sdk, action) {
+  const exportModule = sdk.export;
+  const provider = exportModule.provider;
+  if (!provider) {
+    return null;
+  }
+  const purpose = mapActionToExportPurpose(action);
+  const preferredFormat = action === "cover" ? "png" : "svg";
+  if (typeof provider.getExportData === "function") {
+    const data = await Promise.resolve(
+      provider.getExportData(purpose, preferredFormat)
+    );
+    if (data) {
+      return data;
+    }
+  }
+  if (typeof provider.getExportCanvas === "function") {
+    const canvas = await Promise.resolve(provider.getExportCanvas(purpose));
+    if (canvas) {
+      return {
+        type: "canvas",
+        canvas
+      };
+    }
+  }
+  return null;
+}
+async function exportDataToBridgeFile(data) {
+  switch (data.type) {
+    case "canvas": {
+      const base64 = data.canvas.toDataURL("image/png");
+      return {
+        base64,
+        mimeType: "image/png",
+        ext: "png"
+      };
+    }
+    case "dataUrl": {
+      const mimeType = readDataUrlMimeType(data.dataUrl);
+      return {
+        base64: data.dataUrl,
+        mimeType,
+        ext: mimeTypeToExtension(mimeType)
+      };
+    }
+    case "svg": {
+      return {
+        base64: svgToDataUrl(data.svgString),
+        mimeType: "image/svg+xml",
+        ext: "svg"
+      };
+    }
+    case "blob": {
+      const dataUrl = await blobToDataUrl(data.blob);
+      const mimeType = data.blob.type || readDataUrlMimeType(dataUrl);
+      return {
+        base64: dataUrl,
+        mimeType,
+        ext: mimeTypeToExtension(mimeType)
+      };
+    }
+    case "url": {
+      const response = await fetch(data.url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch export URL: ${response.status}`);
+      }
+      const blob = await response.blob();
+      const dataUrl = await blobToDataUrl(blob);
+      const mimeType = blob.type || readDataUrlMimeType(dataUrl);
+      return {
+        base64: dataUrl,
+        mimeType,
+        ext: mimeTypeToExtension(mimeType)
+      };
+    }
+  }
+}
+function normalizeFileAction(action) {
+  return action === "openInStudio" || action === "cover" ? action : "download";
+}
+function mapActionToExportPurpose(action) {
+  if (action === "openInStudio") {
+    return "studio";
+  }
+  return action;
+}
+function toErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function readDataUrlMimeType(dataUrl) {
+  var _a;
+  return ((_a = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);/)) == null ? void 0 : _a[1]) || "image/png";
+}
+function mimeTypeToExtension(mimeType) {
+  var _a;
+  if (mimeType === "image/svg+xml") return "svg";
+  if (mimeType === "image/jpeg") return "jpg";
+  return ((_a = mimeType.split("/")[1]) == null ? void 0 : _a.split("+")[0]) || "png";
+}
+function svgToDataUrl(svgString) {
+  const utf8 = encodeURIComponent(svgString).replace(
+    /%([0-9A-F]{2})/g,
+    (_, p1) => String.fromCharCode(Number.parseInt(p1, 16))
+  );
+  return `data:image/svg+xml;base64,${btoa(utf8)}`;
+}
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") {
+        reject(new Error("Failed to read blob as data URL"));
+        return;
+      }
+      resolve(reader.result);
+    };
+    reader.onerror = () => {
+      reject(reader.error || new Error("Failed to read blob as data URL"));
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+function logBridge(phase, payload) {
+  if (!isBridgeDebugEnabled()) {
+    return;
+  }
+  console.log(`[generator-workbench][iframe-bridge][${phase}]`, payload);
+}
+function isBridgeDebugEnabled() {
+  return new URLSearchParams(window.location.search).get("bridgeDebug") === "1";
+}
 const DEFAULT_CONFIG = {
   title: "",
   mode: "full",
@@ -2229,6 +2572,9 @@ function isShellMode(config) {
   return config.mode === "shell";
 }
 const TOKEN_STORAGE_KEY_PREFIX = "__atomm_sdk_token__";
+function getRouteCapabilityMode() {
+  return new URLSearchParams(window.location.search).get("mode") === "embed" ? "embed" : "full";
+}
 function normalizeWorkbenchConfig(config) {
   return {
     ...DEFAULT_CONFIG,
@@ -2257,6 +2603,7 @@ class GeneratorWorkbenchElement extends HTMLElement {
     __publicField(this, "_historyController");
     __publicField(this, "_runtimeController");
     __publicField(this, "_shellContext");
+    __publicField(this, "_iframeBridge");
     __publicField(this, "handleRuntimeCloudSaveRequest", (event) => {
       if (!event.detail) return;
       if (this._runtimeCloudSaveTimer) {
@@ -2353,6 +2700,7 @@ class GeneratorWorkbenchElement extends HTMLElement {
         this._state.activePanelFilter
       ));
     }
+    this.bindIframeBridge();
     this._mounted = true;
     dispatchWorkbenchEvent(this, "workbench-ready", {
       sdk: this._sdk,
@@ -2360,7 +2708,7 @@ class GeneratorWorkbenchElement extends HTMLElement {
     });
   }
   async unmount() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     (_a = this._cleanupAuth) == null ? void 0 : _a.call(this);
     this._cleanupAuth = void 0;
     (_b = this._cleanupCredits) == null ? void 0 : _b.call(this);
@@ -2376,11 +2724,13 @@ class GeneratorWorkbenchElement extends HTMLElement {
       this._runtimeCloudSaveTimer = null;
     }
     this.clearBillingCountdownTimer();
+    (_f = this._iframeBridge) == null ? void 0 : _f.dispose();
+    this._iframeBridge = void 0;
     this.removeEventListener(
       "runtime-cloud-save-request",
       this.handleRuntimeCloudSaveRequest
     );
-    await ((_f = this._runtimeController) == null ? void 0 : _f.unmountAll());
+    await ((_g = this._runtimeController) == null ? void 0 : _g.unmountAll());
     if (this._shellContext) {
       unmountWorkbenchShell(this._shellContext);
       this._shellContext = void 0;
@@ -2555,7 +2905,10 @@ class GeneratorWorkbenchElement extends HTMLElement {
       unmountWorkbenchShell(this._shellContext);
       this.shadowRoot.innerHTML = "";
     }
-    this._shellContext = await renderWorkbenchShell(this.shadowRoot, this._config);
+    this._shellContext = await renderWorkbenchShell(
+      this.shadowRoot,
+      this.getEffectiveConfig()
+    );
     this.syncAuthUI();
     this.syncBillingUI();
     this.syncInvitationConfigKey();
@@ -2563,32 +2916,34 @@ class GeneratorWorkbenchElement extends HTMLElement {
   }
   bindControllers() {
     var _a;
-    if (!this._sdk || !this._runtime) return;
-    this._authController = createAuthController({ sdk: this._sdk });
+    const sdk = this.getEffectiveSdk();
+    const config = this.getEffectiveConfig();
+    if (!sdk || !this._runtime) return;
+    this._authController = createAuthController({ sdk });
     this._templateController = createTemplateController({
-      sdk: this._sdk,
+      sdk,
       runtime: this._runtime,
-      config: this._config
+      config
     });
     this._exportController = createExportController({
-      sdk: this._sdk,
+      sdk,
       runtime: this._runtime,
-      config: this._config,
+      config,
       element: this,
-      requestCreditsPurchase: (_a = this._shellContext) == null ? void 0 : _a.requestCreditsPurchase
+      requestCreditsPurchase: config.creditsEnabled === false ? void 0 : (_a = this._shellContext) == null ? void 0 : _a.requestCreditsPurchase
     });
-    this._cloudController = createCloudController({
-      sdk: this._sdk,
+    this._cloudController = sdk.cloud ? createCloudController({
+      sdk,
       runtime: this._runtime,
-      config: this._config,
+      config,
       element: this
-    });
-    this._historyController = createHistoryController({
-      sdk: this._sdk,
+    }) : void 0;
+    this._historyController = sdk.history ? createHistoryController({
+      sdk,
       runtime: this._runtime,
-      config: this._config,
+      config,
       element: this
-    });
+    }) : void 0;
     this._runtimeController = createRuntimeController({
       runtime: this._runtime
     });
@@ -2599,6 +2954,9 @@ class GeneratorWorkbenchElement extends HTMLElement {
     callbacks.onLogin = () => {
       void this.handleLogin();
     };
+    callbacks.onOpenInvitation = () => {
+      void this.handleInvitationEntry();
+    };
     callbacks.onLogout = () => {
       void this.handleLogout();
     };
@@ -2701,6 +3059,56 @@ class GeneratorWorkbenchElement extends HTMLElement {
     }
     this._shellContext.state.templateSelectedFieldPaths = Array.from(selected);
   }
+  async applyTemplatePayload(template) {
+    if (!this._runtime) {
+      throw new Error("[generator-workbench] runtime is required for template bridge actions");
+    }
+    if (!this._sdk) {
+      throw new Error("[generator-workbench] sdk is required for template bridge actions");
+    }
+    let capturedPanelFilter;
+    await this._sdk.template.applyToRuntime(
+      this._runtime,
+      template,
+      {
+        onPanelFilter: (panelFilter) => {
+          capturedPanelFilter = panelFilter;
+        }
+      }
+    );
+    if (capturedPanelFilter) {
+      this._state.activePanelFilter = capturedPanelFilter;
+      if (this._runtimeController && !isShellMode(this._config)) {
+        const panelHost = this.requireRefs().panelHost;
+        if (!panelHost) {
+          throw new Error(
+            "[generator-workbench] panel host is required for template bridge actions"
+          );
+        }
+        await this._runtimeController.remountPanel(panelHost, capturedPanelFilter);
+      }
+    }
+    return {
+      template,
+      panelFilter: capturedPanelFilter
+    };
+  }
+  async tryResolveIframeBridgeFile(action, sdk, config) {
+    try {
+      if (!this._runtime) {
+        return void 0;
+      }
+      return await resolveIframeBridgeFile({
+        action,
+        sdk,
+        runtime: this._runtime,
+        config,
+        element: this
+      });
+    } catch {
+      return void 0;
+    }
+  }
   bindAuthState() {
     var _a;
     const controller = this.requireAuthController();
@@ -2713,13 +3121,101 @@ class GeneratorWorkbenchElement extends HTMLElement {
     });
     this.bindBillingSubscriptions();
   }
+  bindIframeBridge() {
+    var _a, _b, _c;
+    (_a = this._iframeBridge) == null ? void 0 : _a.dispose();
+    this._iframeBridge = void 0;
+    if (getRouteCapabilityMode() !== "embed" || !this._runtime) {
+      return;
+    }
+    const sdk = this._sdk;
+    if (!sdk) {
+      return;
+    }
+    const config = this._config;
+    const runtime = this._runtime;
+    this._iframeBridge = createIframeBridge({
+      targetOrigin: ((_b = config.embedBridge) == null ? void 0 : _b.targetOrigin) || "*",
+      validateOrigin: (_c = config.embedBridge) == null ? void 0 : _c.validateOrigin,
+      handlers: {
+        getGeneratorData: async () => {
+          const info = runtime.getState();
+          const originImageUrl = await resolveIframeBridgeOriginImageUrl({
+            sdk,
+            runtime,
+            config,
+            element: this
+          });
+          const coverFile = await this.tryResolveIframeBridgeFile(
+            "cover",
+            sdk,
+            config
+          );
+          return {
+            info,
+            cover: (coverFile == null ? void 0 : coverFile.base64) || "",
+            originImageUrl
+          };
+        },
+        setGeneratorData: async (data) => {
+          const snapshot = data.info && typeof data.info === "object" && !Array.isArray(data.info) ? data.info : data;
+          await runtime.setState(snapshot, {
+            source: "iframe-bridge",
+            originImageUrl: typeof data.originImageUrl === "string" ? data.originImageUrl : ""
+          });
+        },
+        loadTemplateData: async (data) => {
+          const template = data.template && typeof data.template === "object" && !Array.isArray(data.template) ? data.template : data;
+          if (!template || typeof template !== "object" || Array.isArray(template)) {
+            throw new Error("Template payload is empty");
+          }
+          const result = await this.applyTemplatePayload(
+            template
+          );
+          return {
+            template: result.template
+          };
+        },
+        getTemplateData: async () => {
+          const template = this.requireTemplateController().buildTemplate();
+          const info = runtime.getState();
+          const originImageUrl = await resolveIframeBridgeOriginImageUrl({
+            sdk,
+            runtime,
+            config,
+            element: this
+          });
+          const coverFile = await this.tryResolveIframeBridgeFile(
+            "cover",
+            sdk,
+            config
+          );
+          return {
+            template,
+            info,
+            cover: (coverFile == null ? void 0 : coverFile.base64) || "",
+            originImageUrl
+          };
+        },
+        getFile: async (action) => resolveIframeBridgeFile({
+          action,
+          sdk,
+          runtime,
+          config,
+          element: this
+        })
+      }
+    });
+  }
   bindAutoSave() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
+    const sdk = this.getEffectiveSdk();
+    const config = this.getEffectiveConfig();
     (_a = this._cleanupRuntimeSubscription) == null ? void 0 : _a.call(this);
     this._cleanupRuntimeSubscription = void 0;
     (_b = this._cloudAutoSaveScheduler) == null ? void 0 : _b.dispose();
     this._cloudAutoSaveScheduler = void 0;
-    if (!this._config.autoSaveEnabled || !((_c = this._runtime) == null ? void 0 : _c.subscribe) || !((_d = this._sdk) == null ? void 0 : _d.cloud)) {
+    if (!config.autoSaveEnabled || !((_c = this._runtime) == null ? void 0 : _c.subscribe) || !(sdk == null ? void 0 : sdk.cloud)) {
       return;
     }
     this._cloudAutoSaveScheduler = this.requireCloudController().scheduleAutoSave(
@@ -2735,18 +3231,24 @@ class GeneratorWorkbenchElement extends HTMLElement {
     });
   }
   bindRuntimeCloudSaveEvent() {
+    const sdk = this.getEffectiveSdk();
+    const config = this.getEffectiveConfig();
     this.removeEventListener(
       "runtime-cloud-save-request",
       this.handleRuntimeCloudSaveRequest
     );
+    if (!config.cloudEnabled || !(sdk == null ? void 0 : sdk.cloud)) {
+      return;
+    }
     this.addEventListener(
       "runtime-cloud-save-request",
       this.handleRuntimeCloudSaveRequest
     );
   }
   async initializeCloudRecordFromRoute() {
-    var _a;
-    if (!this._config.cloudEnabled || !((_a = this._sdk) == null ? void 0 : _a.cloud)) {
+    const sdk = this.getEffectiveSdk();
+    const config = this.getEffectiveConfig();
+    if (!config.cloudEnabled || !(sdk == null ? void 0 : sdk.cloud)) {
       return;
     }
     const routeGid = this.getRouteCloudRecordId();
@@ -2813,19 +3315,20 @@ class GeneratorWorkbenchElement extends HTMLElement {
     );
   }
   bindBillingSubscriptions() {
-    var _a, _b, _c, _d;
+    var _a, _b;
+    const sdk = this.getEffectiveSdk();
     (_a = this._cleanupCredits) == null ? void 0 : _a.call(this);
     this._cleanupCredits = void 0;
     (_b = this._cleanupBilling) == null ? void 0 : _b.call(this);
     this._cleanupBilling = void 0;
-    const creditsModule = (_c = this._sdk) == null ? void 0 : _c.credits;
+    const creditsModule = sdk == null ? void 0 : sdk.credits;
     if (typeof (creditsModule == null ? void 0 : creditsModule.onChange) === "function") {
       this._cleanupCredits = creditsModule.onChange((balance) => {
         this._state.creditsBalance = Number(balance) || 0;
         this.syncBillingUI();
       });
     }
-    const billingModule = (_d = this._sdk) == null ? void 0 : _d.billing;
+    const billingModule = sdk == null ? void 0 : sdk.billing;
     if (typeof (billingModule == null ? void 0 : billingModule.onChange) === "function") {
       this._cleanupBilling = billingModule.onChange((usage) => {
         this.applyBillingUsage(usage);
@@ -2864,11 +3367,14 @@ class GeneratorWorkbenchElement extends HTMLElement {
     if (!this._shellContext) return;
     const { state } = this._shellContext;
     const usage = this._state.billingUsage;
+    state.creditsEnabled = this.getEffectiveConfig().creditsEnabled !== false;
     state.creditsBalance = this._state.creditsBalance;
     state.showExportCreditsHint = Boolean(
       this._state.authStatus.isLogin && (usage == null ? void 0 : usage.isEnabled)
     );
-    state.showExportCreditsIcon = Boolean(state.showExportCreditsHint && !(usage == null ? void 0 : usage.inFreePeriod));
+    state.showExportCreditsIcon = Boolean(
+      state.showExportCreditsHint && !(usage == null ? void 0 : usage.inFreePeriod) && ((usage == null ? void 0 : usage.freeRemaining) ?? 0) <= 0
+    );
     state.exportCreditsHintText = this.resolveExportCreditsHintText(usage);
   }
   syncInvitationConfigKey() {
@@ -2924,7 +3430,7 @@ class GeneratorWorkbenchElement extends HTMLElement {
       return `${usage.freePeriodRemaining}s`;
     }
     if (usage.freeRemaining > 0) {
-      return `free ${usage.freeRemaining}`;
+      return `${usage.freeRemaining}/${usage.freeTotal}`;
     }
     return String(usage.creditsPerUse);
   }
@@ -2974,15 +3480,20 @@ class GeneratorWorkbenchElement extends HTMLElement {
   }
   async syncBillingState(status = this._state.authStatus) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!status.isLogin || !this._sdk) {
+    const sdk = this.getEffectiveSdk();
+    if (!status.isLogin || !sdk) {
+      this.resetBillingState();
+      return;
+    }
+    if (!sdk.credits && !sdk.billing) {
       this.resetBillingState();
       return;
     }
-    const cachedBalance = (_b = (_a = this._sdk.credits) == null ? void 0 : _a.getCachedBalance) == null ? void 0 : _b.call(_a);
+    const cachedBalance = (_b = (_a = sdk.credits) == null ? void 0 : _a.getCachedBalance) == null ? void 0 : _b.call(_a);
     if (typeof cachedBalance === "number") {
       this._state.creditsBalance = cachedBalance;
     }
-    const cachedUsage = (_d = (_c = this._sdk.billing) == null ? void 0 : _c.getCachedUsage) == null ? void 0 : _d.call(_c);
+    const cachedUsage = (_d = (_c = sdk.billing) == null ? void 0 : _c.getCachedUsage) == null ? void 0 : _d.call(_c);
     if (cachedUsage) {
       this.applyBillingUsage(cachedUsage);
     } else {
@@ -2990,8 +3501,8 @@ class GeneratorWorkbenchElement extends HTMLElement {
     }
     try {
       const [creditsResult, usage] = await Promise.all([
-        (_f = (_e = this._sdk.credits) == null ? void 0 : _e.getBalance) == null ? void 0 : _f.call(_e),
-        (_h = (_g = this._sdk.billing) == null ? void 0 : _g.getUsage) == null ? void 0 : _h.call(_g)
+        (_f = (_e = sdk.credits) == null ? void 0 : _e.getBalance) == null ? void 0 : _f.call(_e),
+        (_h = (_g = sdk.billing) == null ? void 0 : _g.getUsage) == null ? void 0 : _h.call(_g)
       ]);
       if (typeof (creditsResult == null ? void 0 : creditsResult.quota) === "number") {
         this._state.creditsBalance = creditsResult.quota;
@@ -3005,6 +3516,34 @@ class GeneratorWorkbenchElement extends HTMLElement {
       this.handleError("auth", error);
     }
   }
+  getEffectiveConfig() {
+    if (getRouteCapabilityMode() !== "embed") {
+      return this._config;
+    }
+    return {
+      ...this._config,
+      invitationEnabled: false,
+      cloudEnabled: false,
+      historyEnabled: false,
+      autoSaveEnabled: false,
+      creditsEnabled: false
+    };
+  }
+  getEffectiveSdk() {
+    if (!this._sdk) {
+      return null;
+    }
+    if (getRouteCapabilityMode() !== "embed") {
+      return this._sdk;
+    }
+    return {
+      ...this._sdk,
+      credits: void 0,
+      billing: void 0,
+      cloud: void 0,
+      history: void 0
+    };
+  }
   async handleLogin() {
     try {
       this._state.busy.login = true;
@@ -3021,6 +3560,26 @@ class GeneratorWorkbenchElement extends HTMLElement {
       }
     }
   }
+  async handleInvitationEntry() {
+    var _a;
+    try {
+      if (!this._state.authStatus.isLogin) {
+        await this.handleLogin();
+        const status = this.requireAuthController().getStatus();
+        if (status.isLogin) {
+          this._state.authStatus = status;
+          this.syncAuthUI();
+          void this.syncBillingState(status);
+        }
+      }
+      if (!this.requireAuthController().getStatus().isLogin) {
+        return;
+      }
+      (_a = this._shellContext) == null ? void 0 : _a.openInvitationModal();
+    } catch (error) {
+      this.handleError("auth", error);
+    }
+  }
   async handleLogout() {
     try {
       await this.requireAuthController().logout();