@design.estate/dees-wcctools 1.0.100 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.100",
+  "version": "1.1.0",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {

package/readme.hints.md

@@ -1,5 +1,107 @@
 # Project Hints and Findings
 
+## UI Redesign with Shadcn-like Styles (2025-06-27)
+
+### Changes Made
+Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-like design patterns:
+
+1. **Color System**: Implemented CSS variables for theming:
+   - `--background`, `--foreground`, `--card`, `--primary`, `--secondary`
+   - `--muted`, `--accent`, `--border`, `--input`, `--ring`
+   - Consistent dark theme with subtle borders and proper contrast
+   - Dynamic theme switching between light and dark modes
+
+2. **Properties Panel Improvements (Updated)**: 
+   - Changed from fixed 3-column grid to flexible flexbox layout
+   - Properties now wrap and use space more efficiently
+   - Added rounded corners (using --radius-md) and better spacing
+   - Property items use flexbox with min-width for responsive layout
+   - Property labels now show as styled headers with type info
+   - Form controls updated with shadcn-style focus states and transitions
+   - Complex properties (Objects/Arrays) show "Edit" button
+   - Advanced JSON editor appears above properties panel when editing complex types
+   - Dynamic height adjustment (50px when editor is open, 120px normally)
+
+3. **Sidebar Styling**:
+   - Updated with consistent color scheme
+   - Added rounded corners to menu items
+   - Improved hover states with smooth transitions
+   - Better typography with proper font weights
+
+4. **Advanced Property Editor**:
+   - JSON editor for complex types (Objects and Arrays)
+   - Monaco-style monospace font for code editing
+   - Live updates to element properties
+   - Positioned above the properties panel with smooth transitions
+
+5. **Theme and Viewport Selectors (New)**:
+   - Redesigned buttons with flexbox layout for better icon/text alignment
+   - Added hover effects with transform and shadow
+   - Smooth transitions on all interactive elements
+   - Selected state uses primary color variables
+   - Icons reduced in size for better balance
+
+6. **Form Controls (New)**:
+   - Input fields and selects now have:
+     - Rounded corners (--radius-sm)
+     - Consistent padding (0.5rem 0.75rem)
+     - Focus states with ring effect using box-shadow
+     - Smooth transition animations
+   - Checkboxes use accent-color for theming
+
+### Technical Details
+- Uses system font stack ('Inter' preferred) for better native appearance
+- Subtle borders with CSS variables for consistency
+- Consistent spacing using rem units
+- Smooth transitions (0.2s ease) for interactive elements
+- Custom scrollbar styling for better visual integration
+- Grid layout with 1px gaps creating subtle dividers
+- Warning display with backdrop blur and rounded corners
+
+## Advanced Complex Properties Editor (2025-06-27)
+
+### Overview
+Implemented an advanced editor for complex properties (Arrays and Objects) that appears between the wcc-properties panel and frame when activated.
+
+### Features
+1. **Dynamic Layout**: Frame shrinks by 300px from bottom when editor opens
+2. **Multiple Editors**: Can edit multiple properties simultaneously side by side
+3. **JSON Editor**: 
+   - Monospace font for code editing
+   - Tab key support for indentation
+   - Syntax validation with error messages
+   - Live preview of changes
+4. **Smooth Transitions**: Animated opening/closing with 0.3s ease
+5. **Error Handling**: Invalid JSON shows clear error messages that disappear on typing
+6. **Close All Button**: Single button to close all open editors at once
+
+### Technical Implementation (Updated)
+- **State Management**: Changed from single editor to array of editors with unique IDs
+- **Editor Structure**: Each editor instance contains:
+  - `id`: Unique identifier (`propertyName-timestamp`)
+  - `name`: Property name
+  - `value`: Original value
+  - `element`: Reference to the element
+  - `editorValue`: Current JSON string
+  - `editorError`: Validation error message
+- **Event System**: Uses custom 'editorStateChanged' event to communicate with parent dashboard
+- **Dynamic Styling**: wcc-frame's bottom position changes from 100px to 400px when any editor is open
+- **Property Types**: Object and Array properties show "Edit Object/Array" button instead of inline controls
+
+### User Flow
+1. Click "Edit Object/Array" button on complex property
+2. Editor slides up between properties panel and frame
+3. Click additional "Edit" buttons to open more properties side by side
+4. Each editor can be saved/cancelled independently
+5. "Close All" button dismisses all editors at once
+6. Frame automatically resizes back when all editors are closed
+
+### Layout Details
+- **Container**: Flexbox with horizontal scrolling when multiple editors overflow
+- **Editor Width**: Min 300px, max 500px, flexible between
+- **Scrollbar**: Custom styled thin scrollbar for horizontal overflow
+- **Header Bar**: Fixed top bar with "Property Editors" title and "Close All" button
+
 ## Properties Panel Element Detection Issue (Fixed)
 
 ### Problem

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '1.0.100',
+  version: '1.1.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

package/ts_web/elements/wcc-dashboard.ts

@@ -38,12 +38,8 @@ export class WccDashboard extends DeesElement {
   @property()
   public warning: string = null;
   
-  @property()
-  public frameScrollY: number = 0;
-  
-  @property()
-  public sidebarScrollY: number = 0;
-  
+  private frameScrollY: number = 0;
+  private sidebarScrollY: number = 0;
   private scrollPositionsApplied: boolean = false;
   
   @queryAsync('wcc-frame')
@@ -103,6 +99,13 @@ export class WccDashboard 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}>
       </wcc-frame>
@@ -222,8 +225,14 @@ export class WccDashboard extends DeesElement {
   }
   
   private scrollUpdateTimeout: NodeJS.Timeout;
+  private scrollListenersAttached: boolean = false;
   
   public async setupScrollListeners() {
+    // Prevent duplicate listeners
+    if (this.scrollListenersAttached) {
+      return;
+    }
+    
     const wccFrame = await this.wccFrame;
     const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar');
     
@@ -233,6 +242,7 @@ export class WccDashboard extends DeesElement {
         this.frameScrollY = wccFrame.scrollTop;
         this.debouncedScrollUpdate();
       });
+      this.scrollListenersAttached = true;
     }
     
     if (wccSidebar) {

package/ts_web/elements/wcc-frame.ts

@@ -13,6 +13,9 @@ export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
+  @property({ type: Boolean })
+  public advancedEditorOpen: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -22,7 +25,6 @@ export class WccFrame extends DeesElement {
         left: 200px;
         right: 0px;
         top: 0px;
-        bottom: 100px;
         overflow-y: auto;
         overflow-x: auto;
         overscroll-behavior: contain;
@@ -41,6 +43,8 @@ export class WccFrame extends DeesElement {
     return html`
       <style>
         :host {
+          bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
+          transition: bottom 0.3s ease;
           ${(() => {
           switch (this.viewport) {
             case 'desktop':