Fix M4 reactivity bugs via context + class store

Symptoms in v0.1.0 install: 📡 broadcast button didn't change color
on toggle, × close button didn't remove the pane, blue active
border stuck on the first pane. All three were UI-not-rerendering-
on-state-change manifestations of the same prop-reactivity quirk
that drilling activeLeafId tried (and apparently failed) to fix.

Refactor to the Svelte 5 canonical pattern for shared reactive
state:

- New src/lib/layout/orchestration.svelte.ts with an Orchestration
  class. Reactive fields (activeLeafId, notifications, distros) are
  class-field $state declarations; methods mutate them directly.
  Provided via context (provideOrchestration / useOrchestration);
  no prop drilling.
- App.svelte: provideOrchestration(treeOps). Tree mutations remain
  closures over the App-level tree $state; the class delegates to
  them. Pane only takes `node` now.
- Pane.svelte / SplitNode.svelte: stop drilling ops + activeLeafId.
  Pure pass-through of node.
- LeafPane.svelte: useOrchestration(); `active = $derived(
  orch.activeLeafId === leaf.id)` reads the class field directly so
  Svelte 5 tracks it per-property.
- Notifications.svelte: receives notifications + onDismiss from App
  (which gets them from orch).
- Deleted src/lib/layout/ops.ts (TreeOps moved into orchestration).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-22 13:59:34 +01:00
parent 6b9a3adf85
commit e871ee8e6e
6 changed files with 243 additions and 204 deletions

View file

@ -1,24 +1,15 @@
<script lang="ts">
import type { TreeNode } from "./tree";
import type { PaneOps } from "./ops";
import SplitNode from "./SplitNode.svelte";
import LeafPane from "./LeafPane.svelte";
let {
node,
ops,
activeLeafId,
}: {
node: TreeNode;
ops: PaneOps;
activeLeafId: string | null;
} = $props();
let { node }: { node: TreeNode } = $props();
</script>
{#if node.kind === "split"}
<SplitNode {node} {ops} {activeLeafId} />
<SplitNode {node} />
{:else}
{#key node.id}
<LeafPane leaf={node} {ops} {activeLeafId} />
<LeafPane leaf={node} />
{/key}
{/if}