@tutti-os/workbench-surface 0.0.43 → 0.0.45

package/dist/styles/workbench.css

@@ -273,24 +273,51 @@
   transition: background-color 160ms ease;
 }
 
-.workbench-window-traffic-light:hover,
-.workbench-window-traffic-light:focus-visible {
+.workbench-window-traffic-light__icon {
+  position: absolute;
+  z-index: 1;
+  inset: 5px;
+  width: 10px;
+  height: 10px;
+  color: color-mix(in srgb, #000 68%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.workbench-window-traffic-lights:hover .workbench-window-traffic-light,
+.workbench-window-traffic-lights:focus-within .workbench-window-traffic-light {
   opacity: 1;
+}
+
+.workbench-window-traffic-light:focus-visible {
   outline: none;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="close"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="close"]:focus-visible::before {
+.workbench-window-traffic-lights:hover .workbench-window-traffic-light__icon,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light__icon {
+  opacity: 1;
+}
+
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before {
   background-color: #ff5f57;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:focus-visible::before {
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before {
   background-color: #ffbd2e;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:focus-visible::before {
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before {
   background-color: #28c840;
 }
 
@@ -533,6 +560,7 @@
 }
 
 .workbench-mission-control {
+  z-index: var(--z-tooltip, 100700);
   opacity: 1;
 }
 
@@ -607,6 +635,7 @@
       100%
   );
   box-shadow: none;
+  pointer-events: auto;
   transition:
     width 180ms cubic-bezier(0.22, 1, 0.36, 1),
     background-color 160ms ease,
@@ -733,7 +762,7 @@
   background: transparent;
   box-shadow: none;
   overflow: visible;
-  pointer-events: auto;
+  pointer-events: none;
   transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
   -webkit-app-region: no-drag;
 }
@@ -772,7 +801,7 @@
   background: transparent;
   box-shadow: none;
   line-height: 0;
-  pointer-events: auto;
+  pointer-events: none;
   transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
   -webkit-app-region: no-drag;
 }
@@ -827,6 +856,7 @@
   overflow: visible;
   padding: 0 var(--desktop-dock-items-padding)
     var(--desktop-dock-items-padding-block-end);
+  pointer-events: none;
   scroll-behavior: smooth;
   scrollbar-width: none;
 }
@@ -1114,6 +1144,7 @@
   justify-content: center;
   overflow: visible;
   line-height: 0;
+  pointer-events: auto;
 }
 
 .desktop-dock[data-dock-placement="left"] .desktop-dock__slot {

package/dist/styles/workbenchStyle.test.ts

@@ -23,6 +23,18 @@ test("traffic lights keep visual layout while expanding the pointer hit area", (
     css,
     /\.workbench-window-traffic-light::before\s*{[^}]*inset:\s*4px;[^}]*content:\s*"";[^}]*transition:\s*background-color 160ms ease;/s
   );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-light__icon\s*{[^}]*inset:\s*5px;[^}]*width:\s*10px;[^}]*height:\s*10px;[^}]*opacity:\s*0;[^}]*transition:\s*opacity 120ms ease;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light__icon,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light__icon\s*{[^}]*opacity:\s*1;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before\s*{[^}]*background-color:\s*#ff5f57;/s
+  );
 });
 
 test("floating window corner resize handles do not intrude further than the edge handles", () => {
@@ -50,6 +62,31 @@ test("mission control hidden presentation windows are invisible and inert", () =
   );
 });
 
+test("mission control overlay lets layout controls sit above dialog overlays", () => {
+  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
+  const source = readFileSync(
+    resolve("src/mission-control/WorkbenchMissionControlOverlay.tsx"),
+    "utf8"
+  );
+
+  assert.match(
+    css,
+    /\.workbench-mission-control\s*{[^}]*z-index:\s*var\(--z-tooltip,\s*100700\);/s
+  );
+  assert.match(
+    source,
+    /className="workbench-mission-control pointer-events-none absolute inset-0 overflow-hidden"/
+  );
+  assert.match(
+    source,
+    /className="workbench-mission-control__layout-dock desktop-dock-plate pointer-events-auto"/
+  );
+  assert.match(
+    css,
+    /\.desktop-dock-plate\.workbench-mission-control__layout-dock\s*{[^}]*pointer-events:\s*auto;/s
+  );
+});
+
 test("dialog popover node layer sits above dialog overlays and remains clickable", () => {
   const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
 
@@ -92,6 +129,25 @@ test("dock retained entry removal animates width and icon exit", () => {
   assert.match(css, /@keyframes desktop-dock-separator-collapse-left/);
 });
 
+test("dock transparent hover padding lets clicks reach windows behind it", () => {
+  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
+
+  assert.match(
+    css,
+    /\.desktop-dock-plate\s*{[^}]*pointer-events:\s*none;[^}]*transition:\s*width 220ms/s
+  );
+  assert.match(
+    css,
+    /\.desktop-dock\s*{[^}]*pointer-events:\s*none;[^}]*transition:\s*width 600ms/s
+  );
+  assert.match(css, /\.desktop-dock__items\s*{[^}]*pointer-events:\s*none;/s);
+  assert.match(css, /\.desktop-dock__slot\s*{[^}]*pointer-events:\s*auto;/s);
+  assert.match(
+    css,
+    /\.desktop-dock__hover-panel\s*{[^}]*pointer-events:\s*auto;/s
+  );
+});
+
 test("dock badge chrome uses inverted outlines and 11px count text", () => {
   const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutti-os/workbench-surface",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -34,10 +34,10 @@
     "@tutti-os/config-tsconfig": "0.0.0"
   },
   "dependencies": {
-    "@tutti-os/ui-i18n-runtime": "0.0.43",
-    "@tutti-os/ui-react-hooks": "0.0.43",
-    "@tutti-os/workbench-snapshot": "0.0.43",
-    "@tutti-os/ui-system": "0.0.43"
+    "@tutti-os/ui-i18n-runtime": "0.0.45",
+    "@tutti-os/ui-react-hooks": "0.0.45",
+    "@tutti-os/workbench-snapshot": "0.0.45",
+    "@tutti-os/ui-system": "0.0.45"
   },
   "peerDependencies": {
     "react": "^19.1.0",