@emseepea/svelte 0.0.0-bootstrap.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Windy Road Technology Pty. Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Svelte Result Renderer
+
+`@emseepea/svelte` renders a validated Em See Pea result view with native HTML.
+It is unstyled and does not send requests, authenticate people, or authorize
+server actions.
+
+```svelte
+<script>
+  import { ResultCard, createMcpApp } from "@emseepea/svelte";
+  import { parseResultView } from "@emseepea/server/ui";
+
+  const app = createMcpApp({ name: "Result", version: "1.0.0", parseResult: parseResultView });
+  const view = $derived($app.result ?? loadingView);
+</script>
+
+<ResultCard {view} headingLevel={2} onAction={() => app.sendMessage("Continue")} />
+```
+
+`createMcpApp` implements the standards-first MCP Apps initialization,
+host-context, tool-result, cancellation, teardown, and `ui/message` lifecycle.
+Keep domain result parsing and mapping in the adopter, and treat host messages
+as untrusted.
+
+For a self-contained resource that does not already use either framework, see
+the measured [React and Svelte bundle guidance](../framework/README.md#choose-a-result-card-package).
+
+This package is open source under MIT and remains pre-alpha while its version is below 1.0.

package/package.json

@@ -1,12 +1,44 @@
 {
   "name": "@emseepea/svelte",
-  "version": "0.0.0-bootstrap.0",
-  "description": "Reserved package identity for the governed Em See Pea release pipeline.",
+  "version": "0.1.0",
+  "private": false,
   "license": "MIT",
-  "repository": "git+https://github.com/emseepea/emseepea.git",
-  "publishConfig": {
-    "access": "public",
-    "tag": "bootstrap",
-    "provenance": false
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emseepea/emseepea.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://emseepea.github.io/emseepea/examples/",
+  "bugs": "https://github.com/emseepea/emseepea/issues",
+  "publishConfig": { "access": "public", "provenance": true },
+  "type": "module",
+  "svelte": "./src/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "svelte": "./src/index.js",
+      "import": "./src/index.js"
+    }
+  },
+  "files": ["src", "LICENSE", "README.md"],
+  "scripts": {
+    "build": "node test/compile.test.mjs",
+    "prepack": "npm run build",
+    "test": "npm run build && npm run test:built",
+    "test:built": "node --test test/*.test.mjs"
+  },
+  "dependencies": {
+    "@emseepea/server": "0.11.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "0.28.2",
+    "playwright": "1.62.1",
+    "svelte": "5.57.0"
+  },
+  "engines": {
+    "node": ">=22"
   }
 }

package/src/ResultCard.svelte

@@ -0,0 +1,116 @@
+<script>
+  import { parseResultView } from "@emseepea/server/ui";
+  import { tick } from "svelte";
+
+  let { view: candidate, headingLevel, onAction, idPrefix } = $props();
+  const componentId = $props.id();
+  const view = $derived(parseResultView(candidate));
+  const level = $derived(checkedHeadingLevel(headingLevel));
+  const prefix = $derived(idPrefix === undefined
+    ? `${view.id}-${componentId.replaceAll(":", "")}`
+    : checkedIdentifier("idPrefix", idPrefix));
+  const headingId = $derived(`${prefix}--heading`);
+  let result = $state();
+  let lastFocusKey = "";
+
+  $effect(() => {
+    if (view.state.focusTarget === "none") {
+      lastFocusKey = "";
+      return;
+    }
+    const focusKey = `${view.state.kind}\u0000${view.state.focusTarget}\u0000${view.state.status}`;
+    if (lastFocusKey === focusKey) return;
+    lastFocusKey = focusKey;
+    tick().then(() => {
+      if (lastFocusKey !== focusKey) return;
+      const target = view.state.focusTarget === "result"
+        ? result
+        : view.state.focusTarget === "status"
+          ? result?.querySelector('[data-emseepea-part="status"]')
+          : result?.querySelector('[data-emseepea-part="action"]:not(:disabled)');
+      target?.focus();
+    });
+  });
+
+  function checkedHeadingLevel(value) {
+    if (![2, 3, 4, 5, 6].includes(value)) throw new TypeError("headingLevel must be an integer from 2 to 6");
+    return value;
+  }
+
+  function checkedIdentifier(field, value) {
+    if (typeof value !== "string" || !/^[A-Za-z][A-Za-z0-9_-]{0,63}$/.test(value)) {
+      throw new TypeError(`${field} must be a valid identifier`);
+    }
+    return value;
+  }
+</script>
+
+<section
+  bind:this={result}
+  data-emseepea-part="result-view"
+  data-emseepea-state={view.state.kind}
+  aria-labelledby={headingId}
+  tabindex={view.state.focusTarget === "result" ? -1 : undefined}
+  autofocus={view.state.focusTarget === "result"}
+>
+  <svelte:element this={`h${level}`} id={headingId}>{view.heading}</svelte:element>
+  <div
+    data-emseepea-part="status"
+    role="status"
+    aria-live="polite"
+    aria-atomic="true"
+    aria-relevant="additions text"
+    tabindex={view.state.focusTarget === "status" ? -1 : undefined}
+    autofocus={view.state.focusTarget === "status"}
+  >{view.state.status}</div>
+  {#if view.headline}<p data-emseepea-part="headline">{view.headline}</p>{/if}
+  {#if view.summary}<p data-emseepea-part="summary">{view.summary}</p>{/if}
+  {#if view.metrics.length}
+    <dl data-emseepea-part="metrics">
+      {#each view.metrics as metric (`${metric.label}:${metric.value}`)}
+        <div data-emseepea-part="metric">
+          <dt>{metric.label}{#if metric.hint} <span data-emseepea-part="hint">({metric.hint})</span>{/if}</dt>
+          <dd>{metric.value}</dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+  {#if view.reasons}
+    <div data-emseepea-part="reasons">
+      <p id={`${prefix}--reasons-label`} data-emseepea-part="reasons-label">{view.reasons.label}</p>
+      <ul aria-labelledby={`${prefix}--reasons-label`}>
+        {#each view.reasons.items as item (item)}<li>{item}</li>{/each}
+      </ul>
+    </div>
+  {/if}
+  {#if view.assumptions}
+    <div data-emseepea-part="assumptions">
+      <p id={`${prefix}--assumptions-label`} data-emseepea-part="assumptions-label">{view.assumptions.label}</p>
+      <ul aria-labelledby={`${prefix}--assumptions-label`}>
+        {#each view.assumptions.items as item (item)}<li>{item}</li>{/each}
+      </ul>
+    </div>
+  {/if}
+  {#if view.disclosure}
+    <details data-emseepea-part="disclosure">
+      <summary>{view.disclosure.label}</summary>
+      <ul>{#each view.disclosure.items as item (item)}<li>{item}</li>{/each}</ul>
+    </details>
+  {/if}
+  {#if view.actions.length}
+    <div data-emseepea-part="actions" role="group" aria-label={view.actionsLabel}>
+      {#each view.actions as action (action.id)}
+        <button
+          type="button"
+          data-emseepea-part="action"
+          data-emseepea-action={action.id}
+          aria-label={action.accessibleName}
+          disabled={action.disabled}
+          autofocus={view.state.focusTarget === "actions" && !action.disabled && view.actions.findIndex((item) => !item.disabled) === view.actions.indexOf(action)}
+          onclick={() => onAction?.(action)}
+        >{action.label}</button>
+      {/each}
+    </div>
+  {/if}
+  <p data-emseepea-part="disclaimer">{view.disclaimer}</p>
+</section>

package/src/index.d.ts

@@ -0,0 +1,18 @@
+import type { ResultAction, ResultView, McpAppControllerOptions, McpAppState } from "@emseepea/server/ui";
+import type { Component } from "svelte";
+import type { Readable } from "svelte/store";
+
+export interface ResultCardProps {
+  readonly view: ResultView;
+  readonly headingLevel: 2 | 3 | 4 | 5 | 6;
+  readonly onAction?: (action: ResultAction) => void;
+  readonly idPrefix?: string;
+}
+
+export const ResultCard: Component<ResultCardProps>;
+
+export interface McpApp<Result> extends Readable<McpAppState<Result>> {
+  readonly sendMessage: (text: string) => Promise<void>;
+}
+
+export function createMcpApp<Result>(options: Omit<McpAppControllerOptions<Result>, "requestId">): McpApp<Result>;

package/src/index.js

@@ -0,0 +1,2 @@
+export { default as ResultCard } from "./ResultCard.svelte";
+export { createMcpApp } from "./mcp.js";

package/src/mcp.js

@@ -0,0 +1,15 @@
+import { createMcpAppController } from "@emseepea/server/ui";
+import { readable } from "svelte/store";
+
+export function createMcpApp(options) {
+  const controller = createMcpAppController(options);
+  const state = readable(controller.getState(), (set) => {
+    const unsubscribe = controller.subscribe(() => set(controller.getState()));
+    const disconnect = typeof window === "undefined" ? undefined : controller.connect(window);
+    return () => {
+      unsubscribe();
+      disconnect?.();
+    };
+  });
+  return { subscribe: state.subscribe, sendMessage: controller.sendMessage };
+}