@zitadel/cli 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/{orca-BWB4zOdw.mjs → orca-Cu0iW1mv.mjs}

@@ -1,4 +1,4 @@
-import { C as parseJsonObject, E as ZitadelError, O as npmDistTagForCliVersion, S as isObject, T as stableStringify, b as MANAGED_MARKER, k as publicCliCommand, n as DEFAULT_SERVER, w as setTopLevelJsonKey } from "./oclif-CL6-M13m.mjs";
+import { A as npmDistTagForCliVersion, C as parseJsonObject, E as ZitadelError, O as normalizePublicCliJson, S as isObject, T as stableStringify, b as MANAGED_MARKER, j as publicCliCommand, n as DEFAULT_SERVER, w as setTopLevelJsonKey } from "./oclif-CanO3zdt.mjs";
 import { access, chmod, mkdir, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
 import { basename, dirname, join } from "node:path";
 import semver from "semver";
@@ -94,12 +94,62 @@ function extractPort(script) {
 	if (rawEnvPort) return Number.parseInt(rawEnvPort, 10);
 }
 /**
+* Rewrites a `dev` script so it explicitly runs on `port`.
+*
+* Setup registers `http://localhost:<port>` as the project's only allowed
+* origin, so the dev server has to land on exactly that port — a bare
+* `next dev` does not: it defaults to 3000 and, when 3000 is taken, silently
+* falls back to 3001. Either way the flow API then rejects the app's origin
+* mid-login. An explicit `--port` removes both failure modes: the port
+* matches what setup registered, and a busy port fails loudly with
+* `EADDRINUSE` instead of drifting to one the project does not allow.
+*
+* `--port <n>` is the one spelling every framework this CLI scaffolds
+* accepts (`next dev`, `nuxt dev`, `vite`, `vinxi dev`, `ng serve`), so an
+* appended declaration stays framework-agnostic. An existing declaration is
+* rewritten in its own form instead — a `PORT=` env assignment keeps the
+* `PORT=` form — so the script keeps whichever mechanism its author chose and
+* only the number changes.
+*/
+function withDevPort(script, port) {
+	const flagPattern = /(-p\s+|--port[=\s]+)\d+/;
+	if (flagPattern.test(script)) return script.replace(flagPattern, (_match, prefix) => `${prefix}${String(port)}`);
+	const envPattern = /((?:^|\s)PORT=)\d+/;
+	if (envPattern.test(script)) return script.replace(envPattern, (_match, prefix) => `${prefix}${String(port)}`);
+	return `${script.trimEnd()} --port ${String(port)}`;
+}
+/**
 * Builds the local OIDC issuer URL for a given dev port. Centralized so the
 * `localhost` origin convention is defined in exactly one place.
 */
 function issuerFromPort(port) {
 	return `http://localhost:${port}`;
 }
+/**
+* The port an issuer URL names, or `undefined` when it names none.
+*
+* The inverse of {@link issuerFromPort}, and the authoritative way to learn
+* which port a project *registered* — as opposed to {@link detectDevPort},
+* which reports the port the app would start on right now. The two agree
+* during setup and diverge afterwards, which is exactly when it matters: a
+* dev script edited to another port must be read as a mismatch against the
+* registered origin, not as the new truth.
+*/
+function portFromIssuer(issuer) {
+	try {
+		new URL(issuer);
+	} catch {
+		return;
+	}
+	let probe;
+	try {
+		probe = new URL(issuer.replace(/^[a-zA-Z][a-zA-Z0-9+.-]*:/, "zl-issuer-probe:"));
+	} catch {
+		return;
+	}
+	const port = Number.parseInt(probe.port, 10);
+	return Number.isFinite(port) && port > 0 ? port : void 0;
+}
 //#endregion
 //#region src/lib/orca/detectors/angular.ts
 /** The lowest Angular major the generated templates compile on. */
@@ -665,8 +715,9 @@ function agentsGuidanceSection(ctx) {
 	const apply = publicCliCommand("apply", ctx.cliVersion);
 	const passkeyVerifyNote = ctx.preset === "passkey-first" ? " Agents: automated browsers can't complete passkey ceremonies — verify the loop via the email/password fallback actions, or attach a CDP WebAuthn virtual authenticator." : "";
 	const jsxTypesNote = ctx.framework.id === "next" ? " React JSX types for the `<zitadel-*>` elements ship with the SDK — `custom-elements.d.ts` references `@zitadel/sdk-next/jsx`." : "";
-	const presentationParagraph = ctx.posture === "widget" ? "Presentation, by contrast, is edited in the generated pages: this app pre-dates setup, so they embed the sign-in widgets as `variant=\"widget\"` cards (with `theme=\"auto\"`) inside your existing layout; switch to `variant=\"page\"` for the widget's own full-page chrome, and set `theme` (`light` | `dark` | `auto`) to pick the color scheme." : "Presentation, by contrast, is edited in the generated pages: they pin the sign-in widgets to `variant=\"page\"` (full-page chrome); switch to `variant=\"widget\"` to embed a card inside your own layout, and set `theme` (`light` | `dark` | `auto`) to pick the color scheme.";
-	const sessionStateParagraph = ctx.framework.id === "next" ? "Your app's own chrome (header navigation, account menus) reads session state with `getSession()` from `@zitadel/sdk-next/session` — a no-store client read of the same-origin `/__nextgen/sessions/me` that the session card itself uses. It returns identity only for 200 with a non-empty `user_id`, and signed-out only for the backend's canonical `401/auth.unauthorized` or `404/sess.not_found`; any other response is unknown/error, never signed-out. In Server Components on routes covered by the request-boundary `matcher`, `auth()` from `@zitadel/sdk-next/server` works too. Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so chrome re-reads on the next page load without extra wiring." : ctx.framework.id === "nuxt" ? "Your app's own chrome (header navigation, account menus) reads session state with the auto-imported `useAuth()` composable — seeded from the server on every render by the scaffolded auth plugin. Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so the state is fresh on every page load." : "Your app's own chrome (header navigation, account menus) can read session state from the same-origin `/__nextgen/sessions/me` — the same server-answered read the session card performs. Fetch with `credentials: \"include\"`, `cache: \"no-store\"`, and `Accept: application/json`; treat 200 as signed-in only with a non-empty `user_id`, and signed-out only for the canonical error envelope `401/auth.unauthorized` or `404/sess.not_found`. Any other response is unknown/error, never signed-out. Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so chrome re-reads on the next page load.";
+	const presentationParagraph = ctx.posture === "widget" ? "Presentation, by contrast, is edited in the generated pages: this app pre-dates setup, so they embed the sign-in widgets as `variant=\"widget\"` cards (with `theme=\"auto\"`) inside your existing layout; switch to `variant=\"page\"` for the widget's own full-page chrome, and set `theme` (`light` | `dark` | `auto`) to pick the color scheme — `auto` follows the OS `prefers-color-scheme`, not this app's own theme, so pin `light` or `dark` when the app fixes its scheme." : "Presentation, by contrast, is edited in the generated pages: they pin the sign-in widgets to `variant=\"page\"` (full-page chrome); switch to `variant=\"widget\"` to embed a card inside your own layout, and set `theme` (`light` | `dark` | `auto`) to pick the color scheme — `auto` follows the OS `prefers-color-scheme`, not this app's own theme, so pin `light` or `dark` when the app fixes its scheme.";
+	const themingParagraph = "Theming the widgets from your app: `--zl-*` design-token custom properties set on the element in your own stylesheet pierce the widgets' shadow DOM. The bridge covers your fonts (`--zl-font-family-heading`, `--zl-font-family-sans`), radii (`--zl-radius-s`/`-m`/`-l`), the primary CTA pair (`--zl-primary` / `--zl-primary-foreground`), and the link color (`--zl-color-text-link`). When your page already carries the heading, set the `suppress-header` attribute on `<zitadel-login>` / `<zitadel-session>` (SDK wrappers: `suppressHeader`) to visually hide the widget's own heading block — it stays in the accessibility tree. Starter designs from `.zitadel/branding/` collapse their brand pane by container width, not viewport: an embedded card usually renders the compact brand mark instead (`logo_url`, else `hero_url`, from `branding.json`; the `hero` design falls back to editable text).";
+	const sessionStateParagraph = ctx.framework.id === "next" ? "Your app's own chrome (header navigation, account menus) reads session state with `getSession()` from `@zitadel/sdk-next/session` — a no-store client read of the same-origin `/__nextgen/sessions/me` that the session card itself uses. It returns identity only for 200 with a non-empty `user_id`, and signed-out only for the backend's canonical `401/auth.unauthorized` or `404/sess.not_found`; any other response is unknown/error, never signed-out. In Server Components on routes covered by the request-boundary `matcher`, `auth()` from `@zitadel/sdk-next/server` works too — extend the `matcher` in the request boundary to cover your public routes when you want server-rendered, flash-free session state in shared chrome (the trade: the middleware then runs on those routes). Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so chrome re-reads on the next page load without extra wiring." : ctx.framework.id === "nuxt" ? "Your app's own chrome (header navigation, account menus) reads session state with the auto-imported `useAuth()` composable — seeded from the server on every render by the scaffolded auth plugin. Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so the state is fresh on every page load." : "Your app's own chrome (header navigation, account menus) can read session state from the same-origin `/__nextgen/sessions/me` — the same server-answered read the session card performs. Fetch with `credentials: \"include\"`, `cache: \"no-store\"`, and `Accept: application/json`; treat 200 as signed-in only with a non-empty `user_id`, and signed-out only for the canonical error envelope `401/auth.unauthorized` or `404/sess.not_found`. Any other response is unknown/error, never signed-out. Sign-in and sign-out navigate (`post-sign-in-url` / `post-sign-out-url`), so chrome re-reads on the next page load.";
 	return `## Authentication (Zitadel)
 
 This app's login is managed by Zitadel. Local config is the source of truth; never change auth behavior by editing generated route files.
@@ -685,6 +736,8 @@ The golden path:
 
 ${presentationParagraph}${jsxTypesNote}
 
+${themingParagraph}
+
 ${sessionStateParagraph}
 
 Machine-readable dialect (read these before authoring flow or schema edits):
@@ -1047,7 +1100,7 @@ var AbstractRulePatcher = class {
 			...metaSchemaFiles().map((file) => ({
 				kind: "write",
 				path: `${META_SCHEMA_DIR}/${file.name}`,
-				contents: `${JSON.stringify(file.body, null, 2)}\n`
+				contents: `${JSON.stringify(normalizePublicCliJson(file.body, ctx.cliVersion), null, 2)}\n`
 			})),
 			{
 				kind: "edit",
@@ -1606,6 +1659,73 @@ var AngularPatcher = class extends AbstractRulePatcher {
 	}
 };
 //#endregion
+//#region src/lib/orca/patchers/rule/dev-script-port.ts
+/**
+* Pins the `dev` script to the port setup registered as the project's origin.
+*
+* Setup allows exactly one origin, `http://localhost:<devPort>`, so the dev
+* server has to land on that port or the flow API rejects the app mid-login
+* (the first step renders, the first submit 400s with `origin ... is not
+* allowed for this project`). Every other framework this CLI patches already
+* guarantees that in its own dev-server config — Vite gets `server.port` plus
+* `strictPort`, Angular gets `serve.options.port` — but `next dev` and
+* `nuxt dev` take their port from the command line, so nothing held them to
+* it: they default to 3000 regardless of the port setup registered.
+*
+* For Next the flag also restores the guarantee `strictPort` gives Vite: bare
+* `next dev` silently serves 3001 when 3000 is taken (measured), while
+* `next dev --port N` exits with `EADDRINUSE` instead of drifting onto a port
+* the project does not allow.
+*
+* Non-destructive: a script already on the right port is returned unchanged
+* (so the op skips the file rather than reformatting a user's package.json),
+* and a project without a `dev` script is left alone because there is no
+* command to pin.
+*
+* Takes the project's registered `issuer` rather than a port, because the
+* expected value has to survive the app drifting away from it. `doctor`
+* rebuilds this plan from `loadPatchContext`, whose `framework.devPort` is
+* freshly *detected* from the current script — deriving the target from that
+* would make any edited script verify against itself (always "applied") and
+* would make `doctor --fix` write back the detected fallback instead of the
+* port the project actually allows. The issuer comes from `zitadel.json`
+* (falling back to the scaffold manifest), so it still says 3456 after
+* someone edits the script to 4000. An issuer that names no port yields no
+* expectation and the op becomes a no-op.
+*/
+function devScriptPortEdit(issuer) {
+	return (source) => {
+		if (source === void 0) throw new ZitadelError("E_VALIDATION", "package.json is required to pin the dev port", { hint: "Run setup from a project that has a package.json." });
+		const devPort = portFromIssuer(issuer);
+		if (devPort === void 0) return source;
+		const pkg = parseJsonObject(source, "package.json");
+		const scripts = isObject(pkg.scripts) ? pkg.scripts : void 0;
+		const dev = scripts?.dev;
+		if (typeof dev !== "string" || dev.trim() === "") return source;
+		if (extractPort(dev) === devPort) return source;
+		return setTopLevelJsonKey(source, "package.json", "scripts", {
+			...scripts,
+			dev: withDevPort(dev, devPort)
+		});
+	};
+}
+/**
+* The `package.json` op pinning the dev script's port. Marked as managed
+* wiring so `doctor` reports a dev script that drifted off the registered
+* origin — `convenience` (warn, not fail) because the script is only one of
+* the ways a dev server picks its port: `npm run dev -- --port 4000` still
+* moves it without touching the file, so a hard failure here would promise a
+* guarantee the check cannot make.
+*/
+function devScriptPortOp(issuer) {
+	return {
+		kind: "edit",
+		path: "package.json",
+		edit: devScriptPortEdit(issuer),
+		wiring: "convenience"
+	};
+}
+//#endregion
 //#region src/lib/orca/patchers/rule/next/renderers/lit/index.ts
 /**
 * Placeholder renderer for the `<zitadel-flow>` Lit web component. Declared
@@ -1754,11 +1874,16 @@ const ${elementName} = dynamic(
 );
 
 export default function ${componentName}() {
-${widget ? `  // variant="widget" embeds the sign-in card in this app's existing layout,
-  // and theme="auto" follows its color scheme; the wrapper below only centers
-  // the card — restyle or replace it freely. Switch to variant="page" for the
-  // widget's own full-page chrome (viewport height, surface background from
-  // design tokens).` : `  // variant="page" makes the widget paint the full-page chrome itself
+${widget ? `  // variant="widget" embeds the sign-in card in this app's existing layout.
+  // theme="auto" follows the OS light/dark preference (prefers-color-scheme),
+  // not this app's own theme — set theme="light" or theme="dark" to match an
+  // app that pins its scheme. The wrapper below only centers the card —
+  // restyle or replace it freely. Switch to variant="page" for the widget's
+  // own full-page chrome (viewport height, surface background from design
+  // tokens).
+  // If this page already carries its own heading, add suppress-header to the
+  // element to visually hide the widget's heading block — it stays in the
+  // accessibility tree, and the card keeps no blank header band.` : `  // variant="page" makes the widget paint the full-page chrome itself
   // (viewport height, surface background) from design tokens; switch to
   // variant="widget" to embed the sign-in card inside a layout you own.`}
   return (
@@ -1803,11 +1928,16 @@ const ZitadelSession = dynamic(
 );
 
 export default function ProfilePage() {
-${widget ? `  // variant="widget" embeds the session card in this app's existing layout,
-  // and theme="auto" follows its color scheme; the wrapper below only centers
-  // the card — restyle or replace it freely. Switch to variant="page" for the
-  // card's own full-page chrome (viewport height, surface background from
-  // design tokens).` : `  // variant="page" makes the session card paint the full-page chrome itself
+${widget ? `  // variant="widget" embeds the session card in this app's existing layout.
+  // theme="auto" follows the OS light/dark preference (prefers-color-scheme),
+  // not this app's own theme — set theme="light" or theme="dark" to match an
+  // app that pins its scheme. The wrapper below only centers the card —
+  // restyle or replace it freely. Switch to variant="page" for the card's
+  // own full-page chrome (viewport height, surface background from design
+  // tokens).
+  // If this page already carries its own heading, add suppress-header to the
+  // element to visually hide the widget's heading block — it stays in the
+  // accessibility tree, and the card keeps no blank header band.` : `  // variant="page" makes the session card paint the full-page chrome itself
   // (viewport height, surface background) from design tokens; switch to
   // variant="widget" to embed the card inside a layout you own.`}
   return (
@@ -1930,6 +2060,9 @@ var NextPatcher = class extends AbstractRulePatcher {
 	routeDeps(view) {
 		return [getRenderer(view.rendererId).dependency.name];
 	}
+	routeConfigEdits(_view) {
+		return ["package.json"];
+	}
 	summary(ctx) {
 		return {
 			title: "Next.js integration",
@@ -2032,7 +2165,8 @@ function nextCodeOps(ctx, renderer) {
 			kind: "add-dep",
 			name: renderer.dependency.name,
 			version: dependencyVersionForCli(ctx.cliVersion, renderer.dependency.version)
-		}
+		},
+		devScriptPortOp(ctx.issuer)
 	].filter((op) => op !== void 0);
 }
 function homePageTemplate() {
@@ -2211,9 +2345,12 @@ const project = useZitadelProject();
 <template>
   ${widget ? "<div style=\"display: flex; justify-content: center; padding: 4rem 1rem\">" : "<main style=\"color-scheme: dark\">"}
     <ClientOnly>
-      ${widget ? `<!-- variant="widget" embeds the card in this app's own layout, and
-           theme="auto" follows its color scheme; variant="page" would paint
-           the widget's full-page chrome instead. -->` : `<!-- variant="page" paints the widget's full-page chrome from design
+      ${widget ? `<!-- variant="widget" embeds the card in this app's own layout.
+           theme="auto" follows the OS light/dark preference
+           (prefers-color-scheme), not the app's own theme — set
+           theme="light" or theme="dark" to match an app that pins its
+           scheme. variant="page" would paint the widget's full-page
+           chrome instead. -->` : `<!-- variant="page" paints the widget's full-page chrome from design
            tokens; variant="widget" embeds the card inside a layout you own. -->`}
       <zitadel-login
         ${widget ? "variant=\"widget\"\n        theme=\"auto\"" : "variant=\"page\""}
@@ -2235,11 +2372,14 @@ function registerPageTemplate(ctx) {
 function profilePageTemplate(ctx) {
 	const widget = ctx.posture === "widget";
 	const variantAttrs = widget ? "variant=\"widget\"\n        theme=\"auto\"" : "variant=\"page\"";
-	const postureComment = widget ? `<!-- variant="widget" embeds the session card in this app's own layout,
-           and theme="auto" follows its color scheme; variant="page" would
-           paint the card's full-page chrome instead. Your own components (a
-           header, an account menu) read the same session state with the
-           auto-imported useAuth() composable. -->` : `<!-- variant="page" paints the session card's full-page chrome from design
+	const postureComment = widget ? `<!-- variant="widget" embeds the session card in this app's own layout.
+           theme="auto" follows the OS light/dark preference
+           (prefers-color-scheme), not the app's own theme — set
+           theme="light" or theme="dark" to match an app that pins its
+           scheme. variant="page" would paint the card's full-page chrome
+           instead. Your own components (a header, an account menu) read
+           the same session state with the auto-imported useAuth()
+           composable. -->` : `<!-- variant="page" paints the session card's full-page chrome from design
            tokens; variant="widget" embeds the card inside a layout you own.
            Your own components (a header, an account menu) read the same session
            state with the auto-imported useAuth() composable. -->`;
@@ -2381,7 +2521,8 @@ var NuxtPatcher = class extends AbstractRulePatcher {
 				kind: "add-dep",
 				name: SDK_DEPENDENCY$5,
 				version: npmDistTagForCliVersion(ctx.cliVersion)
-			}
+			},
+			devScriptPortOp(ctx.issuer)
 		];
 	}
 	routeFiles(view) {
@@ -2408,7 +2549,7 @@ var NuxtPatcher = class extends AbstractRulePatcher {
 		return [SDK_DEPENDENCY$5];
 	}
 	routeConfigEdits(_view) {
-		return ["nuxt.config.*"];
+		return ["nuxt.config.*", "package.json"];
 	}
 	summary(_ctx) {
 		return {
@@ -3773,4 +3914,4 @@ function isErrno(error, code) {
 //#endregion
 export { AGENTS_HEADER as a, RENDERER_IDS as i, inspectScaffoldTarget as n, removeGuidanceSection as o, AVAILABLE_RENDERER_IDS as r, issuerFromPort as s, createOrca as t };
 
-//# sourceMappingURL=orca-BWB4zOdw.mjs.map
+//# sourceMappingURL=orca-Cu0iW1mv.mjs.map