@avocadostudio-ai/preview-adapter 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/preview-adapter",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,7 +37,7 @@
     "src/styles.css"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "^0.15.0"
+    "@avocadostudio-ai/shared": "^0.17.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/styles.css

@@ -1,6 +1,23 @@
 [data-editor-active] .editor-selectable {
+  /*
+   * Four states, four colours. They used to be one: hover, selection and
+   * field-level highlight were all 37, 99, 235, separated only by a dashed
+   * vs solid border. On a full-bleed section at 2px that distinction is
+   * invisible, so a selected hero and a hovered one looked identical, and a
+   * hovered field drew a second blue box inside the first one meaning
+   * something else entirely.
+   *
+   * Blue is the block, amber is the field. Weight says whether it is picked or
+   * merely under the cursor. (Red is already spoken for — the delete button
+   * has carried its own `#991b1b` hover since before this.)
+   */
   --editor-accent-rgb: 37, 99, 235;
-  --editor-selected-rgb: 37, 99, 235;
+  --editor-selected-rgb: 37, 99, 235; /* this block is picked */
+  --editor-hover-rgb: 96, 165, 250; /* this block is under the cursor */
+  /* A field inside the picked block. Dark enough to carry white label text
+     (#b45309 on white is 4.6:1; the amber-600 below is 2.9:1 and is only
+     ever a fill). */
+  --editor-field-rgb: 180, 83, 9;
   --editor-selected-border-width: 2px;
   --editor-focus-rgb: 217, 119, 6;
   --editor-accent-strong: rgb(var(--editor-accent-rgb));
@@ -39,9 +56,10 @@
 [data-editor-selection-mode] .editor-selectable:hover::before {
   opacity: 1;
   inset: 0;
-  /* Hover is a dashed, lower-opacity outline so it's visually distinct from
-     the solid selection outline — same color, but clearly "preview, not picked". */
-  border: var(--editor-selected-border-width) dashed rgba(var(--editor-accent-rgb), 0.55);
+  /* Hover is a dashed outline in the lighter blue, so it differs from the
+     solid selection outline in both weight and hue — "preview, not picked"
+     has to survive being read at a glance on a full-bleed section. */
+  border: var(--editor-selected-border-width) dashed rgba(var(--editor-hover-rgb), 0.85);
   background: none;
   mix-blend-mode: normal;
 }
@@ -52,7 +70,7 @@
   top: 4px;
   left: 4px;
   right: auto;
-  background: rgba(var(--editor-accent-rgb), 0.9);
+  background: rgba(var(--editor-hover-rgb), 0.9);
   color: #f8fafc;
   border: 0;
   border-radius: 6px;
@@ -86,7 +104,7 @@
 
 .editor-block-badge-label {
   position: static;
-  background: rgba(var(--editor-accent-rgb), 0.9);
+  background: rgba(var(--editor-hover-rgb), 0.9);
   color: #f8fafc;
   border-radius: 6px;
   padding: 4px 8px;
@@ -101,12 +119,12 @@
 }
 
 [data-editor-selection-mode] .editor-selectable:hover > .editor-block-badge .editor-block-badge-label {
-  background: rgba(var(--editor-accent-rgb), 0.97);
+  background: rgba(var(--editor-hover-rgb), 0.97);
 }
 
 [data-editor-selection-mode] .editor-selectable:hover::after {
   opacity: 1;
-  background: rgba(var(--editor-accent-rgb), 0.97);
+  background: rgba(var(--editor-hover-rgb), 0.97);
 }
 
 [data-editor-active] .editor-highlight {
@@ -354,6 +372,9 @@
   opacity: 1;
   inset: 0;
   border: var(--editor-selected-border-width) solid rgb(var(--editor-selected-rgb));
+  /* The ring is what separates "picked" from "hovered" at arm's length —
+     the 2px border alone reads the same on a section this wide. */
+  box-shadow: 0 0 0 4px rgba(var(--editor-selected-rgb), 0.15);
   background: none;
   mix-blend-mode: normal;
 }
@@ -363,8 +384,8 @@
 }
 
 @keyframes aifx-border-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--editor-selected-rgb), 0); }
-  50% { box-shadow: 0 0 0 4px rgba(var(--editor-selected-rgb), 0.25); }
+  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--editor-selected-rgb), 0.15); }
+  50% { box-shadow: 0 0 0 4px rgba(var(--editor-selected-rgb), 0.15), 0 0 0 9px rgba(var(--editor-selected-rgb), 0.28); }
 }
 
 /* Prevent double-thick border between adjacent highlighted/hovered blocks */
@@ -808,9 +829,16 @@
   position: relative;
 }
 
+/*
+ * Amber, not blue. A hovered field used to draw a blue box inside the
+ * selected block's blue box — two rectangles, same hue, same weight, two
+ * completely different scopes. Amber is already what inline editing uses
+ * below, so this reads as the same "you are pointing at a field" family at
+ * a lighter weight rather than as a new colour.
+ */
 .editor-highlight [data-editable-target]:not(.btn-primary):not(.btn-secondary):hover {
-  box-shadow: inset 0 0 0 1.5px rgba(var(--editor-selected-rgb), 0.4);
-  background: rgba(var(--editor-selected-rgb), 0.04);
+  box-shadow: inset 0 0 0 1.5px rgba(var(--editor-field-rgb), 0.55);
+  background: rgba(var(--editor-field-rgb), 0.06);
 }
 
 .editor-highlight [data-editable-target].editor-inline-editing {
@@ -826,7 +854,7 @@
   left: 4px;
   right: auto;
   transform: translateY(calc(-100% - 4px));
-  background: rgba(var(--editor-accent-rgb), 0.95);
+  background: rgba(var(--editor-field-rgb), 0.95);
   color: #f8fafc;
   border-radius: 8px 8px 0 0;
   padding: 6px 10px;