@mappoh/nova 0.1.16

package/package.json

@@ -0,0 +1,269 @@
+{
+  "name": "@mappoh/nova",
+  "version": "0.1.16",
+  "description": "Nova — a lightweight web engine built on Web Components",
+  "type": "module",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "exports": {
+    "./component": {
+      "types": "./dist/component/index.d.ts",
+      "import": "./dist/component/index.js"
+    },
+    "./html": {
+      "types": "./dist/component/html.d.ts",
+      "import": "./dist/component/html.js"
+    },
+    "./router": {
+      "types": "./dist/router/index.d.ts",
+      "import": "./dist/router/index.js"
+    },
+    "./router/speculate": {
+      "types": "./dist/router/speculate.d.ts",
+      "import": "./dist/router/speculate.js"
+    },
+    "./state": {
+      "types": "./dist/state/index.d.ts",
+      "import": "./dist/state/index.js"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js"
+    },
+    "./validators": {
+      "types": "./dist/forms/validators.d.ts",
+      "import": "./dist/forms/validators.js"
+    },
+    "./forms/validators": {
+      "types": "./dist/forms/validators.d.ts",
+      "import": "./dist/forms/validators.js"
+    },
+    "./animation/ticker": {
+      "types": "./dist/animation/ticker.d.ts",
+      "import": "./dist/animation/ticker.js"
+    },
+    "./animation/smooth-scroll": {
+      "types": "./dist/animation/smooth-scroll.d.ts",
+      "import": "./dist/animation/smooth-scroll.js"
+    },
+    "./animation/scroll-observer": {
+      "types": "./dist/animation/scroll-observer.d.ts",
+      "import": "./dist/animation/scroll-observer.js"
+    },
+    "./animation/parallax": {
+      "types": "./dist/animation/parallax.d.ts",
+      "import": "./dist/animation/parallax.js"
+    },
+    "./animation/scroll-animate": {
+      "types": "./dist/animation/scroll-animate.d.ts",
+      "import": "./dist/animation/scroll-animate.js"
+    },
+    "./animation/text-reveal": {
+      "types": "./dist/animation/text-reveal.d.ts",
+      "import": "./dist/animation/text-reveal.js"
+    },
+    "./canvas/dot-grid": {
+      "types": "./dist/canvas/dot-grid.d.ts",
+      "import": "./dist/canvas/dot-grid.js"
+    },
+    "./search": {
+      "types": "./dist/search/index.d.ts",
+      "import": "./dist/search/index.js"
+    },
+    "./search/wasm": {
+      "types": "./dist/search/wasm.d.ts",
+      "import": "./dist/search/wasm.js"
+    },
+    "./interaction/tilt": {
+      "types": "./dist/interaction/index.d.ts",
+      "import": "./dist/interaction/index.js"
+    },
+    "./css": {
+      "types": "./dist/css/index.d.ts",
+      "import": "./dist/css/index.js"
+    },
+    "./css/gradient-text": {
+      "types": "./dist/css/gradient-text.d.ts",
+      "import": "./dist/css/gradient-text.js"
+    },
+    "./supabase/client": {
+      "types": "./dist/supabase/client.d.ts",
+      "import": "./dist/supabase/client.js"
+    },
+    "./supabase/auth": {
+      "types": "./dist/supabase/auth.d.ts",
+      "import": "./dist/supabase/auth.js"
+    },
+    "./supabase/realtime": {
+      "types": "./dist/supabase/realtime.d.ts",
+      "import": "./dist/supabase/realtime.js"
+    },
+    "./http": {
+      "types": "./dist/http/index.d.ts",
+      "import": "./dist/http/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./store": {
+      "types": "./dist/store/index.d.ts",
+      "import": "./dist/store/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "import": "./dist/tabs/index.js"
+    },
+    "./modal": {
+      "types": "./dist/modal/index.d.ts",
+      "import": "./dist/modal/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "import": "./dist/tooltip/index.js"
+    },
+    "./timeline": {
+      "types": "./dist/timeline/index.d.ts",
+      "import": "./dist/timeline/index.js"
+    },
+    "./transition": {
+      "types": "./dist/transition/index.d.ts",
+      "import": "./dist/transition/index.js"
+    },
+    "./lazy": {
+      "types": "./dist/lazy/index.d.ts",
+      "import": "./dist/lazy/index.js"
+    },
+    "./ssr": {
+      "types": "./dist/ssr/index.d.ts",
+      "import": "./dist/ssr/index.js"
+    },
+    "./sw": {
+      "types": "./dist/sw/index.d.ts",
+      "import": "./dist/sw/index.js"
+    },
+    "./gesture": {
+      "types": "./dist/gesture/index.d.ts",
+      "import": "./dist/gesture/index.js"
+    },
+    "./drag": {
+      "types": "./dist/drag/index.d.ts",
+      "import": "./dist/drag/index.js"
+    },
+    "./canvas/particles": {
+      "types": "./dist/canvas/particles.d.ts",
+      "import": "./dist/canvas/particles.js"
+    },
+    "./canvas/sequence": {
+      "types": "./dist/canvas/sequence.d.ts",
+      "import": "./dist/canvas/sequence.js"
+    },
+    "./canvas/noise": {
+      "types": "./dist/canvas/noise.d.ts",
+      "import": "./dist/canvas/noise.js"
+    },
+    "./devtools": {
+      "types": "./dist/devtools/index.d.ts",
+      "import": "./dist/devtools/index.js"
+    },
+    "./test": {
+      "types": "./dist/test/index.d.ts",
+      "import": "./dist/test/index.js"
+    },
+    "./image": {
+      "types": "./dist/image/index.d.ts",
+      "import": "./dist/image/index.js"
+    },
+    "./gallery": {
+      "types": "./dist/gallery/index.d.ts",
+      "import": "./dist/gallery/index.js"
+    },
+    "./webgl": {
+      "types": "./dist/webgl/index.d.ts",
+      "import": "./dist/webgl/index.js"
+    },
+    "./security": {
+      "types": "./dist/security/index.d.ts",
+      "import": "./dist/security/index.js"
+    },
+    "./security/csrf": {
+      "types": "./dist/security/csrf.d.ts",
+      "import": "./dist/security/csrf.js"
+    },
+    "./security/csp": {
+      "types": "./dist/security/csp.d.ts",
+      "import": "./dist/security/csp.js"
+    },
+    "./security/rate-limit": {
+      "types": "./dist/security/rate-limit.d.ts",
+      "import": "./dist/security/rate-limit.js"
+    },
+    "./security/encrypt": {
+      "types": "./dist/security/encrypt.d.ts",
+      "import": "./dist/security/encrypt.js"
+    },
+    "./security/sanitize": {
+      "types": "./dist/security/sanitize.d.ts",
+      "import": "./dist/security/sanitize.js"
+    },
+    "./security/session": {
+      "types": "./dist/security/session.d.ts",
+      "import": "./dist/security/session.js"
+    },
+    "./security/rbac": {
+      "types": "./dist/security/rbac.d.ts",
+      "import": "./dist/security/rbac.js"
+    },
+    "./security/secure-store": {
+      "types": "./dist/security/secure-store.d.ts",
+      "import": "./dist/security/secure-store.js"
+    },
+    "./security/sri": {
+      "types": "./dist/security/sri.d.ts",
+      "import": "./dist/security/sri.js"
+    },
+    "./security/cors": {
+      "types": "./dist/security/cors.d.ts",
+      "import": "./dist/security/cors.js"
+    },
+    "./shortcuts": {
+      "types": "./dist/shortcuts/index.d.ts",
+      "import": "./dist/shortcuts/index.js"
+    },
+    "./dropdown": {
+      "types": "./dist/dropdown/index.d.ts",
+      "import": "./dist/dropdown/index.js"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@supabase/supabase-js": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@supabase/supabase-js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@supabase/supabase-js": "^2.98.0",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/base/global.css

@@ -0,0 +1,47 @@
+/* Nova — Global Styles */
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+  transition:
+    color var(--duration-normal) var(--ease-default),
+    background-color var(--duration-normal) var(--ease-default);
+}
+
+::selection {
+  background-color: var(--color-accent);
+  color: var(--color-text-inverse);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* App mount point */
+#app {
+  min-height: 100vh;
+  min-height: 100svh;
+}

package/styles/base/reset.css

@@ -0,0 +1,73 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Target standard HTML elements only — a blanket * reset overrides
+   :host styles on custom elements because light-DOM rules beat
+   shadow-DOM :host in the cascade. */
+body, h1, h2, h3, h4, h5, h6, p,
+ul, ol, dl, dd,
+figure, figcaption, blockquote, fieldset, legend, pre,
+hr, table, th, td {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100vh;
+  min-height: 100svh;
+  line-height: 1.5;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+p {
+  overflow-wrap: break-word;
+}

package/styles/tokens/colors.css

@@ -0,0 +1,50 @@
+/* Nova Design Tokens — Colors */
+/* Dark mode is default (proto.xyz style) */
+
+:root,
+[data-theme="dark"] {
+  --color-bg-primary: #000000;
+  --color-bg-surface: #0a0a0a;
+  --color-bg-elevated: #141414;
+  --color-bg-overlay: rgba(0, 0, 0, 0.8);
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #888888;
+  --color-text-tertiary: #555555;
+  --color-text-inverse: #000000;
+
+  --color-border: rgba(255, 255, 255, 0.1);
+  --color-border-hover: rgba(255, 255, 255, 0.2);
+
+  --color-accent: #FF6C2F;
+  --color-accent-hover: #FF8A57;
+  --color-accent-subtle: rgba(255, 108, 47, 0.1);
+
+  --color-indigo: #783EED;
+  --color-green: #38A600;
+  --color-red: #E53935;
+  --color-yellow: #FFB300;
+
+  --color-success: var(--color-green);
+  --color-error: var(--color-red);
+  --color-warning: var(--color-yellow);
+}
+
+[data-theme="light"] {
+  --color-bg-primary: #ffffff;
+  --color-bg-surface: #f7f7f7;
+  --color-bg-elevated: #ffffff;
+  --color-bg-overlay: rgba(255, 255, 255, 0.8);
+
+  --color-text-primary: #0a0a0a;
+  --color-text-secondary: #666666;
+  --color-text-tertiary: #999999;
+  --color-text-inverse: #ffffff;
+
+  --color-border: rgba(0, 0, 0, 0.1);
+  --color-border-hover: rgba(0, 0, 0, 0.2);
+
+  --color-accent: #FF6C2F;
+  --color-accent-hover: #E55A1F;
+  --color-accent-subtle: rgba(255, 108, 47, 0.08);
+}

package/styles/tokens/spacing.css

@@ -0,0 +1,46 @@
+/* Nova Design Tokens — Fluid Spacing */
+
+:root {
+  /* Spacing scale — fluid, proportional to viewport */
+  --space-1: clamp(0.25rem, calc(4 * var(--fluid)), 0.375rem);
+  --space-2: clamp(0.5rem, calc(8 * var(--fluid)), 0.625rem);
+  --space-3: clamp(0.75rem, calc(12 * var(--fluid)), 1rem);
+  --space-4: clamp(1rem, calc(16 * var(--fluid)), 1.25rem);
+  --space-5: clamp(1.25rem, calc(20 * var(--fluid)), 1.5rem);
+  --space-6: clamp(1.5rem, calc(24 * var(--fluid)), 1.75rem);
+  --space-8: clamp(2rem, calc(32 * var(--fluid)), 2.5rem);
+  --space-10: clamp(2.5rem, calc(40 * var(--fluid)), 3rem);
+  --space-12: clamp(3rem, calc(48 * var(--fluid)), 3.75rem);
+  --space-16: clamp(4rem, calc(64 * var(--fluid)), 5rem);
+  --space-20: clamp(5rem, calc(80 * var(--fluid)), 6.25rem);
+  --space-24: clamp(6rem, calc(96 * var(--fluid)), 7.5rem);
+  --space-32: clamp(8rem, calc(128 * var(--fluid)), 10rem);
+
+  /* Layout widths */
+  --container-max: 1800px;
+  --content-max: 1200px;
+  --narrow-max: 680px;
+
+  /* Consistent border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* Transition timing (proto.xyz uses 333ms) */
+  --duration-fast: 150ms;
+  --duration-normal: 333ms;
+  --duration-slow: 500ms;
+  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-out: cubic-bezier(0, 0, 0.25, 1);
+  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
+
+  /* Z-index scale */
+  --z-base: 0;
+  --z-above: 10;
+  --z-nav: 100;
+  --z-modal: 200;
+  --z-overlay: 300;
+  --z-toast: 400;
+}

package/styles/tokens/typography.css

@@ -0,0 +1,37 @@
+/* Nova Design Tokens — Fluid Typography */
+/* Scales proportionally like proto.xyz using calc() + clamp() */
+
+:root {
+  /* Base context: design was created at 1440px */
+  --context: 1440;
+  --container-width: min(100vw, 1800px);
+  --fluid: calc(1 / var(--context) * var(--container-width));
+
+  /* Type scale — fluid between mobile and desktop */
+  --text-xs: clamp(0.6875rem, calc(12 * var(--fluid)), 0.875rem);
+  --text-sm: clamp(0.8125rem, calc(14 * var(--fluid)), 1rem);
+  --text-base: clamp(0.875rem, calc(16 * var(--fluid)), 1.125rem);
+  --text-lg: clamp(1rem, calc(20 * var(--fluid)), 1.375rem);
+  --text-xl: clamp(1.25rem, calc(28 * var(--fluid)), 2rem);
+  --text-2xl: clamp(1.5rem, calc(40 * var(--fluid)), 2.75rem);
+  --text-3xl: clamp(2rem, calc(56 * var(--fluid)), 3.75rem);
+  --text-4xl: clamp(2.5rem, calc(72 * var(--fluid)), 5rem);
+  --text-5xl: clamp(3rem, calc(96 * var(--fluid)), 6.5rem);
+
+  /* Line heights */
+  --leading-tight: 1.1;
+  --leading-snug: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  /* Letter spacing */
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-wider: 0.08em;
+
+  /* Font families */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Roboto Mono', ui-monospace, monospace;
+  --font-display: var(--font-sans);
+}

package/styles/utilities/layout.css

@@ -0,0 +1,46 @@
+/* Nova — Layout Utilities */
+
+.container {
+  width: 100%;
+  max-width: var(--container-max);
+  margin-inline: auto;
+  padding-inline: var(--space-6);
+}
+
+.container--narrow {
+  max-width: var(--narrow-max);
+}
+
+.container--content {
+  max-width: var(--content-max);
+}
+
+/* Responsive grid */
+.grid {
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media (min-width: 680px) {
+  .grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+
+@media (min-width: 1000px) {
+  .grid {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+/* Section spacing */
+.section {
+  padding-block: var(--space-20);
+}
+
+/* Full viewport height */
+.vh-full {
+  min-height: 100vh;
+  min-height: 100svh;
+}