@design.estate/dees-wcctools 1.0.95 → 1.0.97

package/dist_watch/bundle.js

@@ -43341,24 +43341,29 @@ var WccProperties = class extends DeesElement {
   }
   async findElementRecursively(container, elementClass, maxDepth = 5) {
     if (maxDepth <= 0) return null;
-    for (const child of Array.from(container.children)) {
-      if (child instanceof elementClass) {
-        return child;
+    try {
+      for (const child of Array.from(container.children)) {
+        if (child instanceof elementClass) {
+          return child;
+        }
       }
-    }
-    for (const child of Array.from(container.children)) {
-      if (child.shadowRoot) {
-        const found2 = await this.findElementRecursively(child.shadowRoot, elementClass, maxDepth - 1);
-        if (found2) return found2;
+      for (const child of Array.from(container.children)) {
+        const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
+        if (found) return found;
+        if (child.shadowRoot) {
+          const shadowFound = await this.findElementRecursively(child.shadowRoot, elementClass, maxDepth - 1);
+          if (shadowFound) return shadowFound;
+        }
       }
-      const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
-      if (found) return found;
+    } catch (error) {
+      console.error("Error in findElementRecursively:", error);
     }
     return null;
   }
   async createProperties() {
     console.log("creating properties for:");
     console.log(this.selectedItem);
+    this.warning = null;
     const isEnumeration = (propertyArg) => {
       const keys2 = Object.keys(propertyArg.type);
       const values = [];
@@ -43410,14 +43415,19 @@ var WccProperties = class extends DeesElement {
       let retries = 0;
       while (!firstFoundInstantiatedElement && retries < 5) {
         await new Promise((resolve2) => setTimeout(resolve2, 200));
-        firstFoundInstantiatedElement = await this.findElementRecursively(
-          viewport,
-          this.selectedItem
-        );
+        try {
+          firstFoundInstantiatedElement = await this.findElementRecursively(
+            viewport,
+            this.selectedItem
+          );
+        } catch (error) {
+          console.error("Error during element search retry:", error);
+        }
         retries++;
       }
       if (!firstFoundInstantiatedElement) {
         this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
+        this.propertyContent = [];
         return;
       }
       const classProperties = anonItem.elementProperties;
@@ -43431,47 +43441,48 @@ var WccProperties = class extends DeesElement {
         if (key2 === "goBright" || key2 === "domtools") {
           continue;
         }
-        const property = classProperties.get(key2);
-        const propertyTypeString = await determinePropertyType(property);
-        propertyArray.push(
-          x`
+        try {
+          const property = classProperties.get(key2);
+          const propertyTypeString = await determinePropertyType(property);
+          propertyArray.push(
+            x`
             <div class="property">
               ${key2} / ${propertyTypeString}<br />
               ${(() => {
-            switch (propertyTypeString) {
-              case "Boolean":
-                return x`<input
+              switch (propertyTypeString) {
+                case "Boolean":
+                  return x`<input
                       type="checkbox"
                       ?checked=${firstFoundInstantiatedElement[key2]}
                       @input="${(eventArg) => {
-                  firstFoundInstantiatedElement[key2] = eventArg.target.checked;
-                }}"
+                    firstFoundInstantiatedElement[key2] = eventArg.target.checked;
+                  }}"
                     />`;
-              case "String":
-                return x`<input
+                case "String":
+                  return x`<input
                       type="text"
                       value=${firstFoundInstantiatedElement[key2]}
                       @input="${(eventArg) => {
-                  firstFoundInstantiatedElement[key2] = eventArg.target.value;
-                }}"
+                    firstFoundInstantiatedElement[key2] = eventArg.target.value;
+                  }}"
                     />`;
-              case "Number":
-                return x`<input
+                case "Number":
+                  return x`<input
                       type="number"
                       value=${firstFoundInstantiatedElement[key2]}
                       @input="${(eventArg) => {
-                  firstFoundInstantiatedElement[key2] = eventArg.target.value;
-                }}"
+                    firstFoundInstantiatedElement[key2] = eventArg.target.value;
+                  }}"
                     />`;
-              case "Enum":
-                const enumValues = getEnumValues(property);
-                return x`<select
+                case "Enum":
+                  const enumValues = getEnumValues(property);
+                  return x`<select
                       @change="${(eventArg) => {
-                  firstFoundInstantiatedElement[key2] = eventArg.target.value;
-                }}"
+                    firstFoundInstantiatedElement[key2] = eventArg.target.value;
+                  }}"
                     >
                       ${enumValues.map((valueArg) => {
-                  return x`
+                    return x`
                           <option
                             ?selected=${valueArg === firstFoundInstantiatedElement[key2] ? true : false}
                             name="${valueArg}"
@@ -43479,13 +43490,16 @@ var WccProperties = class extends DeesElement {
                             ${valueArg}
                           </option>
                         `;
-                })}
+                  })}
                     </select>`;
-            }
-          })()}
+              }
+            })()}
             </div>
           `
-        );
+          );
+        } catch (error) {
+          console.error(`Error processing property ${key2}:`, error);
+        }
       }
       this.propertyContent = propertyArray;
     } else {
@@ -43505,7 +43519,12 @@ var WccProperties = class extends DeesElement {
     this.dashboardRef.buildUrl();
   }
   async scheduleUpdate() {
-    await this.createProperties();
+    try {
+      await this.createProperties();
+    } catch (error) {
+      console.error("Error creating properties:", error);
+      this.propertyContent = [];
+    }
     super.scheduleUpdate();
   }
   selectViewport(viewport) {
@@ -43724,7 +43743,12 @@ var setupWccTools = (elementsArg, pagesArg) => {
 // test/elements/index.ts
 var elements_exports = {};
 __export(elements_exports, {
-  TestDemoelement: () => TestDemoelement
+  TestComplexTypes: () => TestComplexTypes,
+  TestDemoelement: () => TestDemoelement,
+  TestEdgeCases: () => TestEdgeCases,
+  TestNested: () => TestNested,
+  TestNoProps: () => TestNoProps,
+  TestWithWrapper: () => TestWithWrapper
 });
 
 // test/elements/test-demoelement.ts
@@ -43833,6 +43857,626 @@ TestDemoelement = __decorateClass([
   t4("test-demoelement")
 ], TestDemoelement);
 
+// test/elements/test-noprops.ts
+var TestNoProps = class extends DeesElement {
+  render() {
+    return x`
+      <div class="message">
+        This element has no @property decorators.
+        Properties panel should handle this gracefully.
+      </div>
+    `;
+  }
+};
+TestNoProps.demo = () => x`<test-noprops></test-noprops>`;
+TestNoProps.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f0f0f0;
+        border: 2px solid #ccc;
+        border-radius: 8px;
+      }
+      .message {
+        font-family: monospace;
+        color: #666;
+      }
+    `
+];
+TestNoProps = __decorateClass([
+  t4("test-noprops")
+], TestNoProps);
+
+// test/elements/test-complextypes.ts
+var TestComplexTypes = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.stringArray = ["apple", "banana", "cherry"];
+    this.numberArray = [1, 2, 3, 4, 5];
+    this.complexData = {
+      name: "Default Name",
+      age: 0,
+      tags: [],
+      metadata: {
+        created: /* @__PURE__ */ new Date(),
+        modified: /* @__PURE__ */ new Date(),
+        author: "Unknown"
+      }
+    };
+    this.simpleObject = {
+      key1: "value1",
+      key2: "value2",
+      key3: 123
+    };
+    this.functionProperty = () => {
+      console.log("This is a function property");
+    };
+    this.dateProperty = /* @__PURE__ */ new Date();
+  }
+  render() {
+    return x`
+      <div class="section">
+        <span class="label">String Array:</span>
+        <span class="value">${this.stringArray.join(", ")}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Number Array:</span>
+        <span class="value">${this.numberArray.join(", ")}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Complex Data:</span>
+        <pre>${JSON.stringify(this.complexData, null, 2)}</pre>
+      </div>
+      
+      <div class="section">
+        <span class="label">Simple Object:</span>
+        <pre>${JSON.stringify(this.simpleObject, null, 2)}</pre>
+      </div>
+      
+      <div class="section">
+        <span class="label">Date Property:</span>
+        <span class="value">${this.dateProperty.toLocaleString()}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Function Property:</span>
+        <span class="value">${typeof this.functionProperty}</span>
+      </div>
+    `;
+  }
+};
+TestComplexTypes.demo = () => x`
+    <test-complextypes 
+      .complexData=${{
+  name: "Test User",
+  age: 25,
+  tags: ["developer", "designer"],
+  metadata: {
+    created: /* @__PURE__ */ new Date(),
+    modified: /* @__PURE__ */ new Date(),
+    author: "System"
+  }
+}}
+    ></test-complextypes>
+  `;
+TestComplexTypes.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f5f5f5;
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        font-family: monospace;
+      }
+      .section {
+        margin: 10px 0;
+        padding: 10px;
+        background: white;
+        border-radius: 4px;
+      }
+      .label {
+        font-weight: bold;
+        color: #333;
+      }
+      .value {
+        color: #666;
+        margin-left: 10px;
+      }
+      pre {
+        background: #f0f0f0;
+        padding: 8px;
+        border-radius: 4px;
+        overflow-x: auto;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: Array })
+], TestComplexTypes.prototype, "stringArray", 2);
+__decorateClass([
+  n4({ type: Array })
+], TestComplexTypes.prototype, "numberArray", 2);
+__decorateClass([
+  n4({ attribute: false })
+], TestComplexTypes.prototype, "complexData", 2);
+__decorateClass([
+  n4({ type: Object })
+], TestComplexTypes.prototype, "simpleObject", 2);
+__decorateClass([
+  n4({ attribute: false })
+], TestComplexTypes.prototype, "functionProperty", 2);
+__decorateClass([
+  n4({ type: Date })
+], TestComplexTypes.prototype, "dateProperty", 2);
+TestComplexTypes = __decorateClass([
+  t4("test-complextypes")
+], TestComplexTypes);
+
+// ts_demotools/demotools.ts
+var DeesDemoWrapper = class extends DeesElement {
+  render() {
+    return x`
+      <slot></slot>
+    `;
+  }
+  async firstUpdated() {
+    await this.updateComplete;
+    await new Promise((resolve2) => setTimeout(resolve2, 50));
+    if (this.children.length > 0 && this.runAfterRender) {
+      try {
+        await this.runAfterRender(this);
+      } catch (error) {
+        console.error("Error in runAfterRender:", error);
+      }
+    }
+  }
+};
+DeesDemoWrapper.styles = [
+  i`
+      :host {
+        display: contents;
+      }
+    `
+];
+__decorateClass([
+  n4({ attribute: false })
+], DeesDemoWrapper.prototype, "runAfterRender", 2);
+DeesDemoWrapper = __decorateClass([
+  t4("dees-demowrapper")
+], DeesDemoWrapper);
+
+// test/elements/test-withwrapper.ts
+var TestWithWrapper = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.dynamicValue = "Initial value";
+    this.counter = 0;
+    this.isActive = false;
+  }
+  render() {
+    return x`
+      <div class="wrapper-info">
+        This element is wrapped with dees-demowrapper in its demo
+      </div>
+      
+      <div class="inner-content">
+        <h3>Dynamic Value: ${this.dynamicValue}</h3>
+        <p>Counter: ${this.counter}</p>
+        <p>Active: ${this.isActive ? "Yes" : "No"}</p>
+        
+        <button @click=${() => this.counter++}>Increment</button>
+        <button @click=${() => this.isActive = !this.isActive}>Toggle Active</button>
+        <button @click=${() => this.dynamicValue = "Clicked!"}>Change Value</button>
+      </div>
+      
+      <div class="status">
+        Properties panel should detect this element inside the wrapper
+      </div>
+    `;
+  }
+};
+TestWithWrapper.demo = () => x`
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+  console.log("DemoWrapper: Found wrapper element", wrapper);
+  const testElement = wrapper.querySelector("test-withwrapper");
+  if (testElement) {
+    console.log("DemoWrapper: Found test-withwrapper element");
+    testElement.dynamicValue = "Set by demo wrapper!";
+    testElement.counter = 100;
+    const innerDiv = wrapper.querySelector(".inner-content");
+    console.log("DemoWrapper: Found inner div:", innerDiv);
+    const allButtons = wrapper.querySelectorAll("button");
+    console.log(`DemoWrapper: Found ${allButtons.length} buttons`);
+  }
+}}>
+      <test-withwrapper></test-withwrapper>
+      <div style="margin-top: 10px; padding: 10px; background: #e0e0e0;">
+        This div is also inside the wrapper
+      </div>
+    </dees-demowrapper>
+  `;
+TestWithWrapper.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #e8f5e9;
+        border: 2px solid #4caf50;
+        border-radius: 8px;
+      }
+      .wrapper-info {
+        background: #c8e6c9;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      .inner-content {
+        background: white;
+        padding: 15px;
+        border-radius: 4px;
+        margin: 10px 0;
+      }
+      button {
+        background: #4caf50;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      button:hover {
+        background: #45a049;
+      }
+      .status {
+        margin-top: 10px;
+        font-family: monospace;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], TestWithWrapper.prototype, "dynamicValue", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestWithWrapper.prototype, "counter", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], TestWithWrapper.prototype, "isActive", 2);
+TestWithWrapper = __decorateClass([
+  t4("test-withwrapper")
+], TestWithWrapper);
+
+// test/elements/test-edgecases.ts
+var TestEdgeCases = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.nullableString = null;
+    this.undefinedNumber = void 0;
+    this.longString = "Lorem ipsum ".repeat(50);
+    this.specialChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?`~";
+    this.htmlString = '<script>alert("test")<\/script><b>Bold text</b>';
+    this.infinityNumber = Infinity;
+    this.nanNumber = NaN;
+    this.veryLargeNumber = Number.MAX_SAFE_INTEGER;
+    this.verySmallNumber = Number.MIN_SAFE_INTEGER;
+    this.floatNumber = 3.14159265359;
+    this.booleanString = "false";
+    this.booleanNumber = 0;
+    this.emptyString = "";
+    this.emptyArray = [];
+    this.emptyObject = {};
+    this.circularRef = (() => {
+      const obj = { name: "circular" };
+      obj.self = obj;
+      return obj;
+    })();
+  }
+  formatValue(value2) {
+    if (value2 === null) return "null";
+    if (value2 === void 0) return "undefined";
+    if (value2 === Infinity) return "Infinity";
+    if (Number.isNaN(value2)) return "NaN";
+    if (typeof value2 === "string" && value2.length > 50) {
+      return value2.substring(0, 50) + "...";
+    }
+    if (typeof value2 === "object") {
+      try {
+        return JSON.stringify(value2);
+      } catch (e8) {
+        return "[Circular Reference]";
+      }
+    }
+    return String(value2);
+  }
+  render() {
+    return x`
+      <div class="warning">
+        ⚠️ This element tests edge cases and problematic values
+      </div>
+      
+      <div class="property">
+        <span class="label">Nullable String:</span>
+        <span class="value special">${this.formatValue(this.nullableString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Undefined Number:</span>
+        <span class="value special">${this.formatValue(this.undefinedNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Long String:</span>
+        <span class="value">${this.formatValue(this.longString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Special Characters:</span>
+        <span class="value">${this.specialChars}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">HTML String (escaped):</span>
+        <span class="value">${this.htmlString}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Infinity:</span>
+        <span class="value special">${this.formatValue(this.infinityNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">NaN:</span>
+        <span class="value special">${this.formatValue(this.nanNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Very Large Number:</span>
+        <span class="value">${this.veryLargeNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Float Number:</span>
+        <span class="value">${this.floatNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Empty String:</span>
+        <span class="value special">[empty]</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Circular Reference:</span>
+        <span class="value special">${this.formatValue(this.circularRef)}</span>
+      </div>
+    `;
+  }
+};
+TestEdgeCases.demo = () => x`<test-edgecases></test-edgecases>`;
+TestEdgeCases.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #fff3e0;
+        border: 2px solid #ff9800;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 12px;
+      }
+      .warning {
+        background: #ffe0b2;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        color: #e65100;
+      }
+      .property {
+        margin: 5px 0;
+        padding: 5px;
+        background: white;
+        border-radius: 2px;
+        word-break: break-all;
+      }
+      .label {
+        font-weight: bold;
+        color: #f57c00;
+      }
+      .value {
+        color: #666;
+      }
+      .special {
+        background: #ffccbc;
+        padding: 2px 4px;
+        border-radius: 2px;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "nullableString", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "undefinedNumber", 2);
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "longString", 2);
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "specialChars", 2);
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "htmlString", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "infinityNumber", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "nanNumber", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "veryLargeNumber", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "verySmallNumber", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "floatNumber", 2);
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "booleanString", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestEdgeCases.prototype, "booleanNumber", 2);
+__decorateClass([
+  n4({ type: String })
+], TestEdgeCases.prototype, "emptyString", 2);
+__decorateClass([
+  n4({ type: Array })
+], TestEdgeCases.prototype, "emptyArray", 2);
+__decorateClass([
+  n4({ type: Object })
+], TestEdgeCases.prototype, "emptyObject", 2);
+__decorateClass([
+  n4({ attribute: false })
+], TestEdgeCases.prototype, "circularRef", 2);
+TestEdgeCases = __decorateClass([
+  t4("test-edgecases")
+], TestEdgeCases);
+
+// test/elements/test-nested.ts
+var TestNestedWrapper = class extends DeesElement {
+  render() {
+    return x`
+      <div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+TestNestedWrapper = __decorateClass([
+  t4("test-nested-wrapper")
+], TestNestedWrapper);
+var TestNestedTarget = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.message = "I am deeply nested!";
+    this.depth = 0;
+    this.found = false;
+  }
+  render() {
+    return x`
+      <div class="info">
+        <strong>Nested Target Element</strong><br>
+        Message: ${this.message}<br>
+        Depth: ${this.depth}<br>
+        Found by properties panel: ${this.found ? "\u2705" : "\u274C"}
+      </div>
+    `;
+  }
+};
+TestNestedTarget.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 15px;
+        background: #e1f5fe;
+        border: 2px solid #0288d1;
+        border-radius: 4px;
+        margin: 5px;
+      }
+      .info {
+        font-family: monospace;
+        color: #01579b;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], TestNestedTarget.prototype, "message", 2);
+__decorateClass([
+  n4({ type: Number })
+], TestNestedTarget.prototype, "depth", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], TestNestedTarget.prototype, "found", 2);
+TestNestedTarget = __decorateClass([
+  t4("test-nested-target")
+], TestNestedTarget);
+var TestNested = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.testId = "nested-test";
+  }
+  render() {
+    return x`
+      <div class="explanation">
+        <h3>Nested Structure Test</h3>
+        <p>The actual element with properties is nested deep inside multiple layers:</p>
+      </div>
+      
+      <div class="structure">
+        <test-nested-wrapper>
+          <div style="padding: 10px; background: #ffe;">
+            <test-nested-wrapper>
+              <div style="padding: 10px; background: #efe;">
+                <test-nested-wrapper>
+                  <div style="padding: 10px; background: #eef;">
+                    <!-- The target element is here, 3 levels deep -->
+                    <test-nested-target
+                      .message=${"Found me at depth 3!"}
+                      .depth=${3}
+                    ></test-nested-target>
+                  </div>
+                </test-nested-wrapper>
+              </div>
+            </test-nested-wrapper>
+          </div>
+        </test-nested-wrapper>
+      </div>
+      
+      <div style="margin-top: 10px; font-style: italic; color: #666;">
+        Properties panel should find the test-nested-target element despite the deep nesting.
+      </div>
+    `;
+  }
+};
+TestNested.demo = () => x`
+    <test-nested></test-nested>
+  `;
+TestNested.styles = [
+  i`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f5f5f5;
+        border: 2px solid #999;
+        border-radius: 8px;
+      }
+      .explanation {
+        background: #fff;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      .structure {
+        background: #f0f0f0;
+        padding: 10px;
+        border-radius: 4px;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], TestNested.prototype, "testId", 2);
+TestNested = __decorateClass([
+  t4("test-nested")
+], TestNested);
+
 // test/pages/index.ts
 var pages_exports = {};
 __export(pages_exports, {