Implement v0.4 subscriptions + v0.5 theming and plugin slots

- SSE and WebSocket fetchers via graphql-sse and graphql-ws,
  returning AsyncIterable results
- SessionStore.run consumes AsyncIterable streams with
  subscriptionMode "append" (timestamped) or "replace" and
  honors an AbortSignal for cancellation
- Chrome CSS variables documented in styles/theme.scss with
  prefers-color-scheme light/dark gating and .graphiql-light override
- Svelte 5 snippet slots on GraphiQL: toolbarExtras, tabExtras,
  resultFooter

3 files changed, 22 insertions, 4 deletions

diff --git a/source/library/components/ResultViewer.svelte b/source/library/components/ResultViewer.svelte
index e2c74fe..083828d 100644
--- a/source/library/components/ResultViewer.svelte
+++ b/source/library/components/ResultViewer.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
   import Editor from "./Editor.svelte";
   import type { Extension } from "@codemirror/state";
+  import type { Snippet } from "svelte";
 
   type Props = {
+    footer?: Snippet<[{ result: string }]>;
     theme?: Extension;
     value: string;
   };
 
-  let { theme, value }: Props = $props();
+  let { footer, theme, value }: Props = $props();
 
   function noop(_v: string) {}
 </script>
@@ -15,7 +17,7 @@
 <style lang="scss">
   .result {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto 1fr auto;
     height: 100%;
     min-height: 0;
   }
@@ -27,9 +29,19 @@
     padding: 0.25rem 0.75rem;
     text-transform: uppercase;
   }
+
+  .footer {
+    background: var(--graphiql-panel, #252526);
+    border-top: 1px solid var(--graphiql-border, #333);
+    font-size: 0.75rem;
+    padding: 0.25rem 0.75rem;
+  }
 </style>
 
 <div class="result">
   <div class="label">Response</div>
   <Editor language="json" onChange={noop} readOnly {theme} {value}/>
+  {#if footer}
+    <div class="footer">{@render footer({ result: value })}</div>
+  {/if}
 </div>
diff --git a/source/library/components/TabBar.svelte b/source/library/components/TabBar.svelte
index d87449d..9c34f20 100644
--- a/source/library/components/TabBar.svelte
+++ b/source/library/components/TabBar.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { tick } from "svelte";
+  import { tick, type Snippet } from "svelte";
   import type { Tab } from "../state/session.svelte.ts";
 
   type Props = {
     activeId: string;
+    extras?: Snippet<[{ tab: Tab }]>;
     onAdd: () => void;
     onClose: (id: string) => void;
     onRename: (id: string, title: string) => void;
@@ -11,7 +12,7 @@
     tabs: Tab[];
   };
 
-  let { activeId, onAdd, onClose, onRename, onSelect, tabs }: Props = $props();
+  let { activeId, extras, onAdd, onClose, onRename, onSelect, tabs }: Props = $props();
 
   let editingId = $state<string | null>(null);
   let draft = $state<string>("");
@@ -150,6 +151,7 @@
       {:else}
         <span class="title">{tab.title}</span>
       {/if}
+      {#if extras}{@render extras({ tab })}{/if}
       <button
         aria-label="Close tab"
         class="close"
diff --git a/source/library/components/Toolbar.svelte b/source/library/components/Toolbar.svelte
index a17191c..8c75668 100644
--- a/source/library/components/Toolbar.svelte
+++ b/source/library/components/Toolbar.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import type { OperationInfo } from "../graphql/operations.ts";
+  import type { Snippet } from "svelte";
 
   type Props = {
     disabled: boolean;
     docsAvailable?: boolean;
     docsOpen?: boolean;
+    extras?: Snippet;
     historyOpen?: boolean;
     onRun: () => void;
     onSelectOperation?: (name: string | null) => void;
@@ -20,6 +22,7 @@
     disabled,
     docsAvailable = false,
     docsOpen = false,
+    extras,
     historyOpen = false,
     onRun,
     onSelectOperation,
@@ -125,6 +128,7 @@
       {/each}
     </select>
   {/if}
+  {#if extras}{@render extras()}{/if}
   <span class="hint">⌘/Ctrl + Enter</span>
   {#if schemaLoading}
     <span class="hint">Loading schema…</span>