npm - @gxp-dev/tools - Versions diffs - 2.0.5 → 2.0.6 - Mend

@gxp-dev/tools 2.0.5 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (169) hide show

package/dist/tui/App.d.ts +13 -0
package/dist/tui/App.d.ts.map +1 -0
package/dist/tui/App.js +480 -0
package/dist/tui/App.js.map +1 -0
package/dist/tui/components/CommandInput.d.ts +13 -0
package/dist/tui/components/CommandInput.d.ts.map +1 -0
package/dist/tui/components/CommandInput.js +180 -0
package/dist/tui/components/CommandInput.js.map +1 -0
package/dist/tui/components/GeminiPanel.d.ts +7 -0
package/dist/tui/components/GeminiPanel.d.ts.map +1 -0
package/dist/tui/components/GeminiPanel.js +99 -0
package/dist/tui/components/GeminiPanel.js.map +1 -0
package/dist/tui/components/Header.d.ts +6 -0
package/dist/tui/components/Header.d.ts.map +1 -0
package/dist/tui/components/Header.js +6 -0
package/dist/tui/components/Header.js.map +1 -0
package/dist/tui/components/LogPanel.d.ts +8 -0
package/dist/tui/components/LogPanel.d.ts.map +1 -0
package/dist/tui/components/LogPanel.js +89 -0
package/dist/tui/components/LogPanel.js.map +1 -0
package/dist/tui/components/TabBar.d.ts +9 -0
package/dist/tui/components/TabBar.d.ts.map +1 -0
package/dist/tui/components/TabBar.js +23 -0
package/dist/tui/components/TabBar.js.map +1 -0
package/dist/tui/components/WelcomeScreen.d.ts +2 -0
package/dist/tui/components/WelcomeScreen.d.ts.map +1 -0
package/dist/tui/components/WelcomeScreen.js +14 -0
package/dist/tui/components/WelcomeScreen.js.map +1 -0
package/dist/tui/index.d.ts +8 -0
package/dist/tui/index.d.ts.map +1 -0
package/dist/tui/index.js +47 -0
package/dist/tui/index.js.map +1 -0
package/dist/tui/package.json +1 -0
package/dist/tui/services/ExtensionService.d.ts +11 -0
package/dist/tui/services/ExtensionService.d.ts.map +1 -0
package/dist/tui/services/ExtensionService.js +101 -0
package/dist/tui/services/ExtensionService.js.map +1 -0
package/dist/tui/services/GeminiService.d.ts +40 -0
package/dist/tui/services/GeminiService.d.ts.map +1 -0
package/dist/tui/services/GeminiService.js +327 -0
package/dist/tui/services/GeminiService.js.map +1 -0
package/dist/tui/services/ServiceManager.d.ts +40 -0
package/dist/tui/services/ServiceManager.d.ts.map +1 -0
package/dist/tui/services/ServiceManager.js +283 -0
package/dist/tui/services/ServiceManager.js.map +1 -0
package/dist/tui/services/SocketService.d.ts +19 -0
package/dist/tui/services/SocketService.d.ts.map +1 -0
package/dist/tui/services/SocketService.js +163 -0
package/dist/tui/services/SocketService.js.map +1 -0
package/dist/tui/services/ViteService.d.ts +8 -0
package/dist/tui/services/ViteService.d.ts.map +1 -0
package/dist/tui/services/ViteService.js +89 -0
package/dist/tui/services/ViteService.js.map +1 -0
package/dist/tui/services/index.d.ts +6 -0
package/dist/tui/services/index.d.ts.map +1 -0
package/dist/tui/services/index.js +6 -0
package/dist/tui/services/index.js.map +1 -0
package/package.json +6 -1
package/.github/workflows/npm-publish.yml +0 -48
package/CLAUDE.md +0 -400
package/REFACTOR_PLAN.md +0 -194
package/browser-extensions/README.md +0 -1
package/browser-extensions/chrome/background.js +0 -857
package/browser-extensions/chrome/content.js +0 -51
package/browser-extensions/chrome/devtools.html +0 -9
package/browser-extensions/chrome/devtools.js +0 -23
package/browser-extensions/chrome/icons/gx_off_128.png +0 -0
package/browser-extensions/chrome/icons/gx_off_16.png +0 -0
package/browser-extensions/chrome/icons/gx_off_32.png +0 -0
package/browser-extensions/chrome/icons/gx_off_64.png +0 -0
package/browser-extensions/chrome/icons/gx_on_128.png +0 -0
package/browser-extensions/chrome/icons/gx_on_16.png +0 -0
package/browser-extensions/chrome/icons/gx_on_32.png +0 -0
package/browser-extensions/chrome/icons/gx_on_64.png +0 -0
package/browser-extensions/chrome/inspector.js +0 -1087
package/browser-extensions/chrome/manifest.json +0 -70
package/browser-extensions/chrome/panel.html +0 -638
package/browser-extensions/chrome/panel.js +0 -862
package/browser-extensions/chrome/popup.html +0 -399
package/browser-extensions/chrome/popup.js +0 -515
package/browser-extensions/chrome/rules.json +0 -1
package/browser-extensions/chrome/test-chrome.html +0 -145
package/browser-extensions/chrome/test-mixed-content.html +0 -190
package/browser-extensions/chrome/test-uri-pattern.html +0 -199
package/browser-extensions/firefox/README.md +0 -134
package/browser-extensions/firefox/background.js +0 -804
package/browser-extensions/firefox/content.js +0 -120
package/browser-extensions/firefox/debug-errors.html +0 -229
package/browser-extensions/firefox/debug-https.html +0 -113
package/browser-extensions/firefox/devtools.html +0 -9
package/browser-extensions/firefox/devtools.js +0 -24
package/browser-extensions/firefox/icons/gx_off_128.png +0 -0
package/browser-extensions/firefox/icons/gx_off_16.png +0 -0
package/browser-extensions/firefox/icons/gx_off_32.png +0 -0
package/browser-extensions/firefox/icons/gx_off_64.png +0 -0
package/browser-extensions/firefox/icons/gx_on_128.png +0 -0
package/browser-extensions/firefox/icons/gx_on_16.png +0 -0
package/browser-extensions/firefox/icons/gx_on_32.png +0 -0
package/browser-extensions/firefox/icons/gx_on_64.png +0 -0
package/browser-extensions/firefox/inspector.js +0 -1087
package/browser-extensions/firefox/manifest.json +0 -67
package/browser-extensions/firefox/panel.html +0 -638
package/browser-extensions/firefox/panel.js +0 -862
package/browser-extensions/firefox/popup.html +0 -525
package/browser-extensions/firefox/popup.js +0 -536
package/browser-extensions/firefox/test-gramercy.html +0 -126
package/browser-extensions/firefox/test-imports.html +0 -58
package/browser-extensions/firefox/test-masking.html +0 -147
package/browser-extensions/firefox/test-uri-pattern.html +0 -199
package/docs/DOCUSAURUS_IMPORT.md +0 -378
package/docs/_category_.json +0 -8
package/docs/app-manifest.md +0 -272
package/docs/building-for-platform.md +0 -315
package/docs/dev-tools.md +0 -291
package/docs/getting-started.md +0 -180
package/docs/gxp-store.md +0 -305
package/docs/index.md +0 -44
package/runtime/PortalContainer.vue +0 -326
package/runtime/dev-tools/DevToolsModal.vue +0 -217
package/runtime/dev-tools/LayoutSwitcher.vue +0 -221
package/runtime/dev-tools/MockDataEditor.vue +0 -621
package/runtime/dev-tools/SocketSimulator.vue +0 -562
package/runtime/dev-tools/StoreInspector.vue +0 -644
package/runtime/dev-tools/index.js +0 -6
package/runtime/gxpStringsPlugin.js +0 -428
package/runtime/index.html +0 -22
package/runtime/main.js +0 -32
package/runtime/mock-api/auth-middleware.js +0 -97
package/runtime/mock-api/image-generator.js +0 -221
package/runtime/mock-api/index.js +0 -197
package/runtime/mock-api/response-generator.js +0 -394
package/runtime/mock-api/route-generator.js +0 -323
package/runtime/mock-api/socket-triggers.js +0 -371
package/runtime/mock-api/spec-loader.js +0 -300
package/runtime/server.js +0 -180
package/runtime/stores/gxpPortalConfigStore.js +0 -554
package/runtime/stores/index.js +0 -6
package/runtime/vite-inspector-plugin.js +0 -749
package/runtime/vite-source-tracker-plugin.js +0 -232
package/runtime/vite.config.js +0 -402
package/scripts/launch-chrome.js +0 -90
package/scripts/pack-chrome.js +0 -91
package/socket-events/AiSessionMessageCreated.json +0 -18
package/socket-events/SocialStreamPostCreated.json +0 -24
package/socket-events/SocialStreamPostVariantCompleted.json +0 -23
package/template/README.md +0 -332
package/template/app-manifest.json +0 -32
package/template/dev-assets/images/avatar-placeholder.png +0 -0
package/template/dev-assets/images/background-placeholder.jpg +0 -0
package/template/dev-assets/images/banner-placeholder.jpg +0 -0
package/template/dev-assets/images/icon-placeholder.png +0 -0
package/template/dev-assets/images/logo-placeholder.png +0 -0
package/template/dev-assets/images/product-placeholder.jpg +0 -0
package/template/dev-assets/images/thumbnail-placeholder.jpg +0 -0
package/template/env.example +0 -51
package/template/gitignore +0 -53
package/template/index.html +0 -22
package/template/main.js +0 -28
package/template/src/DemoPage.vue +0 -459
package/template/src/Plugin.vue +0 -38
package/template/src/stores/index.js +0 -9
package/template/src/stores/test-data.json +0 -173
package/template/theme-layouts/AdditionalStyling.css +0 -0
package/template/theme-layouts/PrivateLayout.vue +0 -39
package/template/theme-layouts/PublicLayout.vue +0 -39
package/template/theme-layouts/SystemLayout.vue +0 -39
package/template/vite.config.js +0 -333
package/tsconfig.tui.json +0 -21
package/vite.config.js +0 -164

package/browser-extensions/firefox/manifest.json DELETED Viewed

@@ -1,67 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "GxP Developer Toolkit",
-  "version": "1.2",
-  "description": "JavaScript proxy and component inspector for GxP plugin development",
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "gxp-toolkit@gx-devtools.dev"
-    }
-  },
-  "permissions": [
-    "tabs",
-    "webRequest",
-    "webRequestBlocking",
-    "<all_urls>",
-    "storage",
-    "notifications",
-    "browsingData"
-  ],
-  "background": {
-    "scripts": ["background.js"],
-    "persistent": true
-  },
-  "devtools_page": "devtools.html",
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"],
-      "run_at": "document_start"
-    },
-    {
-      "matches": ["<all_urls>"],
-      "js": ["inspector.js"],
-      "run_at": "document_idle"
-    }
-  ],
-  "browser_action": {
-    "default_popup": "popup.html",
-    "default_title": "GxP Developer Toolkit",
-    "default_icon": {
-      "16": "icons/gx_off_16.png",
-      "32": "icons/gx_off_32.png",
-      "48": "icons/gx_off_48.png",
-      "128": "icons/gx_off_128.png"
-    }
-  },
-  "icons": {
-    "16": "icons/gx_off_16.png",
-    "32": "icons/gx_off_32.png",
-    "48": "icons/gx_off_48.png",
-    "128": "icons/gx_off_128.png"
-  },
-  "web_accessible_resources": [
-    "content.js",
-    "inspector.js",
-    "panel.html",
-    "panel.js"
-  ]
-}

package/browser-extensions/firefox/panel.html DELETED Viewed

@@ -1,638 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      margin: 0;
-      padding: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-size: 12px;
-      background: #1e1e1e;
-      color: #e0e0e0;
-      height: 100vh;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Header / Toolbar */
-    .toolbar {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: #2d2d2d;
-      border-bottom: 1px solid #3d3d3d;
-      flex-shrink: 0;
-    }
-    .toolbar-title {
-      font-weight: 600;
-      color: #61dafb;
-      margin-right: auto;
-    }
-    .toolbar-btn {
-      background: #3d3d3d;
-      border: none;
-      color: #e0e0e0;
-      padding: 6px 12px;
-      border-radius: 4px;
-      font-size: 11px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .toolbar-btn:hover {
-      background: #4d4d4d;
-    }
-    .toolbar-btn.active {
-      background: #61dafb;
-      color: #1e1e1e;
-    }
-    .toolbar-btn.active:hover {
-      background: #4fc3f7;
-    }
-    .status-indicator {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #dc3545;
-    }
-    .status-indicator.connected {
-      background: #28a745;
-    }
-    /* Main content area */
-    .main-content {
-      flex: 1;
-      display: flex;
-      overflow: hidden;
-    }
-    /* Sidebar for component tree (future) */
-    .sidebar {
-      width: 250px;
-      background: #252525;
-      border-right: 1px solid #3d3d3d;
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 0;
-    }
-    .sidebar-header {
-      padding: 8px 12px;
-      font-weight: 600;
-      font-size: 11px;
-      text-transform: uppercase;
-      color: #888;
-      border-bottom: 1px solid #3d3d3d;
-    }
-    .sidebar-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px;
-    }
-    /* Inspector panel */
-    .inspector {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    .inspector-header {
-      padding: 12px 16px;
-      border-bottom: 1px solid #3d3d3d;
-      background: #252525;
-    }
-    .component-name {
-      font-size: 15px;
-      font-weight: 600;
-      color: #61dafb;
-      margin-bottom: 4px;
-    }
-    .component-file {
-      font-size: 11px;
-      color: #888;
-      word-break: break-all;
-    }
-    .inspector-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-    }
-    /* Sections */
-    .section {
-      margin-bottom: 20px;
-    }
-    .section-title {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      color: #888;
-      margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .section-title .count {
-      background: #3d3d3d;
-      padding: 1px 6px;
-      border-radius: 10px;
-      font-size: 10px;
-    }
-    /* Strings list */
-    .strings-list {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-    .string-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 10px;
-      background: #2d2d2d;
-      border-radius: 4px;
-      border: 1px solid transparent;
-      cursor: pointer;
-    }
-    .string-item:hover {
-      border-color: #3d3d3d;
-      background: #333;
-    }
-    .string-item.selected {
-      border-color: #61dafb;
-      background: #2a3a4a;
-    }
-    .string-text {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 11px;
-    }
-    .string-actions {
-      display: flex;
-      gap: 4px;
-      opacity: 0;
-      transition: opacity 0.15s;
-    }
-    .string-item:hover .string-actions {
-      opacity: 1;
-    }
-    .action-btn {
-      background: #61dafb;
-      color: #1e1e1e;
-      border: none;
-      padding: 4px 8px;
-      border-radius: 3px;
-      font-size: 10px;
-      font-weight: 600;
-      cursor: pointer;
-    }
-    .action-btn:hover {
-      background: #4fc3f7;
-    }
-    .action-btn.secondary {
-      background: #4d4d4d;
-      color: #e0e0e0;
-    }
-    .action-btn.secondary:hover {
-      background: #5d5d5d;
-    }
-    /* Extract form */
-    .extract-form {
-      background: #252525;
-      border: 1px solid #3d3d3d;
-      border-radius: 6px;
-      padding: 16px;
-      margin-top: 12px;
-    }
-    .form-row {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      margin-bottom: 12px;
-    }
-    .form-row:last-child {
-      margin-bottom: 0;
-    }
-    .form-label {
-      font-size: 11px;
-      color: #888;
-      font-weight: 500;
-    }
-    .form-input {
-      background: #1e1e1e;
-      border: 1px solid #3d3d3d;
-      border-radius: 4px;
-      padding: 8px 10px;
-      color: #e0e0e0;
-      font-size: 12px;
-      font-family: 'Monaco', 'Menlo', monospace;
-    }
-    .form-input:focus {
-      outline: none;
-      border-color: #61dafb;
-    }
-    .form-input:disabled {
-      background: #2d2d2d;
-      color: #888;
-    }
-    .form-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 16px;
-    }
-    .btn-primary {
-      background: #28a745;
-      color: white;
-      border: none;
-      padding: 10px 16px;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      flex: 1;
-    }
-    .btn-primary:hover {
-      background: #218838;
-    }
-    .btn-primary:disabled {
-      background: #6c757d;
-      cursor: not-allowed;
-    }
-    .btn-cancel {
-      background: #4d4d4d;
-      color: #e0e0e0;
-      border: none;
-      padding: 10px 16px;
-      border-radius: 4px;
-      font-size: 12px;
-      cursor: pointer;
-    }
-    .btn-cancel:hover {
-      background: #5d5d5d;
-    }
-    /* Props tree */
-    .props-tree {
-      background: #2d2d2d;
-      border-radius: 4px;
-      padding: 10px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 11px;
-      overflow-x: auto;
-      max-height: 200px;
-    }
-    .prop-item {
-      padding: 2px 0;
-    }
-    .prop-key {
-      color: #9cdcfe;
-    }
-    .prop-value {
-      color: #ce9178;
-    }
-    .prop-value.number {
-      color: #b5cea8;
-    }
-    .prop-value.boolean {
-      color: #569cd6;
-    }
-    /* Status messages */
-    .status-message {
-      padding: 10px 12px;
-      border-radius: 4px;
-      font-size: 12px;
-      margin-top: 12px;
-    }
-    .status-message.success {
-      background: #28a74520;
-      border: 1px solid #28a745;
-      color: #28a745;
-    }
-    .status-message.error {
-      background: #dc354520;
-      border: 1px solid #dc3545;
-      color: #dc3545;
-    }
-    .status-message.info {
-      background: #17a2b820;
-      border: 1px solid #17a2b8;
-      color: #17a2b8;
-    }
-    /* Form header for edit form */
-    .form-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid #3d3d3d;
-    }
-    .form-badge {
-      padding: 4px 8px;
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 600;
-      font-family: 'Monaco', 'Menlo', monospace;
-    }
-    .form-badge.getString {
-      background: #61dafb20;
-      border: 1px solid #61dafb;
-      color: #61dafb;
-    }
-    .form-subtitle {
-      font-size: 12px;
-      color: #888;
-    }
-    /* String item badges */
-    .string-badge {
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-size: 9px;
-      font-weight: 600;
-      margin-left: 8px;
-    }
-    .string-badge.extracted {
-      background: #61dafb30;
-      color: #61dafb;
-    }
-    .string-badge.raw {
-      background: #ffc10730;
-      color: #ffc107;
-    }
-    .string-badge.dynamic {
-      background: #9c27b030;
-      color: #ce93d8;
-    }
-    .string-item.extracted {
-      border-left: 3px solid #61dafb;
-    }
-    .string-item.dynamic {
-      border-left: 3px solid #9c27b0;
-      opacity: 0.85;
-    }
-    .string-item.dynamic:hover {
-      opacity: 1;
-    }
-    .string-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow: hidden;
-    }
-    .string-expression {
-      font-size: 10px;
-      color: #ce93d8;
-      font-family: 'Monaco', 'Menlo', monospace;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .string-item.extracted .string-actions .action-btn {
-      background: #4d4d4d;
-      color: #e0e0e0;
-    }
-    .string-item.extracted .string-actions .action-btn:hover {
-      background: #5d5d5d;
-    }
-    /* Empty state */
-    .empty-state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      color: #888;
-      text-align: center;
-      padding: 40px;
-    }
-    .empty-state-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-      opacity: 0.5;
-    }
-    .empty-state-title {
-      font-size: 14px;
-      font-weight: 600;
-      margin-bottom: 8px;
-      color: #aaa;
-    }
-    .empty-state-text {
-      font-size: 12px;
-      line-height: 1.5;
-    }
-    .kbd {
-      background: #3d3d3d;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 10px;
-    }
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: #1e1e1e;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #4d4d4d;
-      border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #5d5d5d;
-    }
-    /* Hidden class */
-    .hidden {
-      display: none !important;
-    }
-  </style>
-</head>
-<body>
-  <div class="toolbar">
-    <span class="toolbar-title">GxP Component Inspector</span>
-    <div class="status-indicator" id="statusIndicator" title="Disconnected"></div>
-    <button class="toolbar-btn" id="selectBtn">
-      <span>Select Element</span>
-    </button>
-    <button class="toolbar-btn" id="refreshBtn">Refresh</button>
-  </div>
-  <div class="main-content">
-    <div class="inspector">
-      <!-- Empty state shown when no component selected -->
-      <div class="empty-state" id="emptyState">
-        <div class="empty-state-icon">&#128269;</div>
-        <div class="empty-state-title">No Component Selected</div>
-        <div class="empty-state-text">
-          Click <strong>"Select Element"</strong> then click on any element in the page to inspect it.<br><br>
-          Or use the keyboard shortcut <span class="kbd">Ctrl+Shift+I</span> to toggle element selection.
-        </div>
-      </div>
-      <!-- Inspector content shown when component is selected -->
-      <div class="hidden" id="inspectorContent">
-        <div class="inspector-header">
-          <div class="component-name" id="componentName">&lt;Unknown&gt;</div>
-          <div class="component-file" id="componentFile">No file info</div>
-        </div>
-        <div class="inspector-body">
-          <!-- Text content section -->
-          <div class="section" id="stringsSection">
-            <div class="section-title">
-              Text Content
-              <span class="count" id="stringsCount">0</span>
-            </div>
-            <div class="strings-list" id="stringsList"></div>
-          </div>
-          <!-- Extract form (hidden by default) -->
-          <div class="extract-form hidden" id="extractForm">
-            <div class="form-row">
-              <label class="form-label">Original Text</label>
-              <input type="text" class="form-input" id="extractText" readonly>
-            </div>
-            <div class="form-row">
-              <label class="form-label">String Key</label>
-              <input type="text" class="form-input" id="extractKey" placeholder="e.g., welcome_title">
-            </div>
-            <div class="form-row">
-              <label class="form-label">Source File</label>
-              <input type="text" class="form-input" id="extractFile" readonly>
-            </div>
-            <div class="form-actions">
-              <button class="btn-cancel" id="cancelExtract">Cancel</button>
-              <button class="btn-primary" id="doExtract">Extract to gxp-string</button>
-            </div>
-            <div class="status-message hidden" id="extractStatus"></div>
-          </div>
-          <!-- Edit form for existing gxp-string attributes (hidden by default) -->
-          <div class="extract-form hidden" id="editForm">
-            <div class="form-header">
-              <span class="form-badge getString">gxp-string</span>
-              <span class="form-subtitle">This text is already extracted</span>
-            </div>
-            <div class="form-row">
-              <label class="form-label">String Key</label>
-              <input type="text" class="form-input" id="editKey" placeholder="e.g., welcome_title">
-            </div>
-            <div class="form-row">
-              <label class="form-label">Default Value</label>
-              <input type="text" class="form-input" id="editValue" placeholder="The displayed text">
-            </div>
-            <div class="form-row">
-              <label class="form-label">Source File</label>
-              <input type="text" class="form-input" id="editFile" readonly>
-            </div>
-            <div class="form-actions">
-              <button class="btn-cancel" id="cancelEdit">Cancel</button>
-              <button class="btn-primary" id="doEdit">Update gxp-string</button>
-            </div>
-            <div class="status-message hidden" id="editStatus"></div>
-          </div>
-          <!-- Props section -->
-          <div class="section" id="propsSection">
-            <div class="section-title">Props</div>
-            <div class="props-tree" id="propsTree"></div>
-          </div>
-          <!-- Data section -->
-          <div class="section hidden" id="dataSection">
-            <div class="section-title">Data</div>
-            <div class="props-tree" id="dataTree"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script src="panel.js"></script>
-</body>
-</html>