blob: 8ce8ade9af2314a8f8610cc41eddf0aad257cc30 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<script lang="ts">
import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract";
import { groupRenderFields, planSurface } from "../logic/plan";
import Button from "./Button.svelte";
import MessageQueueList from "./MessageQueueList.svelte";
import Number from "./Number.svelte";
import Progress from "./Progress.svelte";
import Selector from "./Selector.svelte";
import StatTable from "./StatTable.svelte";
import SurfaceTable from "./SurfaceTable.svelte";
import TodoList from "./TodoList.svelte";
import Toggle from "./Toggle.svelte";
let {
spec,
onInvoke,
onCancelQueuedMessage,
}: {
spec: SurfaceSpec;
onInvoke: (msg: InvokeMessage) => void;
/**
* Cancel a queued message by id — threaded ONLY to the `message-queue`
* renderer. Optional + scoped: generic surfaces (which pass nothing) keep
* rendering a read-only queue list. Kept as a typed callback (never a
* stringly-typed bus); the renderer dispatch is on `rendererId` (a renderer
* KIND), never the surface id.
*/
onCancelQueuedMessage?: (messageId: string) => void;
} = $props();
const plan = $derived(planSurface(spec));
// Consecutive stats render together as one aligned table; everything else is
// a standalone widget. Grouping keys on field KIND only — never the surface id.
const groups = $derived(groupRenderFields(plan.fields));
</script>
<article>
<h2>{spec.title}</h2>
{#each groups as group, i (i)}
{#if group.type === "stats"}
<StatTable stats={group.stats} />
{:else if group.field.kind === "toggle"}
<Toggle field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "progress"}
<Progress field={group.field} />
{:else if group.field.kind === "selector"}
<Selector field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "number"}
<Number field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "button"}
<Button field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "custom"}
<!-- Dispatch on rendererId (a renderer KIND, never a surface id);
unknown ids gracefully render nothing. -->
{#if group.field.rendererId === "table"}
<SurfaceTable payload={group.field.payload} />
{:else if group.field.rendererId === "message-queue"}
<MessageQueueList payload={group.field.payload} onCancel={onCancelQueuedMessage} />
{:else if group.field.rendererId === "todo"}
<TodoList payload={group.field.payload} />
{/if}
{/if}
{/each}
</article>
|
