@floegence/floe-webapp-core 0.36.57 → 0.36.59

package/dist/workbench.css

@@ -239,6 +239,16 @@
       0 18px 44px -22px color-mix(in srgb, var(--primary, #3b82f6) 42%, transparent),
       0 0 0 1px color-mix(in srgb, white 36%, transparent) inset;
     will-change: transform, width, height;
+    opacity: 0.72;
+    transition:
+      opacity 120ms ease,
+      border-color 120ms ease,
+      background 120ms ease,
+      box-shadow 120ms ease;
+  }
+
+  .workbench-placement-preview.is-drop-armed {
+    opacity: 1;
   }
 
   .workbench-placement-preview.is-sticky-note {
@@ -1966,8 +1976,9 @@
   }
 
   .workbench-dock__mode-icon {
-    width: 14px;
-    height: 14px;
+    width: 42px;
+    height: 42px;
+    filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.12));
   }
 
   .workbench-dock__item {
@@ -1984,59 +1995,59 @@
     transform-origin: center bottom;
     /* Keep each slot at a fixed footprint so neighbor translateX moves the
        visual tile without reflowing the row. */
-    width: 36px;
-    height: 36px;
+    width: 42px;
+    height: 42px;
   }
 
   .workbench-dock__tile {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--muted, #f1f1f1) 62%, transparent);
-    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 50%, transparent);
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+    background: transparent;
+    border: none;
     color: var(--muted-foreground, #888);
     transform-origin: center bottom;
     will-change: transform;
     /* Motion component drives transform; only animate visual chrome here. */
     transition:
-      background-color 160ms ease,
-      color 160ms ease,
-      border-color 160ms ease,
-      box-shadow 160ms ease;
+      box-shadow 160ms ease,
+      filter 160ms ease;
   }
 
   .workbench-dock__icon {
-    width: 18px;
-    height: 18px;
+    width: 42px;
+    height: 42px;
+    filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.12));
   }
 
   .workbench-dock__item.is-active .workbench-dock__tile {
-    background: linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--primary, #3b82f6) 90%, white),
-      var(--primary, #3b82f6)
-    );
-    color: var(--primary-foreground, #fff);
-    border-color: color-mix(in srgb, var(--primary, #3b82f6) 80%, transparent);
-    box-shadow:
-      0 6px 14px -4px color-mix(in srgb, var(--primary, #3b82f6) 52%, transparent),
-      0 1px 0 color-mix(in srgb, white 30%, transparent) inset;
+    box-shadow: none;
+  }
+
+  /* Active indicator dot – macOS style */
+  .workbench-dock__item.is-active::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--foreground, #000);
+    opacity: 0.55;
   }
 
   .workbench-dock__item.is-hovered .workbench-dock__tile {
-    box-shadow:
-      0 10px 22px -8px color-mix(in srgb, var(--foreground, #000) 22%, transparent),
-      0 1px 0 color-mix(in srgb, white 50%, transparent) inset;
+    filter: brightness(1.08) drop-shadow(0 8px 16px rgb(0 0 0 / 0.18));
   }
 
   .workbench-dock__item.is-filter-muted .workbench-dock__tile {
-    opacity: 0.46;
-    background: color-mix(in srgb, var(--muted, #f1f1f1) 42%, transparent);
-    color: color-mix(in srgb, var(--muted-foreground, #888) 72%, transparent);
-    box-shadow: none;
+    opacity: 0.4;
+    filter: grayscale(0.6) drop-shadow(0 1px 3px rgb(0 0 0 / 0.06));
   }
 
   .workbench-dock__mode-popover {
@@ -2082,7 +2093,6 @@
     -webkit-backdrop-filter: none;
   }
 
-  .workbench-surface[data-workbench-mode='background'] .workbench-dock__tile,
   .workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-option-icon {
     background: color-mix(in srgb, var(--muted, #f1f1f1) 84%, var(--card, #fff));
   }
@@ -2129,10 +2139,17 @@
     width: 30px;
     height: 30px;
     border-radius: 8px;
-    background: color-mix(in srgb, var(--muted, #f1f1f1) 70%, transparent);
+    background: transparent;
     color: inherit;
   }
 
+  .workbench-dock__mode-option-icon .workbench-dock__icon,
+  .workbench-dock__mode-option-icon .workbench-dock__mode-icon {
+    width: 30px;
+    height: 30px;
+    filter: none;
+  }
+
   .workbench-dock__mode-option-copy {
     display: grid;
     min-width: 0;
@@ -2285,8 +2302,8 @@
 
     .workbench-dock__item,
     .workbench-dock__tile {
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
     }
 
     .workbench-dock__mode-popover {
@@ -2301,8 +2318,8 @@
     }
 
     .workbench-dock__icon {
-      width: 16px;
-      height: 16px;
+      width: 36px;
+      height: 36px;
     }
 
     .workbench-hud {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.57",
+  "version": "0.36.59",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",