npm - @vertz/ui-server - Versions diffs - 0.2.14 → 0.2.16 - Mend

@vertz/ui-server 0.2.14 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/bun-dev-server.d.ts +44 -2
package/dist/bun-dev-server.js +361 -36
package/dist/bun-plugin/index.d.ts +73 -1
package/dist/bun-plugin/index.js +964 -17
package/dist/dom-shim/index.js +1 -1
package/dist/index.d.ts +84 -12
package/dist/index.js +127 -41
package/dist/shared/{chunk-98972e43.js → chunk-969qgkdf.js} +186 -23
package/dist/shared/{chunk-n1arq9xq.js → chunk-9jjdzz8c.js} +2 -2
package/dist/shared/chunk-gggnhyqj.js +57 -0
package/dist/ssr/index.d.ts +116 -9
package/dist/ssr/index.js +79 -2
package/package.json +8 -5

package/dist/dom-shim/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   installDomShim,
   removeDomShim,
   toVNode
-} from "../shared/chunk-n1arq9xq.js";
+} from "../shared/chunk-9jjdzz8c.js";
 export {
   toVNode,
   removeDomShim,

package/dist/index.d.ts CHANGED Viewed

@@ -80,6 +80,27 @@ declare function renderAssetTags(assets: AssetDescriptor[]): string;
 * Returns an empty string if the CSS is empty.
 */
 declare function inlineCriticalCss(css: string): string;
+import { FallbackFontName, FontDescriptor, FontFallbackMetrics } from "@vertz/ui";
+/**
+* Auto-detect which system font to use as fallback base.
+*
+* Scans the `fallback` array for generic CSS font family keywords:
+* - 'sans-serif' or 'system-ui' → Arial
+* - 'serif' → Times New Roman
+* - 'monospace' → Courier New
+*
+* Skips non-generic entries (e.g., 'Georgia', 'Helvetica').
+* If no generic keyword found, defaults to Arial.
+*/
+declare function detectFallbackFont(fallback: readonly string[]): FallbackFontName;
+/**
+* Extract font metrics from .woff2 files and compute CSS fallback overrides.
+*
+* @param fonts - Font descriptors from theme definition.
+* @param rootDir - Project root directory for resolving font file paths.
+* @returns Map of font key → computed fallback metrics.
+*/
+declare function extractFontMetrics(fonts: Record<string, FontDescriptor>, rootDir: string): Promise<Record<string, FontFallbackMetrics>>;
 /**
 * Collector for `<head>` metadata during SSR.
 *
@@ -190,7 +211,7 @@ interface PageOptions {
 * ```
 */
 declare function renderPage(vnode: VNode, options?: PageOptions): Response;
-import { Theme } from "@vertz/ui";
+import { FontFallbackMetrics as FontFallbackMetrics2, Theme } from "@vertz/ui";
 interface RenderToHTMLOptions<AppFn extends () => VNode> {
 	/** The app component function */
 	app: AppFn;
@@ -215,6 +236,8 @@ interface RenderToHTMLOptions<AppFn extends () => VNode> {
 	};
 	/** Container selector (default '#app') */
 	container?: string;
+	/** Pre-computed font fallback metrics (computed at server startup). */
+	fallbackMetrics?: Record<string, FontFallbackMetrics2>;
 }
 interface RenderToHTMLStreamOptions<AppFn extends () => VNode> extends RenderToHTMLOptions<AppFn> {
 	/** CSP nonce for inline scripts */
@@ -350,7 +373,8 @@ declare function clearGlobalSSRTimeout(): void;
 * Returns undefined if not set or outside SSR context.
 */
 declare function getGlobalSSRTimeout(): number | undefined;
-import { Theme as Theme2 } from "@vertz/ui";
+import { FontFallbackMetrics as FontFallbackMetrics4 } from "@vertz/ui";
+import { FontFallbackMetrics as FontFallbackMetrics3, Theme as Theme2 } from "@vertz/ui";
 interface SSRModule {
 	default?: () => unknown;
 	App?: () => unknown;
@@ -373,6 +397,10 @@ interface SSRRenderResult {
 		key: string;
 		data: unknown;
 	}>;
+	/** Font preload link tags for injection into <head>. */
+	headTags: string;
+	/** Route patterns discovered by createRouter() during SSR (for build-time pre-rendering). */
+	discoveredRoutes?: string[];
 }
 interface SSRDiscoverResult {
 	resolved: Array<{
@@ -390,6 +418,8 @@ interface SSRDiscoverResult {
 */
 declare function ssrRenderToString(module: SSRModule, url: string, options?: {
 	ssrTimeout?: number;
+	/** Pre-computed font fallback metrics (computed at server startup). */
+	fallbackMetrics?: Record<string, FontFallbackMetrics3>;
 }): Promise<SSRRenderResult>;
 /**
 * Discover queries for a given URL without rendering.
@@ -399,6 +429,41 @@ declare function ssrRenderToString(module: SSRModule, url: string, options?: {
 declare function ssrDiscoverQueries(module: SSRModule, url: string, options?: {
 	ssrTimeout?: number;
 }): Promise<SSRDiscoverResult>;
+import { AccessSet as AccessSet2 } from "@vertz/ui/auth";
+interface SessionData {
+	user: {
+		id: string;
+		email: string;
+		role: string;
+		[key: string]: unknown;
+	};
+	/** Unix timestamp in milliseconds (JWT exp * 1000). */
+	expiresAt: number;
+}
+/** Resolved session data for SSR injection. */
+interface SSRSessionInfo {
+	session: SessionData;
+	/**
+	* Access set from JWT acl claim.
+	* - Present (object): inline access set (no overflow)
+	* - null: access control is configured but the set overflowed the JWT
+	* - undefined: access control is not configured
+	*/
+	accessSet?: AccessSet2 | null;
+}
+/**
+* Callback that extracts session data from a request.
+* Returns null when no valid session exists (expired, missing, or invalid cookie).
+*/
+type SessionResolver = (request: Request) => Promise<SSRSessionInfo | null>;
+/**
+* Serialize a session into a `<script>` tag that sets
+* `window.__VERTZ_SESSION__`.
+*
+* @param session - The session data to serialize
+* @param nonce - Optional CSP nonce for the script tag
+*/
+declare function createSessionScript(session: SessionData, nonce?: string): string;
 interface SSRHandlerOptions {
 	/** The loaded SSR module (import('./dist/server/index.js')) */
 	module: SSRModule;
@@ -424,16 +489,19 @@ interface SSRHandlerOptions {
 	* so that strict Content-Security-Policy headers do not block it.
 	*/
 	nonce?: string;
+	/** Pre-computed font fallback metrics (computed at server startup). */
+	fallbackMetrics?: Record<string, FontFallbackMetrics4>;
+	/** Paths to inject as `<link rel="modulepreload">` in `<head>`. */
+	modulepreload?: string[];
+	/** Cache-Control header for HTML responses. Omit or undefined = no header (safe default). */
+	cacheControl?: string;
+	/**
+	* Resolves session data from request cookies for SSR injection.
+	* When provided, SSR HTML includes `window.__VERTZ_SESSION__` and
+	* optionally `window.__VERTZ_ACCESS_SET__` for instant auth hydration.
+	*/
+	sessionResolver?: SessionResolver;
 }
-/**
-* Create a web-standard SSR request handler.
-*
-* Handles two types of requests:
-* - X-Vertz-Nav: 1 -> SSE Response with pre-fetched query data
-* - Normal HTML request -> SSR-rendered HTML Response
-*
-* Does NOT serve static files — that's the adapter/platform's job.
-*/
 declare function createSSRHandler(options: SSRHandlerOptions): (request: Request) => Promise<Response>;
 interface GenerateSSRHtmlOptions {
 	appHtml: string;
@@ -444,6 +512,10 @@ interface GenerateSSRHtmlOptions {
 	}>;
 	clientEntry: string;
 	title?: string;
+	/** Extra HTML tags to inject into <head> before CSS (e.g., font preloads). */
+	headTags?: string;
+	/** Paths to inject as `<link rel="modulepreload">` in `<head>`. */
+	modulepreload?: string[];
 }
 /**
 * Generate a complete HTML document from SSR render results.
@@ -499,4 +571,4 @@ declare function collectStreamChunks(stream: ReadableStream<Uint8Array>): Promis
 * @param nonce - Optional CSP nonce to add to the inline script tag.
 */
 declare function createTemplateChunk(slotId: number, resolvedHtml: string, nonce?: string): string;
-export { wrapWithHydrationMarkers, streamToString, ssrStorage, ssrRenderToString, ssrDiscoverQueries, setGlobalSSRTimeout, serializeToHtml, safeSerialize, resetSlotCounter, renderToStream, renderToHTMLStream, renderToHTML, renderPage, renderHeadToHtml, renderAssetTags, registerSSRQuery, rawHtml, isInSSR, inlineCriticalCss, getStreamingRuntimeScript, getSSRUrl, getSSRQueries, getGlobalSSRTimeout, getAccessSetForSSR, generateSSRHtml, encodeChunk, createTemplateChunk, createSlotPlaceholder, createSSRHandler, createSSRDataChunk, createSSRAdapter, createAccessSetScript, collectStreamChunks, clearGlobalSSRTimeout, VNode, SSRRenderResult, SSRQueryEntry2 as SSRQueryEntry, SSRModule, SSRHandlerOptions, SSRDiscoverResult, RenderToStreamOptions, RenderToHTMLStreamOptions, RenderToHTMLOptions, RawHtml, PageOptions, HydrationOptions, HeadEntry, HeadCollector, GenerateSSRHtmlOptions, AssetDescriptor };
+export { wrapWithHydrationMarkers, streamToString, ssrStorage, ssrRenderToString, ssrDiscoverQueries, setGlobalSSRTimeout, serializeToHtml, safeSerialize, resetSlotCounter, renderToStream, renderToHTMLStream, renderToHTML, renderPage, renderHeadToHtml, renderAssetTags, registerSSRQuery, rawHtml, isInSSR, inlineCriticalCss, getStreamingRuntimeScript, getSSRUrl, getSSRQueries, getGlobalSSRTimeout, getAccessSetForSSR, generateSSRHtml, extractFontMetrics, encodeChunk, detectFallbackFont, createTemplateChunk, createSlotPlaceholder, createSessionScript, createSSRHandler, createSSRDataChunk, createSSRAdapter, createAccessSetScript, collectStreamChunks, clearGlobalSSRTimeout, VNode, SessionResolver, SessionData, SSRSessionInfo, SSRRenderResult, SSRQueryEntry2 as SSRQueryEntry, SSRModule, SSRHandlerOptions, SSRDiscoverResult, RenderToStreamOptions, RenderToHTMLStreamOptions, RenderToHTMLOptions, RawHtml, PageOptions, HydrationOptions, HeadEntry, HeadCollector, GenerateSSRHtmlOptions, AssetDescriptor };

package/dist/index.js CHANGED Viewed

@@ -1,13 +1,16 @@
 import {
   collectStreamChunks,
+  createAccessSetScript,
   createRequestContext,
   createSSRDataChunk,
   createSSRHandler,
+  createSessionScript,
   createSlotPlaceholder,
   createTemplateChunk,
   encodeChunk,
   escapeAttr,
   escapeHtml,
+  getAccessSetForSSR,
   getStreamingRuntimeScript,
   renderToStream,
   resetSlotCounter,
@@ -16,7 +19,7 @@ import {
   ssrDiscoverQueries,
   ssrRenderToString,
   streamToString
-} from "./shared/chunk-98972e43.js";
+} from "./shared/chunk-969qgkdf.js";
 import {
   clearGlobalSSRTimeout,
   createSSRAdapter,
@@ -28,7 +31,7 @@ import {
   registerSSRQuery,
   setGlobalSSRTimeout,
   ssrStorage
-} from "./shared/chunk-n1arq9xq.js";
+} from "./shared/chunk-9jjdzz8c.js";
 // src/asset-pipeline.ts
 function renderAssetTags(assets) {
@@ -55,6 +58,108 @@ function inlineCriticalCss(css) {
   const safeCss = css.replace(/<\/style>/gi, "<\\/style>");
   return `<style>${safeCss}</style>`;
 }
+// src/font-metrics.ts
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fromBuffer } from "@capsizecss/unpack";
+var SYSTEM_FONT_METRICS = {
+  Arial: {
+    ascent: 1854,
+    descent: -434,
+    lineGap: 67,
+    unitsPerEm: 2048,
+    xWidthAvg: 904
+  },
+  "Times New Roman": {
+    ascent: 1825,
+    descent: -443,
+    lineGap: 87,
+    unitsPerEm: 2048,
+    xWidthAvg: 819
+  },
+  "Courier New": {
+    ascent: 1705,
+    descent: -615,
+    lineGap: 0,
+    unitsPerEm: 2048,
+    xWidthAvg: 1229
+  }
+};
+function detectFallbackFont(fallback) {
+  for (const f of fallback) {
+    const lower = f.toLowerCase();
+    if (lower === "sans-serif" || lower === "system-ui")
+      return "Arial";
+    if (lower === "serif")
+      return "Times New Roman";
+    if (lower === "monospace")
+      return "Courier New";
+  }
+  return "Arial";
+}
+function formatPercent(value) {
+  return `${(value * 100).toFixed(2)}%`;
+}
+function computeFallbackMetrics(fontMetrics, fallbackFont) {
+  const systemMetrics = SYSTEM_FONT_METRICS[fallbackFont];
+  const fontNormalizedWidth = fontMetrics.xWidthAvg / fontMetrics.unitsPerEm;
+  const systemNormalizedWidth = systemMetrics.xWidthAvg / systemMetrics.unitsPerEm;
+  const sizeAdjust = fontNormalizedWidth / systemNormalizedWidth;
+  const ascentOverride = fontMetrics.ascent / (fontMetrics.unitsPerEm * sizeAdjust);
+  const descentOverride = Math.abs(fontMetrics.descent) / (fontMetrics.unitsPerEm * sizeAdjust);
+  const lineGapOverride = fontMetrics.lineGap / (fontMetrics.unitsPerEm * sizeAdjust);
+  return {
+    ascentOverride: formatPercent(ascentOverride),
+    descentOverride: formatPercent(descentOverride),
+    lineGapOverride: formatPercent(lineGapOverride),
+    sizeAdjust: formatPercent(sizeAdjust),
+    fallbackFont
+  };
+}
+function getPrimarySrcPath(descriptor) {
+  const { src } = descriptor;
+  if (!src)
+    return null;
+  if (typeof src === "string")
+    return src;
+  const first = src[0];
+  if (first)
+    return first.path;
+  return null;
+}
+function resolveFilePath(urlPath, rootDir) {
+  const cleaned = urlPath.startsWith("/") ? urlPath.slice(1) : urlPath;
+  return join(rootDir, cleaned);
+}
+async function extractFontMetrics(fonts, rootDir) {
+  const result = {};
+  for (const [key, descriptor] of Object.entries(fonts)) {
+    const adjustFontFallback = descriptor.adjustFontFallback ?? true;
+    if (adjustFontFallback === false)
+      continue;
+    const srcPath = getPrimarySrcPath(descriptor);
+    if (!srcPath)
+      continue;
+    if (!srcPath.toLowerCase().endsWith(".woff2"))
+      continue;
+    try {
+      const filePath = resolveFilePath(srcPath, rootDir);
+      const buffer = await readFile(filePath);
+      const metrics = await fromBuffer(buffer);
+      const fallbackFont = typeof adjustFontFallback === "string" ? adjustFontFallback : detectFallbackFont(descriptor.fallback);
+      result[key] = computeFallbackMetrics({
+        ascent: metrics.ascent,
+        descent: metrics.descent,
+        lineGap: metrics.lineGap,
+        unitsPerEm: metrics.unitsPerEm,
+        xWidthAvg: metrics.xWidthAvg
+      }, fallbackFont);
+    } catch (error) {
+      console.warn(`[vertz] Failed to extract font metrics for "${key}" from "${srcPath}":`, error instanceof Error ? error.message : error);
+    }
+  }
+  return result;
+}
 // src/head.ts
 class HeadCollector {
   entries = [];
@@ -233,10 +338,10 @@ async function twoPassRender(options) {
   const pendingQueries = queries.filter((q) => !q.resolved);
   const vnode = options.app();
   const collectedCSS = getInjectedCSS();
-  const themeCss = options.theme ? compileTheme(options.theme).css : "";
+  const themeCss = options.theme ? compileTheme(options.theme, { fallbackMetrics: options.fallbackMetrics }).css : "";
   const allStyles = [themeCss, ...options.styles ?? [], ...collectedCSS].filter(Boolean);
-  const styleTags = allStyles.map((css) => `<style>${css}</style>`).join(`
-`);
+  const styleTags = allStyles.length > 0 ? `<style>${allStyles.join(`
+`)}</style>` : "";
   const metaHtml = options.head?.meta?.map((m) => `<meta ${m.name ? `name="${m.name}"` : `property="${m.property}"`} content="${m.content}">`).join(`
 `) ?? "";
   const linkHtml = options.head?.links?.map((link) => `<link rel="${link.rel}" href="${link.href}">`).join(`
@@ -313,44 +418,21 @@ async function renderToHTML(appOrOptions, maybeOptions) {
     }
   });
 }
-// src/ssr-access-set.ts
-function getAccessSetForSSR(jwtPayload) {
-  if (!jwtPayload)
-    return null;
-  const acl = jwtPayload.acl;
-  if (!acl)
-    return null;
-  if (acl.overflow)
-    return null;
-  if (!acl.set)
-    return null;
-  return {
-    entitlements: Object.fromEntries(Object.entries(acl.set.entitlements).map(([name, check]) => [
-      name,
-      {
-        allowed: check.allowed,
-        reasons: check.reasons ?? [],
-        ...check.reason ? { reason: check.reason } : {},
-        ...check.meta ? { meta: check.meta } : {}
-      }
-    ])),
-    flags: acl.set.flags,
-    plan: acl.set.plan,
-    computedAt: acl.set.computedAt
-  };
-}
-function createAccessSetScript(accessSet, nonce) {
-  const json = JSON.stringify(accessSet);
-  const escaped = json.replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-  const nonceAttr = nonce ? ` nonce="${escapeAttr2(nonce)}"` : "";
-  return `<script${nonceAttr}>window.__VERTZ_ACCESS_SET__=${escaped}</script>`;
-}
-function escapeAttr2(s) {
-  return s.replace(/[&"'<>]/g, (c) => `&#${c.charCodeAt(0)};`);
-}
 // src/ssr-html.ts
 function generateSSRHtml(options) {
-  const { appHtml, css, ssrData, clientEntry, title = "Vertz App" } = options;
+  const {
+    appHtml,
+    css,
+    ssrData,
+    clientEntry,
+    title = "Vertz App",
+    headTags: rawHeadTags = "",
+    modulepreload
+  } = options;
+  const modulepreloadTags = modulepreload?.length ? modulepreload.map((p) => `<link rel="modulepreload" href="${escapeAttr(p)}">`).join(`
+`) : "";
+  const headTags = [rawHeadTags, modulepreloadTags].filter(Boolean).join(`
+`);
   const ssrDataScript = ssrData.length > 0 ? `<script>window.__VERTZ_SSR_DATA__ = ${JSON.stringify(ssrData)};</script>` : "";
   return `<!doctype html>
 <html lang="en">
@@ -358,6 +440,7 @@ function generateSSRHtml(options) {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${escapeHtml(title)}</title>
+    ${headTags}
     ${css}
   </head>
   <body>
@@ -393,9 +476,12 @@ export {
   getGlobalSSRTimeout,
   getAccessSetForSSR,
   generateSSRHtml,
+  extractFontMetrics,
   encodeChunk,
+  detectFallbackFont,
   createTemplateChunk,
   createSlotPlaceholder,
+  createSessionScript,
   createSSRHandler,
   createSSRDataChunk,
   createSSRAdapter,