@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/examples/SignalLost.svelte

@@ -1,191 +1,191 @@
-<!--
-  EXAMPLE: Signal Lost
-  REGISTER: field-notebook
-  CONCEPT: a 404 page that feels like arriving at coordinates where something used to be
-  DEMONSTRATES: FloatCard, HorizonGrid, TerminalBoot, StatusDot, CornerBrackets, SignalRing, Text expressions, surface action, depth system
-  INSPIRED BY: the last transmission log of a deep-space relay station
--->
-<script lang="ts">
-  import {
-    Text,
-    Label,
-    Button,
-    StatusDot,
-    CornerBrackets,
-    TerminalBoot,
-    FloatCard,
-    HorizonGrid,
-    DepthStage,
-    DepthLayer,
-    SignalRing,
-    GlyphMark,
-    surface,
-    applyRegister,
-  } from '../index.js';
-  import { onMount } from 'svelte';
-
-  let bootComplete = $state(false);
-
-  const bootLines: { status: 'ok' | 'pend' | 'warn' | 'fail'; message: string }[] = [
-    { status: 'ok', message: 'local systems nominal' },
-    { status: 'ok', message: 'navigation subsystem online' },
-    { status: 'ok', message: 'scanning frequency range' },
-    { status: 'pend', message: 'attempting signal acquisition' },
-    { status: 'warn', message: 'no response on primary band' },
-    { status: 'warn', message: 'sweeping secondary frequencies' },
-    { status: 'fail', message: 'target signal not found at these coordinates' },
-  ];
-
-  onMount(() => {
-    applyRegister('field-notebook');
-    return () => {
-      document.body.removeAttribute('data-register');
-    };
-  });
-</script>
-
-<div class="signal-lost">
-  <div class="signal-lost-bg">
-    <HorizonGrid animated rows={20} cols={14} vanishY={0.32} />
-  </div>
-
-  <div class="signal-lost-ring" aria-hidden="true">
-    <SignalRing active size={400} />
-  </div>
-
-  <DepthStage perspective="mid" class="signal-lost-stage">
-    <DepthLayer level="ground" class="signal-lost-terminal">
-      <div class="signal-lost-terminal-inner" use:surface={{ delay: 800 }}>
-        <TerminalBoot
-          lines={bootLines}
-          delay={1200}
-          interval={900}
-          oncomplete={() => (bootComplete = true)}
-        />
-      </div>
-    </DepthLayer>
-
-    <DepthLayer level="raised" class="signal-lost-center">
-      <FloatCard tiltMax={6} class="signal-lost-card">
-        <div class="signal-lost-content" style:position="relative">
-          <CornerBrackets size={28} color="rgba(199, 156, 87, 0.2)" />
-
-          <div class="signal-lost-status" use:surface={{ delay: 200 }}>
-            <StatusDot status="fail" size={8} pulse />
-            <Label color="muted">transmission ended</Label>
-          </div>
-
-          <div use:surface={{ delay: 400 }}>
-            <Text variant="heading" expression="title-card" as="h1" color="primary">
-              the coordinates are empty now
-            </Text>
-          </div>
-
-          <div use:surface={{ delay: 600 }}>
-            <Text expression="manifesto">
-              something was broadcasting from here. the frequency is right,
-              the heading is right. but the source has gone quiet.
-            </Text>
-          </div>
-
-          <div class="signal-lost-meta" use:surface={{ delay: 700 }}>
-            <GlyphMark variant="coord" size={16} color="var(--muted-strong)" />
-            <Label color="muted">bearing 047.2 | range unknown | last contact 7h ago</Label>
-          </div>
-
-          <div class="signal-lost-action" use:surface={{ delay: 900 }}>
-            <Button variant="ghost" onclick={() => window.history.back()}>
-              return to last known position
-            </Button>
-          </div>
-        </div>
-      </FloatCard>
-    </DepthLayer>
-  </DepthStage>
-</div>
-
-<style>
-  .signal-lost {
-    position: relative;
-    min-height: 100dvh;
-    background-color: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-  }
-
-  .signal-lost-bg {
-    position: absolute;
-    inset: 0;
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .signal-lost-ring {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
-  :global(.signal-lost-stage) {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2rem;
-    padding: var(--space-scene);
-    width: 100%;
-    max-width: 52rem;
-  }
-
-  :global(.signal-lost-center) {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  :global(.signal-lost-card) {
-    max-width: 36rem;
-    width: 100%;
-  }
-
-  .signal-lost-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 1rem;
-  }
-
-  .signal-lost-status {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-  }
-
-  .signal-lost-meta {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .signal-lost-action {
-    margin-top: 0.5rem;
-  }
-
-  :global(.signal-lost-terminal) {
-    width: 100%;
-    max-width: 36rem;
-    align-self: center;
-  }
-
-  .signal-lost-terminal-inner {
-    padding: 1rem 0;
-    border-left: 2px solid rgba(121, 166, 163, 0.14);
-    padding-left: 1.25rem;
-  }
-</style>
+<!--
+  EXAMPLE: Signal Lost
+  REGISTER: field-notebook
+  CONCEPT: a 404 page that feels like arriving at coordinates where something used to be
+  DEMONSTRATES: FloatCard, HorizonGrid, TerminalBoot, StatusDot, CornerBrackets, SignalRing, Text expressions, surface action, depth system
+  INSPIRED BY: the last transmission log of a deep-space relay station
+-->
+<script lang="ts">
+	import {
+		Text,
+		Label,
+		Button,
+		StatusDot,
+		CornerBrackets,
+		TerminalBoot,
+		FloatCard,
+		HorizonGrid,
+		DepthStage,
+		DepthLayer,
+		SignalRing,
+		GlyphMark,
+		surface,
+		applyRegister
+	} from '../index.js';
+	import { onMount } from 'svelte';
+
+	let bootComplete = $state(false);
+
+	const bootLines: { status: 'ok' | 'pend' | 'warn' | 'fail'; message: string }[] = [
+		{ status: 'ok', message: 'local systems nominal' },
+		{ status: 'ok', message: 'navigation subsystem online' },
+		{ status: 'ok', message: 'scanning frequency range' },
+		{ status: 'pend', message: 'attempting signal acquisition' },
+		{ status: 'warn', message: 'no response on primary band' },
+		{ status: 'warn', message: 'sweeping secondary frequencies' },
+		{ status: 'fail', message: 'target signal not found at these coordinates' }
+	];
+
+	onMount(() => {
+		applyRegister('field-notebook');
+		return () => {
+			document.body.removeAttribute('data-register');
+		};
+	});
+</script>
+
+<div class="signal-lost">
+	<div class="signal-lost-bg">
+		<HorizonGrid animated rows={20} cols={14} vanishY={0.32} />
+	</div>
+
+	<div class="signal-lost-ring" aria-hidden="true">
+		<SignalRing active size={400} />
+	</div>
+
+	<DepthStage perspective="mid" class="signal-lost-stage">
+		<DepthLayer level="ground" class="signal-lost-terminal">
+			<div class="signal-lost-terminal-inner" use:surface={{ delay: 800 }}>
+				<TerminalBoot
+					lines={bootLines}
+					delay={1200}
+					interval={900}
+					oncomplete={() => (bootComplete = true)}
+				/>
+			</div>
+		</DepthLayer>
+
+		<DepthLayer level="raised" class="signal-lost-center">
+			<FloatCard tiltMax={6} class="signal-lost-card">
+				<div class="signal-lost-content" style:position="relative">
+					<CornerBrackets size={28} color="rgba(199, 156, 87, 0.2)" />
+
+					<div class="signal-lost-status" use:surface={{ delay: 200 }}>
+						<StatusDot status="fail" size={8} pulse />
+						<Label color="muted">transmission ended</Label>
+					</div>
+
+					<div use:surface={{ delay: 400 }}>
+						<Text variant="heading" expression="title-card" as="h1" color="primary">
+							the coordinates are empty now
+						</Text>
+					</div>
+
+					<div use:surface={{ delay: 600 }}>
+						<Text expression="manifesto">
+							something was broadcasting from here. the frequency is right, the heading is right.
+							but the source has gone quiet.
+						</Text>
+					</div>
+
+					<div class="signal-lost-meta" use:surface={{ delay: 700 }}>
+						<GlyphMark variant="coord" size={16} color="var(--muted-strong)" />
+						<Label color="muted">bearing 047.2 | range unknown | last contact 7h ago</Label>
+					</div>
+
+					<div class="signal-lost-action" use:surface={{ delay: 900 }}>
+						<Button variant="ghost" onclick={() => window.history.back()}>
+							return to last known position
+						</Button>
+					</div>
+				</div>
+			</FloatCard>
+		</DepthLayer>
+	</DepthStage>
+</div>
+
+<style>
+	.signal-lost {
+		position: relative;
+		min-height: 100dvh;
+		background-color: var(--bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+
+	.signal-lost-bg {
+		position: absolute;
+		inset: 0;
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.signal-lost-ring {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		opacity: 0.3;
+		pointer-events: none;
+	}
+
+	:global(.signal-lost-stage) {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+		padding: var(--space-scene);
+		width: 100%;
+		max-width: 52rem;
+	}
+
+	:global(.signal-lost-center) {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	:global(.signal-lost-card) {
+		max-width: 36rem;
+		width: 100%;
+	}
+
+	.signal-lost-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		padding: 1rem;
+	}
+
+	.signal-lost-status {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+	}
+
+	.signal-lost-meta {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.signal-lost-action {
+		margin-top: 0.5rem;
+	}
+
+	:global(.signal-lost-terminal) {
+		width: 100%;
+		max-width: 36rem;
+		align-self: center;
+	}
+
+	.signal-lost-terminal-inner {
+		padding: 1rem 0;
+		border-left: 2px solid rgba(121, 166, 163, 0.14);
+		padding-left: 1.25rem;
+	}
+</style>

package/dist/styles.css

@@ -0,0 +1,113 @@
+/* hyvui — base stylesheet entrypoint
+ *
+ * This file is meant to be imported by consuming applications:
+ *   import '@hyvnt/hyvui/styles.css';
+ *
+ * It intentionally contains NO Tailwind directives, so it can be used in
+ * non-Tailwind projects. Tailwind theme mapping stays in app-level CSS.
+ */
+
+@import './tokens/tokens.css';
+@import './system/register.css';
+@import './system/expressions.css';
+@import './system/depth/depth.css';
+
+/* ── base reset ─────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	/* Critical fallback paint (also duplicated inline in app.html for FOUC) */
+	background-color: #08090b;
+	color: var(--text);
+	font-family: var(--font-body);
+	font-size: 16px;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	scrollbar-gutter: stable;
+	color-scheme: dark;
+}
+
+body {
+	margin: 0;
+	min-height: 100dvh;
+	background: transparent;
+	color: var(--text);
+	overflow-x: hidden;
+
+	/* Ensure our fixed background layer can sit behind content without leaking
+     under <html> in weird stacking contexts. */
+	isolation: isolate;
+}
+
+/* Avoid scroll-jank from `background-attachment: fixed` by using a fixed layer. */
+body::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+	pointer-events: none;
+
+	/* atmospheric layered background — never a flat fill */
+	background:
+		radial-gradient(circle at top, rgba(198, 166, 112, 0.08), transparent 26%),
+		radial-gradient(circle at 20% 20%, rgba(121, 166, 163, 0.06), transparent 24%),
+		linear-gradient(180deg, #090b0d 0%, #08090b 35%, #050607 100%);
+}
+
+body > div {
+	min-height: 100dvh;
+}
+
+a {
+	color: inherit;
+}
+
+button,
+input,
+select,
+textarea {
+	font: inherit;
+}
+
+img,
+svg,
+canvas {
+	display: block;
+	max-width: 100%;
+}
+
+:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+}
+
+::selection {
+	background-color: rgba(199, 156, 87, 0.28);
+	color: var(--text);
+}
+
+/* ── shared animations ──────────────────────────────────────────────── */
+@keyframes pulse-dot {
+	0%,
+	100% {
+		opacity: 0.4;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1.3);
+	}
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}

package/dist/system/actions/echo.js

@@ -15,14 +15,14 @@ export function echo(node) {
         const x = ((e.clientX - rect.left) / rect.width) * 100;
         const y = ((e.clientY - rect.top) / rect.height) * 100;
         const overlay = document.createElement('span');
-        overlay.style.cssText = `
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      background: radial-gradient(circle at ${x}% ${y}%, rgba(199, 156, 87, 0.22), transparent 70%);
-      opacity: 0;
-      transition: opacity 0.15s ease-out;
+        overlay.style.cssText = `
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      background: radial-gradient(circle at ${x}% ${y}%, rgba(199, 156, 87, 0.22), transparent 70%);
+      opacity: 0;
+      transition: opacity 0.15s ease-out;
     `;
         const position = getComputedStyle(node).position;
         if (position === 'static')
@@ -41,6 +41,6 @@ export function echo(node) {
     return {
         destroy() {
             node.removeEventListener('click', handleClick);
-        },
+        }
     };
 }

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
@@ -32,14 +32,14 @@ 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 ease-out;
     `;
         node.appendChild(overlay);
         requestAnimationFrame(() => {

package/dist/system/actions/reveal.js

@@ -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

@@ -10,16 +10,28 @@ export function surface(node, options = {}) {
     const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (prefersReduced)
         return {};
+    node.style.willChange = 'opacity, transform';
     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`;
+    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.style.willChange = '';
+    }
+    node.addEventListener('transitionend', onEnd);
     const frame = requestAnimationFrame(() => {
         node.style.opacity = '1';
         node.style.transform = 'translateY(0)';
     });
     return {
         destroy() {
+            node.removeEventListener('transitionend', onEnd);
             cancelAnimationFrame(frame);
-        },
+        }
     };
 }