@tutti-os/workbench-surface 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -173,18 +173,10 @@
173
173
  box-shadow 0.16s ease;
174
174
  }
175
175
 
176
- .workbench-window[data-display-mode="fullscreen"] {
177
- grid-template-rows: minmax(0, 1fr);
178
- }
179
-
180
176
  .workbench-window[data-display-mode="floating"] {
181
177
  background: var(--background-panel);
182
178
  }
183
179
 
184
- .workbench-window[data-display-mode="fullscreen"][data-fullscreen-header-mode="persistent"] {
185
- grid-template-rows: var(--workbench-header-height) minmax(0, 1fr);
186
- }
187
-
188
180
  .workbench-window[data-focused="true"] {
189
181
  border-color: var(--workbench-window-focused-border);
190
182
  }
@@ -218,66 +210,6 @@
218
210
  cursor: default;
219
211
  }
220
212
 
221
- .workbench-window[data-display-mode="fullscreen"] .workbench-window__header {
222
- position: absolute;
223
- top: 0;
224
- right: 0;
225
- left: 0;
226
- z-index: 3;
227
- backdrop-filter: var(--workbench-window-backdrop-filter);
228
- -webkit-backdrop-filter: var(--workbench-window-backdrop-filter);
229
- opacity: 0;
230
- transform: translateY(calc(-100% - 8px));
231
- pointer-events: none;
232
- transition:
233
- opacity 0.16s ease,
234
- transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
235
- }
236
-
237
- .workbench-window[data-display-mode="fullscreen"][data-fullscreen-header-mode="persistent"]
238
- .workbench-window__header {
239
- position: relative;
240
- opacity: 1;
241
- transform: none;
242
- pointer-events: auto;
243
- }
244
-
245
- .workbench-window[data-display-mode="fullscreen"]:has(
246
- .workbench-window__header-reveal-zone:hover
247
- )
248
- .workbench-window__header {
249
- opacity: 1;
250
- transform: translateY(0);
251
- pointer-events: auto;
252
- transition:
253
- opacity 0.16s ease,
254
- transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
255
- }
256
-
257
- .workbench-window[data-display-mode="fullscreen"]:has(
258
- .workbench-window__header:hover
259
- )
260
- .workbench-window__header,
261
- .workbench-window[data-display-mode="fullscreen"]:has(
262
- .workbench-window__header:focus-within
263
- )
264
- .workbench-window__header {
265
- opacity: 1;
266
- transform: translateY(0);
267
- pointer-events: auto;
268
- transition: none;
269
- }
270
-
271
- .workbench-window__header-reveal-zone {
272
- position: absolute;
273
- top: 0;
274
- right: 0;
275
- left: 0;
276
- z-index: 2;
277
- height: 16px;
278
- pointer-events: auto;
279
- }
280
-
281
213
  [data-workbench-drag-handle="true"] {
282
214
  cursor: grab;
283
215
  user-select: none;
@@ -294,15 +226,6 @@
294
226
  background: var(--background-panel);
295
227
  }
296
228
 
297
- .workbench-window[data-display-mode="fullscreen"] .workbench-window__body {
298
- grid-row: 1;
299
- }
300
-
301
- .workbench-window[data-display-mode="fullscreen"][data-fullscreen-header-mode="persistent"]
302
- .workbench-window__body {
303
- grid-row: 2;
304
- }
305
-
306
229
  .workbench-window__resize-handle {
307
230
  position: absolute;
308
231
  z-index: 8;
@@ -1291,7 +1214,7 @@
1291
1214
 
1292
1215
  .desktop-dock__slot[data-node-state="open"]::before,
1293
1216
  .desktop-dock__slot[data-node-state="minimized"]::before {
1294
- --desktop-dock-indicator-color: var(--text-tertiary);
1217
+ --desktop-dock-indicator-color: rgb(0 0 0 / 46%);
1295
1218
  position: absolute;
1296
1219
  bottom: calc(var(--desktop-dock-indicator-offset) - 2px);
1297
1220
  left: 50%;
@@ -1327,10 +1250,6 @@
1327
1250
  transform: translateY(-50%);
1328
1251
  }
1329
1252
 
1330
- .desktop-dock__slot[data-node-state="minimized"]::before {
1331
- opacity: 0.72;
1332
- }
1333
-
1334
1253
  .desktop-dock__btn {
1335
1254
  display: inline-flex;
1336
1255
  margin: 0;
@@ -1380,10 +1299,14 @@
1380
1299
  cursor: default;
1381
1300
  }
1382
1301
 
1383
- .desktop-dock__icon-shell {
1302
+ .desktop-dock__icon-shell,
1303
+ .desktop-dock__minimized-stack-icon {
1384
1304
  --desktop-dock-loading-badge-offset: -3.6px;
1385
1305
  --desktop-dock-loading-badge-size: 16.2px;
1386
1306
  --desktop-dock-loading-spinner-size: 9px;
1307
+ }
1308
+
1309
+ .desktop-dock__icon-shell {
1387
1310
  position: relative;
1388
1311
  box-sizing: border-box;
1389
1312
  display: inline-flex;
@@ -1417,7 +1340,7 @@
1417
1340
  align-items: center;
1418
1341
  justify-content: center;
1419
1342
  padding: 0 4.5px;
1420
- border: 1px solid color-mix(in srgb, var(--workbench-panel) 72%, white);
1343
+ border: 1px solid var(--text-inverted);
1421
1344
  border-radius: 999px;
1422
1345
  background: var(--workbench-foreground);
1423
1346
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
@@ -1497,8 +1420,8 @@
1497
1420
  }
1498
1421
 
1499
1422
  .desktop-dock__count-badge {
1500
- color: var(--workbench-panel);
1501
- font-size: 10px;
1423
+ color: var(--text-inverted);
1424
+ font-size: 11px;
1502
1425
  font-weight: 700;
1503
1426
  line-height: 1;
1504
1427
  }
@@ -1519,7 +1442,7 @@
1519
1442
  bottom: -1.8px;
1520
1443
  width: 10.8px;
1521
1444
  height: 10.8px;
1522
- border: 1.8px solid color-mix(in srgb, var(--workbench-panel) 82%, white);
1445
+ border: 1.8px solid var(--text-inverted);
1523
1446
  border-radius: 999px;
1524
1447
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
1525
1448
  }
@@ -1789,7 +1712,8 @@
1789
1712
  }
1790
1713
 
1791
1714
  .desktop-dock__slot--minimized .desktop-dock__count-badge {
1792
- right: -10.8px;
1715
+ right: -12px;
1716
+ bottom: var(--desktop-dock-loading-badge-offset);
1793
1717
  z-index: 8;
1794
1718
  }
1795
1719
 
@@ -50,6 +50,31 @@ test("dock retained entry removal animates width and icon exit", () => {
50
50
  assert.match(css, /@keyframes desktop-dock-separator-collapse-left/);
51
51
  });
52
52
 
53
+ test("dock badge chrome uses inverted outlines and 11px count text", () => {
54
+ const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
55
+
56
+ assert.match(
57
+ css,
58
+ /\.desktop-dock__icon-shell,\s*\.desktop-dock__minimized-stack-icon\s*{[^}]*--desktop-dock-loading-badge-offset:\s*-3\.6px;[^}]*--desktop-dock-loading-badge-size:\s*16\.2px;/s
59
+ );
60
+ assert.match(
61
+ css,
62
+ /\.desktop-dock__icon-shell\[data-entry-state="loading"\]::before,\s*\.desktop-dock__count-badge\s*{[^}]*border:\s*1px solid var\(--text-inverted\);/s
63
+ );
64
+ assert.match(
65
+ css,
66
+ /\.desktop-dock__count-badge\s*{[^}]*color:\s*var\(--text-inverted\);[^}]*font-size:\s*11px;/s
67
+ );
68
+ assert.match(
69
+ css,
70
+ /\.desktop-dock__status-badge\s*{[^}]*border:\s*1\.8px solid var\(--text-inverted\);/s
71
+ );
72
+ assert.match(
73
+ css,
74
+ /\.desktop-dock__slot--minimized\s+\.desktop-dock__count-badge\s*{[^}]*right:\s*-12px;[^}]*bottom:\s*var\(--desktop-dock-loading-badge-offset\);/s
75
+ );
76
+ });
77
+
53
78
  test("left dock placement owns vertical frame and popup placement styles", () => {
54
79
  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
55
80
 
@@ -104,7 +129,7 @@ test("left dock placement owns vertical frame and popup placement styles", () =>
104
129
  );
105
130
  assert.match(
106
131
  css,
107
- /\.desktop-dock__slot\[data-node-state="open"\]::before,[\s\S]*?\.desktop-dock__slot\[data-node-state="minimized"\]::before\s*{[^}]*--desktop-dock-indicator-color:\s*var\(--text-tertiary\);[^}]*bottom:\s*calc\(var\(--desktop-dock-indicator-offset\) - 2px\);[^}]*width:\s*5px;[^}]*height:\s*5px;[^}]*background:\s*var\(--desktop-dock-indicator-color\);[^}]*box-shadow:\s*0 0 0 0\.5px rgb\(0 0 0 \/ 12%\);/s
132
+ /\.desktop-dock__slot\[data-node-state="open"\]::before,[\s\S]*?\.desktop-dock__slot\[data-node-state="minimized"\]::before\s*{[^}]*--desktop-dock-indicator-color:\s*rgb\(0 0 0 \/ 46%\);[^}]*bottom:\s*calc\(var\(--desktop-dock-indicator-offset\) - 2px\);[^}]*width:\s*5px;[^}]*height:\s*5px;[^}]*background:\s*var\(--desktop-dock-indicator-color\);[^}]*box-shadow:\s*0 0 0 0\.5px rgb\(0 0 0 \/ 12%\);/s
108
133
  );
109
134
  assert.match(
110
135
  css,
@@ -114,6 +139,10 @@ test("left dock placement owns vertical frame and popup placement styles", () =>
114
139
  css,
115
140
  /\.desktop-dock__slot\[data-node-state="open"\]\[data-wallpaper-tone="light"\]::before,[\s\S]*?\.desktop-dock__slot\[data-node-state="minimized"\]\[data-wallpaper-tone="light"\]::before\s*{[^}]*--desktop-dock-indicator-color:\s*rgb\(0 0 0 \/ 46%\);[^}]*box-shadow:\s*0 0 0 0\.5px rgb\(255 255 255 \/ 58%\);/s
116
141
  );
142
+ assert.doesNotMatch(
143
+ css,
144
+ /\.desktop-dock__slot\[data-node-state="minimized"\]::before\s*{[^}]*opacity:/s
145
+ );
117
146
  });
118
147
 
119
148
  test("dock overflow keeps scroll controls viewport-bound", () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tutti-os/workbench-surface",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "types": "./dist/index.d.ts",
@@ -34,10 +34,10 @@
34
34
  "@tutti-os/config-tsconfig": "0.0.0"
35
35
  },
36
36
  "dependencies": {
37
- "@tutti-os/ui-i18n-runtime": "0.0.32",
38
- "@tutti-os/ui-react-hooks": "0.0.32",
39
- "@tutti-os/workbench-snapshot": "0.0.32",
40
- "@tutti-os/ui-system": "0.0.32"
37
+ "@tutti-os/ui-i18n-runtime": "0.0.34",
38
+ "@tutti-os/ui-react-hooks": "0.0.34",
39
+ "@tutti-os/workbench-snapshot": "0.0.34",
40
+ "@tutti-os/ui-system": "0.0.34"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "^19.1.0",