@wukong-kit/extension 0.1.0

package/dist/panels/default/index.js

@@ -0,0 +1,770 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.$ = exports.style = exports.template = void 0;
+exports.ready = ready;
+const PACKAGE_NAME = 'wukong';
+exports.template = `
+<div class="wukong-panel">
+  <header class="topbar">
+    <div>
+      <h2>Wukong Kit</h2>
+      <p>2D MVC workflow tools</p>
+    </div>
+    <ui-button id="refresh">Refresh</ui-button>
+  </header>
+
+  <nav class="tabs">
+    <ui-button id="moduleTab" class="tab active">Modules</ui-button>
+    <ui-button id="managerTab" class="tab">Managers</ui-button>
+    <ui-button id="librariesTab" class="tab">Libraries</ui-button>
+    <ui-button id="diagnosticsTab" class="tab">Diagnostics</ui-button>
+  </nav>
+
+  <section id="modulePage" class="page active">
+    <aside class="module-list">
+      <ui-button id="newModule" class="new-module">+ New Module</ui-button>
+      <div id="projectModules"></div>
+    </aside>
+
+    <main class="module-detail">
+      <section id="createModulePanel" class="surface">
+        <div class="section-head">
+          <div>
+            <h3>Create Module</h3>
+            <p>Create a logic module, optionally with an initial View.</p>
+          </div>
+        </div>
+        <div class="form-row">
+          <label>Module Name</label>
+          <ui-input id="moduleName" placeholder="battle"></ui-input>
+        </div>
+        <div class="form-row">
+          <label>Init Order</label>
+          <ui-input id="moduleOrder" placeholder="100" value="100"></ui-input>
+        </div>
+        <label class="check-row">
+          <input id="withView" type="checkbox" />
+          <span>Create initial View</span>
+        </label>
+        <ui-button id="create">Create Module</ui-button>
+        <p id="status"></p>
+      </section>
+
+      <section id="moduleInfoPanel" class="surface hidden">
+        <div class="section-head">
+          <div>
+            <h3 id="selectedTitle">Module</h3>
+            <p id="selectedPath"></p>
+          </div>
+        </div>
+        <div class="order-editor">
+          <div class="form-row">
+            <label>Init Order</label>
+            <ui-input id="selectedOrder" placeholder="100"></ui-input>
+          </div>
+          <ui-button id="saveOrder">Save Order</ui-button>
+        </div>
+        <div id="moduleFiles" class="file-list"></div>
+
+        <div class="subhead">
+          <h3>Views</h3>
+        </div>
+        <div id="moduleViews" class="view-list"></div>
+
+        <div class="add-view">
+          <div class="form-row">
+            <label>View Name</label>
+            <ui-input id="viewName" placeholder="Panel"></ui-input>
+          </div>
+          <div class="form-grid">
+            <div class="form-row">
+              <label>Layer</label>
+              <select id="viewLayer">
+                <option value="UI">UI</option>
+                <option value="Popup">Popup</option>
+                <option value="Tip">Tip</option>
+                <option value="Game">Game</option>
+                <option value="Scene">Scene</option>
+              </select>
+            </div>
+            <label class="check-row">
+              <input id="viewCache" type="checkbox" checked />
+              <span>Cache View</span>
+            </label>
+          </div>
+          <ui-button id="addView">Add View</ui-button>
+        </div>
+      </section>
+    </main>
+  </section>
+
+  <section id="managerPage" class="page manager-page">
+    <section class="surface manager-card">
+      <div class="section-head">
+        <div>
+          <h3>Create Manager</h3>
+          <p>Generate a singleton manager under scripts/core/managers.</p>
+        </div>
+      </div>
+      <div class="form-row">
+        <label>Manager Name</label>
+        <ui-input id="managerName" placeholder="audio"></ui-input>
+      </div>
+      <ui-button id="createManager">Create Manager</ui-button>
+      <p id="managerStatus"></p>
+    </section>
+  </section>
+
+  <section id="librariesPage" class="page">
+    <div class="section-head">
+      <div>
+        <h3>Libraries</h3>
+        <p>Optional npm modules supported by this project.</p>
+      </div>
+    </div>
+    <div id="modules"></div>
+  </section>
+
+  <section id="diagnosticsPage" class="page diagnostics-page">
+    <section class="surface">
+      <div class="section-head">
+        <div>
+          <h3>Project Diagnostics</h3>
+          <p>Check Wukong modules, views, prefabs, and optional libraries.</p>
+        </div>
+        <ui-button id="runDiagnostics">Run Check</ui-button>
+      </div>
+      <div id="diagnostics"></div>
+    </section>
+  </section>
+</div>
+`;
+exports.style = `
+.wukong-panel {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 14px;
+  color: var(--color-normal-contrast);
+  background: var(--color-normal-fill);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.topbar {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-normal-border);
+}
+.tabs {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+  padding: 4px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill-emphasis);
+}
+.tab {
+  flex: 1;
+}
+.tab.active {
+  border-color: var(--color-primary-fill);
+}
+h2, h3, p {
+  margin: 0;
+}
+h2 {
+  font-size: 16px;
+  font-weight: 600;
+}
+h3 {
+  font-size: 13px;
+  font-weight: 600;
+}
+.topbar p,
+.section-head p,
+#status,
+.muted,
+.module p {
+  color: var(--color-normal-contrast-weaker);
+}
+.topbar p,
+.section-head p {
+  margin-top: 4px;
+  font-size: 12px;
+}
+.page {
+  display: none;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-top: 14px;
+}
+.page.active {
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.manager-page.active {
+  display: block;
+}
+.diagnostics-page.active {
+  display: block;
+}
+#librariesPage.active {
+  display: block;
+  padding: 12px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill-emphasis);
+}
+.module-list {
+  flex: 0 0 220px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill-emphasis);
+  overflow-y: auto;
+}
+.new-module {
+  width: 100%;
+  margin-bottom: 10px;
+}
+.module-item {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 9px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill);
+  color: var(--color-normal-contrast);
+  text-align: left;
+}
+.module-item.active {
+  border-color: var(--color-primary-fill);
+}
+.module-item strong,
+.module-item span {
+  display: block;
+}
+.module-item strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.module-item span {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-normal-contrast-weaker);
+}
+.module-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.module-detail {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-left: 12px;
+  overflow-y: auto;
+}
+.surface {
+  padding: 12px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill-emphasis);
+}
+.hidden {
+  display: none;
+}
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.form-row label,
+.check-row {
+  font-size: 12px;
+  color: var(--color-normal-contrast-weaker);
+}
+.check-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 12px;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 140px;
+  gap: 10px;
+  align-items: end;
+}
+.order-editor {
+  display: grid;
+  grid-template-columns: minmax(120px, 180px) auto;
+  gap: 10px;
+  align-items: end;
+  margin-bottom: 12px;
+}
+select {
+  height: 24px;
+  color: var(--color-normal-contrast);
+  background: var(--color-normal-fill);
+  border: 1px solid var(--color-normal-border);
+  border-radius: 4px;
+}
+#status {
+  min-height: 18px;
+  margin-top: 8px;
+  font-size: 12px;
+}
+#managerStatus {
+  min-height: 18px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-normal-contrast-weaker);
+}
+.manager-card {
+  max-width: 520px;
+}
+.file-list,
+.view-list {
+  display: grid;
+  gap: 8px;
+}
+.file-pill,
+.view-pill {
+  padding: 8px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill);
+}
+.view-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+.view-row .muted {
+  display: inline-block;
+  max-width: 360px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.subhead {
+  margin: 16px 0 8px;
+}
+.add-view {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-normal-border);
+}
+#modules {
+  display: block;
+  min-height: 0;
+}
+.module {
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  padding: 10px;
+  margin-top: 8px;
+  background: var(--color-normal-fill);
+}
+.module-title {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.module-title span {
+  font-size: 12px;
+  color: var(--color-normal-contrast-weaker);
+}
+.module p {
+  margin-bottom: 10px;
+  line-height: 1.4;
+}
+.module-actions,
+.lib-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.lib-settings {
+  display: grid;
+  grid-template-columns: minmax(100px, 1fr) 90px auto;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.lib-settings label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.lib-meta {
+  margin-bottom: 10px;
+  color: var(--color-normal-contrast-weaker);
+  font-size: 12px;
+}
+.empty {
+  margin-top: 8px;
+  color: var(--color-normal-contrast-weaker);
+}
+.diagnostic {
+  padding: 10px;
+  margin-top: 8px;
+  border: 1px solid var(--color-normal-border);
+  border-radius: 6px;
+  background: var(--color-normal-fill);
+}
+.diagnostic strong {
+  display: block;
+  margin-bottom: 4px;
+}
+.diagnostic.error {
+  border-color: var(--color-danger-fill);
+}
+.diagnostic.warn {
+  border-color: var(--color-warn-fill);
+}
+.diagnostic.info {
+  border-color: var(--color-success-fill);
+}
+`;
+exports.$ = {
+    refresh: '#refresh',
+    moduleTab: '#moduleTab',
+    managerTab: '#managerTab',
+    librariesTab: '#librariesTab',
+    diagnosticsTab: '#diagnosticsTab',
+    modulePage: '#modulePage',
+    managerPage: '#managerPage',
+    librariesPage: '#librariesPage',
+    diagnosticsPage: '#diagnosticsPage',
+    newModule: '#newModule',
+    createModulePanel: '#createModulePanel',
+    moduleInfoPanel: '#moduleInfoPanel',
+    projectModules: '#projectModules',
+    selectedTitle: '#selectedTitle',
+    selectedPath: '#selectedPath',
+    moduleFiles: '#moduleFiles',
+    moduleViews: '#moduleViews',
+    create: '#create',
+    moduleName: '#moduleName',
+    moduleOrder: '#moduleOrder',
+    withView: '#withView',
+    status: '#status',
+    selectedOrder: '#selectedOrder',
+    saveOrder: '#saveOrder',
+    viewName: '#viewName',
+    viewLayer: '#viewLayer',
+    viewCache: '#viewCache',
+    addView: '#addView',
+    managerName: '#managerName',
+    createManager: '#createManager',
+    managerStatus: '#managerStatus',
+    modules: '#modules',
+    runDiagnostics: '#runDiagnostics',
+    diagnostics: '#diagnostics',
+};
+function ready() {
+    this.projectModules = [];
+    this.selectedModuleName = null;
+    this.$.refresh.addEventListener('confirm', async () => {
+        if (this.$.librariesPage.classList.contains('active')) {
+            await this.renderModules();
+            return;
+        }
+        await this.renderProjectModules();
+    });
+    this.$.moduleTab.addEventListener('confirm', async () => {
+        this.showTab('module');
+        await this.renderProjectModules();
+    });
+    this.$.librariesTab.addEventListener('confirm', async () => {
+        this.showTab('libraries');
+        await this.renderModules();
+    });
+    this.$.diagnosticsTab.addEventListener('confirm', async () => {
+        this.showTab('diagnostics');
+        await this.renderDiagnostics();
+    });
+    this.$.runDiagnostics.addEventListener('confirm', async () => {
+        await this.renderDiagnostics();
+    });
+    this.$.managerTab.addEventListener('confirm', () => {
+        this.showTab('manager');
+    });
+    this.$.newModule.addEventListener('confirm', () => {
+        this.selectedModuleName = null;
+        this.renderModuleDetail(null);
+    });
+    this.$.create.addEventListener('confirm', async () => {
+        const name = this.$.moduleName.value || 'NewModule';
+        const order = Number(this.$.moduleOrder.value || 100);
+        this.$.status.innerText = 'Creating module...';
+        try {
+            const result = (await Editor.Message.request(PACKAGE_NAME, 'create-module', {
+                name,
+                order,
+                withView: Boolean(this.$.withView.checked),
+            }));
+            this.$.status.innerText = `Created ${result.moduleName}.`;
+            this.$.moduleName.value = '';
+            this.$.moduleOrder.value = '100';
+            this.$.withView.checked = false;
+            await this.renderProjectModules();
+        }
+        catch (error) {
+            this.$.status.innerText = error instanceof Error ? error.message : String(error);
+        }
+    });
+    this.$.saveOrder.addEventListener('confirm', async () => {
+        if (!this.selectedModuleName)
+            return;
+        const order = Number(this.$.selectedOrder.value || 100);
+        try {
+            await Editor.Message.request(PACKAGE_NAME, 'update-module-order', {
+                moduleName: this.selectedModuleName,
+                order,
+            });
+            this.$.status.innerText = `Updated ${this.selectedModuleName} order to ${order}.`;
+            await this.renderProjectModules();
+        }
+        catch (error) {
+            this.$.status.innerText = error instanceof Error ? error.message : String(error);
+        }
+    });
+    this.$.addView.addEventListener('confirm', async () => {
+        if (!this.selectedModuleName)
+            return;
+        const viewName = this.$.viewName.value || 'Panel';
+        try {
+            await Editor.Message.request(PACKAGE_NAME, 'create-view', {
+                moduleName: this.selectedModuleName,
+                viewName,
+                layer: this.$.viewLayer.value || 'UI',
+                cache: Boolean(this.$.viewCache.checked),
+            });
+            this.$.viewName.value = '';
+            await this.renderProjectModules();
+        }
+        catch (error) {
+            this.$.status.innerText = error instanceof Error ? error.message : String(error);
+        }
+    });
+    this.$.createManager.addEventListener('confirm', async () => {
+        const name = this.$.managerName.value || 'NewManager';
+        this.$.managerStatus.innerText = 'Creating manager...';
+        try {
+            const result = (await Editor.Message.request(PACKAGE_NAME, 'create-manager', { name }));
+            this.$.managerStatus.innerText = `Created ${result.moduleName}.`;
+            this.$.managerName.value = '';
+        }
+        catch (error) {
+            this.$.managerStatus.innerText = error instanceof Error ? error.message : String(error);
+        }
+    });
+    this.showTab('module');
+    void this.renderProjectModules();
+}
+exports.methods = {
+    showTab(tab) {
+        const showModule = tab === 'module';
+        const showManager = tab === 'manager';
+        this.$.moduleTab.classList.toggle('active', showModule);
+        this.$.managerTab.classList.toggle('active', showManager);
+        this.$.librariesTab.classList.toggle('active', tab === 'libraries');
+        this.$.diagnosticsTab.classList.toggle('active', tab === 'diagnostics');
+        this.$.modulePage.classList.toggle('active', showModule);
+        this.$.managerPage.classList.toggle('active', showManager);
+        this.$.librariesPage.classList.toggle('active', tab === 'libraries');
+        this.$.diagnosticsPage.classList.toggle('active', tab === 'diagnostics');
+    },
+    async renderProjectModules() {
+        this.projectModules = (await Editor.Message.request(PACKAGE_NAME, 'list-project-modules'));
+        if (this.projectModules.length === 0) {
+            this.$.projectModules.innerHTML = '<p class="empty">No modules yet.</p>';
+            this.renderModuleDetail(null);
+            return;
+        }
+        this.$.projectModules.innerHTML = this.projectModules
+            .map((module) => `
+          <button class="module-item ${module.name === this.selectedModuleName ? 'active' : ''}" data-module="${module.name}">
+            <strong>${module.className}</strong>
+            <span class="module-meta">
+              <span>Order ${module.order}</span>
+              <span>${module.views.length > 0 ? `${module.views.length} Views` : 'Logic Module'}</span>
+            </span>
+          </button>
+        `)
+            .join('');
+        this.$.projectModules.querySelectorAll('.module-item').forEach((button) => {
+            button.addEventListener('click', () => {
+                this.selectedModuleName = button.getAttribute('data-module');
+                this.renderModuleDetail(this.projectModules.find((item) => item.name === this.selectedModuleName) ?? null);
+            });
+        });
+        const selected = this.projectModules.find((item) => item.name === this.selectedModuleName) ?? this.projectModules[0];
+        this.selectedModuleName = selected.name;
+        this.renderModuleDetail(selected);
+    },
+    renderModuleDetail(module) {
+        this.$.createModulePanel.classList.toggle('hidden', Boolean(module));
+        this.$.moduleInfoPanel.classList.toggle('hidden', !module);
+        if (!module)
+            return;
+        this.$.selectedTitle.innerText = `${module.className} Module`;
+        this.$.selectedPath.innerText = module.displayPath;
+        this.$.selectedPath.setAttribute('title', module.folderPath);
+        this.$.selectedOrder.value = String(module.order);
+        this.$.moduleFiles.innerHTML = module.displayFiles
+            .map((file) => `<div class="file-pill" title="${this.escapeHtml(file)}">${this.escapeHtml(file)}</div>`)
+            .join('');
+        this.$.moduleViews.innerHTML =
+            module.views.length > 0
+                ? module.views
+                    .map((view) => `
+                <div class="view-pill">
+                  <div class="view-row">
+                    <div>
+                      <strong>${view.className}</strong><br>
+                      <span class="muted" title="${this.escapeHtml(view.scriptPath)}">${this.escapeHtml(view.displayPath)}</span>
+                    </div>
+                    <ui-button class="delete-view" data-view="${view.className}">Delete</ui-button>
+                  </div>
+                </div>
+              `)
+                    .join('')
+                : '<p class="empty">No views. Add one when this module needs presentation.</p>';
+        this.$.moduleViews.querySelectorAll('.delete-view').forEach((button) => {
+            button.addEventListener('confirm', async () => {
+                const className = button.getAttribute('data-view');
+                if (!className || !this.selectedModuleName)
+                    return;
+                await Editor.Message.request(PACKAGE_NAME, 'delete-view', {
+                    moduleName: this.selectedModuleName,
+                    className,
+                });
+                await this.renderProjectModules();
+            });
+        });
+    },
+    escapeHtml(text) {
+        return text.replace(/[&<>"']/g, (char) => {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;',
+            };
+            return map[char] ?? char;
+        });
+    },
+    async renderDiagnostics() {
+        const issues = (await Editor.Message.request(PACKAGE_NAME, 'diagnose-project'));
+        this.$.diagnostics.innerHTML = issues
+            .map((issue) => `
+          <div class="diagnostic ${issue.level}">
+            <strong>${issue.level.toUpperCase()} · ${this.escapeHtml(issue.code)}</strong>
+            <p>${this.escapeHtml(issue.message)}</p>
+            ${issue.target ? `<p class="muted" title="${this.escapeHtml(issue.target)}">${this.escapeHtml(issue.target)}</p>` : ''}
+          </div>
+        `)
+            .join('');
+    },
+    async renderModules() {
+        const modules = (await Editor.Message.request(PACKAGE_NAME, 'list-modules'));
+        if (modules.length === 0) {
+            this.$.modules.innerHTML = '<p class="empty">No optional libraries configured.</p>';
+            return;
+        }
+        this.$.modules.innerHTML = modules
+            .map((module) => `
+      <div class="module">
+        <div class="module-title">
+          <strong>${module.displayName}</strong>
+          <span>${module.installed ? module.installedVersion : 'Not installed'}</span>
+        </div>
+        <p>${module.description}</p>
+        <div class="lib-meta">
+          <span>Init: ${module.initMode}</span>
+          <span>Order: ${module.order}</span>
+          <span>${module.enabled ? 'Enabled' : 'Disabled'}</span>
+        </div>
+        ${module.installed
+            ? `<div class="lib-settings">
+                <label>
+                  <ui-checkbox class="lib-enabled" data-id="${module.id}" ${module.enabled ? 'checked' : ''}></ui-checkbox>
+                  Enabled
+                </label>
+                <ui-num-input class="lib-order" data-id="${module.id}" value="${module.order}"></ui-num-input>
+                <ui-button class="save-lib-state" data-id="${module.id}">Save</ui-button>
+              </div>`
+            : ''}
+        <div class="module-actions">
+          <ui-button class="install" data-package="${module.installPackage || module.npmPackage}">
+            ${module.installed ? (module.updateAvailable ? 'Update' : 'Reinstall') : 'Install'}
+          </ui-button>
+          ${module.installed
+            ? `<ui-button class="uninstall" data-package="${module.npmPackage}">Uninstall</ui-button>`
+            : ''}
+        </div>
+      </div>
+    `)
+            .join('');
+        this.$.modules.querySelectorAll('.install').forEach((button) => {
+            button.addEventListener('confirm', async () => {
+                const npmPackage = button.getAttribute('data-package');
+                if (!npmPackage)
+                    return;
+                await Editor.Message.request(PACKAGE_NAME, 'install-module', npmPackage);
+                await this.renderModules();
+            });
+        });
+        this.$.modules.querySelectorAll('.uninstall').forEach((button) => {
+            button.addEventListener('confirm', async () => {
+                const npmPackage = button.getAttribute('data-package');
+                if (!npmPackage)
+                    return;
+                await Editor.Message.request(PACKAGE_NAME, 'uninstall-module', npmPackage);
+                await this.renderModules();
+            });
+        });
+        this.$.modules.querySelectorAll('.save-lib-state').forEach((button) => {
+            button.addEventListener('confirm', async () => {
+                const id = button.getAttribute('data-id');
+                if (!id)
+                    return;
+                const enabled = this.$.modules.querySelector(`.lib-enabled[data-id="${id}"]`);
+                const order = this.$.modules.querySelector(`.lib-order[data-id="${id}"]`);
+                await Editor.Message.request(PACKAGE_NAME, 'update-library-state', {
+                    id,
+                    enabled: Boolean(enabled?.checked),
+                    order: Number(order?.value || 100),
+                });
+                await this.renderModules();
+            });
+        });
+    },
+};
+//# sourceMappingURL=index.js.map