@hyvnt/hyvui 0.1.0

package/dist/system/depth/depth.d.ts

@@ -0,0 +1,15 @@
+export type DepthLevel = 'ground' | 'raised' | 'foreground';
+export type PerspectivePreset = 'near' | 'mid' | 'far';
+/**
+ * Returns the CSS translateZ value for a given depth level.
+ */
+export declare function depthZ(level: DepthLevel): string;
+/**
+ * Calculates a 3D tilt transform from a pointer position within an element.
+ * Returns a CSS transform string.
+ *
+ * @param x - pointer x (0-1, normalized within element)
+ * @param y - pointer y (0-1, normalized within element)
+ * @param maxDeg - maximum tilt angle in degrees (default: 8)
+ */
+export declare function tiltTransform(x: number, y: number, maxDeg?: number): string;

package/dist/system/depth/depth.js

@@ -0,0 +1,24 @@
+/**
+ * Returns the CSS translateZ value for a given depth level.
+ */
+export function depthZ(level) {
+    const map = {
+        ground: 'var(--depth-ground)',
+        raised: 'var(--depth-raised)',
+        foreground: 'var(--depth-foreground)',
+    };
+    return map[level];
+}
+/**
+ * Calculates a 3D tilt transform from a pointer position within an element.
+ * Returns a CSS transform string.
+ *
+ * @param x - pointer x (0-1, normalized within element)
+ * @param y - pointer y (0-1, normalized within element)
+ * @param maxDeg - maximum tilt angle in degrees (default: 8)
+ */
+export function tiltTransform(x, y, maxDeg = 8) {
+    const rx = (y - 0.5) * -maxDeg * 2;
+    const ry = (x - 0.5) * maxDeg * 2;
+    return `rotateX(${rx}deg) rotateY(${ry}deg)`;
+}

package/dist/system/expressions.css

@@ -0,0 +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;
+}

package/dist/system/override-template.css

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

package/dist/system/register.css

@@ -0,0 +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;
+}

package/dist/system/register.d.ts

@@ -0,0 +1,11 @@
+export type Register = 'field-notebook' | 'mission-control' | 'archive';
+/**
+ * Applies a register to an element by setting data-register.
+ * Call with a DOM element reference or 'body' to set globally.
+ */
+export declare function applyRegister(register: Register, target?: HTMLElement | 'body'): void;
+/**
+ * Removes the register from an element, restoring default behavior.
+ */
+export declare function clearRegister(target?: HTMLElement | 'body'): void;
+export declare const registers: Register[];

package/dist/system/register.js

@@ -0,0 +1,16 @@
+/**
+ * Applies a register to an element by setting data-register.
+ * Call with a DOM element reference or 'body' to set globally.
+ */
+export function applyRegister(register, target = 'body') {
+    const el = target === 'body' ? document.body : target;
+    el.dataset.register = register;
+}
+/**
+ * Removes the register from an element, restoring default behavior.
+ */
+export function clearRegister(target = 'body') {
+    const el = target === 'body' ? document.body : target;
+    delete el.dataset.register;
+}
+export const registers = ['field-notebook', 'mission-control', 'archive'];

package/dist/tokens/tokens.css

@@ -0,0 +1,86 @@
+:root {
+  /* ── backgrounds ─────────────────────────────── */
+  --bg: #08090b;
+  --bg-elev: #12151a;
+  --bg-elev-soft: #0d1014;
+
+  /* ── text ────────────────────────────────────── */
+  --text: #f0e8da;
+  --text-soft: #d8cdb9;
+  --muted: #a79d8b;
+  --muted-strong: #7e7568;
+
+  /* ── accent ──────────────────────────────────── */
+  --accent: #c79c57;
+  --accent-strong: #e2ba74;
+  --signal: #79a6a3;
+
+  /* ── lines ───────────────────────────────────── */
+  --line: rgba(186, 157, 108, 0.16);
+  --line-strong: rgba(198, 166, 112, 0.28);
+
+  /* ── status ──────────────────────────────────── */
+  --status-ok: #79a6a3;
+  --status-pend: #8b8476;
+  --status-warn: #c79c57;
+  --status-fail: #b66a48;
+
+  /* ── shadow ──────────────────────────────────── */
+  --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
+  --shadow-card: 0 28px 72px rgba(0, 0, 0, 0.34);
+  --focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
+
+  /* ── motion ──────────────────────────────────── */
+  --transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ── fonts ───────────────────────────────────── */
+  --font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
+  --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
+
+  /* ── spacing (fluid) ─────────────────────────── */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: clamp(3rem, 6vw, 5rem);
+  --space-scene: clamp(2.25rem, 7vw, 6rem);
+  --space-card: clamp(1.1rem, 2vw, 1.6rem);
+  --space-inline: 1rem;
+  --shell-max: 72rem;
+  --shell-pad: clamp(1.1rem, 3vw, 2rem);
+  --section-gap: clamp(1.5rem, 3vw, 2.5rem);
+
+  /* ── radius ──────────────────────────────────── */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* ── controls ────────────────────────────────── */
+  --control-height-sm: 2.25rem;
+  --control-height-md: 2.75rem;
+  --control-pad-x: 0.9rem;
+  --control-pad-y: 0.7rem;
+  --control-gap: 0.5rem;
+
+  /* ── surface gradients ───────────────────────── */
+  --surface-card: linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%),
+    rgba(10, 12, 14, 0.8);
+  --surface-panel: linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
+    linear-gradient(135deg, rgba(199, 156, 87, 0.08), rgba(10, 12, 14, 0.82) 42%),
+    rgba(9, 11, 13, 0.74);
+  --surface-soft: linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
+    linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%),
+    rgba(11, 13, 16, 0.9);
+  --surface-stroke: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+
+  /* ── z-index ─────────────────────────────────── */
+  --z-base: 0;
+  --z-raised: 10;
+  --z-overlay: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+}

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,25 @@
+export declare const tokens: {
+    readonly color: {
+        readonly bg: "#08090b";
+        readonly bgElev: "#12151a";
+        readonly text: "#f0e8da";
+        readonly textSoft: "#d8cdb9";
+        readonly muted: "#a79d8b";
+        readonly mutedStrong: "#7e7568";
+        readonly accent: "#c79c57";
+        readonly accentStrong: "#e2ba74";
+        readonly signal: "#79a6a3";
+        readonly statusOk: "#79a6a3";
+        readonly statusPend: "#8b8476";
+        readonly statusWarn: "#c79c57";
+        readonly statusFail: "#b66a48";
+    };
+    readonly font: {
+        readonly body: "'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif";
+        readonly mono: "'IBM Plex Mono', 'Menlo', 'Consolas', monospace";
+    };
+    readonly transition: {
+        readonly smooth: "0.35s cubic-bezier(0.22, 1, 0.36, 1)";
+        readonly fast: "0.16s cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+};

package/dist/tokens/tokens.js

@@ -0,0 +1,25 @@
+export const tokens = {
+    color: {
+        bg: '#08090b',
+        bgElev: '#12151a',
+        text: '#f0e8da',
+        textSoft: '#d8cdb9',
+        muted: '#a79d8b',
+        mutedStrong: '#7e7568',
+        accent: '#c79c57',
+        accentStrong: '#e2ba74',
+        signal: '#79a6a3',
+        statusOk: '#79a6a3',
+        statusPend: '#8b8476',
+        statusWarn: '#c79c57',
+        statusFail: '#b66a48',
+    },
+    font: {
+        body: "'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif",
+        mono: "'IBM Plex Mono', 'Menlo', 'Consolas', monospace",
+    },
+    transition: {
+        smooth: '0.35s cubic-bezier(0.22, 1, 0.36, 1)',
+        fast: '0.16s cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+/** Merges class name strings, filtering out falsy values. */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,4 @@
+/** Merges class name strings, filtering out falsy values. */
+export function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}

package/dist/utils/motion.d.ts

@@ -0,0 +1,17 @@
+/** Standard stagger-in animation parameters. */
+export declare const staggerIn: {
+    readonly from: {
+        readonly opacity: 0;
+        readonly transform: "translateY(6px)";
+    };
+    readonly to: {
+        readonly opacity: 1;
+        readonly transform: "translateY(0)";
+    };
+    readonly duration: 500;
+    readonly easing: "cubic-bezier(0.22, 1, 0.36, 1)";
+};
+/** Standard hover-lift transform. */
+export declare const hoverLift = "translateY(-2px)";
+/** Standard selection shift transform. */
+export declare const selectionShift = "translateX(6px)";

package/dist/utils/motion.js

@@ -0,0 +1,11 @@
+/** Standard stagger-in animation parameters. */
+export const staggerIn = {
+    from: { opacity: 0, transform: 'translateY(6px)' },
+    to: { opacity: 1, transform: 'translateY(0)' },
+    duration: 500,
+    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+};
+/** Standard hover-lift transform. */
+export const hoverLift = 'translateY(-2px)';
+/** Standard selection shift transform. */
+export const selectionShift = 'translateX(6px)';

package/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "@hyvnt/hyvui",
+	"version": "0.1.0",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^7.0.4",
+		"vite-plugin-devtools-json": "^1.0.0"
+	},
+	"keywords": [
+		"svelte"
+	]
+}