@fluid-app/fluid-cli-widget 0.1.28 → 0.1.29

package/dist/vite/plugin.mjs

@@ -1,192 +1,2 @@
-import { i as createWidgetPackageDevelopmentDescriptor } from "../src-CVadzcYM.mjs";
-//#region src/vite/plugin.ts
-function fluidWidgetDevPlugin() {
-	return {
-		name: "fluid-widget-dev-routes",
-		apply: "serve",
-		config: createWidgetDevServerConfig,
-		configureServer(server) {
-			server.middlewares.use(async (request, response, next) => {
-				const pathname = (request.url ?? "").split("?")[0] ?? "";
-				if (pathname === "/__runtime-entry__" || pathname === "/__runtime-entry__/") {
-					sendJavaScript(request, response, buildRuntimeEntryBootstrapScript(WIDGET_ENTRY_MODULE_PATH, getRequestOrigin(request)));
-					return;
-				}
-				if (pathname === "/__widget-packages__" || pathname === "/__widget-packages__/") {
-					await sendWidgetPackages(server, request, response);
-					return;
-				}
-				next();
-			});
-		}
-	};
-}
-/**
-* Widget projects intentionally have no HTML entrypoint, so Vite cannot
-* discover the worker's dependency graph during its normal startup scan.
-* Without an explicit entry, the first live-preview request discovers and
-* optimizes the portal worker after the server reports ready. Vite reloads
-* the worker mid-mount, closing its message thread and stranding the preview
-* in a permanent error state.
-*
-* Pre-optimizing the worker entry makes the initial graph stable before a
-* preview can connect. Vite follows this entry's imports, so React and the
-* Remote DOM worker runtime are optimized in the same startup pass.
-*/
-function createWidgetDevServerConfig() {
-	return { optimizeDeps: { include: ["@fluid-app/portal-sdk/widgets/worker"] } };
-}
-/** Source-relative path of a widget project's entry module. The dev
-*  scaffold always places it here (see the widget template) — this is
-*  the one thing the bootstrap script below needs from the plugin
-*  that isn't itself part of the race/preamble fix. */
-const WIDGET_ENTRY_MODULE_PATH = "/src/index.ts";
-/**
-* Builds the `/__runtime-entry__` worker bootstrap. Runtime-verified
-* against a real widget dev server + `@fluid-app/widget-runtime` host
-* in a Playwright harness (styled Leaderboard widget rendering,
-* mutation records flowing, `mounted.ready` resolving) — every piece
-* below exists to fix something that reproduced in that harness:
-*
-* 1. **Message-buffer race (the silent-mount killer).** The host
-*    (widget-runtime) posts the "mount" message immediately after
-*    `new Worker(...)`. A production-built worker bundle evaluates
-*    synchronously and never races that message. In dev, though, the
-*    worker's module graph loads asynchronously over many HTTP
-*    requests (this bootstrap script, then the entry module, then
-*    everything it imports, each a separate fetch) — so the "mount"
-*    message can be dispatched and consumed by the Worker's default
-*    (listener-less) handling before the widget entry's own
-*    `message` listener, wired up deep inside the awaited import
-*    below, is ever attached. The message is dropped silently, with
-*    no error anywhere — the old `void import("/src/index.ts")` also
-*    swallowed the import's own rejections, compounding the silence.
-*    Traced live: host→worker "mount" posts, zero worker→host replies
-*    until this buffer-and-replay was added; after it, mutation
-*    records flow and `mounted.ready` resolves. Fix: buffer every
-*    message from the instant the worker boots (before anything else
-*    runs), then replay the buffer, in order, once the entry module
-*    has finished importing and has had the chance to attach its
-*    real listener.
-* 2. **React-refresh preamble.** `@vitejs/plugin-react` injects a
-*    preamble into every dev-transformed `.tsx` module referencing
-*    `window.$RefreshReg$` / `$RefreshSig$`. A Worker global scope has
-*    no `window` and no preamble, so importing a react-based widget
-*    entry throws `window is not defined`, and — once `window` is
-*    aliased to `globalThis` — throws again on the bare
-*    `$RefreshSig$` alias. Installing the canonical preamble
-*    (`RefreshRuntime.injectIntoGlobalHook` + no-op `$RefreshReg$` /
-*    `$RefreshSig$`) before the entry import fixes both. The
-*    `window = globalThis` alias was checked against widget-runtime's
-*    worker lockdown / scope detection (which is
-*    `globalThis.postMessage`-based) — no conflict. `/@react-refresh`
-*    is `@vitejs/plugin-react`'s stable virtual module id, but a
-*    widget project isn't guaranteed to use the react plugin, so the
-*    whole block is try/catch-guarded — a project with no
-*    `/@react-refresh` module (no react plugin) boots straight
-*    through to the entry import unaffected.
-* 3. **`await import`, not `void import`.** A genuine failure to
-*    import the entry module (syntax error, missing dependency, …)
-*    must reject the worker's module evaluation loudly, not vanish
-*    the way a fire-and-forget `void import` did.
-* 4. **Absolute dev-server imports.** Mist and portal previews load the
-*    worker from another origin, so the host wraps this entry in a blob URL.
-*    Root-relative specifiers inside a blob module resolve against the host
-*    page (or fail to resolve at all), not this Vite server. Anchoring both
-*    imports to the request origin keeps the entire dev module graph on the
-*    widget server.
-*
-* Dev-only: this only ever serves from `configureServer` (the
-* plugin's `apply: "serve"` gate), never a built/published package.
-*/
-function buildRuntimeEntryBootstrapScript(entryPath, origin) {
-	const refreshRuntimeUrl = new URL("/@react-refresh", origin).toString();
-	const entryUrl = new URL(entryPath, origin).toString();
-	return [
-		"// Dev-only worker bootstrap — see buildRuntimeEntryBootstrapScript",
-		"// in packages/cli/widget/src/vite/plugin.ts for why each piece",
-		"// here exists (message-buffer race, react-refresh preamble,",
-		"// await-not-void import).",
-		"const __q = [];",
-		"const __buf = (e) => { __q.push(e.data); };",
-		"self.addEventListener(\"message\", __buf);",
-		"if (typeof window === \"undefined\") { globalThis.window = globalThis; }",
-		"try {",
-		`  const { default: RefreshRuntime } = await import(${JSON.stringify(refreshRuntimeUrl)});`,
-		"  RefreshRuntime.injectIntoGlobalHook(window);",
-		"  window.$RefreshReg$ = () => {};",
-		"  window.$RefreshSig$ = () => (type) => type;",
-		"  window.__vite_plugin_react_preamble_installed__ = true;",
-		"} catch {",
-		"  // No @vitejs/plugin-react in this widget project (no",
-		"  // /@react-refresh virtual module) — nothing to preinstall.",
-		"}",
-		`await import(${JSON.stringify(entryUrl)});`,
-		"self.removeEventListener(\"message\", __buf);",
-		"for (const data of __q) {",
-		"  self.dispatchEvent(new MessageEvent(\"message\", { data }));",
-		"}",
-		""
-	].join("\n");
-}
-/**
-* The shared development descriptor workflow appends Vite's `?direct` query
-* to CSS URLs so preview hosts receive real CSS instead of JS style modules.
-* Published descriptors use a separate build path and never receive it.
-*/
-function createDevWidgetPackageDescriptors(configModule, origin) {
-	return [createWidgetPackageDevelopmentDescriptor({
-		sourceModule: configModule,
-		owner: "droplet",
-		origin,
-		workerEntryPath: "/__runtime-entry__",
-		defaultCssPath: "/styles.css"
-	})];
-}
-async function sendWidgetPackages(server, request, response) {
-	if (handleOptions(request, response)) return;
-	try {
-		sendJson(response, createDevWidgetPackageDescriptors(await server.ssrLoadModule("/fluid.widget.config.ts"), getRequestOrigin(request)));
-	} catch (error) {
-		server.config.logger.error(`[fluid] Failed to load widget packages: ${String(error)}`);
-		sendJson(response, { error: String(error) }, 500);
-	}
-}
-function sendJavaScript(request, response, source) {
-	if (handleOptions(request, response)) return;
-	setCorsHeaders(response);
-	response.setHeader("Content-Type", "text/javascript");
-	response.statusCode = 200;
-	response.end(source);
-}
-function sendJson(response, body, statusCode = 200) {
-	setCorsHeaders(response);
-	response.setHeader("Content-Type", "application/json");
-	response.statusCode = statusCode;
-	response.end(JSON.stringify(body, null, 2));
-}
-function handleOptions(request, response) {
-	if (request.method !== "OPTIONS") return false;
-	setCorsHeaders(response);
-	response.statusCode = 204;
-	response.end();
-	return true;
-}
-function setCorsHeaders(response) {
-	response.setHeader("Access-Control-Allow-Origin", "*");
-	response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS");
-	response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
-}
-function getRequestOrigin(request) {
-	const host = readHeader(request.headers.host);
-	if (!host) throw new Error("Widget dev request is missing the Host header.");
-	return `${readHeader(request.headers["x-forwarded-proto"]) === "https" ? "https" : "http"}://${host}`;
-}
-function readHeader(value) {
-	const candidate = Array.isArray(value) ? value[0] : value;
-	return typeof candidate === "string" && candidate.trim().length > 0 ? candidate.trim() : void 0;
-}
-//#endregion
+import { a as buildRuntimeEntryBootstrapScript, c as fluidWidgetDevPlugin, o as createDevWidgetPackageDescriptors, s as createWidgetDevServerConfig } from "../src-_wfDoBLp.mjs";
 export { buildRuntimeEntryBootstrapScript, createDevWidgetPackageDescriptors, createWidgetDevServerConfig, fluidWidgetDevPlugin };
-
-//# sourceMappingURL=plugin.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-app/fluid-cli-widget",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Fluid CLI plugin for standalone widget package workflows",
   "files": [
     "dist",
@@ -43,8 +43,8 @@
     "typescript": "^5",
     "vitest": "^4.0.18",
     "@fluid-app/fluid-cli-widget-tooling": "0.1.0",
-    "@fluid-app/fluidos-api-client": "0.1.0",
-    "@fluid-app/typescript-config": "0.0.0"
+    "@fluid-app/typescript-config": "0.0.0",
+    "@fluid-app/fluidos-api-client": "0.1.0"
   },
   "engines": {
     "node": ">=24.0.0"

package/templates/default/AGENTS.md

@@ -210,6 +210,21 @@ Light/dark behavior:
 
 Runtime CSS rules:
 
+**A stylesheet is the only way to style a widget. Inline styles do not work.**
+
+The host sanitizes every Remote DOM mutation before it reaches the shadow root. The
+`style` attribute is rejected and `<style>` elements are a banned tag, so:
+
+- `style={{ color: "red" }}` on any element is **silently dropped**. The element renders
+  with no styling and no error — this is the single most common reason a widget "looks
+  broken" or "came out unstyled".
+- An inline `<style>` block never renders.
+- Only CSS reachable from the widget build graph is published as a `cssUrls` artifact and
+  adopted into the shadow root.
+
+So: put every rule in a stylesheet, give elements `className`s, and target those classes.
+Never reach for an inline style — it will not survive.
+
 - Put runtime selectors in `styles.css` or imported CSS modules.
 - Keep selectors prefixed with the widget name to avoid leaking styles into the host.
 - Do not rely on global body styles for runtime appearance.

package/templates/default/styles.css

@@ -1,22 +1,47 @@
+/* Runtime styles for the example widget.
+ *
+ * This file is the worked example every new widget is copied from, so it is
+ * deliberately written the way widget CSS SHOULD be written:
+ *
+ *   • Colors, fonts, and radii come from the HOST's semantic CSS variables.
+ *     The portal theme sets them, they inherit through the widget's shadow
+ *     root, and the same widget then looks correct on every portal and in
+ *     both light and dark — without a second, hand-written dark palette.
+ *
+ *   • Every var() carries a fallback. Tokens are absent in some hosts (a bare
+ *     dev harness, a preview surface that has not adopted the portal theme),
+ *     and a widget must still be legible there rather than collapsing to
+ *     unstyled text. The fallback is a floor, never the intended look.
+ *
+ *   • Selectors stay prefixed with the widget name so nothing leaks into the
+ *     host, and nothing here depends on global body styles.
+ *
+ * Do not reintroduce hard-coded brand colors. A widget that hard-codes
+ * #ffffff / #111827 ignores the portal's theme entirely and will look wrong
+ * on any portal that is not white-on-near-black. See AGENTS.md → "Theme and
+ * styling guidance". */
+
 .review-carousel {
-  font-family:
+  font-family: var(
+    --font-body,
     Inter,
     ui-sans-serif,
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
-    sans-serif;
-  border: 1px solid #e5e7eb;
-  border-radius: 24px;
+    sans-serif
+  );
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: var(--radius-xl, 24px);
   padding: 32px;
-  background: #ffffff;
+  background: var(--card, #ffffff);
   box-shadow: 0 24px 80px rgb(15 23 42 / 10%);
 }
 
 .review-carousel__eyebrow {
   margin: 0 0 8px;
-  color: #4f46e5;
+  color: var(--primary, #4f46e5);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -25,7 +50,8 @@
 
 .review-carousel__title {
   margin: 0;
-  color: #111827;
+  color: var(--card-foreground, #111827);
+  font-family: var(--font-header, inherit);
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 0.95;
   letter-spacing: -0.05em;
@@ -33,7 +59,7 @@
 
 .review-carousel__quote {
   margin: 32px 0 0;
-  color: #1f2937;
+  color: var(--card-foreground, #1f2937);
   font-size: clamp(1.25rem, 2vw, 1.75rem);
   line-height: 1.35;
 }
@@ -48,13 +74,13 @@
 
 .review-carousel__author {
   margin: 0;
-  color: #111827;
+  color: var(--card-foreground, #111827);
   font-weight: 700;
 }
 
 .review-carousel__role {
   margin: 4px 0 0;
-  color: #6b7280;
+  color: var(--muted-foreground, #6b7280);
 }
 
 .review-carousel__controls {
@@ -65,15 +91,21 @@
 .review-carousel__button {
   width: 40px;
   height: 40px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--border, #d1d5db);
+  /* Intentionally a pill, not themed — shape is this control's identity. */
   border-radius: 999px;
-  color: #111827;
-  background: #ffffff;
+  color: var(--card-foreground, #111827);
+  background: var(--card, #ffffff);
   font: inherit;
   cursor: pointer;
 }
 
 .review-carousel__button:hover {
-  border-color: #4f46e5;
-  color: #4f46e5;
+  border-color: var(--primary, #4f46e5);
+  color: var(--primary, #4f46e5);
+}
+
+.review-carousel__button:focus-visible {
+  outline: 2px solid var(--ring, #4f46e5);
+  outline-offset: 2px;
 }

package/dist/index-BYRGkNyt.d.mts

@@ -1,91 +0,0 @@
-//#region ../../portal/core/src/remote-dom-widget-package.d.ts
-declare const REMOTE_DOM_WIDGET_MANIFEST_VERSION: 1;
-declare const REMOTE_DOM_WIDGET_RUNTIME: "remote-dom";
-type JsonPrimitive = string | number | boolean | null;
-type JsonValue = JsonPrimitive | readonly JsonValue[] | JsonObject;
-interface JsonObject {
-  readonly [key: string]: JsonValue;
-}
-interface RemoteDomWidgetCapabilityDeclaration {
-  readonly name: string;
-  readonly version: string;
-}
-interface RemoteDomWidgetDefinition {
-  readonly type: string;
-  readonly displayName: string;
-  readonly description: string;
-  readonly icon: string;
-  readonly category: string;
-  readonly propertySchema: JsonObject;
-  readonly defaultProps: JsonObject;
-  readonly container: "inline" | "block" | "card" | "fullscreen";
-  readonly resizable: boolean | "horizontal" | "vertical" | "both";
-  readonly minSdkVersion: string;
-  readonly capabilities: readonly RemoteDomWidgetCapabilityDeclaration[];
-}
-/**
-* Canonical package contract shared by the CLI, catalog APIs, and portal hosts.
-* Catalog producers resolve every artifact to its public URL before returning
-* this descriptor; consumers do not translate legacy manifest shapes.
-*/
-interface RemoteDomWidgetPackageDescriptor {
-  readonly manifestVersion: typeof REMOTE_DOM_WIDGET_MANIFEST_VERSION;
-  readonly runtime: typeof REMOTE_DOM_WIDGET_RUNTIME;
-  readonly packageId: string;
-  readonly source: "company" | "droplet";
-  readonly version: string;
-  readonly workerEntryUrl: string;
-  readonly cssUrls: readonly string[];
-  readonly assetUrls: readonly string[];
-  readonly widgets: readonly RemoteDomWidgetDefinition[];
-}
-//#endregion
-//#region ../widget-tooling/src/internal/widget-package-validation.d.ts
-type WidgetPackageOwnerKind = "company" | "droplet";
-interface WidgetCapabilityMetadata {
-  readonly name: string;
-  readonly version?: string;
-}
-interface SourceWidgetMetadata {
-  readonly name: string;
-  readonly displayName?: string;
-  readonly description?: string;
-  readonly icon?: string;
-  readonly category?: string;
-  readonly propertySchema?: JsonObject;
-  readonly defaultProps?: JsonObject;
-  readonly container?: unknown;
-  readonly minSdkVersion?: string;
-  readonly resizable?: unknown;
-  readonly capabilities?: readonly WidgetCapabilityMetadata[];
-}
-interface SourceWidgetPackageMetadata {
-  readonly manifestVersion?: number;
-  readonly scope?: string;
-  readonly packageStableId?: string;
-  readonly packageId: string;
-  readonly packageType?: string;
-  readonly version: string;
-  readonly widgets: readonly SourceWidgetMetadata[];
-  readonly cssUrls?: readonly string[];
-}
-interface WidgetDescriptorMetadata extends RemoteDomWidgetDefinition {
-  readonly name: string;
-}
-interface ValidatedWidgetPackageBuild {
-  readonly sourcePackage: SourceWidgetPackageMetadata;
-  readonly packageKey: string;
-  readonly packageId: string;
-  readonly owner: WidgetPackageOwnerKind;
-  readonly version: string;
-  readonly widgets: readonly WidgetDescriptorMetadata[];
-}
-type WidgetPackageValidationErrorCode = "NO_SOURCE_PACKAGE" | "MULTIPLE_SOURCE_PACKAGES" | "INVALID_SOURCE_PACKAGE" | "INVALID_WIDGET_METADATA" | "UNSUPPORTED_OWNER" | "INVALID_PACKAGE_KEY" | "INVALID_VERSION" | "NO_WIDGETS" | "INVALID_WIDGET_NAME" | "INVALID_WIDGET_TYPE" | "DUPLICATE_WIDGET";
-interface WidgetPackageValidationError {
-  readonly code: WidgetPackageValidationErrorCode;
-  readonly message: string;
-  readonly path?: string;
-}
-//#endregion
-export { WidgetPackageValidationError as n, RemoteDomWidgetPackageDescriptor as r, ValidatedWidgetPackageBuild as t };
-//# sourceMappingURL=index-BYRGkNyt.d.mts.map

package/dist/index-BYRGkNyt.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BYRGkNyt.d.mts","names":[],"sources":["../../../portal/core/src/remote-dom-widget-package.ts","../../widget-tooling/src/internal/widget-package-validation.ts"],"mappings":";cAAa,kCAAA;AAAA,cACA,yBAAA;AAAA,KAED,aAAA;AAAA,KAEA,SAAA,GAAY,aAAA,YAAyB,SAAA,KAAc,UAAA;AAAA,UAE9C,UAAA;EAAA,UACS,GAAA,WAAA,SAAA;AAAA;AAAA,UAGT,oCAAA;EAAA,SACN,IAAA;EAAA,SACA,OAAA;AAAA;AAAA,UAGM,yBAAA;EAAA,SACN,IAAA;EAAA,SACA,WAAA;EAAA,SACA,WAAA;EAAA,SACA,IAAA;EAAA,SACA,QAAA;EAAA,SACA,cAAA,EAAgB,UAAA;EAAA,SAChB,YAAA,EAAc,UAAA;EAAA,SACd,SAAA;EAAA,SACA,SAAA;EAAA,SACA,aAAA;EAAA,SACA,YAAA,WAAuB,oCAAA;AAAA;;;;;;UAQjB,gCAAA;EAAA,SACN,eAAA,SAAwB,kCAAA;EAAA,SACxB,OAAA,SAAgB,yBAAA;EAAA,SAChB,SAAA;EAAA,SACA,MAAA;EAAA,SACA,OAAA;EAAA,SACA,cAAA;EAAA,SACA,OAAA;EAAA,SACA,SAAA;EAAA,SACA,OAAA,WAAkB,yBAAA;AAAA;;;KCpBjB,sBAAA;AAAA,UAKK,wBAAA;EAAA,SACN,IAAA;EAAA,SACA,OAAA;AAAA;AAAA,UAGM,oBAAA;EAAA,SACN,IAAA;EAAA,SACA,WAAA;EAAA,SACA,WAAA;EAAA,SACA,IAAA;EAAA,SACA,QAAA;EAAA,SACA,cAAA,GAAiB,UAAA;EAAA,SACjB,YAAA,GAAe,UAAA;EAAA,SACf,SAAA;EAAA,SACA,aAAA;EAAA,SACA,SAAA;EAAA,SACA,YAAA,YAAwB,wBAAA;AAAA;AAAA,UAGlB,2BAAA;EAAA,SACN,eAAA;EAAA,SACA,KAAA;EAAA,SACA,eAAA;EAAA,SACA,SAAA;EAAA,SACA,WAAA;EAAA,SACA,OAAA;EAAA,SACA,OAAA,WAAkB,oBAAA;EAAA,SAClB,OAAA;AAAA;AAAA,UAGM,wBAAA,SAAiC,yBAAA;EAAA,SACvC,IAAA;AAAA;AAAA,UA4BM,2BAAA;EAAA,SACN,aAAA,EAAe,2BAAA;EAAA,SACf,UAAA;EAAA,SACA,SAAA;EAAA,SACA,KAAA,EAAO,sBAAA;EAAA,SACP,OAAA;EAAA,SACA,OAAA,WAAkB,wBAAA;AAAA;AAAA,KAGjB,gCAAA;AAAA,UAaK,4BAAA;EAAA,SACN,IAAA,EAAM,gCAAA;EAAA,SACN,OAAA;EAAA,SACA,IAAA;AAAA"}