@atomm-developer/generator-workbench 0.1.0 → 0.1.2

package/dist/index.es.js

@@ -21,6 +21,22 @@ function createAuthController(args) {
 }
 function createExportController(args) {
   const { sdk, runtime, config, element } = args;
+  async function ensureLoggedIn() {
+    if (sdk.auth.getStatus().isLogin) {
+      return;
+    }
+    await sdk.auth.login();
+    if (!sdk.auth.getStatus().isLogin) {
+      throw new Error("[generator-workbench] login is required before export");
+    }
+  }
+  async function consumeBilling() {
+    var _a;
+    if (!((_a = sdk.billing) == null ? void 0 : _a.consume)) {
+      return;
+    }
+    await sdk.billing.consume();
+  }
   return {
     async exportSvg() {
       var _a;
@@ -29,6 +45,8 @@ function createExportController(args) {
         runtime,
         element
       }));
+      await ensureLoggedIn();
+      await consumeBilling();
       return sdk.export.download({ format: "svg" });
     },
     async openInStudio() {
@@ -38,6 +56,8 @@ function createExportController(args) {
         runtime,
         element
       }));
+      await ensureLoggedIn();
+      await consumeBilling();
       return sdk.export.openInStudio({ format: "svg" });
     }
   };
@@ -86,12 +106,35 @@ function assert(condition, message) {
     throw new Error(message);
   }
 }
-function collectPanelFieldPaths(panelSchema) {
-  return panelSchema.groups.flatMap(
-    (group) => group.fields.map((field) => {
-      var _a, _b;
-      return (_b = (_a = field.bind) == null ? void 0 : _a.path) == null ? void 0 : _b.trim();
-    }).filter((path) => Boolean(path))
+function collectPanelFieldGroups(panelSchema, allowedFieldPaths) {
+  const allowedPathSet = (allowedFieldPaths == null ? void 0 : allowedFieldPaths.length) ? new Set(allowedFieldPaths) : null;
+  return panelSchema.groups.map((group) => {
+    var _a;
+    const fields = group.fields.map((field) => {
+      var _a2, _b, _c;
+      const path = (_b = (_a2 = field.bind) == null ? void 0 : _a2.path) == null ? void 0 : _b.trim();
+      if (!path) {
+        return null;
+      }
+      if (allowedPathSet && !allowedPathSet.has(path)) {
+        return null;
+      }
+      return {
+        id: field.id,
+        label: ((_c = field.label) == null ? void 0 : _c.trim()) || field.id || path,
+        path
+      };
+    }).filter((field) => Boolean(field));
+    return {
+      id: group.id,
+      title: ((_a = group.title) == null ? void 0 : _a.trim()) || group.id,
+      fields
+    };
+  }).filter((group) => group.fields.length > 0);
+}
+function collectPanelFieldPaths(panelSchema, allowedFieldPaths) {
+  return collectPanelFieldGroups(panelSchema, allowedFieldPaths).flatMap(
+    (group) => group.fields.map((field) => field.path)
   );
 }
 function resolveGeneratorId(panelSchema, state) {
@@ -109,6 +152,27 @@ function resolveGeneratorId(panelSchema, state) {
 }
 function createTemplateController(args) {
   const { sdk, runtime, config } = args;
+  function prepareTemplateExport() {
+    var _a;
+    const state = runtime.getState();
+    const panelSchema = runtime.getPanelSchema();
+    const configuredFieldPaths = (_a = config.getTemplateFieldPaths) == null ? void 0 : _a.call(config, panelSchema);
+    const fieldGroups = collectPanelFieldGroups(panelSchema, configuredFieldPaths);
+    const defaultSelectedFieldPaths = fieldGroups.flatMap(
+      (group) => group.fields.map((field) => field.path)
+    );
+    assert(
+      defaultSelectedFieldPaths.length > 0,
+      "[generator-workbench] exportTemplate requires at least one panel field path"
+    );
+    return {
+      generatorId: resolveGeneratorId(panelSchema, state),
+      state,
+      panelSchema,
+      fieldGroups,
+      selectedFieldPaths: defaultSelectedFieldPaths
+    };
+  }
   return {
     async importTemplate(file) {
       const text = await file.text();
@@ -124,21 +188,21 @@ function createTemplateController(args) {
         panelFilter: capturedPanelFilter
       };
     },
-    async exportTemplate() {
-      var _a, _b;
-      const state = runtime.getState();
-      const panelSchema = runtime.getPanelSchema();
-      const selectedFieldPaths = ((_a = config.getTemplateFieldPaths) == null ? void 0 : _a.call(config, panelSchema)) ?? collectPanelFieldPaths(panelSchema);
+    prepareTemplateExport,
+    async exportTemplate(selectedFieldPaths) {
+      var _a;
+      const prepared = prepareTemplateExport();
+      const finalSelectedFieldPaths = (selectedFieldPaths == null ? void 0 : selectedFieldPaths.length) ? collectPanelFieldPaths(prepared.panelSchema, selectedFieldPaths) : prepared.selectedFieldPaths;
       assert(
-        selectedFieldPaths.length > 0,
+        finalSelectedFieldPaths.length > 0,
         "[generator-workbench] exportTemplate requires at least one panel field path"
       );
       const template = sdk.template.build({
-        generatorId: resolveGeneratorId(panelSchema, state),
-        state,
-        panelSchema,
-        selectedFieldPaths,
-        templateMeta: (_b = config.getTemplateMeta) == null ? void 0 : _b.call(config)
+        generatorId: prepared.generatorId,
+        state: prepared.state,
+        panelSchema: prepared.panelSchema,
+        selectedFieldPaths: finalSelectedFieldPaths,
+        templateMeta: (_a = config.getTemplateMeta) == null ? void 0 : _a.call(config)
       });
       sdk.template.download(template);
       return { template };
@@ -151,6 +215,8 @@ function createInitialWorkbenchState() {
       isLogin: false,
       userInfo: null
     },
+    creditsBalance: 0,
+    billingUsage: null,
     busy: {
       login: false,
       importTemplate: false,
@@ -173,6 +239,26 @@ function dispatchWorkbenchEvent(target, name, detail) {
     })
   );
 }
+function ensureBrowserProcessEnv() {
+  const browserGlobal = globalThis;
+  if (!browserGlobal.process) {
+    browserGlobal.process = {
+      env: {
+        NODE_ENV: "production"
+      }
+    };
+    return;
+  }
+  if (!browserGlobal.process.env) {
+    browserGlobal.process.env = {
+      NODE_ENV: "production"
+    };
+    return;
+  }
+  if (!browserGlobal.process.env.NODE_ENV) {
+    browserGlobal.process.env.NODE_ENV = "production";
+  }
+}
 function queryRequired(root, selector) {
   const node = root.querySelector(selector);
   if (!node) {
@@ -185,267 +271,853 @@ function queryRequired(root, selector) {
 function collectWorkbenchRefs(root) {
   return {
     root,
-    topbar: queryRequired(root, ".topbar"),
     workspace: queryRequired(root, '[data-role="workspace"]'),
-    logoArea: queryRequired(root, '[data-role="logo-area"]'),
-    importTemplateBtn: queryRequired(root, '[data-role="import-template"]'),
-    exportTemplateBtn: queryRequired(root, '[data-role="export-template"]'),
-    loginBtn: queryRequired(root, '[data-role="login"]'),
-    avatarButton: queryRequired(root, '[data-role="avatar-button"]'),
-    avatarImage: queryRequired(root, '[data-role="avatar-image"]'),
-    avatarMenu: queryRequired(root, '[data-role="avatar-menu"]'),
-    logoutBtn: queryRequired(root, '[data-role="logout"]'),
-    panelSidebar: queryRequired(root, '[data-role="panel-sidebar"]'),
-    panelHost: queryRequired(root, '[data-role="panel-host"]'),
-    panelActions: queryRequired(root, '[data-role="panel-actions"]'),
+    logoArea: root.querySelector('[data-role="logo-area"]'),
     canvasHost: queryRequired(root, '[data-role="canvas-host"]'),
-    fabTrigger: queryRequired(root, '[data-role="fab-trigger"]'),
-    fabMenu: queryRequired(root, '[data-role="fab-menu"]'),
-    exportSvgBtn: queryRequired(root, '[data-role="export-svg"]'),
-    openInStudioBtn: queryRequired(root, '[data-role="open-in-studio"]'),
+    panelHost: queryRequired(root, '[data-role="panel-host"]'),
     templateFileInput: queryRequired(root, '[data-role="template-file-input"]')
   };
 }
-function applyWorkbenchConfig(refs, config) {
-  refs.logoArea.textContent = config.logoText || config.title;
-  refs.workspace.classList.toggle("panel-left", config.panelTarget === "left");
-  refs.workspace.classList.toggle("panel-right", config.panelTarget !== "left");
-  refs.importTemplateBtn.hidden = config.templateEnabled === false;
-  refs.exportTemplateBtn.hidden = config.templateEnabled === false;
-  refs.exportSvgBtn.hidden = config.exportEnabled === false;
-  refs.openInStudioBtn.hidden = config.studioEnabled === false;
-}
-const WORKBENCH_TEMPLATE = `
-  <style>
-    :host {
-      display: block;
-      min-height: 100%;
-      color: #111827;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
+const ATOMM_UI_CDN_CSS_URL = "https://minio-download.makeblock.com/resource/atomm-ui-umd/dist-browser/atomm-ui.min.css";
+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 WORKBENCH_SHELL_STYLES = `
+  :host {
+    display: block;
+    height: 100%;
+    color: #111827;
+    font-family: Inter, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --bg-soft: #f3f4f6;
+    --border-default: #e5e7eb;
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --text-muted: #9ca3af;
+  }
 
-    * {
-      box-sizing: border-box;
-    }
+  * {
+    box-sizing: border-box;
+  }
 
-    .shell {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-      background: #f5f7fb;
-    }
+  [data-workbench-vue-root] {
+    height: 100%;
+  }
 
-    .topbar {
-      height: 56px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 0 16px;
-      background: #fff;
-      border-bottom: 1px solid #e5e7eb;
-    }
+  .shell {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background:
+      radial-gradient(rgba(17, 24, 39, 0.06) 1px, transparent 1px),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(249, 250, 251, 0.96));
+    background-size: 20px 20px, auto;
+  }
 
-    .logo-area {
-      font-weight: 600;
-    }
+  .topbar,
+  .app-topbar {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0 24px;
+    background: rgba(255, 255, 255, 0.92);
+    border-bottom: 1px solid var(--border-default);
+    backdrop-filter: blur(12px);
+    position: relative;
+    z-index: 20;
+  }
 
-    .topbar-actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+  .logo-area,
+  .app-topbar-main {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    min-width: 0;
+    flex: 1;
+  }
 
-    .workspace {
-      flex: 1;
-      min-height: 0;
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 320px;
-    }
+  .app-topbar-nav {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
 
-    .workspace.panel-left {
-      grid-template-columns: 320px minmax(0, 1fr);
-    }
+  .workspace {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 320px;
+  }
 
-    .workspace.panel-right .canvas-host {
-      grid-column: 1;
-    }
+  .workspace.panel-left {
+    grid-template-columns: 320px minmax(0, 1fr);
+  }
 
-    .workspace.panel-right .panel-sidebar {
-      grid-column: 2;
-    }
+  .workspace.panel-right .canvas-host {
+    grid-column: 1;
+  }
 
-    .workspace.panel-left .panel-sidebar {
-      grid-column: 1;
-    }
+  .workspace.panel-right .panel-sidebar {
+    grid-column: 2;
+  }
 
-    .workspace.panel-left .canvas-host {
-      grid-column: 2;
-    }
+  .workspace.panel-left .panel-sidebar {
+    grid-column: 1;
+  }
 
-    .panel-sidebar {
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      background: #fff;
-    }
+  .workspace.panel-left .canvas-host {
+    grid-column: 2;
+  }
 
-    .panel-host {
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
-    }
+  .panel-sidebar {
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+  }
 
-    .canvas-host {
-      position: relative;
-      min-height: 480px;
-      padding: 24px;
-      display: grid;
-      place-items: center;
-    }
+  .panel-host {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
 
-    button {
-      border: 0;
-      border-radius: 10px;
-      padding: 10px 14px;
-      cursor: pointer;
-      background: #111827;
-      color: #fff;
-      font: inherit;
-    }
+  .canvas-host {
+    position: relative;
+    min-height: 480px;
+    display: grid;
+    place-items: center;
+  }
 
-    button.secondary {
-      background: #e5e7eb;
-      color: #111827;
-    }
+  .brand-logo {
+    height: 32px;
+    width: 92px;
+    display: block;
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
 
-    button:focus-visible {
-      outline: 2px solid #4338ca;
-      outline-offset: 2px;
-    }
+  .app-topbar-auth {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    flex: 0 0 auto;
+  }
 
-    .auth-area {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
+  .topbar-credits-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    color: #2d3541;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: default;
+  }
 
-    .avatar-button {
-      display: none;
-      align-items: center;
-      gap: 8px;
-      background: transparent;
-      color: #111827;
-      padding: 0;
-    }
+  .topbar-credits-value {
+    font-variant-numeric: tabular-nums;
+  }
 
-    .avatar-image {
-      width: 32px;
-      height: 32px;
-      border-radius: 999px;
-      object-fit: cover;
-      background: #e5e7eb;
-    }
+  .credits-token-icon {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 16px;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
 
-    .avatar-menu {
-      position: absolute;
-      right: 0;
-      top: calc(100% + 8px);
-      min-width: 140px;
-      padding: 8px;
-      display: none;
-      background: #fff;
-      border: 1px solid #e5e7eb;
-      border-radius: 12px;
-      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
-    }
+  .credits-token-icon--sm {
+    width: 16px;
+    height: 16px;
+    flex-basis: 16px;
+  }
 
-    .avatar-menu.is-open,
-    .fab-menu.is-open {
-      display: block;
-    }
+  .auth-avatar-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px 4px 4px;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background 150ms ease;
+  }
 
-    .avatar-menu button,
-    .fab-menu button {
-      width: 100%;
-    }
+  .auth-avatar-trigger:hover {
+    background: var(--bg-soft);
+  }
 
-    .panel-actions {
-      padding: 12px;
-      border-top: 1px solid #e5e7eb;
-    }
+  .auth-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    flex: 0 0 auto;
+    background: #f3f4f6;
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 600;
+  }
 
-    .workspace.panel-right .panel-sidebar {
-      border-left: 1px solid #e5e7eb;
-    }
+  .auth-avatar--lg {
+    width: 40px;
+    height: 40px;
+    font-size: 14px;
+  }
 
-    .workspace.panel-left .panel-sidebar {
-      border-right: 1px solid #e5e7eb;
-    }
+  .auth-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
 
-    .fab {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      gap: 8px;
-      width: 100%;
-    }
+  .auth-popover-body {
+    min-width: 200px;
+    padding: 4px 0;
+  }
 
-    .fab-menu {
-      width: 100%;
-      display: none;
-      padding: 8px;
-      background: #fff;
-      border: 1px solid #e5e7eb;
-      border-radius: 12px;
-      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
-    }
+  .auth-popover-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+  }
 
-    .fab-menu button + button {
-      margin-top: 8px;
-    }
-  </style>
+  .auth-popover-user-text {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .auth-popover-name {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .auth-popover-sub {
+    display: block;
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .auth-popover-divider {
+    height: 1px;
+    background: var(--border-default);
+    margin: 4px 0;
+  }
+
+  .auth-popover-action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .auth-popover-action:hover {
+    background: var(--bg-soft);
+    color: var(--text-primary);
+  }
+
+  .auth-hover-card {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .auth-hover-panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    z-index: 40;
+    min-width: 200px;
+    background: #fff;
+    border: 1px solid var(--border-default);
+    border-radius: 12px;
+    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.12);
+    opacity: 0;
+    transform: translateY(4px);
+    pointer-events: none;
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  .auth-hover-card:hover .auth-hover-panel,
+  .auth-hover-card:focus-within .auth-hover-panel {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .panel-actions,
+  #sidebar-footer {
+    flex-shrink: 0;
+    padding: 14px 24px;
+    border-top: 1px solid var(--border-default);
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+  }
+
+  .sidebar-footer-export {
+    width: 100%;
+  }
+
+  .sidebar-footer-export .sidebar-export-trigger-btn,
+  .sidebar-footer-export .sidebar-export-trigger-btn-wrap,
+  .sidebar-export-trigger-btn-wrap {
+    width: 100%;
+  }
+
+  .sidebar-export-dropdown-menu {
+    width: 268px;
+  }
+
+  .sidebar-export-trigger-btn img {
+    margin-right: 4px;
+  }
+
+  .export-credits-hint {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    padding: 0;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    color: #ff7c23;
+    margin-left: 10px;
+    white-space: nowrap;
+  }
+
+  .export-credits-hint-value {
+    color: white;
+    font-size: 13px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .export-overlay-menu,
+  .fab-menu-content {
+    padding: 4px;
+  }
+
+  .export-overlay-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 120ms ease;
+    user-select: none;
+  }
+
+  .export-overlay-item:hover {
+    background: var(--bg-soft);
+  }
+
+  .export-overlay-item-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background: #cbd5e1;
+    display: inline-block;
+    flex: 0 0 auto;
+  }
+
+  .export-overlay-item-icon--svg {
+    background: linear-gradient(180deg, #94a3b8, #64748b);
+  }
+
+  .export-overlay-item-icon--studio {
+    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
+  }
+
+  .workspace.panel-right .panel-sidebar {
+    border-left: 1px solid var(--border-default);
+  }
+
+  .workspace.panel-left .panel-sidebar {
+    border-right: 1px solid var(--border-default);
+  }
+
+  .template-export-modal {
+    display: grid;
+    gap: 16px;
+  }
+
+ 
+
+  .template-export-groups {
+    display: grid;
+    gap: 12px;
+    max-height: 360px;
+    overflow: auto;
+  }
+
+  .template-export-group {
+    display: grid;
+    gap: 10px;
+    padding: 14px 16px;
+    border: 1px solid var(--border-default);
+    border-radius: 12px;
+    background: #ffffff;
+  }
+
+  .template-export-group-title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .template-export-field-list {
+    display: grid;
+    gap: 10px;
+  }
+
+  .template-export-field {
+    display: grid;
+    gap: 4px;
+  }
+
+  .template-export-field-path {
+    padding-left: 28px;
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .template-export-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 8px 24px;
+  }
+`;
+const WORKBENCH_VUE_TEMPLATE = `
   <div class="shell">
-    <header class="topbar">
-      <div class="logo-area" data-role="logo-area"></div>
-      <div class="topbar-actions">
-        <button class="secondary" data-role="import-template">导入模板</button>
-        <button class="secondary" data-role="export-template">生成模板</button>
-        <div class="auth-area" data-role="auth-area">
-          <button data-role="login">登录</button>
-          <button class="avatar-button" data-role="avatar-button" aria-expanded="false">
-            <img class="avatar-image" data-role="avatar-image" alt="User avatar" />
-          </button>
-          <div class="avatar-menu" data-role="avatar-menu">
-            <button class="secondary" data-role="logout">退出登录</button>
+    <header v-if="state.shellMode !== 'template'" class="topbar app-topbar">
+      <div class="logo-area app-topbar-main" data-role="logo-area">
+        <img
+          :src="state.logoSrc"
+          :alt="state.logoText || 'Atomm'"
+          class="brand-logo"
+          data-role="brand-logo"
+          draggable="false"
+        />
+        <div class="app-topbar-nav">
+          <xt-button
+            v-show="state.templateEnabled"
+            type="secondary"
+            size="small"
+            data-role="import-template"
+            @click="callbacks.onImportTemplate()"
+          >导入模板</xt-button>
+          <xt-button
+            v-show="state.templateEnabled"
+            type="secondary"
+            size="small"
+            data-role="export-template"
+            @click="callbacks.onExportTemplate()"
+          >生成模板</xt-button>
+        </div>
+      </div>
+      <div class="app-topbar-auth">
+        <div
+          v-if="state.isLogin"
+          class="topbar-credits-badge"
+          data-role="topbar-credits"
+          title="Remaining credits"
+        >
+          <img src="${CREDIT_ICON_DATA_URI}" alt="" class="credits-token-icon" draggable="false" />
+          <span class="topbar-credits-value" data-role="topbar-credits-value">{{ state.creditsBalance }}</span>
+        </div>
+
+        <div
+          v-if="state.isLogin && state.avatarMenuTrigger === 'hover'"
+          class="auth-hover-card"
+        >
+          <div class="auth-avatar-trigger" data-role="avatar-button" tabindex="0">
+            <div class="auth-avatar">
+              <img
+                v-if="state.avatarSrc"
+                :src="state.avatarSrc"
+                alt="Avatar"
+                data-role="avatar-image"
+              />
+              <span v-else data-role="avatar-image">{{ state.avatarText }}</span>
+            </div>
+          </div>
+          <div class="auth-hover-panel">
+            <div class="auth-popover-body" data-role="avatar-menu">
+              <div class="auth-popover-header">
+                <div class="auth-avatar auth-avatar--lg">
+                  <img v-if="state.avatarSrc" :src="state.avatarSrc" alt="Avatar" />
+                  <span v-else>{{ state.avatarText }}</span>
+                </div>
+                <div class="auth-popover-user-text">
+                  <span class="auth-popover-name">{{ state.authDisplayName }}</span>
+                  <span class="auth-popover-sub">{{ state.authSubline }}</span>
+                </div>
+              </div>
+              <div class="auth-popover-divider"></div>
+              <div class="auth-popover-action" data-role="logout" @click="callbacks.onLogout()">
+                Logout
+              </div>
+            </div>
           </div>
         </div>
+
+        <xt-dropdown-menu
+          v-else-if="state.isLogin"
+          trigger="click"
+          :portal-disabled="true"
+          placement="bottomRight"
+        >
+          <template #trigger>
+            <div class="auth-avatar-trigger" data-role="avatar-button">
+              <div class="auth-avatar">
+                <img
+                  v-if="state.avatarSrc"
+                  :src="state.avatarSrc"
+                  alt="Avatar"
+                  data-role="avatar-image"
+                />
+                <span v-else data-role="avatar-image">{{ state.avatarText }}</span>
+              </div>
+            </div>
+          </template>
+          <template #overlay>
+            <div class="auth-popover-body" data-role="avatar-menu">
+              <div class="auth-popover-header">
+                <div class="auth-avatar auth-avatar--lg">
+                  <img v-if="state.avatarSrc" :src="state.avatarSrc" alt="Avatar" />
+                  <span v-else>{{ state.avatarText }}</span>
+                </div>
+                <div class="auth-popover-user-text">
+                  <span class="auth-popover-name">{{ state.authDisplayName }}</span>
+                  <span class="auth-popover-sub">{{ state.authSubline }}</span>
+                </div>
+              </div>
+              <div class="auth-popover-divider"></div>
+              <div class="auth-popover-action" data-role="logout" @click="callbacks.onLogout()">
+                Logout
+              </div>
+            </div>
+          </template>
+        </xt-dropdown-menu>
+
+        <xt-button
+          size="small"
+          type="secondary"
+          data-role="login"
+          :loading="state.loginLoading"
+          v-if="!state.isLogin"
+          @click="callbacks.onLogin()"
+        >Login</xt-button>
       </div>
     </header>
-    <div class="workspace" data-role="workspace">
+
+    <div
+      class="workspace"
+      :class="state.panelTarget === 'left' ? 'panel-left' : 'panel-right'"
+      data-role="workspace"
+    >
       <main class="canvas-host" data-role="canvas-host"></main>
       <aside class="panel-sidebar" data-role="panel-sidebar">
         <div class="panel-host" data-role="panel-host"></div>
-        <div class="panel-actions" data-role="panel-actions">
-          <div class="fab">
-            <div class="fab-menu" data-role="fab-menu">
-              <button class="secondary" data-role="open-in-studio">导入 Studio</button>
-              <button class="secondary" data-role="export-svg">导出 SVG</button>
-            </div>
-            <button data-role="fab-trigger" aria-expanded="false">导出</button>
-          </div>
+        <div id="sidebar-footer" class="sidebar-footer-export panel-actions" data-role="panel-actions">
+          <xt-dropdown-menu
+            trigger="click"
+            :portal-disabled="true"
+            placement="topLeft"
+            domTriggerClass="sidebar-export-trigger-btn-wrap"
+            :show-trigger-icon="false"
+            domContentClass="sidebar-export-dropdown-menu"
+          >
+            <template #trigger>
+              <xt-button class="sidebar-export-trigger-btn" block data-role="fab-trigger">
+                <template #icon>
+                  <img
+                    src="${EXPORT_ICON_DATA_URI}"
+                    alt=""
+                    width="16"
+                    height="16"
+                    draggable="false"
+                  />
+                </template>
+                Export SVG
+                <template #append-icon>
+                  <div v-if="state.isLogin" class="export-credits-hint">
+                    <img src="${CREDIT_ICON_DATA_URI}" alt="" class="credits-token-icon credits-token-icon--sm" draggable="false" />
+                    <span class="export-credits-hint-value" data-role="export-credits-value">{{ state.exportCreditsCost }}</span>
+                  </div>
+                </template>
+              </xt-button>
+            </template>
+            <template #overlay>
+              <div class="export-overlay-menu fab-menu-content" data-role="fab-menu">
+                <div
+                  v-show="state.exportEnabled"
+                  class="export-overlay-item"
+                  data-role="export-svg"
+                  @click="callbacks.onExportSvg()"
+                >
+                  <span class="export-overlay-item-icon export-overlay-item-icon--svg"></span>
+                  Export SVG
+                </div>
+                <div
+                  v-show="state.studioEnabled"
+                  class="export-overlay-item"
+                  data-role="open-in-studio"
+                  @click="callbacks.onOpenInStudio()"
+                >
+                  <span class="export-overlay-item-icon export-overlay-item-icon--studio"></span>
+                  Open in Studio
+                </div>
+              </div>
+            </template>
+          </xt-dropdown-menu>
         </div>
       </aside>
     </div>
-    <input data-role="template-file-input" type="file" accept="application/json" hidden />
+
+    <input
+      data-role="template-file-input"
+      type="file"
+      accept="application/json"
+      style="display:none"
+      @change="callbacks.onFileChange($event)"
+    />
+
+    <xt-modal
+      :model-value="state.templateDialogOpen"
+      title="发布模板"
+      :show-footer="false"
+      :portal-disabled="true"
+      @update:model-value="callbacks.onToggleTemplateDialog($event)"
+    >
+      <div
+        v-if="state.templateDialogOpen"
+        class="template-export-modal"
+        data-role="template-export-modal"
+      >
+ 
+        <div class="template-export-groups">
+          <div
+            v-for="group in state.templateFieldGroups"
+            :key="group.id"
+            class="template-export-group"
+          >
+            <div class="template-export-group-title">{{ group.title }}</div>
+            <div class="template-export-field-list">
+              <div
+                v-for="field in group.fields"
+                :key="field.path"
+                class="template-export-field"
+                data-role="template-export-field"
+              >
+                <xt-checkbox
+                  :model-value="state.templateSelectedFieldPaths.includes(field.path)"
+                  :disabled="state.templateExportLoading"
+                  @update:model-value="callbacks.onToggleTemplateField(field.path, $event)"
+                >{{ field.label }}</xt-checkbox>
+                <div class="template-export-field-path">{{ field.path }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="template-export-footer">
+          <xt-button
+            type="secondary"
+            :disabled="state.templateExportLoading"
+            @click="callbacks.onCloseTemplateDialog()"
+          >取消</xt-button>
+          <xt-button
+            type="primary"
+            data-role="template-export-confirm"
+            :loading="state.templateExportLoading"
+            :disabled="state.templateSelectedFieldPaths.length === 0"
+            @click="callbacks.onConfirmTemplateExport()"
+          >发布模板</xt-button>
+        </div>
+      </div>
+    </xt-modal>
   </div>
 `;
-function renderWorkbenchShell(root, _config) {
-  root.innerHTML = WORKBENCH_TEMPLATE;
-  return collectWorkbenchRefs(root);
+function requireVue() {
+  const Vue = globalThis.Vue;
+  if (!Vue || typeof Vue.createApp !== "function") {
+    throw new Error(
+      '[generator-workbench] Vue 3 is required. Load it via CDN: <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>'
+    );
+  }
+  return Vue;
+}
+function injectStyles(root, cdnCssUrl) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = cdnCssUrl || ATOMM_UI_CDN_CSS_URL;
+  root.appendChild(link);
+  const style = document.createElement("style");
+  style.textContent = WORKBENCH_SHELL_STYLES;
+  root.appendChild(style);
+}
+function stateFromConfig(vue, config) {
+  return vue.reactive({
+    shellMode: config.mode || "full",
+    logoText: config.logoText || config.title,
+    logoSrc: config.logoUrl || "https://storage-us.atomm.com/resource/xart/static/agent/imgs/atomm-logo.svg",
+    panelTarget: config.panelTarget || "right",
+    avatarMenuTrigger: config.avatarMenuTrigger || "hover",
+    templateEnabled: config.templateEnabled !== false,
+    exportEnabled: config.exportEnabled !== false,
+    studioEnabled: config.studioEnabled !== false,
+    isLogin: false,
+    avatarSrc: "",
+    avatarText: "U",
+    authDisplayName: "",
+    authSubline: "",
+    creditsBalance: 0,
+    exportCreditsCost: 1,
+    loginLoading: false,
+    templateDialogOpen: false,
+    templateExportLoading: false,
+    templateSelectedFieldPaths: [],
+    templateFieldGroups: []
+  });
+}
+function createNoopCallbacks() {
+  return {
+    onLogin: () => {
+    },
+    onLogout: () => {
+    },
+    onImportTemplate: () => {
+    },
+    onExportTemplate: () => {
+    },
+    onCloseTemplateDialog: () => {
+    },
+    onToggleTemplateDialog: () => {
+    },
+    onToggleTemplateField: () => {
+    },
+    onConfirmTemplateExport: () => {
+    },
+    onExportSvg: () => {
+    },
+    onOpenInStudio: () => {
+    },
+    onFileChange: () => {
+    }
+  };
+}
+function registerFallbackComponents(app) {
+  app.component("xt-button", {
+    inheritAttrs: true,
+    template: '<button v-bind="$attrs"><slot name="icon" /><slot /><slot name="append-icon" /></button>'
+  });
+  app.component("xt-avatar", {
+    inheritAttrs: true,
+    template: '<span v-bind="$attrs"><slot /></span>'
+  });
+  app.component("xt-dropdown-menu", {
+    inheritAttrs: true,
+    template: '<div v-bind="$attrs"><slot name="trigger" /><slot name="overlay" /><slot /></div>'
+  });
+  app.component("xt-hover-card", {
+    inheritAttrs: true,
+    template: '<div v-bind="$attrs"><slot name="trigger" /><slot name="content" /></div>'
+  });
+  app.component("xt-modal", {
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: Boolean, default: false },
+      title: { type: String, default: "" }
+    },
+    emits: ["update:modelValue"],
+    template: `
+      <div v-if="modelValue" v-bind="$attrs">
+        <div>{{ title }}</div>
+        <slot />
+      </div>
+    `
+  });
+  app.component("xt-checkbox", {
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: Boolean, default: false },
+      label: { type: String, default: "" },
+      disabled: { type: Boolean, default: false }
+    },
+    emits: ["update:modelValue", "change"],
+    template: `
+      <label v-bind="$attrs">
+        <input
+          type="checkbox"
+          :checked="modelValue"
+          :disabled="disabled"
+          @change="$emit('update:modelValue', $event.target.checked)"
+        />
+        <span><slot>{{ label }}</slot></span>
+      </label>
+    `
+  });
+}
+function renderWorkbenchShell(root, config) {
+  const vue = requireVue();
+  ensureBrowserProcessEnv();
+  injectStyles(root, config.atommUiCssUrl);
+  const state = stateFromConfig(vue, config);
+  const callbacks = createNoopCallbacks();
+  const container = document.createElement("div");
+  container.setAttribute("data-workbench-vue-root", "");
+  root.appendChild(container);
+  const AtommUI = globalThis.AtommUI;
+  const app = vue.createApp({
+    setup() {
+      return { state, callbacks };
+    },
+    template: WORKBENCH_VUE_TEMPLATE
+  });
+  if (AtommUI) {
+    app.use(AtommUI);
+  } else {
+    registerFallbackComponents(app);
+  }
+  app.mount(container);
+  const refs = collectWorkbenchRefs(root);
+  return { state, callbacks, app, refs };
+}
+function unmountWorkbenchShell(context) {
+  context.app.unmount();
 }
 const DEFAULT_CONFIG = {
   title: "",
+  mode: "full",
   templateEnabled: true,
   exportEnabled: true,
   studioEnabled: true,
@@ -453,6 +1125,7 @@ const DEFAULT_CONFIG = {
   panelTarget: "right",
   avatarMenuTrigger: "hover"
 };
+const TOKEN_STORAGE_KEY_PREFIX = "__atomm_sdk_token__";
 function normalizeWorkbenchConfig(config) {
   return {
     ...DEFAULT_CONFIG,
@@ -465,14 +1138,16 @@ class GeneratorWorkbenchElement extends HTMLElement {
     __publicField(this, "_sdk", null);
     __publicField(this, "_runtime", null);
     __publicField(this, "_config", { ...DEFAULT_CONFIG });
-    __publicField(this, "_refs", null);
     __publicField(this, "_mounted", false);
     __publicField(this, "_state", createInitialWorkbenchState());
     __publicField(this, "_cleanupAuth");
+    __publicField(this, "_cleanupCredits");
+    __publicField(this, "_cleanupBilling");
     __publicField(this, "_authController");
     __publicField(this, "_templateController");
     __publicField(this, "_exportController");
     __publicField(this, "_runtimeController");
+    __publicField(this, "_shellContext");
     this.attachShadow({ mode: "open" });
   }
   get sdk() {
@@ -520,11 +1195,13 @@ class GeneratorWorkbenchElement extends HTMLElement {
     }
     this.render();
     this.bindControllers();
-    this.bindShellEvents();
+    this.bindShellCallbacks();
     this.bindAuthState();
-    await ((_a = this._runtimeController) == null ? void 0 : _a.mountCanvas(this.requireRefs().canvasHost));
+    await this.syncBillingState();
+    const refs = this.requireRefs();
+    await ((_a = this._runtimeController) == null ? void 0 : _a.mountCanvas(refs.canvasHost));
     await ((_b = this._runtimeController) == null ? void 0 : _b.mountPanel(
-      this.requireRefs().panelHost,
+      refs.panelHost,
       this._state.activePanelFilter
     ));
     this._mounted = true;
@@ -534,10 +1211,18 @@ class GeneratorWorkbenchElement extends HTMLElement {
     });
   }
   async unmount() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     (_a = this._cleanupAuth) == null ? void 0 : _a.call(this);
     this._cleanupAuth = void 0;
-    await ((_b = this._runtimeController) == null ? void 0 : _b.unmountAll());
+    (_b = this._cleanupCredits) == null ? void 0 : _b.call(this);
+    this._cleanupCredits = void 0;
+    (_c = this._cleanupBilling) == null ? void 0 : _c.call(this);
+    this._cleanupBilling = void 0;
+    await ((_d = this._runtimeController) == null ? void 0 : _d.unmountAll());
+    if (this._shellContext) {
+      unmountWorkbenchShell(this._shellContext);
+      this._shellContext = void 0;
+    }
     this._mounted = false;
   }
   refreshLayout() {
@@ -546,9 +1231,10 @@ class GeneratorWorkbenchElement extends HTMLElement {
     try {
       const result = await this.requireTemplateController().importTemplate(file);
       this._state.activePanelFilter = result.panelFilter;
-      if (this._runtimeController && this._refs) {
+      const refs = this.requireRefs();
+      if (this._runtimeController) {
         await this._runtimeController.remountPanel(
-          this._refs.panelHost,
+          refs.panelHost,
           result.panelFilter
         );
       }
@@ -558,11 +1244,28 @@ class GeneratorWorkbenchElement extends HTMLElement {
     }
   }
   async exportTemplate() {
+    return this.exportTemplateWithFields();
+  }
+  async exportTemplateWithFields(selectedFieldPaths) {
     try {
-      const result = await this.requireTemplateController().exportTemplate();
+      this._state.busy.exportTemplate = true;
+      if (this._shellContext) {
+        this._shellContext.state.templateExportLoading = true;
+      }
+      const result = await this.requireTemplateController().exportTemplate(
+        selectedFieldPaths
+      );
       dispatchWorkbenchEvent(this, "template-exported", result);
+      if (selectedFieldPaths) {
+        this.closeTemplateExportDialog();
+      }
     } catch (error) {
       this.handleError("template", error);
+    } finally {
+      this._state.busy.exportTemplate = false;
+      if (this._shellContext) {
+        this._shellContext.state.templateExportLoading = false;
+      }
     }
   }
   async exportSvg() {
@@ -581,11 +1284,37 @@ class GeneratorWorkbenchElement extends HTMLElement {
       this.handleError("export", error);
     }
   }
+  async setAuthToken(token) {
+    var _a, _b;
+    const normalizedToken = token.trim();
+    if (!normalizedToken) {
+      throw new Error("[generator-workbench] token is required");
+    }
+    if (!this._sdk) {
+      throw new Error("[generator-workbench] sdk is required before setAuthToken()");
+    }
+    const appKey = (_b = (_a = this._sdk).getAppKey) == null ? void 0 : _b.call(_a);
+    if (!appKey) {
+      throw new Error("[generator-workbench] sdk.getAppKey() is required for setAuthToken()");
+    }
+    if (typeof this._sdk.auth.syncToken !== "function") {
+      throw new Error("[generator-workbench] sdk.auth.syncToken() is required for setAuthToken()");
+    }
+    try {
+      localStorage.setItem(`${TOKEN_STORAGE_KEY_PREFIX}${appKey}`, normalizedToken);
+    } catch {
+    }
+    await this._sdk.auth.syncToken(normalizedToken);
+  }
   render() {
     if (!this.shadowRoot) return;
-    this._refs = renderWorkbenchShell(this.shadowRoot, this._config);
-    applyWorkbenchConfig(this._refs, this._config);
+    if (this._shellContext) {
+      unmountWorkbenchShell(this._shellContext);
+      this.shadowRoot.innerHTML = "";
+    }
+    this._shellContext = renderWorkbenchShell(this.shadowRoot, this._config);
     this.syncAuthUI();
+    this.syncBillingUI();
   }
   bindControllers() {
     if (!this._sdk || !this._runtime) return;
@@ -605,47 +1334,86 @@ class GeneratorWorkbenchElement extends HTMLElement {
       runtime: this._runtime
     });
   }
-  bindShellEvents() {
-    const refs = this.requireRefs();
-    refs.loginBtn.addEventListener("click", () => {
+  bindShellCallbacks() {
+    if (!this._shellContext) return;
+    const { callbacks } = this._shellContext;
+    callbacks.onLogin = () => {
       void this.handleLogin();
-    });
-    refs.logoutBtn.addEventListener("click", () => {
+    };
+    callbacks.onLogout = () => {
       void this.handleLogout();
-    });
-    refs.importTemplateBtn.addEventListener("click", () => {
-      refs.templateFileInput.click();
-    });
-    refs.exportTemplateBtn.addEventListener("click", () => {
-      void this.exportTemplate();
-    });
-    refs.templateFileInput.addEventListener("change", () => {
+    };
+    callbacks.onImportTemplate = () => {
+      this.requireRefs().templateFileInput.click();
+    };
+    callbacks.onExportTemplate = () => {
+      this.openTemplateExportDialog();
+    };
+    callbacks.onCloseTemplateDialog = () => {
+      this.closeTemplateExportDialog();
+    };
+    callbacks.onToggleTemplateDialog = (open) => {
+      if (!open) {
+        this.closeTemplateExportDialog();
+      }
+    };
+    callbacks.onToggleTemplateField = (path, checked) => {
+      this.toggleTemplateExportField(path, checked);
+    };
+    callbacks.onConfirmTemplateExport = () => {
       var _a;
-      const file = (_a = refs.templateFileInput.files) == null ? void 0 : _a[0];
-      if (!file) return;
-      void this.importTemplate(file);
-      refs.templateFileInput.value = "";
-    });
-    refs.fabTrigger.addEventListener("click", () => {
-      this.toggleFabMenu();
-    });
-    refs.exportSvgBtn.addEventListener("click", () => {
+      void this.exportTemplateWithFields(
+        ((_a = this._shellContext) == null ? void 0 : _a.state.templateSelectedFieldPaths) || []
+      );
+    };
+    callbacks.onExportSvg = () => {
       void this.exportSvg();
-    });
-    refs.openInStudioBtn.addEventListener("click", () => {
+    };
+    callbacks.onOpenInStudio = () => {
       void this.openInStudio();
-    });
-    refs.avatarButton.addEventListener("click", () => {
-      this.toggleAvatarMenu();
-    });
-    if (this._config.avatarMenuTrigger === "hover") {
-      refs.avatarButton.addEventListener("mouseenter", () => {
-        this.setAvatarMenuOpen(true);
-      });
-      refs.avatarMenu.addEventListener("mouseleave", () => {
-        this.setAvatarMenuOpen(false);
-      });
+    };
+    callbacks.onFileChange = (event) => {
+      var _a;
+      const input = event.target;
+      const file = (_a = input.files) == null ? void 0 : _a[0];
+      if (!file) return;
+      void this.importTemplate(file);
+      input.value = "";
+    };
+  }
+  openTemplateExportDialog() {
+    try {
+      if (!this._shellContext) return;
+      const prepared = this.requireTemplateController().prepareTemplateExport();
+      this._shellContext.state.templateFieldGroups = prepared.fieldGroups.map(
+        (group) => ({
+          ...group,
+          fields: group.fields.map((field) => ({ ...field }))
+        })
+      );
+      this._shellContext.state.templateSelectedFieldPaths = [
+        ...prepared.selectedFieldPaths
+      ];
+      this._shellContext.state.templateDialogOpen = true;
+    } catch (error) {
+      this.handleError("template", error);
+    }
+  }
+  closeTemplateExportDialog() {
+    if (!this._shellContext) return;
+    this._shellContext.state.templateDialogOpen = false;
+    this._shellContext.state.templateFieldGroups = [];
+    this._shellContext.state.templateSelectedFieldPaths = [];
+  }
+  toggleTemplateExportField(path, checked) {
+    if (!this._shellContext) return;
+    const selected = new Set(this._shellContext.state.templateSelectedFieldPaths);
+    if (checked) {
+      selected.add(path);
+    } else {
+      selected.delete(path);
     }
+    this._shellContext.state.templateSelectedFieldPaths = Array.from(selected);
   }
   bindAuthState() {
     var _a;
@@ -654,52 +1422,111 @@ class GeneratorWorkbenchElement extends HTMLElement {
     this._cleanupAuth = controller.subscribe((status) => {
       this._state.authStatus = status;
       this.syncAuthUI();
+      void this.syncBillingState(status);
       dispatchWorkbenchEvent(this, "auth-change", status);
     });
+    this.bindBillingSubscriptions();
+  }
+  bindBillingSubscriptions() {
+    var _a, _b, _c, _d;
+    (_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;
+    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;
+    if (typeof (billingModule == null ? void 0 : billingModule.onChange) === "function") {
+      this._cleanupBilling = billingModule.onChange((usage) => {
+        this.applyBillingUsage(usage);
+      });
+    }
   }
   syncAuthUI() {
-    if (!this._refs) return;
-    const { loginBtn, avatarButton, avatarImage } = this._refs;
+    var _a, _b, _c, _d;
+    if (!this._shellContext) return;
+    const { state } = this._shellContext;
     const { isLogin, userInfo } = this._state.authStatus;
-    loginBtn.style.display = isLogin ? "none" : "";
-    avatarButton.style.display = isLogin ? "inline-flex" : "none";
-    avatarImage.src = isLogin ? (userInfo == null ? void 0 : userInfo.headpic) || "" : "";
-    if (!isLogin) {
-      this.setAvatarMenuOpen(false);
-    }
-  }
-  toggleFabMenu() {
-    this._state.menu.fabOpen = !this._state.menu.fabOpen;
-    this.syncMenuUI();
-  }
-  toggleAvatarMenu() {
-    this.setAvatarMenuOpen(!this._state.menu.avatarOpen);
-  }
-  setAvatarMenuOpen(open) {
-    this._state.menu.avatarOpen = open;
-    this.syncMenuUI();
-  }
-  syncMenuUI() {
-    if (!this._refs) return;
-    this._refs.avatarMenu.classList.toggle("is-open", this._state.menu.avatarOpen);
-    this._refs.fabMenu.classList.toggle("is-open", this._state.menu.fabOpen);
-    this._refs.avatarButton.setAttribute(
-      "aria-expanded",
-      String(this._state.menu.avatarOpen)
-    );
-    this._refs.fabTrigger.setAttribute(
-      "aria-expanded",
-      String(this._state.menu.fabOpen)
-    );
+    const displayName = ((_a = userInfo == null ? void 0 : userInfo.userName) == null ? void 0 : _a.trim()) || ((_b = userInfo == null ? void 0 : userInfo.email) == null ? void 0 : _b.trim()) || ((_c = userInfo == null ? void 0 : userInfo.phoneNumber) == null ? void 0 : _c.trim()) || "";
+    const avatarText = displayName ? displayName.charAt(0).toUpperCase() : "U";
+    const authSubline = ((_d = userInfo == null ? void 0 : userInfo.email) == null ? void 0 : _d.trim()) || ((userInfo == null ? void 0 : userInfo.phoneNumber) ? `${userInfo.phoneZone || ""}${userInfo.phoneNumber}` : "Connected to Generator SDK");
+    state.isLogin = isLogin;
+    state.avatarSrc = isLogin ? (userInfo == null ? void 0 : userInfo.headpic) || "" : "";
+    state.avatarText = avatarText;
+    state.authDisplayName = displayName;
+    state.authSubline = isLogin ? authSubline : "";
+  }
+  syncBillingUI() {
+    if (!this._shellContext) return;
+    const { state } = this._shellContext;
+    const usage = this._state.billingUsage;
+    state.creditsBalance = this._state.creditsBalance;
+    state.exportCreditsCost = (usage == null ? void 0 : usage.creditsPerUse) ?? (usage && "unitPrice" in usage ? Number(usage.unitPrice) || 1 : 1);
+  }
+  applyBillingUsage(usage) {
+    this._state.billingUsage = usage || null;
+    if (usage && typeof usage.creditsBalance === "number") {
+      this._state.creditsBalance = usage.creditsBalance;
+    }
+    this.syncBillingUI();
+  }
+  resetBillingState() {
+    this._state.creditsBalance = 0;
+    this._state.billingUsage = null;
+    this.syncBillingUI();
+  }
+  async syncBillingState(status = this._state.authStatus) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!status.isLogin || !this._sdk) {
+      this.resetBillingState();
+      return;
+    }
+    const cachedBalance = (_b = (_a = this._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);
+    if (cachedUsage) {
+      this.applyBillingUsage(cachedUsage);
+    } else {
+      this.syncBillingUI();
+    }
+    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)
+      ]);
+      if (typeof (creditsResult == null ? void 0 : creditsResult.quota) === "number") {
+        this._state.creditsBalance = creditsResult.quota;
+      }
+      if (usage) {
+        this.applyBillingUsage(usage);
+        return;
+      }
+      this.syncBillingUI();
+    } catch (error) {
+      this.handleError("auth", error);
+    }
   }
   async handleLogin() {
     try {
       this._state.busy.login = true;
+      if (this._shellContext) {
+        this._shellContext.state.loginLoading = true;
+      }
       await this.requireAuthController().login();
     } catch (error) {
       this.handleError("auth", error);
     } finally {
       this._state.busy.login = false;
+      if (this._shellContext) {
+        this._shellContext.state.loginLoading = false;
+      }
     }
   }
   async handleLogout() {
@@ -719,10 +1546,10 @@ class GeneratorWorkbenchElement extends HTMLElement {
     });
   }
   requireRefs() {
-    if (!this._refs) {
-      throw new Error("[generator-workbench] refs are not ready");
+    if (!this._shellContext) {
+      throw new Error("[generator-workbench] shell context is not ready");
     }
-    return this._refs;
+    return this._shellContext.refs;
   }
   requireAuthController() {
     if (!this._authController) {