tools/render_domain_registry.py · cgcardona/muse

{"type": "GCounter", "sub": "Grow-Only Distributed Counter", "color": "#3fb950", "icon": _ICONS["arrow-up"], "output": gc_out, "html_output": gc_html},

260

{"type": "VectorClock", "sub": "Causal Ordering", "color": "#f9a825", "icon": _ICONS["git-branch"], "output": vc_out, "html_output": vc_html},

261

{"type": "RGA", "sub": "Replicated Growable Array", "color": "#f9a825", "icon": _ICONS["layers"], "output": rga_out, "html_output": rga_html},

262

{"type": "AWMap", "sub": "Add-Wins Map", "color": "#3fb950", "icon": _ICONS["code"], "output": awmap_out, "html_output": awmap_html},

263

]

264

except Exception as exc:

265

print(f" ⚠ CRDT demo failed ({exc}); using static fallback")

return []

def _load_domains() -> list[dict]:

270

"""Run `muse domains --json` and return parsed output."""

271

try:

272

result = subprocess.run(

273

[sys.executable, "-m", "muse", "domains", "--json"],

capture_output=True,

text=True,

cwd=str(_ROOT),

timeout=15,

)

if result.returncode == 0:

280

raw = result.stdout.strip()

281

data: list[dict] = json.loads(raw)

return data

except Exception:

pass

# Fallback: static reference data

return [

{

"domain": "midi",

"active": "true",

"capabilities": ["Typed Deltas", "Domain Schema", "OT Merge", "CRDT Primitives", "MidiRGA"],

292

"schema": {

293

"schema_version": "1",

294

"merge_mode": "three_way",

295

"description": "MIDI file versioning with 21-dimension structured merge — notes, CC, pitch bend, tempo, time signatures, and more. Each dimension merges independently. MidiRGA provides voice-aware CRDT ordering (bass→tenor→alto→soprano) for concurrent note edits.",

296

"dimensions": [

297

{"name": "notes", "description": "Note-on/off events (pitch, velocity, channel, timing)"},

298

{"name": "control_change", "description": "CC curves: modulation, sustain, expression, pan"},

299

{"name": "pitch_bend", "description": "Pitch bend envelope per channel"},

300

{"name": "tempo", "description": "Tempo map (BPM changes over time)"},

301

{"name": "time_signature", "description": "Metre changes across the piece"},

302

{"name": "key_signature", "description": "Key and mode declarations"},

303

{"name": "program_change", "description": "Instrument (patch) assignments per channel"},

304

{"name": "aftertouch", "description": "Channel and polyphonic pressure"},

305

{"name": "sysex", "description": "System-exclusive device messages"},

306

{"name": "track_name", "description": "Human-readable track labels"},

],

},

},

{

"domain": "code",

"active": "true",

"capabilities": ["Typed Deltas", "Domain Schema", "OT Merge", ".museattributes"],

314

"schema": {

315

"schema_version": "1",

316

"merge_mode": "symbol_ot",

317

"description": "Source-code versioning with symbol-level operational-transform merge. Tree-sitter parses 11 languages into ASTs; functions, classes, and imports merge independently. .museattributes gives per-path strategy control.",

318

"dimensions": [

319

{"name": "functions", "description": "Function and method definitions"},

320

{"name": "classes", "description": "Class and struct declarations"},

321

{"name": "imports", "description": "Import and module-level declarations"},

322

{"name": "variables", "description": "Module-level variable and constant assignments"},

323

{"name": "expressions", "description": "Top-level expression statements"},

],

},

},

]

# ---------------------------------------------------------------------------

331

# Scaffold template (shown in the "Build in 3 steps" section)

332

# ---------------------------------------------------------------------------

333

334

_TYPED_DELTA_EXAMPLE = """\

335

# muse show --json (any commit, any domain)

336

{

337

"commit_id": "b26f3c99",

338

"message": "Resolve: integrate shared-state (A+B reconciled)",

339

"operations": [

340

{

341

"op_type": "ReplaceOp",

342

"address": "shared-state.mid",

343

"before_hash": "a1b2c3d4",

344

"after_hash": "e5f6g7h8",

345

"dimensions": ["structural"]

346

},

347

{

348

"op_type": "InsertOp",

349

"address": "beta-a.mid",

350

"after_hash": "09ab1234",

351

"dimensions": ["rhythmic", "dynamic"]

}

],

"summary": {

"inserted": 1,

"replaced": 1,

"deleted": 0

}

}"""

_SCAFFOLD_SNIPPET = """\

363

from muse.domain import (

364

MuseDomainPlugin, LiveState, StateSnapshot,

365

StateDelta, DriftReport, MergeResult, DomainSchema,

366

)

367

368

class GenomicsPlugin(MuseDomainPlugin):

369

\"\"\"Version control for genomic sequences.\"\"\"

370

371

def snapshot(self, live_state: LiveState) -> StateSnapshot:

372

# Serialize current genome state to a content-addressable blob

373

raise NotImplementedError

374

375

def diff(self, base: StateSnapshot,

376

target: StateSnapshot) -> StateDelta:

377

# Compute minimal delta between two snapshots

378

raise NotImplementedError

379

380

def merge(self, base: StateSnapshot,

381

left: StateSnapshot,

382

right: StateSnapshot) -> MergeResult:

383

# Three-way merge — surface conflicts per dimension

384

raise NotImplementedError

385

386

def drift(self, committed: StateSnapshot,

387

live: LiveState) -> DriftReport:

388

# Detect uncommitted changes in the working state

389

raise NotImplementedError

390

391

def apply(self, delta: StateDelta,

392

live_state: LiveState) -> LiveState:

393

# Reconstruct historical state from a delta

394

raise NotImplementedError

395

396

def schema(self) -> DomainSchema:

397

# Declare dimensions — drives diff algorithm selection

398

raise NotImplementedError

399

"""

400

401

# ---------------------------------------------------------------------------

402

# SVG icon library — Lucide/Feather style, stroke="currentColor", no fixed size

403

# ---------------------------------------------------------------------------

404

405

def _icon(paths: str) -> str:

406

"""Wrap SVG paths in a standard icon shell."""

407

return (

408

'<svg class="icon" viewBox="0 0 24 24" fill="none" '

409

'stroke="currentColor" stroke-width="1.75" '

410

'stroke-linecap="round" stroke-linejoin="round">'

+ paths

+ "</svg>"

)

_ICONS: dict[str, str] = {

417

# Domains

418

"midi": _icon('<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>'),

419

"genomics": _icon('<path d="M2 15c6.667-6 13.333 0 20-6"/><path d="M2 9c6.667 6 13.333 0 20 6"/><line x1="5.5" y1="11" x2="5.5" y2="13"/><line x1="18.5" y1="11" x2="18.5" y2="13"/>'),

420

"cube": _icon('<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'),

421

"trending": _icon('<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>'),

422

"atom": _icon('<circle cx="12" cy="12" r="1"/><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5z"/><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5z"/>'),

423

"plus": _icon('<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>'),

424

"activity": _icon('<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>'),

425

"pen-tool": _icon('<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/>'),

426

# Distribution

427

"terminal": _icon('<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>'),

428

"package": _icon('<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'),

429

"globe": _icon('<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'),

430

# Engine capabilities

431

"code": _icon('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'),

432

"layers": _icon('<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>'),

433

"git-merge": _icon('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/>'),

434

"zap": _icon('<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>'),

435

# MuseHub features

436

"search": _icon('<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'),

437

"lock": _icon('<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>'),

438

# CRDT primitives

439

"union": _icon('<path d="M5 5v8a7 7 0 0 0 14 0V5"/><line x1="3" y1="19" x2="21" y2="19"/>'),

440

"edit": _icon('<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>'),

441

"arrow-up": _icon('<line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>'),

442

"git-branch": _icon('<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>'),

443

# OT scenario outcome badges

444

"check-circle":_icon('<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>'),

445

"x-circle": _icon('<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>'),

}

# ---------------------------------------------------------------------------

450

# Planned / aspirational domains

451

# ---------------------------------------------------------------------------

_PLANNED_DOMAINS = [

{

"name": "Genomics",

"icon": _ICONS["genomics"],

457

"status": "planned",

458

"tagline": "Version sequences, variants, and annotations",

459

"dimensions": ["sequence", "variants", "annotations", "metadata"],

"color": "#3fb950",

},

{

"name": "3D / Spatial",

464

"icon": _ICONS["cube"],

465

"status": "planned",

466

"tagline": "Merge spatial fields, meshes, and simulation frames",

467

"dimensions": ["geometry", "materials", "physics", "temporal"],

"color": "#58a6ff",

},

{

"name": "Financial",

"icon": _ICONS["trending"],

473

"status": "planned",

474

"tagline": "Track model versions, alpha signals, and risk state",

475

"dimensions": ["signals", "positions", "risk", "parameters"],

"color": "#f9a825",

},

{

"name": "Scientific Simulation",

480

"icon": _ICONS["atom"],

481

"status": "planned",

482

"tagline": "Snapshot simulation state across timesteps and parameter spaces",

483

"dimensions": ["state", "parameters", "observables", "checkpoints"],

"color": "#ab47bc",

},

{

"name": "Your Domain",

488

"icon": _ICONS["plus"],

489

"status": "yours",

490

"tagline": "Six methods. Any multidimensional state. Full VCS for free.",

491

"dimensions": ["your_dim_1", "your_dim_2", "..."],

"color": "#4f8ef7",

},

]

# ---------------------------------------------------------------------------

497

# Distribution model description

498

# ---------------------------------------------------------------------------

499

500

_DISTRIBUTION_LEVELS = [

501

{

502

"tier": "Local",

503

"icon": _ICONS["terminal"],

504

"title": "Local plugin (right now)",

505

"color": "#3fb950",

506

"steps": [

507

"muse domains --new <name>",

508

"Implement 6 methods in muse/plugins/<name>/plugin.py",

509

"Register in muse/plugins/registry.py",

510

"muse init --domain <name>",

511

],

512

"desc": "Works today. Scaffold → implement → register. "

513

"Your plugin lives alongside the core.",

},

{

"tier": "Shareable",

"icon": _ICONS["package"],

518

"title": "pip-installable package (right now)",

519

"color": "#58a6ff",

520

"steps": [

521

"Package your plugin as a Python module",

522

"pip install git+https://github.com/you/muse-plugin-genomics",

523

"Register the entry-point in pyproject.toml",

524

"muse init --domain genomics",

525

],

526

"desc": "Share your plugin as a standard Python package. "

527

"Anyone with pip can install and use it.",

},

{

"tier": "MuseHub",

"icon": _ICONS["globe"],

532

"title": "Centralized registry (coming — MuseHub)",

533

"color": "#bc8cff",

534

"steps": [

535

"musehub publish muse-plugin-genomics",

536

"musehub search genomics",

537

"muse init --domain @musehub/genomics",

538

"Browse plugins at musehub.io",

539

],

540

"desc": "MuseHub is a planned centralized registry — npm for Muse plugins. "

541

"Versioned, searchable, one-command install.",

},

]

# ---------------------------------------------------------------------------

547

# HTML template

548

# ---------------------------------------------------------------------------

549

550

def _render_capability_card(cap: dict) -> str:

color = cap["color"]

body = (

cap["html_output"]

if "html_output" in cap

555

else f'<pre class="cap-showcase-output">{cap["output"]}</pre>'

)

return f"""

{cap['icon']} {cap['type']}

</span>

</div>

{body}

</div>

</div>"""

def _render_domain_card(d: dict) -> str:

572

domain = d.get("domain", "unknown")

573

active = d.get("active") == "true"

574

schema = d.get("schema", {})

575

desc = schema.get("description", "")

576

dims = schema.get("dimensions", [])

577

caps = d.get("capabilities", [])

578

579

cap_html = " ".join(

580

f'<span class="cap-pill cap-{c.lower().replace(" ","-")}">{c}</span>'

581

for c in caps

582

)

583

dim_html = " · ".join(

584

f'<span class="dim-tag">{dim["name"]}</span>' for dim in dims

585

)

586

587

status_cls = "active-badge" if active else "reg-badge"

588

status_text = "● active" if active else "○ registered"

589

dot = '<span class="active-dot"></span>' if active else ""

590

591

short_desc = desc[:150] + ("…" if len(desc) > 150 else "")

return f"""

<span class="{status_cls}">{status_text}</span>

597

<span class="domain-name-lg">{domain}</span>

{dot}

</div>

<p class="domain-desc">{short_desc}</p>

602

603

<div class="dim-row"><strong>Dimensions:</strong> {dim_html}</div>

</div>

</div>"""

def _render_planned_card(p: dict) -> str:

609

dims = " · ".join(f'<span class="dim-tag">{d}</span>' for d in p["dimensions"])

610

cls = "planned-card yours" if p["status"] == "yours" else "planned-card"

return f"""

<div class="planned-tag">{p['tagline']}</div>

616

617

{'<a class="cta-btn" href="#build">Build it →</a>' if p["status"] == "yours" else '<span class="coming-soon">coming soon</span>'}

</div>"""

def _render_dist_card(d: dict) -> str:

622

steps = "".join(

623

f'<li><code>{s}</code></li>' for s in d["steps"]

)

return f"""

<div>

<div class="dist-title">{d['title']}</div>

</div>

</div>

<ol class="dist-steps">{steps}</ol>

</div>"""

def render(output_path: pathlib.Path) -> None:

640

"""Generate the domain registry HTML page."""

641

print(" Loading live domain data...")

642

domains = _load_domains()

643

print(f" Found {len(domains)} registered domain(s)")

644

645

print(" Computing live CRDT demos...")

646

crdt_demos = _compute_crdt_demos()

647

648

active_domains_html = "\n".join(_render_domain_card(d) for d in domains)

649

planned_html = "\n".join(_render_planned_card(p) for p in _PLANNED_DOMAINS)

650

dist_html = "\n".join(_render_dist_card(d) for d in _DISTRIBUTION_LEVELS)

651

crdt_cards_html = "\n".join(_render_capability_card(c) for c in crdt_demos)

652

653

html = _HTML_TEMPLATE.replace("{{ACTIVE_DOMAINS}}", active_domains_html)

654

html = html.replace("{{PLANNED_DOMAINS}}", planned_html)

655

html = html.replace("{{DIST_CARDS}}", dist_html)

656

html = html.replace("{{SCAFFOLD_SNIPPET}}", _SCAFFOLD_SNIPPET)

657

html = html.replace("{{TYPED_DELTA_EXAMPLE}}", _TYPED_DELTA_EXAMPLE)

658

html = html.replace("{{CRDT_CARDS}}", crdt_cards_html)

659

html = html.replace("{{DIFF_ALGEBRA}}", _DIFF_ALGEBRA_HTML)

660

661

# Inject SVG icons into template placeholders

662

_ICON_SLOTS: dict[str, str] = {

663

"MUSIC": _ICONS["midi"],

664

"GENOMICS": _ICONS["genomics"],

665

"CUBE": _ICONS["cube"],

666

"TRENDING": _ICONS["trending"],

667

"ATOM": _ICONS["atom"],

668

"PLUS": _ICONS["plus"],

669

"ACTIVITY": _ICONS["activity"],

670

"PEN_TOOL": _ICONS["pen-tool"],

671

"CODE": _ICONS["code"],

672

"LAYERS": _ICONS["layers"],

673

"GIT_MERGE": _ICONS["git-merge"],

674

"ZAP": _ICONS["zap"],

675

"GLOBE": _ICONS["globe"],

676

"SEARCH": _ICONS["search"],

677

"PACKAGE": _ICONS["package"],

678

"LOCK": _ICONS["lock"],

679

"CHECK_CIRCLE": _ICONS["check-circle"],

680

"X_CIRCLE": _ICONS["x-circle"],

681

}

682

for slot, svg in _ICON_SLOTS.items():

683

html = html.replace(f"{{{{ICON_{slot}}}}}", svg)

684

685

output_path.write_text(html, encoding="utf-8")

686

size_kb = output_path.stat().st_size // 1024

687

print(f" HTML written ({size_kb}KB) → {output_path}")

688

689

# Also write as index.html so the domain registry IS the landing page.

690

index_path = output_path.parent / "index.html"

691

index_path.write_text(html, encoding="utf-8")

692

print(f" Landing page mirrored → {index_path}")

693

694

695

# ---------------------------------------------------------------------------

696

# Diff Algebra section — five algorithm visualizations + StructuredDelta flow

697

# ---------------------------------------------------------------------------

698

699

_DIFF_ALGEBRA_HTML = """

700

701

702

<div class="section-eyebrow">Diff Algebra</div>

703

<h2>Five Algebras. One Typed Result.</h2>

704

705

The engine selects the algorithm per dimension from your plugin’s

706

<code>schema()</code>. You declare the shape — the engine handles identity,

707

diffing, and merge selection automatically.

</p>

713

714

715

<span class="da-chip da-chip-seq">Sequence</span>

716

<span class="da-algo-name">Myers / LCS on SHA-256 IDs</span>

717

</div>

718

<div class="da-domains-row">notes · nucleotides · animation frames · git objects</div>

719

720

721

<div class="seq-row-lbl">before</div>

</div>

<div class="seq-op-cell"><span class="da-op da-op-match">= match</span></div>

730

<div class="seq-op-cell"><span class="da-op da-op-delete">× DeleteOp</span></div>

731

<div class="seq-op-cell"><span class="da-op da-op-match">= match</span></div>

732

<div class="seq-op-cell"><span class="da-op da-op-move">↓ MoveOp</span></div>

</div>

</div>

<div class="seq-op-cell"><span class="da-op da-op-insert">+ InsertOp</span></div>

744

745

<div class="seq-op-cell"><span class="da-op da-op-insert">+ InsertOp</span></div>

746

<div class="seq-op-cell"><span class="da-op da-op-move">↑ arrived</span></div>

747

</div>

748

<div class="seq-row-lbl">after</div>

749

</div>

750

</div>

751

<div class="da-note">Identity is hash-based: two elements are equal iff their SHA-256 hashes match — content is never inspected by the core. Delete + insert pairs sharing the same hash are collapsed into MoveOps in a post-pass.</div>

</div>

<span class="da-algo-name">Zhang-Shasha / GumTree</span>

759

</div>

760

<div class="da-domains-row">scene graphs · ASTs · track hierarchies</div>

<text x="52" y="9" text-anchor="middle" font-size="7" fill="#484f58" font-family="monospace" font-weight="700">BEFORE</text>

<text x="52" y="25" text-anchor="middle" font-size="8" fill="#58a6ff" font-family="monospace">session</text>

772

773

<text x="24" y="70" text-anchor="middle" font-size="8" fill="#8b949e" font-family="monospace">intro</text>

774

775

<text x="80" y="70" text-anchor="middle" font-size="8" fill="#8b949e" font-family="monospace">verse</text>

<text x="143" y="126" text-anchor="middle" font-size="6.5" fill="#484f58" font-family="monospace">MoveOp + InsertOp</text>

785

786

<text x="216" y="9" text-anchor="middle" font-size="7" fill="#484f58" font-family="monospace" font-weight="700">AFTER</text>

<text x="216" y="25" text-anchor="middle" font-size="8" fill="#58a6ff" font-family="monospace">session</text>

795

796

<text x="183" y="70" text-anchor="middle" font-size="8" fill="#8b949e" font-family="monospace">intro</text>

797

798

<text x="249" y="70" text-anchor="middle" font-size="8" fill="#8b949e" font-family="monospace">verse</text>

<text x="166" y="122" font-size="6" fill="#bc8cff" font-family="monospace">moved</text>

809

810

<text x="214" y="122" font-size="6" fill="#3fb950" font-family="monospace">inserted</text>

811

</svg>

812

</div>

813

<div class="da-note">Edit distance over node hierarchy — moves preserve subtree identity across parent changes.</div>

</div>

<span class="da-chip da-chip-tensor">Tensor</span>

820

<span class="da-algo-name">Sparse / block numerical diff</span>

821

</div>

822

<div class="da-domains-row">sim state · voxel grids · weight matrices</div>

</div>

</div>

</div>

</div>

</div>

<span class="tl-item"><span class="tl-swatch tl-warm"></span>|Δ| ≤ ε (within threshold)</span>

848

<span class="tl-item"><span class="tl-swatch tl-hot"></span>|Δ| > ε → PatchOp</span>

849

</div>

850

</div>

851

<div class="da-note">Configurable ε threshold. Sparse mode records only changed blocks — efficient for large tensors.</div>

</div>

<span class="da-algo-name">Set algebra · add / remove</span>

859

</div>

860

<div class="da-domains-row">annotations · tags · gene ontology terms</div>

<div class="set-header">before</div>

</div>

</div>

</div>

<div class="set-header">after</div>

</div>

</div>

</div>

</div>

<div class="da-note">Unordered — no position tracking. Pure membership delta: {removed} and {added}.</div>

</div>

<span class="da-algo-name">Recursive key-by-key delegation</span>

898

</div>

899

<div class="da-domains-row">metadata · configs · nested structures</div>

<span class="map-key">tempo</span>

904

905

<span class="map-sub-algo da-chip-tensor">scalar → PatchOp</span>

906

</div>

907

908

<span class="map-key">notes</span>

909

910

<span class="map-sub-algo da-chip-seq">sequence → LCS</span>

</div>

<span class="map-sub-algo da-chip-set">set → algebra</span>

916

</div>

917

918

<span class="map-key">author</span>

919

920

<span style="margin-left:auto;font-size:9px;color:var(--dim);font-family:var(--mono)">unchanged</span>

</div>

</div>

</div>

<div class="da-note">Each key is diffed by whichever algorithm matches its declared type — recursively, to arbitrary depth.</div>

925

</div>

926

927

</div>

928

929

930

931

932

<span class="da-delta-label">diff() → StructuredDelta</span>

933

<span class="da-delta-sub">all five algorithms produce the same typed operation list</span>

934

</div>

935

936

<span class="da-dop da-dop-ins">InsertOp</span>

937

<span class="da-dop da-dop-del">DeleteOp</span>

938

<span class="da-dop da-dop-mov">MoveOp</span>

939

<span class="da-dop da-dop-rep">ReplaceOp</span>

940

<span class="da-dop da-dop-pat">PatchOp</span>

</div>

<div class="da-merge-mode-label">merge_mode: “three_way”</div>

945

<div class="da-merge-desc">Operational Transformation — independent ops commute automatically; conflicting ops surface for human resolution</div>

</div>

<div class="da-merge-mode-label">merge_mode: “crdt”</div>

950

<div class="da-merge-desc">CRDT join() — convergent, no coordination required; any two replicas always reach the same state</div>

</div>

</div>

</div>

</div>

</section>

"""

# ---------------------------------------------------------------------------

960

# Large HTML template

961

# ---------------------------------------------------------------------------

962

963

_HTML_TEMPLATE = """\

<!DOCTYPE html>

<head>

<title>Muse — Version Anything</title>

970

<style>

971

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

--bg: #0d1117;

--bg2: #161b22;

--bg3: #21262d;

--border: #30363d;

--text: #e6edf3;

--mute: #8b949e;

--dim: #484f58;

--accent: #4f8ef7;

--accent2: #58a6ff;

--green: #3fb950;

--red: #f85149;

--yellow: #d29922;

--purple: #bc8cff;

--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

987

--ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

988

--r: 8px;

989

}

990

html { scroll-behavior: smooth; }

991

body {

992

background: var(--bg);

993

color: var(--text);

994

font-family: var(--ui);

font-size: 15px;

line-height: 1.7;

}

a { color: var(--accent2); text-decoration: none; }

999

a:hover { text-decoration: underline; }

1000

code {

1001

font-family: var(--mono);

1002

font-size: 0.88em;

1003

background: var(--bg3);

1004

border: 1px solid var(--border);

border-radius: 4px;

padding: 1px 6px;

}

/* ---- Hero ---- */

.hero {

background: linear-gradient(160deg, #0d1117 0%, #161b22 50%, #0d1117 100%);

1012

border-bottom: 1px solid var(--border);

1013

padding: 80px 40px 100px;

text-align: center;

position: relative;

overflow: hidden;

}

.hero::before {

content: '';

position: absolute;

inset: 0;

background:

radial-gradient(ellipse 60% 40% at 20% 50%, rgba(79,142,247,0.07) 0%, transparent 70%),

1024

radial-gradient(ellipse 50% 40% at 80% 50%, rgba(188,140,255,0.06) 0%, transparent 70%);

1025

pointer-events: none;

1026

}

1027

.hero-wordmark {

1028

font-family: var(--ui);

1029

font-size: clamp(72px, 11vw, 130px);

1030

font-weight: 800;

1031

letter-spacing: -5px;

1032

line-height: 1;

1033

margin-bottom: 12px;

1034

background: linear-gradient(90deg, #6ea8fe 0%, #a78bfa 50%, #c084fc 100%);

1035

-webkit-background-clip: text;

1036

-webkit-text-fill-color: transparent;

1037

background-clip: text;

1038

}

1039

.hero-version-any {

1040

font-size: clamp(18px, 2.8vw, 26px);

font-weight: 700;

color: #ffffff;

letter-spacing: 6px;

text-transform: uppercase;

margin-bottom: 32px;

}

.hero-sub {

font-size: 18px;

color: var(--mute);

max-width: 600px;

margin: 0 auto 40px;

line-height: 1.6;

}

.hero-sub strong { color: var(--text); }

.hero-cta-row {

display: flex;

gap: 12px;

justify-content: center;

flex-wrap: wrap;

}

.btn-primary {

background: var(--accent);

color: #fff;

font-weight: 600;

padding: 12px 28px;

border-radius: var(--r);

font-size: 15px;

border: none;

cursor: pointer;

text-decoration: none;

1071

transition: opacity 0.15s, transform 0.1s;

1072

display: inline-block;

1073

}

1074

.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }

1075

.btn-outline {

1076

background: transparent;

color: var(--text);

font-weight: 500;

padding: 12px 28px;

border-radius: var(--r);

1081

font-size: 15px;

1082

border: 1px solid var(--border);

1083

cursor: pointer;

1084

text-decoration: none;

1085

display: inline-block;

1086

transition: border-color 0.15s, color 0.15s;

1087

}

1088

.btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

1089

1090

/* ---- Domain ticker ---- */

.domain-ticker {

margin: 32px auto 0;

max-width: 700px;

overflow: hidden;

position: relative;

height: 34px;

}

.domain-ticker::before,

1099

.domain-ticker::after {

content: '';

position: absolute;

top: 0; bottom: 0;

width: 60px;

z-index: 2;

}

.domain-ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }

1107

.domain-ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.ticker-track {

display: flex;

gap: 10px;

animation: ticker-scroll 18s linear infinite;

1112

width: max-content;

1113

}

1114

@keyframes ticker-scroll {

1115

0% { transform: translateX(0); }

1116

100% { transform: translateX(-50%); }

1117

}

1118

.ticker-item {

1119

font-family: var(--mono);

font-size: 13px;

padding: 4px 14px;

border-radius: 20px;

border: 1px solid var(--border);

white-space: nowrap;

color: var(--mute);

}

.ticker-item.active { border-color: rgba(79,142,247,0.5); color: var(--accent2); background: rgba(79,142,247,0.08); }

1128

1129

/* ---- Sections ---- */

1130

section { padding: 72px 40px; border-top: 1px solid var(--border); }

1131

.inner { max-width: 1100px; margin: 0 auto; }

1132

.section-eyebrow {

1133

font-family: var(--mono);

1134

font-size: 11px;

1135

color: var(--accent2);

1136

letter-spacing: 2px;

1137

text-transform: uppercase;

margin-bottom: 10px;

}

section h2 {

font-size: 32px;

font-weight: 700;

letter-spacing: -0.5px;

margin-bottom: 12px;

}

.section-lead {

font-size: 16px;

color: var(--mute);

max-width: 620px;

margin-bottom: 48px;

line-height: 1.7;

}

.section-lead strong { color: var(--text); }

1154

1155

/* ---- Base icon ---- */

1156

.icon {

1157

display: inline-block;

1158

vertical-align: -0.15em;

1159

flex-shrink: 0;

1160

}

1161

.ticker-item .icon { width: 13px; height: 13px; vertical-align: -0.1em; }

1162

.cap-showcase-badge .icon { width: 13px; height: 13px; vertical-align: -0.1em; }

1163

1164

/* ---- Protocol two-col layout ---- */

1165

.proto-layout {

1166

display: grid;

1167

grid-template-columns: 148px 1fr;

1168

gap: 0;

1169

border: 1px solid var(--border);

1170

border-radius: var(--r);

1171

overflow: hidden;

1172

margin-bottom: 40px;

1173

align-items: stretch;

1174

}

1175

@media (max-width: 640px) {

1176

.proto-layout { grid-template-columns: 1fr; }

1177

.stat-strip { border-right: none; border-bottom: 1px solid var(--border); }

1178

}

1179

1180

/* ---- Stat strip (left column) ---- */

1181

.stat-strip {

1182

display: flex;

1183

flex-direction: column;

1184

border-right: 1px solid var(--border);

}

.stat-cell {

flex: 1;

padding: 18px 20px;

border-bottom: 1px solid var(--border);

1190

text-align: center;

1191

display: flex;

1192

flex-direction: column;

1193

align-items: center;

1194

justify-content: center;

1195

}

1196

.stat-cell:last-child { border-bottom: none; }

1197

.stat-num {

1198

font-family: var(--mono);

1199

font-size: 26px;

1200

font-weight: 700;

1201

color: var(--accent2);

display: block;

line-height: 1.1;

}

.stat-lbl { font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.3; }

1206

1207

/* ---- Protocol table (right column) ---- */

.proto-table {

overflow: hidden;

}

.proto-row {

display: grid;

grid-template-columns: 90px 240px 1fr;

1214

border-bottom: 1px solid var(--border);

1215

}

1216

.proto-row:last-child { border-bottom: none; }

1217

.proto-row.hdr { background: var(--bg3); }

1218

.proto-row > div { padding: 11px 16px; }

1219

.proto-method { font-family: var(--mono); font-size: 13px; color: var(--accent2); font-weight: 600; }

1220

.proto-sig { font-family: var(--mono); font-size: 12px; color: var(--mute); }

1221

.proto-desc { font-size: 13px; color: var(--mute); }

1222

.proto-row.hdr .proto-method,

1223

.proto-row.hdr .proto-sig,

1224

.proto-row.hdr .proto-desc { font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; }

1225

1226

/* ---- Engine capability showcase ---- */

1227

.cap-showcase-grid {

1228

display: grid;

1229

grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));

1230

gap: 24px;

1231

}

1232

@media (max-width: 600px) { .cap-showcase-grid { grid-template-columns: 1fr; } }

1233

.cap-showcase-card {

1234

border: 1px solid var(--border);

1235

border-top: 3px solid var(--cap-color, var(--accent));

1236

border-radius: var(--r);

1237

background: var(--bg);

1238

overflow: hidden;

1239

transition: transform 0.15s;

1240

}

1241

.cap-showcase-card:hover { transform: translateY(-2px); }

1242

.cap-showcase-header {

1243

padding: 14px 18px;

1244

border-bottom: 1px solid var(--border);

1245

background: var(--bg2);

display: flex;

align-items: center;

gap: 12px;

flex-wrap: wrap;

}

.cap-showcase-badge {

1252

font-size: 12px;

1253

font-family: var(--mono);

padding: 3px 10px;

border-radius: 4px;

border: 1px solid;

white-space: nowrap;

}

.cap-showcase-sub {

font-size: 12px;

color: var(--mute);

font-style: italic;

}

.cap-showcase-body { padding: 16px 18px; }

.cap-showcase-desc {

font-size: 13px;

color: var(--mute);

margin-bottom: 14px;

line-height: 1.6;

}

.cap-showcase-desc strong { color: var(--text); }

1272

.cap-showcase-output {

1273

background: #0a0e14;

1274

border: 1px solid var(--border);

1275

border-radius: 5px;

1276

padding: 12px 14px;

1277

font-family: var(--mono);

font-size: 11.5px;

color: #abb2bf;

white-space: pre;

overflow-x: auto;

line-height: 1.65;

}

/* ---- Diff Algebra section ---- */

1285

.da-grid {

1286

display: grid;

1287

grid-template-columns: repeat(2, 1fr);

gap: 20px;

margin-bottom: 36px;

}

.da-seq-card { grid-column: span 2; }

1292

@media (max-width: 720px) {

1293

.da-grid { grid-template-columns: 1fr; }

1294

.da-seq-card { grid-column: span 1; }

1295

}

1296

.da-card {

1297

background: var(--bg2);

1298

border: 1px solid var(--border);

1299

border-radius: var(--r);

1300

padding: 18px;

1301

display: flex;

1302

flex-direction: column;

1303

gap: 10px;

1304

}

1305

.da-card-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

1306

.da-chip {

1307

font-family: var(--mono);

font-size: 10.5px;

font-weight: 700;

padding: 3px 10px;

border-radius: 4px;

border: 1px solid;

}

.da-chip-seq { color:#58a6ff; background:rgba(88,166,255,0.1); border-color:rgba(88,166,255,0.3); }

1315

.da-chip-tree { color:#f9a825; background:rgba(249,168,37,0.1); border-color:rgba(249,168,37,0.3); }

1316

.da-chip-tensor { color:#ab47bc; background:rgba(171,71,188,0.1); border-color:rgba(171,71,188,0.3); }

1317

.da-chip-set { color:#3fb950; background:rgba(63,185,80,0.1); border-color:rgba(63,185,80,0.3); }

1318

.da-chip-map { color:#ef5350; background:rgba(239,83,80,0.1); border-color:rgba(239,83,80,0.3); }

1319

.da-algo-name { font-size:12px; color:var(--mute); font-family:var(--mono); }

1320

.da-domains-row { font-size:11px; color:var(--dim); }

1321

.da-visual {

1322

background: #0a0e14;

1323

border: 1px solid var(--border);

border-radius: 5px;

padding: 14px;

flex: 1;

min-height: 130px;

display: flex;

align-items: center;

justify-content: center;

1331

}

1332

.da-note { font-size:11.5px; color:var(--mute); line-height:1.5; }

1333

1334

/* Sequence LCS */

1335

.seq-vis { display:flex; flex-direction:column; gap:6px; width:100%; }

1336

.seq-row-lbl { font-family:var(--mono); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.6px; }

1337

.seq-row { display:flex; gap:6px; flex-wrap:wrap; }

1338

.seq-blk {

1339

display:flex; flex-direction:column; align-items:center;

1340

padding:5px 9px; border-radius:5px; border:1.5px solid;

1341

min-width:46px; gap:2px; transition:transform .15s;

1342

}

1343

.seq-blk:hover { transform:translateY(-2px); }

1344

.seq-hash { font-family:var(--mono); font-size:7.5px; opacity:.55; }

1345

.seq-name { font-family:var(--mono); font-size:14px; font-weight:700; }

1346

.seq-match { background:rgba(88,166,255,.07); border-color:rgba(88,166,255,.25); color:#58a6ff; }

1347

.seq-del { background:rgba(239,83,80,.1); border-color:rgba(239,83,80,.35); color:#ef5350; text-decoration:line-through; }

1348

.seq-ins { background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.35); color:#3fb950; }

1349

.seq-moved-from{ background:rgba(188,140,255,.06); border-color:rgba(188,140,255,.25);color:#bc8cff; opacity:.55; }

1350

.seq-moved-to { background:rgba(188,140,255,.12); border-color:rgba(188,140,255,.5); color:#bc8cff; }

1351

.seq-ops-row { display:flex; gap:6px; padding:2px 0; flex-wrap:wrap; }

1352

.seq-op-cell { min-width:46px; display:flex; justify-content:center; }

1353

.da-op { font-size:9px; font-weight:700; letter-spacing:.3px; padding:1px 5px; border-radius:3px; white-space:nowrap; }

1354

.da-op-match { color:var(--dim); }

1355

.da-op-delete { color:#ef5350; background:rgba(239,83,80,.1); }

1356

.da-op-insert { color:#3fb950; background:rgba(63,185,80,.1); }

1357

.da-op-move { color:#bc8cff; background:rgba(188,140,255,.1); }

1358

1359

/* Tree SVG */

1360

.tree-vis { width:100%; height:130px; overflow:visible; }

1361

1362

/* Tensor */

1363

.tensor-wrap { display:flex; align-items:center; gap:14px; }

1364

.tensor-panel { display:flex; flex-direction:column; align-items:center; gap:5px; }

1365

.tensor-label { font-family:var(--mono); font-size:9px; color:var(--dim); }

1366

.tensor-grid { display:grid; grid-template-columns:repeat(4,26px); gap:3px; }

1367

.tc { width:26px; height:26px; border-radius:3px; }

1368

.tc-0 { background:#141c28; }

1369

.tc-1 { background:#1a2538; }

1370

.tc-2 { background:#1d2f50; }

1371

.tc-3 { background:#1a3060; }

1372

.tc-warm1 { background:rgba(249,168,37,.28); border:1px solid rgba(249,168,37,.4); }

1373

.tc-hot2 { background:rgba(239,83,80,.45); border:1px solid rgba(239,83,80,.65); }

1374

.tc-hot3 { background:rgba(239,83,80,.65); border:1px solid rgba(239,83,80,.9); }

1375

.tensor-arrow { font-size:22px; color:var(--dim); }

1376

.tensor-legend { display:flex; flex-direction:column; gap:5px; margin-top:4px; }

1377

.tl-item { display:flex; align-items:center; gap:5px; font-size:9px; color:var(--mute); }

1378

.tl-swatch { width:12px; height:12px; border-radius:2px; flex-shrink:0; }

1379

.tl-unchanged { background:#141c28; }

1380

.tl-warm { background:rgba(249,168,37,.28); border:1px solid rgba(249,168,37,.4); }

1381

.tl-hot { background:rgba(239,83,80,.65); border:1px solid rgba(239,83,80,.9); }

1382

1383

/* Set algebra */

1384

.set-vis { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:start; width:100%; }

1385

.set-col .set-header { font-family:var(--mono); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }

1386

.set-members { display:flex; flex-direction:column; gap:4px; }

1387

.set-member { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:3px; border:1px solid; }

1388

.set-kept { color:var(--mute); border-color:var(--border); background:var(--bg3); }

1389

.set-removed { color:#ef5350; border-color:rgba(239,83,80,.35); background:rgba(239,83,80,.07); text-decoration:line-through; }

1390

.set-added { color:#3fb950; border-color:rgba(63,185,80,.35); background:rgba(63,185,80,.07); }

1391

.set-ops-col { display:flex; flex-direction:column; gap:4px; padding-top:21px; }

1392

.set-op-line { font-size:10px; font-weight:700; white-space:nowrap; height:26px; display:flex; align-items:center; }

1393

.set-op-keep { color:var(--dim); }

1394

.set-op-rm { color:#ef5350; }

1395

.set-op-add { color:#3fb950; }

1396

1397

/* Map recursive */

1398

.map-vis { display:flex; flex-direction:column; gap:5px; width:100%; font-family:var(--mono); }

1399

.map-entry { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:4px; font-size:11px; flex-wrap:wrap; }

1400

.map-entry-changed { background:rgba(88,166,255,.04); border:1px solid rgba(88,166,255,.15); }

1401

.map-entry-unchanged { background:var(--bg3); border:1px solid var(--border); opacity:.65; }

1402

.map-key { color:#61afef; font-weight:700; min-width:52px; }

1403

.map-delta { color:var(--dim); }

1404

.map-val-before { color:var(--dim); font-size:10px; }

1405

.map-val-after { color:var(--text); font-size:10px; }

1406

.map-sub-algo { margin-left:auto; font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; border:1px solid; }

1407

1408

/* StructuredDelta flow */

1409

.da-delta-flow {

1410

background: var(--bg2);

1411

border: 1px solid var(--border);

1412

border-radius: var(--r);

1413

padding: 24px;

1414

}

1415

.da-delta-top { margin-bottom:14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }

1416

.da-delta-label { font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); }

1417

.da-delta-sub { font-size:12px; color:var(--mute); }

1418

.da-delta-ops { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }

1419

.da-dop { font-family:var(--mono); font-size:12px; font-weight:700; padding:5px 14px; border-radius:5px; border:1px solid; }

1420

.da-dop-ins { color:#3fb950; background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.3); }

1421

.da-dop-del { color:#ef5350; background:rgba(239,83,80,.1); border-color:rgba(239,83,80,.3); }

1422

.da-dop-mov { color:#bc8cff; background:rgba(188,140,255,.1);border-color:rgba(188,140,255,.3); }

1423

.da-dop-rep { color:#f9a825; background:rgba(249,168,37,.1); border-color:rgba(249,168,37,.3); }

1424

.da-dop-pat { color:#58a6ff; background:rgba(88,166,255,.1); border-color:rgba(88,166,255,.3); }

1425

.da-delta-merge { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }

1426

@media (max-width: 640px) { .da-delta-merge { grid-template-columns:1fr; } .da-merge-divider { text-align:center; } }

1427

.da-merge-branch { padding:14px 16px; border-radius:6px; border:1px solid; }

1428

.da-merge-ot { border-color:rgba(239,83,80,.3); background:rgba(239,83,80,.04); }

1429

.da-merge-crdt { border-color:rgba(188,140,255,.3); background:rgba(188,140,255,.04); }

1430

.da-merge-mode-label { font-family:var(--mono); font-size:11px; font-weight:700; margin-bottom:5px; }

1431

.da-merge-ot .da-merge-mode-label { color:#ef5350; }

1432

.da-merge-crdt .da-merge-mode-label { color:#bc8cff; }

1433

.da-merge-desc { font-size:11.5px; color:var(--mute); line-height:1.5; }

1434

.da-merge-divider { color:var(--dim); font-size:13px; font-weight:700; }

1435

1436

/* ---- CRDT visualizations ---- */

1437

.crdt-vis { display:flex; flex-direction:column; gap:10px; width:100%; }

1438

/* concurrent replicas row */

1439

.crdt-concurrent { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

1440

.crdt-rep {

1441

background:var(--bg3); border:1px solid var(--border);

1442

border-radius:5px; padding:9px 10px;

1443

display:flex; flex-direction:column; gap:4px;

1444

min-width:0; overflow:hidden;

1445

}

1446

.crdt-rep-hdr { font-family:var(--mono); font-size:9px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.6px; }

1447

.crdt-op { font-family:var(--mono); font-size:10px; padding:2px 6px; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

1448

.crdt-op-add { color:#3fb950; background:rgba(63,185,80,.1); }

1449

.crdt-op-rm { color:#ef5350; background:rgba(239,83,80,.1); }

1450

.crdt-rep-state { font-family:var(--mono); font-size:11px; color:var(--mute); margin-top:2px; }

1451

/* join result row */

1452

.crdt-join { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; background:var(--bg3); border-radius:5px; border:1px solid var(--border); }

1453

.crdt-join-label { font-family:var(--mono); font-size:10px; color:var(--dim); white-space:nowrap; }

1454

.crdt-join-val { font-family:var(--mono); font-size:13px; font-weight:700; }

1455

.crdt-join-rule { font-size:10px; color:var(--mute); font-style:italic; margin-left:auto; }

1456

/* LWW timeline */

1457

.crdt-writes { display:flex; flex-direction:column; gap:5px; }

1458

.crdt-write { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:5px; border:1px solid var(--border); background:var(--bg3); font-family:var(--mono); font-size:11px; }

1459

.crdt-write-winner { border-color:rgba(88,166,255,.4); background:rgba(88,166,255,.05); }

1460

.crdt-time { font-size:9px; color:var(--dim); min-width:32px; }

1461

.crdt-agent { font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; min-width:18px; text-align:center; }

1462

.crdt-agent-a { background:rgba(249,168,37,.15); color:#f9a825; }

1463

.crdt-agent-b { background:rgba(88,166,255,.15); color:#58a6ff; }

1464

.crdt-wval { color:var(--text); flex:1; }

1465

.crdt-latest { font-size:9px; font-weight:700; color:#58a6ff; background:rgba(88,166,255,.12); padding:1px 6px; border-radius:10px; white-space:nowrap; }

1466

/* GCounter bars */

1467

.crdt-gcounter { display:flex; flex-direction:column; gap:7px; }

1468

.crdt-gc-row { display:flex; align-items:center; gap:8px; }

1469

.crdt-bar { flex:1; height:22px; background:var(--bg3); border-radius:4px; overflow:hidden; }

1470

.crdt-bar-fill { height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:7px; font-family:var(--mono); font-size:11px; font-weight:700; border-radius:4px; transition:width .4s; }

1471

.crdt-bar-a { background:rgba(249,168,37,.35); color:#f9a825; }

1472

.crdt-bar-b { background:rgba(88,166,255,.35); color:#58a6ff; }

1473

/* VectorClock grid */

1474

.crdt-vclocks { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

1475

.crdt-vc { display:flex; flex-direction:column; gap:4px; }

1476

.crdt-vc-hdr { font-family:var(--mono); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; }

1477

.crdt-vc-cells { display:flex; gap:4px; }

1478

.crdt-vc-cell { font-family:var(--mono); font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:4px; border:1px solid; }

1479

.crdt-vc-self { color:#f9a825; background:rgba(249,168,37,.1); border-color:rgba(249,168,37,.35); }

1480

.crdt-vc-zero { color:var(--dim); background:var(--bg3); border-color:var(--border); }

1481

.crdt-vc-max { color:#3fb950; background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.35); }

1482

.crdt-vc-sep { font-size:16px; color:var(--dim); padding:0 2px; align-self:center; margin-top:14px; }

1483

.crdt-concurrent-badge { font-family:var(--mono); font-size:10px; color:#f9a825; background:rgba(249,168,37,.08); border:1px solid rgba(249,168,37,.25); border-radius:4px; padding:3px 10px; align-self:flex-start; }

1484

1485

/* ---- OT Merge scenario cards ---- */

1486

.ot-scenarios { display: flex; flex-direction: column; gap: 10px; }

1487

.ot-scenario {

1488

background: var(--bg);

1489

border: 1px solid var(--border);

1490

border-left: 3px solid transparent;

border-radius: 6px;

padding: 12px 14px;

display: flex;

flex-direction: column;

1495

gap: 9px;

1496

}

1497

.ot-clean { border-left-color: #3fb950; }

1498

.ot-conflict { border-left-color: #ef5350; }

1499

.ot-scenario-hdr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

1500

.ot-scenario-label {

1501

font-family: var(--mono);

1502

font-size: 9.5px;

1503

font-weight: 700;

1504

text-transform: uppercase;

letter-spacing: 1px;

color: var(--dim);

}

.ot-scenario-title { font-size: 11.5px; color: var(--mute); }

1509

.ot-ops { display: flex; flex-direction: column; gap: 5px; }

.ot-op {

display: flex;

align-items: center;

gap: 7px;

font-family: var(--mono);

font-size: 11.5px;

flex-wrap: wrap;

}

.ot-op-side {

font-size: 9px;

font-weight: 700;

color: var(--dim);

background: var(--bg3);

padding: 1px 6px;

border-radius: 3px;

min-width: 34px;

text-align: center;

}

.ot-op-type { font-weight: 700; padding: 1px 7px; border-radius: 3px; font-size: 10.5px; }

1529

.ot-insert { background: rgba(63,185,80,0.13); color: #3fb950; }

1530

.ot-replace { background: rgba(249,168,37,0.13); color: #f9a825; }

1531

.ot-op-addr { color: #98c379; }

1532

.ot-op-meta { color: var(--dim); font-size: 10.5px; }

.ot-result {

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

gap: 8px;

padding-top: 9px;

border-top: 1px solid var(--border);

1541

}

1542

.ot-reason { font-family: var(--mono); font-size: 11px; color: var(--mute); }

1543

.ot-badge {

1544

display: inline-flex;

align-items: center;

gap: 5px;

font-size: 11px;

font-weight: 700;

padding: 3px 10px;

border-radius: 12px;

white-space: nowrap;

}

.ot-badge .icon { width: 11px; height: 11px; vertical-align: -0.05em; }

1554

.ot-badge-clean { background: rgba(63,185,80,0.1); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }

1555

.ot-badge-conflict { background: rgba(239,83,80,0.1); color: #ef5350; border: 1px solid rgba(239,83,80,0.3); }

1556

1557

.cap-showcase-domain-grid {

1558

display: flex;

1559

flex-direction: column;

gap: 10px;

}

.crdt-mini-grid {

display: grid;

grid-template-columns: 1fr 1fr;

1565

gap: 10px;

1566

}

1567

@media (max-width: 700px) { .crdt-mini-grid { grid-template-columns: 1fr; } }

1568

1569

/* ---- Three steps ---- */

1570

.steps-grid {

1571

display: grid;

1572

grid-template-columns: repeat(3, 1fr);

1573

gap: 24px;

1574

}

1575

@media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr; } }

1576

.step-card {

1577

border: 1px solid var(--border);

1578

border-radius: var(--r);

1579

background: var(--bg2);

padding: 24px;

position: relative;

}

.step-num {

font-family: var(--mono);

1585

font-size: 11px;

1586

color: var(--accent);

1587

font-weight: 700;

1588

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 10px;

}

.step-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }

1593

.step-desc { font-size: 13px; color: var(--mute); line-height: 1.6; margin-bottom: 16px; }

1594

.step-cmd {

1595

font-family: var(--mono);

1596

font-size: 12px;

1597

background: var(--bg3);

1598

border: 1px solid var(--border);

1599

border-radius: 5px;

1600

padding: 10px 14px;

1601

color: var(--accent2);

1602

}

1603

1604

/* ---- Code block ---- */

1605

.code-wrap {

1606

border: 1px solid var(--border);

1607

border-radius: var(--r);

overflow: hidden;

}

.code-bar {

background: var(--bg3);

1612

border-bottom: 1px solid var(--border);

padding: 8px 16px;

display: flex;

align-items: center;

gap: 8px;

}

.code-bar-dot {

width: 10px; height: 10px; border-radius: 50%;

1620

}

1621

.code-bar-title {

1622

font-family: var(--mono);

font-size: 12px;

color: var(--mute);

margin-left: 6px;

}

.code-body {

background: #0a0e14;

padding: 20px 24px;

font-family: var(--mono);

font-size: 12.5px;

line-height: 1.7;

color: #abb2bf;

white-space: pre;

overflow-x: auto;

}

/* Simple syntax highlights */

1638

.kw { color: #c678dd; }

1639

.kw2 { color: #e06c75; }

1640

.fn { color: #61afef; }

1641

.str { color: #98c379; }

1642

.cmt { color: #5c6370; font-style: italic; }

1643

.cls { color: #e5c07b; }

1644

.typ { color: #56b6c2; }

1645

1646

/* ---- Active domains grid ---- */

1647

.domain-grid {

1648

display: grid;

1649

grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

gap: 20px;

}

.domain-card {

border: 1px solid var(--border);

1654

border-radius: var(--r);

1655

background: var(--bg2);

1656

overflow: hidden;

1657

transition: border-color 0.2s, transform 0.15s;

1658

}

1659

.domain-card:hover { border-color: var(--accent); transform: translateY(-2px); }

1660

.domain-card.active-domain { border-color: rgba(63,185,80,0.4); }

1661

.domain-card-hdr {

1662

background: var(--bg3);

1663

padding: 12px 16px;

1664

border-bottom: 1px solid var(--border);

display: flex;

align-items: center;

gap: 10px;

}

.active-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.3); color: var(--green); font-family: var(--mono); }

1670

.reg-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--mute); font-family: var(--mono); }

1671

.active-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-left: auto; }

1672

.domain-name-lg { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); }

1673

.domain-card-body { padding: 16px; }

1674

.domain-desc { font-size: 13px; color: var(--mute); margin-bottom: 12px; }

1675

.cap-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

1676

.cap-pill { font-size: 10px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--border); color: var(--mute); background: var(--bg3); }

1677

.cap-pill.cap-crdt { border-color: rgba(188,140,255,0.4); color: var(--purple); background: rgba(188,140,255,0.08); }

1678

.cap-pill.cap-ot-merge { border-color: rgba(88,166,255,0.4); color: var(--accent2); background: rgba(88,166,255,0.08); }

1679

.cap-pill.cap-domain-schema { border-color: rgba(63,185,80,0.4); color: var(--green); background: rgba(63,185,80,0.08); }

1680

.cap-pill.cap-typed-deltas { border-color: rgba(249,168,37,0.4); color: #f9a825; background: rgba(249,168,37,0.08); }

1681

.dim-row { font-size: 11px; color: var(--dim); }

1682

.dim-tag { color: var(--mute); }

1683

1684

/* ---- Planned domains ---- */

1685

.planned-grid {

1686

display: grid;

1687

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 16px;

}

.planned-card {

border: 1px solid var(--border);

1692

border-radius: var(--r);

1693

background: var(--bg2);

1694

padding: 20px 16px;

1695

display: flex;

1696

flex-direction: column;

1697

gap: 8px;

1698

transition: border-color 0.2s, transform 0.15s;

1699

}

1700

.planned-card:hover { border-color: var(--card-accent,var(--accent)); transform: translateY(-2px); }

1701

.planned-card.yours { border: 2px dashed var(--accent); background: rgba(79,142,247,0.04); }

1702

.planned-icon { line-height: 0; }

1703

.planned-icon .icon { width: 28px; height: 28px; }

1704

.planned-name { font-size: 15px; font-weight: 700; color: var(--text); }

1705

.planned-tag { font-size: 12px; color: var(--mute); line-height: 1.5; }

1706

.planned-dims { font-size: 10px; color: var(--dim); }

1707

.coming-soon { font-size: 10px; color: var(--dim); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; display: inline-block; margin-top: 4px; }

1708

.cta-btn {

1709

display: inline-block;

margin-top: 6px;

font-size: 12px;

font-weight: 600;

color: var(--accent2);

1714

border: 1px solid rgba(88,166,255,0.4);

1715

border-radius: 4px;

1716

padding: 4px 12px;

1717

text-decoration: none;

1718

transition: background 0.15s;

1719

}

1720

.cta-btn:hover { background: rgba(88,166,255,0.1); text-decoration: none; }

1721

1722

/* ---- Distribution tiers ---- */

1723

.dist-grid {

1724

display: grid;

1725

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

gap: 24px;

}

.dist-card {

border: 1px solid var(--border);

1730

border-top: 3px solid var(--dist-color, var(--accent));

1731

border-radius: var(--r);

1732

background: var(--bg2);

1733

padding: 24px;

1734

transition: transform 0.15s;

1735

}

1736

.dist-card:hover { transform: translateY(-2px); }

1737

.dist-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }

1738

.dist-icon { line-height: 0; flex-shrink: 0; }

1739

.dist-icon .icon { width: 26px; height: 26px; }

1740

.dist-tier { font-family: var(--mono); font-size: 11px; color: var(--dist-color,var(--accent)); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

1741

.dist-title { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; }

1742

.dist-desc { font-size: 13px; color: var(--mute); margin-bottom: 16px; line-height: 1.6; }

1743

.dist-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 6px; }

1744

.dist-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--mute); }

1745

.dist-steps li::before { content: counter(step); min-width: 18px; height: 18px; background: var(--dist-color,var(--accent)); color: #000; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

1746

.dist-steps code { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 11px; }

1747

1748

/* ---- MuseHub teaser ---- */

1749

.musehub-section {

1750

background: linear-gradient(135deg, #0d1117 0%, #1a0d2e 50%, #0d1117 100%);

1751

padding: 80px 40px;

1752

text-align: center;

1753

border-top: 1px solid var(--border);

}

.musehub-logo {

margin-bottom: 20px;

line-height: 0;

}

.musehub-logo .icon { width: 48px; height: 48px; stroke: #bc8cff; }

1760

.musehub-section h2 {

1761

font-size: 36px;

1762

font-weight: 800;

1763

letter-spacing: -1px;

1764

margin-bottom: 12px;

1765

}

1766

.musehub-section h2 span {

1767

background: linear-gradient(135deg, #bc8cff, #4f8ef7);

1768

-webkit-background-clip: text;

1769

-webkit-text-fill-color: transparent;

1770

background-clip: text;

}

.musehub-desc {

font-size: 16px;

color: var(--mute);

max-width: 560px;

margin: 0 auto 36px;

}

.musehub-desc strong { color: var(--text); }

.musehub-features {

display: flex;

gap: 24px;

justify-content: center;

flex-wrap: wrap;

margin-bottom: 40px;

}

.mh-feature {

background: var(--bg2);

1788

border: 1px solid rgba(188,140,255,0.2);

1789

border-radius: var(--r);

padding: 16px 20px;

text-align: left;

min-width: 180px;

}

.mh-feature-icon { margin-bottom: 10px; line-height: 0; }

1795

.mh-feature-icon .icon { width: 22px; height: 22px; stroke: #bc8cff; }

1796

.mh-feature-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }

1797

.mh-feature-desc { font-size: 12px; color: var(--mute); }

1798

.musehub-status {

1799

display: inline-flex;

1800

align-items: center;

1801

gap: 8px;

1802

background: rgba(188,140,255,0.1);

1803

border: 1px solid rgba(188,140,255,0.3);

border-radius: 20px;

padding: 8px 20px;

font-size: 13px;

color: var(--purple);

1808

}

1809

.mh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); animation: pulse 2s ease-in-out infinite; }

1810

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

1811

1812

/* ---- Footer ---- */

1813

footer {

1814

background: var(--bg2);

1815

border-top: 1px solid var(--border);

1816

padding: 24px 40px;

1817

display: flex;

1818

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 12px;

font-size: 13px;

color: var(--mute);

}

footer a { color: var(--accent2); }

/* ---- Nav ---- */

nav {

background: var(--bg2);

1830

border-bottom: 1px solid var(--border);

padding: 0 40px;

display: flex;

align-items: center;

gap: 0;

height: 52px;

}

.nav-logo {

font-family: var(--mono);

1839

font-size: 16px;

1840

font-weight: 700;

1841

color: var(--accent2);

1842

margin-right: 32px;

1843

text-decoration: none;

1844

}

1845

.nav-logo:hover { text-decoration: none; }

.nav-link {

font-size: 13px;

color: var(--mute);

padding: 0 14px;

height: 100%;

display: flex;

align-items: center;

border-bottom: 2px solid transparent;

1854

text-decoration: none;

1855

transition: color 0.15s, border-color 0.15s;

1856

}

1857

.nav-link:hover { color: var(--text); text-decoration: none; }

1858

.nav-link.current { color: var(--text); border-bottom-color: var(--accent); }

1859

.nav-spacer { flex: 1; }

1860

.nav-badge {

1861

font-size: 11px;

1862

background: rgba(79,142,247,0.12);

1863

border: 1px solid rgba(79,142,247,0.3);

1864

color: var(--accent2);

1865

border-radius: 4px;

1866

padding: 2px 8px;

1867

font-family: var(--mono);

}

</style>

</head>

<body>

<nav>

<a class="nav-link" href="https://github.com/cgcardona/muse/blob/main/docs/guide/plugin-authoring-guide.md">Plugin Guide</a>

</nav>

1883

1884

1885

<div class="hero-version-any">Version Anything</div>

1886

1887

One protocol. Any domain. <strong>Six methods</strong> between you and a

1888

complete version control system — branching, merging, conflict resolution,

1889

time-travel, and typed diffs — for free.

1890

</p>

1891

1892

<a class="btn-primary" href="#build">Build a Domain Plugin</a>

1893

1894

<a class="btn-outline" href="midi-demo.html">🎹 Bach BWV 846 × 21 Dimensions</a>

</div>

<span class="ticker-item active">{{ICON_MUSIC}} midi</span>

1899

1900

<span class="ticker-item">{{ICON_GENOMICS}} genomics</span>

1901

<span class="ticker-item">{{ICON_CUBE}} 3d-spatial</span>

1902

<span class="ticker-item">{{ICON_TRENDING}} financial</span>

1903

<span class="ticker-item">{{ICON_ATOM}} simulation</span>

1904

<span class="ticker-item">{{ICON_ACTIVITY}} proteomics</span>

1905

1906

<span class="ticker-item">{{ICON_ZAP}} game-state</span>

1907

<span class="ticker-item">{{ICON_PLUS}} your-domain</span>

1908

1909

<span class="ticker-item active">{{ICON_MUSIC}} midi</span>

1910

1911

<span class="ticker-item">{{ICON_GENOMICS}} genomics</span>

1912

<span class="ticker-item">{{ICON_CUBE}} 3d-spatial</span>

1913

<span class="ticker-item">{{ICON_TRENDING}} financial</span>

1914

<span class="ticker-item">{{ICON_ATOM}} simulation</span>

1915

<span class="ticker-item">{{ICON_ACTIVITY}} proteomics</span>

1916

1917

<span class="ticker-item">{{ICON_ZAP}} game-state</span>

1918

<span class="ticker-item">{{ICON_PLUS}} your-domain</span>

</div>

</div>

</div>

1924

1925

1926

<div class="section-eyebrow">The Contract</div>

1927

<h2>The MuseDomainPlugin Protocol</h2>

1928

1929

Every domain — MIDI, source code, genomics, 3D spatial, financial models —

1930

implements the same <strong>six-method protocol</strong>. The core engine

1931

handles everything else: content-addressed storage, DAG, branches, log,

1932

merge base, cherry-pick, revert, stash, tags.

</p>

<div class="stat-cell"><span class="stat-num">6</span><span class="stat-lbl">methods to implement</span></div>

1938

<div class="stat-cell"><span class="stat-num">14</span><span class="stat-lbl">CLI commands, free</span></div>

1939

<div class="stat-cell"><span class="stat-num">∞</span><span class="stat-lbl">domains possible</span></div>

1940

<div class="stat-cell"><span class="stat-num">0</span><span class="stat-lbl">core changes needed</span></div>

</div>

<div class="proto-method">Method</div>

1945

<div class="proto-sig">Signature</div>

1946

<div class="proto-desc">Purpose</div>

1947

</div>

1948

1949

<div class="proto-method">snapshot</div>

1950

<div class="proto-sig">snapshot(live) → StateSnapshot</div>

1951

<div class="proto-desc">Capture current state as a content-addressable blob</div>

</div>

<div class="proto-sig">diff(base, target) → StateDelta</div>

1956

<div class="proto-desc">Compute minimal change between two snapshots (added · removed · modified)</div>

1957

</div>

1958

1959

<div class="proto-method">merge</div>

1960

<div class="proto-sig">merge(base, left, right) → MergeResult</div>

1961

<div class="proto-desc">Three-way reconcile divergent state lines; surface conflicts per dimension</div>

1962

</div>

1963

1964

<div class="proto-method">drift</div>

1965

<div class="proto-sig">drift(committed, live) → DriftReport</div>

1966

<div class="proto-desc">Detect uncommitted changes between HEAD and working state</div>

1967

</div>

1968

1969

<div class="proto-method">apply</div>

1970

<div class="proto-sig">apply(delta, live) → LiveState</div>

1971

<div class="proto-desc">Apply a delta during checkout to reconstruct historical state</div>

1972

</div>

1973

1974

<div class="proto-method">schema</div>

1975

<div class="proto-sig">schema() → DomainSchema</div>

1976

<div class="proto-desc">Declare data structure — drives diff algorithm selection per dimension</div>

</div>

</div>

</div>

</div>

</section>

1984

1985

1986

<div class="section-eyebrow">Registry</div>

1987

<h2>Registered Domains</h2>

1988

1989

Domains currently registered in this Muse instance. The active domain

1990

is the one used when you run <code>muse commit</code>, <code>muse diff</code>,

1991

and all other commands.

</p>

</div>

</div>

</section>

2000

2001

2002

<div class="section-eyebrow">Ecosystem</div>

2003

<h2>The Plugin Ecosystem</h2>

2004

2005

MIDI and code are the two shipped domains — both fully active with typed

2006

deltas, structured merge, and <code>.museattributes</code> rule control.

2007

These are the domains planned next — and the slot waiting for yours.

</p>

</div>

</div>

</section>

2016

2017

2018

<div class="section-eyebrow">Engine Capabilities</div>

2019

<h2>What Every Plugin Gets for Free</h2>

2020

2021

The core engine provides four advanced capabilities that any domain plugin

2022

can opt into. Implement the protocol — the engine does the rest.

</p>

{{ICON_CODE}} Typed Delta Algebra

2031

</span>

2032

<span class="cap-showcase-sub">StructuredDelta — every change is a typed operation</span>

</div>

Unlike Git's blob diffs, Muse deltas are <strong>typed objects</strong>:

2037

<code>InsertOp</code>, <code>ReplaceOp</code>, <code>DeleteOp</code> — each

2038

carrying the address, before/after hashes, and affected dimensions.

2039

Machine-readable with <code>muse show --json</code>.

2040

</p>

2041

<pre class="cap-showcase-output" data-lang="json">{{TYPED_DELTA_EXAMPLE}}</pre>

</div>

</div>

{{ICON_LAYERS}} Domain Schema

2049

</span>

2050

<span class="cap-showcase-sub">Per-domain dimensions drive diff algorithm selection</span>

</div>

Each plugin's <code>schema()</code> method declares its dimensions and merge mode.

2055

The engine uses this to select the right diff algorithm per dimension and to

2056

surface only the dimensions that actually conflict.

</p>

</div>

</div>

</div>

{{ICON_GIT_MERGE}} OT Merge

2068

</span>

2069

<span class="cap-showcase-sub">Operational transformation — independent ops commute automatically</span>

</div>

Plugins implementing <strong>StructuredMergePlugin</strong> get operational

2074

transformation. Operations at different addresses commute automatically —

2075

only operations on the same address with incompatible intent surface a conflict.

</p>

<span class="ot-scenario-label">Scenario A</span>

2082

<span class="ot-scenario-title">Independent ops at different addresses</span>

</div>

<span class="ot-op-type ot-insert">InsertOp</span>

2088

<span class="ot-op-addr">"ot-notes-a.mid"</span>

</div>

<span class="ot-op-side">right</span>

2093

<span class="ot-op-type ot-insert">InsertOp</span>

2094

<span class="ot-op-addr">"ot-notes-b.mid"</span>

</div>

</div>

<span class="ot-reason">transform → no overlap → ops commute</span>

2100

<span class="ot-badge ot-badge-clean">{{ICON_CHECK_CIRCLE}} Clean merge · both files applied</span>

</div>

</div>

<span class="ot-scenario-label">Scenario B</span>

2107

<span class="ot-scenario-title">Same address, conflicting intent — conflict surfaced</span>

</div>

<span class="ot-op-type ot-replace">ReplaceOp</span>

2113

<span class="ot-op-addr">"shared-melody.mid"</span>

2114

<span class="ot-op-meta">C4 E4 G4 · major triad</span>

2115

</div>

2116

2117

<span class="ot-op-side">right</span>

2118

<span class="ot-op-type ot-replace">ReplaceOp</span>

2119

<span class="ot-op-addr">"shared-melody.mid"</span>

2120

<span class="ot-op-meta">C4 Eb4 G4 · minor triad</span>

</div>

</div>

<span class="ot-reason">transform → same address · non-commuting content</span>

2125

<span class="ot-badge ot-badge-conflict">{{ICON_X_CIRCLE}} Conflict · human resolves</span>

</div>

</div>

</div>

</div>

</div>

{{ICON_ZAP}} CRDT Primitives

2137

</span>

2138

<span class="cap-showcase-sub">Convergent merge — any two replicas always reach the same state</span>

</div>

Plugins implementing <strong>CRDTPlugin</strong> get six battle-tested

2143

convergent data structures. No coordination required between replicas.

2144

The MIDI plugin extends RGA into <strong>MidiRGA</strong> — a

2145

voice-aware variant that orders concurrent note insertions by voice lane

2146

(bass → tenor → alto → soprano) before falling back to

2147

op-id, preventing voice crossings without human intervention.

</p>

</div>

</div>

</div>

</div>

</div>

</section>

2162

2163

2164

<div class="section-eyebrow">Build</div>

2165

<h2>Build in Three Steps</h2>

2166

2167

One command scaffolds the entire plugin skeleton. You fill in six methods.

2168

The full VCS follows.

</p>

<div class="step-num">Step 1 · Scaffold</div>

2174

<div class="step-title">Generate the skeleton</div>

2175

2176

One command creates the plugin directory, class, and all six method stubs

2177

with full type annotations.

2178

</div>

2179

<div class="step-cmd">muse domains --new genomics</div>

2180

</div>

2181

2182

<div class="step-num">Step 2 · Implement</div>

2183

<div class="step-title">Fill in the six methods</div>

2184

2185

Replace each <code>raise NotImplementedError</code> with your domain's

2186

snapshot, diff, merge, drift, apply, and schema logic.

2187

</div>

2188

<div class="step-cmd">vim muse/plugins/genomics/plugin.py</div>

</div>

<div class="step-title">Full VCS, instantly</div>

2193

2194

Register in <code>registry.py</code>, then every Muse command works

2195

for your domain out of the box.

2196

</div>

2197

<div class="step-cmd">muse init --domain genomics</div>

</div>

</div>

</div>

</section>

2204

2205

2206

<div class="section-eyebrow">The Scaffold</div>

2207

<h2>What <code>muse domains --new genomics</code> produces</h2>

2208

2209

A fully typed, immediately runnable plugin skeleton. Every method has the

2210

correct signature. You replace the stubs — the protocol does the rest.

</p>

<span class="code-bar-title">muse/plugins/genomics/plugin.py</span>

2218

</div>

2219

<div class="code-body">{{SCAFFOLD_SNIPPET}}</div>

</div>

Full walkthrough →

<a href="https://github.com/cgcardona/muse/blob/main/docs/guide/plugin-authoring-guide.md">docs/guide/plugin-authoring-guide.md</a>

2224

· CRDT extension →

2225

<a href="https://github.com/cgcardona/muse/blob/main/docs/guide/crdt-reference.md">docs/guide/crdt-reference.md</a>

</p>

</div>

</section>

2231

2232

2233

<div class="section-eyebrow">Distribution</div>

2234

<h2>How to Share Your Plugin</h2>

2235

2236

Three tiers of distribution — from local prototype to globally searchable

2237

registry. Start local, publish when ready.

</p>

</div>

</div>

</section>

2246

2247

<div class="musehub-logo">{{ICON_GLOBE}}</div>

2248

<h2><span>MuseHub</span> is coming</h2>

2249

2250

A <strong>centralized, searchable registry</strong> for Muse domain plugins —

2251

think npm or crates.io, but for any multidimensional versioned state.

2252

One command to publish. One command to install.

</p>

<div class="mh-feature-icon">{{ICON_SEARCH}}</div>

2257

<div class="mh-feature-title">Searchable</div>

2258

<div class="mh-feature-desc">Find plugins by domain, capability, or keyword</div>

2259

</div>

2260

2261

<div class="mh-feature-icon">{{ICON_PACKAGE}}</div>

2262

<div class="mh-feature-title">Versioned</div>

2263

<div class="mh-feature-desc">Semantic versioning, pinned installs, changelogs</div>

</div>

<div class="mh-feature-title">Private registries</div>

2268

<div class="mh-feature-desc">Self-host for enterprise or research teams</div>

</div>

<div class="mh-feature-title">One command</div>

2273

<div class="mh-feature-desc"><code>muse init --domain @musehub/genomics</code></div>

</div>

</div>

MuseHub — planned · building in public at <a href="https://github.com/cgcardona/musehub" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:underline;text-underline-offset:3px;">github.com/cgcardona/musehub</a>

</div>

</div>

<span>Muse v0.1.2 · domain-agnostic version control for multidimensional state · Python 3.14</span>

2284

<span>

2285

<a href="demo.html">Demo</a> ·

2286

<a href="https://github.com/cgcardona/muse">GitHub</a> ·

2287

<a href="https://github.com/cgcardona/muse/blob/main/docs/guide/plugin-authoring-guide.md">Plugin Guide</a>

</span>

</footer>

(function () {

function esc(s) {

return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');

2295

}

2296

2297

function tokenizeJSON(raw) {

2298

let html = '';

2299

let i = 0;

2300

while (i < raw.length) {

2301

// Comment line starting with #

2302

if (raw[i] === '#') {

2303

const end = raw.indexOf('\n', i);

2304

const line = end === -1 ? raw.slice(i) : raw.slice(i, end);

2305

html += '<span style="color:#5c6370;font-style:italic">' + esc(line) + '</span>';

i += line.length;

continue;

}

// String literal

if (raw[i] === '"') {

2311

let j = i + 1;

2312

while (j < raw.length && raw[j] !== '"') {

2313

if (raw[j] === '\\') j++;

j++;

}

j++;

const str = raw.slice(i, j);

2318

// Peek past whitespace — key if followed by ':'

2319

let k = j;

2320

while (k < raw.length && (raw[k] === ' ' || raw[k] === '\t')) k++;

2321

const color = raw[k] === ':' ? '#61afef' : '#98c379';

2322

html += '<span style="color:' + color + '">' + esc(str) + '</span>';

i = j;

continue;

}

// Number (including negative)

2327

if (/[0-9]/.test(raw[i]) || (raw[i] === '-' && /[0-9]/.test(raw[i + 1] || ''))) {

2328

let j = i;

2329

if (raw[j] === '-') j++;

2330

while (j < raw.length && /[0-9.eE+-]/.test(raw[j])) j++;

2331

html += '<span style="color:#d19a66">' + esc(raw.slice(i, j)) + '</span>';

i = j;

continue;

}

// Keywords: true / false / null

2336

const kws = [['true', '#c678dd'], ['false', '#c678dd'], ['null', '#c678dd']];

2337

let matched = false;

2338

for (const [kw, col] of kws) {

2339

if (raw.slice(i, i + kw.length) === kw) {

2340

html += '<span style="color:' + col + '">' + kw + '</span>';

i += kw.length;

matched = true;

break;

}

}

if (matched) continue;

2347

// Default character (punctuation / whitespace)

html += esc(raw[i]);

i++;

}

return html;

}

document.querySelectorAll('pre[data-lang="json"]').forEach(function (pre) {

2355

pre.innerHTML = tokenizeJSON(pre.textContent);

});

})();

</script>

</body>

</html>

"""

# ---------------------------------------------------------------------------

2366

# Entry point

2367

# ---------------------------------------------------------------------------

2368

2369

if __name__ == "__main__":

2370

import argparse

2371

2372

parser = argparse.ArgumentParser(

2373

description="Generate the Muse domain registry HTML page"

)

parser.add_argument(

"--out",

default=str(_ROOT / "artifacts" / "domain_registry.html"),

2378

help="Output HTML path",

2379

)

2380

args = parser.parse_args()

2381

2382

out_path = pathlib.Path(args.out)

2383

out_path.parent.mkdir(parents=True, exist_ok=True)

2384

2385

print("Generating domain_registry.html...")

2386

render(out_path)

2387

print(f"Open: file://{out_path.resolve()}")