skybridge 0.0.0-dev.d9ee984 → 0.0.0-dev.db1ee0e

package/README.md

@@ -1,3 +1,125 @@
+<div align="center">
+
+<img alt="Skybridge" src="docs/static/img/github-banner.png" width="100%">
+
+<br />
+
 # Skybridge
 
-Skybridge is a framework for building ChatGPT apps
+**Build ChatGPT Apps. The Modern TypeScript Way.**
+
+The fullstack TypeScript framework for ChatGPT Apps.<br />
+**Type-safe. React-powered. Zero config.**
+
+<br />
+
+[![NPM Version](https://img.shields.io/npm/v/skybridge?color=e90060&style=for-the-badge)](https://www.npmjs.com/package/skybridge)
+[![NPM Downloads](https://img.shields.io/npm/dm/skybridge?color=e90060&style=for-the-badge)](https://www.npmjs.com/package/skybridge)
+[![GitHub License](https://img.shields.io/github/license/alpic-ai/skybridge?color=e90060&style=for-the-badge)](https://github.com/alpic-ai/skybridge/blob/main/LICENSE)
+
+<br />
+
+[Documentation](https://skybridge.tech) · [Quick Start](https://github.com/new?template_name=apps-sdk-template&template_owner=alpic-ai) · [Examples](https://github.com/alpic-ai/apps-sdk-template)
+
+</div>
+
+<br />
+
+## ✨ Why Skybridge?
+
+ChatGPT Apps let you embed **rich, interactive UIs** directly in conversations. But the raw SDK is low-level—no hooks, no type safety, no dev tools, and no HMR.
+
+**Skybridge fixes that.**
+
+| | |
+|:--|:--|
+| 👨‍💻 **Full Dev Environment** — HMR, debug traces, and local devtools. No more refresh loops. | ✅ **End-to-End Type Safety** — tRPC-style inference from server to widget. Autocomplete everywhere. |
+| 🔄 **Widget-to-Model Sync** — Keep the model aware of UI state with `data-llm`. Dual surfaces, one source of truth. | ⚒️ **React Query-style Hooks** — `isPending`, `isError`, callbacks. State management you already know. |
+
+<br />
+
+## 🚀 Get Started
+
+**Create a new ChatGPT app:**
+
+```bash
+gh repo create my-app --template alpic-ai/apps-sdk-template --clone
+cd my-app && pnpm install
+```
+
+**Or add to an existing project:**
+
+```bash
+npm i skybridge
+yarn add skybridge
+pnpm add skybridge
+bun add skybridge
+deno add skybridge
+```
+
+<div align="center">
+
+**👉 [Read the Docs](https://skybridge.tech) 👈**
+
+</div>
+
+<br />
+
+## 📦 The Stack
+
+- **`skybridge/server`** — Drop-in MCP SDK replacement with widget registration and type inference.
+- **`skybridge/web`** — React hooks and components for ChatGPT's runtime.
+
+### Server
+
+```ts
+import { McpServer } from "skybridge/server";
+
+server.registerWidget("flights", {}, {
+  inputSchema: { destination: z.string() },
+}, async ({ destination }) => {
+  const flights = await searchFlights(destination);
+  return { structuredContent: { flights } };
+});
+```
+
+### Widget
+
+```tsx
+import { useToolInfo } from "skybridge/web";
+
+function FlightsWidget() {
+  const { output } = useToolInfo();
+
+  return output.structuredContent.flights.map(f =>
+    <FlightCard key={f.id} flight={f} />
+  );
+}
+```
+
+<br />
+
+## 🎯 Features at a Glance
+
+- **Live Reload** — Vite HMR. See changes instantly without reinstalling.
+- **Typed Hooks** — Full autocomplete for tools, inputs, outputs.
+- **Widget → Tool Calls** — Trigger server actions from UI.
+- **Dual Surface Sync** — Keep model aware of what users see with `data-llm`.
+- **React Query-style API** — `isPending`, `isError`, callbacks.
+- **MCP Compatible** — Extends the official SDK. Works with any MCP client.
+
+<br />
+
+<div align="center">
+
+[![GitHub Discussions](https://img.shields.io/badge/Discussions-Ask%20Questions-blue?style=flat-square&logo=github)](https://github.com/alpic-ai/skybridge/discussions)
+[![GitHub Issues](https://img.shields.io/badge/Issues-Report%20Bugs-red?style=flat-square&logo=github)](https://github.com/alpic-ai/skybridge/issues)
+[![Discord](https://img.shields.io/badge/Discord-Chat-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/gNAazGueab)
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions
+
+<br />
+
+**[MIT License](LICENSE)** · Made with ❤️ by **[Alpic](https://alpic.ai)**
+
+</div>

package/dist/src/server/devtoolsStaticServer.d.ts

@@ -0,0 +1,15 @@
+import { type RequestHandler } from "express";
+/**
+ * Serve the built devtools React app
+ * This router serves static files from the devtools's dist directory.
+ * It should be installed at the application root, like so:
+ *
+ *  const app = express();
+ *
+ * if (env.NODE_ENV !== "production") {
+ *   app.use(await devtoolsStaticServer(server));
+ *   app.use(await widgetsDevServer());
+ *                     ^^^^^^^^ Make sure to install the devtoolsStaticServer before the widgetsDevServer
+ * }
+ */
+export declare const devtoolsStaticServer: () => Promise<RequestHandler>;

package/dist/src/server/devtoolsStaticServer.js

@@ -0,0 +1,38 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import cors from "cors";
+import express, {} from "express";
+/**
+ * Serve the built devtools React app
+ * This router serves static files from the devtools's dist directory.
+ * It should be installed at the application root, like so:
+ *
+ *  const app = express();
+ *
+ * if (env.NODE_ENV !== "production") {
+ *   app.use(await devtoolsStaticServer(server));
+ *   app.use(await widgetsDevServer());
+ *                     ^^^^^^^^ Make sure to install the devtoolsStaticServer before the widgetsDevServer
+ * }
+ */
+export const devtoolsStaticServer = async () => {
+    const router = express.Router();
+    const currentDir = path.dirname(fileURLToPath(import.meta.url));
+    const devtoolsPath = path.join(currentDir, "..", "devtools");
+    router.use(cors());
+    router.use(express.static(devtoolsPath));
+    router.get("/", (_req, res, next) => {
+        const indexHtmlPath = path.join(devtoolsPath, "index.html");
+        try {
+            const indexHtml = readFileSync(indexHtmlPath, "utf-8");
+            res.setHeader("Content-Type", "text/html");
+            res.send(indexHtml);
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    return router;
+};
+//# sourceMappingURL=devtoolsStaticServer.js.map

package/dist/src/server/devtoolsStaticServer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsStaticServer.js","sourceRoot":"","sources":["../../../src/server/devtoolsStaticServer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,OAAO,EAAE,EAAuB,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,IAA6B,EAAE;IACtE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAE7D,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IAEnB,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC;YACH,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YACvD,GAAG,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;YAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,CAAC;QACd,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/src/server/index.d.ts

@@ -0,0 +1,5 @@
+export { devtoolsStaticServer } from "./devtoolsStaticServer.js";
+export type { AnyToolRegistry, InferTools, ToolInput, ToolNames, ToolOutput, ToolResponseMetadata, } from "./inferUtilityTypes.js";
+export type { McpServerTypes, ToolDef } from "./server.js";
+export { McpServer } from "./server.js";
+export { widgetsDevServer } from "./widgetsDevServer.js";

package/dist/{server → src/server}/index.js

@@ -1,4 +1,4 @@
+export { devtoolsStaticServer } from "./devtoolsStaticServer.js";
 export { McpServer } from "./server.js";
 export { widgetsDevServer } from "./widgetsDevServer.js";
-export { mcp } from "./middleware.js";
 //# sourceMappingURL=index.js.map

package/dist/src/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAUjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/src/server/inferUtilityTypes.d.ts

@@ -0,0 +1,64 @@
+import type { McpServerTypes, ToolDef } from "./server.js";
+/**
+ * Any tool registry shape (includes both widgets and regular tools).
+ * Used as a constraint for type parameters that accept tool registries.
+ */
+export type AnyToolRegistry = Record<string, ToolDef>;
+/**
+ * Extract the tool registry type from an McpServer instance.
+ * This includes both widgets (registered via widget()) and regular tools (registered via registerTool()).
+ *
+ * Uses the `$types` property pattern for cross-package type inference.
+ * This works across package boundaries because TypeScript uses structural typing
+ * on the shape of `$types`, rather than nominal typing on the McpServer class itself.
+ *
+ * @example
+ * ```ts
+ * type MyTools = InferTools<MyServer>;
+ * // { "search": ToolDef<...>, "calculate": ToolDef<...> }
+ * ```
+ */
+export type InferTools<ServerType> = ServerType extends {
+    $types: McpServerTypes<infer W>;
+} ? W : never;
+type ExtractTool<ServerType, K extends ToolNames<ServerType>> = InferTools<ServerType>[K];
+/**
+ * Get a union of all tool names from an McpServer instance.
+ * This includes both widgets and regular tools.
+ *
+ * @example
+ * ```ts
+ * type Names = ToolNames<MyServer>;
+ * // "search" | "calculate" | "details"
+ * ```
+ */
+export type ToolNames<ServerType> = keyof InferTools<ServerType> & string;
+/**
+ * Get the input type for a specific tool (widget or regular tool).
+ *
+ * @example
+ * ```ts
+ * type SearchInput = ToolInput<MyServer, "search">;
+ * ```
+ */
+export type ToolInput<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["input"];
+/**
+ * Get the output type for a specific tool (widget or regular tool).
+ *
+ * @example
+ * ```ts
+ * type SearchOutput = ToolOutput<MyServer, "search">;
+ * ```
+ */
+export type ToolOutput<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["output"];
+/**
+ * Get the responseMetadata type for a specific tool (widget or regular tool).
+ * This is inferred from the `_meta` property of the tool callback's return value.
+ *
+ * @example
+ * ```ts
+ * type SearchMeta = ToolResponseMetadata<MyServer, "search">;
+ * ```
+ */
+export type ToolResponseMetadata<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["responseMetadata"];
+export {};

package/dist/src/server/inferUtilityTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inferUtilityTypes.js.map

package/dist/src/server/inferUtilityTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inferUtilityTypes.js","sourceRoot":"","sources":["../../../src/server/inferUtilityTypes.ts"],"names":[],"mappings":""}

package/dist/src/server/server.d.ts

@@ -0,0 +1,73 @@
+import { McpServer as McpServerBase, type RegisteredTool } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type { AnySchema, SchemaOutput, ZodRawShapeCompat } from "@modelcontextprotocol/sdk/server/zod-compat.js";
+import type { RequestHandlerExtra } from "@modelcontextprotocol/sdk/shared/protocol.js";
+import type { CallToolResult, Resource, ServerNotification, ServerRequest, ToolAnnotations } from "@modelcontextprotocol/sdk/types.js";
+export type ToolDef<TInput = unknown, TOutput = unknown, TResponseMetadata = unknown> = {
+    input: TInput;
+    output: TOutput;
+    responseMetadata: TResponseMetadata;
+};
+type McpServerOriginalResourceConfig = Omit<Resource, "uri" | "name" | "mimeType">;
+type McpServerOriginalToolConfig = Omit<Parameters<typeof McpServerBase.prototype.registerTool<ZodRawShapeCompat, ZodRawShapeCompat>>[1], "inputSchema" | "outputSchema">;
+type Simplify<T> = {
+    [K in keyof T]: T[K];
+};
+type ExtractStructuredContent<T> = T extends {
+    structuredContent: infer SC;
+} ? Simplify<SC> : never;
+type ExtractMeta<T> = [Extract<T, {
+    _meta: unknown;
+}>] extends [never] ? unknown : Extract<T, {
+    _meta: unknown;
+}> extends {
+    _meta: infer M;
+} ? Simplify<M> : unknown;
+/**
+ * Type-level marker interface for cross-package type inference.
+ * This enables TypeScript to infer tool types across package boundaries
+ * using structural typing on the $types property, rather than relying on
+ * class generic inference which fails when McpServer comes from different
+ * package installations.
+ *
+ * Inspired by tRPC's _def pattern and Hono's type markers.
+ */
+export interface McpServerTypes<TTools extends Record<string, ToolDef>> {
+    readonly tools: TTools;
+}
+type ShapeOutput<Shape extends ZodRawShapeCompat> = Simplify<{
+    [K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? never : K]: SchemaOutput<Shape[K]>;
+} & {
+    [K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? K : never]?: SchemaOutput<Shape[K]>;
+}>;
+type AddTool<TTools, TName extends string, TInput extends ZodRawShapeCompat, TOutput, TResponseMetadata = unknown> = McpServer<TTools & {
+    [K in TName]: ToolDef<ShapeOutput<TInput>, TOutput, TResponseMetadata>;
+}>;
+type ToolConfig<TInput extends ZodRawShapeCompat | AnySchema> = {
+    title?: string;
+    description?: string;
+    inputSchema?: TInput;
+    outputSchema?: ZodRawShapeCompat | AnySchema;
+    annotations?: ToolAnnotations;
+    _meta?: Record<string, unknown>;
+};
+type ToolHandler<TInput extends ZodRawShapeCompat, TReturn extends {
+    content: CallToolResult["content"];
+} = CallToolResult> = (args: ShapeOutput<TInput>, extra: RequestHandlerExtra<ServerRequest, ServerNotification>) => TReturn | Promise<TReturn>;
+export declare class McpServer<TTools extends Record<string, ToolDef> = Record<never, ToolDef>> extends McpServerBase {
+    readonly $types: McpServerTypes<TTools>;
+    registerWidget<TName extends string, TInput extends ZodRawShapeCompat, TReturn extends {
+        content: CallToolResult["content"];
+    }>(name: TName, resourceConfig: McpServerOriginalResourceConfig, toolConfig: McpServerOriginalToolConfig & {
+        inputSchema?: TInput;
+        outputSchema?: ZodRawShapeCompat | AnySchema;
+    }, toolCallback: ToolHandler<TInput, TReturn>): AddTool<TTools, TName, TInput, ExtractStructuredContent<TReturn>, ExtractMeta<TReturn>>;
+    registerTool<TName extends string, InputArgs extends ZodRawShapeCompat, TReturn extends {
+        content: CallToolResult["content"];
+    }>(name: TName, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs, TReturn>): AddTool<TTools, TName, InputArgs, ExtractStructuredContent<TReturn>, ExtractMeta<TReturn>>;
+    registerTool<InputArgs extends ZodRawShapeCompat>(name: string, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs>): RegisteredTool;
+    private registerWidgetResource;
+    private lookupDistFile;
+    private lookupDistFileWithIndexFallback;
+    private readManifest;
+}
+export {};

package/dist/src/server/server.js

@@ -0,0 +1,74 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { McpServer as McpServerBase, } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { templateHelper } from "./templateHelper.js";
+export class McpServer extends McpServerBase {
+    registerWidget(name, resourceConfig, toolConfig, toolCallback) {
+        const resourceMetadata = {
+            ...(resourceConfig._meta ?? {}),
+        };
+        if (toolConfig.description !== undefined) {
+            resourceMetadata["openai/widgetDescription"] = toolConfig.description;
+        }
+        const appsSdkResourceConfig = {
+            uri: `ui://widgets/apps-sdk/${name}.html`,
+            mimeType: "text/html+skybridge",
+        };
+        const extAppsResourceConfig = {
+            uri: `ui://widgets/ext-apps/${name}.html`,
+            mimeType: "text/html;profile=mcp-app",
+        };
+        [appsSdkResourceConfig, extAppsResourceConfig].forEach(({ uri, mimeType }) => {
+            this.registerWidgetResource({
+                name,
+                widgetUri: uri,
+                mimeType,
+                resourceConfig,
+                resourceMetadata,
+            });
+        });
+        const toolMeta = {
+            ...toolConfig._meta,
+            "openai/outputTemplate": appsSdkResourceConfig.uri,
+            // "ui/resourceUri": extAppsResourceConfig.uri,
+        };
+        this.registerTool(name, {
+            ...toolConfig,
+            _meta: toolMeta,
+        }, toolCallback);
+        return this;
+    }
+    registerTool(name, config, cb) {
+        super.registerTool(name, config, cb);
+        return this;
+    }
+    registerWidgetResource({ name, widgetUri, mimeType, resourceConfig, resourceMetadata, }) {
+        this.registerResource(name, widgetUri, { ...resourceConfig, _meta: resourceMetadata }, async (uri, extra) => {
+            const serverUrl = process.env.NODE_ENV === "production"
+                ? `https://${extra?.requestInfo?.headers?.["x-forwarded-host"] ?? extra?.requestInfo?.headers?.host}`
+                : `http://localhost:3000`;
+            const html = process.env.NODE_ENV === "production"
+                ? templateHelper.renderProduction({
+                    serverUrl,
+                    widgetFile: this.lookupDistFileWithIndexFallback(`src/widgets/${name}`),
+                    styleFile: this.lookupDistFile("style.css"),
+                })
+                : templateHelper.renderDevelopment({ serverUrl, widgetName: name });
+            return { contents: [{ uri: uri.href, mimeType, text: html }] };
+        });
+    }
+    lookupDistFile(key) {
+        const manifest = this.readManifest();
+        return manifest[key]?.file;
+    }
+    lookupDistFileWithIndexFallback(basePath) {
+        const manifest = this.readManifest();
+        const flatFileKey = `${basePath}.tsx`;
+        const indexFileKey = `${basePath}/index.tsx`;
+        return manifest[flatFileKey]?.file ?? manifest[indexFileKey]?.file;
+    }
+    readManifest() {
+        return JSON.parse(readFileSync(path.join(process.cwd(), "dist", "assets", ".vite", "manifest.json"), "utf-8"));
+    }
+}
+//# sourceMappingURL=server.js.map

package/dist/src/server/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../src/server/server.ts"],"names":[],"mappings":"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"}

package/dist/src/server/templateHelper.d.ts

@@ -0,0 +1,15 @@
+declare class TemplateHelper {
+    private templateCache;
+    private loadTemplate;
+    renderProduction(data: {
+        serverUrl: string;
+        widgetFile: string;
+        styleFile: string;
+    }): string;
+    renderDevelopment(data: {
+        serverUrl: string;
+        widgetName: string;
+    }): string;
+}
+export declare const templateHelper: TemplateHelper;
+export {};

package/dist/src/server/templateHelper.js

@@ -0,0 +1,30 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import Handlebars from "handlebars";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+class TemplateHelper {
+    templateCache = new Map();
+    loadTemplate(templateName) {
+        const cached = this.templateCache.get(templateName);
+        if (cached) {
+            return cached;
+        }
+        const templatePath = join(__dirname, "templates", `${templateName}.hbs`);
+        const templateSource = readFileSync(templatePath, "utf-8");
+        const template = Handlebars.compile(templateSource);
+        this.templateCache.set(templateName, template);
+        return template;
+    }
+    renderProduction(data) {
+        const template = this.loadTemplate("production");
+        return template(data);
+    }
+    renderDevelopment(data) {
+        const template = this.loadTemplate("development");
+        return template(data);
+    }
+}
+export const templateHelper = new TemplateHelper();
+//# sourceMappingURL=templateHelper.js.map

package/dist/src/server/templateHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateHelper.js","sourceRoot":"","sources":["../../../src/server/templateHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEtC,MAAM,cAAc;IACV,aAAa,GAAG,IAAI,GAAG,EAAsC,CAAC;IAE9D,YAAY,CAAC,YAAoB;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACpD,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,GAAG,YAAY,MAAM,CAAC,CAAC;QACzE,MAAM,cAAc,GAAG,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAC3D,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEpD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,gBAAgB,CAAC,IAIhB;QACC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACjD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,iBAAiB,CAAC,IAA+C;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;CACF;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC"}

package/dist/src/server/templates/development.hbs

@@ -0,0 +1,12 @@
+<base href="{{serverUrl}}" />
+<script type="module">
+  import { injectIntoGlobalHook } from "{{serverUrl}}/@react-refresh";
+  injectIntoGlobalHook(window); window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;
+  window.__vite_plugin_react_preamble_installed__ = true;
+</script>
+<script type="module" src="{{serverUrl}}/@vite/client"></script>
+<div id="root"></div>
+<script type="module" id="dev-widget-entry">
+  import('{{serverUrl}}/src/widgets/{{widgetName}}');
+</script>

package/dist/src/server/templates/production.hbs

@@ -0,0 +1,6 @@
+<base href="{{serverUrl}}" />
+<div id="root"></div>
+<script type="module">
+  import('{{serverUrl}}/assets/{{widgetFile}}');
+</script>
+<link rel="stylesheet" crossorigin href="{{serverUrl}}/assets/{{styleFile}}" />

package/dist/{server → src/server}/widgetsDevServer.d.ts

@@ -1,9 +1,12 @@
 import { type RequestHandler } from "express";
 /**
- * Install Vite dev server when env is not production
+ * Install Vite dev server
  * This router MUST be installed at the application root, like so:
  *
  *  const app = express();
- *  app.use(await widgetsRouter());
+ *
+ * if (env.NODE_ENV !== "production") {
+ *   app.use(await widgetsRouter());
+ * }
  */
 export declare const widgetsDevServer: () => Promise<RequestHandler>;

package/dist/{server → src/server}/widgetsDevServer.js

@@ -1,12 +1,15 @@
-import express, {} from "express";
-import cors from "cors";
 import path from "node:path";
+import cors from "cors";
+import express, {} from "express";
 /**
- * Install Vite dev server when env is not production
+ * Install Vite dev server
  * This router MUST be installed at the application root, like so:
  *
  *  const app = express();
- *  app.use(await widgetsRouter());
+ *
+ * if (env.NODE_ENV !== "production") {
+ *   app.use(await widgetsRouter());
+ * }
  */
 export const widgetsDevServer = async () => {
     const router = express.Router();
@@ -14,7 +17,7 @@ export const widgetsDevServer = async () => {
     const workspaceRoot = searchForWorkspaceRoot(process.cwd());
     const webAppRoot = path.join(workspaceRoot, "web");
     const configResult = await loadConfigFromFile({ command: "serve", mode: "development" }, path.join(webAppRoot, "vite.config.ts"), webAppRoot);
-    // Remove build-specific options that don't apply to dev server
+    // biome-ignore lint/correctness/noUnusedVariables: Remove build-specific options that don't apply to dev server
     const { build, preview, ...devConfig } = configResult?.config || {};
     const vite = await createServer({
         ...devConfig,

package/dist/src/server/widgetsDevServer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgetsDevServer.js","sourceRoot":"","sources":["../../../src/server/widgetsDevServer.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,OAAO,EAAE,EAAuB,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,IAA6B,EAAE;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAEhC,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,GAChE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC;IACvB,MAAM,aAAa,GAAG,sBAAsB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,MAAM,kBAAkB,CAC3C,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,EACzC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EACvC,UAAU,CACX,CAAC;IAEF,gHAAgH;IAChH,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC;IAEpE,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC;QAC9B,GAAG,SAAS;QACZ,UAAU,EAAE,KAAK,EAAE,kFAAkF;QACrG,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE;YACN,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;SACrB;QACD,IAAI,EAAE,UAAU;QAChB,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC;SACvC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IACnB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAElC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}