@valbuild/shared 0.150.18 → 0.150.20

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @valbuild/shared
 
+## 0.150.20
+
+### Patch Changes
+
+- [#998](https://github.com/valbuild/val/pull/998) [`c597b3b`](https://github.com/valbuild/val/commit/c597b3bcb9f3bbda285ab6f4977d65ed7f5f161d) Thanks [@freekh](https://github.com/freekh)! - **A quick preview now shows layout changes, not only text.** A quick preview loads the proposal's new code into a page the last build rendered on the server. React kept that page's markup wherever only attributes differed, so a change to classes (a layout made horizontal, a gap, a colour already in the site's styles) showed nothing, while a change to text did. The page is now rendered from the new code instead.
+
+  The design tab's assistant no longer offers `screenshot_page`, whose picture never came back from the page. `read_page` gives it the computed styles, sizes and positions it was for.
+
+  The assistant builds a proposal far less often. A quick preview shows components, layout, styles, text and content. It builds only for what a quick preview can't show, such as an added or renamed route, code that runs on the server, a schema or dependencies, and otherwise once, when a request is finished.
+
 ## 0.150.18
 
 ### Patch Changes

package/client/dist/valbuild-shared-client.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-98642b57.cjs.dev.js');
+var getSitemapTree = require('../../dist/getSitemapTree-6dfa2f4e.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-f2d7ac6d.cjs.dev.js');
 require('@valbuild/core');
 
@@ -11,6 +11,7 @@ require('@valbuild/core');
 exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = getSitemapTree.QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = getSitemapTree.QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = getSitemapTree.QUICK_PREVIEW_STORE_MESSAGE;

package/client/dist/valbuild-shared-client.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-97713490.cjs.prod.js');
+var getSitemapTree = require('../../dist/getSitemapTree-8a04f3cf.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-9ca2078d.cjs.prod.js');
 require('@valbuild/core');
 
@@ -11,6 +11,7 @@ require('@valbuild/core');
 exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = getSitemapTree.QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = getSitemapTree.QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = getSitemapTree.QUICK_PREVIEW_STORE_MESSAGE;

package/client/dist/valbuild-shared-client.esm.js

@@ -1,3 +1,3 @@
-export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, u as QUICK_PREVIEW_SERVICE_WORKER_PATH, y as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, v as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, F as formatRoutePattern, G as getNextAppRouterSourceFolder, K as getPageRouterSitemapTree, I as getPageRouterSourceFolder, L as getPatternFromModuleFilePath, H as getTanStackRouterSourceFolder, C as isDesignTabOrigin, x as isQuickPreviewFiles, J as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, E as parseRoutePattern, B as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, t as screenshotPage, s as startElementPicking, z as storeQuickPreview, n as watchPageLocation, A as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-7c848c94.esm.js';
+export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, v as QUICK_PREVIEW_RENDER_SCRIPT, u as QUICK_PREVIEW_SERVICE_WORKER_PATH, z as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, x as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, G as formatRoutePattern, H as getNextAppRouterSourceFolder, L as getPageRouterSitemapTree, J as getPageRouterSourceFolder, M as getPatternFromModuleFilePath, I as getTanStackRouterSourceFolder, E as isDesignTabOrigin, y as isQuickPreviewFiles, K as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, F as parseRoutePattern, C as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, t as screenshotPage, s as startElementPicking, A as storeQuickPreview, n as watchPageLocation, B as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-fef55872.esm.js';
 import '../../dist/createForOfIteratorHelper-9b80f1a2.esm.js';
 import '@valbuild/core';

package/dist/declarations/src/internal/quickPreview.d.ts

@@ -20,6 +20,14 @@
  *    document's `/_app/` requests from the files, and everything else from
  *    the network: the HTML is the last build's, rendered by its server, and
  *    the new code takes it over in the browser.
+ * 4. It takes it over by RENDERING it, not by hydrating it. Hydration keeps
+ *    the markup the server sent wherever only an attribute differs -- React
+ *    mends text, never a `className` -- so a change to classes and props,
+ *    which is most of what the design tab changes, hydrated into the old
+ *    page and showed nothing. The worker adds a script to the end of that
+ *    document's `<body>` ({@link QUICK_PREVIEW_RENDER_SCRIPT}) that takes the
+ *    server's markup out before the app's scripts run, so hydration finds
+ *    nothing to keep and React renders the page with the new code.
  *
  * What it cannot show, and the tab says so: anything on the server. Server
  * functions, API routes and loaders that run there are the last build's, as
@@ -34,6 +42,14 @@
 export declare const QUICK_PREVIEW_PARAM = "val_quick";
 /** Where Val's API serves the worker: under `/api/val`. */
 export declare const QUICK_PREVIEW_SERVICE_WORKER_PATH = "/quick-preview-sw.js";
+/**
+ * What a quick preview's document runs before the app's scripts: the
+ * server's markup out of `<body>`, every script left where it is -- the
+ * router's dehydrated state and the app's entry are among them. Hydration
+ * then finds the body empty and React renders the page, with the new code's
+ * attributes and classes, where it would have kept the old ones.
+ */
+export declare const QUICK_PREVIEW_RENDER_SCRIPT: string;
 /** What the page sends the worker to store a preview's files. */
 export declare const QUICK_PREVIEW_STORE_MESSAGE = "val-quick-preview-store";
 /**
@@ -54,7 +70,7 @@ export declare function isQuickPreviewFiles(value: unknown): value is QuickPrevi
  * The worker, as the source it is served as: plain, and small, because it is
  * served as a file of its own (`demoServiceWorker.ts` is the same).
  */
-export declare const QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"val_quick\";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"val-quick-preview-store\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    if (event.resultingClientId) {\n      byClient.set(event.resultingClientId, url.searchParams.get(PARAM));\n    }\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n";
+export declare const QUICK_PREVIEW_SERVICE_WORKER_SOURCE: string;
 /**
  * Store a preview's files in the worker, registering it first: what the
  * bridge does when the tab sends `quickPreview`. `swUrl` is the worker's

package/dist/{getSitemapTree-98642b57.cjs.dev.js → getSitemapTree-6dfa2f4e.cjs.dev.js}

@@ -47,6 +47,14 @@ var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
  *    document's `/_app/` requests from the files, and everything else from
  *    the network: the HTML is the last build's, rendered by its server, and
  *    the new code takes it over in the browser.
+ * 4. It takes it over by RENDERING it, not by hydrating it. Hydration keeps
+ *    the markup the server sent wherever only an attribute differs -- React
+ *    mends text, never a `className` -- so a change to classes and props,
+ *    which is most of what the design tab changes, hydrated into the old
+ *    page and showed nothing. The worker adds a script to the end of that
+ *    document's `<body>` ({@link QUICK_PREVIEW_RENDER_SCRIPT}) that takes the
+ *    server's markup out before the app's scripts run, so hydration finds
+ *    nothing to keep and React renders the page with the new code.
  *
  * What it cannot show, and the tab says so: anything on the server. Server
  * functions, API routes and loaders that run there are the last build's, as
@@ -64,6 +72,15 @@ var QUICK_PREVIEW_PARAM = "val_quick";
 /** Where Val's API serves the worker: under `/api/val`. */
 var QUICK_PREVIEW_SERVICE_WORKER_PATH = "/quick-preview-sw.js";
 
+/**
+ * What a quick preview's document runs before the app's scripts: the
+ * server's markup out of `<body>`, every script left where it is -- the
+ * router's dehydrated state and the app's entry are among them. Hydration
+ * then finds the body empty and React renders the page, with the new code's
+ * attributes and classes, where it would have kept the old ones.
+ */
+var QUICK_PREVIEW_RENDER_SCRIPT = "<script>(function(){var b=document.body;if(!b)return;" + "Array.prototype.slice.call(b.childNodes).forEach(function(n){" + 'if(n.nodeName!=="SCRIPT")b.removeChild(n)})})()</script>';
+
 /** What the page sends the worker to store a preview's files. */
 var QUICK_PREVIEW_STORE_MESSAGE = "val-quick-preview-store";
 
@@ -90,7 +107,7 @@ function isQuickPreviewFiles(value) {
  * The worker, as the source it is served as: plain, and small, because it is
  * served as a file of its own (`demoServiceWorker.ts` is the same).
  */
-var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    if (event.resultingClientId) {\n      byClient.set(event.resultingClientId, url.searchParams.get(PARAM));\n    }\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
+var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst RENDER = ").concat(JSON.stringify(QUICK_PREVIEW_RENDER_SCRIPT), ";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    const id = url.searchParams.get(PARAM);\n    if (event.resultingClientId) byClient.set(event.resultingClientId, id);\n    if (id) event.respondWith(rendered(event.request));\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\n/** A quick preview's document, with the script that has it rendered, not hydrated. */\nasync function rendered(request) {\n  const response = await fetch(request);\n  const type = response.headers.get(\"Content-Type\") || \"\";\n  if (!response.ok || !type.includes(\"text/html\")) return response;\n  const html = await response.text();\n  const at = html.lastIndexOf(\"</body>\");\n  if (at === -1) return new Response(html, response);\n  const headers = new Headers(response.headers);\n  headers.delete(\"Content-Length\");\n  headers.delete(\"Content-Encoding\");\n  return new Response(html.slice(0, at) + RENDER + html.slice(at), {\n    status: response.status,\n    statusText: response.statusText,\n    headers,\n  });\n}\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
 
 /** How long the worker is given to install and store a preview. */
 var STORE_TIMEOUT_MS = 30000;
@@ -1536,6 +1553,7 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
 exports.DEFAULT_CANVAS_SELECTION = DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = QUICK_PREVIEW_STORE_MESSAGE;

package/dist/{getSitemapTree-97713490.cjs.prod.js → getSitemapTree-8a04f3cf.cjs.prod.js}

@@ -47,6 +47,14 @@ var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
  *    document's `/_app/` requests from the files, and everything else from
  *    the network: the HTML is the last build's, rendered by its server, and
  *    the new code takes it over in the browser.
+ * 4. It takes it over by RENDERING it, not by hydrating it. Hydration keeps
+ *    the markup the server sent wherever only an attribute differs -- React
+ *    mends text, never a `className` -- so a change to classes and props,
+ *    which is most of what the design tab changes, hydrated into the old
+ *    page and showed nothing. The worker adds a script to the end of that
+ *    document's `<body>` ({@link QUICK_PREVIEW_RENDER_SCRIPT}) that takes the
+ *    server's markup out before the app's scripts run, so hydration finds
+ *    nothing to keep and React renders the page with the new code.
  *
  * What it cannot show, and the tab says so: anything on the server. Server
  * functions, API routes and loaders that run there are the last build's, as
@@ -64,6 +72,15 @@ var QUICK_PREVIEW_PARAM = "val_quick";
 /** Where Val's API serves the worker: under `/api/val`. */
 var QUICK_PREVIEW_SERVICE_WORKER_PATH = "/quick-preview-sw.js";
 
+/**
+ * What a quick preview's document runs before the app's scripts: the
+ * server's markup out of `<body>`, every script left where it is -- the
+ * router's dehydrated state and the app's entry are among them. Hydration
+ * then finds the body empty and React renders the page, with the new code's
+ * attributes and classes, where it would have kept the old ones.
+ */
+var QUICK_PREVIEW_RENDER_SCRIPT = "<script>(function(){var b=document.body;if(!b)return;" + "Array.prototype.slice.call(b.childNodes).forEach(function(n){" + 'if(n.nodeName!=="SCRIPT")b.removeChild(n)})})()</script>';
+
 /** What the page sends the worker to store a preview's files. */
 var QUICK_PREVIEW_STORE_MESSAGE = "val-quick-preview-store";
 
@@ -90,7 +107,7 @@ function isQuickPreviewFiles(value) {
  * The worker, as the source it is served as: plain, and small, because it is
  * served as a file of its own (`demoServiceWorker.ts` is the same).
  */
-var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    if (event.resultingClientId) {\n      byClient.set(event.resultingClientId, url.searchParams.get(PARAM));\n    }\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
+var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst RENDER = ").concat(JSON.stringify(QUICK_PREVIEW_RENDER_SCRIPT), ";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    const id = url.searchParams.get(PARAM);\n    if (event.resultingClientId) byClient.set(event.resultingClientId, id);\n    if (id) event.respondWith(rendered(event.request));\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\n/** A quick preview's document, with the script that has it rendered, not hydrated. */\nasync function rendered(request) {\n  const response = await fetch(request);\n  const type = response.headers.get(\"Content-Type\") || \"\";\n  if (!response.ok || !type.includes(\"text/html\")) return response;\n  const html = await response.text();\n  const at = html.lastIndexOf(\"</body>\");\n  if (at === -1) return new Response(html, response);\n  const headers = new Headers(response.headers);\n  headers.delete(\"Content-Length\");\n  headers.delete(\"Content-Encoding\");\n  return new Response(html.slice(0, at) + RENDER + html.slice(at), {\n    status: response.status,\n    statusText: response.statusText,\n    headers,\n  });\n}\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
 
 /** How long the worker is given to install and store a preview. */
 var STORE_TIMEOUT_MS = 30000;
@@ -1536,6 +1553,7 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
 exports.DEFAULT_CANVAS_SELECTION = DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = QUICK_PREVIEW_STORE_MESSAGE;

package/dist/{getSitemapTree-7c848c94.esm.js → getSitemapTree-fef55872.esm.js}

@@ -27,6 +27,14 @@ var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
  *    document's `/_app/` requests from the files, and everything else from
  *    the network: the HTML is the last build's, rendered by its server, and
  *    the new code takes it over in the browser.
+ * 4. It takes it over by RENDERING it, not by hydrating it. Hydration keeps
+ *    the markup the server sent wherever only an attribute differs -- React
+ *    mends text, never a `className` -- so a change to classes and props,
+ *    which is most of what the design tab changes, hydrated into the old
+ *    page and showed nothing. The worker adds a script to the end of that
+ *    document's `<body>` ({@link QUICK_PREVIEW_RENDER_SCRIPT}) that takes the
+ *    server's markup out before the app's scripts run, so hydration finds
+ *    nothing to keep and React renders the page with the new code.
  *
  * What it cannot show, and the tab says so: anything on the server. Server
  * functions, API routes and loaders that run there are the last build's, as
@@ -44,6 +52,15 @@ var QUICK_PREVIEW_PARAM = "val_quick";
 /** Where Val's API serves the worker: under `/api/val`. */
 var QUICK_PREVIEW_SERVICE_WORKER_PATH = "/quick-preview-sw.js";
 
+/**
+ * What a quick preview's document runs before the app's scripts: the
+ * server's markup out of `<body>`, every script left where it is -- the
+ * router's dehydrated state and the app's entry are among them. Hydration
+ * then finds the body empty and React renders the page, with the new code's
+ * attributes and classes, where it would have kept the old ones.
+ */
+var QUICK_PREVIEW_RENDER_SCRIPT = "<script>(function(){var b=document.body;if(!b)return;" + "Array.prototype.slice.call(b.childNodes).forEach(function(n){" + 'if(n.nodeName!=="SCRIPT")b.removeChild(n)})})()</script>';
+
 /** What the page sends the worker to store a preview's files. */
 var QUICK_PREVIEW_STORE_MESSAGE = "val-quick-preview-store";
 
@@ -70,7 +87,7 @@ function isQuickPreviewFiles(value) {
  * The worker, as the source it is served as: plain, and small, because it is
  * served as a file of its own (`demoServiceWorker.ts` is the same).
  */
-var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    if (event.resultingClientId) {\n      byClient.set(event.resultingClientId, url.searchParams.get(PARAM));\n    }\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
+var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst RENDER = ").concat(JSON.stringify(QUICK_PREVIEW_RENDER_SCRIPT), ";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    const id = url.searchParams.get(PARAM);\n    if (event.resultingClientId) byClient.set(event.resultingClientId, id);\n    if (id) event.respondWith(rendered(event.request));\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\n/** A quick preview's document, with the script that has it rendered, not hydrated. */\nasync function rendered(request) {\n  const response = await fetch(request);\n  const type = response.headers.get(\"Content-Type\") || \"\";\n  if (!response.ok || !type.includes(\"text/html\")) return response;\n  const html = await response.text();\n  const at = html.lastIndexOf(\"</body>\");\n  if (at === -1) return new Response(html, response);\n  const headers = new Headers(response.headers);\n  headers.delete(\"Content-Length\");\n  headers.delete(\"Content-Encoding\");\n  return new Response(html.slice(0, at) + RENDER + html.slice(at), {\n    status: response.status,\n    statusText: response.statusText,\n    headers,\n  });\n}\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
 
 /** How long the worker is given to install and store a preview. */
 var STORE_TIMEOUT_MS = 30000;
@@ -1513,4 +1530,4 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
-export { withQuickPreviewParam as A, quickPreviewSiteOrigin as B, isDesignTabOrigin as C, DEFAULT_CANVAS_SELECTION as D, parseRoutePattern as E, formatRoutePattern as F, getNextAppRouterSourceFolder as G, getTanStackRouterSourceFolder as H, getPageRouterSourceFolder as I, isTanStackRoutesFolder as J, getPageRouterSitemapTree as K, getPatternFromModuleFilePath as L, QUICK_PREVIEW_PARAM as Q, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, describeElement as h, isValCanvasPageMessage as i, attachElementPicker as j, createPickerOverlay as k, elementLabel as l, modifierLabel as m, watchPageLocation as n, readPageSnapshot as o, pageLocationOf as p, findBySelector as q, restoreScroll as r, startElementPicking as s, screenshotPage as t, QUICK_PREVIEW_SERVICE_WORKER_PATH as u, QUICK_PREVIEW_STORE_MESSAGE as v, withValCanvasParam as w, isQuickPreviewFiles as x, QUICK_PREVIEW_SERVICE_WORKER_SOURCE as y, storeQuickPreview as z };
+export { storeQuickPreview as A, withQuickPreviewParam as B, quickPreviewSiteOrigin as C, DEFAULT_CANVAS_SELECTION as D, isDesignTabOrigin as E, parseRoutePattern as F, formatRoutePattern as G, getNextAppRouterSourceFolder as H, getTanStackRouterSourceFolder as I, getPageRouterSourceFolder as J, isTanStackRoutesFolder as K, getPageRouterSitemapTree as L, getPatternFromModuleFilePath as M, QUICK_PREVIEW_PARAM as Q, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, describeElement as h, isValCanvasPageMessage as i, attachElementPicker as j, createPickerOverlay as k, elementLabel as l, modifierLabel as m, watchPageLocation as n, readPageSnapshot as o, pageLocationOf as p, findBySelector as q, restoreScroll as r, startElementPicking as s, screenshotPage as t, QUICK_PREVIEW_SERVICE_WORKER_PATH as u, QUICK_PREVIEW_RENDER_SCRIPT as v, withValCanvasParam as w, QUICK_PREVIEW_STORE_MESSAGE as x, isQuickPreviewFiles as y, QUICK_PREVIEW_SERVICE_WORKER_SOURCE as z };

package/internal/dist/valbuild-shared-internal.cjs.dev.js

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var zod = require('zod');
 var protocol = require('../../dist/protocol-d0efb8cd.cjs.dev.js');
 var zodValidationError = require('zod-validation-error');
-var getSitemapTree = require('../../dist/getSitemapTree-98642b57.cjs.dev.js');
+var getSitemapTree = require('../../dist/getSitemapTree-6dfa2f4e.cjs.dev.js');
 var FlexSearch = require('flexsearch');
 var wrapNativeSuper = require('../../dist/wrapNativeSuper-933f991e.cjs.dev.js');
 var utils = require('../../dist/utils-d3d8b4b5.cjs.dev.js');
@@ -9575,6 +9575,7 @@ exports.parseVerify = protocol.parseVerify;
 exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = getSitemapTree.QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = getSitemapTree.QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = getSitemapTree.QUICK_PREVIEW_STORE_MESSAGE;

package/internal/dist/valbuild-shared-internal.cjs.prod.js

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var zod = require('zod');
 var protocol = require('../../dist/protocol-b1055ef0.cjs.prod.js');
 var zodValidationError = require('zod-validation-error');
-var getSitemapTree = require('../../dist/getSitemapTree-97713490.cjs.prod.js');
+var getSitemapTree = require('../../dist/getSitemapTree-8a04f3cf.cjs.prod.js');
 var FlexSearch = require('flexsearch');
 var wrapNativeSuper = require('../../dist/wrapNativeSuper-8673414f.cjs.prod.js');
 var utils = require('../../dist/utils-32bcaca2.cjs.prod.js');
@@ -9575,6 +9575,7 @@ exports.parseVerify = protocol.parseVerify;
 exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
 exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.QUICK_PREVIEW_PARAM = getSitemapTree.QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_RENDER_SCRIPT = getSitemapTree.QUICK_PREVIEW_RENDER_SCRIPT;
 exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_PATH;
 exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = getSitemapTree.QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
 exports.QUICK_PREVIEW_STORE_MESSAGE = getSitemapTree.QUICK_PREVIEW_STORE_MESSAGE;

package/internal/dist/valbuild-shared-internal.esm.js

@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { _ as _objectWithoutProperties } from '../../dist/protocol-55cfa3cf.esm.js';
 export { P as PublishProtocolError, b as parseArtifacts, p as parseBuildTarget, l as parseCancel, a as parseDeclare, m as parseDiscard, j as parseJob, n as parseNewestCiRun, h as parsePress, g as parseProblems, f as parseProjectSource, d as parsePromote, o as parsePublishToken, k as parseRenew, i as parseRequestStatus, e as parseStatus, q as parseUpdateTarget, c as parseVerify } from '../../dist/protocol-55cfa3cf.esm.js';
 import { fromError } from 'zod-validation-error';
-export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, u as QUICK_PREVIEW_SERVICE_WORKER_PATH, y as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, v as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, F as formatRoutePattern, G as getNextAppRouterSourceFolder, K as getPageRouterSitemapTree, I as getPageRouterSourceFolder, L as getPatternFromModuleFilePath, H as getTanStackRouterSourceFolder, C as isDesignTabOrigin, x as isQuickPreviewFiles, J as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, E as parseRoutePattern, B as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, t as screenshotPage, s as startElementPicking, z as storeQuickPreview, n as watchPageLocation, A as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-7c848c94.esm.js';
+export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, v as QUICK_PREVIEW_RENDER_SCRIPT, u as QUICK_PREVIEW_SERVICE_WORKER_PATH, z as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, x as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, G as formatRoutePattern, H as getNextAppRouterSourceFolder, L as getPageRouterSitemapTree, J as getPageRouterSourceFolder, M as getPatternFromModuleFilePath, I as getTanStackRouterSourceFolder, E as isDesignTabOrigin, y as isQuickPreviewFiles, K as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, F as parseRoutePattern, C as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, t as screenshotPage, s as startElementPicking, A as storeQuickPreview, n as watchPageLocation, B as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-fef55872.esm.js';
 import FlexSearch from 'flexsearch';
 import { a as _createClass, c as _classCallCheck } from '../../dist/wrapNativeSuper-639b12b7.esm.js';
 import { b as base64DataUrlToUint8Array } from '../../dist/utils-00f3e1df.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/shared",
-  "version": "0.150.18",
+  "version": "0.150.20",
   "private": false,
   "description": "Val shared types and utilities",
   "repository": {