@atomm-developer/generator-workbench 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+# Generator Workbench
+
+`generator-workbench` is the unified host shell for generators built on top of `generator-sdk` and the generator runtime contract.
+
+V1 provides:
+
+- Web Component shell
+- login / avatar / logout entry
+- local template import / export entry
+- floating export actions
+- runtime panel / canvas mounting
+
+## Install
+
+```bash
+pnpm add @atomm-developer/generator-sdk
+pnpm add @atomm-developer/generator-workbench
+```
+
+## CDN
+
+```html
+<script src="https://static-res.atomm.com/scripts/js/generator-sdk/index.umd.js"></script>
+<script src="https://static-res.atomm.com/scripts/js/generator-workbench/index.umd.js"></script>
+```
+
+## Usage
+
+```html
+<generator-workbench id="workbench"></generator-workbench>
+```
+
+```js
+GeneratorWorkbench.defineGeneratorWorkbench()
+
+const workbench = document.getElementById('workbench')
+workbench.sdk = sdk
+workbench.runtime = runtime
+workbench.config = {
+  title: 'My Generator',
+  templateEnabled: true,
+  exportEnabled: true,
+  studioEnabled: true,
+}
+
+await workbench.mount()
+```
+
+## Local Preview
+
+```bash
+pnpm --dir generator-workbench dev
+```
+
+Then open `http://127.0.0.1:5173/examples/basic/`.

package/dist/index.d.ts

@@ -0,0 +1,164 @@
+import { AuthStatus } from '@atomm-developer/generator-sdk';
+import { ExportDownloadResult } from '@atomm-developer/generator-sdk';
+import { ExportOpenInStudioResult } from '@atomm-developer/generator-sdk';
+import { GeneratorTemplateDefinition } from '@atomm-developer/generator-sdk';
+import { PanelFilter } from '@atomm-developer/generator-sdk';
+import { PanelSchema } from '@atomm-developer/generator-sdk';
+import { TemplateBuildOptions } from '@atomm-developer/generator-sdk';
+import { UserInfo } from '@atomm-developer/generator-sdk';
+
+export declare function defineGeneratorWorkbench(tagName?: string): typeof GeneratorWorkbenchElement;
+
+export declare const GENERATOR_WORKBENCH_TAG_NAME = "generator-workbench";
+
+export declare interface GeneratorRuntimeLike {
+    mount(options: {
+        mode: 'embed' | 'full';
+        target?: 'full' | 'canvas' | 'panel';
+        container: HTMLElement;
+        state?: Record<string, unknown>;
+        panelFilter?: PanelFilter;
+    }): Promise<{
+        unmount(): void;
+    }> | {
+        unmount(): void;
+    };
+    getState(): Record<string, unknown>;
+    setState(nextState: Record<string, unknown>, options?: Record<string, unknown>): Promise<void> | void;
+    patchState?(patch: Record<string, unknown>, options?: Record<string, unknown>): Promise<void> | void;
+    getPanelSchema(options?: {
+        panelFilter?: PanelFilter;
+    }): PanelSchema;
+    subscribe?(listener: (event: unknown) => void): () => void;
+}
+
+export declare interface GeneratorSDKLike {
+    auth: {
+        getStatus(): AuthStatus;
+        login(): Promise<UserInfo>;
+        logout(): Promise<void>;
+        onChange(callback: (status: AuthStatus) => void): () => void;
+    };
+    template: {
+        build(args: TemplateBuildOptions): GeneratorTemplateDefinition;
+        parse(text: string): GeneratorTemplateDefinition;
+        download(template: GeneratorTemplateDefinition, options?: {
+            fileName?: string;
+        }): void;
+        applyToRuntime(runtime: GeneratorRuntimeLike, template: GeneratorTemplateDefinition, options?: {
+            source?: string;
+            onPanelFilter?: (panelFilter: PanelFilter) => void | Promise<void>;
+        }): Promise<void>;
+    };
+    export: {
+        download(options?: {
+            format?: 'svg' | 'png' | 'jpeg' | 'webp';
+            fileName?: string;
+        }): Promise<ExportDownloadResult>;
+        openInStudio(options?: {
+            format?: 'svg' | 'png' | 'jpeg' | 'webp';
+        }): Promise<ExportOpenInStudioResult>;
+    };
+}
+
+export declare interface GeneratorWorkbenchActionHookContext {
+    sdk: GeneratorSDKLike;
+    runtime: GeneratorRuntimeLike;
+    element: GeneratorWorkbenchElement;
+}
+
+export declare interface GeneratorWorkbenchConfig {
+    title: string;
+    logoText?: string;
+    logoUrl?: string;
+    logoHref?: string;
+    templateEnabled?: boolean;
+    exportEnabled?: boolean;
+    studioEnabled?: boolean;
+    autoMount?: boolean;
+    panelTarget?: 'left' | 'right';
+    avatarMenuTrigger?: 'hover' | 'click';
+    runtimePanelFilter?: PanelFilter;
+    getTemplateMeta?: () => Record<string, unknown>;
+    getTemplateFieldPaths?: (panelSchema: PanelSchema) => string[];
+    beforeExportSvg?: (context: GeneratorWorkbenchActionHookContext) => Promise<void> | void;
+    beforeOpenInStudio?: (context: GeneratorWorkbenchActionHookContext) => Promise<void> | void;
+    onError?: (error: Error, source: WorkbenchErrorSource) => void;
+}
+
+export declare class GeneratorWorkbenchElement extends HTMLElement {
+    private _sdk;
+    private _runtime;
+    private _config;
+    private _refs;
+    private _mounted;
+    private _state;
+    private _cleanupAuth?;
+    private _authController?;
+    private _templateController?;
+    private _exportController?;
+    private _runtimeController?;
+    constructor();
+    get sdk(): GeneratorSDKLike | null;
+    set sdk(value: GeneratorSDKLike | null);
+    get runtime(): GeneratorRuntimeLike | null;
+    set runtime(value: GeneratorRuntimeLike | null);
+    get config(): GeneratorWorkbenchConfig;
+    set config(value: GeneratorWorkbenchConfig);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    mount(): Promise<void>;
+    unmount(): Promise<void>;
+    refreshLayout(): void;
+    importTemplate(file: File): Promise<void>;
+    exportTemplate(): Promise<void>;
+    exportSvg(): Promise<void>;
+    openInStudio(): Promise<void>;
+    private render;
+    private bindControllers;
+    private bindShellEvents;
+    private bindAuthState;
+    private syncAuthUI;
+    private toggleFabMenu;
+    private toggleAvatarMenu;
+    private setAvatarMenuOpen;
+    private syncMenuUI;
+    private handleLogin;
+    private handleLogout;
+    private handleError;
+    private requireRefs;
+    private requireAuthController;
+    private requireTemplateController;
+    private requireExportController;
+}
+
+export declare interface WorkbenchErrorDetail {
+    source: WorkbenchErrorSource;
+    error: Error;
+}
+
+export declare type WorkbenchErrorSource = 'auth' | 'template' | 'export' | 'runtime' | 'unknown';
+
+export declare interface WorkbenchEventMap {
+    'workbench-ready': WorkbenchReadyDetail;
+    'auth-change': AuthStatus;
+    'template-imported': {
+        template: GeneratorTemplateDefinition;
+        panelFilter?: PanelFilter;
+    };
+    'template-exported': {
+        template: GeneratorTemplateDefinition;
+    };
+    'svg-export': ExportDownloadResult;
+    'studio-open': ExportOpenInStudioResult;
+    'workbench-error': WorkbenchErrorDetail;
+}
+
+export declare type WorkbenchEventName = keyof WorkbenchEventMap;
+
+export declare interface WorkbenchReadyDetail {
+    sdk: GeneratorSDKLike;
+    runtime: GeneratorRuntimeLike;
+}
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,759 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function createAuthController(args) {
+  const { sdk } = args;
+  return {
+    getStatus() {
+      return sdk.auth.getStatus();
+    },
+    subscribe(listener) {
+      listener(sdk.auth.getStatus());
+      return sdk.auth.onChange(listener);
+    },
+    async login() {
+      await sdk.auth.login();
+    },
+    async logout() {
+      await sdk.auth.logout();
+    }
+  };
+}
+function createExportController(args) {
+  const { sdk, runtime, config, element } = args;
+  return {
+    async exportSvg() {
+      var _a;
+      await ((_a = config.beforeExportSvg) == null ? void 0 : _a.call(config, {
+        sdk,
+        runtime,
+        element
+      }));
+      return sdk.export.download({ format: "svg" });
+    },
+    async openInStudio() {
+      var _a;
+      await ((_a = config.beforeOpenInStudio) == null ? void 0 : _a.call(config, {
+        sdk,
+        runtime,
+        element
+      }));
+      return sdk.export.openInStudio({ format: "svg" });
+    }
+  };
+}
+function createRuntimeController(args) {
+  const { runtime } = args;
+  let canvasInstance = null;
+  let panelInstance = null;
+  async function mountCanvas(container) {
+    canvasInstance == null ? void 0 : canvasInstance.unmount();
+    canvasInstance = await Promise.resolve(
+      runtime.mount({
+        mode: "embed",
+        target: "canvas",
+        container
+      })
+    );
+  }
+  async function mountPanel(container, panelFilter) {
+    panelInstance == null ? void 0 : panelInstance.unmount();
+    panelInstance = await Promise.resolve(
+      runtime.mount({
+        mode: "embed",
+        target: "panel",
+        container,
+        panelFilter
+      })
+    );
+  }
+  return {
+    mountCanvas,
+    mountPanel,
+    async remountPanel(container, panelFilter) {
+      await mountPanel(container, panelFilter);
+    },
+    async unmountAll() {
+      canvasInstance == null ? void 0 : canvasInstance.unmount();
+      panelInstance == null ? void 0 : panelInstance.unmount();
+      canvasInstance = null;
+      panelInstance = null;
+    }
+  };
+}
+function assert(condition, message) {
+  if (!condition) {
+    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 resolveGeneratorId(panelSchema, state) {
+  var _a;
+  if ((_a = panelSchema.generatorId) == null ? void 0 : _a.trim()) {
+    return panelSchema.generatorId.trim();
+  }
+  const meta = state.meta;
+  if (meta && typeof meta === "object" && "generatorId" in meta && typeof meta.generatorId === "string" && meta.generatorId.trim()) {
+    return meta.generatorId.trim();
+  }
+  throw new Error(
+    "[generator-workbench] generatorId is required in panelSchema.generatorId or state.meta.generatorId"
+  );
+}
+function createTemplateController(args) {
+  const { sdk, runtime, config } = args;
+  return {
+    async importTemplate(file) {
+      const text = await file.text();
+      const template = sdk.template.parse(text);
+      let capturedPanelFilter;
+      await sdk.template.applyToRuntime(runtime, template, {
+        onPanelFilter(panelFilter) {
+          capturedPanelFilter = panelFilter;
+        }
+      });
+      return {
+        template,
+        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);
+      assert(
+        selectedFieldPaths.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)
+      });
+      sdk.template.download(template);
+      return { template };
+    }
+  };
+}
+function createInitialWorkbenchState() {
+  return {
+    authStatus: {
+      isLogin: false,
+      userInfo: null
+    },
+    busy: {
+      login: false,
+      importTemplate: false,
+      exportTemplate: false,
+      exportSvg: false,
+      openInStudio: false
+    },
+    menu: {
+      avatarOpen: false,
+      fabOpen: false
+    }
+  };
+}
+function dispatchWorkbenchEvent(target, name, detail) {
+  return target.dispatchEvent(
+    new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true
+    })
+  );
+}
+function queryRequired(root, selector) {
+  const node = root.querySelector(selector);
+  if (!node) {
+    throw new Error(
+      `[generator-workbench] required DOM node not found: ${selector}`
+    );
+  }
+  return node;
+}
+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"]'),
+    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"]'),
+    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;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .shell {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: #f5f7fb;
+    }
+
+    .topbar {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 0 16px;
+      background: #fff;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    .logo-area {
+      font-weight: 600;
+    }
+
+    .topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .workspace {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 320px;
+    }
+
+    .workspace.panel-left {
+      grid-template-columns: 320px minmax(0, 1fr);
+    }
+
+    .workspace.panel-right .canvas-host {
+      grid-column: 1;
+    }
+
+    .workspace.panel-right .panel-sidebar {
+      grid-column: 2;
+    }
+
+    .workspace.panel-left .panel-sidebar {
+      grid-column: 1;
+    }
+
+    .workspace.panel-left .canvas-host {
+      grid-column: 2;
+    }
+
+    .panel-sidebar {
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      background: #fff;
+    }
+
+    .panel-host {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+    }
+
+    .canvas-host {
+      position: relative;
+      min-height: 480px;
+      padding: 24px;
+      display: grid;
+      place-items: center;
+    }
+
+    button {
+      border: 0;
+      border-radius: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      background: #111827;
+      color: #fff;
+      font: inherit;
+    }
+
+    button.secondary {
+      background: #e5e7eb;
+      color: #111827;
+    }
+
+    button:focus-visible {
+      outline: 2px solid #4338ca;
+      outline-offset: 2px;
+    }
+
+    .auth-area {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar-button {
+      display: none;
+      align-items: center;
+      gap: 8px;
+      background: transparent;
+      color: #111827;
+      padding: 0;
+    }
+
+    .avatar-image {
+      width: 32px;
+      height: 32px;
+      border-radius: 999px;
+      object-fit: cover;
+      background: #e5e7eb;
+    }
+
+    .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);
+    }
+
+    .avatar-menu.is-open,
+    .fab-menu.is-open {
+      display: block;
+    }
+
+    .avatar-menu button,
+    .fab-menu button {
+      width: 100%;
+    }
+
+    .panel-actions {
+      padding: 12px;
+      border-top: 1px solid #e5e7eb;
+    }
+
+    .workspace.panel-right .panel-sidebar {
+      border-left: 1px solid #e5e7eb;
+    }
+
+    .workspace.panel-left .panel-sidebar {
+      border-right: 1px solid #e5e7eb;
+    }
+
+    .fab {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .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);
+    }
+
+    .fab-menu button + button {
+      margin-top: 8px;
+    }
+  </style>
+  <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>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="workspace" 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>
+      </aside>
+    </div>
+    <input data-role="template-file-input" type="file" accept="application/json" hidden />
+  </div>
+`;
+function renderWorkbenchShell(root, _config) {
+  root.innerHTML = WORKBENCH_TEMPLATE;
+  return collectWorkbenchRefs(root);
+}
+const DEFAULT_CONFIG = {
+  title: "",
+  templateEnabled: true,
+  exportEnabled: true,
+  studioEnabled: true,
+  autoMount: true,
+  panelTarget: "right",
+  avatarMenuTrigger: "hover"
+};
+function normalizeWorkbenchConfig(config) {
+  return {
+    ...DEFAULT_CONFIG,
+    ...config
+  };
+}
+class GeneratorWorkbenchElement extends HTMLElement {
+  constructor() {
+    super();
+    __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, "_authController");
+    __publicField(this, "_templateController");
+    __publicField(this, "_exportController");
+    __publicField(this, "_runtimeController");
+    this.attachShadow({ mode: "open" });
+  }
+  get sdk() {
+    return this._sdk;
+  }
+  set sdk(value) {
+    this._sdk = value;
+  }
+  get runtime() {
+    return this._runtime;
+  }
+  set runtime(value) {
+    this._runtime = value;
+  }
+  get config() {
+    return this._config;
+  }
+  set config(value) {
+    this._config = normalizeWorkbenchConfig(value);
+    if (this._mounted) {
+      this.render();
+    }
+  }
+  connectedCallback() {
+    if (this._config.autoMount !== false && !this._mounted && this._sdk && this._runtime) {
+      void this.mount();
+    }
+  }
+  disconnectedCallback() {
+    void this.unmount();
+  }
+  async mount() {
+    var _a, _b;
+    if (this._mounted) {
+      return;
+    }
+    if (!this.shadowRoot) {
+      throw new Error("[generator-workbench] shadowRoot is required");
+    }
+    if (!this._sdk) {
+      throw new Error("[generator-workbench] sdk is required before mount()");
+    }
+    if (!this._runtime) {
+      throw new Error("[generator-workbench] runtime is required before mount()");
+    }
+    this.render();
+    this.bindControllers();
+    this.bindShellEvents();
+    this.bindAuthState();
+    await ((_a = this._runtimeController) == null ? void 0 : _a.mountCanvas(this.requireRefs().canvasHost));
+    await ((_b = this._runtimeController) == null ? void 0 : _b.mountPanel(
+      this.requireRefs().panelHost,
+      this._state.activePanelFilter
+    ));
+    this._mounted = true;
+    dispatchWorkbenchEvent(this, "workbench-ready", {
+      sdk: this._sdk,
+      runtime: this._runtime
+    });
+  }
+  async unmount() {
+    var _a, _b;
+    (_a = this._cleanupAuth) == null ? void 0 : _a.call(this);
+    this._cleanupAuth = void 0;
+    await ((_b = this._runtimeController) == null ? void 0 : _b.unmountAll());
+    this._mounted = false;
+  }
+  refreshLayout() {
+  }
+  async importTemplate(file) {
+    try {
+      const result = await this.requireTemplateController().importTemplate(file);
+      this._state.activePanelFilter = result.panelFilter;
+      if (this._runtimeController && this._refs) {
+        await this._runtimeController.remountPanel(
+          this._refs.panelHost,
+          result.panelFilter
+        );
+      }
+      dispatchWorkbenchEvent(this, "template-imported", result);
+    } catch (error) {
+      this.handleError("template", error);
+    }
+  }
+  async exportTemplate() {
+    try {
+      const result = await this.requireTemplateController().exportTemplate();
+      dispatchWorkbenchEvent(this, "template-exported", result);
+    } catch (error) {
+      this.handleError("template", error);
+    }
+  }
+  async exportSvg() {
+    try {
+      const result = await this.requireExportController().exportSvg();
+      dispatchWorkbenchEvent(this, "svg-export", result);
+    } catch (error) {
+      this.handleError("export", error);
+    }
+  }
+  async openInStudio() {
+    try {
+      const result = await this.requireExportController().openInStudio();
+      dispatchWorkbenchEvent(this, "studio-open", result);
+    } catch (error) {
+      this.handleError("export", error);
+    }
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this._refs = renderWorkbenchShell(this.shadowRoot, this._config);
+    applyWorkbenchConfig(this._refs, this._config);
+    this.syncAuthUI();
+  }
+  bindControllers() {
+    if (!this._sdk || !this._runtime) return;
+    this._authController = createAuthController({ sdk: this._sdk });
+    this._templateController = createTemplateController({
+      sdk: this._sdk,
+      runtime: this._runtime,
+      config: this._config
+    });
+    this._exportController = createExportController({
+      sdk: this._sdk,
+      runtime: this._runtime,
+      config: this._config,
+      element: this
+    });
+    this._runtimeController = createRuntimeController({
+      runtime: this._runtime
+    });
+  }
+  bindShellEvents() {
+    const refs = this.requireRefs();
+    refs.loginBtn.addEventListener("click", () => {
+      void this.handleLogin();
+    });
+    refs.logoutBtn.addEventListener("click", () => {
+      void this.handleLogout();
+    });
+    refs.importTemplateBtn.addEventListener("click", () => {
+      refs.templateFileInput.click();
+    });
+    refs.exportTemplateBtn.addEventListener("click", () => {
+      void this.exportTemplate();
+    });
+    refs.templateFileInput.addEventListener("change", () => {
+      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.exportSvg();
+    });
+    refs.openInStudioBtn.addEventListener("click", () => {
+      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);
+      });
+    }
+  }
+  bindAuthState() {
+    var _a;
+    const controller = this.requireAuthController();
+    (_a = this._cleanupAuth) == null ? void 0 : _a.call(this);
+    this._cleanupAuth = controller.subscribe((status) => {
+      this._state.authStatus = status;
+      this.syncAuthUI();
+      dispatchWorkbenchEvent(this, "auth-change", status);
+    });
+  }
+  syncAuthUI() {
+    if (!this._refs) return;
+    const { loginBtn, avatarButton, avatarImage } = this._refs;
+    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)
+    );
+  }
+  async handleLogin() {
+    try {
+      this._state.busy.login = true;
+      await this.requireAuthController().login();
+    } catch (error) {
+      this.handleError("auth", error);
+    } finally {
+      this._state.busy.login = false;
+    }
+  }
+  async handleLogout() {
+    try {
+      await this.requireAuthController().logout();
+    } catch (error) {
+      this.handleError("auth", error);
+    }
+  }
+  handleError(source, error) {
+    var _a, _b;
+    const normalized = error instanceof Error ? error : new Error(String(error));
+    (_b = (_a = this._config).onError) == null ? void 0 : _b.call(_a, normalized, source);
+    dispatchWorkbenchEvent(this, "workbench-error", {
+      source,
+      error: normalized
+    });
+  }
+  requireRefs() {
+    if (!this._refs) {
+      throw new Error("[generator-workbench] refs are not ready");
+    }
+    return this._refs;
+  }
+  requireAuthController() {
+    if (!this._authController) {
+      throw new Error("[generator-workbench] auth controller is not ready");
+    }
+    return this._authController;
+  }
+  requireTemplateController() {
+    if (!this._templateController) {
+      throw new Error("[generator-workbench] template controller is not ready");
+    }
+    return this._templateController;
+  }
+  requireExportController() {
+    if (!this._exportController) {
+      throw new Error("[generator-workbench] export controller is not ready");
+    }
+    return this._exportController;
+  }
+}
+const GENERATOR_WORKBENCH_TAG_NAME = "generator-workbench";
+function defineGeneratorWorkbench(tagName = GENERATOR_WORKBENCH_TAG_NAME) {
+  const existing = customElements.get(tagName);
+  if (existing) {
+    return existing;
+  }
+  customElements.define(tagName, GeneratorWorkbenchElement);
+  return GeneratorWorkbenchElement;
+}
+export {
+  GENERATOR_WORKBENCH_TAG_NAME,
+  GeneratorWorkbenchElement,
+  defineGeneratorWorkbench
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).GeneratorWorkbench={})}(this,function(t){"use strict";var e=Object.defineProperty,n=(t,n,a)=>((t,n,a)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[n]=a)(t,"symbol"!=typeof n?n+"":n,a);function a(t,e){var n;if(null==(n=t.generatorId)?void 0:n.trim())return t.generatorId.trim();const a=e.meta;if(a&&"object"==typeof a&&"generatorId"in a&&"string"==typeof a.generatorId&&a.generatorId.trim())return a.generatorId.trim();throw new Error("[generator-workbench] generatorId is required in panelSchema.generatorId or state.meta.generatorId")}function r(t){const{sdk:e,runtime:n,config:r}=t;return{async importTemplate(t){const a=await t.text(),r=e.template.parse(a);let o;return await e.template.applyToRuntime(n,r,{onPanelFilter(t){o=t}}),{template:r,panelFilter:o}},async exportTemplate(){var t,o;const i=n.getState(),s=n.getPanelSchema(),l=(null==(t=r.getTemplateFieldPaths)?void 0:t.call(r,s))??function(t){return t.groups.flatMap(t=>t.fields.map(t=>{var e,n;return null==(n=null==(e=t.bind)?void 0:e.path)?void 0:n.trim()}).filter(t=>Boolean(t)))}(s);!function(t,e){if(!t)throw new Error(e)}(l.length>0,"[generator-workbench] exportTemplate requires at least one panel field path");const u=e.template.build({generatorId:a(s,i),state:i,panelSchema:s,selectedFieldPaths:l,templateMeta:null==(o=r.getTemplateMeta)?void 0:o.call(r)});return e.template.download(u),{template:u}}}}function o(t,e,n){return t.dispatchEvent(new CustomEvent(e,{detail:n,bubbles:!0,composed:!0}))}function i(t,e){const n=t.querySelector(e);if(!n)throw new Error(`[generator-workbench] required DOM node not found: ${e}`);return n}function s(t,e){return t.innerHTML='\n  <style>\n    :host {\n      display: block;\n      min-height: 100%;\n      color: #111827;\n      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n    }\n\n    * {\n      box-sizing: border-box;\n    }\n\n    .shell {\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #f5f7fb;\n    }\n\n    .topbar {\n      height: 56px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      padding: 0 16px;\n      background: #fff;\n      border-bottom: 1px solid #e5e7eb;\n    }\n\n    .logo-area {\n      font-weight: 600;\n    }\n\n    .topbar-actions {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .workspace {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 320px;\n    }\n\n    .workspace.panel-left {\n      grid-template-columns: 320px minmax(0, 1fr);\n    }\n\n    .workspace.panel-right .canvas-host {\n      grid-column: 1;\n    }\n\n    .workspace.panel-right .panel-sidebar {\n      grid-column: 2;\n    }\n\n    .workspace.panel-left .panel-sidebar {\n      grid-column: 1;\n    }\n\n    .workspace.panel-left .canvas-host {\n      grid-column: 2;\n    }\n\n    .panel-sidebar {\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n      background: #fff;\n    }\n\n    .panel-host {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n    }\n\n    .canvas-host {\n      position: relative;\n      min-height: 480px;\n      padding: 24px;\n      display: grid;\n      place-items: center;\n    }\n\n    button {\n      border: 0;\n      border-radius: 10px;\n      padding: 10px 14px;\n      cursor: pointer;\n      background: #111827;\n      color: #fff;\n      font: inherit;\n    }\n\n    button.secondary {\n      background: #e5e7eb;\n      color: #111827;\n    }\n\n    button:focus-visible {\n      outline: 2px solid #4338ca;\n      outline-offset: 2px;\n    }\n\n    .auth-area {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .avatar-button {\n      display: none;\n      align-items: center;\n      gap: 8px;\n      background: transparent;\n      color: #111827;\n      padding: 0;\n    }\n\n    .avatar-image {\n      width: 32px;\n      height: 32px;\n      border-radius: 999px;\n      object-fit: cover;\n      background: #e5e7eb;\n    }\n\n    .avatar-menu {\n      position: absolute;\n      right: 0;\n      top: calc(100% + 8px);\n      min-width: 140px;\n      padding: 8px;\n      display: none;\n      background: #fff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);\n    }\n\n    .avatar-menu.is-open,\n    .fab-menu.is-open {\n      display: block;\n    }\n\n    .avatar-menu button,\n    .fab-menu button {\n      width: 100%;\n    }\n\n    .panel-actions {\n      padding: 12px;\n      border-top: 1px solid #e5e7eb;\n    }\n\n    .workspace.panel-right .panel-sidebar {\n      border-left: 1px solid #e5e7eb;\n    }\n\n    .workspace.panel-left .panel-sidebar {\n      border-right: 1px solid #e5e7eb;\n    }\n\n    .fab {\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      gap: 8px;\n      width: 100%;\n    }\n\n    .fab-menu {\n      width: 100%;\n      display: none;\n      padding: 8px;\n      background: #fff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);\n    }\n\n    .fab-menu button + button {\n      margin-top: 8px;\n    }\n  </style>\n  <div class="shell">\n    <header class="topbar">\n      <div class="logo-area" data-role="logo-area"></div>\n      <div class="topbar-actions">\n        <button class="secondary" data-role="import-template">导入模板</button>\n        <button class="secondary" data-role="export-template">生成模板</button>\n        <div class="auth-area" data-role="auth-area">\n          <button data-role="login">登录</button>\n          <button class="avatar-button" data-role="avatar-button" aria-expanded="false">\n            <img class="avatar-image" data-role="avatar-image" alt="User avatar" />\n          </button>\n          <div class="avatar-menu" data-role="avatar-menu">\n            <button class="secondary" data-role="logout">退出登录</button>\n          </div>\n        </div>\n      </div>\n    </header>\n    <div class="workspace" data-role="workspace">\n      <main class="canvas-host" data-role="canvas-host"></main>\n      <aside class="panel-sidebar" data-role="panel-sidebar">\n        <div class="panel-host" data-role="panel-host"></div>\n        <div class="panel-actions" data-role="panel-actions">\n          <div class="fab">\n            <div class="fab-menu" data-role="fab-menu">\n              <button class="secondary" data-role="open-in-studio">导入 Studio</button>\n              <button class="secondary" data-role="export-svg">导出 SVG</button>\n            </div>\n            <button data-role="fab-trigger" aria-expanded="false">导出</button>\n          </div>\n        </div>\n      </aside>\n    </div>\n    <input data-role="template-file-input" type="file" accept="application/json" hidden />\n  </div>\n',function(t){return{root:t,topbar:i(t,".topbar"),workspace:i(t,'[data-role="workspace"]'),logoArea:i(t,'[data-role="logo-area"]'),importTemplateBtn:i(t,'[data-role="import-template"]'),exportTemplateBtn:i(t,'[data-role="export-template"]'),loginBtn:i(t,'[data-role="login"]'),avatarButton:i(t,'[data-role="avatar-button"]'),avatarImage:i(t,'[data-role="avatar-image"]'),avatarMenu:i(t,'[data-role="avatar-menu"]'),logoutBtn:i(t,'[data-role="logout"]'),panelSidebar:i(t,'[data-role="panel-sidebar"]'),panelHost:i(t,'[data-role="panel-host"]'),panelActions:i(t,'[data-role="panel-actions"]'),canvasHost:i(t,'[data-role="canvas-host"]'),fabTrigger:i(t,'[data-role="fab-trigger"]'),fabMenu:i(t,'[data-role="fab-menu"]'),exportSvgBtn:i(t,'[data-role="export-svg"]'),openInStudioBtn:i(t,'[data-role="open-in-studio"]'),templateFileInput:i(t,'[data-role="template-file-input"]')}}(t)}const l={title:"",templateEnabled:!0,exportEnabled:!0,studioEnabled:!0,autoMount:!0,panelTarget:"right",avatarMenuTrigger:"hover"};class u extends HTMLElement{constructor(){super(),n(this,"_sdk",null),n(this,"_runtime",null),n(this,"_config",{...l}),n(this,"_refs",null),n(this,"_mounted",!1),n(this,"_state",{authStatus:{isLogin:!1,userInfo:null},busy:{login:!1,importTemplate:!1,exportTemplate:!1,exportSvg:!1,openInStudio:!1},menu:{avatarOpen:!1,fabOpen:!1}}),n(this,"_cleanupAuth"),n(this,"_authController"),n(this,"_templateController"),n(this,"_exportController"),n(this,"_runtimeController"),this.attachShadow({mode:"open"})}get sdk(){return this._sdk}set sdk(t){this._sdk=t}get runtime(){return this._runtime}set runtime(t){this._runtime=t}get config(){return this._config}set config(t){var e;this._config=(e=t,{...l,...e}),this._mounted&&this.render()}connectedCallback(){!1!==this._config.autoMount&&!this._mounted&&this._sdk&&this._runtime&&this.mount()}disconnectedCallback(){this.unmount()}async mount(){var t,e;if(!this._mounted){if(!this.shadowRoot)throw new Error("[generator-workbench] shadowRoot is required");if(!this._sdk)throw new Error("[generator-workbench] sdk is required before mount()");if(!this._runtime)throw new Error("[generator-workbench] runtime is required before mount()");this.render(),this.bindControllers(),this.bindShellEvents(),this.bindAuthState(),await(null==(t=this._runtimeController)?void 0:t.mountCanvas(this.requireRefs().canvasHost)),await(null==(e=this._runtimeController)?void 0:e.mountPanel(this.requireRefs().panelHost,this._state.activePanelFilter)),this._mounted=!0,o(this,"workbench-ready",{sdk:this._sdk,runtime:this._runtime})}}async unmount(){var t,e;null==(t=this._cleanupAuth)||t.call(this),this._cleanupAuth=void 0,await(null==(e=this._runtimeController)?void 0:e.unmountAll()),this._mounted=!1}refreshLayout(){}async importTemplate(t){try{const e=await this.requireTemplateController().importTemplate(t);this._state.activePanelFilter=e.panelFilter,this._runtimeController&&this._refs&&await this._runtimeController.remountPanel(this._refs.panelHost,e.panelFilter),o(this,"template-imported",e)}catch(e){this.handleError("template",e)}}async exportTemplate(){try{o(this,"template-exported",await this.requireTemplateController().exportTemplate())}catch(t){this.handleError("template",t)}}async exportSvg(){try{o(this,"svg-export",await this.requireExportController().exportSvg())}catch(t){this.handleError("export",t)}}async openInStudio(){try{o(this,"studio-open",await this.requireExportController().openInStudio())}catch(t){this.handleError("export",t)}}render(){var t,e;this.shadowRoot&&(this._refs=s(this.shadowRoot,this._config),t=this._refs,e=this._config,t.logoArea.textContent=e.logoText||e.title,t.workspace.classList.toggle("panel-left","left"===e.panelTarget),t.workspace.classList.toggle("panel-right","left"!==e.panelTarget),t.importTemplateBtn.hidden=!1===e.templateEnabled,t.exportTemplateBtn.hidden=!1===e.templateEnabled,t.exportSvgBtn.hidden=!1===e.exportEnabled,t.openInStudioBtn.hidden=!1===e.studioEnabled,this.syncAuthUI())}bindControllers(){this._sdk&&this._runtime&&(this._authController=function(t){const{sdk:e}=t;return{getStatus:()=>e.auth.getStatus(),subscribe:t=>(t(e.auth.getStatus()),e.auth.onChange(t)),async login(){await e.auth.login()},async logout(){await e.auth.logout()}}}({sdk:this._sdk}),this._templateController=r({sdk:this._sdk,runtime:this._runtime,config:this._config}),this._exportController=function(t){const{sdk:e,runtime:n,config:a,element:r}=t;return{async exportSvg(){var t;return await(null==(t=a.beforeExportSvg)?void 0:t.call(a,{sdk:e,runtime:n,element:r})),e.export.download({format:"svg"})},async openInStudio(){var t;return await(null==(t=a.beforeOpenInStudio)?void 0:t.call(a,{sdk:e,runtime:n,element:r})),e.export.openInStudio({format:"svg"})}}}({sdk:this._sdk,runtime:this._runtime,config:this._config,element:this}),this._runtimeController=function(t){const{runtime:e}=t;let n=null,a=null;async function r(t,n){null==a||a.unmount(),a=await Promise.resolve(e.mount({mode:"embed",target:"panel",container:t,panelFilter:n}))}return{mountCanvas:async function(t){null==n||n.unmount(),n=await Promise.resolve(e.mount({mode:"embed",target:"canvas",container:t}))},mountPanel:r,async remountPanel(t,e){await r(t,e)},async unmountAll(){null==n||n.unmount(),null==a||a.unmount(),n=null,a=null}}}({runtime:this._runtime}))}bindShellEvents(){const t=this.requireRefs();t.loginBtn.addEventListener("click",()=>{this.handleLogin()}),t.logoutBtn.addEventListener("click",()=>{this.handleLogout()}),t.importTemplateBtn.addEventListener("click",()=>{t.templateFileInput.click()}),t.exportTemplateBtn.addEventListener("click",()=>{this.exportTemplate()}),t.templateFileInput.addEventListener("change",()=>{var e;const n=null==(e=t.templateFileInput.files)?void 0:e[0];n&&(this.importTemplate(n),t.templateFileInput.value="")}),t.fabTrigger.addEventListener("click",()=>{this.toggleFabMenu()}),t.exportSvgBtn.addEventListener("click",()=>{this.exportSvg()}),t.openInStudioBtn.addEventListener("click",()=>{this.openInStudio()}),t.avatarButton.addEventListener("click",()=>{this.toggleAvatarMenu()}),"hover"===this._config.avatarMenuTrigger&&(t.avatarButton.addEventListener("mouseenter",()=>{this.setAvatarMenuOpen(!0)}),t.avatarMenu.addEventListener("mouseleave",()=>{this.setAvatarMenuOpen(!1)}))}bindAuthState(){var t;const e=this.requireAuthController();null==(t=this._cleanupAuth)||t.call(this),this._cleanupAuth=e.subscribe(t=>{this._state.authStatus=t,this.syncAuthUI(),o(this,"auth-change",t)})}syncAuthUI(){if(!this._refs)return;const{loginBtn:t,avatarButton:e,avatarImage:n}=this._refs,{isLogin:a,userInfo:r}=this._state.authStatus;t.style.display=a?"none":"",e.style.display=a?"inline-flex":"none",n.src=a&&(null==r?void 0:r.headpic)||"",a||this.setAvatarMenuOpen(!1)}toggleFabMenu(){this._state.menu.fabOpen=!this._state.menu.fabOpen,this.syncMenuUI()}toggleAvatarMenu(){this.setAvatarMenuOpen(!this._state.menu.avatarOpen)}setAvatarMenuOpen(t){this._state.menu.avatarOpen=t,this.syncMenuUI()}syncMenuUI(){this._refs&&(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)))}async handleLogin(){try{this._state.busy.login=!0,await this.requireAuthController().login()}catch(t){this.handleError("auth",t)}finally{this._state.busy.login=!1}}async handleLogout(){try{await this.requireAuthController().logout()}catch(t){this.handleError("auth",t)}}handleError(t,e){var n,a;const r=e instanceof Error?e:new Error(String(e));null==(a=(n=this._config).onError)||a.call(n,r,t),o(this,"workbench-error",{source:t,error:r})}requireRefs(){if(!this._refs)throw new Error("[generator-workbench] refs are not ready");return this._refs}requireAuthController(){if(!this._authController)throw new Error("[generator-workbench] auth controller is not ready");return this._authController}requireTemplateController(){if(!this._templateController)throw new Error("[generator-workbench] template controller is not ready");return this._templateController}requireExportController(){if(!this._exportController)throw new Error("[generator-workbench] export controller is not ready");return this._exportController}}const d="generator-workbench";t.GENERATOR_WORKBENCH_TAG_NAME=d,t.GeneratorWorkbenchElement=u,t.defineGeneratorWorkbench=function(t=d){const e=customElements.get(t);return e||(customElements.define(t,u),u)},Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@atomm-developer/generator-workbench",
+  "version": "0.1.0",
+  "description": "Unified generator shell based on Web Components",
+  "keywords": [
+    "atomm",
+    "generator",
+    "workbench",
+    "web-component"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --open /examples/basic/",
+    "build": "vite build",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@atomm-developer/generator-sdk": "^1.0.5"
+  },
+  "devDependencies": {
+    "jsdom": "^26.0.0",
+    "terser": "^5.46.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.8"
+  }
+}