@oalacea/chaosui 0.5.0 → 0.5.1

package/components/buttons/dual-choice/dual-choice.module.css

@@ -1,90 +0,0 @@
-/* dual-choice - Deux boutons OUI/NON côte à côte */
-.container {
-  display: flex;
-  gap: 0;
-  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
-}
-
-.button {
-  flex: 1;
-  padding: 1.5rem 3rem;
-  font-size: 1.5rem;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  border: 2px solid var(--chaos-iron, #333);
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-  overflow: hidden;
-}
-
-.button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  transition: left 0.3s;
-  z-index: -1;
-}
-
-.button:hover::before { left: 0; }
-
-.yes { color: var(--chaos-bone, #e8e8e8); border-color: var(--chaos-bone-dark, #666); }
-.yes::before { background: var(--chaos-bone, #e8e8e8); }
-.yes:hover { color: var(--chaos-void, #0a0a0a); border-color: var(--chaos-bone, #e8e8e8); }
-
-.no { color: var(--chaos-blood, #ff0040); border-color: var(--chaos-blood, #ff0040); border-left: none; }
-.no::before { background: var(--chaos-blood, #ff0040); }
-.no:hover { color: var(--chaos-void, #0a0a0a); }
-
-.divider {
-  width: 2px;
-  background: var(--chaos-iron, #333);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.divider::before {
-  content: 'OU';
-  position: absolute;
-  font-size: 0.6rem;
-  color: var(--chaos-bone-dark, #666);
-  background: var(--chaos-void, #0a0a0a);
-  padding: 0.3rem;
-  letter-spacing: 0.1em;
-}
-
-.variantDramatic .yes { color: var(--chaos-gold, #c9a227); border-color: var(--chaos-gold, #c9a227); }
-.variantDramatic .yes::before { background: var(--chaos-gold, #c9a227); }
-
-.variantMinimal .button { border: none; padding: 1rem 2rem; font-size: 1rem; }
-.variantMinimal .button::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: currentColor;
-  transform: scaleX(0);
-  transition: transform 0.3s;
-}
-.variantMinimal .button:hover::after { transform: scaleX(1); }
-.variantMinimal .button::before { display: none; }
-.variantMinimal .button:hover { color: inherit; }
-.variantMinimal .divider { display: none; }
-
-.variantStacked { flex-direction: column; }
-.variantStacked .no { border-left: 2px solid var(--chaos-blood, #ff0040); border-top: none; }
-.variantStacked .divider { width: 100%; height: 2px; }
-
-.sizeSm .button { padding: 0.8rem 1.5rem; font-size: 1rem; }
-.sizeLg .button { padding: 2rem 4rem; font-size: 2rem; }
-
-.disabled { opacity: 0.5; pointer-events: none; }
-.selected { background: currentColor; color: var(--chaos-void, #0a0a0a) !important; }

package/components/buttons/tension-bar/tension-bar.module.css

@@ -1,105 +0,0 @@
-/* tension-bar - Barre de tension/progression dramatique */
-.container {
-  width: 100%;
-  position: relative;
-  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
-}
-
-.labels {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-  font-size: 0.65rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.labelLeft { color: var(--chaos-bone-dark, #666); }
-.labelRight { color: var(--chaos-blood, #ff0040); }
-
-.track {
-  height: 8px;
-  background: var(--chaos-iron, #222);
-  position: relative;
-  overflow: hidden;
-}
-
-.fill {
-  height: 100%;
-  background: var(--chaos-blood, #ff0040);
-  transition: width 0.5s ease-out;
-  position: relative;
-}
-
-.fill::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% { opacity: 0; }
-  50% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-.percentage {
-  position: absolute;
-  right: 0;
-  top: -1.5rem;
-  font-size: 0.7rem;
-  color: var(--chaos-blood, #ff0040);
-  font-weight: bold;
-}
-
-.markers { display: flex; justify-content: space-between; margin-top: 0.3rem; }
-.marker { width: 1px; height: 6px; background: var(--chaos-iron, #333); }
-.markerActive { background: var(--chaos-blood, #ff0040); }
-
-.variantGold .fill { background: linear-gradient(to right, var(--chaos-gold-dark, #8b7017), var(--chaos-gold, #c9a227)); }
-.variantGold .labelRight, .variantGold .percentage { color: var(--chaos-gold, #c9a227); }
-.variantGold .markerActive { background: var(--chaos-gold, #c9a227); }
-
-.variantDanger .fill { background: var(--chaos-blood, #ff0040); }
-.variantDanger.high .fill { animation: dangerPulse 0.5s ease-in-out infinite; }
-.variantDanger.high .track { animation: dangerGlow 0.5s ease-in-out infinite; }
-
-@keyframes dangerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
-@keyframes dangerGlow {
-  0%, 100% { box-shadow: 0 0 5px var(--chaos-blood, #ff0040); }
-  50% { box-shadow: 0 0 15px var(--chaos-blood, #ff0040); }
-}
-
-.variantSegmented .track { display: flex; gap: 2px; background: transparent; }
-.segment { flex: 1; height: 8px; background: var(--chaos-iron, #222); transition: background 0.3s; }
-.segmentFilled { background: var(--chaos-blood, #ff0040); }
-
-.sizeSm .track, .sizeSm .segment { height: 4px; }
-.sizeLg .track, .sizeLg .segment { height: 16px; }
-
-.withText .track { height: 30px; display: flex; align-items: center; padding: 0 1rem; }
-.innerText {
-  position: absolute;
-  left: 1rem;
-  font-size: 0.7rem;
-  color: var(--chaos-bone, #e8e8e8);
-  z-index: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.animated .fill {
-  background: repeating-linear-gradient(45deg, var(--chaos-blood, #ff0040), var(--chaos-blood, #ff0040) 10px, #cc0033 10px, #cc0033 20px);
-  background-size: 200% 100%;
-  animation: stripeMove 1s linear infinite;
-}
-
-@keyframes stripeMove {
-  0% { background-position: 0 0; }
-  100% { background-position: 28px 0; }
-}

package/components/decorative/coffee-stain/coffee-stain.module.css

@@ -1,24 +0,0 @@
-.container { position: relative; pointer-events: none; }
-.overlay { position: fixed; inset: 0; z-index: 1; }
-.inline { position: relative; width: 100%; height: 100%; }
-.stain { position: absolute; border-radius: 50%; pointer-events: none; }
-.stain1 { width: 150px; height: 140px; background: radial-gradient(ellipse at 40% 40%, rgba(61, 43, 31, 0.25) 0%, rgba(61, 43, 31, 0.12) 40%, transparent 70%); transform: rotate(15deg); }
-.stain2 { width: 100px; height: 90px; background: radial-gradient(ellipse at 60% 50%, rgba(45, 31, 21, 0.25) 0%, rgba(45, 31, 21, 0.12) 50%, transparent 75%); transform: rotate(-20deg); }
-.stain3 { width: 80px; height: 85px; background: radial-gradient(ellipse at 50% 50%, rgba(61, 43, 31, 0.18) 0%, transparent 60%); }
-.stain4 { width: 120px; height: 110px; background: radial-gradient(ellipse at 45% 55%, rgba(50, 35, 25, 0.2) 0%, rgba(50, 35, 25, 0.1) 45%, transparent 70%); transform: rotate(10deg); }
-.stain5 { width: 60px; height: 55px; background: radial-gradient(circle, rgba(61, 43, 31, 0.15) 0%, transparent 65%); }
-.ring { border-radius: 50%; background: transparent; box-shadow: inset 0 0 10px rgba(61, 43, 31, 0.2), 0 0 15px rgba(61, 43, 31, 0.15); border: 2px solid rgba(61, 43, 31, 0.15); }
-.ring1 { width: 80px; height: 80px; }
-.ring2 { width: 70px; height: 70px; }
-.agedPaper { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(139, 115, 85, 0.03) 25%, transparent 50%, rgba(139, 115, 85, 0.05) 75%, transparent 100%); pointer-events: none; }
-.paperTexture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
-.burnEdges { position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); pointer-events: none; }
-.edgeLeft { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, rgba(26, 21, 16, 0.8) 0%, transparent 100%); }
-.edgeRight { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(-90deg, rgba(26, 21, 16, 0.8) 0%, transparent 100%); }
-.light .stain { opacity: 0.5; }
-.medium .stain { opacity: 0.75; }
-.heavy .stain { opacity: 1; }
-.coffee { --stain-color: rgba(61, 43, 31, 1); }
-.tea { --stain-color: rgba(139, 115, 85, 1); }
-.wine { --stain-color: rgba(100, 30, 40, 1); }
-.ink { --stain-color: rgba(20, 20, 40, 1); }

package/components/decorative/coffee-stain/index.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes, useMemo } from 'react';
-import styles from './coffee-stain.module.css';
-
-export interface StainConfig {
-  type?: 'stain' | 'ring';
-  size?: 'sm' | 'md' | 'lg';
-  position: { top?: string; right?: string; bottom?: string; left?: string };
-  rotation?: number;
-}
-
-export interface CoffeeStainProps extends HTMLAttributes<HTMLDivElement> {
-  mode?: 'overlay' | 'inline';
-  intensity?: 'light' | 'medium' | 'heavy';
-  variant?: 'coffee' | 'tea' | 'wine' | 'ink';
-  count?: number;
-  stains?: StainConfig[];
-  agedPaper?: boolean;
-  paperTexture?: boolean;
-  burnEdges?: boolean;
-  edgeDarkening?: boolean;
-}
-
-const generateRandomStains = (count: number): StainConfig[] => {
-  return Array.from({ length: count }, () => ({
-    type: Math.random() > 0.7 ? 'ring' : 'stain',
-    size: ['sm', 'md', 'lg'][Math.floor(Math.random() * 3)] as 'sm' | 'md' | 'lg',
-    position: { top: `${Math.random() * 80 + 10}%`, left: `${Math.random() * 80 + 10}%` },
-    rotation: Math.random() * 360,
-  }));
-};
-
-export const CoffeeStain = forwardRef<HTMLDivElement, CoffeeStainProps>(
-  ({ mode = 'overlay', intensity = 'medium', variant = 'coffee', count = 3, stains: customStains, agedPaper = false, paperTexture = false, burnEdges = false, edgeDarkening = false, className, ...props }, ref) => {
-    const stains = useMemo(() => customStains || generateRandomStains(count), [customStains, count]);
-    const stainStyles = ['stain1', 'stain2', 'stain3', 'stain4', 'stain5'];
-
-    return (
-      <div ref={ref} className={`${styles.container} ${styles[mode]} ${styles[intensity]} ${styles[variant]} ${className || ''}`} {...props}>
-        {stains.map((stain, i) => {
-          const styleClass = stain.type === 'ring' ? `${styles.ring} ${stain.size === 'lg' ? styles.ring1 : styles.ring2}` : `${styles.stain} ${styles[stainStyles[i % stainStyles.length]]}`;
-          return <div key={i} className={styleClass} style={{ ...stain.position, transform: `rotate(${stain.rotation || 0}deg)` }} />;
-        })}
-        {agedPaper && <div className={styles.agedPaper} />}
-        {paperTexture && <div className={styles.paperTexture} />}
-        {burnEdges && <div className={styles.burnEdges} />}
-        {edgeDarkening && <><div className={styles.edgeLeft} /><div className={styles.edgeRight} /></>}
-      </div>
-    );
-  }
-);
-
-CoffeeStain.displayName = 'CoffeeStain';
-export default CoffeeStain;

package/components/decorative/ornaments/index.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './ornaments.module.css';
-
-export const ORNAMENT_SYMBOLS = {
-  cross: '✝', maltese: '✠', orthodox: '☦', fleurDeLis: '⚜', star: '✦',
-  diamond: '◆', heart: '❧', leaf: '❦', dagger: '†', doubleDagger: '‡',
-  asterisk: '✽', florette: '✿', skull: '☠', crown: '♔', swords: '⚔',
-};
-
-export interface OrnamentsProps extends HTMLAttributes<HTMLDivElement> {
-  type?: 'divider' | 'corner' | 'frame' | 'fleuron' | 'symbols';
-  symbol?: keyof typeof ORNAMENT_SYMBOLS | string;
-  symbols?: (keyof typeof ORNAMENT_SYMBOLS | string)[];
-  variant?: 'gold' | 'bone' | 'blood' | 'iron';
-  size?: 'sm' | 'md' | 'lg';
-  animated?: boolean;
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'all';
-}
-
-const getSymbol = (s: keyof typeof ORNAMENT_SYMBOLS | string): string => ORNAMENT_SYMBOLS[s as keyof typeof ORNAMENT_SYMBOLS] || s;
-
-export const Ornaments = forwardRef<HTMLDivElement, OrnamentsProps>(
-  ({ type = 'divider', symbol = 'cross', symbols, variant = 'gold', size = 'md', animated = false, position = 'all', className, ...props }, ref) => {
-    const baseClasses = `${styles.ornament} ${styles[variant]} ${styles[size]} ${animated ? styles.animated : ''}`;
-    const sym = getSymbol(symbol);
-
-    if (type === 'divider') {
-      return (<div ref={ref} className={`${baseClasses} ${styles.divider} ${className || ''}`} {...props}><span className={styles.line} /><span className={styles.symbol}>{sym}</span><span className={styles.line} /></div>);
-    }
-    if (type === 'fleuron') {
-      return (<div ref={ref} className={`${baseClasses} ${className || ''}`} {...props}><span className={styles.fleuron}>{sym}</span></div>);
-    }
-    if (type === 'symbols') {
-      const syms = symbols || ['star', 'diamond', 'star'];
-      return (<div ref={ref} className={`${baseClasses} ${styles.symbols} ${className || ''}`} {...props}>{syms.map((s, i) => (<span key={i} className={styles.symbol}>{getSymbol(s)}</span>))}</div>);
-    }
-    if (type === 'corner') {
-      const corners = position === 'all' ? ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight'] : [position.split('-').map((p, i) => i === 0 ? p.charAt(0).toUpperCase() + p.slice(1) : p.charAt(0).toUpperCase() + p.slice(1)).join('')];
-      return (<>{corners.map((pos) => (<div key={pos} ref={pos === corners[0] ? ref : undefined} className={`${styles.corner} ${styles[`corner${pos}`]} ${styles[variant]} ${className || ''}`} {...props}><span className={styles.cornerInner}><span className={styles.cornerSymbol}>{sym}</span></span></div>))}</>);
-    }
-    if (type === 'frame') {
-      return (<div ref={ref} className={`${styles.frame} ${styles[variant]} ${className || ''}`} {...props}><div className={styles.frameTop}><span className={styles.frameLine} /><span className={styles.frameSymbol}>{sym}</span><span className={styles.frameLine} /></div><div className={styles.frameBottom}><span className={styles.frameLine} /><span className={styles.frameSymbol}>{sym}</span><span className={styles.frameLine} /></div></div>);
-    }
-    return null;
-  }
-);
-
-Ornaments.displayName = 'Ornaments';
-export default Ornaments;

package/components/decorative/ornaments/ornaments.module.css

@@ -1,33 +0,0 @@
-.ornament { --ornament-color: #c9a227; display: flex; align-items: center; justify-content: center; color: var(--ornament-color); }
-.divider { gap: 1rem; width: 100%; }
-.line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ornament-color), transparent); }
-.symbol { font-size: 1.25rem; opacity: 0.8; }
-.corner { position: absolute; width: 40px; height: 40px; }
-.cornerTopLeft { top: 0; left: 0; }
-.cornerTopRight { top: 0; right: 0; transform: scaleX(-1); }
-.cornerBottomLeft { bottom: 0; left: 0; transform: scaleY(-1); }
-.cornerBottomRight { bottom: 0; right: 0; transform: scale(-1); }
-.cornerInner { position: absolute; top: 0; left: 0; }
-.cornerInner::before { content: ''; position: absolute; top: 8px; left: 0; width: 30px; height: 1px; background: var(--ornament-color); }
-.cornerInner::after { content: ''; position: absolute; top: 0; left: 8px; width: 1px; height: 30px; background: var(--ornament-color); }
-.cornerSymbol { position: absolute; top: 4px; left: 4px; font-size: 0.75rem; }
-.fleuron { font-family: 'Times New Roman', serif; font-size: 2rem; opacity: 0.7; }
-.frame { position: absolute; inset: 0; pointer-events: none; }
-.frameTop, .frameBottom { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; }
-.frameTop { top: -0.5em; }
-.frameBottom { bottom: -0.5em; }
-.frameLine { width: 60px; height: 1px; background: var(--ornament-color); }
-.frameSymbol { font-size: 0.875rem; }
-.gold { --ornament-color: #c9a227; }
-.bone { --ornament-color: #d4c5a9; }
-.blood { --ornament-color: #8b1a1a; }
-.iron { --ornament-color: #4a4a4a; }
-.symbols { display: flex; gap: 0.5rem; opacity: 0.6; }
-.animated .symbol, .animated .fleuron { animation: ornamentPulse 3s ease-in-out infinite; }
-@keyframes ornamentPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
-.sm .symbol { font-size: 0.875rem; }
-.sm .fleuron { font-size: 1.25rem; }
-.md .symbol { font-size: 1.25rem; }
-.md .fleuron { font-size: 2rem; }
-.lg .symbol { font-size: 1.75rem; }
-.lg .fleuron { font-size: 3rem; }

package/components/decorative/rune-symbols/index.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './rune-symbols.module.css';
-
-export const RUNES = {
-  fehu: 'ᚠ', uruz: 'ᚢ', thurisaz: 'ᚦ', ansuz: 'ᚨ', raidho: 'ᚱ', kenaz: 'ᚲ',
-  gebo: 'ᚷ', wunjo: 'ᚹ', hagalaz: 'ᚺ', nauthiz: 'ᚾ', isaz: 'ᛁ', jera: 'ᛃ',
-  eihwaz: 'ᛇ', perthro: 'ᛈ', algiz: 'ᛉ', sowilo: 'ᛊ', tiwaz: 'ᛏ', berkano: 'ᛒ',
-  ehwaz: 'ᛖ', mannaz: 'ᛗ', laguz: 'ᛚ', ingwaz: 'ᛝ', dagaz: 'ᛞ', othala: 'ᛟ',
-};
-
-export interface RuneSymbolsProps extends HTMLAttributes<HTMLDivElement> {
-  runes?: (keyof typeof RUNES | string)[];
-  count?: number;
-  variant?: 'gold' | 'blood' | 'bone' | 'iron' | 'cyan';
-  animation?: 'glow' | 'floating' | 'pulsing' | 'flickering' | 'none';
-  direction?: 'horizontal' | 'vertical';
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  scattered?: boolean;
-}
-
-const getRandomRunes = (count: number): string[] => {
-  const runeValues = Object.values(RUNES);
-  return Array.from({ length: count }, () => runeValues[Math.floor(Math.random() * runeValues.length)]);
-};
-
-export const RuneSymbols = forwardRef<HTMLDivElement, RuneSymbolsProps>(
-  ({ runes, count = 6, variant = 'gold', animation = 'glow', direction = 'horizontal', size = 'md', scattered = false, className, style, ...props }, ref) => {
-    const resolvedRunes = runes ? runes.map(r => RUNES[r as keyof typeof RUNES] || r) : getRandomRunes(count);
-    const animationClass = animation !== 'none' ? styles[animation] : '';
-
-    return (
-      <div
-        ref={ref}
-        className={`${styles.container} ${styles[variant]} ${styles[size]} ${direction === 'vertical' ? styles.vertical : ''} ${scattered ? styles.scattered : ''} ${animationClass} ${className || ''}`}
-        style={style}
-        {...props}
-      >
-        {resolvedRunes.map((rune, i) => (
-          <span
-            key={i}
-            className={styles.rune}
-            style={{ '--delay': `${i * 0.5}s`, ...(scattered ? { left: `${Math.random() * 80 + 10}%`, top: `${Math.random() * 80 + 10}%` } : {}) } as React.CSSProperties}
-          >
-            {rune}
-          </span>
-        ))}
-      </div>
-    );
-  }
-);
-
-RuneSymbols.displayName = 'RuneSymbols';
-export default RuneSymbols;

package/components/decorative/rune-symbols/rune-symbols.module.css

@@ -1,22 +0,0 @@
-.container { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); display: flex; gap: 1.5rem; font-size: 2rem; }
-.rune { color: var(--rune-color); opacity: 0.6; transition: all 0.4s ease; animation: runeGlow 4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
-.rune:hover { opacity: 1; text-shadow: 0 0 20px var(--rune-glow); transform: scale(1.1); }
-@keyframes runeGlow { 0%, 100% { opacity: 0.4; text-shadow: none; } 50% { opacity: 0.8; text-shadow: 0 0 15px var(--rune-glow); } }
-.floating .rune { animation: runeFloat 6s ease-in-out infinite; }
-@keyframes runeFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 25% { transform: translateY(-10px) rotate(5deg); opacity: 0.7; } 50% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 75% { transform: translateY(10px) rotate(-5deg); opacity: 0.7; } }
-.pulsing .rune { animation: runePulse 2s ease-in-out infinite; }
-@keyframes runePulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 25px var(--rune-glow); } }
-.flickering .rune { animation: runeFlicker 0.5s steps(2) infinite; }
-@keyframes runeFlicker { 0% { opacity: 0.3; } 25% { opacity: 0.8; } 50% { opacity: 0.5; } 75% { opacity: 0.9; } 100% { opacity: 0.3; } }
-.scattered { position: relative; width: 100%; height: 100%; }
-.scattered .rune { position: absolute; }
-.gold { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); }
-.blood { --rune-color: #8b1a1a; --rune-glow: rgba(139, 26, 26, 0.5); }
-.bone { --rune-color: #d4c5a9; --rune-glow: rgba(212, 197, 169, 0.5); }
-.iron { --rune-color: #4a4a4a; --rune-glow: rgba(74, 74, 74, 0.5); }
-.cyan { --rune-color: #00f0ff; --rune-glow: rgba(0, 240, 255, 0.5); }
-.vertical { flex-direction: column; }
-.sm { font-size: 1rem; gap: 0.75rem; }
-.md { font-size: 2rem; gap: 1.5rem; }
-.lg { font-size: 3rem; gap: 2rem; }
-.xl { font-size: 4rem; gap: 3rem; }

package/components/layout/horizontal-scroll/horizontal-scroll.module.css

@@ -1,30 +0,0 @@
-.container {
-  --scroll-accent: #00f0ff;
-  --scroll-bg: rgba(0, 0, 0, 0.3);
-  --panel-gap: 2rem;
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scroll-accent) var(--scroll-bg);
-}
-.container::-webkit-scrollbar { height: 4px; }
-.container::-webkit-scrollbar-track { background: var(--scroll-bg); }
-.container::-webkit-scrollbar-thumb { background: var(--scroll-accent); border-radius: 2px; }
-.track { display: flex; gap: var(--panel-gap); padding: 1rem 0; width: max-content; }
-.panel { flex: 0 0 auto; scroll-snap-align: start; }
-.cyan { --scroll-accent: #00f0ff; }
-.green { --scroll-accent: #00ff88; }
-.amber { --scroll-accent: #ffaa00; }
-.blood { --scroll-accent: #8b1a1a; }
-.panelFull { width: 100vw; }
-.panelLarge { width: 80vw; }
-.panelMedium { width: 60vw; }
-.panelSmall { width: 40vw; }
-.fadeEdges { mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); }
-.indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
-.indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--scroll-bg); border: 1px solid var(--scroll-accent); cursor: pointer; transition: all 0.3s ease; }
-.indicator:hover, .indicatorActive { background: var(--scroll-accent); box-shadow: 0 0 10px var(--scroll-accent); }

package/components/layout/spec-grid/index.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './spec-grid.module.css';
-
-export interface SpecItem {
-  label: string;
-  value: string | number;
-  unit?: string;
-  description?: string;
-  icon?: string;
-  highlighted?: boolean;
-}
-
-export interface SpecGridProps extends HTMLAttributes<HTMLDivElement> {
-  specs: SpecItem[];
-  variant?: 'cyan' | 'green' | 'amber' | 'blood';
-  columns?: number;
-  showHeader?: boolean;
-  headerTitle?: string;
-  compact?: boolean;
-  striped?: boolean;
-}
-
-export const SpecGrid = forwardRef<HTMLDivElement, SpecGridProps>(
-  ({ specs, variant = 'cyan', columns, showHeader = false, headerTitle = 'SYSTEM SPECS', compact = false, striped = false, className, style, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={`${styles.grid} ${styles[variant]} ${compact ? styles.compact : ''} ${striped ? styles.striped : ''} ${className || ''}`}
-        style={{ gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : undefined, ...style }}
-        {...props}
-      >
-        {showHeader && (
-          <div className={styles.header}>
-            <span>{headerTitle}</span>
-            <div className={styles.headerDots}><span className={styles.dot} /><span className={styles.dot} /><span className={styles.dot} /></div>
-          </div>
-        )}
-        {specs.map((spec, index) => (
-          <div key={index} className={`${styles.item} ${spec.icon ? styles.hasIcon : ''} ${spec.highlighted ? styles.highlighted : ''}`}>
-            {spec.icon && <span className={styles.icon}>{spec.icon}</span>}
-            <div className={styles.content}>
-              <span className={styles.label}>{spec.label}</span>
-              <span className={styles.value}>{spec.value}{spec.unit && <span className={styles.unit}>{spec.unit}</span>}</span>
-              {spec.description && <span className={styles.description}>{spec.description}</span>}
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-);
-
-SpecGrid.displayName = 'SpecGrid';
-export default SpecGrid;

package/components/layout/spec-grid/spec-grid.module.css

@@ -1,21 +0,0 @@
-.grid { --spec-accent: #00f0ff; --spec-bg: rgba(0, 0, 0, 0.5); --spec-border: rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--spec-border); border: 1px solid var(--spec-border); font-family: 'Share Tech Mono', monospace; }
-.item { padding: 1.5rem; background: var(--spec-bg); display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.3s ease; }
-.item:hover { background: rgba(0, 240, 255, 0.05); }
-.label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--spec-accent); opacity: 0.8; }
-.value { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.2; }
-.unit { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-left: 0.25rem; }
-.description { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; }
-.hasIcon { flex-direction: row; align-items: flex-start; gap: 1rem; }
-.icon { font-size: 1.5rem; color: var(--spec-accent); opacity: 0.6; }
-.content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
-.highlighted { background: rgba(0, 240, 255, 0.1); border-left: 2px solid var(--spec-accent); }
-.header { grid-column: 1 / -1; padding: 0.75rem 1.5rem; background: var(--spec-accent); color: #000; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; display: flex; justify-content: space-between; align-items: center; }
-.headerDots { display: flex; gap: 0.5rem; }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
-.cyan { --spec-accent: #00f0ff; }
-.green { --spec-accent: #00ff88; }
-.amber { --spec-accent: #ffaa00; }
-.blood { --spec-accent: #8b1a1a; }
-.compact .item { padding: 1rem; }
-.compact .value { font-size: 1.25rem; }
-.striped .item:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

package/components/layout/tower-pricing/tower-pricing.module.css

@@ -1,27 +0,0 @@
-.tower { --tower-accent: #c9a227; --tower-bg: rgba(0, 0, 0, 0.6); --tower-border: rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0; max-width: 400px; }
-.tier { position: relative; padding: 2rem; background: var(--tower-bg); border: 1px solid var(--tower-border); border-top: none; transition: all 0.3s ease; }
-.tier:first-child { border-top: 1px solid var(--tower-border); border-radius: 4px 4px 0 0; }
-.tier:last-child { border-radius: 0 0 4px 4px; }
-.tier:hover { background: rgba(201, 162, 39, 0.05); border-color: var(--tower-accent); z-index: 1; }
-.featured { border-color: var(--tower-accent); background: rgba(201, 162, 39, 0.1); transform: scale(1.02); z-index: 2; }
-.featured::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--tower-accent); }
-.featuredBadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; background: var(--tower-accent); color: #000; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
-.tierHeader { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tower-border); }
-.tierName { font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 700; color: var(--tower-accent); letter-spacing: 0.1em; }
-.tierPrice { display: flex; align-items: baseline; gap: 0.25rem; }
-.currency { font-size: 1rem; color: rgba(255, 255, 255, 0.5); }
-.amount { font-size: 2rem; font-weight: 700; color: #fff; }
-.period { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
-.tierFeatures { list-style: none; margin: 1rem 0; padding: 0; }
-.feature { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
-.featureIcon { color: var(--tower-accent); font-size: 0.75rem; }
-.tierAction { margin-top: 1.5rem; }
-.actionButton { width: 100%; padding: 0.875rem 1.5rem; background: transparent; border: 1px solid var(--tower-accent); color: var(--tower-accent); font-family: inherit; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: all 0.3s ease; }
-.actionButton:hover { background: var(--tower-accent); color: #000; }
-.featured .actionButton { background: var(--tower-accent); color: #000; }
-.featured .actionButton:hover { background: transparent; color: var(--tower-accent); }
-.gold { --tower-accent: #c9a227; }
-.blood { --tower-accent: #8b1a1a; }
-.cyan { --tower-accent: #00f0ff; }
-.bone { --tower-accent: #d4c5a9; }
-.connector { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 1px; height: 20px; background: var(--tower-accent); opacity: 0.3; }

package/components/layout/tracklist/index.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './tracklist.module.css';
-
-export interface Track {
-  number: number | string;
-  name: string;
-  artist?: string;
-  duration: string;
-  active?: boolean;
-}
-
-export interface TracklistProps extends HTMLAttributes<HTMLDivElement> {
-  tracks: Track[];
-  variant?: 'silver' | 'blood' | 'gold' | 'bone';
-  showHeader?: boolean;
-  compact?: boolean;
-  numbered?: boolean;
-  onTrackClick?: (track: Track, index: number) => void;
-}
-
-export const Tracklist = forwardRef<HTMLDivElement, TracklistProps>(
-  ({ tracks, variant = 'silver', showHeader = false, compact = false, numbered = false, onTrackClick, className, ...props }, ref) => {
-    return (
-      <div ref={ref} className={`${styles.tracklist} ${styles[variant]} ${compact ? styles.compact : ''} ${numbered ? styles.numbered : ''} ${className || ''}`} {...props}>
-        {showHeader && <div className={styles.header}><span>#</span><span>Title</span><span></span><span>Duration</span></div>}
-        {tracks.map((track, index) => (
-          <div key={index} className={`${styles.track} ${track.active ? styles.active : ''}`} onClick={() => onTrackClick?.(track, index)}>
-            <span className={styles.trackNum}>{String(track.number).padStart(2, '0')}</span>
-            <div className={styles.trackInfo}>
-              <span className={styles.trackName}>{track.name}</span>
-              {track.artist && <span className={styles.trackArtist}>{track.artist}</span>}
-            </div>
-            {!compact && <div className={styles.trackBarContainer}><div className={styles.trackBar} /></div>}
-            <span className={styles.trackDuration}>{track.duration}</span>
-          </div>
-        ))}
-      </div>
-    );
-  }
-);
-
-Tracklist.displayName = 'Tracklist';
-export default Tracklist;

package/components/layout/tracklist/tracklist.module.css

@@ -1,24 +0,0 @@
-.tracklist { --track-accent: #888; --track-hover: rgba(255, 255, 255, 0.05); --track-active: rgba(139, 26, 26, 0.2); display: flex; flex-direction: column; font-family: 'Cormorant Garamond', serif; }
-.track { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: all 0.3s ease; }
-.track:hover { background: var(--track-hover); }
-.track:hover .trackBar { width: 100%; }
-.trackNum { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--track-accent); min-width: 2rem; }
-.trackInfo { display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; }
-.trackName { font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.trackArtist { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); font-style: italic; }
-.trackBarContainer { position: relative; width: 80px; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
-.trackBar { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--track-accent); transition: width 0.6s ease; }
-.trackDuration { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); min-width: 3rem; text-align: right; }
-.active { background: var(--track-active); }
-.active .trackNum { color: #8b1a1a; }
-.active .trackNum::before { content: '▶'; margin-right: 0.5rem; }
-.active .trackBar { animation: progress 180s linear forwards; }
-@keyframes progress { from { width: 0; } to { width: 100%; } }
-.silver { --track-accent: #888; }
-.blood { --track-accent: #8b1a1a; --track-active: rgba(139, 26, 26, 0.2); }
-.gold { --track-accent: #c9a227; --track-active: rgba(201, 162, 39, 0.2); }
-.bone { --track-accent: #d4c5a9; --track-active: rgba(212, 197, 169, 0.2); }
-.header { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--track-accent); }
-.compact .track { padding: 0.75rem 1rem; gap: 1rem; }
-.compact .trackBarContainer { display: none; }
-.numbered .trackNum { font-size: 1.25rem; font-family: 'Playfair Display', serif; font-weight: 700; }