@tutti-os/workbench-surface 0.0.40 → 0.0.42

package/dist/styles/workbench.css

@@ -195,10 +195,10 @@
 .workbench-window__header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 12px;
   height: var(--workbench-header-height);
-  padding: 0 8px 0 12px;
+  padding: 0 12px 0 16px;
   border-bottom: 1px solid var(--border-1);
   background: var(--background-panel);
   cursor: grab;
@@ -221,6 +221,84 @@
   cursor: default;
 }
 
+.workbench-window__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-window__traffic-light-actions,
+.workbench-window-traffic-lights {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.workbench-window__traffic-light-actions {
+  cursor: default;
+}
+
+.workbench-window-traffic-lights {
+  pointer-events: auto;
+}
+
+.workbench-window-traffic-light {
+  position: relative;
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  margin: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.78;
+  transition: opacity 160ms ease;
+}
+
+.workbench-window-traffic-light::before {
+  position: absolute;
+  inset: 4px;
+  border-radius: inherit;
+  background-color: color-mix(in srgb, var(--text-tertiary) 72%, transparent);
+  content: "";
+  transition: background-color 160ms ease;
+}
+
+.workbench-window-traffic-light:hover,
+.workbench-window-traffic-light:focus-visible {
+  opacity: 1;
+  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 {
+  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 {
+  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 {
+  background-color: #28c840;
+}
+
+.workbench-window-traffic-light:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+
 [data-workbench-drag-handle="true"] {
   cursor: grab;
   user-select: none;
@@ -278,31 +356,33 @@
 .workbench-window__resize-handle[data-handle="north-west"],
 .workbench-window__resize-handle[data-handle="south-east"],
 .workbench-window__resize-handle[data-handle="south-west"] {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
 }
 
 .workbench-window__resize-handle[data-handle="north-east"] {
   top: -8px;
   right: -8px;
+  width: 24px;
+  height: 24px;
   cursor: nesw-resize;
 }
 
 .workbench-window__resize-handle[data-handle="north-west"] {
-  top: -8px;
-  left: -8px;
+  top: -12px;
+  left: -12px;
   cursor: nwse-resize;
 }
 
 .workbench-window__resize-handle[data-handle="south-east"] {
-  right: -8px;
-  bottom: -8px;
+  right: -12px;
+  bottom: -12px;
   cursor: nwse-resize;
 }
 
 .workbench-window__resize-handle[data-handle="south-west"] {
-  bottom: -8px;
-  left: -8px;
+  bottom: -12px;
+  left: -12px;
   cursor: nesw-resize;
 }
 

package/dist/styles/workbenchStyle.test.ts

@@ -12,6 +12,35 @@ test("floating window bodies do not reserve a right-side content margin", () =>
   );
 });
 
+test("traffic lights keep visual layout while expanding the pointer hit area", () => {
+  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
+
+  assert.match(
+    css,
+    /\.workbench-window-traffic-light\s*{[^}]*width:\s*20px;[^}]*height:\s*20px;[^}]*margin:\s*-4px;[^}]*cursor:\s*pointer;[^}]*transition:\s*opacity 160ms ease;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-light::before\s*{[^}]*inset:\s*4px;[^}]*content:\s*"";[^}]*transition:\s*background-color 160ms ease;/s
+  );
+});
+
+test("floating window corner resize handles do not intrude further than the edge handles", () => {
+  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
+
+  // Resize handles render outside `.workbench-window`, which keeps most of
+  // the corner hot zone outside the clipped window while still leaving a small
+  // diagonal resize target over the visible border.
+  assert.match(
+    css,
+    /\.workbench-window__resize-handle\[data-handle="north-east"\],\s*\.workbench-window__resize-handle\[data-handle="north-west"\],\s*\.workbench-window__resize-handle\[data-handle="south-east"\],\s*\.workbench-window__resize-handle\[data-handle="south-west"\]\s*{[^}]*width:\s*16px;[^}]*height:\s*16px;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window__resize-handle\[data-handle="south-west"\]\s*{[^}]*bottom:\s*-12px;[^}]*left:\s*-12px;/s
+  );
+});
+
 test("mission control hidden presentation windows are invisible and inert", () => {
   const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutti-os/workbench-surface",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "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.40",
-    "@tutti-os/ui-react-hooks": "0.0.40",
-    "@tutti-os/workbench-snapshot": "0.0.40",
-    "@tutti-os/ui-system": "0.0.40"
+    "@tutti-os/ui-i18n-runtime": "0.0.42",
+    "@tutti-os/ui-react-hooks": "0.0.42",
+    "@tutti-os/workbench-snapshot": "0.0.42",
+    "@tutti-os/ui-system": "0.0.42"
   },
   "peerDependencies": {
     "react": "^19.1.0",