@l.x/mycelium 1.0.2 → 1.0.4

package/.depcheckrc

@@ -0,0 +1,9 @@
+ignores: [
+    # Standard ignores
+    "typescript",
+    "@typescript/native-preview",
+    "depcheck",
+
+    # Internal packages / workspaces
+    "@universe/mycelium",
+  ]

package/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['@luxamm/eslint-config/lib'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+  },
+  // Note: no-relative-import-paths is disabled for mycelium because
+  // this package uses `exports` in package.json (required for ./tailwind CSS export).
+  // Packages with `exports` cannot use absolute internal imports like
+  // '@luxexchange/mycelium/src/types' since they're blocked by the exports restriction.
+}

package/LICENSE

@@ -0,0 +1,122 @@
+Lux Ecosystem License
+Version 1.2, December 2025
+
+Copyright (c) 2020-2025 Lux Industries Inc.
+All rights reserved.
+
+TECHNOLOGY PORTFOLIO - PATENT APPLICATIONS PLANNED
+Contact: licensing@lux.network
+
+================================================================================
+                          TERMS AND CONDITIONS
+================================================================================
+
+1. DEFINITIONS
+
+   "Lux Primary Network" means the official Lux blockchain with Network ID=1
+   and EVM Chain ID=96369.
+   
+   "Authorized Network" means the Lux Primary Network, official testnets/devnets,
+   and any L1/L2/L3 chain descending from the Lux Primary Network.
+   
+   "Descending Chain" means an L1/L2/L3 chain built on, anchored to, or deriving
+   security from the Lux Primary Network or its authorized testnets.
+   
+   "Research Use" means non-commercial academic research, education, personal
+   study, or evaluation purposes.
+   
+   "Commercial Use" means any use in connection with a product or service
+   offered for sale or fee, internal use by a for-profit entity, or any use
+   to generate revenue.
+
+2. GRANT OF LICENSE
+
+   Subject to these terms, Lux Industries Inc grants you a non-exclusive,
+   royalty-free license to:
+   
+   (a) Use for Research Use without restriction;
+   
+   (b) Operate on the Lux Primary Network (Network ID=1, EVM Chain ID=96369);
+   
+   (c) Operate on official Lux testnets and devnets;
+   
+   (d) Operate L1/L2/L3 chains descending from the Lux Primary Network;
+   
+   (e) Build applications within the Lux ecosystem;
+   
+   (f) Contribute improvements back to the original repositories.
+
+3. RESTRICTIONS
+
+   Without a commercial license from Lux Industries Inc, you may NOT:
+   
+   (a) Fork the Lux Network or any Lux software;
+   
+   (b) Create competing networks not descending from Lux Primary Network;
+   
+   (c) Use for Commercial Use outside the Lux ecosystem;
+   
+   (d) Sublicense or transfer rights outside the Lux ecosystem;
+   
+   (e) Use to create competing blockchain networks, exchanges, custody
+       services, or cryptographic systems outside the Lux ecosystem.
+
+4. NO FORKS POLICY
+
+   Lux Industries Inc maintains ZERO TOLERANCE for unauthorized forks.
+   Any fork or deployment on an unauthorized network constitutes:
+   
+   (a) Breach of this license;
+   (b) Grounds for immediate legal action.
+
+5. RIGHTS RESERVATION
+
+   All rights not explicitly granted are reserved by Lux Industries Inc.
+   
+   We plan to apply for patent protection for the technology in this
+   repository. Any implementation outside the Lux ecosystem may require
+   a separate commercial license.
+
+6. DISCLAIMER OF WARRANTY
+
+   THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+   MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+
+7. LIMITATION OF LIABILITY
+
+   IN NO EVENT SHALL LUX INDUSTRIES INC BE LIABLE FOR ANY CLAIM, DAMAGES
+   OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+   ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE.
+
+8. TERMINATION
+
+   This license terminates immediately upon any breach, including but not
+   limited to deployment on unauthorized networks or creation of forks.
+
+9. GOVERNING LAW
+
+   This License shall be governed by the laws of the State of Delaware.
+
+10. COMMERCIAL LICENSING
+
+    For commercial use outside the Lux ecosystem:
+    
+    Lux Industries Inc.
+    Email: licensing@lux.network
+    Subject: Commercial License Request
+
+================================================================================
+                              TL;DR
+================================================================================
+
+- Research/academic use = OK
+- Lux Primary Network (Network ID=1, Chain ID=96369) = OK
+- L1/L2/L3 chains descending from Lux Primary Network = OK
+- Commercial products outside Lux ecosystem = Contact licensing@lux.network
+- Forks = Absolutely not
+
+================================================================================
+
+See LP-0012 for full licensing documentation:
+https://github.com/luxfi/lps/blob/main/LPs/lp-0012-ecosystem-licensing.md

package/README.md

@@ -0,0 +1,53 @@
+# @universe/mycelium
+
+Mycelium is Uniswap's shared Tailwind CSS design system for Tailwind v4.
+
+## Usage
+
+### CSS (in your app's main CSS file)
+
+```css
+@import "tailwindcss";
+@import "@universe/mycelium/tailwind";
+@import "@universe/mycelium/fonts"; /* Optional: for web apps */
+```
+
+`@universe/mycelium/tailwind` imports:
+- Theme tokens (colors, typography, breakpoints, border radius)
+- CSS variables (shadows, dark mode)
+- Base styles
+- Animations
+
+`@universe/mycelium/fonts` imports:
+- Basel Grotesk font faces (bundled, no CORS issues)
+
+### JavaScript (for the cn utility)
+
+```typescript
+import { cn } from '@universe/mycelium'
+
+// Merge class names with Tailwind conflict resolution
+cn('text-sm', 'text-body-1') // => 'text-body-1'
+cn('bg-red-500', isActive && 'bg-blue-500') // => conditional classes
+```
+
+## What's Included
+
+### Typography Scale
+- `text-heading-1`, `text-heading-2`, `text-heading-3`
+- `text-subheading-1`, `text-subheading-2`
+- `text-body-1`, `text-body-2`, `text-body-3`, `text-body-4`
+- `text-button-1`, `text-button-2`, `text-button-3`, `text-button-4`
+
+### Color Tokens
+- Semantic: `neutral1-3`, `surface1-5`, `accent1-4`
+- Status: `success`, `warning`, `critical`
+- Network: `network-ethereum`, `network-optimism`, etc.
+- Full palettes: gray, pink, red, yellow, green, blue, gold, magenta, purple
+
+### Animations
+- View transitions
+- Dialog animations
+- Button loading states
+- Console terminal effects
+- Logo carousel

package/css/animations.css

@@ -0,0 +1,280 @@
+/* Keyframe Animations */
+
+/* View Transitions */
+::view-transition-old(crossfade) {
+  animation: hide 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+::view-transition-new(crossfade) {
+  opacity: 0;
+  animation: appear 300ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards;
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(8px);
+    filter: blur(4px);
+  }
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+/* Dialog Animation - Subtle crossfade style */
+@keyframes dialog-appear {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 4px));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@keyframes dialog-hide {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 4px));
+  }
+}
+
+.dialog-content[data-state="open"] {
+  animation: dialog-appear 200ms cubic-bezier(0.6, 0, 0.8, 1) forwards;
+}
+
+.dialog-content[data-state="closed"] {
+  animation: dialog-hide 150ms cubic-bezier(0.6, 0, 0.8, 1) forwards;
+}
+
+/* Blur Fade Animations */
+@keyframes blur-fade-in {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes blur-fade-out {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+/* No entrance animation - just show immediately */
+.animate-entrance {
+  opacity: 1;
+}
+
+/* Blur fade in with translate - for elements that appear on mount */
+.animate-blur-fade-in {
+  animation: blur-fade-in-translate 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes blur-fade-in-translate {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+/* Blur fade out with translate and height collapse - for elements that exit */
+.animate-blur-fade-out {
+  animation: blur-fade-out-translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  overflow: hidden;
+}
+
+@keyframes blur-fade-out-translate {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+    max-height: 500px;
+    margin-bottom: 0;
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(4px);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(4px);
+    filter: blur(4px);
+    max-height: 0;
+    margin-bottom: -40px;
+  }
+}
+
+/* State-driven blur fade for elements inside stateful containers */
+[data-state="open"] .blur-fade-item {
+  animation: blur-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+[data-state="closed"] .blur-fade-item {
+  animation: blur-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  pointer-events: none;
+}
+
+/* Button Loading Crossfade - Pure CSS Transitions */
+.button-loading-text {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.button-loading-text[data-loading="true"] {
+  opacity: 0;
+  transform: translateY(4px);
+  filter: blur(4px);
+}
+
+.button-loading-spinner {
+  opacity: 0;
+  transform: translateY(-4px);
+  filter: blur(4px);
+  pointer-events: none;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms,
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms,
+    filter 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+}
+
+.button-loading-spinner[data-loading="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+  pointer-events: auto;
+}
+
+/* Button State Icons - Crossfade between spinner and success checkmark */
+.button-state-spinner,
+.button-state-success {
+  opacity: 0;
+  transform: translateY(-4px);
+  filter: blur(4px);
+  pointer-events: none;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.button-state-spinner[data-visible="true"],
+.button-state-success[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+  pointer-events: auto;
+}
+
+/* Console Terminal Animations */
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.console-cursor {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes console-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.console-fade-in {
+  animation: console-fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Logo Carousel Animation - scrolls through one third of content for 3x duplicated logos */
+@keyframes logo-scroll {
+  0% {
+    transform: translateX(0) translateZ(0);
+  }
+  100% {
+    transform: translateX(calc(-33.333%)) translateZ(0);
+  }
+}
+
+/* Overlay Animations - matches view transition timings */
+@keyframes overlay-hide {
+  0% {
+    opacity: 1;
+    backdrop-filter: blur(4px);
+  }
+  100% {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+}
+
+@keyframes overlay-appear {
+  0% {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+  100% {
+    opacity: 1;
+    backdrop-filter: blur(4px);
+  }
+}
+
+.overlay-backdrop[data-state="open"] {
+  animation: overlay-appear 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.overlay-backdrop[data-state="closed"] {
+  animation: overlay-hide 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}

package/css/base.css

@@ -0,0 +1,13 @@
+/* Base Layer Styles */
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  html,
+  body {
+    @apply bg-background text-foreground font-basel;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+}

package/css/fonts.css

@@ -0,0 +1,25 @@
+/* Basel Grotesk Font Faces */
+
+@font-face {
+  font-family: "Basel Grotesk";
+  src:
+    url("../fonts/Basel-Grotesk-Book.woff2") format("woff2"),
+    url("../fonts/Basel-Grotesk-Book.woff") format("woff");
+  font-weight: 485;
+  font-style: normal;
+  font-display: swap;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "Basel Grotesk";
+  src:
+    url("../fonts/Basel-Grotesk-Medium.woff2") format("woff2"),
+    url("../fonts/Basel-Grotesk-Medium.woff") format("woff");
+  font-weight: 535;
+  font-style: normal;
+  font-display: swap;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}