veryfront 0.1.47 → 0.1.49

package/src/src/build/production-build/client-runtime.ts

@@ -32,6 +32,10 @@ try {
   // Pre-bundled scripts not available (Deno development mode)
 }
 
+interface ClientScriptGenerationOptions {
+  forceSourceBundle?: boolean;
+}
+
 interface FileStatResult {
   isFile: boolean;
 }
@@ -52,7 +56,7 @@ async function readTextFile(path: string): Promise<string> {
 }
 
 const moduleDir = dirname(fromFileUrl(import.meta.url));
-const packageRoot = join(moduleDir, "..", "..", "..");
+const packageRoot = resolve(join(moduleDir, "..", "..", ".."));
 const vfSrcPrefix = "@vf-src/";
 const moduleExtensions = [".ts", ".tsx", ".js", ".jsx", ".mjs", ".mts", ".cjs", ".cts"] as const;
 const externalSpecifier = /^(std\/|@std\/|node:|deno:|https?:)/;
@@ -95,12 +99,15 @@ export const hydrate = window.hydrate;
  * Generate client.js module for hydration
  * Uses pre-bundled version for npm builds, or bundles from source for Deno
  */
-export async function generateClientModule(): Promise<string> {
+export async function generateClientModule(
+  options?: ClientScriptGenerationOptions,
+): Promise<string> {
   try {
     return await loadClientScript(
       CLIENT_ROUTER_BUNDLE,
       "router",
       "../../rendering/client/router.ts",
+      options,
     );
   } catch (error) {
     logger.error("Failed to generate client runtime bundle", error);
@@ -112,8 +119,9 @@ function loadClientScript(
   preBundledScript: string | undefined,
   scriptName: string,
   sourceEntry: string,
+  options?: ClientScriptGenerationOptions,
 ): Promise<string> {
-  if (preBundledScript) {
+  if (preBundledScript && !options?.forceSourceBundle) {
     logger.debug(`Using pre-bundled client ${scriptName} script`);
     return Promise.resolve(preBundledScript);
   }
@@ -125,11 +133,15 @@ function loadClientScript(
  * Load and transform router script from source
  * Uses pre-bundled version for npm builds, or bundles from source for Deno
  */
-export async function generateRouterScript(_adapter: RuntimeAdapter): Promise<string> {
+export async function generateRouterScript(
+  _adapter: RuntimeAdapter,
+  options?: ClientScriptGenerationOptions,
+): Promise<string> {
   return loadClientScript(
     CLIENT_ROUTER_BUNDLE,
     "router",
     "../../rendering/client/router.ts",
+    options,
   );
 }
 
@@ -137,11 +149,15 @@ export async function generateRouterScript(_adapter: RuntimeAdapter): Promise<st
  * Generate prefetch script
  * Uses pre-bundled version for npm builds, or bundles from source for Deno
  */
-export async function generatePrefetchScript(_adapter: RuntimeAdapter): Promise<string> {
+export async function generatePrefetchScript(
+  _adapter: RuntimeAdapter,
+  options?: ClientScriptGenerationOptions,
+): Promise<string> {
   return loadClientScript(
     CLIENT_PREFETCH_BUNDLE,
     "prefetch",
     "../../rendering/client/prefetch.ts",
+    options,
   );
 }
 

package/src/src/build/production-build/templates.ts

@@ -1,26 +1,17 @@
 /**
  * Embedded templates for production builds
  * These are embedded as strings to avoid file system dependencies in npm bundle
+ *
+ * AUTO-GENERATED by scripts/build/prebundle-client-scripts.ts
+ * Do not edit manually — run `deno task build` to regenerate.
  * @module
  */
 
-/**
- * Client-side CSS styles for error display in production builds
- */
-export const CLIENT_STYLES = `.error-container {
-  max-width: 600px;
-  margin: 2rem auto;
-  padding: 2rem;
-  background: #fee;
-  border: 1px solid #fcc;
-  border-radius: 8px;
-  color: #c00;
-}`;
+export const CLIENT_STYLES =
+  ".error-container {\n  max-width: 600px;\n  margin: 2rem auto;\n  padding: 2rem;\n  background: #fee;\n  border: 1px solid #fcc;\n  border-radius: 8px;\n  color: #c00;\n}";
 
-/**
- * Pre-bundled client router script for npm builds
- * Placeholder - this is auto-generated during build:npm
- */
-export let CLIENT_ROUTER_BUNDLE: string | undefined;
+export const CLIENT_ROUTER_BUNDLE: string | undefined =
+  'var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => {\n  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);\n  return value;\n};\n\n// src/rendering/client/router.ts\nimport { rendererLogger } from "#veryfront/utils";\nimport ReactDOM from "react-dom/client";\nimport {\n  extractPageDataFromScript,\n  NavigationHandlers,\n  PageLoader,\n  PageTransition,\n  ViewportPrefetch\n} from "#veryfront/routing";\nvar logger = rendererLogger.component("veryfront");\nvar VeryfrontRouter = class {\n  constructor(options = {}) {\n    __publicField(this, "baseUrl");\n    __publicField(this, "currentPath");\n    __publicField(this, "root", null);\n    __publicField(this, "options");\n    __publicField(this, "spaMode");\n    __publicField(this, "spaNavigationHandler", null);\n    __publicField(this, "pageLoader");\n    __publicField(this, "navigationHandlers");\n    __publicField(this, "pageTransition");\n    __publicField(this, "viewportPrefetch");\n    __publicField(this, "handleClick");\n    __publicField(this, "handlePopState");\n    __publicField(this, "handleMouseOver");\n    const globalOptions = this.loadGlobalOptions();\n    this.options = { ...globalOptions, ...options };\n    this.baseUrl = this.options.baseUrl || globalThis.location.origin;\n    this.currentPath = globalThis.location.pathname;\n    this.spaMode = this.options.spaMode ?? globalThis.__VERYFRONT_SPA_MODE__ ?? false;\n    this.pageLoader = new PageLoader();\n    this.navigationHandlers = new NavigationHandlers(\n      this.options.prefetchDelay,\n      this.options.prefetch\n    );\n    this.pageTransition = new PageTransition((root) => this.viewportPrefetch.setup(root));\n    this.viewportPrefetch = new ViewportPrefetch(\n      (path) => this.prefetch(path),\n      this.options.prefetch\n    );\n    this.handleClick = this.navigationHandlers.createClickHandler({\n      onNavigate: (url) => this.navigate(url),\n      onPrefetch: (url) => this.prefetch(url)\n    });\n    this.handlePopState = this.navigationHandlers.createPopStateHandler({\n      onNavigate: (url) => this.navigate(url, false),\n      onPrefetch: (url) => this.prefetch(url)\n    });\n    this.handleMouseOver = this.navigationHandlers.createMouseOverHandler({\n      onNavigate: (url) => this.navigate(url),\n      onPrefetch: (url) => this.prefetch(url)\n    });\n  }\n  registerNavigationHandler(handler) {\n    logger.debug("Registering SPA navigation handler");\n    this.spaNavigationHandler = handler;\n    this.spaMode = true;\n  }\n  loadGlobalOptions() {\n    try {\n      const options = globalThis.__VERYFRONT_ROUTER_OPTS__;\n      if (!options) {\n        logger.debug("No global options configured");\n        return {};\n      }\n      return options;\n    } catch (error) {\n      logger.error("Failed to read global options:", error);\n      return {};\n    }\n  }\n  init() {\n    logger.debug("Initializing client-side router");\n    const rootElement = document.getElementById("root");\n    if (!rootElement) {\n      logger.error("Root element not found");\n      return;\n    }\n    const ReactDOMToUse = globalThis.ReactDOM ?? ReactDOM;\n    this.root = ReactDOMToUse.createRoot(rootElement);\n    document.addEventListener("click", this.handleClick);\n    globalThis.addEventListener("popstate", this.handlePopState);\n    document.addEventListener("mouseover", this.handleMouseOver);\n    this.viewportPrefetch.setup(document);\n    this.cacheCurrentPage();\n  }\n  cacheCurrentPage() {\n    const pageData = extractPageDataFromScript();\n    if (pageData)\n      this.pageLoader.setCache(this.currentPath, pageData);\n  }\n  async navigate(url, pushState = true) {\n    logger.debug(`Navigating to ${url} (SPA mode: ${this.spaMode})`);\n    this.navigationHandlers.saveScrollPosition(this.currentPath);\n    this.options.onStart?.(url);\n    if (pushState)\n      globalThis.history.pushState({}, "", url);\n    if (this.spaMode && this.spaNavigationHandler) {\n      await this.loadSpaPage(url);\n    } else {\n      await this.loadPage(url);\n    }\n    this.options.onNavigate?.(url);\n  }\n  async loadSpaPage(path) {\n    logger.debug(`Loading SPA page: ${path}`);\n    try {\n      const spaData = await this.pageLoader.loadSpaPageData(path);\n      await this.spaNavigationHandler?.(spaData);\n      this.currentPath = path;\n      this.handleScrollAfterNavigation();\n      this.options.onComplete?.(path);\n    } catch (error) {\n      const normalizedError = error instanceof Error ? error : new Error(String(error));\n      logger.error(`Failed to load SPA page ${path}`, normalizedError);\n      this.options.onError?.(normalizedError);\n      this.pageTransition.showError(normalizedError);\n    }\n  }\n  handleScrollAfterNavigation() {\n    const isPopState = this.navigationHandlers.isPopState();\n    const scrollY = this.navigationHandlers.getScrollPosition(this.currentPath);\n    try {\n      globalThis.scrollTo(0, isPopState ? scrollY : 0);\n    } catch (error) {\n      logger.warn("scroll handling failed", error);\n    }\n    this.navigationHandlers.clearPopStateFlag();\n  }\n  async loadPage(path, updateUI = true) {\n    if (this.pageLoader.isCached(path)) {\n      logger.debug(`Loading ${path} from cache`);\n      const data = this.pageLoader.getCached(path);\n      if (data) {\n        if (updateUI)\n          this.updatePage(data);\n        return;\n      }\n      logger.warn(`Cache entry for ${path} was unexpectedly null, fetching fresh data`);\n    }\n    this.pageTransition.setLoadingState(true);\n    try {\n      const data = await this.pageLoader.loadPage(path);\n      if (updateUI)\n        this.updatePage(data);\n      this.currentPath = path;\n      this.options.onComplete?.(path);\n    } catch (error) {\n      const normalizedError = error instanceof Error ? error : new Error(String(error));\n      logger.error(`Failed to load ${path}`, normalizedError);\n      this.options.onError?.(normalizedError);\n      this.pageTransition.showError(normalizedError);\n    } finally {\n      this.pageTransition.setLoadingState(false);\n    }\n  }\n  async prefetch(path) {\n    if (this.spaMode) {\n      await this.pageLoader.prefetchSpaPageData(path);\n      return;\n    }\n    await this.pageLoader.prefetch(path);\n  }\n  updatePage(data) {\n    if (!this.root)\n      return;\n    const isPopState = this.navigationHandlers.isPopState();\n    const scrollY = this.navigationHandlers.getScrollPosition(this.currentPath);\n    this.pageTransition.updatePage(data, isPopState, scrollY);\n    this.navigationHandlers.clearPopStateFlag();\n  }\n  destroy() {\n    document.removeEventListener("click", this.handleClick);\n    globalThis.removeEventListener("popstate", this.handlePopState);\n    document.removeEventListener("mouseover", this.handleMouseOver);\n    this.viewportPrefetch.disconnect();\n    this.pageLoader.clearCache();\n    this.navigationHandlers.clear();\n    this.pageTransition.destroy();\n  }\n};\nif (typeof window !== "undefined" && globalThis.document) {\n  const router = new VeryfrontRouter();\n  if (document.readyState === "loading") {\n    document.addEventListener("DOMContentLoaded", () => router.init());\n  } else {\n    router.init();\n  }\n  globalThis.veryFrontRouter = router;\n}\nexport {\n  VeryfrontRouter\n};\n';
 
-export let CLIENT_PREFETCH_BUNDLE: string | undefined;
+export const CLIENT_PREFETCH_BUNDLE: string | undefined =
+  'var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => {\n  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);\n  return value;\n};\n\n// src/rendering/client/browser-logger.ts\nvar ConditionalBrowserLogger = class {\n  constructor(prefix, level) {\n    this.prefix = prefix;\n    this.level = level;\n  }\n  log(minLevel, fn, message, ...args) {\n    if (this.level > minLevel)\n      return;\n    fn?.(message, ...args);\n  }\n  debug(message, ...args) {\n    this.log(\n      0 /* DEBUG */,\n      console.debug,\n      `[${this.prefix}] DEBUG: ${message}`,\n      ...args\n    );\n  }\n  info(message, ...args) {\n    this.log(1 /* INFO */, console.log, `[${this.prefix}] ${message}`, ...args);\n  }\n  warn(message, ...args) {\n    this.log(\n      2 /* WARN */,\n      console.warn,\n      `[${this.prefix}] WARN: ${message}`,\n      ...args\n    );\n  }\n  error(message, ...args) {\n    this.log(\n      3 /* ERROR */,\n      console.error,\n      `[${this.prefix}] ERROR: ${message}`,\n      ...args\n    );\n  }\n};\nfunction getBrowserLogLevel() {\n  if (typeof window === "undefined")\n    return 2 /* WARN */;\n  const g = globalThis;\n  const isDevelopment = g.__VERYFRONT_DEV__ || g.__RSC_DEV__;\n  if (!isDevelopment)\n    return 2 /* WARN */;\n  const isDebugEnabled = g.__VERYFRONT_DEBUG__ || g.__RSC_DEBUG__;\n  return isDebugEnabled ? 0 /* DEBUG */ : 1 /* INFO */;\n}\nvar defaultLevel = getBrowserLogLevel();\nvar rscLogger = new ConditionalBrowserLogger("RSC", defaultLevel);\nvar prefetchLogger = new ConditionalBrowserLogger("PREFETCH", defaultLevel);\nvar hydrateLogger = new ConditionalBrowserLogger("HYDRATE", defaultLevel);\nvar browserLogger = new ConditionalBrowserLogger("VERYFRONT", defaultLevel);\n\n// src/rendering/client/prefetch/link-observer.ts\nfunction isAnchorElement(element) {\n  return typeof HTMLAnchorElement !== "undefined" ? element instanceof HTMLAnchorElement : element.tagName === "A";\n}\nvar LinkObserver = class {\n  constructor(options, prefetchedUrls) {\n    __publicField(this, "options");\n    __publicField(this, "intersectionObserver", null);\n    __publicField(this, "mutationObserver", null);\n    __publicField(this, "prefetchedUrls");\n    __publicField(this, "pendingTimeouts", /* @__PURE__ */ new Map());\n    __publicField(this, "elementTimeoutMap", /* @__PURE__ */ new WeakMap());\n    __publicField(this, "timeoutCounter", 0);\n    this.options = options;\n    this.prefetchedUrls = prefetchedUrls;\n  }\n  init() {\n    this.createIntersectionObserver();\n    this.observeLinks();\n    this.setupMutationObserver();\n  }\n  createIntersectionObserver() {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => this.handleIntersection(entries),\n      { rootMargin: this.options.rootMargin }\n    );\n  }\n  handleIntersection(entries) {\n    for (const entry of entries) {\n      if (!entry.isIntersecting)\n        continue;\n      if (!isAnchorElement(entry.target))\n        continue;\n      const link = entry.target;\n      if (this.timeoutCounter > 1e6)\n        this.timeoutCounter = 0;\n      const timeoutKey = this.timeoutCounter++;\n      const timeoutId = setTimeout(() => {\n        this.pendingTimeouts.delete(timeoutKey);\n        this.elementTimeoutMap.delete(link);\n        this.options.onLinkVisible(link);\n      }, this.options.delay);\n      this.pendingTimeouts.set(timeoutKey, timeoutId);\n      this.elementTimeoutMap.set(link, timeoutKey);\n    }\n  }\n  observeLinks() {\n    this.observeAnchors(document.querySelectorAll(\'a[href^="/"], a[href^="./"]\'));\n  }\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type !== "childList")\n          continue;\n        for (const node of mutation.addedNodes) {\n          if (node.nodeType !== Node.ELEMENT_NODE)\n            continue;\n          this.observeElement(node);\n        }\n        for (const node of mutation.removedNodes) {\n          if (node.nodeType !== Node.ELEMENT_NODE)\n            continue;\n          this.clearElementTimeouts(node);\n        }\n      }\n    });\n    this.mutationObserver.observe(document.body, { childList: true, subtree: true });\n  }\n  clearTimeoutForElement(element) {\n    const timeoutKey = this.elementTimeoutMap.get(element);\n    if (timeoutKey === void 0)\n      return;\n    const timeoutId = this.pendingTimeouts.get(timeoutKey);\n    if (timeoutId !== void 0) {\n      clearTimeout(timeoutId);\n      this.pendingTimeouts.delete(timeoutKey);\n    }\n    this.elementTimeoutMap.delete(element);\n  }\n  clearElementTimeouts(element) {\n    if (isAnchorElement(element))\n      this.clearTimeoutForElement(element);\n    for (const link of element.querySelectorAll("a")) {\n      this.clearTimeoutForElement(link);\n    }\n  }\n  observeElement(element) {\n    if (isAnchorElement(element) && this.isValidLink(element)) {\n      this.intersectionObserver?.observe(element);\n    }\n    this.observeAnchors(element.querySelectorAll(\'a[href^="/"], a[href^="./"]\'));\n  }\n  observeAnchors(links) {\n    for (const link of links) {\n      if (!isAnchorElement(link))\n        continue;\n      if (!this.isValidLink(link))\n        continue;\n      this.intersectionObserver?.observe(link);\n    }\n  }\n  isValidLink(link) {\n    if (link.hostname !== globalThis.location.hostname)\n      return false;\n    if (link.hasAttribute("download"))\n      return false;\n    if (link.target === "_blank")\n      return false;\n    const url = link.href;\n    if (this.prefetchedUrls.has(url))\n      return false;\n    if (url === globalThis.location.href)\n      return false;\n    if (link.hash && link.pathname === globalThis.location.pathname)\n      return false;\n    if (link.dataset.noPrefetch)\n      return false;\n    return true;\n  }\n  destroy() {\n    for (const timeoutId of this.pendingTimeouts.values()) {\n      clearTimeout(timeoutId);\n    }\n    this.pendingTimeouts.clear();\n    this.timeoutCounter = 0;\n    this.intersectionObserver?.disconnect();\n    this.intersectionObserver = null;\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = null;\n  }\n};\n\n// src/rendering/client/prefetch/network-utils.ts\nvar NetworkUtils = class {\n  constructor(allowedNetworks = ["4g", "wifi", "ethernet"]) {\n    __publicField(this, "networkInfo");\n    __publicField(this, "allowedNetworks");\n    this.allowedNetworks = allowedNetworks;\n    this.networkInfo = this.getNetworkConnection();\n  }\n  getNavigatorWithConnection() {\n    if (typeof globalThis.navigator === "undefined")\n      return null;\n    return globalThis.navigator;\n  }\n  getNetworkConnection() {\n    const nav = this.getNavigatorWithConnection();\n    return nav?.connection ?? nav?.mozConnection ?? nav?.webkitConnection ?? null;\n  }\n  shouldPrefetch() {\n    if (this.networkInfo?.saveData)\n      return false;\n    const effectiveType = this.networkInfo?.effectiveType;\n    if (effectiveType != null && !this.allowedNetworks.includes(effectiveType))\n      return false;\n    return true;\n  }\n  onNetworkChange(callback) {\n    this.networkInfo?.addEventListener?.("change", callback);\n  }\n  getNetworkInfo() {\n    return this.networkInfo;\n  }\n};\n\n// src/rendering/client/prefetch/prefetch-queue.ts\nimport { PREFETCH_QUEUE_MAX_SIZE_BYTES } from "#veryfront/utils/constants/index.ts";\nvar DEFAULT_OPTIONS = {\n  maxConcurrent: 4,\n  maxSize: PREFETCH_QUEUE_MAX_SIZE_BYTES,\n  timeout: 5e3\n};\nfunction isAbortError(error) {\n  if (typeof error !== "object" || error === null)\n    return false;\n  if (!("name" in error))\n    return false;\n  return error.name === "AbortError";\n}\nvar PrefetchQueue = class {\n  constructor(options = {}, prefetchedUrls) {\n    __publicField(this, "options");\n    __publicField(this, "controllers", /* @__PURE__ */ new Map());\n    __publicField(this, "prefetchedUrls");\n    __publicField(this, "concurrent", 0);\n    __publicField(this, "stopped", false);\n    __publicField(this, "onResourcesFetched");\n    this.options = { ...DEFAULT_OPTIONS, ...options };\n    this.prefetchedUrls = prefetchedUrls ?? /* @__PURE__ */ new Set();\n  }\n  setResourceCallback(callback) {\n    this.onResourcesFetched = callback;\n  }\n  enqueue(url) {\n    void this.prefetch(url);\n  }\n  has(url) {\n    return this.prefetchedUrls.has(url) || this.controllers.has(url);\n  }\n  get size() {\n    return this.controllers.size;\n  }\n  clear() {\n    this.stopAll();\n    this.prefetchedUrls.clear();\n  }\n  start() {\n    this.stopped = false;\n  }\n  stop() {\n    this.stopped = true;\n    this.stopAll();\n  }\n  getQueueSize() {\n    return this.controllers.size;\n  }\n  getConcurrentCount() {\n    return this.concurrent;\n  }\n  async prefetchLink(link) {\n    if (this.stopped)\n      return;\n    const url = link.href;\n    if (!url || this.controllers.has(url) || this.prefetchedUrls.has(url))\n      return;\n    if (this.concurrent >= this.options.maxConcurrent) {\n      prefetchLogger.debug?.(`Prefetch queue full, skipping ${url}`);\n      return;\n    }\n    let parsedUrl;\n    try {\n      parsedUrl = new URL(url);\n    } catch {\n      prefetchLogger.debug?.(`Invalid prefetch URL ${url}`);\n      return;\n    }\n    const controller = new AbortController();\n    this.controllers.set(url, controller);\n    this.concurrent += 1;\n    const timeoutId = this.options.timeout > 0 ? setTimeout(() => controller.abort(), this.options.timeout) : void 0;\n    try {\n      const response = await fetch(parsedUrl.toString(), {\n        method: "GET",\n        signal: controller.signal,\n        headers: { "X-Veryfront-Prefetch": "1" }\n      });\n      if (!response.ok)\n        return;\n      if (this.isResponseTooLarge(response)) {\n        prefetchLogger.debug?.(`Prefetch too large, skipping ${url}`);\n        return;\n      }\n      this.prefetchedUrls.add(url);\n      if (!this.onResourcesFetched)\n        return;\n      try {\n        await this.onResourcesFetched(response, url);\n      } catch (callbackError) {\n        prefetchLogger.error?.(`Prefetch callback failed for ${url}`, callbackError);\n      }\n    } catch (error) {\n      if (!isAbortError(error)) {\n        prefetchLogger.error?.(`Failed to prefetch ${url}`, error);\n      }\n    } finally {\n      if (timeoutId !== void 0)\n        clearTimeout(timeoutId);\n      this.controllers.delete(url);\n      this.concurrent = Math.max(0, this.concurrent - 1);\n    }\n  }\n  async prefetch(url) {\n    const link = typeof document !== "undefined" ? document.createElement("a") : { href: url };\n    link.href = url;\n    await this.prefetchLink(link);\n  }\n  stopAll() {\n    for (const controller of this.controllers.values()) {\n      controller.abort();\n    }\n    this.controllers.clear();\n    this.concurrent = 0;\n  }\n  isResponseTooLarge(response) {\n    const rawLength = response.headers.get("content-length");\n    if (rawLength === null)\n      return false;\n    const size = Number.parseInt(rawLength, 10);\n    if (!Number.isFinite(size))\n      return false;\n    return size > this.options.maxSize;\n  }\n};\nvar prefetchQueue = new PrefetchQueue();\n\n// src/rendering/client/prefetch/resource-hints.ts\nvar ResourceHintsManager = class {\n  constructor() {\n    __publicField(this, "appliedHints", /* @__PURE__ */ new Set());\n  }\n  applyResourceHints(hints) {\n    for (const hint of hints) {\n      const key = `${hint.type}:${hint.href}`;\n      if (this.appliedHints.has(key))\n        continue;\n      const existing = document.querySelector(\n        `link[rel="${hint.type}"][href="${hint.href}"]`\n      );\n      if (existing) {\n        this.appliedHints.add(key);\n        continue;\n      }\n      this.createAndAppendHint(hint);\n      this.appliedHints.add(key);\n      prefetchLogger.debug(`Added resource hint: ${hint.type} ${hint.href}`);\n    }\n  }\n  createAndAppendHint(hint) {\n    if (!document.head) {\n      prefetchLogger.warn("document.head is not available, skipping resource hint");\n      return;\n    }\n    const link = document.createElement("link");\n    link.rel = hint.type;\n    link.href = hint.href;\n    if (hint.as)\n      link.setAttribute("as", hint.as);\n    if (hint.crossOrigin)\n      link.setAttribute("crossorigin", hint.crossOrigin);\n    if (hint.media)\n      link.setAttribute("media", hint.media);\n    document.head.appendChild(link);\n  }\n  extractResourceHints(html, prefetchedUrls) {\n    try {\n      const doc = new DOMParser().parseFromString(html, "text/html");\n      const hints = [];\n      this.extractPreloadLinks(doc, prefetchedUrls, hints);\n      this.extractScripts(doc, prefetchedUrls, hints);\n      this.extractStylesheets(doc, prefetchedUrls, hints);\n      return hints;\n    } catch (error) {\n      prefetchLogger.error("Failed to parse prefetched page", error);\n      return [];\n    }\n  }\n  isValidResourceHintType(rel) {\n    switch (rel) {\n      case "prefetch":\n      case "preload":\n      case "preconnect":\n      case "dns-prefetch":\n        return true;\n      default:\n        return false;\n    }\n  }\n  extractPreloadLinks(doc, prefetchedUrls, hints) {\n    const links = doc.querySelectorAll(\n      \'link[rel="preload"], link[rel="prefetch"]\'\n    );\n    for (const link of links) {\n      const href = link.href;\n      if (!href)\n        continue;\n      if (prefetchedUrls.has(href))\n        continue;\n      if (!this.isValidResourceHintType(link.rel))\n        continue;\n      hints.push({\n        type: link.rel,\n        href,\n        as: link.getAttribute("as") ?? void 0\n      });\n    }\n  }\n  extractScripts(doc, prefetchedUrls, hints) {\n    for (const script of doc.querySelectorAll("script[src]")) {\n      const src = script.src;\n      if (!src || prefetchedUrls.has(src))\n        continue;\n      hints.push({ type: "prefetch", href: src, as: "script" });\n    }\n  }\n  extractStylesheets(doc, prefetchedUrls, hints) {\n    for (const link of doc.querySelectorAll(\'link[rel="stylesheet"]\')) {\n      const href = link.href;\n      if (!href || prefetchedUrls.has(href))\n        continue;\n      hints.push({ type: "prefetch", href, as: "style" });\n    }\n  }\n  static generateResourceHints(_route, assets) {\n    const hints = [\n      \'<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">\',\n      \'<link rel="dns-prefetch" href="https://esm.sh">\',\n      \'<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>\'\n    ];\n    for (const asset of assets) {\n      if (asset.endsWith(".js")) {\n        hints.push(`<link rel="modulepreload" href="${asset}">`);\n        continue;\n      }\n      if (asset.endsWith(".css")) {\n        hints.push(`<link rel="preload" as="style" href="${asset}">`);\n        continue;\n      }\n      if (/\\.(woff2?|ttf|otf)$/.test(asset)) {\n        hints.push(`<link rel="preload" as="font" href="${asset}" crossorigin>`);\n      }\n    }\n    return hints.join("\\n");\n  }\n};\n\n// src/rendering/client/prefetch.ts\nimport {\n  PREFETCH_DEFAULT_DELAY_MS,\n  PREFETCH_DEFAULT_TIMEOUT_MS,\n  PREFETCH_MAX_SIZE_BYTES\n} from "#veryfront/utils";\nvar PrefetchManager = class {\n  constructor(options = {}) {\n    __publicField(this, "options");\n    __publicField(this, "prefetchedUrls", /* @__PURE__ */ new Set());\n    __publicField(this, "networkUtils");\n    __publicField(this, "linkObserver", null);\n    __publicField(this, "resourceHintsManager");\n    __publicField(this, "prefetchQueue");\n    this.options = {\n      rootMargin: options.rootMargin ?? "50px",\n      delay: options.delay ?? PREFETCH_DEFAULT_DELAY_MS,\n      maxConcurrent: options.maxConcurrent ?? 2,\n      allowedNetworks: options.allowedNetworks ?? ["4g", "wifi", "ethernet"],\n      maxSize: options.maxSize ?? PREFETCH_MAX_SIZE_BYTES,\n      timeout: options.timeout ?? PREFETCH_DEFAULT_TIMEOUT_MS\n    };\n    this.networkUtils = new NetworkUtils(this.options.allowedNetworks);\n    this.resourceHintsManager = new ResourceHintsManager();\n    this.prefetchQueue = new PrefetchQueue(\n      {\n        maxConcurrent: this.options.maxConcurrent,\n        maxSize: this.options.maxSize,\n        timeout: this.options.timeout\n      },\n      this.prefetchedUrls\n    );\n    this.prefetchQueue.setResourceCallback(\n      (response, url) => this.prefetchPageResources(response, url)\n    );\n  }\n  init() {\n    prefetchLogger.info("Initializing prefetch manager");\n    if (!this.networkUtils.shouldPrefetch()) {\n      prefetchLogger.info("Prefetching disabled due to network conditions");\n      return;\n    }\n    this.linkObserver = new LinkObserver(\n      {\n        rootMargin: this.options.rootMargin,\n        delay: this.options.delay,\n        onLinkVisible: (link) => this.prefetchQueue.prefetchLink(link)\n      },\n      this.prefetchedUrls\n    );\n    this.linkObserver.init();\n    this.networkUtils.onNetworkChange(() => {\n      if (!this.networkUtils.shouldPrefetch())\n        this.prefetchQueue.stopAll();\n    });\n  }\n  async prefetchPageResources(response, _pageUrl) {\n    const html = await response.text();\n    const hints = this.resourceHintsManager.extractResourceHints(html, this.prefetchedUrls);\n    this.resourceHintsManager.applyResourceHints(hints);\n  }\n  applyResourceHints(hints) {\n    this.resourceHintsManager.applyResourceHints(hints);\n  }\n  async prefetch(url) {\n    await this.prefetchQueue.prefetch(url);\n  }\n  static generateResourceHints(route, assets) {\n    return ResourceHintsManager.generateResourceHints(route, assets);\n  }\n  destroy() {\n    this.linkObserver?.destroy();\n    this.prefetchQueue.stopAll();\n    this.prefetchedUrls.clear();\n  }\n};\nfunction initPrefetch(options) {\n  const prefetchManager = new PrefetchManager(options);\n  if (document.readyState === "loading") {\n    document.addEventListener("DOMContentLoaded", () => prefetchManager.init());\n  } else {\n    prefetchManager.init();\n  }\n  globalThis.veryFrontPrefetch = prefetchManager;\n  return prefetchManager;\n}\nfunction resolveAutoInitOptions() {\n  const setting = globalThis.__VERYFRONT_PREFETCH__;\n  if (!setting)\n    return null;\n  if (setting === true)\n    return {};\n  if (typeof setting === "object")\n    return setting;\n  return null;\n}\nfunction shouldAutoInitPrefetch(options) {\n  if (!options)\n    return false;\n  if (typeof window === "undefined" || typeof document === "undefined")\n    return false;\n  const win = window;\n  const doc = document;\n  if (win.__veryfrontSSRStub || doc.__veryfrontSSRStub)\n    return false;\n  if (typeof IntersectionObserver === "undefined")\n    return false;\n  if (typeof MutationObserver === "undefined")\n    return false;\n  return true;\n}\nvar autoInitOptions = resolveAutoInitOptions();\nif (shouldAutoInitPrefetch(autoInitOptions))\n  initPrefetch(autoInitOptions);\nexport {\n  PrefetchManager,\n  initPrefetch\n};\n';

package/src/src/build/vendor-cache.ts

@@ -80,14 +80,8 @@ function isLruIntervalDisabled(): boolean {
   return globalFlag === true || getDisableLruIntervalEnv();
 }
 
-// Default singleton instance for backward compatibility
 let defaultInstance: VendorCacheManager | undefined;
 
-function _getDefaultInstance(): VendorCacheManager {
-  defaultInstance ??= new VendorCacheManager();
-  return defaultInstance;
-}
-
 const TRANSFORM_VERSION = "3";
 
 export async function generateVendorCacheKey(

package/src/src/cache/tokenizing-gateway.ts

@@ -15,12 +15,7 @@
 
 import { logger } from "../utils/index.js";
 import type { CacheBackend } from "./types.js";
-import {
-  assertPortableCode,
-  CACHE_INVARIANT_VIOLATION,
-  detokenizeAllCachePaths,
-  tokenizeAllVeryFrontPaths,
-} from "./paths.js";
+import { assertPortableCode, detokenizeAllCachePaths, tokenizeAllVeryFrontPaths } from "./paths.js";
 
 /**
  * Gateway interface for code storage in distributed cache.
@@ -281,6 +276,3 @@ export function createTokenizingGateway(
 ): TokenizingCacheGateway {
   return new TokenizingCacheGateway(backend, name);
 }
-
-// Re-export error definition for consumers
-export { CACHE_INVARIANT_VIOLATION };

package/src/src/chat/index.ts

@@ -3,77 +3,211 @@
  *
  * @module chat
  *
- * @example Basic chat
+ * @example Basic chat (preset)
  * ```tsx
  * import { Chat, useChat } from "veryfront/chat";
  *
  * export default function Page() {
  *   const chat = useChat({ api: "/api/chat" });
- *   return <Chat {...chat} />;
+ *   return (
+ *     <Chat
+ *       messages={chat.messages}
+ *       input={chat.input}
+ *       onChange={chat.handleInputChange}
+ *       onSubmit={chat.handleSubmit}
+ *     />
+ *   );
  * }
  * ```
  *
- * @example Custom layout
+ * @example Custom layout (composition)
  * ```tsx
- * import { ChatMessages, ChatInput, useChat } from "veryfront/chat";
+ * import { Chat, useChat } from "veryfront/chat";
  *
  * export default function Page() {
  *   const chat = useChat({ api: "/api/chat" });
  *   return (
- *     <div>
- *       <ChatMessages messages={chat.messages} />
- *       <ChatInput value={chat.input} onChange={chat.setInput} onSubmit={chat.submit} />
- *     </div>
+ *     <Chat.Root messages={chat.messages} input={chat.input}>
+ *       <Chat.Empty title="Ask me anything" />
+ *       <Chat.MessageList messages={chat.messages} />
+ *       <Chat.Composer input={chat.input} onChange={chat.handleInputChange} onSubmit={chat.handleSubmit} />
+ *     </Chat.Root>
  *   );
  * }
  * ```
  *
- * @example Agent card with tool calls
+ * @example Per-message control (compound)
  * ```tsx
- * import { AgentCard, useAgent } from "veryfront/chat";
+ * import { Message } from "veryfront/chat";
  *
- * function AgentUI() {
- *   const agent = useAgent({ agent: "assistant" });
- *   return (
- *     <AgentCard
- *       status={agent.status}
- *       messages={agent.messages}
- *       toolCalls={agent.toolCalls}
- *     />
- *   );
- * }
+ * <Message.Root message={msg}>
+ *   <Message.Avatar />
+ *   <Message.Content />
+ *   <Message.Actions />
+ * </Message.Root>
  * ```
  */
 
 // veryfront/chat — Chat UI components + hooks
 //
 // Merges components/ai (UI) and agent/react (hooks) into a single
-// product-oriented import path. Uses selective re-exports from
-// individual source files to avoid leaking theme internals
-// (cn, defaultChatTheme, defaultAgentTheme, mergeThemes).
+// product-oriented import path.
 
 // ---------------------------------------------------------------------------
-// Components
+// Core preset + compound
 // ---------------------------------------------------------------------------
 import "../../_dnt.polyfills.js";
 
 
+export { Chat, ChatComponents } from "../react/components/ai/chat.js";
+export type { ChatProps } from "../react/components/ai/chat.js";
+
+// ---------------------------------------------------------------------------
+// Composition building blocks
+// ---------------------------------------------------------------------------
+
+export {
+  ChatComposer,
+  ChatEmpty,
+  ChatIf,
+  ChatMessageList,
+  ChatRoot,
+  ErrorBanner,
+  Message,
+  ModelAvatar,
+} from "../react/components/ai/chat.js";
+export type {
+  ChatComposerProps,
+  ChatEmptyProps,
+  ChatIfProps,
+  ChatMessageListProps,
+  ChatRootProps,
+  ErrorBannerProps,
+  MessageRootProps,
+  ModelAvatarProps,
+} from "../react/components/ai/chat.js";
+
+// ---------------------------------------------------------------------------
+// Contexts
+// ---------------------------------------------------------------------------
+
 export {
-  Chat,
-  ChatComponents,
-  ChatFooter,
-  ChatHeader,
-  ChatInput,
-  ChatMessages,
+  ChatContextProvider,
+  ComposerContextProvider,
+  MessageContextProvider,
+  ThreadListContextProvider,
+  useChatContext,
+  useChatContextOptional,
+  useComposerContext,
+  useComposerContextOptional,
+  useMessageContext,
+  useMessageContextOptional,
+  useThreadListContext,
+  useThreadListContextOptional,
+} from "../react/components/ai/chat.js";
+export type {
+  ChatContextValue,
+  ComposerContextValue,
+  MessageContextValue,
+  ThreadListContextValue,
+} from "../react/components/ai/chat.js";
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+export {
+  AttachmentPill,
+  BranchPicker,
+  ChatSidebar,
+  ChatWithSidebar,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  downloadMarkdown,
+  DropZoneOverlay,
+  exportAsMarkdown,
+  extractSourcesFromParts,
+  FadeIn,
+  getTextContent,
+  groupPartsInOrder,
+  InferenceBadge,
+  InlineCitation,
+  isReasoningPart,
+  isSkillToolPart,
+  isToolPart,
+  Loader,
+  MessageActions,
+  MessageEditForm,
+  MessageFeedback,
   ModelSelector,
+  QuickActions,
+  ReasoningCard,
+  RichCodeBlock,
+  Shimmer,
+  SkillBadge,
+  Sources,
+  StepIndicator,
+  Suggestion,
+  Suggestions,
+  TabSwitcher,
+  ToolCallCard,
+  ToolStatusBadge,
+  UpgradeCTA,
+  UploadsPanel,
+  useThreads,
 } from "../react/components/ai/chat.js";
 export type {
-  ChatProps,
+  AttachmentInfo,
+  AttachmentPillProps,
+  BranchPickerProps,
+  ChatSidebarProps,
+  ChatTab,
+  ChatWithSidebarAttachmentConfig,
+  ChatWithSidebarChatController,
+  ChatWithSidebarFeatureConfig,
+  ChatWithSidebarGroupedProps,
+  ChatWithSidebarMessageConfig,
+  ChatWithSidebarModelConfig,
+  ChatWithSidebarProps,
+  ChatWithSidebarQuickActionsConfig,
+  ChatWithSidebarSidebarConfig,
+  ChatWithSidebarTabsConfig,
+  ChatWithSidebarVoiceConfig,
+  CodeBlockProps,
+  ConversationEmptyStateProps,
+  ConversationScrollButtonProps,
+  DropZoneOverlayProps,
+  FeedbackValue,
+  InferenceBadgeProps,
+  InlineCitationProps,
+  MessageActionsProps,
+  MessageEditFormProps,
+  MessageFeedbackProps,
   ModelOption,
   ModelSelectorProps,
+  PartGroup,
+  QuickAction,
+  QuickActionsProps,
+  SkillBadgeProps,
+  Source,
+  SourcesProps,
+  StepIndicatorProps,
+  SuggestionProps,
+  SuggestionsProps,
+  TabSwitcherProps,
+  Thread,
+  UpgradeCTAProps,
+  UploadedFile,
+  UploadsPanelProps,
+  UseThreadsOptions,
+  UseThreadsResult,
 } from "../react/components/ai/chat.js";
 
-export { Message, StreamingMessage } from "../react/components/ai/message.js";
+// Message (standalone bubble, not the chat compound)
+export {
+  Message as StandaloneMessage,
+  StreamingMessage,
+} from "../react/components/ai/message.js";
 export type {
   MessageProps,
   StreamingMessageProps,
@@ -88,8 +222,7 @@ export {
 } from "../react/components/ai/error-boundary.js";
 export type { AIErrorBoundaryProps } from "../react/components/ai/error-boundary.js";
 
-// Types only from theme — excludes cn, defaultChatTheme,
-// defaultAgentTheme, mergeThemes
+// Types only from theme
 export type { AgentTheme, ChatTheme } from "../react/components/ai/theme.js";
 
 // ---------------------------------------------------------------------------
@@ -98,11 +231,13 @@ export type { AgentTheme, ChatTheme } from "../react/components/ai/theme.js";
 
 export { useChat } from "../agent/react/use-chat/index.js";
 export type {
+  BranchInfo,
   BrowserInferenceStatus,
   DynamicToolUIPart,
   InferenceMode,
   OnToolCallArg,
   ReasoningUIPart,
+  StepUIPart,
   TextUIPart,
   ToolOutput,
   ToolResultUIPart,

package/src/src/config/define-config.ts

@@ -20,48 +20,49 @@ export function mergeConfigs(...configs: Partial<VeryfrontConfig>[]): VeryfrontC
 export async function validateConfig(config: unknown): Promise<void> {
   if (!config || typeof config !== "object") {
     throw toError(
-      createError({
-        type: "config",
-        message: "Configuration must be an object",
-      }),
+      createError({ type: "config", message: "Configuration must be an object" }),
     );
   }
 
   const cfg = config as Record<string, unknown>;
 
+  await validatePort(cfg);
+  validateOutDir(cfg);
+}
+
+async function validatePort(cfg: Record<string, unknown>): Promise<void> {
   const dev = cfg.dev;
   const port = dev && typeof dev === "object" ? (dev as Record<string, unknown>).port : undefined;
+  if (port === undefined) return;
 
-  if (port !== undefined) {
-    const { MIN_PORT, MAX_PORT } = await import("../utils/constants/index.js");
+  const { MIN_PORT, MAX_PORT } = await import("../utils/constants/index.js");
+  if (typeof port === "number" && port >= MIN_PORT && port <= MAX_PORT) return;
 
-    if (typeof port !== "number" || port < MIN_PORT || port > MAX_PORT) {
-      throw toError(
-        createError({
-          type: "config",
-          message: `dev.port must be a number between ${MIN_PORT} and ${MAX_PORT}`,
-          context: {
-            field: "dev.port",
-            value: port,
-            expected: `number between ${MIN_PORT} and ${MAX_PORT}`,
-          },
-        }),
-      );
-    }
-  }
+  throw toError(
+    createError({
+      type: "config",
+      message: `dev.port must be a number between ${MIN_PORT} and ${MAX_PORT}`,
+      context: {
+        field: "dev.port",
+        value: port,
+        expected: `number between ${MIN_PORT} and ${MAX_PORT}`,
+      },
+    }),
+  );
+}
 
+function validateOutDir(cfg: Record<string, unknown>): void {
   const build = cfg.build;
   const outDir = build && typeof build === "object"
     ? (build as Record<string, unknown>).outDir
     : undefined;
+  if (outDir === undefined || typeof outDir === "string") return;
 
-  if (outDir !== undefined && typeof outDir !== "string") {
-    throw toError(
-      createError({
-        type: "config",
-        message: "build.outDir must be a string",
-        context: { field: "build.outDir", value: outDir, expected: "string" },
-      }),
-    );
-  }
+  throw toError(
+    createError({
+      type: "config",
+      message: "build.outDir must be a string",
+      context: { field: "build.outDir", value: outDir, expected: "string" },
+    }),
+  );
 }

package/src/src/config/loader.ts

@@ -141,18 +141,19 @@ let cacheRevision = 0;
 function validateCorsConfig(userConfig: unknown): void {
   if (!userConfig || typeof userConfig !== "object") return;
 
-  const security = (userConfig as Record<string, unknown>).security as
-    | Record<string, unknown>
-    | undefined;
-  const cors = security?.cors;
+  const cfg = userConfig as Record<string, unknown>;
+  const security = cfg.security as Record<string, unknown> | undefined;
+  if (!security) return;
+
+  const cors = security.cors;
   if (!cors || typeof cors !== "object" || Array.isArray(cors)) return;
 
   const origin = (cors as Record<string, unknown>).origin;
-  if (origin !== undefined && typeof origin !== "string") {
-    throw CONFIG_VALIDATION_FAILED.create({
-      detail: "security.cors.origin must be a string. Expected boolean or { origin?: string }",
-    });
-  }
+  if (origin === undefined || typeof origin === "string") return;
+
+  throw CONFIG_VALIDATION_FAILED.create({
+    detail: "security.cors.origin must be a string. Expected boolean or { origin?: string }",
+  });
 }
 
 function validateConfigShape(userConfig: unknown): void {

package/src/src/config/schemas/config.schema.ts

@@ -397,6 +397,18 @@ export const veryfrontConfigSchema = z
           })
           .partial()
           .optional(),
+        skills: z
+          .object({
+            discovery: z
+              .object({
+                enabled: z.boolean().optional(),
+                paths: z.array(z.string()).optional(),
+              })
+              .partial()
+              .optional(),
+          })
+          .partial()
+          .optional(),
         mcp: z
           .object({
             enabled: z.boolean().optional(),