@horizonmedia/blu-next-adapter 0.0.0-stage → 1.2.1

package/README.md

@@ -1,3 +1,82 @@
-# Temporary Holding Version
+# @blu/next-adapter
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Publish an existing **Next.js (App Router)** app as a Blu module, from the same codebase that still runs standalone with `next build`. It's published on npm as **`@horizonmedia/blu-next-adapter`**; your code imports it as **`@blu/next-adapter`**.
+
+It works with **[`@blu/sdk`](../sdk/README.md)**, which you need alongside it.
+
+## Install
+
+It's public on npm, so it needs no `.npmrc` or token (see the [`@blu/sdk` install steps](../sdk/README.md#install)). Add:
+
+```json
+"dependencies": {
+  "@blu/sdk": "npm:@horizonmedia/blu-sdk@^1.8.0",
+  "@blu/next-adapter": "npm:@horizonmedia/blu-next-adapter@^1.1.0"
+},
+"devDependencies": {
+  "vite": "^7.0.0"
+},
+"scripts": {
+  "build:blu": "vite build -c vite.blu.config.ts"
+}
+```
+
+You already have `react`, `tailwindcss` and `autoprefixer` from your Next.js app.
+
+## What you get
+
+| Import | Use |
+|---|---|
+| `@blu/next-adapter/vite` | `bluModule({ name, tailwind })`: the whole module build. `build:blu` builds your app's own pages and components for Module Federation into `public/blu/`, which your Next.js server serves. |
+| `@blu/next-adapter/client` | `<BluNextModule>`: what your root `app/layout.tsx` does, inside Blu. It runs your `app/**/page.tsx` and `layout.tsx` files under Blu's routing. Also `moduleFetch`, `useModuleAssetUrl`, `preloadModuleAsset` and `moduleUrl` for calls to your own server. |
+| `@blu/next-adapter/server` | `createBluNextServer(...)`: turns a Blu token into the caller for your `auth()`, serves the route your server actions arrive at inside Blu, and the CORS helpers for `proxy.ts`. |
+
+**Inside Blu, without changing your pages:**
+- **Routing:** `next/link`, `next/navigation` (`usePathname`, `useParams`, `useSearchParams`, `useRouter`, `redirect()`, `notFound()`) and `next/image` work against Blu's routing. Query strings show in Blu's address bar, and the back button and deep links work.
+- **Server actions** are sent over HTTP with the user's Blu token and run your same action functions.
+- **Styles:** your `globals.css` and Tailwind are scoped to the module, so they can't restyle Blu:
+  - Tailwind's global reset (`@tailwind base`) is dropped, and a small reset scoped to the module is added.
+  - Design tokens on `:root` and `.dark` move onto the module's wrapper.
+  - Rules in `@layer base { … }` are unwrapped and scoped (1.2+):
+    - `:root`, `html` and `body` become the wrapper;
+    - page-root states like `.dark` or `[data-skin="…"]` become the wrapper inside them;
+    - anything else, such as `*` or `h1`, applies inside the wrapper only.
+- **Navigation keeps state:** like Next.js, navigating keeps your providers, top bar and section shells mounted.
+
+## Minimal setup
+
+```ts
+// vite.blu.config.ts
+import { bluModule } from "@blu/next-adapter/vite";
+import tailwind from "./tailwind.config.js";
+export default bluModule({ name: "unified", tailwind });
+```
+
+```tsx
+// blu/App.tsx: your root layout, inside Blu
+import { BluNextModule } from "@blu/next-adapter/client";
+import css from "../app/globals.css?inline";
+
+export default function InBlu() {
+  return (
+    <BluNextModule css={css} pages={import.meta.glob("../app/**/page.tsx", { eager: true })}>
+      {(page) => <YourProviders>{page}</YourProviders>}
+    </BluNextModule>
+  );
+}
+```
+
+```ts
+// app/api/blu/actions/route.ts: your server actions, called from inside Blu
+import * as campaigns from "@/app/actions/campaigns";
+import { createBluNextServer } from "@blu/next-adapter/server";
+
+const blu = createBluNextServer({ moduleId, issuer, jwksUrl, apiUrl, roleMap, allowedOrigins });
+export const POST = (request: Request) => blu.actionsRoute({ campaigns }).POST(request);
+```
+
+For a complete worked example, see the Unified stand-in in this repository: `teams/team-d/README.md` and its `BLU_INTEGRATION.patch`.
+
+## Versions
+
+Requires `@blu/sdk` `^1.5.0`. It's versioned separately; upgrade either within a major version whenever you like.

package/chunks/chunk-P6QUCTDO.js

@@ -0,0 +1,228 @@
+// src/client.tsx
+import { useApiClient, useHost, useRoute } from "@blu/sdk";
+import { Component, createContext, useContext, useEffect, useInsertionEffect, useMemo, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_SCOPE = "blu-module";
+var api = null;
+async function callServerAction(module, name, args) {
+  if (!api) throw new Error("[@blu/next-adapter] server action called outside <BluNextModule>");
+  return api.post("/api/blu/actions", { module, name, args });
+}
+function bluApi() {
+  if (!api) throw new Error("[@blu/next-adapter] bluApi() called outside <BluNextModule>");
+  return api;
+}
+var mod = null;
+var ownPath = (path) => {
+  if (!path.startsWith("/") || path.startsWith("//")) throw new Error(`[@blu/next-adapter] expected a path on your own server ("/api/\u2026"), got "${path}"`);
+  return path;
+};
+function moduleUrl(path) {
+  return mod ? `${mod.baseUrl}${ownPath(path)}` : path;
+}
+async function moduleFetch(path, init = {}) {
+  if (!mod) return fetch(path, init);
+  const headers = new Headers(init.headers);
+  headers.set("Authorization", `Bearer ${await mod.getToken()}`);
+  return fetch(moduleUrl(path), { ...init, headers, credentials: "omit", redirect: "error" });
+}
+var MAX_ASSETS = 200;
+var assets = /* @__PURE__ */ new Map();
+function loadAsset(path) {
+  let p = assets.get(path);
+  if (!p) {
+    p = moduleFetch(path).then(async (r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return URL.createObjectURL(await r.blob());
+    });
+    p.catch(() => assets.delete(path));
+    assets.set(path, p);
+    if (assets.size > MAX_ASSETS) {
+      const [oldest, old] = assets.entries().next().value;
+      assets.delete(oldest);
+      old.then(URL.revokeObjectURL, () => {
+      });
+    }
+  }
+  return p;
+}
+function useModuleAssetUrl(path) {
+  const [loaded2, setLoaded] = useState(null);
+  useEffect(() => {
+    if (!mod) return;
+    let live = true;
+    loadAsset(path).then(
+      (src) => live && setLoaded({ path, src }),
+      () => live && setLoaded({ path, src: null })
+    );
+    return () => {
+      live = false;
+    };
+  }, [path]);
+  if (!mod) return path;
+  return loaded2?.path === path ? loaded2.src : null;
+}
+function preloadModuleAsset(path) {
+  if (!mod) {
+    new window.Image().src = path;
+    return;
+  }
+  loadAsset(path).catch(() => {
+  });
+}
+var toSegments = (key, file) => key.replace(/^.*?\/app\//, "").replace(new RegExp(`(^|/)${file}\\.(t|j)sx?$`), "").split("/").filter((s) => s && !/^\(.*\)$/.test(s));
+function match(segments, path) {
+  const params = {};
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    const catchAll = /^\[\.\.\.(\w+)\]$/.exec(seg);
+    if (catchAll) {
+      if (i >= path.length) return null;
+      params[catchAll[1]] = path.slice(i).join("/");
+      return params;
+    }
+    if (i >= path.length) return null;
+    const param = /^\[(\w+)\]$/.exec(seg);
+    if (param) params[param[1]] = path[i];
+    else if (seg !== path[i]) return null;
+  }
+  return segments.length === path.length ? params : null;
+}
+var ParamsContext = createContext({});
+var useBluParams = () => useContext(ParamsContext);
+var BluRedirect = class extends Error {
+  constructor(href) {
+    super(`redirect(${href})`);
+    this.href = href;
+  }
+  href;
+};
+var BluNotFound = class extends Error {
+  constructor() {
+    super("notFound()");
+  }
+};
+var RouteBoundary = class extends Component {
+  state = { routeKey: this.props.routeKey, caught: null, other: null };
+  static getDerivedStateFromError(error) {
+    return error instanceof BluRedirect || error instanceof BluNotFound ? { caught: error, other: null } : { caught: null, other: error };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.routeKey === state.routeKey ? null : { routeKey: props.routeKey, caught: null, other: null };
+  }
+  componentDidUpdate() {
+    if (this.state.caught instanceof BluRedirect) this.props.onRedirect(this.state.caught.href);
+  }
+  componentDidMount() {
+    this.componentDidUpdate();
+  }
+  render() {
+    if (this.state.other) throw this.state.other;
+    if (this.state.caught instanceof BluNotFound) return /* @__PURE__ */ jsx("p", { style: { padding: 24 }, children: "Not found." });
+    return this.state.caught ? null : this.props.children;
+  }
+};
+var loaded = /* @__PURE__ */ new Map();
+var componentOf = (e) => typeof e === "function" ? loaded.get(e) : e.default;
+var ensure = async (e) => {
+  if (typeof e === "function" && !loaded.has(e)) loaded.set(e, (await e()).default);
+};
+function BluNextModule({
+  css,
+  scope = DEFAULT_SCOPE,
+  pages,
+  layouts = {},
+  exclude = [],
+  children
+}) {
+  api = useApiClient();
+  const host = useHost();
+  mod = { baseUrl: host.environment.apiBaseUrl, getToken: host.getToken };
+  const route = useRoute();
+  useInsertionEffect(() => {
+    if (!css) return;
+    const id = `blu-css-${scope}`;
+    let el = document.getElementById(id);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = id;
+      el.textContent = css;
+      document.head.append(el);
+    }
+    const users = Number(el.dataset.users ?? 0) + 1;
+    el.dataset.users = String(users);
+    return () => {
+      const n = Number(el.dataset.users) - 1;
+      if (n <= 0) el.remove();
+      else el.dataset.users = String(n);
+    };
+  }, [css, scope]);
+  const routes = useMemo(() => {
+    const defs = Object.entries(pages).map(([k, entry]) => ({ segments: toSegments(k, "page"), entry }));
+    const weight = (s) => /^\[\.\.\./.test(s) ? 2 : /^\[/.test(s) ? 1 : 0;
+    return defs.sort((a, b) => a.segments.map(weight).join("").localeCompare(b.segments.map(weight).join("")));
+  }, [pages]);
+  const layoutDefs = useMemo(() => Object.entries(layouts).map(([k, entry]) => ({ segments: toSegments(k, "layout"), entry })), [layouts]);
+  const path = route.path.split("/").filter(Boolean).map(decodeURIComponent);
+  const excluded = exclude.some((e) => route.path === e || route.path.startsWith(`${e}/`));
+  let hit = null;
+  if (!excluded) {
+    for (const def of routes) {
+      const params = match(def.segments, path);
+      if (params) {
+        hit = { def, params };
+        break;
+      }
+    }
+  }
+  const wrappers = hit ? layoutDefs.filter((l) => l.segments.length > 0 && match(l.segments, path.slice(0, l.segments.length))).sort((a, b) => a.segments.length - b.segments.length) : [];
+  const needed = hit ? [...wrappers.map((w) => w.entry), hit.def.entry] : [];
+  const [, rerender] = useReducer((n) => n + 1, 0);
+  const last = useRef(null);
+  const ready = needed.every((e) => componentOf(e));
+  if (ready) {
+    let page = /* @__PURE__ */ jsx("p", { style: { padding: 24 }, children: "Not found." });
+    if (hit) {
+      const Page = componentOf(hit.def.entry);
+      page = /* @__PURE__ */ jsx(Page, {});
+      for (const w of [...wrappers].reverse()) {
+        const Layout = componentOf(w.entry);
+        page = /* @__PURE__ */ jsx(Layout, { children: page });
+      }
+    }
+    last.current = { page, params: hit?.params ?? {} };
+  }
+  const routeKey = route.path;
+  useEffect(() => {
+    if (ready) return;
+    let live = true;
+    Promise.all(needed.map(ensure)).then(() => live && rerender());
+    return () => {
+      live = false;
+    };
+  }, [routeKey, ready]);
+  useEffect(() => {
+    const all = [...routes.map((r) => r.entry), ...layoutDefs.map((l) => l.entry)].filter((e) => typeof e === "function");
+    if (all.length === 0) return;
+    const t = setTimeout(() => all.forEach((e) => ensure(e).catch(() => {
+    })), 1500);
+    return () => clearTimeout(t);
+  }, [routes, layoutDefs]);
+  return /* @__PURE__ */ jsx("div", { className: scope, "data-blu-module": true, children: /* @__PURE__ */ jsx(ParamsContext.Provider, { value: last.current?.params ?? {}, children: children(
+    last.current ? /* @__PURE__ */ jsx(RouteBoundary, { routeKey: `${route.path}${route.search ?? ""}`, onRedirect: (href) => route.navigate(href, { replace: true }), children: last.current.page }) : null
+  ) }) });
+}
+
+export {
+  DEFAULT_SCOPE,
+  callServerAction,
+  bluApi,
+  moduleUrl,
+  moduleFetch,
+  useModuleAssetUrl,
+  preloadModuleAsset,
+  useBluParams,
+  BluRedirect,
+  BluNotFound,
+  BluNextModule
+};

package/client.js

@@ -0,0 +1,26 @@
+import {
+  BluNextModule,
+  BluNotFound,
+  BluRedirect,
+  DEFAULT_SCOPE,
+  bluApi,
+  callServerAction,
+  moduleFetch,
+  moduleUrl,
+  preloadModuleAsset,
+  useBluParams,
+  useModuleAssetUrl
+} from "./chunks/chunk-P6QUCTDO.js";
+export {
+  BluNextModule,
+  BluNotFound,
+  BluRedirect,
+  DEFAULT_SCOPE,
+  bluApi,
+  callServerAction,
+  moduleFetch,
+  moduleUrl,
+  preloadModuleAsset,
+  useBluParams,
+  useModuleAssetUrl
+};

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@horizonmedia/blu-next-adapter",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.1",
+  "description": "Publish an existing Next.js (App Router) app as a Blu module from the same codebase: the Vite build (@blu/next-adapter/vite), the client runtime (/client) and server helpers (/server).",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HorizonMedia/blu-composable-experience.git",
+    "directory": "packages/next-adapter"
+  },
+  "homepage": "https://github.com/HorizonMedia/blu-composable-experience/tree/main/packages/next-adapter#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./vite": {
+      "types": "./types/vite.d.ts",
+      "default": "./vite.js"
+    },
+    "./client": {
+      "types": "./types/client.d.ts",
+      "default": "./client.js"
+    },
+    "./server": {
+      "types": "./types/server.d.ts",
+      "default": "./server.js"
+    }
+  },
+  "dependencies": {
+    "@module-federation/vite": "^1.23.0",
+    "@vitejs/plugin-react": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@blu/sdk": "npm:@horizonmedia/blu-sdk@^1.8.4",
+    "autoprefixer": "^10.4.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^7.0.0"
+  }
+}

package/server.js

@@ -0,0 +1,67 @@
+// src/server.js
+import { bluPlatformAuth, createModuleAuth } from "@blu/sdk/server";
+var bearerOf = (headers) => /^Bearer (.+)$/i.exec(headers.get("authorization") ?? "")?.[1] ?? null;
+function bluPreflight(request, allowedOrigins) {
+  if (request.method !== "OPTIONS") return null;
+  const origin = request.headers.get("origin");
+  if (!origin || !allowedOrigins.includes(origin)) return new Response(null, { status: 403 });
+  return new Response(null, {
+    status: 204,
+    headers: {
+      "Access-Control-Allow-Origin": origin,
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Authorization, Content-Type",
+      "Access-Control-Max-Age": "600",
+      Vary: "Origin"
+    }
+  });
+}
+function withBluCors(request, response, allowedOrigins) {
+  const origin = request.headers.get("origin");
+  if (origin && allowedOrigins.includes(origin)) response.headers.set("Access-Control-Allow-Origin", origin);
+  response.headers.append("Vary", "Origin");
+  return response;
+}
+function createBluNextServer({ moduleId, issuer, jwksUrl, apiUrl, roleMap, allowedOrigins }) {
+  const moduleAuth = createModuleAuth({ apiUrl, strategies: [bluPlatformAuth({ issuer, jwksUrl, moduleId, roleMap })] });
+  async function principalFromHeaders(headers) {
+    if (!bearerOf(headers)) return null;
+    try {
+      const p = await moduleAuth.verifyRequest(new Request(apiUrl, { headers }));
+      return p.authMode === "blu" ? p : null;
+    } catch {
+      return null;
+    }
+  }
+  function actionsRoute(modules) {
+    return {
+      OPTIONS: (request) => bluPreflight(request, allowedOrigins) ?? new Response(null, { status: 204 }),
+      async POST(request) {
+        const reply = (body2, status = 200) => withBluCors(request, Response.json(body2, { status }), allowedOrigins);
+        if (!await principalFromHeaders(request.headers)) return reply({ error: "blu_token_required" }, 401);
+        let body;
+        try {
+          body = await request.json();
+        } catch {
+          return reply({ error: "bad_request" }, 400);
+        }
+        const mod = Object.prototype.hasOwnProperty.call(modules, body?.module) ? modules[body.module] : null;
+        const fn = mod && Object.prototype.hasOwnProperty.call(mod, body?.name) && typeof mod[body.name] === "function" ? mod[body.name] : null;
+        if (!fn || !Array.isArray(body.args)) return reply({ error: "unknown_action" }, 404);
+        return reply(await fn(...body.args) ?? null);
+      }
+    };
+  }
+  return {
+    principalFromHeaders,
+    /** Strict: the Blu caller, or throws (status 401/403) — e.g. for createMcpWebHandler's `verify`. */
+    verifyRequest: (request) => moduleAuth.verifyRequest(request),
+    actionsRoute,
+    allowedOrigins
+  };
+}
+export {
+  bluPreflight,
+  createBluNextServer,
+  withBluCors
+};

package/shims/image.js

@@ -0,0 +1,13 @@
+import {
+  moduleUrl
+} from "../chunks/chunk-P6QUCTDO.js";
+
+// src/shims/image.tsx
+import { jsx } from "react/jsx-runtime";
+function Image({ src, priority: _p, fill: _f, quality: _q, unoptimized: _u, alt = "", ...rest }) {
+  const url = typeof src === "string" ? src : src.src;
+  return /* @__PURE__ */ jsx("img", { src: url.startsWith("/") && !url.startsWith("//") ? moduleUrl(url) : url, alt, ...rest });
+}
+export {
+  Image as default
+};

package/shims/link.js

@@ -0,0 +1,27 @@
+// src/shims/link.tsx
+import { useRoute } from "@blu/sdk";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Link = forwardRef(function Link2({ href, onClick, prefetch: _p, replace, scroll: _s, children, ...rest }, ref) {
+  const route = useRoute();
+  const to = typeof href === "string" ? href : href.pathname;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      href: to,
+      ...rest,
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || !to.startsWith("/")) return;
+        e.preventDefault();
+        route.navigate(to, { replace });
+      },
+      children
+    }
+  );
+});
+var link_default = Link;
+export {
+  link_default as default
+};

package/shims/navigation.js

@@ -0,0 +1,50 @@
+import {
+  BluNotFound,
+  BluRedirect,
+  useBluParams
+} from "../chunks/chunk-P6QUCTDO.js";
+
+// src/shims/navigation.ts
+import { useMemo } from "react";
+import { useRoute } from "@blu/sdk";
+var usePathname = () => useRoute().path;
+var useParams = () => useBluParams();
+var useSelectedLayoutSegment = () => useRoute().path.split("/").filter(Boolean)[0] ?? null;
+function useSearchParams() {
+  const search = useRoute().search ?? "";
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+function useRouter() {
+  const route = useRoute();
+  return useMemo(
+    () => ({
+      // Paths ("/media-delivery?x=1") or just a query ("?x=1"), as in Next.
+      push: (href) => route.navigate(href),
+      replace: (href) => route.navigate(href, { replace: true }),
+      back: () => window.history.back(),
+      forward: () => window.history.forward(),
+      refresh: () => {
+      },
+      prefetch: () => {
+      }
+    }),
+    [route]
+  );
+}
+function redirect(href) {
+  throw new BluRedirect(href);
+}
+var permanentRedirect = redirect;
+function notFound() {
+  throw new BluNotFound();
+}
+export {
+  notFound,
+  permanentRedirect,
+  redirect,
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+  useSelectedLayoutSegment
+};

package/types/client.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ApiClient } from '@blu/sdk';
+
+declare const DEFAULT_SCOPE = "blu-module";
+/** What import.meta.glob returns: loaders (per-page chunks) or, with { eager: true }, the modules themselves. */
+type GlobMap = Record<string, (() => Promise<unknown>) | unknown>;
+/** Used by the generated proxies for your server actions: same arguments, same return value. */
+declare function callServerAction(module: string, name: string, args: unknown[]): Promise<unknown>;
+/** Your API, called from inside Blu: the module's own backend, with the Blu token. */
+declare function bluApi(): ApiClient;
+/** A root-relative URL of your own server ("/logo.svg"): unchanged standalone, absolute inside Blu. */
+declare function moduleUrl(path: string): string;
+/**
+ * fetch() for your own API: plain fetch standalone; inside Blu, the same request
+ * to your server with the Blu token. Same Response (status codes and all). Only
+ * paths on your own server, so the token can't be sent anywhere else.
+ */
+declare function moduleFetch(path: string, init?: RequestInit): Promise<Response>;
+/** The URL to put in src: `path` itself standalone; inside Blu, a blob: URL once loaded (null until then, or if it failed). */
+declare function useModuleAssetUrl(path: string): string | null;
+/** Warm the cache for an image you'll show next (new Image().src standalone). */
+declare function preloadModuleAsset(path: string): void;
+/** next/navigation useParams() inside Blu (via the shim). */
+declare const useBluParams: () => Record<string, string>;
+/** Thrown by the next/navigation shim's redirect() / notFound(); handled by <BluNextModule>. */
+declare class BluRedirect extends Error {
+    readonly href: string;
+    constructor(href: string);
+}
+declare class BluNotFound extends Error {
+    constructor();
+}
+declare function BluNextModule({ css, scope, pages, layouts, exclude, children, }: {
+    /** Your app/globals.css, imported with ?inline (scoped by the Vite config). */
+    css?: string;
+    scope?: string;
+    pages: GlobMap;
+    /** Section layouts (not the root app/layout.tsx — your children(...) plays that part). */
+    layouts?: GlobMap;
+    /** Paths that don't belong in Blu (e.g. "/login"). */
+    exclude?: string[];
+    /** What your root layout renders around the page (providers, top bar, guards…). */
+    children: (page: ReactNode) => ReactNode;
+}): react.JSX.Element;
+
+export { BluNextModule, BluNotFound, BluRedirect, DEFAULT_SCOPE, bluApi, callServerAction, moduleFetch, moduleUrl, preloadModuleAsset, useBluParams, useModuleAssetUrl };

package/types/server.d.ts

@@ -0,0 +1,183 @@
+/** For proxy.ts: answer a CORS preflight from an allowed Blu shell (or null if this isn't one). */
+declare function bluPreflight(request: any, allowedOrigins: any): Response;
+/** For proxy.ts / route handlers: allow an approved Blu shell to read this response. */
+declare function withBluCors(request: any, response: any, allowedOrigins: any): any;
+/**
+ * @param {{ moduleId: string, issuer: string, jwksUrl: string, apiUrl: string,
+ *           roleMap: Record<string, string[]>, allowedOrigins: string[] }} opts
+ *   roleMap — Blu role → permissions on your API (your mapping)
+ *   apiUrl — this deployment's own URL (passwordless dev sign-ins only accepted when it's local)
+ */
+declare function createBluNextServer({ moduleId, issuer, jwksUrl, apiUrl, roleMap, allowedOrigins }: {
+    moduleId: string;
+    issuer: string;
+    jwksUrl: string;
+    apiUrl: string;
+    roleMap: Record<string, string[]>;
+    allowedOrigins: string[];
+}): {
+    principalFromHeaders: (headers: any) => Promise<{
+        authMode: string;
+        kind: string;
+        issuer: string;
+        subject: any;
+        key: string;
+        devIdentity: any;
+        displayName: any;
+        email: any;
+        provider: any;
+        via: any;
+        actor: any;
+        clientId: any;
+        allowedClients: any;
+        roles: any;
+        permissions: any[];
+    } | {
+        authMode: string;
+        kind: string;
+        issuer: string;
+        /**
+         * user id, or api-key id
+         */
+        subject?: string;
+        /**
+         * stable identity across requests: `<authMode>|<issuer>|<subject>`.
+         * Key your own records (audit, ownership, preferences) on this —
+         * a Blu user needs no account in your system first.
+         */
+        key: string;
+        displayName?: string;
+        email?: string;
+        /**
+         * Blu only: the app that obtained the token ("blu-host",
+         *              "blu-concierge", or your own standalone app)
+         */
+        via?: string;
+        /**
+         * Blu only: software acting for the user (e.g. "blu-concierge")
+         */
+        actor?: string;
+        /**
+         * active client (from the credential, never the request — except see api keys)
+         */
+        clientId?: string | null;
+        allowedClients?: string[];
+        roles?: string[];
+        /**
+         * resolved; may contain "*"
+         */
+        permissions?: string[];
+        devIdentity: any;
+    } | {
+        subject: any;
+        displayName: any;
+        email: any;
+        clientId: any;
+        allowedClients: any;
+        roles: any[];
+        permissions: any;
+        authMode: string;
+        kind: string;
+        issuer: string;
+        key: string;
+        devIdentity: any;
+    } | {
+        authMode: string;
+        kind: string;
+        issuer: string;
+        subject: string;
+        key: string;
+        displayName: string;
+        clientId: any;
+        allowedClients: string[];
+        roles: any[];
+        permissions: string[];
+        clientFromRequest: boolean;
+    }>;
+    /** Strict: the Blu caller, or throws (status 401/403) — e.g. for createMcpWebHandler's `verify`. */
+    verifyRequest: (request: any) => Promise<{
+        authMode: string;
+        kind: string;
+        issuer: string;
+        subject: any;
+        key: string;
+        devIdentity: any;
+        displayName: any;
+        email: any;
+        provider: any;
+        via: any;
+        actor: any;
+        clientId: any;
+        allowedClients: any;
+        roles: any;
+        permissions: any[];
+    } | {
+        authMode: string;
+        kind: string;
+        issuer: string;
+        /**
+         * user id, or api-key id
+         */
+        subject?: string;
+        /**
+         * stable identity across requests: `<authMode>|<issuer>|<subject>`.
+         * Key your own records (audit, ownership, preferences) on this —
+         * a Blu user needs no account in your system first.
+         */
+        key: string;
+        displayName?: string;
+        email?: string;
+        /**
+         * Blu only: the app that obtained the token ("blu-host",
+         *              "blu-concierge", or your own standalone app)
+         */
+        via?: string;
+        /**
+         * Blu only: software acting for the user (e.g. "blu-concierge")
+         */
+        actor?: string;
+        /**
+         * active client (from the credential, never the request — except see api keys)
+         */
+        clientId?: string | null;
+        allowedClients?: string[];
+        roles?: string[];
+        /**
+         * resolved; may contain "*"
+         */
+        permissions?: string[];
+        devIdentity: any;
+    } | {
+        subject: any;
+        displayName: any;
+        email: any;
+        clientId: any;
+        allowedClients: any;
+        roles: any[];
+        permissions: any;
+        authMode: string;
+        kind: string;
+        issuer: string;
+        key: string;
+        devIdentity: any;
+    } | {
+        authMode: string;
+        kind: string;
+        issuer: string;
+        subject: string;
+        key: string;
+        displayName: string;
+        clientId: any;
+        allowedClients: string[];
+        roles: any[];
+        permissions: string[];
+        clientFromRequest: boolean;
+    }>;
+    actionsRoute: (modules: any) => {
+        OPTIONS: (request: any) => Response;
+        POST(request: any): Promise<any>;
+    };
+    allowedOrigins: string[];
+};
+
+export { bluPreflight, createBluNextServer, withBluCors };

package/types/vite.d.ts

@@ -0,0 +1,21 @@
+import * as vite from 'vite';
+
+/**
+ * @param {{ name: string, entry?: string, root?: string, actionsDir?: string, globalsCss?: string,
+ *           scope?: string, tailwind?: object, aliases?: Record<string, string>, outDir?: string }} opts
+ * @returns {import("vite").UserConfig}
+ */
+declare function bluModule({ name, entry, root, actionsDir, globalsCss, scope, tailwind, aliases, outDir, }: {
+    name: string;
+    entry?: string;
+    root?: string;
+    actionsDir?: string;
+    globalsCss?: string;
+    scope?: string;
+    tailwind?: object;
+    aliases?: Record<string, string>;
+    outDir?: string;
+}): vite.UserConfig;
+declare const DEFAULT_SCOPE: "blu-module";
+
+export { DEFAULT_SCOPE, bluModule };

package/vite.js

@@ -0,0 +1,224 @@
+// src/vite.js
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import { federation } from "@module-federation/vite";
+import tailwindcss from "tailwindcss";
+
+// src/scope-css.js
+function scopeCss(code, scope) {
+  const cls = `.${scope}`;
+  const tokensScoped = code.replace(/@tailwind\s+base\s*;?/g, "").replace(/:root\b/g, cls).replace(/(^|[\s,}])\.dark\b/g, `$1.dark ${cls}`).replace(/\bhtml\s*,\s*body\b/g, cls);
+  return unwrapBaseLayers(tokensScoped, cls);
+}
+var scopedReset = (cls) => `
+${cls} { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+${cls} *, ${cls} *::before, ${cls} *::after { box-sizing: border-box; border: 0 solid var(--border-default, #e5e7eb); }
+${cls} h1, ${cls} h2, ${cls} h3, ${cls} p { margin: 0; font-size: inherit; font-weight: inherit; }
+${cls} ul, ${cls} ol { list-style: none; margin: 0; padding: 0; }
+${cls} a { color: inherit; text-decoration: none; }
+${cls} button { font: inherit; color: inherit; background: transparent; padding: 0; border-radius: 0; cursor: pointer; }
+${cls} input, ${cls} select, ${cls} textarea { font: inherit; color: inherit; }
+${cls} table { border-collapse: collapse; }
+${cls} th { font-weight: inherit; text-align: inherit; }
+${cls} svg, ${cls} img { display: inline-block; vertical-align: middle; }
+`;
+function unwrapBaseLayers(css, cls) {
+  let out = "";
+  let i = 0;
+  const re = /@layer\s+base\s*\{/g;
+  let m;
+  while (m = re.exec(css)) {
+    const open = m.index + m[0].length - 1;
+    const close = matchingBrace(css, open);
+    if (close < 0) break;
+    out += css.slice(i, m.index) + scopeRules(css.slice(open + 1, close), cls);
+    i = close + 1;
+    re.lastIndex = i;
+  }
+  return out + css.slice(i);
+}
+function scopeRules(block, cls) {
+  let out = "";
+  let i = 0;
+  while (i < block.length) {
+    const ws = block.slice(i).match(/^\s*/)[0].length;
+    if (block.startsWith("/*", i + ws)) {
+      const end = block.indexOf("*/", i + ws + 2);
+      if (end < 0) return out + block.slice(i);
+      out += block.slice(i, end + 2);
+      i = end + 2;
+      continue;
+    }
+    const open = nextBrace(block, i);
+    if (open < 0) return out + block.slice(i);
+    const close = matchingBrace(block, open);
+    if (close < 0) return out + block.slice(i);
+    const prelude = block.slice(i, open);
+    const body = block.slice(open + 1, close);
+    const head = prelude.trim();
+    const lead = prelude.slice(0, prelude.length - prelude.trimStart().length);
+    if (head.startsWith("@")) out += `${lead}${head} {${scopeRules(body, cls)}}`;
+    else out += `${lead}${scopeSelectorList(head, cls)} {${body}}`;
+    i = close + 1;
+  }
+  return out;
+}
+function scopeSelectorList(list, cls) {
+  return splitSelectors(list).map((s) => s.trim()).filter(Boolean).map((s) => scopeSelector(s, cls)).join(", ");
+}
+function scopeSelector(sel, cls) {
+  if (sel.includes(cls)) return sel;
+  if (/^(html|body)$/.test(sel)) return cls;
+  if (/^(?:\.[\w-]+|\[[^\]]+\])+$/.test(sel)) return `${sel} ${cls}`;
+  return `${cls} ${sel}`;
+}
+function splitSelectors(list) {
+  const parts = [];
+  let depth = 0;
+  let quote = null;
+  let start = 0;
+  for (let i = 0; i < list.length; i++) {
+    const c = list[i];
+    if (quote) {
+      if (c === quote && list[i - 1] !== "\\") quote = null;
+    } else if (c === '"' || c === "'") quote = c;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(list.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(list.slice(start));
+  return parts;
+}
+function nextBrace(css, from) {
+  for (let i = from; i < css.length; i++) {
+    const c = css[i];
+    if (c === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end < 0) return -1;
+      i = end + 1;
+    } else if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < css.length && !(css[j] === c && css[j - 1] !== "\\")) j++;
+      i = j;
+    } else if (c === "{") return i;
+  }
+  return -1;
+}
+function matchingBrace(css, open) {
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    const c = css[i];
+    if (c === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end < 0) return -1;
+      i = end + 1;
+    } else if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < css.length && !(css[j] === c && css[j - 1] !== "\\")) j++;
+      i = j;
+    } else if (c === "{") depth++;
+    else if (c === "}" && --depth === 0) return i;
+  }
+  return -1;
+}
+
+// src/vite.js
+import autoprefixer from "autoprefixer";
+var here = path.dirname(fileURLToPath(import.meta.url));
+var shim = (name) => {
+  for (const ext of [".js", ".tsx", ".ts"]) {
+    const file = path.join(here, "shims", name + ext);
+    if (existsSync(file)) return file;
+  }
+  throw new Error(`[@blu/next-adapter] missing shim "${name}"`);
+};
+var DEFAULT_SCOPE = "blu-module";
+function bluModule({
+  name,
+  entry = "./blu/App.tsx",
+  root = process.cwd(),
+  actionsDir = "app/actions",
+  globalsCss = "app/globals.css",
+  scope = DEFAULT_SCOPE,
+  tailwind,
+  aliases = {},
+  outDir = "public/blu"
+}) {
+  const abs = (p) => path.resolve(root, p);
+  return {
+    root,
+    base: "./",
+    // chunks resolve relative to remoteEntry — one build for every environment
+    publicDir: false,
+    plugins: [
+      react(),
+      serverActionsAsHttp(abs(actionsDir)),
+      scopeGlobalsCss(abs(globalsCss), scope),
+      federation({
+        name,
+        filename: "remoteEntry.js",
+        manifest: true,
+        dts: false,
+        exposes: { "./App": entry },
+        shared: { react: { singleton: true }, "react-dom": { singleton: true }, "@blu/sdk": { singleton: true } }
+      })
+    ],
+    resolve: {
+      alias: [
+        ...Object.entries(aliases).map(([find, to]) => ({ find: new RegExp(`^${find.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&")}$`), replacement: abs(to) })),
+        { find: /^next\/link$/, replacement: shim("link") },
+        { find: /^next\/navigation$/, replacement: shim("navigation") },
+        { find: /^next\/image$/, replacement: shim("image") },
+        { find: /^@\//, replacement: `${root}/` }
+      ]
+    },
+    css: {
+      postcss: {
+        plugins: [tailwindcss({ ...tailwind ?? {}, important: `.${scope}`, corePlugins: { ...tailwind?.corePlugins ?? {}, preflight: false } }), autoprefixer()]
+      }
+    },
+    build: { target: "esnext", outDir: abs(outDir), emptyOutDir: true, rollupOptions: { input: {} } }
+  };
+}
+function serverActionsAsHttp(actionsDir) {
+  return {
+    name: "blu:server-actions-as-http",
+    enforce: "pre",
+    load(id) {
+      const file = id.split("?")[0];
+      if (!file.startsWith(actionsDir + path.sep) || !/\.(ts|tsx|js|mjs)$/.test(file)) return null;
+      const source = readFileSync(file, "utf8");
+      if (!/^\s*(\/\/[^\n]*\n|\/\*[\s\S]*?\*\/\s*)*["']use server["']/.test(source)) return null;
+      const names = /* @__PURE__ */ new Set([
+        ...[...source.matchAll(/export\s+(?:async\s+)?function\s+(\w+)/g)].map((m) => m[1]),
+        ...[...source.matchAll(/export\s+const\s+(\w+)\s*=/g)].map((m) => m[1])
+      ]);
+      const mod = path.relative(actionsDir, file).replace(/\.(ts|tsx|js|mjs)$/, "").split(path.sep).join("/");
+      return [
+        `import { callServerAction } from "@blu/next-adapter/client";`,
+        ...[...names].map((n) => `export const ${n} = (...args) => callServerAction(${JSON.stringify(mod)}, ${JSON.stringify(n)}, args);`)
+      ].join("\n");
+    }
+  };
+}
+function scopeGlobalsCss(globalsCss, scope) {
+  const cls = `.${scope}`;
+  return {
+    name: "blu:scope-globals-css",
+    enforce: "pre",
+    transform(code, id) {
+      if (id.split("?")[0] !== globalsCss) return null;
+      return `${scopeCss(code, scope)}
+${scopedReset(cls)}`;
+    }
+  };
+}
+export {
+  DEFAULT_SCOPE,
+  bluModule
+};