From ddecfcdb4c9199ad5cae9971e9878bc7da68013b Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 19 Dec 2025 09:21:30 +0000
Subject: [PATCH] feat(wcc-properties): add Share selector with inline Record
 button and adjust properties panel grid layout

---
 changelog.md                      |  8 ++++++++
 ts_web/00_commitinfo_data.ts      |  2 +-
 ts_web/elements/wcc-properties.ts | 27 +++++++++++++++++++--------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/changelog.md b/changelog.md
index 6ce2ca2..0dfb80d 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 2025-12-19 - 3.1.0 - feat(wcc-properties)
+add Share selector with inline Record button and adjust properties panel grid layout
+
+- Increase rightmost column width from 70px to 100px in properties grid
+- Introduce .shareSelector and .selectorButtons1 CSS classes and markup
+- Replace <wcc-record-button> with inline Record button that toggles icon based on isRecording
+- Add Share panel heading and integrate record control into selector area
+
 ## 2025-12-19 - 3.0.0 - BREAKING CHANGE(ts_web)
 Replace fullscreen boolean with native viewport mode across components, add native viewport selector and toggle, and update dev deps and npmextra config
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index befebeb..d79322f 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.0.0',
+  version: '3.1.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }
diff --git a/ts_web/elements/wcc-properties.ts b/ts_web/elements/wcc-properties.ts
index f497dba..15d3210 100644
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@@ -100,7 +100,7 @@ export class WccProperties extends DeesElement {
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 350px 70px;
+          grid-template-columns: 1fr 150px 350px 100px;
           height: 100%;
         }
         .properties {
@@ -197,7 +197,8 @@ export class WccProperties extends DeesElement {
         }
 
         .viewportSelector,
-        .themeSelector {
+        .themeSelector,
+        .shareSelector {
           user-select: none;
           background: transparent;
           display: flex;
@@ -219,6 +220,11 @@ export class WccProperties extends DeesElement {
           grid-template-columns: repeat(5, 1fr);
           flex: 1;
         }
+        .selectorButtons1 {
+          display: grid;
+          grid-template-columns: 1fr;
+          flex: 1;
+        }
         .button {
           display: flex;
           flex-direction: column;
@@ -671,12 +677,17 @@ export class WccProperties extends DeesElement {
               </div>
             </div>
           </div>
-          <!-- Recording Button -->
-          <wcc-record-button
-            .state=${this.isRecording ? 'recording' : 'idle'}
-            .duration=${this.recordingDuration}
-            @record-click=${() => this.handleRecordButtonClick()}
-          ></wcc-record-button>
+          <div class="shareSelector">
+            <div class="panelheading">Share</div>
+            <div class="selectorButtons1">
+              <div
+                class="button ${this.isRecording ? 'selected' : ''}"
+                @click=${() => this.handleRecordButtonClick()}
+              >
+                Record<i class="material-symbols-outlined">${this.isRecording ? 'stop_circle' : 'videocam'}</i>
+              </div>
+            </div>
+          </div>
         </div>
         ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
       </div>