@hyvnt/hyvui 0.2.0 → 0.3.0

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;
+ * }
+ */

package/dist/system/register.css

@@ -1,74 +1,74 @@
-/* ── register system ──────────────────────────────────────────────────── */
-/* registers shift the weight distribution of the design. no new colors   */
-/* or fonts — the same gold, teal, ET Book, and IBM Plex Mono, but their  */
-/* relative presence changes.                                              */
-/*                                                                         */
-/* apply: <body data-register="field-notebook">                            */
-/* or:    applyRegister('field-notebook')                                  */
-
-/* ── base fallbacks (no register declared) ───────────────────────────── */
-:root {
-  --reg-font-primary: var(--font-body);
-  --reg-font-ui: var(--font-mono);
-  --reg-heading-tracking: -0.04em;
-  --reg-heading-lh: 0.94;
-  --reg-body-size: 1rem;
-  --reg-label-size: 0.68rem;
-  --reg-label-tracking: 0.14em;
-  --reg-surface-opacity: 0.8;
-  --reg-ornament-opacity: 0.14;
-  --reg-accent-weight: 1;
-  --reg-signal-weight: 1;
-  --reg-spacing-scale: 1;
-}
-
-/* ── register: field-notebook ────────────────────────────────────────── */
-/* editorial, warm, serif-forward. for portfolios, narrative pages, about */
-[data-register='field-notebook'] {
-  --reg-font-primary: var(--font-body);
-  --reg-font-ui: var(--font-mono);
-  --reg-heading-tracking: -0.05em;
-  --reg-heading-lh: 0.92;
-  --reg-body-size: 1.18rem;
-  --reg-label-size: 0.7rem;
-  --reg-label-tracking: 0.14em;
-  --reg-surface-opacity: 0.72;
-  --reg-ornament-opacity: 0.18;
-  --reg-accent-weight: 1;
-  --reg-signal-weight: 0.6;
-  --reg-spacing-scale: 1.15;
-}
-
-/* ── register: mission-control ───────────────────────────────────────── */
-/* dense, precise, mono-forward. for dashboards, tools, data interfaces  */
-[data-register='mission-control'] {
-  --reg-font-primary: var(--font-mono);
-  --reg-font-ui: var(--font-mono);
-  --reg-heading-tracking: -0.02em;
-  --reg-heading-lh: 1;
-  --reg-body-size: 0.9rem;
-  --reg-label-size: 0.65rem;
-  --reg-label-tracking: 0.18em;
-  --reg-surface-opacity: 0.92;
-  --reg-ornament-opacity: 0.08;
-  --reg-accent-weight: 0.7;
-  --reg-signal-weight: 1;
-  --reg-spacing-scale: 0.9;
-}
-
-/* ── register: archive ───────────────────────────────────────────────── */
-/* cool, ordered, muted. for galleries, indexes, reference collections   */
-[data-register='archive'] {
-  --reg-font-primary: var(--font-body);
-  --reg-font-ui: var(--font-mono);
-  --reg-heading-tracking: -0.03em;
-  --reg-heading-lh: 0.96;
-  --reg-body-size: 1rem;
-  --reg-label-size: 0.66rem;
-  --reg-label-tracking: 0.16em;
-  --reg-surface-opacity: 0.55;
-  --reg-ornament-opacity: 0.04;
-  --reg-accent-weight: 0.4;
-  --reg-signal-weight: 0.4;
-  --reg-spacing-scale: 1.3;
-}
+/* ── register system ──────────────────────────────────────────────────── */
+/* registers shift the weight distribution of the design. no new colors   */
+/* or fonts — the same gold, teal, ET Book, and IBM Plex Mono, but their  */
+/* relative presence changes.                                              */
+/*                                                                         */
+/* apply: <body data-register="field-notebook">                            */
+/* or:    applyRegister('field-notebook')                                  */
+
+/* ── base fallbacks (no register declared) ───────────────────────────── */
+:root {
+	--reg-font-primary: var(--font-body);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.04em;
+	--reg-heading-lh: 0.94;
+	--reg-body-size: 1rem;
+	--reg-label-size: 0.68rem;
+	--reg-label-tracking: 0.14em;
+	--reg-surface-opacity: 0.8;
+	--reg-ornament-opacity: 0.14;
+	--reg-accent-weight: 1;
+	--reg-signal-weight: 1;
+	--reg-spacing-scale: 1;
+}
+
+/* ── register: field-notebook ────────────────────────────────────────── */
+/* editorial, warm, serif-forward. for portfolios, narrative pages, about */
+[data-register='field-notebook'] {
+	--reg-font-primary: var(--font-body);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.05em;
+	--reg-heading-lh: 0.92;
+	--reg-body-size: 1.18rem;
+	--reg-label-size: 0.7rem;
+	--reg-label-tracking: 0.14em;
+	--reg-surface-opacity: 0.72;
+	--reg-ornament-opacity: 0.18;
+	--reg-accent-weight: 1;
+	--reg-signal-weight: 0.6;
+	--reg-spacing-scale: 1.15;
+}
+
+/* ── register: mission-control ───────────────────────────────────────── */
+/* dense, precise, mono-forward. for dashboards, tools, data interfaces  */
+[data-register='mission-control'] {
+	--reg-font-primary: var(--font-mono);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.02em;
+	--reg-heading-lh: 1;
+	--reg-body-size: 0.9rem;
+	--reg-label-size: 0.65rem;
+	--reg-label-tracking: 0.18em;
+	--reg-surface-opacity: 0.92;
+	--reg-ornament-opacity: 0.08;
+	--reg-accent-weight: 0.7;
+	--reg-signal-weight: 1;
+	--reg-spacing-scale: 0.9;
+}
+
+/* ── register: archive ───────────────────────────────────────────────── */
+/* cool, ordered, muted. for galleries, indexes, reference collections   */
+[data-register='archive'] {
+	--reg-font-primary: var(--font-body);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.03em;
+	--reg-heading-lh: 0.96;
+	--reg-body-size: 1rem;
+	--reg-label-size: 0.66rem;
+	--reg-label-tracking: 0.16em;
+	--reg-surface-opacity: 0.55;
+	--reg-ornament-opacity: 0.04;
+	--reg-accent-weight: 0.4;
+	--reg-signal-weight: 0.4;
+	--reg-spacing-scale: 1.3;
+}

package/dist/system/scroll-lock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Locks document scrolling (ref-counted).
+ *
+ * Returns an unlock function. Safe to call in SSR (no-op).
+ */
+export declare function lockScroll(): () => void;

package/dist/system/scroll-lock.js

@@ -0,0 +1,23 @@
+let lockCount = 0;
+let prevOverflow = null;
+/**
+ * Locks document scrolling (ref-counted).
+ *
+ * Returns an unlock function. Safe to call in SSR (no-op).
+ */
+export function lockScroll() {
+    if (typeof document === 'undefined')
+        return () => { };
+    lockCount += 1;
+    if (lockCount === 1) {
+        prevOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'hidden';
+    }
+    return () => {
+        lockCount = Math.max(0, lockCount - 1);
+        if (lockCount !== 0)
+            return;
+        document.documentElement.style.overflow = prevOverflow ?? '';
+        prevOverflow = null;
+    };
+}