anentrypoint-design 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/kits/os/theme.css

@@ -368,7 +368,63 @@ html, body {
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    /* Open/maximize/restore transitions: transform+opacity are interpolable
+     * (unlike wm-min's `display:none`, which cannot transition at all — a
+     * real minimize/restore animation needs wm.js to defer the display swap
+     * until this transition ends, tracked as its own follow-up). A freshly
+     * mounted .wm-win starts from CSS-animation-in via @starting-style so it
+     * scales/fades into place instead of snapping to full size, and every
+     * maximize/restore toggle (a real geometry change, not a display swap)
+     * eases instead of jumping. */
+    transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 160ms ease;
+}
+@supports (transition-behavior: allow-discrete) {
+  .ds-247420 .wm-win {
+    transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 160ms ease;
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .wm-win { transition: none; }
+}
+
+/* Minimize/restore/close: wm.js's animateMinimize()/animateClose() (wm.js)
+ * apply these classes BEFORE the real wm-min toggle / el.remove(), holding
+ * them for exactly the duration below so the display:none / DOM-removal
+ * that neither CSS nor `transition` can animate happens only after the
+ * visual scale+fade has actually played out. Direction: minimize collapses
+ * toward the taskbar (down+shrink); close shrinks in place; restore is the
+ * minimize keyframe in reverse. Not scoped to .ds-247420 -- these classes
+ * are always renderWindow()-authored, own their state fully. */
+.wm-win.wm-minimizing {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+  transform: scale(0.85) translateY(24px);
+  pointer-events: none;
 }
+.wm-win.wm-restoring {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
+  animation: wm-restore-in 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
+}
+@keyframes wm-restore-in {
+  from { opacity: 0; transform: scale(0.85) translateY(24px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+.wm-win.wm-closing {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+  transform: scale(0.92);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wm-win.wm-minimizing, .wm-win.wm-restoring, .wm-win.wm-closing {
+    transition: none; animation: none; opacity: 1; transform: none;
+  }
+}
+
 .ds-247420 .wm-win.wm-focused {
     border-color: color-mix(in oklab, var(--os-fg) 28%, transparent);
     box-shadow: inset var(--space-1) 0 0 var(--os-accent), var(--shadow-3);
@@ -396,7 +452,12 @@ html, body {
     letter-spacing: 0.005em;
     text-align: center;
     font-weight: 600;
-    opacity: 0.65;
+    /* 0.72, not 0.65: measured live against the unfocused titlebar's actual
+     * background (rgb(77,77,82)) the opacity-blended effective contrast at
+     * 0.65 was 4.25:1 -- below WCAG AA's 4.5:1 floor for normal text. 0.72
+     * clears it with margin (~4.8:1) while staying visually dimmer than the
+     * focused window's full-opacity title. */
+    opacity: 0.72;
     transition: opacity 120ms ease;
     /* No text-transform here: the titlebar renders the window's own dynamic
      * title (renderWindow({title}) / setTitle(t) in wm.js) — a user- or

package/src/kits/os/wm.js

@@ -226,11 +226,11 @@ export function renderWindow(opts = {}) {
         },
         setFocused(v) { applyFocused(el, v); },
         setMaximized(v) { applyMaximized(el, v); },
-        setMinimized(v) { applyMinimized(el, v); },
+        setMinimized(v) { animateMinimize(el, v); },
         setInstanceId(id) { if (id) el.dataset.instanceId = id; else delete el.dataset.instanceId; },
         setZIndex(z) { el.style.zIndex = String(z); },
         getBounds() { return { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight }; },
-        dispose() { if (closeArmTimer) clearTimeout(closeArmTimer); el.remove(); },
+        dispose() { if (closeArmTimer) clearTimeout(closeArmTimer); animateClose(el); },
     };
 }
 
@@ -252,3 +252,42 @@ function setBodyContent(host, body) {
 function applyFocused(el, v) { el.classList.toggle('wm-focused', !!v); }
 function applyMaximized(el, v) { el.classList.toggle('wm-max', !!v); }
 function applyMinimized(el, v) { el.classList.toggle('wm-min', !!v); }
+
+function reducedMotion() {
+    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// wm.css's `.wm-win.wm-min{display:none}` cannot be CSS-transitioned (display
+// has no interpolable intermediate value), so a real minimize animation needs
+// the display swap deferred until a scale+fade transition actually finishes.
+// `.wm-minimizing`/`.wm-restoring` (theme.css) carry the transform+opacity
+// keyframes; this only sequences when `wm-min` itself flips. 220ms fallback
+// timer guards against a transitionend that never fires (element removed
+// mid-transition, browser tab backgrounded and rAF/transitions paused, etc.)
+// so a window can never get stuck invisible-but-not-display:none.
+function animateMinimize(el, v) {
+    if (reducedMotion()) { applyMinimized(el, v); return; }
+    if (v) {
+        el.classList.add('wm-minimizing');
+        const done = () => { el.classList.remove('wm-minimizing'); applyMinimized(el, true); };
+        el.addEventListener('transitionend', done, { once: true });
+        setTimeout(done, 220);
+    } else {
+        applyMinimized(el, false);
+        el.classList.add('wm-restoring');
+        setTimeout(() => el.classList.remove('wm-restoring'), 220);
+    }
+}
+
+// Same display-can't-transition problem as minimize, but for the terminal
+// close path: el.remove() used to happen synchronously, so a window vanished
+// instantly with no close animation at all (the literal gap named in the
+// "no animation on open/close" request). Fade+scale out, then remove.
+function animateClose(el) {
+    if (!el.isConnected) return;
+    if (reducedMotion()) { el.remove(); return; }
+    el.classList.add('wm-closing');
+    const done = () => el.remove();
+    el.addEventListener('transitionend', done, { once: true });
+    setTimeout(done, 220);
+}