@oalacea/chaosui 0.4.0 → 0.5.0

package/components/buttons/tension-bar/index.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tension-bar.module.css';
+
+export interface TensionBarProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  labelLeft?: string;
+  labelRight?: string;
+  showPercentage?: boolean;
+  showMarkers?: boolean;
+  markerCount?: number;
+  variant?: 'default' | 'gold' | 'danger' | 'segmented';
+  size?: 'sm' | 'md' | 'lg';
+  innerText?: string;
+  animated?: boolean;
+  dangerThreshold?: number;
+}
+
+export const TensionBar = forwardRef<HTMLDivElement, TensionBarProps>(
+  ({ value, max = 100, labelLeft, labelRight, showPercentage = false, showMarkers = false, markerCount = 10, variant = 'default', size = 'md', innerText, animated = false, dangerThreshold = 80, className, ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const isHigh = variant === 'danger' && percentage >= dangerThreshold;
+
+    const containerClasses = [
+      styles.container,
+      variant === 'gold' && styles.variantGold,
+      variant === 'danger' && styles.variantDanger,
+      variant === 'segmented' && styles.variantSegmented,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      innerText && styles.withText,
+      animated && styles.animated,
+      isHigh && styles.high,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const renderSegmented = () => {
+      const segments = [];
+      const filledCount = Math.floor((percentage / 100) * markerCount);
+      for (let i = 0; i < markerCount; i++) {
+        segments.push(
+          <div key={i} className={`${styles.segment} ${i < filledCount ? styles.segmentFilled : ''}`} />
+        );
+      }
+      return segments;
+    };
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {(labelLeft || labelRight) && (
+          <div className={styles.labels}>
+            <span className={styles.labelLeft}>{labelLeft}</span>
+            <span className={styles.labelRight}>{labelRight}</span>
+          </div>
+        )}
+        
+        <div className={styles.track}>
+          {innerText && <span className={styles.innerText}>{innerText}</span>}
+          {variant === 'segmented' ? renderSegmented() : <div className={styles.fill} style={{ width: `${percentage}%` }} />}
+          {showPercentage && <span className={styles.percentage}>{Math.round(percentage)}%</span>}
+        </div>
+
+        {showMarkers && variant !== 'segmented' && (
+          <div className={styles.markers}>
+            {Array.from({ length: markerCount + 1 }).map((_, i) => {
+              const markerPercent = (i / markerCount) * 100;
+              return <div key={i} className={`${styles.marker} ${markerPercent <= percentage ? styles.markerActive : ''}`} />;
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+TensionBar.displayName = 'TensionBar';
+export default TensionBar;

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

@@ -0,0 +1,105 @@
+/* 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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,55 @@
+'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

@@ -0,0 +1,51 @@
+'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

@@ -0,0 +1,33 @@
+.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

@@ -0,0 +1,55 @@
+'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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,30 @@
+.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/horizontal-scroll/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode, useRef, useState, useEffect } from 'react';
+import styles from './horizontal-scroll.module.css';
+
+export interface HorizontalScrollProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  panelSize?: 'full' | 'large' | 'medium' | 'small';
+  fadeEdges?: boolean;
+  showIndicators?: boolean;
+  gap?: number;
+}
+
+export const HorizontalScroll = forwardRef<HTMLDivElement, HorizontalScrollProps>(
+  ({ children, variant = 'cyan', panelSize = 'large', fadeEdges = false, showIndicators = false, gap = 2, className, style, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [panelCount, setPanelCount] = useState(0);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const panels = container.querySelectorAll(`.${styles.panel}`);
+      setPanelCount(panels.length);
+
+      const handleScroll = () => {
+        if (!container) return;
+        const panelWidth = container.scrollWidth / panels.length;
+        setActiveIndex(Math.round(container.scrollLeft / panelWidth));
+      };
+
+      container.addEventListener('scroll', handleScroll, { passive: true });
+      return () => container.removeEventListener('scroll', handleScroll);
+    }, [children]);
+
+    const scrollToPanel = (index: number) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const panelWidth = container.scrollWidth / panelCount;
+      container.scrollTo({ left: panelWidth * index, behavior: 'smooth' });
+    };
+
+    const panelSizeClass = { full: styles.panelFull, large: styles.panelLarge, medium: styles.panelMedium, small: styles.panelSmall }[panelSize];
+
+    return (
+      <div className={className}>
+        <div
+          ref={(node) => {
+            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) ref.current = node;
+          }}
+          className={`${styles.container} ${styles[variant]} ${fadeEdges ? styles.fadeEdges : ''}`}
+          style={{ '--panel-gap': `${gap}rem`, ...style } as React.CSSProperties}
+          {...props}
+        >
+          <div className={styles.track}>
+            {Array.isArray(children)
+              ? children.map((child, i) => <div key={i} className={`${styles.panel} ${panelSizeClass}`}>{child}</div>)
+              : <div className={`${styles.panel} ${panelSizeClass}`}>{children}</div>
+            }
+          </div>
+        </div>
+        {showIndicators && panelCount > 1 && (
+          <div className={styles.indicators}>
+            {Array.from({ length: panelCount }).map((_, i) => (
+              <button key={i} className={`${styles.indicator} ${i === activeIndex ? styles.indicatorActive : ''}`} onClick={() => scrollToPanel(i)} aria-label={`Go to panel ${i + 1}`} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+HorizontalScroll.displayName = 'HorizontalScroll';
+export default HorizontalScroll;

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

@@ -0,0 +1,56 @@
+'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

@@ -0,0 +1,21 @@
+.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); }