@design.estate/dees-wcctools 1.0.101 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.101",
+  "version": "1.1.1",
   "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.101',
+  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

@@ -29,6 +29,9 @@ export class WccDashboard extends DeesElement {
   @property()
   public selectedTheme: TTheme = 'dark';
 
+  @property()
+  public isFullscreen: boolean = false;
+
   @property()
   public pages: { [key: string]: () => TemplateResult } = {};
 
@@ -76,6 +79,7 @@ export class WccDashboard extends DeesElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .isFullscreen=${this.isFullscreen}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
         }}
@@ -92,6 +96,7 @@ export class WccDashboard extends DeesElement {
         .selectedItem=${this.selectedItem}
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
+        .isFullscreen=${this.isFullscreen}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
           this.scheduleUpdate();
@@ -99,8 +104,18 @@ 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();
+          }
+        }}
+        @toggleFullscreen=${() => {
+          this.toggleFullscreen();
+        }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isFullscreen=${this.isFullscreen}>
       </wcc-frame>
     `;
   }
@@ -115,9 +130,20 @@ export class WccDashboard extends DeesElement {
     }
   }
 
+  public toggleFullscreen() {
+    this.isFullscreen = !this.isFullscreen;
+  }
+
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
     
+    // Add ESC key handler for fullscreen mode
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && this.isFullscreen) {
+        this.isFullscreen = false;
+      }
+    });
+    
     // Set up scroll listeners after DOM is ready
     setTimeout(() => {
       this.setupScrollListeners();

package/ts_web/elements/wcc-frame.ts

@@ -13,6 +13,12 @@ export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
+  @property({ type: Boolean })
+  public advancedEditorOpen: boolean = false;
+
+  @property({ type: Boolean })
+  public isFullscreen: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -22,7 +28,6 @@ export class WccFrame extends DeesElement {
         left: 200px;
         right: 0px;
         top: 0px;
-        bottom: 100px;
         overflow-y: auto;
         overflow-x: auto;
         overscroll-behavior: contain;
@@ -41,7 +46,19 @@ export class WccFrame extends DeesElement {
     return html`
       <style>
         :host {
-          ${(() => {
+          ${this.isFullscreen ? `
+            border: none !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
+            bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
+            border: 10px solid #ffaeaf;
+            left: 200px;
+          `}
+          transition: all 0.3s ease;
+          ${this.isFullscreen ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':
               return `
@@ -70,7 +87,7 @@ export class WccFrame extends DeesElement {
         }
 
         .viewport {
-          ${this.viewport !== 'desktop'
+          ${!this.isFullscreen && this.viewport !== 'desktop'
             ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
             : html``
           }