@modcore/plugin-ui-sdk 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.1
+
+- Added the packaged loopback-only development sandbox with one declared mock request and locale/theme switching.
+- Added `createDevelopmentSandboxHost()` for credential-free browser development.
+- Kept development-server assets outside the publishable UI archive boundary.
+
 ## 0.1.0
 
 - Initial public iframe-bridge types, constrained client, UI binding declaration, accessibility contract, and deterministic mock host.

package/README.md

@@ -22,6 +22,18 @@ import { createMockUiHost } from "@modcore/plugin-ui-sdk/testing";
 
 Use `defineUiBinding()` for a `UI_ONLY` theme’s explicit target contract. `createPluginUiClient()` accepts only the authenticated host bridge transport; it has no API for URLs, authorization headers, cookies, or raw network clients. Use `createMockUiHost()` for local tests without a ModCore checkout, management token, or production host.
 
+## Local browser sandbox
+
+The release tarball includes `templates/development-sandbox`. It is a loopback-only browser
+preview with one declared mock request and visible `en`/`zh-CN` and light/dark switches. It uses
+`createDevelopmentSandboxHost()`; it never contacts a ModCore host and cannot be packaged as a
+production UI asset. See the reproducible commands and production boundary in
+[`docs/guide/插件开发.md`](../docs/guide/插件开发.md).
+
+The sandbox is development evidence only. A release candidate must instead contain its built,
+inventory-checked UI files under `META-INF/modcore/ui`, pass artifact preflight, and be signed by
+a production-trusted publisher.
+
 ## Release evidence
 
 Before a public release, run `pnpm test`, `pnpm test:types`, `pnpm build`, and `pnpm pack:check`; publish the generated package metadata, registry integrity value, source revision, changelog, and this support contract together. This source checkout does not publish to a registry automatically.

package/dist/testing.d.ts

@@ -9,6 +9,25 @@ export interface MockUiHost<TContract extends UiContract> {
     setLocale(locale: string): void;
     setTheme(tokens: Readonly<Record<string, string>>): void;
 }
+/**
+ * Fixture data used by the public development sandbox. It deliberately remains a local mock:
+ * it has no credentials, host-private modules, or network transport.
+ */
+export declare const DEVELOPMENT_SANDBOX_CONTRACT: {
+    readonly id: "com.example.profile.settings-ui";
+    readonly version: "v1";
+    readonly schemaSha256: string;
+    readonly operations: {
+        readonly "com.example.profile.read": {
+            readonly id: "com.example.profile.read";
+            readonly request: {};
+            readonly response: {};
+            readonly access: "read";
+        };
+    };
+};
+/** Creates the locale/theme-switchable, credential-free host used by the packaged browser sandbox. */
+export declare function createDevelopmentSandboxHost(): MockUiHost<typeof DEVELOPMENT_SANDBOX_CONTRACT>;
 /** A deterministic local host for SDK tests; it exposes only operations declared by the contract. */
 export declare function createMockUiHost<TContract extends UiContract>(contract: TContract, responses: Partial<{
     [K in keyof TContract["operations"] & string]: TContract["operations"][K]["response"];

package/dist/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAyB,MAAM,YAAY,CAAC;AAEtI,MAAM,WAAW,UAAU,CAAC,SAAS,SAAS,UAAU;IACtD,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,SAAS;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC9E,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC;CAC1D;AAED,qGAAqG;AACrG,wBAAgB,gBAAgB,CAAC,SAAS,SAAS,UAAU,EAC3D,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,OAAO,CAAC;KAAG,CAAC,IAAI,MAAM,SAAS,CAAC,YAAY,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;CAAE,CAAC,EAC7G,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAC5C,UAAU,CAAC,SAAS,CAAC,CAiDvB"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAyB,MAAM,YAAY,CAAC;AAEtI,MAAM,WAAW,UAAU,CAAC,SAAS,SAAS,UAAU;IACtD,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,SAAS;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC9E,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;CAYV,CAAC;AAEhC,sGAAsG;AACtG,wBAAgB,4BAA4B,IAAI,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAmB9F;AAED,qGAAqG;AACrG,wBAAgB,gBAAgB,CAAC,SAAS,SAAS,UAAU,EAC3D,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,OAAO,CAAC;KAAG,CAAC,IAAI,MAAM,SAAS,CAAC,YAAY,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;CAAE,CAAC,EAC7G,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAC5C,UAAU,CAAC,SAAS,CAAC,CAiDvB"}

package/dist/testing.js

@@ -1,4 +1,38 @@
 import { BRIDGE_PROTOCOL } from "./types.js";
+/**
+ * Fixture data used by the public development sandbox. It deliberately remains a local mock:
+ * it has no credentials, host-private modules, or network transport.
+ */
+export const DEVELOPMENT_SANDBOX_CONTRACT = {
+    id: "com.example.profile.settings-ui",
+    version: "v1",
+    schemaSha256: "1".repeat(64),
+    operations: {
+        "com.example.profile.read": {
+            id: "com.example.profile.read",
+            request: {},
+            response: {},
+            access: "read",
+        },
+    },
+};
+/** Creates the locale/theme-switchable, credential-free host used by the packaged browser sandbox. */
+export function createDevelopmentSandboxHost() {
+    return createMockUiHost(DEVELOPMENT_SANDBOX_CONTRACT, { "com.example.profile.read": { displayName: "Ada Lovelace" } }, {
+        candidate: {
+            providerPluginInstanceId: "com.example.theme:development",
+            providerPluginId: "com.example.theme",
+            artifactSha256: "2".repeat(64),
+            uiId: "com.example.theme.development",
+            bindingId: "com.example.theme.profile",
+        },
+        surfaceId: "com.example.profile.settings",
+        policyGeneration: 1,
+        locale: "en",
+        themeTokens: { "color.background": "#ffffff", "color.text": "#172033", "color.accent": "#155eef" },
+        allowedNavigationIds: ["com.example.profile.settings"],
+    });
+}
 /** A deterministic local host for SDK tests; it exposes only operations declared by the contract. */
 export function createMockUiHost(contract, responses, context) {
     const calls = [];

package/dist/testing.js.map

@@ -1 +1 @@
-{"version":3,"file":"testing.js","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2F,MAAM,YAAY,CAAC;AAUtI,qGAAqG;AACrG,MAAM,UAAU,gBAAgB,CAC9B,QAAmB,EACnB,SAA6G,EAC7G,OAA6C;IAE7C,MAAM,KAAK,GAAuC,EAAE,CAAC;IACrD,MAAM,eAAe,GAAG,IAAI,GAAG,EAA4B,CAAC;IAC5D,MAAM,cAAc,GAAG,IAAI,GAAG,EAAsD,CAAC;IACrF,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,IAAI,QAAQ;YAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAC7D,CAAC,CAAC;IACF,MAAM,SAAS,GAAiC;QAC9C,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO;YAChC,aAAa,EAAE,CAAC;YAChB,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAC;gBACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAC;YACjF,CAAC;YACD,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,SAAS,CAAC,WAAW,CAA4D,CAAC;QAC3F,CAAC;QACD,KAAK,CAAC,QAAQ,CAAC,YAAY;YACzB,aAAa,EAAE,CAAC;YAChB,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;QACxD,CAAC;QACD,KAAK,CAAC,SAAS,CAAC,KAAuB;YACrC,aAAa,EAAE,CAAC;YAChB,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,KAAK,CAAC,OAAO;YACX,QAAQ,GAAG,IAAI,CAAC;YAChB,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,cAAc,CAAC,QAAQ;YACrB,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9B,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QACD,aAAa,CAAC,QAAQ;YACpB,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC7B,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;KACF,CAAC;IACF,OAAO;QACL,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;QACjE,SAAS;QACT,KAAK;QACL,SAAS,CAAC,MAAM;YACd,eAAe,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1D,CAAC;QACD,QAAQ,CAAC,MAAM;YACb,cAAc,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"testing.js","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modcore/plugin-ui-sdk",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Public, framework-independent UI bridge SDK for ModCore plugins.",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,7 +27,8 @@
     "dist",
     "README.md",
     "CHANGELOG.md",
-    "SECURITY.md"
+    "SECURITY.md",
+    "templates"
   ],
   "scripts": {
     "clean": "node ./scripts/clean.mjs",

package/templates/development-sandbox/README.md

@@ -0,0 +1,7 @@
+# ModCore UI development sandbox
+
+This template is for local development only. It uses `createDevelopmentSandboxHost()` and has no ModCore server, management token, browser cookie, or production identity.
+
+Run `pnpm install`, `pnpm build`, then `pnpm dev`. Open the printed loopback URL and use the three keyboard-accessible buttons to exercise one declared mock request, the `en`/`zh-CN` locale switch, and the light/dark theme switch.
+
+Never copy `index.html`, `scripts/serve.mjs`, a loopback URL, or development output into `META-INF/modcore/ui`. A publishable plugin contains the built, inventory-checked assets generated by the plugin template, is signed, and is admitted by production preflight.

package/templates/development-sandbox/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ModCore UI development sandbox</title>
+  </head>
+  <body>
+    <main id="sandbox-root"></main>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/templates/development-sandbox/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "modcore-plugin-ui-development-sandbox",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "dev": "node ./scripts/serve.mjs"
+  },
+  "devDependencies": {
+    "@modcore/plugin-ui-sdk": "^0.1.1",
+    "esbuild": "0.25.10"
+  }
+}

package/templates/development-sandbox/scripts/build.mjs

@@ -0,0 +1,16 @@
+import { build } from "esbuild";
+import { cp, mkdir, rm } from "node:fs/promises";
+
+await rm("dist", { recursive: true, force: true });
+await mkdir("dist", { recursive: true });
+await cp("index.html", "dist/index.html");
+await build({
+  entryPoints: ["src/main.ts"],
+  outfile: "dist/main.js",
+  bundle: true,
+  format: "esm",
+  platform: "browser",
+  target: "es2022",
+  legalComments: "none",
+});
+console.log("MODCORE_UI_DEVELOPMENT_SANDBOX_BUILD_SUCCESS");

package/templates/development-sandbox/scripts/serve.mjs

@@ -0,0 +1,27 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { extname, join, normalize } from "node:path";
+
+const port = Number.parseInt(process.env.PORT ?? "4173", 10);
+const root = new URL("../dist/", import.meta.url).pathname;
+const mime = { ".html": "text/html; charset=utf-8", ".js": "application/javascript; charset=utf-8" };
+const server = createServer(async (request, response) => {
+  const pathname = new URL(request.url ?? "/", "http://127.0.0.1").pathname;
+  if (pathname === "/favicon.ico") {
+    response.writeHead(204, { "Cache-Control": "no-store" }).end();
+    return;
+  }
+  const relative = pathname === "/" ? "index.html" : pathname.replace(/^\//, "");
+  const file = normalize(join(root, relative));
+  if (!file.startsWith(root) || !mime[extname(file)]) {
+    response.writeHead(404, { "Cache-Control": "no-store" }).end();
+    return;
+  }
+  try {
+    response.writeHead(200, { "Content-Type": mime[extname(file)], "Cache-Control": "no-store" });
+    response.end(await readFile(file));
+  } catch {
+    response.writeHead(404, { "Cache-Control": "no-store" }).end();
+  }
+});
+server.listen(port, "127.0.0.1", () => console.log(`MODCORE_UI_DEVELOPMENT_SANDBOX_READY url=http://127.0.0.1:${port}`));

package/templates/development-sandbox/src/main.ts

@@ -0,0 +1,45 @@
+import { createPluginUiClient, createUiLocalizer, defineUiAccessibility } from "@modcore/plugin-ui-sdk";
+import { createDevelopmentSandboxHost } from "@modcore/plugin-ui-sdk/testing";
+
+const host = createDevelopmentSandboxHost();
+const client = createPluginUiClient(host.context, host.transport);
+const root = document.querySelector<HTMLElement>("#sandbox-root");
+if (!root) throw new Error("Development sandbox root is missing.");
+
+const accessibility = defineUiAccessibility({
+  localizedIframeTitle: "Profile settings development sandbox",
+  statusRole: "status",
+  supportsKeyboardReturn: true,
+  supportsReducedMotion: true,
+  supportsUserColors: true,
+  supportsTextZoom: true,
+});
+const messages = {
+  en: { title: "Profile UI sandbox", load: "Load profile", locale: "中文", theme: "Dark theme", ready: "Mock host ready", loaded: "Loaded profile for {name}" },
+  "zh-CN": { title: "个人中心 UI 沙箱", load: "读取个人资料", locale: "English", theme: "浅色主题", ready: "Mock host 已就绪", loaded: "已读取 {name} 的个人资料" },
+} as const;
+let locale: keyof typeof messages = "en";
+let dark = false;
+
+function render(status = createUiLocalizer(locale, messages[locale]).t("ready")): void {
+  const t = createUiLocalizer(locale, messages[locale]).t.bind(createUiLocalizer(locale, messages[locale]));
+  root.lang = locale;
+  root.style.cssText = `font: 16px/1.5 system-ui; max-width: 42rem; margin: 3rem auto; padding: 1.5rem; color: ${dark ? "#f2f4f7" : "#172033"}; background: ${dark ? "#101828" : "#ffffff"};`;
+  root.innerHTML = `<section aria-label="${accessibility.localizedIframeTitle}"><h1>${t("title")}</h1><p id="sandbox-status" role="status" aria-live="polite">${status}</p><button id="load" type="button">${t("load")}</button> <button id="locale" type="button">${t("locale")}</button> <button id="theme" type="button">${t("theme")}</button></section>`;
+  root.querySelector<HTMLButtonElement>("#load")?.addEventListener("click", async () => {
+    const profile = await client.request("com.example.profile.read", {});
+    render(t("loaded", { name: profile.displayName }));
+  });
+  root.querySelector<HTMLButtonElement>("#locale")?.addEventListener("click", () => host.setLocale(locale === "en" ? "zh-CN" : "en"));
+  root.querySelector<HTMLButtonElement>("#theme")?.addEventListener("click", () => host.setTheme(dark ? { "color.background": "#ffffff", "color.text": "#172033" } : { "color.background": "#101828", "color.text": "#f2f4f7" }));
+}
+
+client.onLocaleChange((nextLocale) => {
+  locale = nextLocale === "zh-CN" ? "zh-CN" : "en";
+  render();
+});
+client.onThemeChange((tokens) => {
+  dark = tokens["color.background"] === "#101828";
+  render();
+});
+render();