flexdesk 0.4.4 → 0.4.6

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.
package/README.md CHANGED
@@ -175,6 +175,16 @@ then text shrinks to a floor. The widths are fractional and add up to `avail`
175
175
  exactly whenever the floors fit. `DataTable` does not use it yet; an embedder
176
176
  that measures its own columns can.
177
177
 
178
+ ### Scrollbars
179
+
180
+ `installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's
181
+ scrollbars under `root` with thin overlay bars that show while an element is
182
+ hovered or scrolling and fade out afterwards. Native bars are hidden, so no
183
+ element reserves layout width for one. The overlay bars live in one fixed
184
+ layer, so a container that redraws its contents cannot lose its bar, and
185
+ textareas get one too. Containers that already use `installOverlayScrollbar`
186
+ keep their own.
187
+
178
188
  ## The host port
179
189
 
180
190
  FlexDesk never touches `pywebview`, `fetch`, `localStorage` or the filesystem. It
package/css/base.css CHANGED
@@ -545,6 +545,25 @@ body.twm-dt-col-resizing {
545
545
  .twm-preview-table.twm-dt-measuring .twm-data-table__filter-row {
546
546
  display: none !important;
547
547
  }
548
+ /* ── C10. The virtual window (`DataTable` with `virtualize`) ─────────────
549
+ * The column track is a `<colgroup>` (see `_createTable`), so it is the
550
+ * `<col>` widths the measuring pass has to lift — the same `!important` it
551
+ * already uses on the cells. The floors on body cells (100px on the first,
552
+ * 80px on the rest) are off: a full render lifts them with inline styles on
553
+ * its first row, and a virtual one has no fixed first row to write them on.
554
+ * The spacers carry their geometry inline; this only keeps a hover or a
555
+ * stripe from painting them. */
556
+ .twm-preview-table.twm-dt-measuring col {
557
+ width: auto !important;
558
+ }
559
+ .twm-preview-table.twm-dt--virtual tbody td {
560
+ min-width: 0;
561
+ max-width: none;
562
+ }
563
+ .twm-preview-table tbody tr.twm-dt-spacer,
564
+ .twm-preview-table tbody tr.twm-dt-spacer > td {
565
+ background: transparent !important;
566
+ }
548
567
  .twm-preview-table th {
549
568
  position: sticky;
550
569
  top: 0;
@@ -933,7 +952,9 @@ body.twm-dt-col-resizing {
933
952
  outline-offset: -2px;
934
953
  }
935
954
  /* Unified collapsible arrow system */
936
- .twm-collapsible-arrow {
955
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
956
+ .twm-collapsible-arrow,
957
+ .twm-collapsible-arrow.material-symbols-outlined {
937
958
  transition: transform 0.2s ease;
938
959
  transform: rotate(0deg); /* Default: pointing down (expanded) */
939
960
  font-size: 10px;
@@ -994,7 +1015,12 @@ body.twm-dt-col-resizing {
994
1015
  margin: 0 1px;
995
1016
  user-select: none;
996
1017
  }
997
- .twm-topbar-breadcrumb__icon {
1018
+ /* Written twice for `.twm-leaf__icon`'s reason: the icon also carries
1019
+ * `.material-symbols-outlined`, and Google's stylesheet — loaded after this
1020
+ * one — sets that class to 24px. A single-class rule ties and loses on source
1021
+ * order, so every crumb drew a 24px glyph beside 12px text (Tables BUG-0024). */
1022
+ .twm-topbar-breadcrumb__icon,
1023
+ .twm-topbar-breadcrumb__icon.material-symbols-outlined {
998
1024
  font-size: var(--font-size-lg);
999
1025
  }
1000
1026
  .twm-topbar-breadcrumb__item--current {
@@ -1271,7 +1297,9 @@ body.twm-dt-col-resizing {
1271
1297
  .twm-autocomplete-field__item:hover {
1272
1298
  background-color: #3a3a3a;
1273
1299
  }
1274
- .twm-autocomplete-field__icon {
1300
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1301
+ .twm-autocomplete-field__icon,
1302
+ .twm-autocomplete-field__icon.material-symbols-outlined {
1275
1303
  font-size: var(--font-size-2xl);
1276
1304
  color: var(--text-muted);
1277
1305
  flex-shrink: 0;
@@ -3178,7 +3206,9 @@ body.twm-window-maximized .twm-resize-handle {
3178
3206
  .twm-managed-window--no-drag .twm-managed-window__topbar {
3179
3207
  cursor: default;
3180
3208
  }
3181
- .twm-managed-window__icon {
3209
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3210
+ .twm-managed-window__icon,
3211
+ .twm-managed-window__icon.material-symbols-outlined {
3182
3212
  font-size: var(--font-size-lg);
3183
3213
  color: var(--text-muted);
3184
3214
  flex-shrink: 0;
@@ -3317,7 +3347,9 @@ button.twm-managed-window__btn svg rect {
3317
3347
  .twm-bar-windows__item:active {
3318
3348
  background: #1a6aa5;
3319
3349
  }
3320
- .twm-bar-windows__item-icon {
3350
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3351
+ .twm-bar-windows__item-icon,
3352
+ .twm-bar-windows__item-icon.material-symbols-outlined {
3321
3353
  font-size: var(--font-size-sm);
3322
3354
  flex-shrink: 0;
3323
3355
  }
@@ -3368,7 +3400,9 @@ button.twm-managed-window__btn svg rect {
3368
3400
  align-items: flex-start;
3369
3401
  gap: var(--space-lg);
3370
3402
  }
3371
- .twm-confirm-dialog__icon {
3403
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3404
+ .twm-confirm-dialog__icon,
3405
+ .twm-confirm-dialog__icon.material-symbols-outlined {
3372
3406
  font-size: 32px;
3373
3407
  color: var(--text-muted);
3374
3408
  flex-shrink: 0;
@@ -3437,7 +3471,9 @@ button.twm-confirm-dialog__btn:focus {
3437
3471
  border-bottom: 1px solid #333;
3438
3472
  flex-shrink: 0;
3439
3473
  }
3440
- .twm-about-dialog__logo {
3474
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3475
+ .twm-about-dialog__logo,
3476
+ .twm-about-dialog__logo.material-symbols-outlined {
3441
3477
  font-size: 40px;
3442
3478
  color: var(--accent-bright);
3443
3479
  }
@@ -3587,7 +3623,9 @@ button.twm-about-dialog__btn--close:focus {
3587
3623
  gap: 10px;
3588
3624
  min-width: 0;
3589
3625
  }
3590
- .twm-detail-header__icon {
3626
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3627
+ .twm-detail-header__icon,
3628
+ .twm-detail-header__icon.material-symbols-outlined {
3591
3629
  font-size: 20px;
3592
3630
  color: var(--text-muted, var(--text-muted));
3593
3631
  flex-shrink: 0;
@@ -3840,7 +3878,9 @@ button.twm-about-dialog__btn--close:focus {
3840
3878
  background-color: var(--ea-input-bg, #1e1e1e);
3841
3879
  border-color: rgba(96, 192, 96, 0.50);
3842
3880
  }
3843
- .twm-attr-editor__attention {
3881
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3882
+ .twm-attr-editor__attention,
3883
+ .twm-attr-editor__attention.material-symbols-outlined {
3844
3884
  /* Positioned in the row's left gutter so it doesn't push the
3845
3885
  * cells. The row already has `position: relative`. */
3846
3886
  position: absolute;
@@ -3851,7 +3891,9 @@ button.twm-about-dialog__btn--close:focus {
3851
3891
  font-size: 0.85em;
3852
3892
  pointer-events: none;
3853
3893
  }
3854
- .twm-attr-editor__revert {
3894
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3895
+ .twm-attr-editor__revert,
3896
+ .twm-attr-editor__revert.material-symbols-outlined {
3855
3897
  /* Floats over the right edge of the row, outside the column grid.
3856
3898
  * Sits ABOVE the trailing remove-button gutter that sortable_list
3857
3899
  * draws, so it stays visible. */
@@ -4482,8 +4524,11 @@ button.twm-about-dialog__btn--close:focus {
4482
4524
  * scrolls under them — a tab that shrinks to nothing as you open the tenth
4483
4525
  * one is a tab you cannot read or aim at. The scrollbar itself is hidden:
4484
4526
  * it is a 26px strip, and a horizontal bar in it would eat a third of the
4485
- * label. Wheel and drag still scroll it, and DragReorder auto-scrolls the
4486
- * edges while a tab is being dragged (`drag_reorder.js:_autoScrollEdge`). */
4527
+ * label. What replaces it is in `notebook_tab_bar.js` (1.5): a plain
4528
+ * vertical wheel scrolls the strip sideways (`#onWheel`), the tab that has
4529
+ * just become active is scrolled into view (`#revealActive`), and the edges
4530
+ * auto-scroll while a tab is dragged toward them
4531
+ * (`drag_reorder.js:_autoScrollEdge`). */
4487
4532
  overflow-x: auto;
4488
4533
  overflow-y: hidden;
4489
4534
  scrollbar-width: none;
@@ -4808,3 +4853,48 @@ button.twm-about-dialog__btn--close:focus {
4808
4853
  cursor: pointer;
4809
4854
  }
4810
4855
  .twm-zoom__value:hover { color: var(--text-primary); }
4856
+
4857
+ /* ══ AUTO SCROLLBARS ═════════════════════════════════════════════════
4858
+ *
4859
+ * `installAutoScrollbars(root)` (src/ui/utils/auto_scrollbars.js): no native
4860
+ * scrollbar under `root`, so nothing reserves layout width for one, and a thin
4861
+ * overlay bar in one fixed layer over every element that scrolls, shown while
4862
+ * it is hovered or scrolling and faded out after. */
4863
+ .twm-autoscroll,
4864
+ .twm-autoscroll * {
4865
+ scrollbar-width: none;
4866
+ }
4867
+ .twm-autoscroll::-webkit-scrollbar,
4868
+ .twm-autoscroll *::-webkit-scrollbar {
4869
+ width: 0;
4870
+ height: 0;
4871
+ }
4872
+ .twm-autoscroll-layer {
4873
+ position: fixed;
4874
+ inset: 0;
4875
+ pointer-events: none;
4876
+ z-index: 2147483000;
4877
+ }
4878
+ .twm-autoscroll-bar {
4879
+ position: fixed;
4880
+ border-radius: 3px;
4881
+ background: rgba(255, 255, 255, 0.06);
4882
+ opacity: 0;
4883
+ pointer-events: none;
4884
+ transition: opacity 160ms ease;
4885
+ }
4886
+ .twm-autoscroll-bar--on {
4887
+ opacity: 1;
4888
+ pointer-events: auto;
4889
+ }
4890
+ .twm-autoscroll-thumb {
4891
+ position: absolute;
4892
+ border-radius: 3px;
4893
+ background: rgba(255, 255, 255, 0.28);
4894
+ cursor: pointer;
4895
+ transition: background 80ms ease;
4896
+ }
4897
+ .twm-autoscroll-bar--on:hover .twm-autoscroll-thumb,
4898
+ .twm-autoscroll-bar--active .twm-autoscroll-thumb {
4899
+ background: rgba(255, 255, 255, 0.45);
4900
+ }
package/css/flexdesk.css CHANGED
@@ -553,6 +553,25 @@ body.twm-dt-col-resizing {
553
553
  .twm-preview-table.twm-dt-measuring .twm-data-table__filter-row {
554
554
  display: none !important;
555
555
  }
556
+ /* ── C10. The virtual window (`DataTable` with `virtualize`) ─────────────
557
+ * The column track is a `<colgroup>` (see `_createTable`), so it is the
558
+ * `<col>` widths the measuring pass has to lift — the same `!important` it
559
+ * already uses on the cells. The floors on body cells (100px on the first,
560
+ * 80px on the rest) are off: a full render lifts them with inline styles on
561
+ * its first row, and a virtual one has no fixed first row to write them on.
562
+ * The spacers carry their geometry inline; this only keeps a hover or a
563
+ * stripe from painting them. */
564
+ .twm-preview-table.twm-dt-measuring col {
565
+ width: auto !important;
566
+ }
567
+ .twm-preview-table.twm-dt--virtual tbody td {
568
+ min-width: 0;
569
+ max-width: none;
570
+ }
571
+ .twm-preview-table tbody tr.twm-dt-spacer,
572
+ .twm-preview-table tbody tr.twm-dt-spacer > td {
573
+ background: transparent !important;
574
+ }
556
575
  .twm-preview-table th {
557
576
  position: sticky;
558
577
  top: 0;
@@ -984,7 +1003,9 @@ body.twm-dt-col-resizing {
984
1003
  outline-offset: -2px;
985
1004
  }
986
1005
  /* Unified collapsible arrow system */
987
- .twm-collapsible-arrow {
1006
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1007
+ .twm-collapsible-arrow,
1008
+ .twm-collapsible-arrow.material-symbols-outlined {
988
1009
  transition: transform 0.2s ease;
989
1010
  transform: rotate(0deg); /* Default: pointing down (expanded) */
990
1011
  font-size: 10px;
@@ -1045,7 +1066,12 @@ body.twm-dt-col-resizing {
1045
1066
  margin: 0 1px;
1046
1067
  user-select: none;
1047
1068
  }
1048
- .twm-topbar-breadcrumb__icon {
1069
+ /* Written twice for `.twm-leaf__icon`'s reason: the icon also carries
1070
+ * `.material-symbols-outlined`, and Google's stylesheet — loaded after this
1071
+ * one — sets that class to 24px. A single-class rule ties and loses on source
1072
+ * order, so every crumb drew a 24px glyph beside 12px text (Tables BUG-0024). */
1073
+ .twm-topbar-breadcrumb__icon,
1074
+ .twm-topbar-breadcrumb__icon.material-symbols-outlined {
1049
1075
  font-size: var(--font-size-lg);
1050
1076
  }
1051
1077
  .twm-topbar-breadcrumb__item--current {
@@ -1343,7 +1369,9 @@ body.twm-dt-col-resizing {
1343
1369
  .twm-autocomplete-field__item:hover {
1344
1370
  background-color: #3a3a3a;
1345
1371
  }
1346
- .twm-autocomplete-field__icon {
1372
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1373
+ .twm-autocomplete-field__icon,
1374
+ .twm-autocomplete-field__icon.material-symbols-outlined {
1347
1375
  font-size: var(--font-size-2xl);
1348
1376
  color: var(--text-muted);
1349
1377
  flex-shrink: 0;
@@ -3356,7 +3384,9 @@ body.twm-window-maximized .twm-resize-handle {
3356
3384
  .twm-managed-window--no-drag .twm-managed-window__topbar {
3357
3385
  cursor: default;
3358
3386
  }
3359
- .twm-managed-window__icon {
3387
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3388
+ .twm-managed-window__icon,
3389
+ .twm-managed-window__icon.material-symbols-outlined {
3360
3390
  font-size: var(--font-size-lg);
3361
3391
  color: var(--text-muted);
3362
3392
  flex-shrink: 0;
@@ -3518,7 +3548,9 @@ button.twm-managed-window__btn svg rect {
3518
3548
  .twm-bar-windows__item:active {
3519
3549
  background: #1a6aa5;
3520
3550
  }
3521
- .twm-bar-windows__item-icon {
3551
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3552
+ .twm-bar-windows__item-icon,
3553
+ .twm-bar-windows__item-icon.material-symbols-outlined {
3522
3554
  font-size: var(--font-size-sm);
3523
3555
  flex-shrink: 0;
3524
3556
  }
@@ -3569,7 +3601,9 @@ button.twm-managed-window__btn svg rect {
3569
3601
  align-items: flex-start;
3570
3602
  gap: var(--space-lg);
3571
3603
  }
3572
- .twm-confirm-dialog__icon {
3604
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3605
+ .twm-confirm-dialog__icon,
3606
+ .twm-confirm-dialog__icon.material-symbols-outlined {
3573
3607
  font-size: 32px;
3574
3608
  color: var(--text-muted);
3575
3609
  flex-shrink: 0;
@@ -3638,7 +3672,9 @@ button.twm-confirm-dialog__btn:focus {
3638
3672
  border-bottom: 1px solid #333;
3639
3673
  flex-shrink: 0;
3640
3674
  }
3641
- .twm-about-dialog__logo {
3675
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3676
+ .twm-about-dialog__logo,
3677
+ .twm-about-dialog__logo.material-symbols-outlined {
3642
3678
  font-size: 40px;
3643
3679
  color: var(--accent-bright);
3644
3680
  }
@@ -3788,7 +3824,9 @@ button.twm-about-dialog__btn--close:focus {
3788
3824
  gap: 10px;
3789
3825
  min-width: 0;
3790
3826
  }
3791
- .twm-detail-header__icon {
3827
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
3828
+ .twm-detail-header__icon,
3829
+ .twm-detail-header__icon.material-symbols-outlined {
3792
3830
  font-size: 20px;
3793
3831
  color: var(--text-muted, var(--text-muted));
3794
3832
  flex-shrink: 0;
@@ -4041,7 +4079,9 @@ button.twm-about-dialog__btn--close:focus {
4041
4079
  background-color: var(--ea-input-bg, #1e1e1e);
4042
4080
  border-color: rgba(96, 192, 96, 0.50);
4043
4081
  }
4044
- .twm-attr-editor__attention {
4082
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
4083
+ .twm-attr-editor__attention,
4084
+ .twm-attr-editor__attention.material-symbols-outlined {
4045
4085
  /* Positioned in the row's left gutter so it doesn't push the
4046
4086
  * cells. The row already has `position: relative`. */
4047
4087
  position: absolute;
@@ -4052,7 +4092,9 @@ button.twm-about-dialog__btn--close:focus {
4052
4092
  font-size: 0.85em;
4053
4093
  pointer-events: none;
4054
4094
  }
4055
- .twm-attr-editor__revert {
4095
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
4096
+ .twm-attr-editor__revert,
4097
+ .twm-attr-editor__revert.material-symbols-outlined {
4056
4098
  /* Floats over the right edge of the row, outside the column grid.
4057
4099
  * Sits ABOVE the trailing remove-button gutter that sortable_list
4058
4100
  * draws, so it stays visible. */
@@ -5609,8 +5651,11 @@ body.twm-dragging * { user-select: none; }
5609
5651
  * scrolls under them — a tab that shrinks to nothing as you open the tenth
5610
5652
  * one is a tab you cannot read or aim at. The scrollbar itself is hidden:
5611
5653
  * it is a 26px strip, and a horizontal bar in it would eat a third of the
5612
- * label. Wheel and drag still scroll it, and DragReorder auto-scrolls the
5613
- * edges while a tab is being dragged (`drag_reorder.js:_autoScrollEdge`). */
5654
+ * label. What replaces it is in `notebook_tab_bar.js` (1.5): a plain
5655
+ * vertical wheel scrolls the strip sideways (`#onWheel`), the tab that has
5656
+ * just become active is scrolled into view (`#revealActive`), and the edges
5657
+ * auto-scroll while a tab is dragged toward them
5658
+ * (`drag_reorder.js:_autoScrollEdge`). */
5614
5659
  overflow-x: auto;
5615
5660
  overflow-y: hidden;
5616
5661
  scrollbar-width: none;
@@ -5862,7 +5907,9 @@ body.twm-dragging * { user-select: none; }
5862
5907
  letter-spacing: 0.04em;
5863
5908
  color: var(--text-secondary);
5864
5909
  }
5865
- .twm-tile-tabmenu__head-icon { font-size: 14px; }
5910
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
5911
+ .twm-tile-tabmenu__head-icon,
5912
+ .twm-tile-tabmenu__head-icon.material-symbols-outlined { font-size: 14px; }
5866
5913
  .twm-tile-tabmenu__head-label { flex: 1 1 auto; }
5867
5914
  .twm-tile-tabmenu__close {
5868
5915
  background: transparent;
@@ -6038,7 +6085,9 @@ body.twm-dragging * { user-select: none; }
6038
6085
  outline-offset: -1px;
6039
6086
  }
6040
6087
  .twm-tile-tabswitch__item--on { color: var(--text-bright); }
6041
- .twm-tile-tabswitch__check { font-size: 14px; color: var(--accent-bright, #1683c4); }
6088
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
6089
+ .twm-tile-tabswitch__check,
6090
+ .twm-tile-tabswitch__check.material-symbols-outlined { font-size: 14px; color: var(--accent-bright, #1683c4); }
6042
6091
  .twm-tile-tabswitch__label {
6043
6092
  overflow: hidden;
6044
6093
  text-overflow: ellipsis;
@@ -6098,7 +6147,9 @@ body.twm-dragging * { user-select: none; }
6098
6147
  white-space: nowrap;
6099
6148
  user-select: none;
6100
6149
  }
6101
- .twm-cmdpal__type-chip-icon {
6150
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
6151
+ .twm-cmdpal__type-chip-icon,
6152
+ .twm-cmdpal__type-chip-icon.material-symbols-outlined {
6102
6153
  font-size: 14px;
6103
6154
  }
6104
6155
  .twm-cmdpal__type-chip-label {
@@ -6181,7 +6232,9 @@ body.twm-dragging * { user-select: none; }
6181
6232
  background: var(--state-selected);
6182
6233
  color: var(--text-bright);
6183
6234
  }
6184
- .twm-cmdpal__icon { color: var(--text-muted); font-size: 16px; }
6235
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
6236
+ .twm-cmdpal__icon,
6237
+ .twm-cmdpal__icon.material-symbols-outlined { color: var(--text-muted); font-size: 16px; }
6185
6238
  .twm-cmdpal__label { font-weight: var(--font-weight-medium); }
6186
6239
  .twm-cmdpal__kind,
6187
6240
  .twm-cmdpal__hint {
@@ -7002,7 +7055,9 @@ tr:hover .twm-row-action { opacity: 1; }
7002
7055
  color: var(--text-muted);
7003
7056
  text-align: center;
7004
7057
  }
7005
- .twm-window-placeholder__icon {
7058
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
7059
+ .twm-window-placeholder__icon,
7060
+ .twm-window-placeholder__icon.material-symbols-outlined {
7006
7061
  font-size: 32px;
7007
7062
  opacity: 0.5;
7008
7063
  }
@@ -7081,7 +7136,9 @@ tr:hover .twm-row-action { opacity: 1; }
7081
7136
  background: #000;
7082
7137
  color: var(--text-bright);
7083
7138
  }
7084
- .twm-top-nav__icon {
7139
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
7140
+ .twm-top-nav__icon,
7141
+ .twm-top-nav__icon.material-symbols-outlined {
7085
7142
  font-size: 16px;
7086
7143
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
7087
7144
  }
@@ -7156,3 +7213,48 @@ tr:hover .twm-row-action { opacity: 1; }
7156
7213
  cursor: pointer;
7157
7214
  }
7158
7215
  .twm-zoom__value:hover { color: var(--text-primary); }
7216
+
7217
+ /* ══ AUTO SCROLLBARS ═════════════════════════════════════════════════
7218
+ *
7219
+ * `installAutoScrollbars(root)` (src/ui/utils/auto_scrollbars.js): no native
7220
+ * scrollbar under `root`, so nothing reserves layout width for one, and a thin
7221
+ * overlay bar in one fixed layer over every element that scrolls, shown while
7222
+ * it is hovered or scrolling and faded out after. */
7223
+ .twm-autoscroll,
7224
+ .twm-autoscroll * {
7225
+ scrollbar-width: none;
7226
+ }
7227
+ .twm-autoscroll::-webkit-scrollbar,
7228
+ .twm-autoscroll *::-webkit-scrollbar {
7229
+ width: 0;
7230
+ height: 0;
7231
+ }
7232
+ .twm-autoscroll-layer {
7233
+ position: fixed;
7234
+ inset: 0;
7235
+ pointer-events: none;
7236
+ z-index: 2147483000;
7237
+ }
7238
+ .twm-autoscroll-bar {
7239
+ position: fixed;
7240
+ border-radius: 3px;
7241
+ background: rgba(255, 255, 255, 0.06);
7242
+ opacity: 0;
7243
+ pointer-events: none;
7244
+ transition: opacity 160ms ease;
7245
+ }
7246
+ .twm-autoscroll-bar--on {
7247
+ opacity: 1;
7248
+ pointer-events: auto;
7249
+ }
7250
+ .twm-autoscroll-thumb {
7251
+ position: absolute;
7252
+ border-radius: 3px;
7253
+ background: rgba(255, 255, 255, 0.28);
7254
+ cursor: pointer;
7255
+ transition: background 80ms ease;
7256
+ }
7257
+ .twm-autoscroll-bar--on:hover .twm-autoscroll-thumb,
7258
+ .twm-autoscroll-bar--active .twm-autoscroll-thumb {
7259
+ background: rgba(255, 255, 255, 0.45);
7260
+ }
package/css/overrides.css CHANGED
@@ -1231,7 +1231,9 @@ body.twm-dragging * { user-select: none; }
1231
1231
  letter-spacing: 0.04em;
1232
1232
  color: var(--text-secondary);
1233
1233
  }
1234
- .twm-tile-tabmenu__head-icon { font-size: 14px; }
1234
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1235
+ .twm-tile-tabmenu__head-icon,
1236
+ .twm-tile-tabmenu__head-icon.material-symbols-outlined { font-size: 14px; }
1235
1237
  .twm-tile-tabmenu__head-label { flex: 1 1 auto; }
1236
1238
  .twm-tile-tabmenu__close {
1237
1239
  background: transparent;
@@ -1401,7 +1403,9 @@ body.twm-dragging * { user-select: none; }
1401
1403
  white-space: nowrap;
1402
1404
  user-select: none;
1403
1405
  }
1404
- .twm-cmdpal__type-chip-icon {
1406
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1407
+ .twm-cmdpal__type-chip-icon,
1408
+ .twm-cmdpal__type-chip-icon.material-symbols-outlined {
1405
1409
  font-size: 14px;
1406
1410
  }
1407
1411
  .twm-cmdpal__type-chip-label {
@@ -1484,7 +1488,9 @@ body.twm-dragging * { user-select: none; }
1484
1488
  background: var(--state-selected);
1485
1489
  color: var(--text-bright);
1486
1490
  }
1487
- .twm-cmdpal__icon { color: var(--text-muted); font-size: 16px; }
1491
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
1492
+ .twm-cmdpal__icon,
1493
+ .twm-cmdpal__icon.material-symbols-outlined { color: var(--text-muted); font-size: 16px; }
1488
1494
  .twm-cmdpal__label { font-weight: var(--font-weight-medium); }
1489
1495
  .twm-cmdpal__kind,
1490
1496
  .twm-cmdpal__hint {
@@ -2305,7 +2311,9 @@ tr:hover .twm-row-action { opacity: 1; }
2305
2311
  color: var(--text-muted);
2306
2312
  text-align: center;
2307
2313
  }
2308
- .twm-window-placeholder__icon {
2314
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
2315
+ .twm-window-placeholder__icon,
2316
+ .twm-window-placeholder__icon.material-symbols-outlined {
2309
2317
  font-size: 32px;
2310
2318
  opacity: 0.5;
2311
2319
  }
@@ -2384,7 +2392,9 @@ tr:hover .twm-row-action { opacity: 1; }
2384
2392
  background: #000;
2385
2393
  color: var(--text-bright);
2386
2394
  }
2387
- .twm-top-nav__icon {
2395
+ /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
2396
+ .twm-top-nav__icon,
2397
+ .twm-top-nav__icon.material-symbols-outlined {
2388
2398
  font-size: 16px;
2389
2399
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
2390
2400
  }
package/dist/charts.js CHANGED
@@ -39,10 +39,10 @@ import {
39
39
  setPlotlySource,
40
40
  uid,
41
41
  updateChart
42
- } from "./chunk-4RGQSRMC.js";
42
+ } from "./chunk-HWCX5I4R.js";
43
43
  import {
44
44
  createRafResizeObserver
45
- } from "./chunk-P4AALM3A.js";
45
+ } from "./chunk-CYTWMP2Y.js";
46
46
  import {
47
47
  ManagedWindow
48
48
  } from "./chunk-LH5TSOZW.js";