@remit/web-client 0.0.261 → 0.0.263

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.261",
+  "version": "0.0.263",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/composition.test.ts

@@ -1,8 +1,10 @@
 import assert from "node:assert/strict";
-import { dirname, join } from "node:path";
 import { describe, it } from "node:test";
-import { fileURLToPath } from "node:url";
-import { build } from "esbuild";
+import {
+	type AppGraph,
+	AUTH_COMPOSITIONS,
+	bundleAppGraph,
+} from "@/test-support/test-bundle-app";
 
 /**
  * Proves the auth shell is a composition choice, not a runtime toggle inside
@@ -11,89 +13,10 @@ import { build } from "esbuild";
  * app shell and screens are walked from the real entry each time, so this fails
  * the moment any surface reaches back to a specific identity SDK.
  */
-const here = dirname(fileURLToPath(import.meta.url));
-const srcDir = join(here, "..");
-const packageDir = join(srcDir, "..");
-
-interface Variant {
-	specifier: string;
-	name: string;
-}
-
-const VARIANTS: Record<"betterAuth" | "cognito", Variant> = {
-	betterAuth: {
-		specifier: "@/auth/better-auth-provider",
-		name: "betterAuthProvider",
-	},
-	cognito: {
-		specifier: "@/auth/cognito-provider",
-		name: "cognitoAuthProvider",
-	},
-};
-
-interface Graph {
-	inputs: string[];
-	importPaths: string[];
-}
-
-// Externalize third-party packages, but bundle in-repo `@remit/*` workspace
-// source so the walk matches what the real vite build includes. A shared
-// primitive (e.g. `@remit/ui`) that pulled in Amplify would then surface in this
-// graph and fail the test, rather than hiding behind an external edge.
-const externalizeThirdParty = {
-	name: "externalize-third-party",
-	setup(build: import("esbuild").PluginBuild) {
-		build.onResolve({ filter: /.*/ }, (args) => {
-			const path = args.path;
-			if (path.startsWith(".") || path.startsWith("/")) return null;
-			if (path === "@" || path.startsWith("@/")) return null;
-			if (path.startsWith("@remit/")) return null;
-			return { path, external: true };
-		});
-	},
-};
-
-const bundleGraph = async (variant: Variant): Promise<Graph> => {
-	const entry = [
-		'import { mountApp } from "@/shell";',
-		`import { ${variant.name} } from "${variant.specifier}";`,
-		`mountApp({ authProvider: ${variant.name} });`,
-		"",
-	].join("\n");
-
-	const result = await build({
-		stdin: {
-			contents: entry,
-			resolveDir: packageDir,
-			loader: "tsx",
-			sourcefile: "compose-entry.tsx",
-		},
-		bundle: true,
-		write: false,
-		metafile: true,
-		logLevel: "silent",
-		format: "esm",
-		platform: "browser",
-		jsx: "automatic",
-		jsxImportSource: "react",
-		plugins: [externalizeThirdParty],
-		loader: { ".css": "empty", ".png": "empty", ".svg": "empty" },
-		absWorkingDir: packageDir,
-		alias: { "@": srcDir },
-	});
-
-	const inputs = Object.keys(result.metafile.inputs);
-	const importPaths = new Set<string>();
-	for (const input of Object.values(result.metafile.inputs)) {
-		for (const imported of input.imports) importPaths.add(imported.path);
-	}
-	return { inputs, importPaths: [...importPaths] };
-};
-
-const mentionsAmplify = ({ inputs, importPaths }: Graph): boolean =>
+const mentionsAmplify = ({ inputs, importPaths }: AppGraph): boolean =>
 	[...inputs, ...importPaths].some((path) => /aws-amplify/.test(path));
 
-const composesCognitoShell = ({ inputs }: Graph): boolean =>
+const composesCognitoShell = ({ inputs }: AppGraph): boolean =>
 	inputs.some(
 		(path) =>
 			path.includes("auth/cognito/") || path.includes("cognito-provider"),
@@ -101,7 +24,7 @@ const composesCognitoShell = ({ inputs }: Graph): boolean =>
 
 describe("web-client composition", () => {
 	it("omits every Amplify/Cognito module when composing the better-auth provider", async () => {
-		const graph = await bundleGraph(VARIANTS.betterAuth);
+		const graph = await bundleAppGraph(AUTH_COMPOSITIONS.betterAuth);
 
 		assert.ok(
 			graph.inputs.some((path) => path.includes("shell/index")),
@@ -120,7 +43,7 @@ describe("web-client composition", () => {
 	});
 
 	it("includes the Amplify/Cognito modules when composing the cognito provider", async () => {
-		const graph = await bundleGraph(VARIANTS.cognito);
+		const graph = await bundleAppGraph(AUTH_COMPOSITIONS.cognito);
 
 		assert.equal(
 			mentionsAmplify(graph),

package/src/components/mail/SelectionWizardHost.tsx

@@ -12,6 +12,7 @@ import {
 	type MatchMode,
 	type RuleClause,
 	type RunState,
+	ruleRestrictionFor,
 	type SearchConversion,
 	type SelectionRestriction,
 	SelectionWizard,
@@ -513,11 +514,15 @@ function SelectionWizardSession({
 	// preview behind a widened door has something to count against. The one-off
 	// scope and the ticked rows act on the messages themselves and are unaffected.
 	const wizardScope = wizardScopeFor(accountId, selectionRestriction);
+	// An escalated match is restricted on the same step for its own reason: the
+	// list resolved it before the wizard opened, and no door on the match step can
+	// give it a predicate to keep matching on (#1193).
+	const ruleRestriction = ruleRestrictionFor(mode, wizardScope);
 	const restrictionFor = (step: StepId): string | undefined => {
 		if (step === "folder") return wizardScope.destination;
 		if (step !== "rule") return undefined;
 		return named.scope === "standing" || named.scope === "until"
-			? wizardScope.rule
+			? ruleRestriction
 			: undefined;
 	};
 	const blockedReason =
@@ -1048,7 +1053,7 @@ function SelectionWizardSession({
 				draft: named,
 				onScopeChange: (scope) => setDraft((held) => ({ ...held, scope })),
 				onUntilChange: (until) => setDraft((held) => ({ ...held, until })),
-				restriction: wizardScope.rule,
+				restriction: ruleRestriction,
 			}}
 			name={{
 				name: named.name ?? "",

package/src/index.css

@@ -4,13 +4,6 @@
    the .dark ancestor scope used everywhere in this app. */
 @import "@remit/ui/tokens.css";
 
-/* The structural sheet the calendar grid's engine needs, which the kit ships
-   beside the component and every app that mounts it has to ask for. Without it
-   the week and day grids collapse into a stack and draw no events at all: the
-   engine lays its columns out against this sheet, and a column with no
-   geometry has nowhere to put an occurrence. */
-@import "@remit/ui/calendar.css";
-
 /* Tailwind v4 content scanning: name every source Tailwind must inspect for
    utility class usage. Automatic detection is rooted at the Vite root, which
    for the distributor harness build is a throwaway directory holding only the

package/src/kit-stylesheets.test.ts

@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import { readdirSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+import {
+	AUTH_COMPOSITIONS,
+	bundleAppGraph,
+	graphPath,
+} from "@/test-support/test-bundle-app";
+
+/**
+ * A stylesheet the kit ships beside a component has to reach the app on its
+ * own. #1062: `CalendarGrid`'s structural sheet was a subpath every consuming
+ * app had to `@import` by hand, this one never did, and three releases drew the
+ * week and day views as an unstyled stack with no events in them — while
+ * Storybook, the render tests and the server render all read correctly, because
+ * each of those pulled the sheet in itself.
+ *
+ * The kit's token sheet is the exception the app asks for by name: one theme,
+ * loaded whether or not anything renders. Every other sheet is structural,
+ * belongs to the component that cannot draw without it, and is checked here
+ * against the bundler's own module graph walked from the app entry — so a sheet
+ * no component imports fails the build instead of a deployment.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const kitSrc = resolve(here, "../../ui/src");
+
+/** The kit's theme sheet, which `src/index.css` imports directly. */
+const THEME_SHEET = join(kitSrc, "tokens.css");
+
+const structuralSheets = (dir: string): string[] => {
+	const found: string[] = [];
+	for (const entry of readdirSync(dir, { withFileTypes: true })) {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			if (entry.name !== "node_modules") found.push(...structuralSheets(path));
+			continue;
+		}
+		if (entry.name.endsWith(".css") && path !== THEME_SHEET) found.push(path);
+	}
+	return found.sort();
+};
+
+describe("kit stylesheets (#1062)", () => {
+	it("walks every structural sheet @remit/ui ships from the app entry", async () => {
+		const sheets = structuralSheets(kitSrc);
+		assert.ok(
+			sheets.length > 0,
+			"the kit ships no structural sheet, so this asserts nothing — name the sheet it should follow, or drop it",
+		);
+
+		const { inputs } = await bundleAppGraph(AUTH_COMPOSITIONS.betterAuth);
+		const reached = new Set(inputs.map(graphPath));
+		const orphaned = sheets.filter((sheet) => !reached.has(sheet));
+
+		assert.deepEqual(
+			orphaned.map((sheet) => relative(kitSrc, sheet)),
+			[],
+			"a structural sheet no component imports never reaches the deployed app",
+		);
+	});
+});

package/src/test-support/test-bundle-app.ts

@@ -0,0 +1,102 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+
+/**
+ * Walks the app the way a distributor's build walks it — from the shell entry,
+ * with one identity system composed in — and hands back the module graph the
+ * bundler resolved. A suite asserts on that graph rather than on import text: a
+ * specifier reads the same whether or not anything resolves it.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const srcDir = join(here, "..");
+const packageDir = join(srcDir, "..");
+
+/** An identity system a build composes, by the export that supplies it. */
+export interface AuthComposition {
+	specifier: string;
+	name: string;
+}
+
+export const AUTH_COMPOSITIONS: Record<
+	"betterAuth" | "cognito",
+	AuthComposition
+> = {
+	betterAuth: {
+		specifier: "@/auth/better-auth-provider",
+		name: "betterAuthProvider",
+	},
+	cognito: {
+		specifier: "@/auth/cognito-provider",
+		name: "cognitoAuthProvider",
+	},
+};
+
+export interface AppGraph {
+	/** Every file the bundler pulled in, relative to the package root. */
+	inputs: string[];
+	/** Every specifier those files import, as the bundler resolved it. */
+	importPaths: string[];
+}
+
+// Externalize third-party packages, but bundle in-repo `@remit/*` workspace
+// source so the walk matches what the real vite build includes. A shared
+// primitive (e.g. `@remit/ui`) that pulled in Amplify would then surface in this
+// graph and fail the test, rather than hiding behind an external edge.
+const externalizeThirdParty = {
+	name: "externalize-third-party",
+	setup(build: import("esbuild").PluginBuild) {
+		build.onResolve({ filter: /.*/ }, (args) => {
+			const path = args.path;
+			if (path.startsWith(".") || path.startsWith("/")) return null;
+			if (path === "@" || path.startsWith("@/")) return null;
+			if (path.startsWith("@remit/")) return null;
+			return { path, external: true };
+		});
+	},
+};
+
+/** Bundle the app against `auth` and report everything the build reached. */
+export const bundleAppGraph = async (
+	auth: AuthComposition,
+): Promise<AppGraph> => {
+	const result = await build({
+		stdin: {
+			contents: [
+				'import { mountApp } from "@/shell";',
+				`import { ${auth.name} } from "${auth.specifier}";`,
+				`mountApp({ authProvider: ${auth.name} });`,
+				"",
+			].join("\n"),
+			resolveDir: packageDir,
+			loader: "tsx",
+			sourcefile: "compose-entry.tsx",
+		},
+		bundle: true,
+		write: false,
+		metafile: true,
+		logLevel: "silent",
+		format: "esm",
+		platform: "browser",
+		jsx: "automatic",
+		jsxImportSource: "react",
+		plugins: [externalizeThirdParty],
+		// A stylesheet is emptied rather than parsed: this walk is after which
+		// files the build reaches, and what one sheet `@import`s from another is
+		// the app stylesheet's business, not the module graph's.
+		loader: { ".css": "empty", ".png": "empty", ".svg": "empty" },
+		absWorkingDir: packageDir,
+		alias: { "@": srcDir },
+	});
+
+	const inputs = Object.keys(result.metafile.inputs);
+	const importPaths = new Set<string>();
+	for (const input of Object.values(result.metafile.inputs)) {
+		for (const imported of input.imports) importPaths.add(imported.path);
+	}
+	return { inputs, importPaths: [...importPaths] };
+};
+
+/** An input path from a graph, as an absolute path on this checkout. */
+export const graphPath = (input: string): string => join(packageDir, input);