From 1e4fc888f47ad78957c8cddc69a8c79a263ca6b9 Mon Sep 17 00:00:00 2001
From: Alex Hoyau <a.hoyau@silexlabs.org>
Date: Fri, 20 Mar 2026 22:04:51 +0100
Subject: [PATCH 1/4] chore: better hints for AI/MCP/capabilities

---
 src/capabilities.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/capabilities.js b/src/capabilities.js
index e42b242..0b10abd 100644
--- a/src/capabilities.js
+++ b/src/capabilities.js
@@ -81,6 +81,7 @@ export function registerCapabilities(addCapability) {
     id: cmdListVars,
     command: cmdListVars,
     description: 'List CSS variables',
+    readOnly: true,
     tags: ['css'],
   })
 
@@ -104,6 +105,7 @@ export function registerCapabilities(addCapability) {
     id: cmdRemoveVar,
     command: cmdRemoveVar,
     description: 'Remove CSS variable',
+    destructive: true,
     inputSchema: {
       type: 'object',
       required: ['name'],

From ac4e8b45eb738793e2398e991932848be6f80e62 Mon Sep 17 00:00:00 2001
From: Alex Hoyau <a.hoyau@silexlabs.org>
Date: Tue, 24 Mar 2026 23:25:44 +0100
Subject: [PATCH 2/4] 0.0.7-canary.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ff883a..245d42c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@silexlabs/grapesjs-css-variables",
-  "version": "0.0.7-canary.2",
+  "version": "0.0.7-canary.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@silexlabs/grapesjs-css-variables",
-      "version": "0.0.7-canary.2",
+      "version": "0.0.7-canary.3",
       "license": "GPL-3.0",
       "devDependencies": {
         "eslint": "^8.57.0",
diff --git a/package.json b/package.json
index 098b333..5730101 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@silexlabs/grapesjs-css-variables",
-  "version": "0.0.7-canary.2",
+  "version": "0.0.7-canary.3",
   "description": "GrapesJS CSS Variables - Define and manage CSS custom properties (variables) for colors, sizes, and typography",
   "main": "dist/index.js",
   "files": [

From 9858676d694fc082383e6896b4592a457e0726a3 Mon Sep 17 00:00:00 2001
From: Alex Hoyau <a.hoyau@silexlabs.org>
Date: Sun, 29 Mar 2026 19:14:38 +0200
Subject: [PATCH 3/4] chore: redesign style manager panel: rename sectors, add
 icons, dark theme, compact header

---
 src/style-manager.js | 52 ++++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/style-manager.js b/src/style-manager.js
index f018208..6885f30 100644
--- a/src/style-manager.js
+++ b/src/style-manager.js
@@ -71,33 +71,38 @@ smStyles.textContent = `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
     flex-shrink: 0;
-    margin-left: 4px;
-    opacity: 0.3;
-    transition: opacity 0.12s;
+    margin-left: 2px;
+    opacity: 0;
+    transition: opacity 0.15s;
+    vertical-align: middle;
   }
   .gjs-sm-property:hover .css-vars-sm-trigger,
   .css-vars-sm-trigger:focus-within {
+    opacity: 0.5;
+  }
+  .css-vars-sm-trigger:hover {
     opacity: 1;
   }
-  /* The visible "+" circle */
+  /* The visible "+" text */
   .css-vars-sm-trigger__icon {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: var(--gjs-main-color, #804f7b);
-    color: #fff;
-    font-size: 10px;
-    font-weight: bold;
+    width: 12px;
+    height: 12px;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font-size: 14px;
+    font-weight: normal;
     line-height: 1;
     pointer-events: none;
+    opacity: 0.6;
   }
   /* The transparent native <select> overlaying the circle */
   .css-vars-sm-trigger__select {
@@ -155,20 +160,21 @@ smStyles.textContent = `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
     flex-shrink: 0;
-    margin-left: 4px;
-    border-radius: 50%;
-    background: var(--gjs-main-color, #804f7b);
-    color: #fff;
+    margin-left: 2px;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
     border: none;
     cursor: pointer;
-    font-size: 10px;
-    font-weight: bold;
+    font-size: 12px;
+    font-weight: normal;
     line-height: 1;
-    opacity: 0.6;
-    transition: opacity 0.12s;
+    opacity: 0.4;
+    transition: opacity 0.15s;
+    vertical-align: middle;
   }
   .css-vars-sm-clear:hover {
     opacity: 1;

From a0bc55fd1e72e87d21f1597cbb3c9f65cd5625c5 Mon Sep 17 00:00:00 2001
From: Alex Hoyau <a.hoyau@silexlabs.org>
Date: Mon, 30 Mar 2026 11:30:38 +0200
Subject: [PATCH 4/4] chore: redesign style manager panel: rename sectors, add
 icons, dark theme, compact header

---
 src/style-manager.js | 39 +++++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/style-manager.js b/src/style-manager.js
index 6885f30..f9241f6 100644
--- a/src/style-manager.js
+++ b/src/style-manager.js
@@ -65,44 +65,40 @@ smStyles.textContent = `
     flex: 1;
   }
 
-  /* ── "+" trigger placed after the label ────────────── */
+  /* ── pencil trigger placed after the label ────────────── */
   .css-vars-sm-trigger {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     flex-shrink: 0;
-    margin-left: 2px;
-    opacity: 0;
+    margin-left: 4px;
+    opacity: 0.4;
     transition: opacity 0.15s;
     vertical-align: middle;
-  }
-  .gjs-sm-property:hover .css-vars-sm-trigger,
-  .css-vars-sm-trigger:focus-within {
-    opacity: 0.5;
+    cursor: pointer;
   }
   .css-vars-sm-trigger:hover {
     opacity: 1;
   }
-  /* The visible "+" text */
+  /* The visible pencil icon */
   .css-vars-sm-trigger__icon {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     border-radius: 0;
     background: transparent;
     color: inherit;
-    font-size: 14px;
+    font-size: 11px;
     font-weight: normal;
     line-height: 1;
     pointer-events: none;
-    opacity: 0.6;
   }
   /* The transparent native <select> overlaying the circle */
   .css-vars-sm-trigger__select {
@@ -160,16 +156,16 @@ smStyles.textContent = `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     flex-shrink: 0;
-    margin-left: 2px;
+    margin-left: 4px;
     border-radius: 0;
     background: transparent;
     color: inherit;
     border: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: normal;
     line-height: 1;
     opacity: 0.4;
@@ -179,6 +175,9 @@ smStyles.textContent = `
   .css-vars-sm-clear:hover {
     opacity: 1;
   }
+  .css-vars-sm-clear:hover {
+    opacity: 1;
+  }
 
   /* ── State: variable applied → hide field, hide trigger */
   .css-vars-sm-wrapper--has-var .gjs-field {
@@ -273,10 +272,10 @@ function injectVarUI(editor, property, variables) {
     const trigger = document.createElement('div')
     trigger.className = 'css-vars-sm-trigger'
 
-    // Visible "+" circle
+    // Visible pencil icon
     const icon = document.createElement('span')
     icon.className = 'css-vars-sm-trigger__icon'
-    icon.textContent = '+'
+    icon.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>'
     trigger.appendChild(icon)
 
     // Transparent native <select> overlaying the circle