@design.estate/dees-wcctools 1.0.100 → 1.1.0

package/dist_bundle/bundle.js

@@ -42883,10 +42883,16 @@ var cssManager = new CssManager();
 
 // ts_web/elements/wcc-frame.ts
 var WccFrame = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.advancedEditorOpen = false;
+  }
   render() {
     return x`
       <style>
         :host {
+          bottom: ${this.advancedEditorOpen ? "400px" : "100px"};
+          transition: bottom 0.3s ease;
           ${(() => {
       switch (this.viewport) {
         case "desktop":
@@ -42956,7 +42962,6 @@ WccFrame.styles = [
         left: 200px;
         right: 0px;
         top: 0px;
-        bottom: 100px;
         overflow-y: auto;
         overflow-x: auto;
         overscroll-behavior: contain;
@@ -42973,6 +42978,9 @@ WccFrame.styles = [
 __decorateClass([
   n4()
 ], WccFrame.prototype, "viewport", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], WccFrame.prototype, "advancedEditorOpen", 2);
 WccFrame = __decorateClass([
   t4("wcc-frame")
 ], WccFrame);
@@ -42981,31 +42989,68 @@ WccFrame = __decorateClass([
 var WccSidebar = class extends DeesElement {
   render() {
     return x`
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
       <style>
         :host {
+          /* CSS Variables - Always dark theme to match wcc-properties */
+          --background: #0a0a0a;
+          --foreground: #e5e5e5;
+          --card: #0f0f0f;
+          --card-foreground: #f0f0f0;
+          --muted: #1a1a1a;
+          --muted-foreground: #666;
+          --accent: #222;
+          --accent-foreground: #fff;
+          --border: rgba(255, 255, 255, 0.06);
+          --input: #141414;
+          --primary: #3b82f6;
+          --primary-foreground: #fff;
+          --ring: #3b82f6;
+          --radius: 4px;
+
           display: block;
-          border-right: 1px solid #999;
-          font-family: 'Roboto', 'Inter', sans-serif;
-          font-size: 12px;
+          border-right: 1px solid rgba(255, 255, 255, 0.08);
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+          font-size: 14px;
           box-sizing: border-box;
           position: absolute;
           left: 0px;
           width: 200px;
           top: 0px;
           bottom: 0px;
-          overflow-y: scroll;
+          overflow-y: auto;
           overflow-x: hidden;
-          background: #222;
-          color: #fff;
-          padding: 5px;
+          background: var(--background);
+          color: var(--foreground);
+        }
+
+        .menu {
+          padding: 0.5rem 0;
+        }
+
+        h3 {
+          padding: 0.3rem 0.75rem;
+          font-size: 0.65rem;
+          font-weight: 500;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+          color: #888;
+          margin: 0;
+          margin-top: 0.5rem;
+          background: rgba(59, 130, 246, 0.03);
+          border-bottom: 1px solid var(--border);
+          border-top: 1px solid var(--border);
+        }
+
+        h3:first-child {
+          margin-top: 0;
         }
 
         .material-symbols-outlined {
           font-family: 'Material Symbols Outlined';
           font-weight: normal;
           font-style: normal;
-          font-size: 24px;  /* Preferred icon size */
+          font-size: 16px;
           display: inline-block;
           line-height: 1;
           text-transform: none;
@@ -43013,51 +43058,75 @@ var WccSidebar = class extends DeesElement {
           word-wrap: normal;
           white-space: nowrap;
           direction: ltr;
-          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+          font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+          opacity: 0.5;
         }
 
         .selectOption {
           user-select: none;
           position: relative;
-          line-height: 24px;
-          padding: 5px;
-          transition: all 0.2s;
+          margin: 0.125rem 0.5rem;
+          padding: 0.5rem 0.75rem;
+          transition: all 0.15s ease;
           display: grid;
-          grid-template-columns: 28px auto;
+          grid-template-columns: 20px 1fr;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: var(--radius);
+          cursor: pointer;
+          font-size: 0.75rem;
+          color: #999;
+          background: transparent;
         }
+        
         .selectOption:hover {
-          padding: 5px;
-          color: #333;
-          background: #fff;
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
+        }
+
+        .selectOption:hover .material-symbols-outlined {
+          opacity: 0.7;
         }
 
         .selectOption.selected {
-          background: #455A64;;
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+        }
+
+        .selectOption.selected .material-symbols-outlined {
+          opacity: 1;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
         }
 
         .selectOption.selected:hover {
-          color: #ffffff;
-          background: #455A64;
+          background: rgba(59, 130, 246, 0.2);
+          color: var(--primary);
         }
 
-        .selectOption .material-symbols-outlined {
-          color: #666;
+        .selectOption .text {
           display: block;
-          transition: all 0.2s;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-weight: 400;
         }
 
-        .selectOption.selected .material-symbols-outlined {
-          color: #000;
+        ::-webkit-scrollbar {
+          width: 8px;
         }
 
-        .selectOption .text {
-          display: block;
-          word-wrap: break-word;
-          word-break: break-all;
-          max-width: 100%;
+        ::-webkit-scrollbar-track {
+          background: transparent;
         }
 
-        
+        ::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
       </style>
       <div class="menu">
         <h3>Pages</h3>
@@ -43150,32 +43219,56 @@ var WccProperties = class extends DeesElement {
     this.selectedTheme = "dark";
     this.warning = null;
     this.propertyContent = [];
+    this.editingProperties = [];
+    this.editorHeight = 300;
   }
   render() {
     return x`
       <style>
         :host {
-          font-family: 'Roboto', sans-serif;
+          /* CSS Variables - Always dark theme */
+          --background: #0a0a0a;
+          --foreground: #e5e5e5;
+          --card: #0f0f0f;
+          --card-foreground: #f0f0f0;
+          --muted: #1a1a1a;
+          --muted-foreground: #666;
+          --accent: #222;
+          --accent-foreground: #fff;
+          --border: rgba(255, 255, 255, 0.06);
+          --input: #141414;
+          --primary: #3b82f6;
+          --primary-foreground: #fff;
+          --ring: #3b82f6;
+          --radius: 4px;
+          --radius-sm: 2px;
+          --radius-md: 4px;
+          --radius-lg: 6px;
+
+          /* Base styles */
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
           left: 200px;
-          height: 100px;
+          height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
           bottom: 0px;
           right: 0px;
           overflow: hidden;
-          background: #111;
-          color: #fff;
+          background: var(--background);
+          color: var(--foreground);
         }
         .grid {
           display: grid;
-          grid-template-columns: auto 150px 300px 70px;
+          grid-template-columns: 1fr 150px 300px 70px;
+          height: 100%;
         }
         .properties {
-          border-right: 1px solid #999;
-          height: 100px;
+          background: transparent;
           overflow-y: auto;
           display: grid;
-          grid-template-columns: 33% 33% 33%;
+          grid-template-columns: repeat(3, 1fr);
+          border-right: 1px solid var(--border);
+          align-content: start;
         }
 
         .material-symbols-outlined {
@@ -43194,149 +43287,540 @@ var WccProperties = class extends DeesElement {
         }
 
         .properties .property {
-          padding: 5px;
-          background: #444;
-          border: 1px solid #000;
+          padding: 0.4rem;
+          background: transparent;
+          border-right: 1px solid var(--border);
+          border-bottom: 1px solid var(--border);
+          transition: all 0.15s ease;
+        }
+        
+        .properties .property:hover {
+          background: rgba(255, 255, 255, 0.02);
+        }
+        
+        .properties .property-label {
+          font-size: 0.65rem;
+          font-weight: 400;
+          color: #888;
+          margin-bottom: 0.2rem;
+          text-transform: capitalize;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
-        .properties input,
+        .properties input[type="text"],
+        .properties input[type="number"],
         .properties select {
           display: block;
           width: 100%;
-          background: #333;
-          border: none;
-          color: #fff;
+          padding: 0.25rem 0.4rem;
+          background: var(--input);
+          border: 1px solid transparent;
+          color: var(--foreground);
+          border-radius: var(--radius-sm);
+          font-size: 0.7rem;
+          transition: all 0.15s ease;
+          outline: none;
+        }
+        
+        .properties input[type="text"]:focus,
+        .properties input[type="number"]:focus,
+        .properties select:focus {
+          border-color: var(--primary);
+          background: rgba(59, 130, 246, 0.1);
+        }
+        
+        .properties input[type="checkbox"] {
+          width: 1rem;
+          height: 1rem;
+          cursor: pointer;
+          accent-color: var(--primary);
+        }
+        
+        .properties .editor-button {
+          padding: 0.25rem 0.5rem;
+          background: var(--input);
+          border: 1px solid transparent;
+          border-radius: var(--radius-sm);
+          color: var(--foreground);
+          font-size: 0.7rem;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          text-align: center;
+        }
+        
+        .properties .editor-button:hover {
+          border-color: var(--primary);
+          background: rgba(59, 130, 246, 0.1);
         }
 
         .viewportSelector,
         .themeSelector {
           user-select: none;
-          border-right: 1px solid #999;
+          background: transparent;
+          display: flex;
+          flex-direction: column;
+          border-right: 1px solid var(--border);
         }
         .selectorButtons2 {
           display: grid;
-          grid-template-columns: 50% 50%;
+          grid-template-columns: 1fr 1fr;
+          flex: 1;
         }
         .selectorButtons4 {
           display: grid;
-          grid-template-columns: 25% 25% 25% 25%;
+          grid-template-columns: repeat(4, 1fr);
+          flex: 1;
         }
         .button {
-          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0.5rem 0.25rem;
           text-align: center;
-          border: 1px solid #000;
-          transition: all 0.2s;
+          background: transparent;
+          border: 1px solid var(--border);
+          transition: all 0.15s ease;
+          cursor: pointer;
+          font-size: 0.65rem;
+          gap: 0.2rem;
+          color: #999;
         }
+        
         .button:hover {
-          color: #333;
-          background: #fff;
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
         }
 
         .button.selected {
-          background: #455a64;
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+          border-color: rgba(59, 130, 246, 0.3);
         }
 
         .button.selected:hover {
-          color: #ffffff;
-          background: #455a64;
+          background: rgba(59, 130, 246, 0.2);
+        }
+        
+        .button .material-symbols-outlined {
+          font-size: 18px;
+          font-variation-settings: 'FILL' 0, 'wght' 300;
+        }
+        
+        .button.selected .material-symbols-outlined {
+          font-variation-settings: 'FILL' 1, 'wght' 400;
         }
 
         .panelheading {
-          padding: 5px;
-          font-weight: bold;
-          background: #444;
-          border: 1px solid #000;
+          padding: 0.3rem 0.5rem;
+          font-weight: 500;
+          font-size: 0.65rem;
+          background: rgba(59, 130, 246, 0.03);
+          border-bottom: 1px solid var(--border);
+          color: #888;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
         }
         .docs {
-          text-align: center;
-          line-height: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           text-transform: uppercase;
+          background: transparent;
+          cursor: pointer;
+          font-size: 0.65rem;
+          font-weight: 500;
+          letter-spacing: 0.08em;
+          transition: all 0.15s ease;
+          color: #666;
         }
 
         .docs:hover {
-          color: #333;
-          background: #fff;
+          background: rgba(59, 130, 246, 0.05);
+          color: #999;
         }
 
         .warning {
           position: absolute;
-          background: #222;
-          color: #CCC;
-          top: 0px;
-          bottom: 0px;
-          left: 0px;
-          right: 520px;
-          text-align: center;
-          padding: 35px;
-          font-size: 25px;
+          background: rgba(20, 20, 20, 0.8);
+          color: #888;
+          top: 0.5rem;
+          bottom: 0.5rem;
+          left: 0.5rem;
+          right: calc(520px + 0.5rem);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 1.5rem;
+          font-size: 0.85rem;
+          border-radius: var(--radius-md);
+          border: 1px solid var(--border);
+          backdrop-filter: blur(8px);
+        }
+
+        .advanced-editor-container {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          height: ${this.editorHeight}px;
+          background: #050505;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          display: flex;
+          flex-direction: column;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+        }
+
+        .editor-header-bar {
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 36px;
+        }
+
+        .editor-header-title {
+          font-size: 0.7rem;
+          font-weight: 500;
+          color: #666;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+        }
+
+        .editor-close-all {
+          padding: 0.25rem 0.5rem;
+          background: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          border-radius: var(--radius-sm);
+          color: #999;
+          font-size: 0.65rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+
+        .editor-close-all:hover {
+          background: rgba(255, 255, 255, 0.05);
+          border-color: rgba(255, 255, 255, 0.12);
+          color: #f87171;
+        }
+
+        .editors-container {
+          flex: 1;
+          display: flex;
+          overflow-x: auto;
+          overflow-y: hidden;
+          gap: 0;
+          background: rgba(255, 255, 255, 0.02);
+          padding: 0.75rem;
+        }
+
+        .editors-container::-webkit-scrollbar {
+          height: 8px;
+        }
+
+        .editors-container::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.02);
+          border-radius: 4px;
+        }
+
+        .editors-container::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.08);
+          border-radius: 4px;
+        }
+
+        .editors-container::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.12);
+        }
+
+        .editor-instance {
+          min-width: 320px;
+          flex: 1;
+          max-width: 480px;
+          background: rgba(10, 10, 10, 0.6);
+          display: flex;
+          flex-direction: column;
+          border-radius: var(--radius);
+          overflow: hidden;
+          margin-right: 0.75rem;
+          border: 1px solid rgba(255, 255, 255, 0.06);
+          transition: all 0.2s ease;
+        }
+
+        .editor-instance:hover {
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .editor-instance:last-child {
+          margin-right: 0;
+        }
+
+        .editor-header {
+          padding: 0.5rem 0.75rem;
+          background: rgba(255, 255, 255, 0.02);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 36px;
+        }
+
+        .editor-title {
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: #999;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        .editor-actions {
+          display: flex;
+          gap: 0.25rem;
+        }
+
+        .editor-button {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+          background: transparent;
+          border: none;
+          color: #666;
+          font-size: 1rem;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          border-radius: var(--radius-sm);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .editor-button:hover {
+          background: rgba(255, 255, 255, 0.05);
+          color: #999;
+        }
+
+        .editor-button.primary {
+          color: #4ade80;
+        }
+
+        .editor-button.primary:hover {
+          background: rgba(74, 222, 128, 0.1);
+        }
+
+        .editor-content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          min-height: 0;
+          position: relative;
+        }
+
+        .editor-textarea {
+          width: 100%;
+          height: 100%;
+          background: transparent;
+          border: none;
+          color: #d0d0d0;
+          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+          font-size: 0.8125rem;
+          line-height: 1.6;
+          padding: 0.75rem;
+          resize: none;
+          outline: none;
+          transition: all 0.15s ease;
+          overflow: auto;
+        }
+
+        .editor-textarea:focus {
+          background: rgba(255, 255, 255, 0.01);
+        }
+
+        .editor-textarea::selection {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .editor-error {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 0.5rem 0.75rem;
+          background: rgba(239, 68, 68, 0.9);
+          backdrop-filter: blur(4px);
+          color: #fff;
+          font-size: 0.7rem;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          border-top: 1px solid rgba(239, 68, 68, 0.5);
+        }
+
+        .editor-error::before {
+          content: '!';
+          display: inline-flex;
+          width: 16px;
+          height: 16px;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 50%;
+          font-size: 0.65rem;
+          font-weight: bold;
+        }
+
+        .main-content {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 100px;
         }
       </style>
-      <div class="grid">
-        <div class="properties">
-          <div class="panelheading">Properties</div>
-          ${this.propertyContent}
+      ${this.editingProperties.length > 0 ? x`
+        <div class="advanced-editor-container">
+          <div class="editor-header-bar">
+            <div class="editor-header-title">Property Editors</div>
+            <button class="editor-close-all" @click=${this.closeAllEditors}>
+              Close All
+            </button>
+          </div>
+          <div class="editors-container">
+            ${this.editingProperties.length === 0 ? x`
+              <div style="
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #666;
+                font-size: 0.875rem;
+                text-align: center;
+                padding: 2rem;
+              ">
+                <div>
+                  <div style="margin-bottom: 0.5rem; font-size: 1.5rem; opacity: 0.5;">{ }</div>
+                  <div>No properties being edited</div>
+                  <div style="font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7;">Click "Edit Object/Array" buttons to start editing</div>
+                </div>
+              </div>
+            ` : null}
+            ${this.editingProperties.map((prop) => x`
+              <div class="editor-instance">
+                <div class="editor-header">
+                  <div class="editor-title">${prop.name}</div>
+                  <div class="editor-actions">
+                    <button class="editor-button" @click=${() => this.handleEditorCancel(prop.id)}>✕</button>
+                    <button class="editor-button primary" @click=${() => this.handleEditorSave(prop.id)}>✓</button>
+                  </div>
+                </div>
+                <div class="editor-content">
+                  <textarea 
+                    class="editor-textarea"
+                    .value=${prop.editorValue}
+                    @input=${(e8) => {
+      const editor = this.editingProperties.find((p5) => p5.id === prop.id);
+      if (editor) {
+        editor.editorValue = e8.target.value;
+        editor.editorError = "";
+        this.requestUpdate();
+      }
+    }}
+                    @keydown=${(e8) => {
+      if (e8.key === "Tab") {
+        e8.preventDefault();
+        const target = e8.target;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const value2 = target.value;
+        target.value = value2.substring(0, start) + "  " + value2.substring(end);
+        target.selectionStart = target.selectionEnd = start + 2;
+      }
+    }}
+                  ></textarea>
+                  ${prop.editorError ? x`
+                    <div class="editor-error">${prop.editorError}</div>
+                  ` : null}
+                </div>
+              </div>
+            `)}
+          </div>
         </div>
-        <div class="themeSelector">
-          <div class="panelheading">Theme</div>
-          <div class="selectorButtons2">
-            <div
-              class="button ${this.selectedTheme === "dark" ? "selected" : null}"
-              @click=${() => {
+      ` : null}
+      <div class="main-content">
+        <div class="grid">
+          <div class="properties">
+            ${this.propertyContent}
+          </div>
+          <div class="themeSelector">
+            <div class="panelheading">Theme</div>
+            <div class="selectorButtons2">
+              <div
+                class="button ${this.selectedTheme === "dark" ? "selected" : null}"
+                @click=${() => {
       this.selectTheme("dark");
     }}
-            >
-              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
-            </div>
-            <div
-              class="button ${this.selectedTheme === "bright" ? "selected" : null}"
-              @click=${() => {
+              >
+                Dark<i class="material-symbols-outlined">brightness_3</i>
+              </div>
+              <div
+                class="button ${this.selectedTheme === "bright" ? "selected" : null}"
+                @click=${() => {
       this.selectTheme("bright");
     }}
-            >
-              Bright<br /><i class="material-symbols-outlined">flare</i>
+              >
+                Bright<i class="material-symbols-outlined">flare</i>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="viewportSelector">
-          <div class="panelheading">Viewport</div>
-          <div class="selectorButtons4">
-            <div
-              class="button ${this.selectedViewport === "phone" ? "selected" : null}"
-              @click=${() => {
+          <div class="viewportSelector">
+            <div class="panelheading">Viewport</div>
+            <div class="selectorButtons4">
+              <div
+                class="button ${this.selectedViewport === "phone" ? "selected" : null}"
+                @click=${() => {
       this.selectViewport("phone");
     }}
-            >
-              Phone<br /><i class="material-symbols-outlined">smartphone</i>
-            </div>
-            <div
-              class="button ${this.selectedViewport === "phablet" ? "selected" : null}"
-              @click=${() => {
+              >
+                Phone<i class="material-symbols-outlined">smartphone</i>
+              </div>
+              <div
+                class="button ${this.selectedViewport === "phablet" ? "selected" : null}"
+                @click=${() => {
       this.selectViewport("phablet");
     }}
-            >
-              Phablet<br /><i class="material-symbols-outlined">smartphone</i>
-            </div>
-            <div
-              class="button ${this.selectedViewport === "tablet" ? "selected" : null}"
-              @click=${() => {
+              >
+                Phablet<i class="material-symbols-outlined">smartphone</i>
+              </div>
+              <div
+                class="button ${this.selectedViewport === "tablet" ? "selected" : null}"
+                @click=${() => {
       this.selectViewport("tablet");
     }}
-            >
-              Tablet<br /><i class="material-symbols-outlined">tablet</i>
-            </div>
-            <div
-              class="button ${this.selectedViewport === "desktop" || this.selectedViewport === "native" ? "selected" : null}"
-              @click=${() => {
+              >
+                Tablet<i class="material-symbols-outlined">tablet</i>
+              </div>
+              <div
+                class="button ${this.selectedViewport === "desktop" || this.selectedViewport === "native" ? "selected" : null}"
+                @click=${() => {
       this.selectViewport("native");
     }}
-            >
-              Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
+              >
+                Desktop<i class="material-symbols-outlined">desktop_windows</i>
+              </div>
             </div>
           </div>
+          <div class="docs">Docs</div>
         </div>
-        <div class="docs">Docs</div>
+        ${this.warning ? x`<div class="warning">${this.warning}</div>` : null}
       </div>
-      ${this.warning ? x`<div class="warning">${this.warning}</div>` : null}
     `;
   }
   async findElementRecursively(container, elementClass, maxDepth = 5) {
@@ -43447,7 +43931,7 @@ var WccProperties = class extends DeesElement {
           propertyArray.push(
             x`
             <div class="property">
-              ${key2} / ${propertyTypeString}<br />
+              <div class="property-label">${key2} (${propertyTypeString})</div>
               ${(() => {
               switch (propertyTypeString) {
                 case "Boolean":
@@ -43492,6 +43976,17 @@ var WccProperties = class extends DeesElement {
                         `;
                   })}
                     </select>`;
+                case "Object":
+                case "Array":
+                  return x`<button
+                      class="editor-button"
+                      style="width: 100%; margin-top: 0.25rem;"
+                      @click="${() => this.openAdvancedEditor(key2, firstFoundInstantiatedElement[key2], firstFoundInstantiatedElement)}"
+                    >
+                      Edit ${propertyTypeString}
+                    </button>`;
+                default:
+                  return x`<div style="color: #666; font-size: 0.7rem;">Unsupported type</div>`;
               }
             })()}
             </div>
@@ -43537,6 +44032,73 @@ var WccProperties = class extends DeesElement {
     );
     this.dashboardRef.buildUrl();
   }
+  openAdvancedEditor(propertyName, value2, element4) {
+    const existingEditor = this.editingProperties.find((p5) => p5.name === propertyName && p5.element === element4);
+    if (existingEditor) {
+      return;
+    }
+    const newEditor = {
+      id: `${propertyName}-${Date.now()}`,
+      name: propertyName,
+      value: value2,
+      element: element4,
+      editorValue: JSON.stringify(value2, null, 2),
+      editorError: ""
+    };
+    this.editingProperties = [...this.editingProperties, newEditor];
+    if (this.editingProperties.length === 1) {
+      this.dispatchEvent(
+        new CustomEvent("editorStateChanged", {
+          detail: { isOpen: true },
+          bubbles: true
+        })
+      );
+    }
+  }
+  handleEditorSave(editorId) {
+    const editor = this.editingProperties.find((p5) => p5.id === editorId);
+    if (!editor) return;
+    try {
+      const parsedValue = JSON.parse(editor.editorValue);
+      editor.element[editor.name] = parsedValue;
+      this.editingProperties = this.editingProperties.filter((p5) => p5.id !== editorId);
+      if (this.editingProperties.length === 0) {
+        this.dispatchEvent(
+          new CustomEvent("editorStateChanged", {
+            detail: { isOpen: false },
+            bubbles: true
+          })
+        );
+      }
+      this.createProperties();
+    } catch (error) {
+      const editorIndex = this.editingProperties.findIndex((p5) => p5.id === editorId);
+      if (editorIndex !== -1) {
+        this.editingProperties[editorIndex].editorError = `Invalid JSON: ${error.message}`;
+        this.requestUpdate();
+      }
+    }
+  }
+  handleEditorCancel(editorId) {
+    this.editingProperties = this.editingProperties.filter((p5) => p5.id !== editorId);
+    if (this.editingProperties.length === 0) {
+      this.dispatchEvent(
+        new CustomEvent("editorStateChanged", {
+          detail: { isOpen: false },
+          bubbles: true
+        })
+      );
+    }
+  }
+  closeAllEditors() {
+    this.editingProperties = [];
+    this.dispatchEvent(
+      new CustomEvent("editorStateChanged", {
+        detail: { isOpen: false },
+        bubbles: true
+      })
+    );
+  }
 };
 __decorateClass([
   n4({
@@ -43558,6 +44120,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], WccProperties.prototype, "propertyContent", 2);
+__decorateClass([
+  r5()
+], WccProperties.prototype, "editingProperties", 2);
 WccProperties = __decorateClass([
   t4("wcc-properties")
 ], WccProperties);
@@ -43574,6 +44139,7 @@ var WccDashboard2 = class extends DeesElement {
     this.frameScrollY = 0;
     this.sidebarScrollY = 0;
     this.scrollPositionsApplied = false;
+    this.scrollListenersAttached = false;
     if (elementsArg) {
       this.elements = elementsArg;
       console.log("got elements:");
@@ -43620,6 +44186,13 @@ var WccDashboard2 = class extends DeesElement {
     }}
         @selectedTheme=${(eventArg) => {
       this.selectedTheme = eventArg.detail;
+    }}
+        @editorStateChanged=${async (eventArg) => {
+      const frame = await this.wccFrame;
+      if (frame) {
+        frame.advancedEditorOpen = eventArg.detail.isOpen;
+        frame.requestUpdate();
+      }
     }}
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
@@ -43721,6 +44294,9 @@ var WccDashboard2 = class extends DeesElement {
     this.domtools.router.pushUrl(fullUrl);
   }
   async setupScrollListeners() {
+    if (this.scrollListenersAttached) {
+      return;
+    }
     const wccFrame = await this.wccFrame;
     const wccSidebar = this.shadowRoot.querySelector("wcc-sidebar");
     if (wccFrame) {
@@ -43728,6 +44304,7 @@ var WccDashboard2 = class extends DeesElement {
         this.frameScrollY = wccFrame.scrollTop;
         this.debouncedScrollUpdate();
       });
+      this.scrollListenersAttached = true;
     }
     if (wccSidebar) {
       wccSidebar.addEventListener("scroll", () => {
@@ -43794,12 +44371,6 @@ __decorateClass([
 __decorateClass([
   n4()
 ], WccDashboard2.prototype, "warning", 2);
-__decorateClass([
-  n4()
-], WccDashboard2.prototype, "frameScrollY", 2);
-__decorateClass([
-  n4()
-], WccDashboard2.prototype, "sidebarScrollY", 2);
 __decorateClass([
   r6("wcc-frame")
 ], WccDashboard2.prototype, "wccFrame", 2);