feat: Phase 2+3 — effects, streams, springs, search + dashboard
Phase 2 — Effect System & Streams: - Algebraic effects (perform/handle/handleAsync) for composable, testable side-effects with swappable handlers - Stream engine with map, filter, debounce, throttle, distinct, scan, flatMap, merge, fromEvent, fromSignal, fromPromise - Search-with-autocomplete example: debounce + flatMap + effects Phase 3 — Spring Physics: - RK4 integrator with fixed substep and sleep-when-idle scheduler - Springs are signals — anything that reads spring.value auto-updates - Dashboard example: spring-animated sidebar, staggered card entrance, draggable spring ball with configurable stiffness/damping/mass Runtime evolution: v0.1 (signals) → v0.2 (+ effects + streams) → v0.3 (+ springs)
This commit is contained in:
enzotar
parent
51cf09336b
commit
fcf2639d9b
2 changed files with 1603 additions and 0 deletions
746
examples/dashboard.html
Normal file
746
examples/dashboard.html
Normal file
|
|
@ -0,0 +1,746 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DreamStack Dashboard — Springs + Layout</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||||
|
background: #0a0a0f;
|
||||||
|
color: #e2e8f0;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: none;
|
||||||
|
/* springs handle animation */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
transition: all 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: rgba(99, 102, 241, 0.12);
|
||||||
|
color: #a78bfa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-label {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn {
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 2rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-info {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(255, 255, 255, 0.25);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: none;
|
||||||
|
/* springs handle this */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #6366f1, #8b5cf6, #c084fc);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-change {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-change.up {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-change.down {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable-area {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-title {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-playground {
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-ball {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||||
|
position: absolute;
|
||||||
|
cursor: grab;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-ball:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-trail {
|
||||||
|
position: absolute;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(99, 102, 241, 0.15);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-slider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 120px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #8b5cf6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-value {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #8b5cf6;
|
||||||
|
min-width: 30px;
|
||||||
|
text-align: right;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by span {
|
||||||
|
color: rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// DreamStack Runtime v0.3.0 — Signals + Effects + Springs
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
const DS = (() => {
|
||||||
|
let currentEffect = null;
|
||||||
|
let batchDepth = 0;
|
||||||
|
let pendingEffects = new Set();
|
||||||
|
|
||||||
|
class Signal {
|
||||||
|
constructor(val) { this._value = val; this._subs = new Set(); }
|
||||||
|
get value() { if (currentEffect) this._subs.add(currentEffect); return this._value; }
|
||||||
|
set value(v) {
|
||||||
|
if (this._value === v) return;
|
||||||
|
this._value = v;
|
||||||
|
if (batchDepth > 0) for (const s of this._subs) pendingEffects.add(s);
|
||||||
|
else for (const s of [...this._subs]) s._run();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Derived {
|
||||||
|
constructor(fn) {
|
||||||
|
this._fn = fn; this._value = undefined; this._subs = new Set();
|
||||||
|
this._eff = new Effect(() => {
|
||||||
|
const old = this._value; this._value = this._fn();
|
||||||
|
if (old !== this._value) {
|
||||||
|
if (batchDepth > 0) for (const s of this._subs) pendingEffects.add(s);
|
||||||
|
else for (const s of [...this._subs]) s._run();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._eff._run();
|
||||||
|
}
|
||||||
|
get value() { if (currentEffect) this._subs.add(currentEffect); return this._value; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class Effect {
|
||||||
|
constructor(fn) { this._fn = fn; this._disposed = false; }
|
||||||
|
_run() {
|
||||||
|
if (this._disposed) return;
|
||||||
|
const prev = currentEffect; currentEffect = this;
|
||||||
|
try { this._fn(); } finally { currentEffect = prev; }
|
||||||
|
}
|
||||||
|
dispose() { this._disposed = true; }
|
||||||
|
}
|
||||||
|
|
||||||
|
const signal = v => new Signal(v);
|
||||||
|
const derived = fn => new Derived(fn);
|
||||||
|
const effect = fn => { const e = new Effect(fn); e._run(); return e; };
|
||||||
|
const batch = fn => {
|
||||||
|
batchDepth++;
|
||||||
|
try { fn(); } finally { batchDepth--; if (batchDepth === 0) flush(); }
|
||||||
|
};
|
||||||
|
const flush = () => {
|
||||||
|
const effs = [...pendingEffects]; pendingEffects.clear();
|
||||||
|
for (const e of effs) e._run();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// Spring Physics Engine
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// RK4 integrator, interruptible, integrates with signals
|
||||||
|
|
||||||
|
const activeSpringSet = new Set();
|
||||||
|
let rafId = null;
|
||||||
|
let lastTime = 0;
|
||||||
|
|
||||||
|
class Spring {
|
||||||
|
constructor({ value = 0, target = 0, stiffness = 170, damping = 26, mass = 1 } = {}) {
|
||||||
|
this._signal = signal(value);
|
||||||
|
this._velocity = 0;
|
||||||
|
this._target = target;
|
||||||
|
this.stiffness = stiffness;
|
||||||
|
this.damping = damping;
|
||||||
|
this.mass = mass;
|
||||||
|
this._settled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() { return this._signal.value; }
|
||||||
|
set value(v) { this._signal.value = v; }
|
||||||
|
|
||||||
|
get target() { return this._target; }
|
||||||
|
set target(t) {
|
||||||
|
this._target = t;
|
||||||
|
this._settled = false;
|
||||||
|
activeSpringSet.add(this);
|
||||||
|
startLoop();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Instantly set position (no animation)
|
||||||
|
set(v) {
|
||||||
|
this._signal.value = v;
|
||||||
|
this._target = v;
|
||||||
|
this._velocity = 0;
|
||||||
|
this._settled = true;
|
||||||
|
activeSpringSet.delete(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// RK4 step
|
||||||
|
_step(dt) {
|
||||||
|
const pos = this._signal._value;
|
||||||
|
const vel = this._velocity;
|
||||||
|
const k = this.stiffness;
|
||||||
|
const d = this.damping;
|
||||||
|
const m = this.mass;
|
||||||
|
|
||||||
|
// RK4 derivatives
|
||||||
|
const accel = (p, v) => (-k * (p - this._target) - d * v) / m;
|
||||||
|
|
||||||
|
const k1v = accel(pos, vel);
|
||||||
|
const k1p = vel;
|
||||||
|
const k2v = accel(pos + k1p * dt / 2, vel + k1v * dt / 2);
|
||||||
|
const k2p = vel + k1v * dt / 2;
|
||||||
|
const k3v = accel(pos + k2p * dt / 2, vel + k2v * dt / 2);
|
||||||
|
const k3p = vel + k2v * dt / 2;
|
||||||
|
const k4v = accel(pos + k3p * dt, vel + k3v * dt);
|
||||||
|
const k4p = vel + k3v * dt;
|
||||||
|
|
||||||
|
const newVel = vel + (dt / 6) * (k1v + 2 * k2v + 2 * k3v + k4v);
|
||||||
|
const newPos = pos + (dt / 6) * (k1p + 2 * k2p + 2 * k3p + k4p);
|
||||||
|
|
||||||
|
this._velocity = newVel;
|
||||||
|
this._signal.value = newPos;
|
||||||
|
|
||||||
|
// Check if settled
|
||||||
|
if (Math.abs(newVel) < 0.01 && Math.abs(newPos - this._target) < 0.01) {
|
||||||
|
this._signal.value = this._target;
|
||||||
|
this._velocity = 0;
|
||||||
|
this._settled = true;
|
||||||
|
activeSpringSet.delete(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startLoop() {
|
||||||
|
if (rafId !== null) return;
|
||||||
|
lastTime = performance.now();
|
||||||
|
rafId = requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loop(now) {
|
||||||
|
const dt = Math.min((now - lastTime) / 1000, 0.064); // clamp to ~15fps min
|
||||||
|
lastTime = now;
|
||||||
|
|
||||||
|
batch(() => {
|
||||||
|
for (const spring of activeSpringSet) {
|
||||||
|
// Fixed timestep substeps for stability
|
||||||
|
const steps = Math.ceil(dt / (1 / 120));
|
||||||
|
const subDt = dt / steps;
|
||||||
|
for (let i = 0; i < steps; i++) {
|
||||||
|
spring._step(subDt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (activeSpringSet.size > 0) {
|
||||||
|
rafId = requestAnimationFrame(loop);
|
||||||
|
} else {
|
||||||
|
rafId = null; // Sleep when no springs are active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function spring(opts) { return new Spring(opts); }
|
||||||
|
|
||||||
|
return { signal, derived, effect, batch, flush, spring, Spring };
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// Dashboard App
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
(() => {
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
|
||||||
|
// ── Signals ──
|
||||||
|
const sidebarExpanded = DS.signal(true);
|
||||||
|
const activePage = DS.signal('dashboard');
|
||||||
|
|
||||||
|
// ── Springs ──
|
||||||
|
const sidebarWidth = DS.spring({ value: 240, target: 240, stiffness: 200, damping: 24 });
|
||||||
|
const sidebarOpacity = DS.spring({ value: 1, target: 1, stiffness: 200, damping: 24 });
|
||||||
|
|
||||||
|
// Card animations (staggered)
|
||||||
|
const cardScales = [
|
||||||
|
DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
|
||||||
|
DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
|
||||||
|
DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
|
||||||
|
DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
|
||||||
|
];
|
||||||
|
|
||||||
|
// Draggable ball
|
||||||
|
const ballX = DS.spring({ value: 150, target: 150, stiffness: 170, damping: 26 });
|
||||||
|
const ballY = DS.spring({ value: 120, target: 120, stiffness: 170, damping: 26 });
|
||||||
|
|
||||||
|
// Stagger card entrance
|
||||||
|
cardScales.forEach((s, i) => {
|
||||||
|
setTimeout(() => { s.target = 1; }, i * 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Dashboard layout ──
|
||||||
|
const dashboard = document.createElement('div');
|
||||||
|
dashboard.className = 'dashboard';
|
||||||
|
app.appendChild(dashboard);
|
||||||
|
|
||||||
|
// Sidebar
|
||||||
|
const sidebar = document.createElement('div');
|
||||||
|
sidebar.className = 'sidebar';
|
||||||
|
dashboard.appendChild(sidebar);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
sidebar.style.width = sidebarWidth.value + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sidebar header
|
||||||
|
const sidebarHeader = document.createElement('div');
|
||||||
|
sidebarHeader.className = 'sidebar-header';
|
||||||
|
sidebarHeader.innerHTML = '<div class="logo">DS</div><div class="logo-text">DreamStack</div>';
|
||||||
|
sidebar.appendChild(sidebarHeader);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
const logoText = sidebarHeader.querySelector('.logo-text');
|
||||||
|
logoText.style.opacity = sidebarOpacity.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Nav items
|
||||||
|
const nav = document.createElement('div');
|
||||||
|
nav.className = 'sidebar-nav';
|
||||||
|
sidebar.appendChild(nav);
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ icon: '📊', label: 'Dashboard', id: 'dashboard' },
|
||||||
|
{ icon: '📈', label: 'Analytics', id: 'analytics' },
|
||||||
|
{ icon: '⚡', label: 'Signals', id: 'signals' },
|
||||||
|
{ icon: '🎯', label: 'Effects', id: 'effects' },
|
||||||
|
{ icon: '🌊', label: 'Streams', id: 'streams' },
|
||||||
|
{ icon: '🎨', label: 'Springs', id: 'springs' },
|
||||||
|
];
|
||||||
|
|
||||||
|
navItems.forEach(item => {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'nav-item';
|
||||||
|
el.innerHTML = `<span class="nav-icon">${item.icon}</span><span class="nav-label">${item.label}</span>`;
|
||||||
|
el.addEventListener('click', () => { activePage.value = item.id; });
|
||||||
|
DS.effect(() => {
|
||||||
|
el.classList.toggle('active', activePage.value === item.id);
|
||||||
|
});
|
||||||
|
DS.effect(() => {
|
||||||
|
el.querySelector('.nav-label').style.opacity = sidebarOpacity.value;
|
||||||
|
});
|
||||||
|
nav.appendChild(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toggle button
|
||||||
|
const toggleBtn = document.createElement('button');
|
||||||
|
toggleBtn.className = 'toggle-btn';
|
||||||
|
toggleBtn.textContent = '☰';
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const expanded = !sidebarExpanded.value;
|
||||||
|
sidebarExpanded.value = expanded;
|
||||||
|
sidebarWidth.target = expanded ? 240 : 64;
|
||||||
|
sidebarOpacity.target = expanded ? 1 : 0;
|
||||||
|
});
|
||||||
|
sidebar.appendChild(toggleBtn);
|
||||||
|
|
||||||
|
// Main content
|
||||||
|
const main = document.createElement('div');
|
||||||
|
main.className = 'main-content';
|
||||||
|
dashboard.appendChild(main);
|
||||||
|
|
||||||
|
// Header
|
||||||
|
const mainHeader = document.createElement('div');
|
||||||
|
mainHeader.className = 'main-header';
|
||||||
|
const pageTitle = document.createElement('h2');
|
||||||
|
pageTitle.className = 'page-title';
|
||||||
|
const springInfo = document.createElement('div');
|
||||||
|
springInfo.className = 'spring-info';
|
||||||
|
mainHeader.appendChild(pageTitle);
|
||||||
|
mainHeader.appendChild(springInfo);
|
||||||
|
main.appendChild(mainHeader);
|
||||||
|
|
||||||
|
DS.effect(() => { pageTitle.textContent = activePage.value.charAt(0).toUpperCase() + activePage.value.slice(1); });
|
||||||
|
DS.effect(() => {
|
||||||
|
springInfo.textContent = `sidebar: ${sidebarWidth.value.toFixed(0)}px | ball: (${ballX.value.toFixed(0)}, ${ballY.value.toFixed(0)})`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Stats cards
|
||||||
|
const cardsGrid = document.createElement('div');
|
||||||
|
cardsGrid.className = 'cards-grid';
|
||||||
|
main.appendChild(cardsGrid);
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ icon: '⚡', title: 'Signals', value: '1,247', change: '+12%', up: true },
|
||||||
|
{ icon: '🔄', title: 'Updates/s', value: '60', change: '0ms glitch', up: true },
|
||||||
|
{ icon: '📦', title: 'Bundle', value: '6.8KB', change: 'No VDOM', up: true },
|
||||||
|
{ icon: '🎯', title: 'Effects', value: '3', change: 'All handled', up: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
stats.forEach((stat, i) => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'card';
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
const s = cardScales[i].value;
|
||||||
|
card.style.transform = `scale(${s})`;
|
||||||
|
card.style.opacity = s;
|
||||||
|
});
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="card-icon">${stat.icon}</div>
|
||||||
|
<div class="card-title">${stat.title}</div>
|
||||||
|
<div class="card-value">${stat.value}</div>
|
||||||
|
<div class="card-change ${stat.up ? 'up' : 'down'}">${stat.change}</div>
|
||||||
|
`;
|
||||||
|
cardsGrid.appendChild(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draggable spring area
|
||||||
|
const dragArea = document.createElement('div');
|
||||||
|
dragArea.className = 'draggable-area';
|
||||||
|
const dragTitle = document.createElement('div');
|
||||||
|
dragTitle.className = 'drag-title';
|
||||||
|
dragTitle.textContent = '🎾 Spring Physics — Drag the ball';
|
||||||
|
dragArea.appendChild(dragTitle);
|
||||||
|
main.appendChild(dragArea);
|
||||||
|
|
||||||
|
const playground = document.createElement('div');
|
||||||
|
playground.className = 'spring-playground';
|
||||||
|
dragArea.appendChild(playground);
|
||||||
|
|
||||||
|
// Ball
|
||||||
|
const ball = document.createElement('div');
|
||||||
|
ball.className = 'spring-ball';
|
||||||
|
ball.textContent = '🎾';
|
||||||
|
playground.appendChild(ball);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
ball.style.left = (ballX.value - 30) + 'px';
|
||||||
|
ball.style.top = (ballY.value - 30) + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drag handling
|
||||||
|
let isDragging = false;
|
||||||
|
|
||||||
|
ball.addEventListener('mousedown', (e) => {
|
||||||
|
isDragging = true;
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const rect = playground.getBoundingClientRect();
|
||||||
|
const x = Math.max(30, Math.min(rect.width - 30, e.clientX - rect.left));
|
||||||
|
const y = Math.max(30, Math.min(rect.height - 30, e.clientY - rect.top));
|
||||||
|
// Direct set while dragging (no spring)
|
||||||
|
ballX.set(x);
|
||||||
|
ballY.set(y);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', () => {
|
||||||
|
if (isDragging) {
|
||||||
|
isDragging = false;
|
||||||
|
// Spring back to center
|
||||||
|
const rect = playground.getBoundingClientRect();
|
||||||
|
ballX.target = rect.width / 2;
|
||||||
|
ballY.target = rect.height / 2;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click anywhere in playground to send ball there
|
||||||
|
playground.addEventListener('click', (e) => {
|
||||||
|
if (isDragging) return;
|
||||||
|
const rect = playground.getBoundingClientRect();
|
||||||
|
ballX.target = e.clientX - rect.left;
|
||||||
|
ballY.target = e.clientY - rect.top;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Spring controls
|
||||||
|
const controls = document.createElement('div');
|
||||||
|
controls.className = 'spring-controls';
|
||||||
|
dragArea.appendChild(controls);
|
||||||
|
|
||||||
|
function makeControl(label, min, max, initial, onChange) {
|
||||||
|
const group = document.createElement('div');
|
||||||
|
group.className = 'control-group';
|
||||||
|
|
||||||
|
const lbl = document.createElement('span');
|
||||||
|
lbl.className = 'control-label';
|
||||||
|
lbl.textContent = label;
|
||||||
|
|
||||||
|
const slider = document.createElement('input');
|
||||||
|
slider.type = 'range';
|
||||||
|
slider.className = 'control-slider';
|
||||||
|
slider.min = min;
|
||||||
|
slider.max = max;
|
||||||
|
slider.value = initial;
|
||||||
|
|
||||||
|
const val = document.createElement('span');
|
||||||
|
val.className = 'control-value';
|
||||||
|
val.textContent = initial;
|
||||||
|
|
||||||
|
slider.addEventListener('input', () => {
|
||||||
|
val.textContent = slider.value;
|
||||||
|
onChange(Number(slider.value));
|
||||||
|
});
|
||||||
|
|
||||||
|
group.appendChild(lbl);
|
||||||
|
group.appendChild(slider);
|
||||||
|
group.appendChild(val);
|
||||||
|
controls.appendChild(group);
|
||||||
|
}
|
||||||
|
|
||||||
|
makeControl('Stiffness', 10, 500, 170, (v) => { ballX.stiffness = v; ballY.stiffness = v; });
|
||||||
|
makeControl('Damping', 1, 60, 26, (v) => { ballX.damping = v; ballY.damping = v; });
|
||||||
|
makeControl('Mass', 0.5, 10, 1, (v) => { ballX.mass = v; ballY.mass = v; });
|
||||||
|
|
||||||
|
// Powered by
|
||||||
|
const powered = document.createElement('div');
|
||||||
|
powered.className = 'powered-by';
|
||||||
|
powered.innerHTML = 'Built with <span>DreamStack</span> — springs + signals + zero re-renders';
|
||||||
|
main.appendChild(powered);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
857
examples/search.html
Normal file
857
examples/search.html
Normal file
|
|
@ -0,0 +1,857 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DreamStack Search — Effects + Streams</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||||
|
background: #0a0a0f;
|
||||||
|
color: #e2e8f0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 200;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: rgba(139, 92, 246, 0.4);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 1.25rem 1rem 3rem;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 14px;
|
||||||
|
color: #e2e8f0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: rgba(99, 102, 241, 0.5);
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.loading {
|
||||||
|
background: #f59e0b;
|
||||||
|
animation: pulse 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.success {
|
||||||
|
background: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.error {
|
||||||
|
background: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
animation: fade-in 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #e2e8f0;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title mark {
|
||||||
|
background: rgba(139, 92, 246, 0.25);
|
||||||
|
color: #c4b5fd;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-desc {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-meta {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(139, 92, 246, 0.4);
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem;
|
||||||
|
color: rgba(255, 255, 255, 0.15);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-log {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-log::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-log::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.effect-log::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
animation: fade-in 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry .effect-name {
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry .stream-op {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry .handler {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry .time {
|
||||||
|
color: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by span {
|
||||||
|
color: rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// DreamStack Runtime v0.2.0 — Signals + Effects + Streams
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
const DS = (() => {
|
||||||
|
// ── Signal System (from v0.1.0) ──
|
||||||
|
let currentEffect = null;
|
||||||
|
let batchDepth = 0;
|
||||||
|
let pendingEffects = new Set();
|
||||||
|
|
||||||
|
class Signal {
|
||||||
|
constructor(val) {
|
||||||
|
this._value = val;
|
||||||
|
this._subs = new Set();
|
||||||
|
}
|
||||||
|
get value() {
|
||||||
|
if (currentEffect) this._subs.add(currentEffect);
|
||||||
|
return this._value;
|
||||||
|
}
|
||||||
|
set value(v) {
|
||||||
|
if (this._value === v) return;
|
||||||
|
this._value = v;
|
||||||
|
this._notify();
|
||||||
|
}
|
||||||
|
_notify() {
|
||||||
|
if (batchDepth > 0) {
|
||||||
|
for (const s of this._subs) pendingEffects.add(s);
|
||||||
|
} else {
|
||||||
|
for (const s of [...this._subs]) s._run();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Derived {
|
||||||
|
constructor(fn) {
|
||||||
|
this._fn = fn;
|
||||||
|
this._value = undefined;
|
||||||
|
this._subs = new Set();
|
||||||
|
this._eff = new Effect(() => {
|
||||||
|
const old = this._value;
|
||||||
|
this._value = this._fn();
|
||||||
|
if (old !== this._value) {
|
||||||
|
if (batchDepth > 0) {
|
||||||
|
for (const s of this._subs) pendingEffects.add(s);
|
||||||
|
} else {
|
||||||
|
for (const s of [...this._subs]) s._run();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._eff._run();
|
||||||
|
}
|
||||||
|
get value() {
|
||||||
|
if (currentEffect) this._subs.add(currentEffect);
|
||||||
|
return this._value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Effect {
|
||||||
|
constructor(fn) { this._fn = fn; this._disposed = false; }
|
||||||
|
_run() {
|
||||||
|
if (this._disposed) return;
|
||||||
|
const prev = currentEffect;
|
||||||
|
currentEffect = this;
|
||||||
|
try { this._fn(); } finally { currentEffect = prev; }
|
||||||
|
}
|
||||||
|
dispose() { this._disposed = true; }
|
||||||
|
}
|
||||||
|
|
||||||
|
const signal = v => new Signal(v);
|
||||||
|
const derived = fn => new Derived(fn);
|
||||||
|
const effect = fn => { const e = new Effect(fn); e._run(); return e; };
|
||||||
|
const batch = fn => {
|
||||||
|
batchDepth++;
|
||||||
|
try { fn(); } finally {
|
||||||
|
batchDepth--;
|
||||||
|
if (batchDepth === 0) flush();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const flush = () => {
|
||||||
|
const effs = [...pendingEffects];
|
||||||
|
pendingEffects.clear();
|
||||||
|
for (const e of effs) e._run();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// NEW: Algebraic Effects
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// Effects are composable, testable side-effect declarations.
|
||||||
|
// `perform(effectName, ...args)` throws to the nearest handler.
|
||||||
|
// `handle(fn, handlers)` installs effect handlers and runs fn.
|
||||||
|
|
||||||
|
const effectStack = [];
|
||||||
|
|
||||||
|
function perform(name, ...args) {
|
||||||
|
// Walk the handler stack to find a matching handler
|
||||||
|
for (let i = effectStack.length - 1; i >= 0; i--) {
|
||||||
|
const frame = effectStack[i];
|
||||||
|
if (frame.handlers[name]) {
|
||||||
|
return frame.handlers[name](...args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new Error(`Unhandled effect: ${name}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle(fn, handlers) {
|
||||||
|
const frame = { handlers };
|
||||||
|
effectStack.push(frame);
|
||||||
|
try {
|
||||||
|
return fn();
|
||||||
|
} finally {
|
||||||
|
effectStack.pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Async version for effects that return promises
|
||||||
|
async function handleAsync(fn, handlers) {
|
||||||
|
const frame = { handlers };
|
||||||
|
effectStack.push(frame);
|
||||||
|
try {
|
||||||
|
return await fn();
|
||||||
|
} finally {
|
||||||
|
effectStack.pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function performAsync(name, ...args) {
|
||||||
|
for (let i = effectStack.length - 1; i >= 0; i--) {
|
||||||
|
const frame = effectStack[i];
|
||||||
|
if (frame.handlers[name]) {
|
||||||
|
return await frame.handlers[name](...args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new Error(`Unhandled effect: ${name}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// NEW: Stream Engine
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// Streams are push-based async sequences that integrate
|
||||||
|
// with signals. A stream's latest value is a signal.
|
||||||
|
|
||||||
|
class Stream {
|
||||||
|
constructor(subscribe) {
|
||||||
|
this._subscribe = subscribe;
|
||||||
|
this._listeners = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Subscribe to values
|
||||||
|
listen(fn) {
|
||||||
|
const unsub = this._subscribe(fn);
|
||||||
|
this._listeners.push(fn);
|
||||||
|
return unsub || (() => {
|
||||||
|
this._listeners = this._listeners.filter(l => l !== fn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert to signal (latest value)
|
||||||
|
toSignal(initial) {
|
||||||
|
const sig = signal(initial);
|
||||||
|
this.listen(v => { sig.value = v; });
|
||||||
|
return sig;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Operators ──
|
||||||
|
|
||||||
|
map(fn) {
|
||||||
|
return new Stream(emit => this.listen(v => emit(fn(v))));
|
||||||
|
}
|
||||||
|
|
||||||
|
filter(pred) {
|
||||||
|
return new Stream(emit => this.listen(v => { if (pred(v)) emit(v); }));
|
||||||
|
}
|
||||||
|
|
||||||
|
debounce(ms) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let timer = null;
|
||||||
|
return this.listen(v => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => emit(v), ms);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
throttle(ms) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let last = 0;
|
||||||
|
return this.listen(v => {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - last >= ms) {
|
||||||
|
last = now;
|
||||||
|
emit(v);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
distinct() {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let prev = undefined;
|
||||||
|
return this.listen(v => {
|
||||||
|
if (v !== prev) { prev = v; emit(v); }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
take(n) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let count = 0;
|
||||||
|
return this.listen(v => {
|
||||||
|
if (count < n) { count++; emit(v); }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
scan(fn, seed) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let acc = seed;
|
||||||
|
return this.listen(v => {
|
||||||
|
acc = fn(acc, v);
|
||||||
|
emit(acc);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
flatMap(fn) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
let innerUnsub = null;
|
||||||
|
return this.listen(v => {
|
||||||
|
if (innerUnsub) innerUnsub();
|
||||||
|
const innerStream = fn(v);
|
||||||
|
innerUnsub = innerStream.listen(emit);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static merge(...streams) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
const unsubs = streams.map(s => s.listen(emit));
|
||||||
|
return () => unsubs.forEach(u => u());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static fromEvent(element, event) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
element.addEventListener(event, emit);
|
||||||
|
return () => element.removeEventListener(event, emit);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static fromSignal(sig) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
const eff = effect(() => emit(sig.value));
|
||||||
|
return () => eff.dispose();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static fromPromise(promise) {
|
||||||
|
return new Stream(emit => {
|
||||||
|
promise.then(v => emit(v)).catch(() => { });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
signal, derived, effect, batch, flush,
|
||||||
|
perform, handle, handleAsync, performAsync,
|
||||||
|
Stream
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// Search App — Algebraic Effects + Stream Pipeline
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
(() => {
|
||||||
|
const logEntries = DS.signal([]);
|
||||||
|
function log(type, msg) {
|
||||||
|
const now = new Date();
|
||||||
|
const time = now.toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||||
|
+ '.' + String(now.getMilliseconds()).padStart(3, '0');
|
||||||
|
logEntries.value = [...logEntries.value.slice(-50), { type, msg, time }];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mock data (simulating a backend) ──
|
||||||
|
const MOCK_DATA = [
|
||||||
|
{ title: 'Reactive Signals', desc: 'Fine-grained push-based reactivity without VDOM', tags: ['signals', 'reactive'] },
|
||||||
|
{ title: 'Algebraic Effects', desc: 'Composable, testable side-effects with perform/handle', tags: ['effects', 'side-effects'] },
|
||||||
|
{ title: 'Stream Engine', desc: 'Push-based async sequences with operators like debounce and flatMap', tags: ['streams', 'async'] },
|
||||||
|
{ title: 'Constraint Layout', desc: 'Cassowary-based constraint solver replacing CSS flexbox', tags: ['layout', 'constraints'] },
|
||||||
|
{ title: 'Spring Physics', desc: 'Interruptible physics-based animations at 60fps', tags: ['animation', 'springs'] },
|
||||||
|
{ title: 'Compile-Time Analysis', desc: 'Signal dependency graph extracted at compile time for optimal updates', tags: ['compiler', 'static-analysis'] },
|
||||||
|
{ title: 'Homoiconic AST', desc: 'Code and data share the same representation for live editing', tags: ['homoiconic', 'editor'] },
|
||||||
|
{ title: 'Zero Re-renders', desc: 'Direct DOM mutations driven by signal subscriptions — no diffing', tags: ['dom', 'performance'] },
|
||||||
|
{ title: 'Effect Handlers', desc: 'Install custom handlers for HTTP, storage, time, and more', tags: ['effects', 'handlers'] },
|
||||||
|
{ title: 'Stream Operators', desc: 'map, filter, debounce, throttle, distinct, scan, flatMap, merge', tags: ['streams', 'operators'] },
|
||||||
|
{ title: 'Dependent Types', desc: 'Refinement types catch errors at compile time', tags: ['types', 'safety'] },
|
||||||
|
{ title: 'Live Structural Editor', desc: 'Bidirectional editing — change code or drag UI', tags: ['editor', 'live'] },
|
||||||
|
{ title: 'WASM Runtime', desc: 'Core signal graph and layout engine compiled to WebAssembly', tags: ['wasm', 'performance'] },
|
||||||
|
{ title: 'Pattern Matching', desc: 'Exhaustive pattern matching with destructuring', tags: ['language', 'patterns'] },
|
||||||
|
{ title: 'Pipe Operator', desc: 'Chain transformations with |> for readable data flow', tags: ['language', 'operators'] },
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── Effect declarations ──
|
||||||
|
// The search function performs an "Http" effect.
|
||||||
|
// Different handlers can provide different implementations:
|
||||||
|
// - Production: fetch from real API
|
||||||
|
// - Test: return mock data instantly
|
||||||
|
// - Demo: simulate network delay
|
||||||
|
|
||||||
|
async function search(query) {
|
||||||
|
log('effect', `perform Http.search("${query}")`);
|
||||||
|
const results = await DS.performAsync('Http.search', query);
|
||||||
|
log('handler', `← received ${results.length} results`);
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Effect Handlers ──
|
||||||
|
|
||||||
|
// Demo handler: simulates network with delay + fuzzy search
|
||||||
|
const demoHandler = {
|
||||||
|
'Http.search': async (query) => {
|
||||||
|
log('handler', `DemoHandler: simulating 300ms network delay...`);
|
||||||
|
await new Promise(r => setTimeout(r, 300));
|
||||||
|
const q = query.toLowerCase();
|
||||||
|
return MOCK_DATA.filter(item =>
|
||||||
|
item.title.toLowerCase().includes(q) ||
|
||||||
|
item.desc.toLowerCase().includes(q) ||
|
||||||
|
item.tags.some(t => t.includes(q))
|
||||||
|
).map(item => ({
|
||||||
|
...item,
|
||||||
|
highlight: highlightMatch(item.title, query),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Test handler: instant results, no delay
|
||||||
|
const testHandler = {
|
||||||
|
'Http.search': (query) => {
|
||||||
|
log('handler', `TestHandler: instant mock response`);
|
||||||
|
const q = query.toLowerCase();
|
||||||
|
return MOCK_DATA.filter(item =>
|
||||||
|
item.title.toLowerCase().includes(q)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function highlightMatch(text, query) {
|
||||||
|
if (!query) return text;
|
||||||
|
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||||
|
if (idx === -1) return text;
|
||||||
|
return text.slice(0, idx) + '<mark>' + text.slice(idx, idx + query.length) + '</mark>' + text.slice(idx + query.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Signals ──
|
||||||
|
const query = DS.signal('');
|
||||||
|
const results = DS.signal([]);
|
||||||
|
const loading = DS.signal(false);
|
||||||
|
const error = DS.signal(null);
|
||||||
|
const resultCount = DS.derived(() => results.value.length);
|
||||||
|
const searchCount = DS.signal(0);
|
||||||
|
|
||||||
|
// ── Stream Pipeline ──
|
||||||
|
// input events → debounce 250ms → distinct → flatMap(search)
|
||||||
|
// This is the core stream pipeline: real streaming data flow
|
||||||
|
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
|
||||||
|
// Header
|
||||||
|
const header = document.createElement('div');
|
||||||
|
header.className = 'header';
|
||||||
|
header.innerHTML = '<h1 class="title">search</h1><p class="subtitle">Effects + Streams — debounced, cancellable, testable</p>';
|
||||||
|
app.appendChild(header);
|
||||||
|
|
||||||
|
// Search input
|
||||||
|
const searchBox = document.createElement('div');
|
||||||
|
searchBox.className = 'search-box';
|
||||||
|
const searchIcon = document.createElement('span');
|
||||||
|
searchIcon.className = 'search-icon';
|
||||||
|
searchIcon.textContent = '⌕';
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.className = 'search-input';
|
||||||
|
input.placeholder = 'Search DreamStack features...';
|
||||||
|
input.autofocus = true;
|
||||||
|
searchBox.appendChild(searchIcon);
|
||||||
|
searchBox.appendChild(input);
|
||||||
|
app.appendChild(searchBox);
|
||||||
|
|
||||||
|
// Status bar
|
||||||
|
const statusBar = document.createElement('div');
|
||||||
|
statusBar.className = 'status-bar';
|
||||||
|
const statusDot = document.createElement('div');
|
||||||
|
statusDot.className = 'status-dot';
|
||||||
|
const statusText = document.createElement('span');
|
||||||
|
statusBar.appendChild(statusDot);
|
||||||
|
statusBar.appendChild(statusText);
|
||||||
|
app.appendChild(statusBar);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
const l = loading.value;
|
||||||
|
const r = results.value;
|
||||||
|
const q = query.value;
|
||||||
|
const e = error.value;
|
||||||
|
|
||||||
|
statusDot.className = 'status-dot' + (l ? ' loading' : e ? ' error' : r.length > 0 ? ' success' : '');
|
||||||
|
if (l) {
|
||||||
|
statusText.textContent = 'Searching...';
|
||||||
|
} else if (e) {
|
||||||
|
statusText.textContent = `Error: ${e}`;
|
||||||
|
} else if (q && r.length > 0) {
|
||||||
|
statusText.textContent = `${r.length} results for "${q}" (${searchCount.value} searches)`;
|
||||||
|
} else if (q) {
|
||||||
|
statusText.textContent = `No results for "${q}"`;
|
||||||
|
} else {
|
||||||
|
statusText.textContent = 'Type to search — results debounced at 250ms';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Results list
|
||||||
|
const resultsCard = document.createElement('div');
|
||||||
|
resultsCard.className = 'results-card';
|
||||||
|
app.appendChild(resultsCard);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
const r = results.value;
|
||||||
|
const q = query.value;
|
||||||
|
const l = loading.value;
|
||||||
|
resultsCard.innerHTML = '';
|
||||||
|
|
||||||
|
if (!q && !l) {
|
||||||
|
resultsCard.innerHTML = '<div class="empty-state">Start typing to search DreamStack features</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (l) {
|
||||||
|
resultsCard.innerHTML = '<div class="empty-state">⏳ Loading...</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (r.length === 0) {
|
||||||
|
resultsCard.innerHTML = `<div class="empty-state">No results for "${q}"</div>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const item of r) {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'result-item';
|
||||||
|
|
||||||
|
const titleEl = document.createElement('div');
|
||||||
|
titleEl.className = 'result-title';
|
||||||
|
titleEl.innerHTML = item.highlight || item.title;
|
||||||
|
|
||||||
|
const descEl = document.createElement('div');
|
||||||
|
descEl.className = 'result-desc';
|
||||||
|
descEl.textContent = item.desc;
|
||||||
|
|
||||||
|
const metaEl = document.createElement('div');
|
||||||
|
metaEl.className = 'result-meta';
|
||||||
|
metaEl.textContent = item.tags.map(t => `#${t}`).join(' ');
|
||||||
|
|
||||||
|
el.appendChild(titleEl);
|
||||||
|
el.appendChild(descEl);
|
||||||
|
el.appendChild(metaEl);
|
||||||
|
resultsCard.appendChild(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Effect log
|
||||||
|
const logContainer = document.createElement('div');
|
||||||
|
logContainer.className = 'effect-log';
|
||||||
|
app.appendChild(logContainer);
|
||||||
|
|
||||||
|
DS.effect(() => {
|
||||||
|
const entries = logEntries.value;
|
||||||
|
logContainer.innerHTML = '';
|
||||||
|
for (const entry of entries) {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'log-entry';
|
||||||
|
const typeClass = entry.type === 'effect' ? 'effect-name'
|
||||||
|
: entry.type === 'stream' ? 'stream-op'
|
||||||
|
: 'handler';
|
||||||
|
el.innerHTML = `<span class="time">${entry.time}</span> <span class="${typeClass}">[${entry.type}]</span> ${entry.msg}`;
|
||||||
|
logContainer.appendChild(el);
|
||||||
|
}
|
||||||
|
logContainer.scrollTop = logContainer.scrollHeight;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Legend
|
||||||
|
const legend = document.createElement('div');
|
||||||
|
legend.className = 'legend';
|
||||||
|
[
|
||||||
|
['#8b5cf6', 'perform (effect)'],
|
||||||
|
['#22d3ee', 'stream operator'],
|
||||||
|
['#22c55e', 'handler (response)'],
|
||||||
|
].forEach(([color, label]) => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'legend-item';
|
||||||
|
const dot = document.createElement('div');
|
||||||
|
dot.className = 'legend-dot';
|
||||||
|
dot.style.background = color;
|
||||||
|
const text = document.createElement('span');
|
||||||
|
text.textContent = label;
|
||||||
|
item.appendChild(dot);
|
||||||
|
item.appendChild(text);
|
||||||
|
legend.appendChild(item);
|
||||||
|
});
|
||||||
|
app.appendChild(legend);
|
||||||
|
|
||||||
|
// Powered by
|
||||||
|
const powered = document.createElement('div');
|
||||||
|
powered.className = 'powered-by';
|
||||||
|
powered.innerHTML = 'Built with <span>DreamStack</span> — algebraic effects + streams';
|
||||||
|
app.appendChild(powered);
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
// Wire up the stream pipeline
|
||||||
|
// ═══════════════════════════════════════════════════════
|
||||||
|
const inputStream = DS.Stream.fromEvent(input, 'input')
|
||||||
|
.map(e => {
|
||||||
|
log('stream', `input → "${e.target.value}"`);
|
||||||
|
return e.target.value;
|
||||||
|
})
|
||||||
|
.debounce(250)
|
||||||
|
.map(v => { log('stream', `debounce(250ms) → "${v}"`); return v; })
|
||||||
|
.distinct()
|
||||||
|
.map(v => { log('stream', `distinct → "${v}"`); return v; });
|
||||||
|
|
||||||
|
// flatMap: each new query cancels the previous search
|
||||||
|
let currentSearchId = 0;
|
||||||
|
|
||||||
|
inputStream.listen(async (q) => {
|
||||||
|
const id = ++currentSearchId;
|
||||||
|
query.value = q;
|
||||||
|
|
||||||
|
if (!q.trim()) {
|
||||||
|
results.value = [];
|
||||||
|
loading.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
log('stream', `flatMap → starting search #${id}`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Use algebraic effects! The handler is swappable.
|
||||||
|
const r = await DS.handleAsync(
|
||||||
|
() => search(q),
|
||||||
|
demoHandler // Swap to testHandler for instant results
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only update if this is still the current search (cancel stale)
|
||||||
|
if (id === currentSearchId) {
|
||||||
|
DS.batch(() => {
|
||||||
|
results.value = r;
|
||||||
|
loading.value = false;
|
||||||
|
searchCount.value = searchCount.value + 1;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
log('stream', `search #${id} cancelled (superseded by #${currentSearchId})`);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (id === currentSearchId) {
|
||||||
|
DS.batch(() => {
|
||||||
|
error.value = err.message;
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Log initial state
|
||||||
|
log('effect', 'DreamStack v0.2.0 — Effects + Streams');
|
||||||
|
log('effect', 'Effect handlers installed: Http.search → DemoHandler');
|
||||||
|
log('stream', 'Pipeline: input → debounce(250ms) → distinct → flatMap(search)');
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue