three-slicer 0.1.5 → 0.1.6

package/viewer/styles.css

@@ -18,12 +18,25 @@
 .tb-btn { display: inline-flex; align-items: center; gap: 5px; background: #20272f; border: 1px solid #2c353d;
   color: #cdd6dd; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
 .tb-btn img { width: 15px; height: 15px; }
-.tb-btn:hover { background: #28313a; }
+.tb-btn:hover:not(:disabled) { background: #28313a; }
+.tb-btn:disabled { color: #5a6570; cursor: not-allowed; opacity: .6; }
+/* The button that is mid-export. It is disabled too, so it must override the greyed-out look — the running action
+   is the one thing on screen that should not look inert. The animation is CSS so it keeps running while the main
+   thread is inside the synchronous half of the write; it stalls only for that stretch, which is the honest signal. */
+.tb-btn.tb-busy:disabled { color: #cdd6dd; opacity: 1; cursor: progress; border-color: #00ae42; animation: tb-pulse 1s ease-in-out infinite; }
+@keyframes tb-pulse { 0%, 100% { background: #20272f; } 50% { background: #23402c; } }
 .tb-tabs { display: flex; border: 1px solid #2c353d; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
 .tb-tabs button { padding: 6px 24px; border: 0; background: #1a2027; color: #9fb3c0; font-weight: 600; font-size: 13px; cursor: pointer; }
 .tb-tabs button.on { background: #00ae42; color: #fff; }
 .tb-tabs button:disabled { color: #5a6570; cursor: not-allowed; }
-.tb-icon { width: 28px; height: 28px; border: 1px solid #2c353d; background: #20272f; color: #7d8b96; border-radius: 6px; font-size: 15px; cursor: not-allowed; }
+/* Undo/redo. Written while these two were permanent placeholders, so the BASE rule carried the disabled look —
+   dim text and cursor:not-allowed — and there was no enabled, hover or pressed state at all. Now that they work,
+   the base is the live look and :disabled carries the dim one, the same split .tb-btn above uses. */
+.tb-icon { width: 28px; height: 28px; border: 1px solid #2c353d; background: #20272f; color: #cdd6dd;
+  border-radius: 6px; font-size: 15px; cursor: pointer; }
+.tb-icon:hover:not(:disabled) { background: #28313a; color: #fff; border-color: #3a4550; }
+.tb-icon:active:not(:disabled) { background: #171d23; }
+.tb-icon:disabled { color: #5a6570; cursor: not-allowed; opacity: .6; }
 
 /* S3 left gizmo rail */
 .left-rail { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 0;
@@ -143,7 +156,11 @@
 .fil-paint.on { background: #2b6cff; border-color: #2b6cff; }
 
 .obj-list2 { list-style: none; margin: 0 0 6px; padding: 0; }
-.obj-list2 li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
+
+.obj-list2 li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; cursor: pointer; }
+/* A row of the object list that is part of the current selection. The card is light and the row text is near-black
+   (.obj-name is #24282e), so the tint has to be a LIGHT green — a dark one swallows the name it is highlighting. */
+.obj-list2 li.obj-selected { background: #e3f6ea; box-shadow: inset 2px 0 0 #00ae42; }
 .obj-list2 li.obj-hidden { opacity: .5; }
 .obj-eye { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 0; }
 .obj-list2 .obj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #24282e; }
@@ -179,6 +196,12 @@
 
 .vp-canvas { position: absolute; inset: 0; }
 .vp-canvas canvas { display: block; }
+/* The 3D view holds focus so Ctrl+Z can be scoped to this component instead of window — the focus itself stays,
+   only its ring is dropped. :focus-visible has to go with it: the focus is taken by a script (`focus()` in the
+   view's own pointerdown), and a scripted focus matches :focus-visible in Chrome even when the pointer caused it,
+   so a plain click drew the ring the :focus rule below was written to prevent. CSS cannot tell that click apart
+   from a Tab, so a keyboard user gets no ring here; the gizmo rail and the panels keep theirs. */
+.vp-canvas:focus, .vp-canvas:focus-visible { outline: none; }
 .vp-canvas.fail { display: flex; align-items: center; justify-content: center; }
 .vp-fallback { color: #f0c9a8; padding: 24px; text-align: center; max-width: 560px; line-height: 1.5; }
 .vp-status { position: absolute; bottom: 8px; left: 12px; right: 12px; z-index: 1;