+
This panel shows the event log — every state transaction, every source change, every derived recomputation. In a real app, this is what you'd see in the Symphony DevTools.
@@ -345,11 +370,11 @@ export const LiveWidget = () => {
{events.map((evt) => (
-
+
{evt.label}
+ {evt.label}
))}
diff --git a/demo/src/components/landing/OrchestraVisual.tsx b/demo/src/components/landing/OrchestraVisual.tsx
index 691ccf0..15ba4a2 100644
--- a/demo/src/components/landing/OrchestraVisual.tsx
+++ b/demo/src/components/landing/OrchestraVisual.tsx
@@ -1,129 +1,60 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-type Instrument = {
- id: string;
- label: string;
- color: string;
- icon: string;
- role: string;
-};
-
-const instruments: Instrument[] = [
- { id: "server", label: "Server Cache", color: "var(--color-source-server)", icon: "⬡", role: "TanStack Query / SWR" },
- { id: "ui", label: "UI State", color: "var(--color-source-ui)", icon: "◈", role: "Local component state" },
- { id: "url", label: "URL Params", color: "var(--color-source-url)", icon: "⬢", role: "Search params / routing" },
- { id: "persisted", label: "Persistence", color: "var(--color-source-persisted)", icon: "◉", role: "localStorage / IndexedDB" },
+const sources = [
+ { label: "Server cache", role: "TanStack Query / SWR" },
+ { label: "UI state", role: "Local component state" },
+ { label: "URL params", role: "Search params / routing" },
+ { label: "Persistence", role: "localStorage / IndexedDB" },
];
export const OrchestraVisual = () => {
- const [activeIndex, setActiveIndex] = useState(-1);
- const [wave, setWave] = useState(false);
-
- useEffect(() => {
- const interval = setInterval(() => {
- setActiveIndex((i) => {
- if (i >= instruments.length - 1) {
- setWave(true);
- setTimeout(() => setWave(false), 800);
- return -1;
- }
- return i + 1;
- });
- }, 1200);
- return () => clearInterval(interval);
- }, []);
-
return (
-
-
-
- Architecture
-
-
- Four sources, one conductor
-
+
+
+
+
Architecture / 01
+
+ Four sources. One score.
+
+
+ Keep each store independent. Symphony State stages their updates, resolves dependencies, and commits one consistent view.
+
+
-
- {/* Instruments row */}
-
- {instruments.map((inst, i) => (
-
-
- {inst.icon}
-
-
-
{inst.label}
-
{inst.role}
-
+
+
+
+ {sources.map((source, index) => (
+
+
+ {String(index + 1).padStart(2, "0")}
+
+
+ {source.label}
+ {source.role}
+
+
+ ))}
+
+
+
+
Conductor
+
+
+
Symphony State
+
+ Stage → reconcile → derive → commit
+
- ))}
-
-
- {/* Connection lines */}
-
- {instruments.map((inst, i) => (
-
- ))}
-
-
- {/* Conductor */}
-
-
- 🎼
-
-
-
Conductor
-
Symphony State
+
+ Deterministic / observable
+
-
- {/* Output */}
-
-
→
-
deterministic, single-wave commit
-
→
-
UI
+
+ Independent inputs
+ Single-wave commit → UI
diff --git a/demo/src/components/shared/Navigation.tsx b/demo/src/components/shared/Navigation.tsx
index fb34814..06da61d 100644
--- a/demo/src/components/shared/Navigation.tsx
+++ b/demo/src/components/shared/Navigation.tsx
@@ -4,56 +4,55 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
const links = [
- { href: "/", label: "Home" },
{ href: "/demo/inventory", label: "Demo" },
{ href: "/playground", label: "Playground" },
- { href: "/docs/mental-model", label: "Mental Model" },
];
export const Navigation = () => {
const pathname = usePathname();
return (
-
-
-
-
- S
+
+
+
+ shiftbloom studio.
+
+
+ / symphony state
- symphony-state
- demo
-
+
{links.map((link) => {
- const active = pathname === link.href;
+ const active = pathname === link.href || pathname.startsWith(`${link.href}/`);
return (
{link.label}
+ {active ? (
+
+ ) : null}
);
})}
-
-
- Impressum
-
+ GitHub ↗
+
-
+
+
);
};
diff --git a/docs/assets/symphony-state-banner.svg b/docs/assets/symphony-state-banner.svg
new file mode 100644
index 0000000..3a1a25a
--- /dev/null
+++ b/docs/assets/symphony-state-banner.svg
@@ -0,0 +1,54 @@
+
+ Symphony State by shiftbloom studio
+ Every state source, in concert.
+
+
+
+
+
+
+
+
+
+
+
+ shiftbloom studio.
+ OPEN SOURCE / 2026
+
+
+
+
+
+
+
+
+
+ symphony
+ state.
+ Every state source, in concert.
+ REACT 19 · TYPESCRIPT · APACHE-2.0
+ HAMBURG · 53.55° N, 9.99° E
+
+
