acidui-core 1.0.0

package/src/components/AcidCarousel.css

@@ -0,0 +1,166 @@
+.ac-carousel-container {
+    display: flex;
+    gap: 2rem;
+    width: 100%;
+    color: var(--ac-text);
+}
+
+.ac-carousel-container.ac-vertical {
+    flex-direction: row;
+}
+
+.ac-carousel-container.ac-horizontal {
+    flex-direction: column;
+}
+
+.ac-carousel-controls {
+    display: flex;
+    gap: 1rem;
+    flex: 1;
+}
+
+.ac-carousel-container.ac-vertical .ac-carousel-controls {
+    flex-direction: column;
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.ac-carousel-container.ac-horizontal .ac-carousel-controls {
+    flex-direction: row;
+}
+
+.ac-carousel-tab {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    background: transparent;
+    border: none;
+    padding: 1.5rem 0;
+    cursor: pointer;
+    border-bottom: 1px solid var(--ac-border);
+    position: relative;
+    opacity: 0.5;
+    transition: all 0.3s ease;
+}
+
+.ac-carousel-tab.active {
+    opacity: 1;
+}
+
+.ac-carousel-tab:hover {
+    opacity: 0.8;
+}
+
+.ac-tab-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.ac-asterisk {
+    color: var(--ac-text-muted);
+}
+
+.ac-asterisk.active {
+    color: var(--ac-brand);
+}
+
+.ac-tab-title-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-tab-label {
+    font-size: 0.65rem;
+    font-family: 'JetBrains Mono', monospace;
+    letter-spacing: 0.1em;
+    color: var(--ac-brand);
+    margin-bottom: 0.25rem;
+}
+
+.ac-tab-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+    letter-spacing: -0.02em;
+}
+
+.ac-tab-content {
+    overflow: hidden;
+    padding-left: 2.5rem;
+    /* align with text, bypassing asterisk */
+}
+
+.ac-tab-content p {
+    font-size: 0.9rem;
+    color: var(--ac-text-muted);
+    margin: 1rem 0 0 0;
+    line-height: 1.6;
+}
+
+.ac-tab-progress-bg {
+    position: absolute;
+    bottom: -1px;
+    /* Overlap border */
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: transparent;
+    overflow: hidden;
+}
+
+.ac-tab-progress-fill {
+    height: 100%;
+    background: var(--ac-brand);
+}
+
+/* Display Area */
+.ac-carousel-display {
+    flex: 2;
+    position: relative;
+    min-height: 400px;
+    border-radius: 12px;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ac-carousel-container.ac-horizontal .ac-carousel-display {
+    width: 100%;
+    min-height: 500px;
+}
+
+.ac-carousel-visual {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ac-carousel-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+    color: var(--ac-text-muted);
+    letter-spacing: 0.1em;
+}
+
+@media (max-width: 768px) {
+    .ac-carousel-container.ac-vertical {
+        flex-direction: column;
+    }
+
+    .ac-carousel-controls {
+        max-width: 100%;
+    }
+}

package/src/components/AcidCarousel.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import clsx from 'clsx';
+import './AcidCarousel.css';
+
+export interface AcidCarouselItem {
+    id: string;
+    title: string;
+    label?: string;
+    description: string;
+    content?: React.ReactNode;
+}
+
+export interface AcidCarouselProps {
+    items: AcidCarouselItem[];
+    direction?: 'horizontal' | 'vertical';
+    autoPlay?: boolean;
+    interval?: number;
+    className?: string;
+}
+
+export const AcidCarousel = ({
+    items,
+    direction = 'horizontal',
+    autoPlay = false,
+    interval = 5000,
+    className
+}: AcidCarouselProps) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [progress, setProgress] = useState(0);
+    const progressRef = useRef(0);
+    const lastTimeRef = useRef(0);
+    const requestRef = useRef<number | undefined>(undefined);
+
+    const nextSlide = useCallback(() => {
+        setActiveIndex((prev) => (prev + 1) % items.length);
+        setProgress(0);
+        progressRef.current = 0;
+    }, [items.length]);
+
+    const selectSlide = (index: number) => {
+        setActiveIndex(index);
+        setProgress(0);
+        progressRef.current = 0;
+    };
+
+    const animate = useCallback((time: number) => {
+        if (!autoPlay) return;
+
+        if (lastTimeRef.current !== undefined) {
+            const deltaTime = time - lastTimeRef.current;
+            progressRef.current += (deltaTime / interval) * 100;
+
+            if (progressRef.current >= 100) {
+                nextSlide();
+            } else {
+                setProgress(progressRef.current);
+            }
+        }
+
+        lastTimeRef.current = time;
+        requestRef.current = requestAnimationFrame(animate);
+    }, [autoPlay, interval, nextSlide]);
+
+    useEffect(() => {
+        if (autoPlay) {
+            requestRef.current = requestAnimationFrame(animate);
+            return () => {
+                if (requestRef.current) cancelAnimationFrame(requestRef.current);
+            };
+        } else {
+            setProgress(0);
+            progressRef.current = 0;
+        }
+    }, [autoPlay, animate]);
+
+    // Asterisk icon to match the aesthetic
+    const Asterisk = ({ active }: { active: boolean }) => (
+        <motion.div
+            className={clsx('ac-asterisk', active && 'active')}
+            animate={{ rotate: active ? 180 : 0 }}
+            transition={{ duration: 0.8, ease: "easeInOut" }}
+        >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M12 2v20M17 5L7 19M22 12H2M19 17L5 7" />
+            </svg>
+        </motion.div>
+    );
+
+    return (
+        <div className={clsx('ac-carousel-container', `ac-${direction}`, className)}>
+            <div className="ac-carousel-controls">
+                {items.map((item, idx) => {
+                    const isActive = idx === activeIndex;
+                    return (
+                        <button
+                            key={item.id}
+                            className={clsx('ac-carousel-tab', isActive && 'active')}
+                            onClick={() => selectSlide(idx)}
+                        >
+                            <div className="ac-tab-header">
+                                <div className="ac-tab-indicator">
+                                    <Asterisk active={isActive} />
+                                </div>
+                                <div className="ac-tab-title-group">
+                                    {item.label && <span className="ac-tab-label">{item.label}</span>}
+                                    <h3 className="ac-tab-title">{item.title}</h3>
+                                </div>
+                            </div>
+
+                            <AnimatePresence>
+                                {isActive && (
+                                    <motion.div
+                                        initial={{ height: 0, opacity: 0 }}
+                                        animate={{ height: 'auto', opacity: 1 }}
+                                        exit={{ height: 0, opacity: 0 }}
+                                        className="ac-tab-content"
+                                    >
+                                        <p>{item.description}</p>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+
+                            {/* Progress Bar for Autoplay */}
+                            {autoPlay && (
+                                <div className="ac-tab-progress-bg">
+                                    <motion.div
+                                        className="ac-tab-progress-fill"
+                                        initial={{ width: '0%' }}
+                                        animate={{ width: isActive ? `${progress}%` : (idx < activeIndex ? '100%' : '0%') }}
+                                        transition={{ duration: 0 }}
+                                    />
+                                </div>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <div className="ac-carousel-display">
+                <AnimatePresence mode="popLayout">
+                    <motion.div
+                        key={activeIndex}
+                        initial={{ opacity: 0, scale: 0.96, filter: 'blur(10px)' }}
+                        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+                        exit={{ opacity: 0, scale: 1.04, filter: 'blur(10px)' }}
+                        transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+                        className="ac-carousel-visual"
+                    >
+                        {items[activeIndex].content || (
+                            <div className="ac-carousel-placeholder">
+                                <motion.div
+                                    animate={{ rotate: 360 }}
+                                    transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+                                >
+                                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.2 }}>
+                                        <path d="M12 2v20M17 5L7 19M22 12H2M19 17L5 7" />
+                                    </svg>
+                                </motion.div>
+                                <span>{items[activeIndex].title} VISUAL_MODULE</span>
+                            </div>
+                        )}
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+        </div>
+    );
+};

package/src/components/AcidChart.css

@@ -0,0 +1,132 @@
+.ac-chart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-sizing: border-box;
+}
+
+.ac-chart-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.ac-chart-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--ac-brand);
+    border-radius: 50%;
+    box-shadow: 0 0 8px var(--ac-brand);
+}
+
+.ac-chart-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    color: var(--ac-text-muted);
+}
+
+.ac-chart-container {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ac-chart-svg {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+}
+
+.ac-chart-grid line {
+    stroke: var(--ac-border-muted);
+    stroke-width: 1;
+    stroke-dasharray: 4 4;
+}
+
+.ac-chart-path-line {
+    fill: none;
+    stroke: var(--ac-brand);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.ac-chart-point {
+    fill: var(--ac-bg);
+    stroke: var(--ac-brand);
+    stroke-width: 2;
+}
+
+.ac-chart-bar {
+    fill: var(--ac-brand);
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.ac-chart-bar:hover {
+    opacity: 1;
+}
+
+.ac-chart-path-area-fill {
+    fill: var(--ac-brand);
+    opacity: 0.1;
+}
+
+.ac-chart-path-area-line {
+    fill: none;
+    stroke: var(--ac-brand);
+    stroke-width: 2;
+}
+
+.ac-chart-pie-slice {
+    stroke: var(--ac-bg);
+    stroke-width: 2;
+    fill: var(--ac-brand);
+    opacity: calc(1 - (var(--slice-index) * 0.15));
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: center;
+}
+
+.ac-chart-pie-slice:hover {
+    transform: scale(1.05);
+}
+
+.ac-chart-pie-inner {
+    fill: var(--ac-bg);
+}
+
+.ac-chart-radar-grid {
+    fill: none;
+    stroke: var(--ac-border-muted);
+    stroke-width: 1;
+}
+
+.ac-chart-path-radar {
+    fill: var(--ac-brand);
+    fill-opacity: 0.2;
+    stroke: var(--ac-brand);
+    stroke-width: 2;
+}
+
+.ac-chart-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+    padding: 0 40px;
+}
+
+.ac-chart-label-item {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--ac-text-muted);
+    text-transform: uppercase;
+}

package/src/components/AcidChart.tsx

@@ -0,0 +1,198 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import './AcidChart.css';
+
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+export interface AcidChartProps {
+    type: 'line' | 'bar' | 'area' | 'pie' | 'radar';
+    data: ChartDataPoint[];
+    title?: string;
+    height?: number | string;
+    className?: string;
+    showGrid?: boolean;
+    showLabels?: boolean;
+}
+
+export const AcidChart = ({
+    type,
+    data,
+    title,
+    height = 300,
+    className,
+    showGrid = true,
+    showLabels = true
+}: AcidChartProps) => {
+    const maxValue = useMemo(() => Math.max(...data.map(d => d.value), 1), [data]);
+
+    // Line / Bar / Area helpers
+    const padding = 40;
+    const viewWidth = 500;
+    const viewHeight = 300;
+    const chartWidth = viewWidth - padding * 2;
+    const chartHeight = viewHeight - padding * 2;
+
+    const points = useMemo(() => {
+        return data.map((d, i) => ({
+            x: padding + (i * (chartWidth / (data.length - 1 || 1))),
+            y: viewHeight - padding - (d.value / maxValue * chartHeight)
+        }));
+    }, [data, maxValue, chartWidth, chartHeight]);
+
+    const renderChart = () => {
+        switch (type) {
+            case 'line': {
+                const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+                return (
+                    <svg viewBox={`0 0 ${viewWidth} ${viewHeight}`} className="ac-chart-svg">
+                        {showGrid && renderGrid()}
+                        <path d={linePath} className="ac-chart-path-line" />
+                        {points.map((p, i) => (
+                            <circle key={i} cx={p.x} cy={p.y} r="4" className="ac-chart-point" />
+                        ))}
+                    </svg>
+                );
+            }
+            case 'bar': {
+                const barWidth = (chartWidth / data.length) * 0.8;
+                return (
+                    <svg viewBox={`0 0 ${viewWidth} ${viewHeight}`} className="ac-chart-svg">
+                        {showGrid && renderGrid()}
+                        {data.map((d, i) => {
+                            const x = padding + (i * (chartWidth / data.length)) + (chartWidth / data.length - barWidth) / 2;
+                            const h = (d.value / maxValue) * chartHeight;
+                            const y = viewHeight - padding - h;
+                            return (
+                                <rect
+                                    key={i}
+                                    x={x}
+                                    y={y}
+                                    width={barWidth}
+                                    height={h}
+                                    className="ac-chart-bar"
+                                />
+                            );
+                        })}
+                    </svg>
+                );
+            }
+            case 'area': {
+                const areaLine = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+                const fillPath = `${areaLine} L ${points[points.length - 1].x} ${viewHeight - padding} L ${points[0].x} ${viewHeight - padding} Z`;
+                return (
+                    <svg viewBox={`0 0 ${viewWidth} ${viewHeight}`} className="ac-chart-svg">
+                        {showGrid && renderGrid()}
+                        <path d={fillPath} className="ac-chart-path-area-fill" />
+                        <path d={areaLine} className="ac-chart-path-area-line" />
+                    </svg>
+                );
+            }
+            case 'pie': {
+                let currentAngle = 0;
+                const total = data.reduce((acc, d) => acc + d.value, 0);
+                const radius = 100;
+                const cx = viewWidth / 2;
+                const cy = viewHeight / 2;
+
+                return (
+                    <svg viewBox={`0 0 ${viewWidth} ${viewHeight}`} className="ac-chart-svg">
+                        {data.map((d, i) => {
+                            const sliceAngle = (d.value / total) * 360;
+                            const x1 = cx + radius * Math.cos((currentAngle - 90) * Math.PI / 180);
+                            const y1 = cy + radius * Math.sin((currentAngle - 90) * Math.PI / 180);
+                            currentAngle += sliceAngle;
+                            const x2 = cx + radius * Math.cos((currentAngle - 90) * Math.PI / 180);
+                            const y2 = cy + radius * Math.sin((currentAngle - 90) * Math.PI / 180);
+
+                            const largeArc = sliceAngle > 180 ? 1 : 0;
+                            const pathData = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+
+                            return (
+                                <path
+                                    key={i}
+                                    d={pathData}
+                                    className="ac-chart-pie-slice"
+                                    style={{ '--slice-index': i } as React.CSSProperties}
+                                />
+                            );
+                        })}
+                        <circle cx={cx} cy={cy} r={radius * 0.6} className="ac-chart-pie-inner" />
+                    </svg>
+                );
+            }
+            case 'radar': {
+                const rRadius = 100;
+                const rCx = viewWidth / 2;
+                const rCy = viewHeight / 2;
+                const angleStep = (Math.PI * 2) / data.length;
+
+                const radarPoints = data.map((d, i) => {
+                    const r = (d.value / maxValue) * rRadius;
+                    return {
+                        x: rCx + r * Math.cos(i * angleStep - Math.PI / 2),
+                        y: rCy + r * Math.sin(i * angleStep - Math.PI / 2)
+                    };
+                });
+
+                const radarPath = radarPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ') + ' Z';
+
+                return (
+                    <svg viewBox={`0 0 ${viewWidth} ${viewHeight}`} className="ac-chart-svg">
+                        {/* Radar Grids */}
+                        {[0.2, 0.4, 0.6, 0.8, 1].map(scale => (
+                            <path
+                                key={scale}
+                                d={data.map((_, i) => {
+                                    const r = scale * rRadius;
+                                    const x = rCx + r * Math.cos(i * angleStep - Math.PI / 2);
+                                    const y = rCy + r * Math.sin(i * angleStep - Math.PI / 2);
+                                    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+                                }).join(' ') + ' Z'}
+                                className="ac-chart-radar-grid"
+                            />
+                        ))}
+                        <path d={radarPath} className="ac-chart-path-radar" />
+                    </svg>
+                );
+            }
+            default:
+                return null;
+        }
+    };
+
+    const renderGrid = () => (
+        <g className="ac-chart-grid">
+            {[0, 0.25, 0.5, 0.75, 1].map(v => {
+                const y = padding + v * chartHeight;
+                return <line key={v} x1={padding} y1={y} x2={viewWidth - padding} y2={y} />;
+            })}
+        </g>
+    );
+
+    return (
+        <div className={clsx('ac-chart', className)} style={{ height }}>
+            {title && (
+                <div className="ac-chart-header">
+                    <span className="ac-chart-dot" />
+                    <span className="ac-chart-title">{title}</span>
+                </div>
+            )}
+            <div className="ac-chart-container">
+                {renderChart()}
+            </div>
+            {showLabels && type !== 'pie' && type !== 'radar' && (
+                <div className="ac-chart-labels">
+                    {data.map((d, i) => (
+                        <div key={i} className="ac-chart-label-item">
+                            {d.label}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};