@reticlehq/init 3.3.0 → 3.4.0

package/dist/patch/tanstack-start.js

@@ -1,52 +1,141 @@
 /**
- * The TanStack Start connect recipe.
+ * The TanStack Start connect: a client-only component, rendered in the document the root route SSRs.
  *
- * Its own module because Start is the one framework whose document module `init` deliberately
- * refuses to write, so the recipe and the reasoning behind that refusal are a unit.
+ * Its own module because Start is the one framework whose document module is ALSO the server
+ * render, so what may be written into it — and what must stay out — is a unit.
  */
+import { posix } from 'node:path';
 import { UiLibrary } from '../detect/detect.js';
-import { connectArg, sdkImport, UNVERIFIED_TANSTACK_START_NOTE } from './snippets.js';
+import { connectArg, devModuleSpecifier, sdkImport, UNVERIFIED_TANSTACK_START_NOTE, } from './snippets.js';
+import { PatchKind } from './patch-kind.js';
+import { VITE_ENV_DEV_DECLARATION } from './vite-env-types.js';
 /** TanStack Start's document module — the file that SSRs `<html>`. */
 export const TANSTACK_START_ROOT_PATH = 'src/routes/__root.tsx';
+/** The component `init` writes, and renders in the root document. */
+const CONNECT_COMPONENT = 'ReticleConnect';
+const CONNECT_FILE_BASENAME = 'reticle-connect';
+/** `<Scripts />` — Start's own client-script outlet, which every root document has to render. */
+const SCRIPTS_OUTLET = /^([ \t]*)<Scripts\s*\/>/m;
 /**
- * The TanStack Start recipe, printed rather than written.
+ * Where the connect component goes: beside the `routes/` directory, never inside it — a file under
+ * `routes/` is a route to Start's file-based router.
+ */
+export function tanstackStartConnectPath(rootPath = TANSTACK_START_ROOT_PATH) {
+    return posix.join(posix.dirname(posix.dirname(rootPath)), `${CONNECT_FILE_BASENAME}.tsx`);
+}
+/**
+ * The connect component.
+ *
+ * A dynamic SDK import inside `useEffect`, because a static import on anything the root document
+ * imports is evaluated during the server render and 500s the page. Effects never run on the server.
+ * The pairing token is the one the Vite plugin inlines as `__RETICLE_TOKEN__`, declared here so the
+ * file passes the scaffold's strict `tsc` — the recipe this replaced used the name undeclared and
+ * failed with `TS2304: Cannot find name '__RETICLE_TOKEN__'`.
  *
- * `__root.tsx` is the document. A static import of the SDK on that module SSRs and 500s, so `init`
- * does not write one. The connect has to be a client-only dynamic import inside `useEffect`, with
- * the pairing token the plugin inlines as `__RETICLE_TOKEN__`. Same judgement React Router already
- * makes about `app/entry.client.tsx`: a half-written document is worse than a documented manual step.
+ * It also loads the app's `src/reticle-dev.ts` after connecting. Start is written `inject: false`,
+ * and the plugin's injected connect is the only other thing that imports that file, so without this
+ * line every store and capability registered there silently never ran.
  */
-export function tanstackStartManual(port, projectId, rootPath = TANSTACK_START_ROOT_PATH) {
+export function tanstackStartConnectFile(port, projectId, rootPath = TANSTACK_START_ROOT_PATH) {
     const sdk = sdkImport(UiLibrary.REACT);
     const base = connectArg(port, projectId);
     const fields = '' === base ? '' : `${base.slice(1, -1).trim()}, `;
-    const installLine = sdk.usesInstall
-        ? '        install();'
-        : '        // No React adapter here: the sensor has no install() to call.';
     const imports = sdk.usesInstall ? 'reticle, install' : 'reticle';
+    const installLine = sdk.usesInstall
+        ? '      install();'
+        : '      // No React adapter here: the sensor has no install() to call.';
+    const devModule = devModuleSpecifier(tanstackStartConnectPath(rootPath));
+    return `import { useEffect } from 'react';
+
+/**
+ * Dev-only: connect Reticle from the client. Start SSRs its own <html> and never sends Vite's
+ * index.html, so the plugin's injection cannot do it. Rendered once in the root document.
+ */
+export function ${CONNECT_COMPONENT}() {
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    // Inlined by @reticlehq/vite-plugin. The bridge refuses a connect without it, even on localhost.
+    const token = typeof __RETICLE_TOKEN__ !== 'undefined' ? __RETICLE_TOKEN__ : '';
+    const root = typeof __RETICLE_ROOT__ !== 'undefined' ? __RETICLE_ROOT__ : '';
+    void import('${sdk.specifier}').then(({ ${imports} }) => {
+${installLine}
+      reticle.connect({
+        ${fields}...(token.length > 0 ? { token } : {}),
+        ...(root.length > 0 ? { root } : {}),
+      });
+      // Your stores and capabilities live here; nothing else loads this file under Start.
+      void import('${devModule}');
+    });
+  }, []);
+  return null;
+}
+
+declare const __RETICLE_TOKEN__: string | undefined;
+declare const __RETICLE_ROOT__: string | undefined;
+
+${VITE_ENV_DEV_DECLARATION}`;
+}
+/** The import the root document gets, relative to where it lives. */
+function connectImport(rootPath) {
+    const target = tanstackStartConnectPath(rootPath).replace(/\.tsx$/, '');
+    const rel = posix.relative(posix.dirname(rootPath), target);
+    return `import { ${CONNECT_COMPONENT} } from '${rel.startsWith('.') ? rel : `./${rel}`}';`;
+}
+/**
+ * Render the component in the root document, just before `<Scripts />`.
+ *
+ * `<Scripts />` is the anchor because every Start root has to render it — it is how the client
+ * bundle reaches the page — whatever the component around it is called (`RootDocument` as the
+ * route's `shellComponent` in the current template; `RootComponent` in older ones). A root without
+ * one is a shape we do not recognise, and a half-edited document is worse than a documented step.
+ */
+export function patchTanstackStartRoot(source, rootPath) {
+    if (source.includes(CONNECT_COMPONENT))
+        return { kind: PatchKind.ALREADY };
+    if (!rootPath.endsWith('.tsx')) {
+        return { kind: PatchKind.MANUAL, reason: `${rootPath} is not TypeScript` };
+    }
+    const outlet = SCRIPTS_OUTLET.exec(source);
+    if (null === outlet) {
+        return { kind: PatchKind.MANUAL, reason: `no <Scripts /> found in ${rootPath}` };
+    }
+    const indent = outlet[1] ?? '';
+    const rendered = source.replace(SCRIPTS_OUTLET, `${indent}<${CONNECT_COMPONENT} />\n$&`);
+    const lines = rendered.split('\n');
+    let lastImport = -1;
+    for (const [index, line] of lines.entries()) {
+        if (/^import\s/.test(line))
+            lastImport = index;
+    }
+    lines.splice(lastImport + 1, 0, connectImport(rootPath));
+    return { kind: PatchKind.APPLY, code: lines.join('\n') };
+}
+/**
+ * The recipe, for a root `patchTanstackStartRoot` would not edit.
+ *
+ * The same two edits it makes, stated as edits: create the component, render it before
+ * `<Scripts />`. It used to say "add this useEffect to the App component", naming a component the
+ * current template does not have, and its snippet used `__RETICLE_TOKEN__` undeclared.
+ */
+export function tanstackStartManual(port, projectId, rootPath = TANSTACK_START_ROOT_PATH) {
+    const component = tanstackStartConnectFile(port, projectId, rootPath)
+        .split('\n')
+        .map((line) => (0 === line.length ? line : `      ${line}`))
+        .join('\n');
     return `TanStack Start SSRs <html> from ${rootPath} (HeadContent / Scripts) and never sends Vite's
   index.html, so the plugin's connect injection never fires. Keep the plugin anyway, with
   reticle({ inject: false }): only the injection half is inapplicable, and the stamping half is
   what puts data-reticle-source on the JSX. Dropping the plugin because one of its two jobs did
   not apply is how Remix lost file:line.
 
-  Connect from a CLIENT-ONLY effect in ${rootPath}. A static SDK import on that module SSRs and
-  500s. Do not guard on window.location.hostname === 'localhost' — import.meta.env.DEV is the
-  correct guard, and it does not care what host you develop on.
-
-  Add this useEffect to the App component (import useEffect from react if it is not already there):
+  1. Create ${tanstackStartConnectPath(rootPath)}. It connects from a CLIENT-ONLY effect: a static SDK
+     import on anything the root document imports SSRs and 500s.
+     Do not guard on window.location.hostname === 'localhost' — import.meta.env.DEV is the correct
+     guard, and it does not care what host you develop on.
 
-      useEffect(() => {
-        if (import.meta.env.DEV) {
-          const token = typeof __RETICLE_TOKEN__ !== 'undefined' ? __RETICLE_TOKEN__ : '';
-          void import('${sdk.specifier}').then(({ ${imports} }) => {
-${installLine}
-            reticle.connect({
-              ${fields}...(token.length > 0 ? { token } : {}),
-            });
-          });
-        }
-      }, []);
+${component}
+  2. In ${rootPath}, add \`${connectImport(rootPath)}\` and render <${CONNECT_COMPONENT} /> in the
+     component that renders <html> (the route's shellComponent), just before <Scripts />.
 
   The plugin inlines __RETICLE_TOKEN__ when Vite resolves its config. Start the daemon BEFORE the
   dev server so that file exists; a server that started first froze an empty token and the page

package/dist/patch/vite-config.d.ts

@@ -14,5 +14,10 @@ export declare const VitePatchKind: {
 };
 export type VitePatchKind = PatchKind;
 type VitePatch = SourcePatch;
+/**
+ * A whole config for a plain Vite app that has none: Vite's defaults plus the plugin. Written out
+ * rather than patched from an empty one, because it is a file the person will open and read.
+ */
+export declare function newViteConfig(port?: number, captureBodies?: boolean, inject?: boolean, sourceMapping?: boolean): string;
 export declare function patchViteConfig(source: string, port?: number, captureBodies?: boolean, inject?: boolean, sourceMapping?: boolean): VitePatch;
 export {};

package/dist/patch/vite-config.js

@@ -98,6 +98,14 @@ function insertPluginsKey(source, call) {
         return multiline ? `${prefix}{\n${indent}${key}` : `${prefix}{ ${key}`;
     });
 }
+/**
+ * A whole config for a plain Vite app that has none: Vite's defaults plus the plugin. Written out
+ * rather than patched from an empty one, because it is a file the person will open and read.
+ */
+export function newViteConfig(port, captureBodies = false, inject = true, sourceMapping = true) {
+    const call = reticlePluginCall({ port, captureBodies, inject, sourceMapping });
+    return `import { defineConfig } from 'vite';\n${VITE_IMPORT}\n\nexport default defineConfig({\n  plugins: [${call}],\n});\n`;
+}
 export function patchViteConfig(source, port, captureBodies = false, inject = true, sourceMapping = true) {
     if (source.includes(RETICLE_MARKER)) {
         return { kind: VitePatchKind.ALREADY };

package/dist/patch/vite-owning-config.d.ts

@@ -34,5 +34,39 @@ export interface ViteOwningConfig {
      * path writes. Astro's path never writes that name into the config, so it supplies its own.
      */
     readonly alreadyMarker?: string;
+    /**
+     * The installed Vite's major (see `installedViteMajor`), or null when nothing on disk said.
+     *
+     * Decides whether the dep-optimizer target is written at all. Vite 7 moved the optimizer to
+     * rolldown and deprecated `optimizeDeps.esbuildOptions`: on Nuxt 4.5 / Vite 8 the key printed a
+     * deprecation warning on every dev start and build. The target exists for esbuild, which cannot
+     * lower some of the SDK's syntax to Vite's older default; rolldown has no such gap, so on 7+ there
+     * is nothing to write under either key.
+     */
+    readonly viteMajor?: number | null | undefined;
 }
 export declare function patchViteOwningConfig(source: string, config: ViteOwningConfig): SourcePatch;
+/**
+ * The major version of the Vite this app will actually run, read from disk.
+ *
+ * Needed by the configs `init` patches for frameworks that own their Vite instance (Nuxt, Astro):
+ * Vite 7 moved the dep optimizer to rolldown and deprecated `optimizeDeps.esbuildOptions`, so the
+ * key `init` wrote printed a deprecation warning on every dev start and build there. The Vite
+ * plugin answers the same question for itself (`optimizerOptionsKey` in @reticlehq/vite-plugin),
+ * but these frameworks never load the plugin.
+ *
+ * Nuxt and Astro do not list `vite` in the app's package.json — it comes with the framework — so the
+ * declared range is the last resort, after the hoisted package and pnpm's store. Null when none
+ * says: the caller keeps the older key, as the plugin does, because a deprecation notice is a much
+ * smaller failure than an option the installed Vite has never heard of.
+ */
+interface ViteReader {
+    readFile(relPath: string): string | null;
+    listDirs(relPath: string): readonly string[];
+}
+interface DeclaredDeps {
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+}
+export declare function installedViteMajor(io: ViteReader, pkg: DeclaredDeps): number | null;
+export {};

package/dist/patch/vite-owning-config.js

@@ -15,8 +15,31 @@
  * Half-editing somebody's build config is worse than a documented manual step.
  */
 import { ReticleDir } from '@reticlehq/core';
+import { parseMajor } from '../detect/detect.js';
 import { blockAfter } from './brace-scan.js';
 import { PatchKind } from './patch-kind.js';
+/** The first Vite whose dep optimizer is rolldown — the same line the Vite plugin draws. */
+const ROLLDOWN_OPTIMIZER_MAJOR = 7;
+function writesEsbuildTarget(config) {
+    const major = config.viteMajor;
+    return undefined === major || null === major || major < ROLLDOWN_OPTIMIZER_MAJOR;
+}
+/** The optimizer target, in each of the two shapes this file writes it. */
+const ESBUILD_TARGET = "esbuildOptions: { target: 'es2022' }";
+const ESBUILD_TARGET_INNER = `\n      ${ESBUILD_TARGET},`;
+const ESBUILD_TARGET_WHOLE = `, ${ESBUILD_TARGET}`;
+/**
+ * A config an older `init` patched, with the esbuild target taken back out on a rolldown Vite.
+ *
+ * Only our own literal, in the exact shapes we wrote it — an `esbuildOptions` the app set itself is
+ * theirs, and is left to Vite's deprecation notice to talk about.
+ */
+function withoutStaleEsbuildTarget(source, config) {
+    if (writesEsbuildTarget(config) || !source.includes(ESBUILD_TARGET))
+        return null;
+    const out = source.replace(ESBUILD_TARGET_INNER, '').replace(ESBUILD_TARGET_WHOLE, '');
+    return out === source ? null : out;
+}
 /** Present in a patched config AND in a hand-followed recipe — so both count as already wired. */
 const DEFINE_TOKEN_MARKER = '__RETICLE_TOKEN__';
 function usesDefineToken(config) {
@@ -92,7 +115,7 @@ function viteKeys(config) {
         { key: 'build', inner: `\n      target: 'es2022',` },
         {
             key: 'optimizeDeps',
-            inner: `\n      include: [${sdkInclude(config)}],\n      esbuildOptions: { target: 'es2022' },`,
+            inner: `\n      include: [${sdkInclude(config)}],${writesEsbuildTarget(config) ? ESBUILD_TARGET_INNER : ''}`,
         },
         // Merged in first, so a `server: { port }` the app already set keeps its port. An app that
         // already sets `server.watch` itself is the one shape this loses to — the inner `watch` key would
@@ -111,7 +134,7 @@ function viteKeys(config) {
 function wholeKeys(config) {
     const keys = {
         build: `\n    build: { target: 'es2022' },`,
-        optimizeDeps: `\n    optimizeDeps: { include: [${sdkInclude(config)}], esbuildOptions: { target: 'es2022' } },`,
+        optimizeDeps: `\n    optimizeDeps: { include: [${sdkInclude(config)}]${writesEsbuildTarget(config) ? ESBUILD_TARGET_WHOLE : ''} },`,
         server: `\n    server: { watch: { ignored: [${WATCH_IGNORE_LITERAL}] } },`,
     };
     if (usesDefineToken(config)) {
@@ -182,7 +205,7 @@ function viteBlock(config) {
         : '';
     return `  vite: {
 ${marker}    build: { target: 'es2022' },
-    optimizeDeps: { include: [${sdkInclude(config)}], esbuildOptions: { target: 'es2022' } },
+    optimizeDeps: { include: [${sdkInclude(config)}]${writesEsbuildTarget(config) ? ESBUILD_TARGET_WHOLE : ''} },
 ${define}    server: { watch: { ignored: [${WATCH_IGNORE_LITERAL}] } },
   },
 `;
@@ -199,8 +222,12 @@ function withOwningMarker(source, config, braceAt) {
     return insertAt(source, braceAt, `\n    /* ${alreadyMarker(config)} */`);
 }
 export function patchViteOwningConfig(source, config) {
-    if (source.includes(alreadyMarker(config)))
-        return { kind: PatchKind.ALREADY };
+    if (source.includes(alreadyMarker(config))) {
+        const cleaned = withoutStaleEsbuildTarget(source, config);
+        return null === cleaned
+            ? { kind: PatchKind.ALREADY }
+            : { kind: PatchKind.APPLY, code: cleaned };
+    }
     // A `vite: { ... }` block is an object literal, so our keys can go straight after the brace and
     // whatever is already in there is untouched. Refusing outright was the only genuine install defect
     // left in the gate: the config bailed while the LAYOUT patch applied anyway, leaving an app with a
@@ -244,3 +271,34 @@ export function patchViteOwningConfig(source, config) {
         code: withHelper(withBlock, config),
     };
 }
+const HOISTED_VITE = 'node_modules/vite/package.json';
+const PNPM_STORE = 'node_modules/.pnpm';
+/** A pnpm store entry for vite itself: `vite@8.0.16` or `vite@7.1.2_@types+node@24…`. */
+const PNPM_VITE_ENTRY = /^vite@(\d+)\./;
+export function installedViteMajor(io, pkg) {
+    const hoisted = io.readFile(HOISTED_VITE);
+    if (null !== hoisted) {
+        try {
+            const parsed = JSON.parse(hoisted);
+            const version = 'object' === typeof parsed && null !== parsed
+                ? parsed.version
+                : undefined;
+            const major = 'string' === typeof version ? parseMajor(version) : undefined;
+            if (major !== undefined)
+                return major;
+        }
+        catch {
+            // Unreadable manifest: fall through to the store and the declared range.
+        }
+    }
+    // ponytail: several copies can sit in the store and the newest is taken; resolving the framework's
+    // own `vite` through its dependency chain is the upgrade if a stale newer copy ever misleads this.
+    const stored = io
+        .listDirs(PNPM_STORE)
+        .map((name) => PNPM_VITE_ENTRY.exec(name)?.[1])
+        .filter((major) => major !== undefined)
+        .map(Number);
+    if (stored.length > 0)
+        return Math.max(...stored);
+    return parseMajor(pkg.dependencies?.['vite'] ?? pkg.devDependencies?.['vite']) ?? null;
+}

package/dist/plan/connect-steps.d.ts

@@ -27,11 +27,17 @@ export declare const StepTitle: {
     readonly NUXT_RESTART: "Restart the Nuxt dev server";
     readonly CONNECT_SNIPPET_REACT_ROUTER: "Connect snippet (React Router)";
     readonly CONNECT_SNIPPET_TANSTACK_START: "Connect snippet (TanStack Start)";
+    readonly TANSTACK_START_CONNECT_COMPONENT: "ReticleConnect component (TanStack Start)";
+    readonly CONNECT_SNIPPET_REMIX: "Connect snippet (Remix)";
+    readonly CONNECT_SNIPPET_ANGULAR: "Connect snippet (Angular)";
+    readonly ANGULAR_TOKEN_PROXY: "Angular dev-server token route";
+    readonly ANGULAR_SERVE_CONFIG: "Angular serve target (proxyConfig)";
+    readonly ANGULAR_SETUP_GATED: "Angular setup verified, drive unverified";
     readonly ELECTRON_VITE_PLUGIN: "Vite plugin (electron-vite renderer)";
     readonly ELECTRON_PRELOAD: "Electron preload (IPC shim)";
     readonly ELECTRON_CAPTURE: "Electron capture (screenshots)";
     readonly TANSTACK_START_UNVERIFIED: "TanStack Start is UNVERIFIED";
-    readonly SVELTEKIT_UNVERIFIED: "SvelteKit is UNVERIFIED";
+    readonly SVELTEKIT_SETUP_GATED: "SvelteKit setup verified, drive unverified";
     readonly CLIENT_HOOK: "Reticle client hook";
     readonly CONNECT_SNIPPET_ASTRO: "Connect snippet (Astro)";
     readonly ASTRO_RETICLE_DEV: "Astro ReticleDev module";

package/dist/plan/connect-steps.js

@@ -28,11 +28,17 @@ export const StepTitle = {
     NUXT_RESTART: 'Restart the Nuxt dev server',
     CONNECT_SNIPPET_REACT_ROUTER: 'Connect snippet (React Router)',
     CONNECT_SNIPPET_TANSTACK_START: 'Connect snippet (TanStack Start)',
+    TANSTACK_START_CONNECT_COMPONENT: 'ReticleConnect component (TanStack Start)',
+    CONNECT_SNIPPET_REMIX: 'Connect snippet (Remix)',
+    CONNECT_SNIPPET_ANGULAR: 'Connect snippet (Angular)',
+    ANGULAR_TOKEN_PROXY: 'Angular dev-server token route',
+    ANGULAR_SERVE_CONFIG: 'Angular serve target (proxyConfig)',
+    ANGULAR_SETUP_GATED: 'Angular setup verified, drive unverified',
     ELECTRON_VITE_PLUGIN: 'Vite plugin (electron-vite renderer)',
     ELECTRON_PRELOAD: 'Electron preload (IPC shim)',
     ELECTRON_CAPTURE: 'Electron capture (screenshots)',
     TANSTACK_START_UNVERIFIED: 'TanStack Start is UNVERIFIED',
-    SVELTEKIT_UNVERIFIED: 'SvelteKit is UNVERIFIED',
+    SVELTEKIT_SETUP_GATED: 'SvelteKit setup verified, drive unverified',
     CLIENT_HOOK: 'Reticle client hook',
     CONNECT_SNIPPET_ASTRO: 'Connect snippet (Astro)',
     ASTRO_RETICLE_DEV: 'Astro ReticleDev module',
@@ -63,6 +69,14 @@ export const CONNECT_STEP_TITLES = new Set([
     StepTitle.NUXT_CONFIG,
     StepTitle.CONNECT_SNIPPET_REACT_ROUTER,
     StepTitle.CONNECT_SNIPPET_TANSTACK_START,
+    // The component and the line that renders it are two steps, for the reason Next's are.
+    StepTitle.TANSTACK_START_CONNECT_COMPONENT,
+    StepTitle.CONNECT_SNIPPET_REMIX,
+    StepTitle.CONNECT_SNIPPET_ANGULAR,
+    // Both halves of how an Angular page gets its pairing token. Without the route the connect is
+    // refused on the token, and without the serve-target entry `ng serve` never mounts the route.
+    StepTitle.ANGULAR_TOKEN_PROXY,
+    StepTitle.ANGULAR_SERVE_CONFIG,
     StepTitle.CLIENT_HOOK,
     StepTitle.CONNECT_MODULE,
     StepTitle.RETICLE_DEV_COMPONENT,
@@ -87,6 +101,9 @@ export const CONNECT_STEP_TITLES = new Set([
     // electron-vite's connect IS the renderer plugin. Without it the SDK never injects, and the
     // preload/capture steps are not enough to produce a session.
     StepTitle.ELECTRON_VITE_PLUGIN,
+    // A policy that refuses the bridge WebSocket is a guaranteed non-connection on EVERY framework, so
+    // a ⚠ on it (a policy init could not edit) must fail init rather than read as advice.
+    StepTitle.CSP,
 ]);
 /** True when this step is what makes the app dial the daemon. */
 export function isConnectStep(title) {

package/dist/plan/framework-adapter.d.ts

@@ -18,7 +18,7 @@
  *
  * `framework-adapter.test.ts` asserts the seam between the two halves.
  */
-import { Framework } from '../detect/detect.js';
+import { Framework, UiLibrary } from '../detect/detect.js';
 import { StepTitle } from './connect-steps.js';
 import type { PlanInput, Step } from './plan-types.js';
 export declare const RETICLE_REACT_KIT = "@reticlehq/react";
@@ -53,6 +53,8 @@ interface FrameworkAdapter {
      */
     readonly carriesOwnUnverifiedNote: boolean;
 }
+/** Whether the install gate scaffolds this stack — see INSTALL_GATE_STACKS. */
+export declare function installGated(framework: Framework, uiLibrary: UiLibrary): boolean;
 export declare const FRAMEWORK_ADAPTERS: Record<Framework, FrameworkAdapter>;
 /**
  * The per-framework half of the plan, looked up rather than switched.

package/dist/plan/framework-adapter.js

@@ -18,10 +18,40 @@
  *
  * `framework-adapter.test.ts` asserts the seam between the two halves.
  */
-import { Framework } from '../detect/detect.js';
+import { Framework, UiLibrary } from '../detect/detect.js';
 import { StepTitle } from './connect-steps.js';
-import { VITE_PLUGIN_DETAIL, astroSteps, craSteps, htmlSteps, nextSteps, nuxtSteps, reactRouterSteps, svelteKitSteps, tanstackStartSteps, viteSteps, } from './plan-framework.js';
-import { electronViteSteps } from './plan-electron-vite.js';
+import { astroSteps, craSteps, htmlSteps, nextSteps, nuxtSteps, reactRouterSteps, svelteKitSteps, tanstackStartSteps, } from './plan-framework.js';
+import { VITE_PLUGIN_DETAIL, viteSteps } from './plan-vite.js';
+import { electronForgeSteps, electronViteSteps } from './plan-electron-vite.js';
+import { angularSteps } from './plan-angular.js';
+import { REMIX_CLASSIC_MANUAL, remixEntryFile } from '../patch/remix.js';
+import { StepStatus } from './plan-types.js';
+/** Where the classic Remix compiler's ⚠ points: the file that says which compiler this is. */
+const REMIX_CLASSIC_TARGET = 'remix.config.js';
+/**
+ * Remix v2: React Router framework mode's steps, with Remix's own default entry and title.
+ *
+ * No Vite config is the classic compiler — `vitePlugin` is the only way Remix runs on Vite, and it
+ * lives in that file — and wiring the entry there would import a module nothing serves.
+ */
+function remixSteps(input) {
+    if (null === input.viteConfig) {
+        return [
+            {
+                title: StepTitle.CONNECT_SNIPPET_REMIX,
+                target: REMIX_CLASSIC_TARGET,
+                status: StepStatus.MANUAL,
+                detail: REMIX_CLASSIC_MANUAL,
+            },
+        ];
+    }
+    return [
+        ...reactRouterSteps(input, StepTitle.CONNECT_SNIPPET_REMIX, remixEntryFile),
+        // The plugin stamps file:line, and it is also what serves the `/@reticle-connect` module the
+        // entry imports.
+        ...viteSteps(input, VITE_PLUGIN_DETAIL.REACT_ROUTER),
+    ];
+}
 // An app dev installs exactly the audience-scoped browser-side dependencies — never the retired
 // `@reticlehq/core` umbrella (which dragged the Node MCP server + ws into every app). The kit is the
 // framework adapter (it re-exports the browser sensor), paired with that framework's dev-only build
@@ -33,6 +63,29 @@ const RETICLE_VITE_PLUGIN = '@reticlehq/vite-plugin';
 const RETICLE_NEXT_PLUGIN = '@reticlehq/next';
 /** The Electron main/preload helper — what makes IPC and screenshots exist at all. */
 const RETICLE_ELECTRON = '@reticlehq/electron';
+/**
+ * The stacks the install gate scaffolds from scratch on every change (`SCAFFOLDS` in
+ * `apps/e2e/install-gate.mjs`), as framework → the UI libraries its scaffolds render.
+ *
+ * The one place `init` says which setups are PROVEN. Nuxt was labelled "vue is UNVERIFIED" while the
+ * gate scaffolded it on every change, because nothing here knew the gate existed. Add a scaffold
+ * there, add its stack here. Only the setup is proven: no gate drives these apps to a verdict.
+ */
+const INSTALL_GATE_STACKS = {
+    [Framework.VITE]: [UiLibrary.REACT, UiLibrary.VUE, UiLibrary.UNKNOWN],
+    [Framework.NEXT]: [UiLibrary.REACT],
+    [Framework.NUXT]: [UiLibrary.VUE],
+    [Framework.REACT_ROUTER]: [UiLibrary.REACT],
+    [Framework.REMIX]: [UiLibrary.REACT],
+    [Framework.ASTRO]: [UiLibrary.UNKNOWN],
+    [Framework.SVELTEKIT]: [UiLibrary.SVELTE],
+    [Framework.CRA]: [UiLibrary.REACT],
+    [Framework.ANGULAR]: [UiLibrary.UNKNOWN],
+};
+/** Whether the install gate scaffolds this stack — see INSTALL_GATE_STACKS. */
+export function installGated(framework, uiLibrary) {
+    return INSTALL_GATE_STACKS[framework]?.includes(uiLibrary) ?? false;
+}
 export const FRAMEWORK_ADAPTERS = {
     [Framework.NEXT]: {
         // Next is React by construction, so the detection cannot disagree in a way worth honouring.
@@ -72,7 +125,9 @@ export const FRAMEWORK_ADAPTERS = {
         packages: (kit) => [kit, RETICLE_VITE_PLUGIN],
         // The Vite plugin too, for the reason SvelteKit gets it: React Router framework mode IS a Vite
         // app, and the plugin is what stamps data-reticle-source. Without it the app connects and every
-        // verdict comes back with no file:line.
+        // verdict comes back with no file:line. Injection stays ON, unlike SvelteKit and Start: the
+        // client entry imports `/@reticle-connect`, which the plugin serves only while inject is on, and
+        // that module is what loads the dev module here.
         steps: (input) => [
             ...reactRouterSteps(input),
             ...viteSteps(input, VITE_PLUGIN_DETAIL.REACT_ROUTER),
@@ -86,7 +141,12 @@ export const FRAMEWORK_ADAPTERS = {
         // The Vite plugin as well as the client hook. `init` already INSTALLS @reticlehq/vite-plugin for
         // SvelteKit and then never wired it into the config, so it sat in package.json doing nothing —
         // which is why a SvelteKit app connected fine and every verdict had no file:line.
-        steps: (input) => [...svelteKitSteps(input), ...viteSteps(input, VITE_PLUGIN_DETAIL.SVELTEKIT)],
+        // `inject: false` because the client hook connects; the plugin's injection never fires here, and
+        // left on it only warns ten seconds into every page load that the app will never connect.
+        steps: (input) => [
+            ...svelteKitSteps(input),
+            ...viteSteps(input, VITE_PLUGIN_DETAIL.SVELTEKIT, false),
+        ],
         connectStepTitles: [StepTitle.CLIENT_HOOK, StepTitle.VITE_PLUGIN],
         carriesOwnUnverifiedNote: true,
     },
@@ -109,6 +169,35 @@ export const FRAMEWORK_ADAPTERS = {
         connectStepTitles: [StepTitle.ELECTRON_VITE_PLUGIN],
         carriesOwnUnverifiedNote: false,
     },
+    [Framework.ELECTRON_FORGE]: {
+        // electron-vite's three packages, with the kit the UI-library check chose: Forge's Vite template
+        // renders no React, and `@reticlehq/react` carries `react` in its peer dependencies.
+        packages: (kit) => [kit, RETICLE_VITE_PLUGIN, RETICLE_ELECTRON],
+        steps: electronForgeSteps,
+        // The renderer config's plugin IS the connect, as under electron-vite.
+        connectStepTitles: [StepTitle.VITE_PLUGIN],
+        carriesOwnUnverifiedNote: false,
+    },
+    [Framework.REMIX]: {
+        // React Router framework mode's packages, for the reason its steps are that mode's: the same
+        // framework under its previous name.
+        packages: (kit) => [kit, RETICLE_VITE_PLUGIN],
+        steps: remixSteps,
+        connectStepTitles: [StepTitle.CONNECT_SNIPPET_REMIX, StepTitle.VITE_PLUGIN],
+        carriesOwnUnverifiedNote: false,
+    },
+    [Framework.ANGULAR]: {
+        // The sensor alone. There is no build plugin for the Angular CLI to load, and the React kit is
+        // what used to be installed here, with `react` beside it.
+        packages: () => [RETICLE_BROWSER_SDK],
+        steps: angularSteps,
+        connectStepTitles: [
+            StepTitle.CONNECT_SNIPPET_ANGULAR,
+            StepTitle.ANGULAR_TOKEN_PROXY,
+            StepTitle.ANGULAR_SERVE_CONFIG,
+        ],
+        carriesOwnUnverifiedNote: true,
+    },
     [Framework.TANSTACK_START]: {
         // Start IS a Vite app, so the plugin still stamps `data-reticle-source` — only the connect
         // injection is inapplicable, and that is the plan's business (`inject: false`).
@@ -117,7 +206,11 @@ export const FRAMEWORK_ADAPTERS = {
             ...tanstackStartSteps(input),
             ...viteSteps(input, VITE_PLUGIN_DETAIL.TANSTACK_START, false),
         ],
-        connectStepTitles: [StepTitle.CONNECT_SNIPPET_TANSTACK_START, StepTitle.VITE_PLUGIN],
+        connectStepTitles: [
+            StepTitle.CONNECT_SNIPPET_TANSTACK_START,
+            StepTitle.TANSTACK_START_CONNECT_COMPONENT,
+            StepTitle.VITE_PLUGIN,
+        ],
         // The Start recipe carries its own UNVERIFIED line; a second generic notice would argue with it.
         carriesOwnUnverifiedNote: true,
     },

package/dist/plan/notices.js

@@ -11,7 +11,7 @@
 import { CONTAINERISED_TITLE, containerisedDevServerNote } from '../diagnose/containerised-dev-server.js';
 import { mcpWindowsNote } from '../register/mcp.js';
 import { unverifiedUiLibraryNote, WEBGL_CANVAS_LIMIT_NOTE } from '../patch/snippets.js';
-import { FRAMEWORK_ADAPTERS } from './framework-adapter.js';
+import { FRAMEWORK_ADAPTERS, installGated } from './framework-adapter.js';
 import { NodePlatform } from '../detect/platform.js';
 import { UiLibrary } from '../detect/detect.js';
 // `Step` and `PlanInput` are TYPES, so importing them back from `plan.ts` is erased at build
@@ -64,12 +64,13 @@ export function uiLibraryStep(input) {
         return [];
     if (lib === UiLibrary.UNKNOWN)
         return [];
+    const gated = installGated(input.detection.framework, lib);
     return [
         {
-            title: `${lib} is UNVERIFIED`,
+            title: gated ? `${lib} setup verified, drive unverified` : `${lib} is UNVERIFIED`,
             target: 'package.json',
             status: StepStatus.NOTICE,
-            detail: unverifiedUiLibraryNote(lib),
+            detail: unverifiedUiLibraryNote(lib, gated),
         },
     ];
 }

package/dist/plan/plan-angular.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Angular CLI: the dev-only connect in the browser entry, and the dev-server route that hands it
+ * the pairing token. See `patch/angular.ts` for why the token takes that route and no other.
+ */
+import { type PlanInput, type Step } from './plan-types.js';
+export declare function angularSteps(input: PlanInput): Step[];