@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/system/actions/resolve.js

@@ -2,7 +2,7 @@ const statusColors = {
     ok: 'var(--status-ok)',
     warn: 'var(--status-warn)',
     fail: 'var(--status-fail)',
-    pend: 'var(--status-pend)',
+    pend: 'var(--status-pend)'
 };
 /**
  * Animates a status change on an element. A brief overlay flash in the
@@ -25,6 +25,9 @@ export function resolve(node, register) {
     const position = getComputedStyle(node).position;
     if (position === 'static')
         node.style.position = 'relative';
+    let frame = 0;
+    let t1 = 0;
+    let t2 = 0;
     function trigger(status) {
         node.dispatchEvent(new CustomEvent('resolve:start', { detail: status }));
         if (prefersReduced) {
@@ -32,22 +35,25 @@ export function resolve(node, register) {
             return;
         }
         const overlay = document.createElement('span');
-        overlay.style.cssText = `
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      background: ${statusColors[status]};
-      opacity: 0;
-      border-radius: inherit;
-      transition: opacity 0.12s ease-out;
+        overlay.style.cssText = `
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: ${statusColors[status]};
+      opacity: 0;
+      border-radius: inherit;
+      transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
     `;
         node.appendChild(overlay);
-        requestAnimationFrame(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(t1);
+        clearTimeout(t2);
+        frame = requestAnimationFrame(() => {
             overlay.style.opacity = '0.12';
-            setTimeout(() => {
-                overlay.style.transition = 'opacity 0.4s ease-out';
+            t1 = setTimeout(() => {
+                overlay.style.transition = 'opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1)';
                 overlay.style.opacity = '0';
-                setTimeout(() => {
+                t2 = setTimeout(() => {
                     overlay.remove();
                     node.dispatchEvent(new CustomEvent('resolve:end', { detail: status }));
                 }, 450);
@@ -55,5 +61,13 @@ export function resolve(node, register) {
         });
     }
     register({ trigger });
-    return {};
+    return {
+        destroy() {
+            cancelAnimationFrame(frame);
+            clearTimeout(t1);
+            clearTimeout(t2);
+            if (position === 'static')
+                node.style.position = '';
+        }
+    };
 }

package/dist/system/actions/reveal.js

@@ -21,7 +21,7 @@ export function reveal(node, options) {
         target.style.opacity = '0';
         target.style.transform = prefersReduced ? 'none' : 'translateY(4px)';
         if (!prefersReduced) {
-            target.style.transition = 'opacity 0.25s ease-out, transform 0.25s ease-out';
+            target.style.transition = 'opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1)';
         }
     }
     function show() {
@@ -49,6 +49,6 @@ export function reveal(node, options) {
             node.removeEventListener('mouseleave', hide);
             node.removeEventListener('focusin', show);
             node.removeEventListener('focusout', hide);
-        },
+        }
     };
 }

package/dist/system/actions/surface.js

@@ -12,14 +12,24 @@ export function surface(node, options = {}) {
         return {};
     node.style.opacity = '0';
     node.style.transform = 'translateY(6px)';
-    node.style.transition = `opacity 0.5s ease-out ${delay}ms, transform 0.5s ease-out ${delay}ms`;
+    node.style.transition = `opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`;
+    function onEnd(e) {
+        if (e.propertyName !== 'transform')
+            return;
+        node.removeEventListener('transitionend', onEnd);
+        // Clear transforms to avoid creating containing blocks for fixed/floating UI.
+        node.style.transform = 'none';
+        node.style.transition = '';
+    }
+    node.addEventListener('transitionend', onEnd);
     const frame = requestAnimationFrame(() => {
         node.style.opacity = '1';
         node.style.transform = 'translateY(0)';
     });
     return {
         destroy() {
+            node.removeEventListener('transitionend', onEnd);
             cancelAnimationFrame(frame);
-        },
+        }
     };
 }

package/dist/system/depth/depth.css

@@ -1,49 +1,49 @@
-/* ── perspective tokens ──────────────────────────────────────────────── */
-:root {
-  --perspective-near: 600px;
-  --perspective-mid: 1000px;
-  --perspective-far: 1800px;
-
-  --depth-ground: 0px;
-  --depth-raised: 60px;
-  --depth-foreground: 140px;
-
-  --depth-tilt-max: 8deg;
-  --depth-tilt-subtle: 3deg;
-
-  --depth-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-/* ── perspective container ───────────────────────────────────────────── */
-.depth-stage {
-  perspective: var(--perspective-mid);
-  perspective-origin: 50% 40%;
-  transform-style: preserve-3d;
-}
-
-/* ── depth level utilities ───────────────────────────────────────────── */
-.depth-ground {
-  transform: translateZ(var(--depth-ground));
-}
-
-.depth-raised {
-  transform: translateZ(var(--depth-raised));
-}
-
-.depth-foreground {
-  transform: translateZ(var(--depth-foreground));
-}
-
-/* ── reduced motion override ─────────────────────────────────────────── */
-@media (prefers-reduced-motion: reduce) {
-  .depth-ground,
-  .depth-raised,
-  .depth-foreground {
-    transform: none;
-  }
-
-  .depth-stage {
-    perspective: none;
-    transform-style: flat;
-  }
-}
+/* ── perspective tokens ──────────────────────────────────────────────── */
+:root {
+	--perspective-near: 600px;
+	--perspective-mid: 1000px;
+	--perspective-far: 1800px;
+
+	--depth-ground: 0px;
+	--depth-raised: 60px;
+	--depth-foreground: 140px;
+
+	--depth-tilt-max: 8deg;
+	--depth-tilt-subtle: 3deg;
+
+	--depth-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ── perspective container ───────────────────────────────────────────── */
+.depth-stage {
+	perspective: var(--perspective-mid);
+	perspective-origin: 50% 40%;
+	transform-style: preserve-3d;
+}
+
+/* ── depth level utilities ───────────────────────────────────────────── */
+.depth-ground {
+	transform: translateZ(var(--depth-ground));
+}
+
+.depth-raised {
+	transform: translateZ(var(--depth-raised));
+}
+
+.depth-foreground {
+	transform: translateZ(var(--depth-foreground));
+}
+
+/* ── reduced motion override ─────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+	.depth-ground,
+	.depth-raised,
+	.depth-foreground {
+		transform: none;
+	}
+
+	.depth-stage {
+		perspective: none;
+		transform-style: flat;
+	}
+}

package/dist/system/depth/depth.js

@@ -5,7 +5,7 @@ export function depthZ(level) {
     const map = {
         ground: 'var(--depth-ground)',
         raised: 'var(--depth-raised)',
-        foreground: 'var(--depth-foreground)',
+        foreground: 'var(--depth-foreground)'
     };
     return map[level];
 }

package/dist/system/expressions.css

@@ -1,80 +1,80 @@
-/* ── typographic expressions ──────────────────────────────────────────── */
-/* expressions describe compositional intent — what the text is doing in  */
-/* the design. they are orthogonal to variants (structural role).          */
-/* apply via the Text component's expression prop or manually via class.   */
-
-/* ── expression: title-card ──────────────────────────────────────────── */
-/* scene-opening headers. very large, line-height below 1, max-width tight */
-.expr-title-card {
-  font-family: var(--font-body);
-  font-size: clamp(3.4rem, 10vw, 8rem);
-  font-weight: 400;
-  line-height: 0.91;
-  letter-spacing: -0.05em;
-  max-width: 10ch;
-}
-
-/* ── expression: manifesto ───────────────────────────────────────────── */
-/* philosophical statements, pull-quotes, oblique voice */
-.expr-manifesto {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
-  line-height: 1.45;
-  color: var(--text-soft);
-  max-width: 30rem;
-}
-
-/* ── expression: readout ─────────────────────────────────────────────── */
-/* data labels, system output, status-like content */
-.expr-readout {
-  font-family: var(--font-mono);
-  font-size: 0.82rem;
-  letter-spacing: 0.06em;
-  color: var(--muted);
-  line-height: 1.6;
-}
-
-/* ── expression: whisper ─────────────────────────────────────────────── */
-/* supporting notes, parenthetical content, secondary metadata */
-.expr-whisper {
-  font-family: var(--font-body);
-  font-size: 0.88rem;
-  color: var(--muted-strong);
-  line-height: 1.5;
-  font-style: italic;
-}
-
-/* ── expression: command ─────────────────────────────────────────────── */
-/* CTAs, active instructions, call-to-action labels */
-.expr-command {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--accent);
-  font-weight: 500;
-}
-
-/* ── expression: chapter ─────────────────────────────────────────────── */
-/* section openers, scene numbers, narrative markers */
-.expr-chapter {
-  font-family: var(--font-mono);
-  font-size: 0.62rem;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--muted-strong);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-/* adds a line after the label */
-.expr-chapter::after {
-  content: '';
-  display: block;
-  flex: 1;
-  height: 1px;
-  background: var(--line);
-  max-width: 4rem;
-}
+/* ── typographic expressions ──────────────────────────────────────────── */
+/* expressions describe compositional intent — what the text is doing in  */
+/* the design. they are orthogonal to variants (structural role).          */
+/* apply via the Text component's expression prop or manually via class.   */
+
+/* ── expression: title-card ──────────────────────────────────────────── */
+/* scene-opening headers. very large, line-height below 1, max-width tight */
+.expr-title-card {
+	font-family: var(--font-body);
+	font-size: clamp(3.4rem, 10vw, 8rem);
+	font-weight: 400;
+	line-height: 0.91;
+	letter-spacing: -0.05em;
+	max-width: 10ch;
+}
+
+/* ── expression: manifesto ───────────────────────────────────────────── */
+/* philosophical statements, pull-quotes, oblique voice */
+.expr-manifesto {
+	font-family: var(--font-body);
+	font-style: italic;
+	font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+	line-height: 1.45;
+	color: var(--text-soft);
+	max-width: 30rem;
+}
+
+/* ── expression: readout ─────────────────────────────────────────────── */
+/* data labels, system output, status-like content */
+.expr-readout {
+	font-family: var(--font-mono);
+	font-size: 0.82rem;
+	letter-spacing: 0.06em;
+	color: var(--muted);
+	line-height: 1.6;
+}
+
+/* ── expression: whisper ─────────────────────────────────────────────── */
+/* supporting notes, parenthetical content, secondary metadata */
+.expr-whisper {
+	font-family: var(--font-body);
+	font-size: 0.88rem;
+	color: var(--muted-strong);
+	line-height: 1.5;
+	font-style: italic;
+}
+
+/* ── expression: command ─────────────────────────────────────────────── */
+/* CTAs, active instructions, call-to-action labels */
+.expr-command {
+	font-family: var(--font-mono);
+	font-size: 0.75rem;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	color: var(--accent);
+	font-weight: 500;
+}
+
+/* ── expression: chapter ─────────────────────────────────────────────── */
+/* section openers, scene numbers, narrative markers */
+.expr-chapter {
+	font-family: var(--font-mono);
+	font-size: 0.62rem;
+	letter-spacing: 0.22em;
+	text-transform: uppercase;
+	color: var(--muted-strong);
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+/* adds a line after the label */
+.expr-chapter::after {
+	content: '';
+	display: block;
+	flex: 1;
+	height: 1px;
+	background: var(--line);
+	max-width: 4rem;
+}

package/dist/system/override-template.css

@@ -1,72 +1,72 @@
-/**
- * hyvui project override layer
- * ─────────────────────────────────────────────────────────────────────────
- * Copy this file into your project as `theme.css` and import it after
- * `app.css`. Uncomment and adjust properties to tune the library's
- * presentation for this specific project.
- *
- * DO NOT modify tokens.css. This file is the only sanctioned override surface.
- * DO NOT change color values here. Color lives in tokens.css.
- * This file controls presence, weight, and scale — not palette.
- *
- * Apply a register for broader personality shifts:
- *   document.body.dataset.register = 'field-notebook' | 'mission-control' | 'archive'
- */
-
-:root {
-  /* ── type presence ──────────────────────────────────────────────────── */
-  /* Adjust heading compression. More negative = more compressed.         */
-  /* --reg-heading-tracking: -0.05em;  */
-
-  /* Adjust body text size. Range: 0.9rem (dense) to 1.25rem (editorial) */
-  /* --reg-body-size: 1.1rem;          */
-
-  /* ── surface presence ───────────────────────────────────────────────── */
-  /* Lower opacity = cards feel lighter, more atmospheric.                */
-  /* Higher opacity = cards feel heavier, more structured.                */
-  /* Range: 0.4 (ghostly) to 1.0 (fully opaque)                          */
-  /* --reg-surface-opacity: 0.8;       */
-
-  /* ── ornament presence ──────────────────────────────────────────────── */
-  /* Controls ambient component visibility globally.                      */
-  /* 0 = invisible, 1 = full AESTHETICS.md opacity                        */
-  /* --reg-ornament-opacity: 0.14;     */
-
-  /* ── accent balance ─────────────────────────────────────────────────── */
-  /* Gold weight. 1 = full presence, 0.4 = almost invisible.              */
-  /* --reg-accent-weight: 1;           */
-
-  /* Teal weight. Same scale.                                              */
-  /* --reg-signal-weight: 0.8;         */
-
-  /* ── spacing scale ──────────────────────────────────────────────────── */
-  /* Multiplier on spacing. > 1 = more breathing room. < 1 = tighter.     */
-  /* Range: 0.85 (compact) to 1.4 (spacious)                              */
-  /* --reg-spacing-scale: 1;           */
-}
-
-/*
- * EXAMPLE: Portfolio / narrative project
- * ──────────────────────────────────────
- * :root {
- *   --reg-heading-tracking:  -0.055em;
- *   --reg-body-size:          1.15rem;
- *   --reg-surface-opacity:    0.65;
- *   --reg-ornament-opacity:   0.2;
- *   --reg-accent-weight:      1;
- *   --reg-signal-weight:      0.5;
- *   --reg-spacing-scale:      1.2;
- * }
- *
- * EXAMPLE: Dashboard / tool project
- * ───────────────────────────────────
- * :root {
- *   --reg-heading-tracking:  -0.02em;
- *   --reg-body-size:          0.9rem;
- *   --reg-surface-opacity:    0.95;
- *   --reg-ornament-opacity:   0.06;
- *   --reg-accent-weight:      0.6;
- *   --reg-signal-weight:      1;
- *   --reg-spacing-scale:      0.88;
- * }
- */
+/**
+ * hyvui project override layer
+ * ─────────────────────────────────────────────────────────────────────────
+ * Copy this file into your project as `theme.css` and import it after
+ * `app.css`. Uncomment and adjust properties to tune the library's
+ * presentation for this specific project.
+ *
+ * DO NOT modify tokens.css. This file is the only sanctioned override surface.
+ * DO NOT change color values here. Color lives in tokens.css.
+ * This file controls presence, weight, and scale — not palette.
+ *
+ * Apply a register for broader personality shifts:
+ *   document.body.dataset.register = 'field-notebook' | 'mission-control' | 'archive'
+ */
+
+:root {
+	/* ── type presence ──────────────────────────────────────────────────── */
+	/* Adjust heading compression. More negative = more compressed.         */
+	/* --reg-heading-tracking: -0.05em;  */
+
+	/* Adjust body text size. Range: 0.9rem (dense) to 1.25rem (editorial) */
+	/* --reg-body-size: 1.1rem;          */
+
+	/* ── surface presence ───────────────────────────────────────────────── */
+	/* Lower opacity = cards feel lighter, more atmospheric.                */
+	/* Higher opacity = cards feel heavier, more structured.                */
+	/* Range: 0.4 (ghostly) to 1.0 (fully opaque)                          */
+	/* --reg-surface-opacity: 0.8;       */
+
+	/* ── ornament presence ──────────────────────────────────────────────── */
+	/* Controls ambient component visibility globally.                      */
+	/* 0 = invisible, 1 = full AESTHETICS.md opacity                        */
+	/* --reg-ornament-opacity: 0.14;     */
+
+	/* ── accent balance ─────────────────────────────────────────────────── */
+	/* Gold weight. 1 = full presence, 0.4 = almost invisible.              */
+	/* --reg-accent-weight: 1;           */
+
+	/* Teal weight. Same scale.                                              */
+	/* --reg-signal-weight: 0.8;         */
+
+	/* ── spacing scale ──────────────────────────────────────────────────── */
+	/* Multiplier on spacing. > 1 = more breathing room. < 1 = tighter.     */
+	/* Range: 0.85 (compact) to 1.4 (spacious)                              */
+	/* --reg-spacing-scale: 1;           */
+}
+
+/*
+ * EXAMPLE: Portfolio / narrative project
+ * ──────────────────────────────────────
+ * :root {
+ *   --reg-heading-tracking:  -0.055em;
+ *   --reg-body-size:          1.15rem;
+ *   --reg-surface-opacity:    0.65;
+ *   --reg-ornament-opacity:   0.2;
+ *   --reg-accent-weight:      1;
+ *   --reg-signal-weight:      0.5;
+ *   --reg-spacing-scale:      1.2;
+ * }
+ *
+ * EXAMPLE: Dashboard / tool project
+ * ───────────────────────────────────
+ * :root {
+ *   --reg-heading-tracking:  -0.02em;
+ *   --reg-body-size:          0.9rem;
+ *   --reg-surface-opacity:    0.95;
+ *   --reg-ornament-opacity:   0.06;
+ *   --reg-accent-weight:      0.6;
+ *   --reg-signal-weight:      1;
+ *   --reg-spacing-scale:      0.88;
+ * }
+ */