veryfront 0.1.92 → 0.1.93

package/esm/src/server/handlers/request/ssr/ssr.handler.js

@@ -2,7 +2,7 @@ import { BaseHandler } from "../../response/base.js";
 import { PRIORITY_LOW } from "../../../../utils/constants/index.js";
 import { generateNonce } from "../../../../security/http/response/security-handler.js";
 import { isExtendedFSAdapter } from "../../../../platform/adapters/fs/wrapper.js";
-import { getEnv } from "../../../../platform/compat/process.js";
+import { getHostEnv } from "../../../../platform/compat/process.js";
 import { shouldUseNoCacheHeadersFromHandler } from "../../../context/enriched-context.js";
 import { withSpan } from "../../../../observability/tracing/otlp-setup.js";
 import { serverLogger } from "../../../../utils/index.js";
@@ -76,7 +76,9 @@ export class SSRHandler extends BaseHandler {
             if (ctx.projectSlug && isExtended && fsAdapter.isMultiProjectMode()) {
                 const prodMode = isProductionMode(ctx, url);
                 const branch = ctx.parsedDomain?.branch ?? null;
-                const effectiveToken = ctx.proxyToken || getEnv("VERYFRONT_API_TOKEN") || "";
+                // Framework-owned token: bypass project env overlay so proxy mode works
+                // when a remote project overlay is active.
+                const effectiveToken = ctx.proxyToken || getHostEnv("VERYFRONT_API_TOKEN") || "";
                 logger.debug("Using multi-project context", {
                     projectSlug: ctx.projectSlug,
                     productionMode: prodMode,

package/esm/src/utils/version.d.ts

@@ -1,4 +1,4 @@
-export declare const VERSION = "0.1.92";
+export declare const VERSION = "0.1.93";
 export declare function normalizeVeryfrontVersion(version: string | undefined): string | undefined;
 export declare function resolveRuntimeVersion(options?: {
     veryfrontVersion?: string;

package/esm/src/utils/version.js

@@ -2,7 +2,7 @@ import denoConfig from "../../deno.js";
 import { getEnv } from "../platform/compat/process.js";
 // Keep in sync with deno.json version.
 // scripts/release.ts updates this constant during releases.
-export const VERSION = "0.1.92";
+export const VERSION = "0.1.93";
 export function normalizeVeryfrontVersion(version) {
     if (!version)
         return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "description": "The simplest way to build AI-powered apps",
   "keywords": [
     "react",

package/src/cli/commands/styles/command-help.ts

@@ -0,0 +1,21 @@
+import type { CommandHelp } from "../../help/types.js";
+
+export const stylesHelp: CommandHelp = {
+  name: "styles",
+  description: "Build project CSS artifacts",
+  usage: "veryfront styles build-artifact --config <json>",
+  options: [
+    {
+      flag: "--config <json>",
+      description: "JSON build config with exactly one selector and an optional style_profile_hash",
+    },
+    {
+      flag: "--debug",
+      description: "Enable debug logging",
+    },
+  ],
+  examples: [
+    'veryfront styles build-artifact --config \'{"branch":"main"}\'',
+    'veryfront styles build-artifact --config \'{"style_profile_hash":"profile-1","environment_name":"Production"}\'',
+  ],
+};

package/src/cli/commands/styles/command.ts

@@ -0,0 +1,296 @@
+import * as dntShim from "../../../_dnt.shims.js";
+import { z } from "zod";
+import { getConfig } from "../../../src/config/index.js";
+import {
+  enhanceAdapterWithFS,
+  getEnv,
+  isExtendedFSAdapter,
+  runtime,
+  type VeryfrontApiClient,
+} from "../../../src/platform/index.js";
+import {
+  buildPreparedCSSArtifactFromFiles,
+  createStyleScopeProfile,
+  resolveStyleContentVersion,
+} from "../../../src/rendering/styles.js";
+import { cliLogger, exitProcess } from "../../utils/index.js";
+import type { StylesArgs } from "./handler.js";
+import { writeJobResultIfConfigured } from "../../utils/write-job-result.js";
+
+const StyleArtifactBuildConfigSchema = z.object({
+  style_profile_hash: z.string().min(1).optional(),
+  branch: z.string().min(1).optional(),
+  environment_name: z.string().min(1).optional(),
+  release_id: z.string().min(1).optional(),
+}).superRefine((value, ctx) => {
+  const selectorCount = [value.branch, value.environment_name, value.release_id].filter(Boolean)
+    .length;
+  if (selectorCount !== 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Exactly one of branch, environment_name, or release_id is required.",
+    });
+  }
+});
+
+type StyleArtifactBuildConfig = z.infer<typeof StyleArtifactBuildConfigSchema>;
+
+interface StyleBuildContentContext {
+  branch?: string;
+  environmentName?: string;
+  releaseId?: string;
+}
+
+interface StyleArtifactBuildResult {
+  kind: "style_artifact";
+  status: "ready";
+  style_profile_hash: string;
+  artifact_hash: string;
+  asset_path: string;
+  content_type: string;
+  etag: string;
+  selector: {
+    type: "branch" | "environment" | "release";
+    value: string;
+  };
+}
+
+type StyleArtifactSelector =
+  | { branch: string; environmentName?: never; releaseId?: never; type: "branch"; value: string }
+  | {
+    branch?: never;
+    environmentName: string;
+    releaseId?: never;
+    type: "environment";
+    value: string;
+  }
+  | { branch?: never; environmentName?: never; releaseId: string; type: "release"; value: string };
+
+function parseStyleArtifactBuildConfig(rawConfig: string | undefined): StyleArtifactBuildConfig {
+  if (!rawConfig) {
+    throw new Error("Missing --config JSON");
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(rawConfig);
+  } catch {
+    throw new Error("Invalid --config JSON");
+  }
+
+  return StyleArtifactBuildConfigSchema.parse(parsed);
+}
+
+function resolveStyleArtifactSelector(
+  config: StyleArtifactBuildConfig,
+): StyleArtifactSelector {
+  if (config.branch) {
+    return {
+      branch: config.branch,
+      type: "branch",
+      value: config.branch,
+    };
+  }
+
+  if (config.environment_name) {
+    return {
+      environmentName: config.environment_name,
+      type: "environment",
+      value: config.environment_name,
+    };
+  }
+
+  return {
+    releaseId: config.release_id!,
+    type: "release",
+    value: config.release_id!,
+  };
+}
+
+function resolveContentContextSelector(
+  selector: StyleArtifactSelector,
+): { type: "branch"; branch: string } | { type: "environment"; name: string } | {
+  type: "release";
+  releaseId: string;
+} {
+  if (selector.type === "branch") {
+    return { type: "branch", branch: selector.branch };
+  }
+
+  if (selector.type === "environment") {
+    return { type: "environment", name: selector.environmentName };
+  }
+
+  return { type: "release", releaseId: selector.releaseId };
+}
+
+function requireEnv(name: string): string {
+  const value = getEnv(name)?.trim();
+  if (!value) {
+    throw new Error(`${name} is required`);
+  }
+  return value;
+}
+
+function getUnderlyingVeryfrontClient(adapter: Awaited<ReturnType<typeof enhanceAdapterWithFS>>): {
+  client: VeryfrontApiClient;
+  contentContext: StyleBuildContentContext | null;
+  getAllSourceFiles: () => Promise<Array<{ path: string; content?: string }>>;
+} {
+  if (!isExtendedFSAdapter(adapter.fs)) {
+    throw new Error("Styles build requires a Veryfront FS adapter");
+  }
+
+  const fsAdapter = adapter.fs.getUnderlyingAdapter() as {
+    getAllSourceFiles?: () => Promise<Array<{ path: string; content?: string }>>;
+    getContentContext?: () => StyleBuildContentContext | null;
+    getClient?: () => VeryfrontApiClient;
+  };
+
+  if (
+    typeof fsAdapter.getAllSourceFiles !== "function" ||
+    typeof fsAdapter.getClient !== "function"
+  ) {
+    throw new Error("Styles build requires a Veryfront source adapter");
+  }
+
+  return {
+    client: fsAdapter.getClient(),
+    contentContext: typeof fsAdapter.getContentContext === "function"
+      ? fsAdapter.getContentContext()
+      : null,
+    getAllSourceFiles: fsAdapter.getAllSourceFiles,
+  };
+}
+
+async function markStyleArtifactFailed(
+  client: VeryfrontApiClient | null,
+  selector: StyleArtifactSelector,
+  styleProfileHash: string | null | undefined,
+  error: string,
+): Promise<void> {
+  if (!client || !styleProfileHash) return;
+
+  try {
+    await client.upsertStyleArtifact({
+      ...(selector.type === "branch" ? { branch: selector.branch } : {}),
+      ...(selector.type === "environment" ? { environmentName: selector.environmentName } : {}),
+      ...(selector.type === "release" ? { releaseId: selector.releaseId } : {}),
+      styleProfileHash,
+      status: "failed",
+      failureReason: error,
+    });
+  } catch (updateError) {
+    cliLogger.warn("Failed to mark style artifact as failed", updateError);
+  }
+}
+
+export async function stylesCommand(options: StylesArgs): Promise<void> {
+  const buildConfig = parseStyleArtifactBuildConfig(options.config);
+  const selector = resolveStyleArtifactSelector(buildConfig);
+  const projectSlug = requireEnv("VERYFRONT_PROJECT_SLUG");
+  const apiToken = requireEnv("VERYFRONT_API_TOKEN");
+  const apiBaseUrl = requireEnv("VERYFRONT_API_BASE_URL");
+  const projectId = getEnv("VERYFRONT_PROJECT_ID")?.trim();
+  const projectDir = dntShim.Deno.cwd();
+
+  const baseAdapter = await runtime.get();
+  const adapter = await enhanceAdapterWithFS(
+    baseAdapter,
+    {
+      fs: {
+        type: "veryfront-api",
+        projectDir,
+        veryfront: {
+          apiBaseUrl,
+          apiToken,
+          projectSlug,
+          projectId,
+          contentSource: resolveContentContextSelector(selector),
+        },
+      },
+    },
+    projectDir,
+  );
+
+  let client: VeryfrontApiClient | null = null;
+  let resolvedStyleProfileHash: string | null = buildConfig.style_profile_hash ?? null;
+
+  try {
+    const sourceAdapter = getUnderlyingVeryfrontClient(adapter);
+    client = sourceAdapter.client;
+    const cacheKey = projectId || projectSlug;
+    const config = await getConfig(projectDir, adapter, { cacheKey });
+    const styleProfile = createStyleScopeProfile(config);
+    resolvedStyleProfileHash = styleProfile.hash;
+
+    if (buildConfig.style_profile_hash && styleProfile.hash !== buildConfig.style_profile_hash) {
+      const message =
+        `Style profile hash mismatch: expected ${buildConfig.style_profile_hash}, got ${styleProfile.hash}`;
+      await markStyleArtifactFailed(client, selector, buildConfig.style_profile_hash, message);
+      throw new Error(message);
+    }
+
+    const files = await sourceAdapter.getAllSourceFiles();
+    if (files.length === 0) {
+      throw new Error("No project files were available to build the style artifact");
+    }
+
+    const projectVersion = resolveStyleContentVersion(null, {
+      branch: sourceAdapter.contentContext?.branch ?? null,
+      releaseId: sourceAdapter.contentContext?.releaseId ?? null,
+      environmentName: sourceAdapter.contentContext?.environmentName ?? null,
+    });
+    const build = await buildPreparedCSSArtifactFromFiles({
+      projectSlug,
+      projectVersion,
+      projectDir,
+      files,
+      styleProfile,
+      stylesheetPath: config?.tailwind?.stylesheet,
+      minify: true,
+      environment: "preview",
+      buildMode: "production",
+    });
+
+    const resolution = await client.upsertStyleArtifact({
+      ...(selector.type === "branch" ? { branch: selector.branch } : {}),
+      ...(selector.type === "environment" ? { environmentName: selector.environmentName } : {}),
+      ...(selector.type === "release" ? { releaseId: selector.releaseId } : {}),
+      styleProfileHash: styleProfile.hash,
+      status: "ready",
+      artifactHash: build.hash,
+    });
+
+    const result: StyleArtifactBuildResult = {
+      kind: "style_artifact",
+      status: "ready",
+      style_profile_hash: styleProfile.hash,
+      artifact_hash: build.hash,
+      asset_path: resolution.assetPath ?? `/_vf/css/${build.hash}.css`,
+      content_type: resolution.contentType ?? "text/css; charset=utf-8",
+      etag: resolution.etag ?? `"${build.hash}"`,
+      selector: {
+        type: selector.type,
+        value: selector.value,
+      },
+    };
+
+    await writeJobResultIfConfigured(result);
+    cliLogger.info(`Built style artifact ${build.hash}`);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    await markStyleArtifactFailed(
+      client,
+      selector,
+      resolvedStyleProfileHash ?? buildConfig.style_profile_hash,
+      message,
+    );
+    cliLogger.error(message);
+    exitProcess(1);
+  } finally {
+    if (isExtendedFSAdapter(adapter.fs)) {
+      await adapter.fs.shutdown();
+    }
+  }
+}

package/src/cli/commands/styles/handler.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+import { createArgParser, parseArgsOrThrow } from "../../shared/args.js";
+import type { ParsedArgs } from "../../shared/types.js";
+
+const StylesArgsSchema = z.object({
+  subcommand: z.literal("build-artifact"),
+  config: z.string().optional(),
+  debug: z.boolean().default(false),
+});
+
+export type StylesArgs = z.infer<typeof StylesArgsSchema>;
+
+export const parseStylesArgs = createArgParser(StylesArgsSchema, {
+  subcommand: { keys: ["subcommand"], type: "string", positional: 0 },
+  config: { keys: ["config"], type: "string" },
+  debug: { keys: ["debug"], type: "boolean" },
+});
+
+export async function handleStylesCommand(args: ParsedArgs): Promise<void> {
+  const opts = parseArgsOrThrow(parseStylesArgs, "styles", args);
+  const { stylesCommand } = await import("./command.js");
+  await stylesCommand(opts);
+}

package/src/cli/help/command-definitions.ts

@@ -16,6 +16,7 @@ import { doctorHelp } from "../commands/doctor/command-help.js";
 import { cleanHelp } from "../commands/clean/command-help.js";
 import { routesHelp } from "../commands/routes/command-help.js";
 import { studioHelp } from "../commands/studio/command-help.js";
+import { stylesHelp } from "../commands/styles/command-help.js";
 import { lockHelp } from "../commands/lock/command-help.js";
 import { analyzeChunksHelp } from "../commands/analyze-chunks/command-help.js";
 import { generateHelp } from "../commands/generate/command-help.js";
@@ -51,6 +52,7 @@ export const COMMANDS: CommandRegistry = {
   clean: cleanHelp,
   routes: routesHelp,
   studio: studioHelp,
+  styles: stylesHelp,
   lock: lockHelp,
   "analyze-chunks": analyzeChunksHelp,
   generate: generateHelp,

package/src/cli/router.ts

@@ -29,6 +29,7 @@ import { handleRoutesCommand } from "./commands/routes/handler.js";
 import { handleServeCommand } from "./commands/serve/handler.js";
 import { handleStartCommand } from "./commands/start/handler.js";
 import { handleStudioCommand } from "./commands/studio/handler.js";
+import { handleStylesCommand } from "./commands/styles/handler.js";
 import { handleUpCommand } from "./commands/up/index.js";
 import { handleTaskCommand } from "./commands/task/handler.js";
 import { handleWorkflowCommand } from "./commands/workflow/handler.js";
@@ -55,6 +56,7 @@ const commands: Record<string, (args: ParsedArgs) => Promise<void>> = {
   "analyze-chunks": handleAnalyzeChunksCommand,
   "routes": handleRoutesCommand,
   "studio": handleStudioCommand,
+  "styles": handleStylesCommand,
   "lock": handleLockCommand,
   "generate": handleGenerateCommand,
   "g": handleGenerateCommand,

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "license": "Apache-2.0",
   "nodeModulesDir": "auto",
   "exclude": [
@@ -97,6 +97,7 @@ export default {
     "veryfront/config": "./src/config/index.ts",
     "veryfront/build": "./src/build/index.ts",
     "veryfront/rendering": "./src/rendering/index.ts",
+    "veryfront/rendering/styles": "./src/rendering/styles.ts",
     "veryfront/cache": "./src/cache/index.ts",
     "veryfront/security": "./src/security/index.ts",
     "veryfront/errors": "./src/errors/index.ts",

package/src/src/html/styles-builder/css-pregeneration.ts

@@ -39,6 +39,60 @@ interface CSSPregenerationOptions {
   buildMode?: "development" | "production";
 }
 
+export interface PreparedCSSArtifactBuildResult {
+  css: string;
+  hash: string;
+  candidateCount: number;
+  fromCache: boolean;
+  context: ReturnType<typeof createPreparedProjectCSSContext>;
+}
+
+export async function buildPreparedCSSArtifactFromFiles(
+  options: CSSPregenerationOptions,
+): Promise<PreparedCSSArtifactBuildResult> {
+  const {
+    projectSlug,
+    projectVersion,
+    projectDir,
+    files,
+    styleProfile,
+    stylesheet,
+    stylesheetPath,
+    minify = true,
+    environment = "preview",
+    buildMode = "production",
+  } = options;
+
+  const resolvedStylesheet = stylesheet ?? findStylesheetFromFiles(files, stylesheetPath);
+  const candidates = extractCandidatesFromFiles(files, {
+    projectDir,
+    styleProfile,
+  });
+
+  const result = await getProjectCSS(projectSlug, resolvedStylesheet, candidates, {
+    minify,
+    environment,
+    buildMode,
+  });
+  const context = createPreparedProjectCSSContext(
+    projectSlug,
+    projectVersion,
+    resolvedStylesheet,
+    styleProfile.hash,
+    { minify, environment, buildMode },
+  );
+
+  await storePreparedProjectCSS(context, { css: result.css, hash: result.hash });
+
+  return {
+    css: result.css,
+    hash: result.hash,
+    candidateCount: candidates.size,
+    fromCache: result.fromCache,
+    context,
+  };
+}
+
 /**
  * Pre-generate and cache CSS from file list.
  *
@@ -57,54 +111,28 @@ export async function pregenerateCSSFromFiles(
   const {
     projectSlug,
     projectVersion,
-    projectDir,
     files,
     styleProfile,
     stylesheet,
-    stylesheetPath,
-    minify = true,
-    environment = "preview",
-    buildMode = "production",
   } = options;
   const startTime = performance.now();
 
   try {
-    const resolvedStylesheet = stylesheet ?? findStylesheetFromFiles(files, stylesheetPath);
-    const candidates = extractCandidatesFromFiles(files, {
-      projectDir,
-      styleProfile,
-    });
-
     logger.debug("Starting", {
       projectSlug,
       projectVersion,
       fileCount: files.length,
-      candidateCount: candidates.size,
-      hasStylesheet: Boolean(resolvedStylesheet),
+      hasStylesheet: Boolean(stylesheet),
       styleProfileHash: styleProfile.hash,
     });
 
-    const result = await getProjectCSS(projectSlug, resolvedStylesheet, candidates, {
-      minify,
-      environment,
-      buildMode,
-    });
-    await storePreparedProjectCSS(
-      createPreparedProjectCSSContext(
-        projectSlug,
-        projectVersion,
-        resolvedStylesheet,
-        styleProfile.hash,
-        { minify, environment, buildMode },
-      ),
-      { css: result.css, hash: result.hash },
-    );
+    const result = await buildPreparedCSSArtifactFromFiles(options);
     const duration = performance.now() - startTime;
 
     logger.debug("Complete", {
       projectSlug,
       projectVersion,
-      candidateCount: candidates.size,
+      candidateCount: result.candidateCount,
       cssLength: result.css.length,
       cssHash: result.hash,
       fromCache: result.fromCache,

package/src/src/platform/adapters/veryfront-api-client/client.ts

@@ -1,5 +1,6 @@
 import { logger as baseLogger } from "../../../utils/index.js";
 import {
+  type EnsureStyleArtifactBuildInput,
   type FileDetail,
   type FileListResult,
   type ListFilesOptions,
@@ -350,6 +351,13 @@ export class VeryfrontApiClient {
     return this.operations.resolveStyleArtifact(projectRef, input);
   }
 
+  ensureStyleArtifactBuild(
+    input: EnsureStyleArtifactBuildInput,
+    projectRef = this.getProjectSlug()!,
+  ): Promise<ProjectStyleArtifactResolution> {
+    return this.operations.ensureStyleArtifactBuild(projectRef, input);
+  }
+
   upsertStyleArtifact(
     input: UpsertStyleArtifactInput,
     projectRef = this.getProjectSlug()!,

package/src/src/platform/adapters/veryfront-api-client/index.ts

@@ -6,6 +6,7 @@
 
 export { type FileContext, VeryfrontApiClient } from "./client.js";
 export {
+  type EnsureStyleArtifactBuildInput,
   type FileDetail,
   type FileListResult,
   type ListFilesOptions,

package/src/src/platform/adapters/veryfront-api-client/operations.ts

@@ -64,19 +64,28 @@ export interface ResolveStyleArtifactInput extends StyleArtifactSelector {
   styleProfileHash: string;
 }
 
+export interface EnsureStyleArtifactBuildInput extends ResolveStyleArtifactInput {
+  force?: boolean;
+}
+
 export interface UpsertStyleArtifactInput extends ResolveStyleArtifactInput {
-  artifactHash: string;
+  status?: "building" | "ready" | "failed";
+  artifactHash?: string;
   assetPath?: string;
   contentType?: string;
   etag?: string;
+  buildJobId?: string;
+  failureReason?: string;
 }
 
 export interface ProjectStyleArtifactResolution {
-  status: "ready" | "missing";
+  status: "ready" | "missing" | "building" | "failed";
   artifactHash?: string;
   assetPath?: string;
   etag?: string;
   contentType?: string;
+  buildJobId?: string;
+  failureReason?: string;
   updatedAt?: string;
 }
 
@@ -128,6 +137,8 @@ function mapStyleArtifactResolution(raw: unknown): ProjectStyleArtifactResolutio
     assetPath: response.asset_path,
     etag: response.etag,
     contentType: response.content_type,
+    buildJobId: response.build_job_id,
+    failureReason: response.failure_reason,
     updatedAt: response.updated_at,
   };
 }
@@ -491,6 +502,37 @@ export class VeryfrontAPIOperations {
     return mapStyleArtifactResolution(await this.request(url));
   }
 
+  async ensureStyleArtifactBuild(
+    projectRef: string,
+    input: EnsureStyleArtifactBuildInput,
+  ): Promise<ProjectStyleArtifactResolution> {
+    const url = `/projects/${encodeURIComponent(projectRef)}/style-artifacts/current/builds`;
+    logger.debug("ensureStyleArtifactBuild", {
+      projectRef,
+      branch: input.branch,
+      environmentName: input.environmentName,
+      releaseId: input.releaseId,
+      styleProfileHash: input.styleProfileHash,
+      force: input.force ?? false,
+    });
+
+    return mapStyleArtifactResolution(
+      await this.request(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          style_profile_hash: input.styleProfileHash,
+          branch: input.branch,
+          environment_name: input.environmentName,
+          release_id: input.releaseId,
+          force: input.force ?? false,
+        }),
+      }),
+    );
+  }
+
   async upsertStyleArtifact(
     projectRef: string,
     input: UpsertStyleArtifactInput,
@@ -502,6 +544,7 @@ export class VeryfrontAPIOperations {
       environmentName: input.environmentName,
       releaseId: input.releaseId,
       styleProfileHash: input.styleProfileHash,
+      status: input.status ?? "ready",
       artifactHash: input.artifactHash,
     });
 
@@ -516,10 +559,13 @@ export class VeryfrontAPIOperations {
           branch: input.branch,
           environment_name: input.environmentName,
           release_id: input.releaseId,
+          status: input.status ?? "ready",
           artifact_hash: input.artifactHash,
           asset_path: input.assetPath,
           content_type: input.contentType,
           etag: input.etag,
+          build_job_id: input.buildJobId,
+          failure_reason: input.failureReason,
         }),
       }),
     );