@jxsuite/studio 2.4.3 → 4.0.0

package/dist/chunks/{studio-pyrw8h0w.js → studio-kjjsjak4.js}

@@ -1,28 +1,28 @@
+import {
+  distributePageIntoLayout,
+  getEffectiveElements,
+  getEffectiveHead,
+  getEffectiveImports,
+  getEffectiveLayoutPath,
+  getEffectiveLocales,
+  getEffectiveMedia,
+  resolveLayoutDoc,
+  setLayoutSelection,
+  shell
+} from "./studio-hbtp0eh1.js";
 import {
   PRIMARY_PANE,
   activeTab,
-  allCanvasSurfaces,
   argsSchema,
   booleanArg,
   booleanProperty,
   boundedNumberArg,
   cloneSelection,
   collabState,
-  computed,
-  distributePageIntoLayout,
-  effect,
-  effectScope,
   emptyContext,
   enumArg,
   enumProperty,
   focusPane,
-  getEffectiveElements,
-  getEffectiveHead,
-  getEffectiveImports,
-  getEffectiveLayoutPath,
-  getEffectiveLocales,
-  getEffectiveMedia,
-  isRef as isRef2,
   isTabActive,
   localeDirection,
   mutateInsertNode,
@@ -30,40 +30,46 @@ import {
   mutateRemoveNode,
   mutateUpdateProp,
   mutateUpdateProperty,
-  notify,
   numberProperty,
-  onEffectCleanup,
   paneById,
   primarySelection,
-  reactive,
-  ref,
   resolveI18n,
-  resolveLayoutDoc,
-  setLayoutSelection,
-  shell,
-  stageContaining,
   stringArg,
   stringProperty,
-  surfaceForPane,
-  toRaw,
   toggleSelected,
   transact,
   transactDoc,
-  view,
   workspace
-} from "./studio-ra7ar50f.js";
+} from "./studio-2zkz8evn.js";
+import {
+  allCanvasSurfaces,
+  stageContaining,
+  surfaceForPane,
+  view
+} from "./studio-wcy8trfx.js";
+import {
+  computed,
+  effect,
+  effectScope,
+  isRef as isRef2,
+  notify,
+  onEffectCleanup,
+  reactive,
+  ref,
+  toRaw
+} from "./studio-xrapxwwc.js";
 import {
   classMap,
   ifDefined,
   styleMap
-} from "./studio-twsafr1e.js";
+} from "./studio-m3hwn7y1.js";
 import {
   ref as ref2
-} from "./studio-kvfx9z2c.js";
+} from "./studio-4rzyrtjz.js";
 import {
   html,
   nothing
-} from "./studio-5x5774ak.js";
+} from "./studio-kryvsw6j.js";
 import {
   _defineProperty,
   combine,
@@ -75,15 +81,23 @@ import {
   buildComponentInstance,
   componentRegistry,
   computeRelativePath
-} from "./studio-s519zc99.js";
+} from "./studio-bgxt93ga.js";
 import {
-  bodyReturnsValue,
   childIndex,
   childList,
-  displayTagName,
   getNodeAtPath,
-  hasStructuredBody,
   isAncestor,
+  leftPanel,
+  parentElementPath,
+  pathsEqual,
+  projectState,
+  renderOnly,
+  stripEventHandlers
+} from "./studio-p4ngc046.js";
+import {
+  bodyReturnsValue,
+  displayTagName,
+  hasStructuredBody,
   isExpressionDef,
   isFunctionDef,
   isJsonObject,
@@ -95,22 +109,16 @@ import {
   isServerFnDef,
   isTagExpression,
   isTemplateString,
-  leftPanel,
-  paramNames,
-  parentElementPath,
-  pathsEqual,
-  projectState,
-  renderOnly,
-  stripEventHandlers
-} from "./studio-cjm7fdjf.js";
+  paramNames
+} from "./studio-q7v10cg2.js";
 import {
   formatByName,
   loadExtensions
-} from "./studio-rqemfhz6.js";
+} from "./studio-eenfkt4e.js";
 import {
   getPlatform,
   hasPlatform
-} from "./studio-sas7mt3k.js";
+} from "./studio-9ab8gqsm.js";
 import {
   bundleUrl
 } from "./studio-53n8bp04.js";
@@ -193,23 +201,18 @@ function tabOfContainer(container) {
   return tabOfPane(paneOfContainer(container));
 }
 
-// src/page-params.ts
+// ../site/src/routes.ts
 var PARAM_SEGMENT = /\[\.\.\.(\w+)\]|\[(\w+)\]/g;
-function dynamicRouteParams(documentPath) {
-  if (!documentPath) {
-    return [];
-  }
-  const params = [];
-  for (const match of documentPath.matchAll(PARAM_SEGMENT)) {
-    params.push(match[1] ?? match[2]);
-  }
-  return params;
+function pageRelativePath(documentPath) {
+  return documentPath.split("\\").join("/").replace(/^\.\//, "").replace(/^\//, "").replace(/^pages\//, "");
 }
-function documentUrlPattern(documentPath) {
-  if (!documentPath) {
-    return "/";
+function fileToRoute(relativePath) {
+  let urlPath = pageRelativePath(relativePath);
+  const lastSegment = urlPath.slice(urlPath.lastIndexOf("/") + 1);
+  const dot = lastSegment.lastIndexOf(".");
+  if (dot > 0) {
+    urlPath = urlPath.slice(0, urlPath.length - (lastSegment.length - dot));
   }
-  let urlPath = documentPath.replace(/^\.\//, "").replace(/^pages\//, "").replace(/\.[^/.]+$/, "");
   if (urlPath.endsWith("/index")) {
     urlPath = urlPath.slice(0, -6) || "/";
   } else if (urlPath === "index") {
@@ -218,8 +221,35 @@ function documentUrlPattern(documentPath) {
   if (!urlPath.startsWith("/")) {
     urlPath = `/${urlPath}`;
   }
-  return urlPath.replaceAll(PARAM_SEGMENT, (_match, spread, named) => spread ? "*" : `:${named}`);
+  const params = [];
+  let isDynamic = false;
+  let isCatchAll = false;
+  const urlPattern = urlPath.replaceAll(PARAM_SEGMENT, (_match, spread, named) => {
+    isDynamic = true;
+    if (spread) {
+      isCatchAll = true;
+      params.push(spread);
+      return "*";
+    }
+    params.push(named);
+    return `:${named}`;
+  });
+  return { isCatchAll, isDynamic, params, urlPattern };
+}
+function documentUrlPattern(documentPath) {
+  if (!documentPath) {
+    return "/";
+  }
+  return fileToRoute(documentPath).urlPattern;
+}
+function dynamicRouteParams(documentPath) {
+  if (!documentPath) {
+    return [];
+  }
+  return fileToRoute(documentPath).params;
 }
+
+// src/page-params.ts
 function pagePathsDef(doc) {
   const fromDoc = doc.document?.$paths;
   const fromFrontmatter = doc.frontmatter?.$paths;
@@ -2632,6 +2662,194 @@ function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
 
+// ../schema/src/asset-paths.ts
+function normalizeDir(value) {
+  const forward = value.replaceAll("\\", "/");
+  return forward.length > 1 && forward.endsWith("/") ? forward.slice(0, -1) : forward;
+}
+function normalizeAssetPrefix(prefix) {
+  const forward = normalizeDir(prefix);
+  return forward.startsWith("/") ? forward : `/${forward}`;
+}
+function bySpecificity(mounts, key) {
+  return [...mounts].toSorted((a, b) => b[key].length - a[key].length);
+}
+function isUnder(path, dir) {
+  return path === dir || path.startsWith(`${dir}/`);
+}
+function assetUrlFor(mounts, absolutePath) {
+  const path = normalizeDir(absolutePath);
+  for (const mount of bySpecificity(mounts, "dir")) {
+    const dir = normalizeDir(mount.dir);
+    if (!isUnder(path, dir) || path === dir) {
+      continue;
+    }
+    const rest = path.slice(dir.length + 1);
+    const encoded = rest.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+    return `${normalizeAssetPrefix(mount.urlPrefix)}/${encoded}`;
+  }
+  return null;
+}
+function resolveAssetUrl(mounts, url) {
+  const pathname = url.split("#")[0].split("?")[0];
+  if (!pathname.startsWith("/")) {
+    return null;
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(pathname);
+  } catch {
+    return null;
+  }
+  if (/%2e|%2f/i.test(decoded)) {
+    return null;
+  }
+  for (const mount of bySpecificity(mounts, "urlPrefix")) {
+    const prefix = normalizeAssetPrefix(mount.urlPrefix);
+    if (!decoded.startsWith(`${prefix}/`)) {
+      continue;
+    }
+    const rest = decoded.slice(prefix.length + 1);
+    const segments = rest.split("/");
+    if (segments.some((s) => s === "" || s === "." || s === "..")) {
+      return null;
+    }
+    return `${normalizeDir(mount.dir)}/${segments.join("/")}`;
+  }
+  return null;
+}
+var URL_TERMINATOR = String.raw`"'\s<>()\\`;
+var PUBLIC_DIR = "public";
+var BUILD_LANES = ["mounts", "public"];
+function splitRefSuffix(value) {
+  const cut = value.search(/[#?]/);
+  return cut === -1 ? { path: value, suffix: "" } : { path: value.slice(0, cut), suffix: value.slice(cut) };
+}
+function isNonRelativeRef(value) {
+  return value === "" || value.startsWith("/") || value.startsWith("#") || value.includes("${") || /^[a-z][\w+.-]*:/i.test(value);
+}
+function normalizeProjectPath(path) {
+  return path.replaceAll("\\", "/").replace(/^\.\//, "").replace(/^\/+/, "").replace(/\/+$/, "");
+}
+function dirOfPath(path) {
+  const normalized = normalizeProjectPath(path);
+  const slash = normalized.lastIndexOf("/");
+  return slash === -1 ? "" : normalized.slice(0, slash);
+}
+function joinProjectPath(dir, ref3) {
+  const base = dir === "" || dir === "." ? [] : normalizeProjectPath(dir).split("/");
+  const out = base.filter((segment) => segment !== "" && segment !== ".");
+  for (const segment of ref3.replaceAll("\\", "/").split("/")) {
+    if (segment === "" || segment === ".") {
+      continue;
+    }
+    if (segment === "..") {
+      if (out.length === 0) {
+        return null;
+      }
+      out.pop();
+      continue;
+    }
+    out.push(segment);
+  }
+  return out.join("/");
+}
+function projectPathsForSiteUrl(url, mounts, lanes) {
+  const { path } = splitRefSuffix(url);
+  if (!path.startsWith("/")) {
+    return [];
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(path);
+  } catch {
+    return [];
+  }
+  if (/%2e|%2f/i.test(decoded)) {
+    return [];
+  }
+  const rest = decoded.replace(/^\/+/, "");
+  if (rest === "" || rest.split("/").some((segment) => segment === "." || segment === "..")) {
+    return [];
+  }
+  const out = [];
+  for (const lane of lanes) {
+    if (lane === "mounts") {
+      const mounted = resolveAssetUrl(mounts, path);
+      if (mounted !== null && !mounted.startsWith("/") && !/^[A-Za-z]:/.test(mounted)) {
+        out.push(normalizeProjectPath(mounted));
+      }
+      continue;
+    }
+    out.push(lane === "root" ? rest : `${PUBLIC_DIR}/${rest}`);
+  }
+  return [...new Set(out)];
+}
+function projectPathForRef(value, documentDir, mounts, lanes) {
+  const { path } = splitRefSuffix(value);
+  if (path === "") {
+    return null;
+  }
+  if (isNonRelativeRef(value)) {
+    return path.startsWith("/") ? projectPathsForSiteUrl(path, mounts, lanes)[0] ?? null : null;
+  }
+  if (path.endsWith("/")) {
+    return null;
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(path);
+  } catch {
+    return null;
+  }
+  const joined = joinProjectPath(documentDir, decoded);
+  if (joined === null || joined === "" || joined === normalizeProjectPath(documentDir)) {
+    return null;
+  }
+  return joined;
+}
+function encodeProjectPath(path) {
+  return path.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+}
+function parseSrcset(value) {
+  const out = [];
+  let i = 0;
+  while (i < value.length) {
+    while (i < value.length && (/\s/.test(value[i]) || value[i] === ",")) {
+      i += 1;
+    }
+    if (i >= value.length) {
+      break;
+    }
+    const start = i;
+    while (i < value.length && !/\s/.test(value[i])) {
+      i += 1;
+    }
+    let url = value.slice(start, i);
+    if (url.endsWith(",")) {
+      out.push({ descriptor: "", url: url.replace(/,+$/, "") });
+      continue;
+    }
+    while (i < value.length && /\s/.test(value[i])) {
+      i += 1;
+    }
+    const descStart = i;
+    while (i < value.length && value[i] !== ",") {
+      i += 1;
+    }
+    const descriptor = value.slice(descStart, i).trim();
+    i += 1;
+    url = url.replace(/,+$/, "");
+    if (url !== "") {
+      out.push({ descriptor, url });
+    }
+  }
+  return out;
+}
+function formatSrcset(candidates) {
+  return candidates.map(({ url, descriptor }) => descriptor ? `${url} ${descriptor}` : url).join(", ");
+}
+
 // ../runtime/src/statements.ts
 function statementKind(statement) {
   if ("operator" in statement) {
@@ -2816,6 +3034,52 @@ function canvasAttrName(el, key) {
   }
   return key;
 }
+var _canvasAssetResolver = null;
+function setCanvasAssetResolver(fn) {
+  _canvasAssetResolver = fn;
+}
+var ASSET_KEYS = new Set(["src", "poster", "data"]);
+var SRCSET_KEYS = new Set(["srcset", "imagesrcset"]);
+var HREF_ASSET_TAGS = new Set(["LINK"]);
+function isAssetKey(tagName, key) {
+  return ASSET_KEYS.has(key) || key === "href" && HREF_ASSET_TAGS.has(tagName);
+}
+function canvasAssetValue(tagName, key, value) {
+  if (!_canvasAssetResolver || value === "") {
+    return value;
+  }
+  const name = key.toLowerCase();
+  if (SRCSET_KEYS.has(name)) {
+    const candidates = parseSrcset(value);
+    let changed = false;
+    const next = candidates.map((candidate) => {
+      const resolved = _canvasAssetResolver?.(candidate.url, name) ?? null;
+      if (resolved === null || resolved === candidate.url) {
+        return candidate;
+      }
+      changed = true;
+      return { descriptor: candidate.descriptor, url: resolved };
+    });
+    return changed ? formatSrcset(next) : value;
+  }
+  if (!isAssetKey(tagName, name)) {
+    return value;
+  }
+  return _canvasAssetResolver(value, name) ?? value;
+}
+var CSS_URL_RE = /\burl\(\s*(?<q>["']?)(?<u>[^"')]*)\k<q>\s*\)/g;
+function canvasStyleUrls(value) {
+  if (!_canvasAssetResolver || !value.includes("url(")) {
+    return value;
+  }
+  return value.replaceAll(CSS_URL_RE, (whole, quote, url) => {
+    const resolved = url === "" ? null : _canvasAssetResolver?.(url, "url()") ?? null;
+    return resolved === null ? whole : `url(${quote}${resolved}${quote})`;
+  });
+}
+function canvasStyleValue(value) {
+  return transposeCanvasUnits(canvasStyleUrls(value));
+}
 var _stampPropBindings = false;
 var PURE_STATE_TEMPLATE = /^\s*\$\{\s*state\.(\w+)\s*\}\s*$/;
 function boundPropKey(key, val, state) {
@@ -2986,6 +3250,32 @@ function evaluateTemplate(str, state) {
   const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
   return fn(state, $map, $map?.item, $map?.index);
 }
+function isSingleExpression(str) {
+  if (!str.startsWith("${") || !str.endsWith("}")) {
+    return false;
+  }
+  let depth = 0;
+  for (let i = 1;i < str.length; i += 1) {
+    const c = str[i];
+    if (c === "{") {
+      depth += 1;
+    } else if (c === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return i === str.length - 1;
+      }
+    }
+  }
+  return false;
+}
+function evaluateAttrTemplate(str, state) {
+  if (!isSingleExpression(str)) {
+    return evaluateTemplate(str, state);
+  }
+  const $map = state?.$map;
+  const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`);
+  return fn(state, $map, $map?.item, $map?.index);
+}
 var _moduleCache = new Map;
 async function resolveFunction(def, state, key, base) {
   if (def.body && def.$src) {
@@ -3089,6 +3379,17 @@ var RESERVED_KEYS = new Set([
   "observedAttributes"
 ]);
 var warnedRefChildren = new Set;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+function elementNamespace(tagName, inherited) {
+  if (tagName === "svg") {
+    return SVG_NS;
+  }
+  if (tagName === "math") {
+    return MATHML_NS;
+  }
+  return inherited ?? null;
+}
 function renderNode(def, state, options) {
   const path = options?._path ?? [];
   if (typeof def === "string" || typeof def === "number" || typeof def === "boolean") {
@@ -3131,7 +3432,9 @@ function renderNode(def, state, options) {
   if (def.$switch) {
     return renderSwitch(def, localState, options);
   }
-  const el = document.createElement(tagName);
+  const ns = elementNamespace(tagName, options?._ns);
+  const childNs = tagName === "foreignObject" ? null : ns;
+  const el = ns ? document.createElementNS(ns, tagName) : document.createElement(tagName);
   if (options?.onNodeCreated) {
     options.onNodeCreated(el, path, def, localState);
   }
@@ -3140,12 +3443,12 @@ function renderNode(def, state, options) {
   applyAttributes(el, def.attributes ?? {}, localState);
   const kids = def.children;
   if (isMappedArray(kids)) {
-    const arrOpts = options ? { ...options, _path: [...path, "children"] } : undefined;
+    const arrOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children"] } : undefined;
     renderMappedArrayInto(el, kids, localState, arrOpts);
   } else if (Array.isArray(kids)) {
     for (let i = 0;i < kids.length; i++) {
       const child = kids[i];
-      const childOpts = options ? { ...options, _path: [...path, "children", i] } : undefined;
+      const childOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children", i] } : undefined;
       if (isMappedArray(child)) {
         renderMappedArrayInto(el, child, localState, childOpts);
       } else {
@@ -3204,6 +3507,15 @@ function bindProperty(el, key, val, state) {
   if (boundProp) {
     el.dataset.jxBoundProp = boundProp;
   }
+  const asAsset = (resolved) => typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  const write = (resolved) => {
+    const node = el;
+    if (key === "className" && !(node instanceof HTMLElement)) {
+      node.setAttribute("class", resolved == null ? "" : String(resolved));
+      return;
+    }
+    target[key] = resolved;
+  };
   if (isRefObj(val)) {
     const refVal = val;
     if (key === "id") {
@@ -3211,17 +3523,17 @@ function bindProperty(el, key, val, state) {
       return;
     }
     effect(() => {
-      target[key] = resolveRef(refVal.$ref, state);
+      write(asAsset(resolveRef(refVal.$ref, state)));
     });
     return;
   }
   if (isTemplateString(val)) {
     effect(() => {
-      target[key] = evaluateTemplate(val, state);
+      write(asAsset(evaluateTemplate(val, state)));
     });
     return;
   }
-  target[key] = val;
+  write(asAsset(val));
 }
 function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   const nested = {};
@@ -3256,19 +3568,19 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (prop.startsWith("--")) {
       if (isTemplateString(val)) {
         effect(() => {
-          el.style.setProperty(prop, transposeCanvasUnits(evaluateTemplate(val, state)));
+          el.style.setProperty(prop, canvasStyleValue(evaluateTemplate(val, state)));
         });
       } else {
-        el.style.setProperty(prop, transposeCanvasUnits(scalar));
+        el.style.setProperty(prop, canvasStyleValue(scalar));
       }
     } else if (isTemplateString(val)) {
       effect(() => {
-        el.style[prop] = transposeCanvasUnits(evaluateTemplate(val, state));
+        el.style[prop] = canvasStyleValue(evaluateTemplate(val, state));
       });
     } else if (mediaOverriddenProps.has(prop)) {
       baseDecls[prop] = scalar;
     } else {
-      el.style[prop] = transposeCanvasUnits(scalar);
+      el.style[prop] = canvasStyleValue(scalar);
     }
   }
   const hasNested = Object.keys(nested).length > 0;
@@ -3327,7 +3639,7 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (key === "@--") {
       continue;
     }
-    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.startsWith("@(") ? key.slice(1) : null;
+    const query = resolveAtQuery(key, mediaQueries);
     const atRule = query === null ? key : `@media ${query}`;
     const scope = `[data-jx="${uid}"]`;
     const scheme = query === null ? null : pureSchemeOf(query);
@@ -3350,15 +3662,35 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   elementStyleTags.set(el, tag);
 }
 var elementStyleTags = new WeakMap;
+var ENUMERATED_ATTRS = new Set(["contenteditable", "draggable", "spellcheck"]);
+function booleanAttrValue(name, value) {
+  const lower = name.toLowerCase();
+  if (lower.startsWith("aria-") || ENUMERATED_ATTRS.has(lower)) {
+    return String(value);
+  }
+  return value ? "" : null;
+}
 function applyAttributes(el, attrs, state) {
   for (const [k, v] of Object.entries(attrs)) {
     const attr = canvasAttrName(el, k);
+    const write = (resolved) => {
+      if (typeof resolved === "boolean") {
+        const text = booleanAttrValue(attr, resolved);
+        if (text === null) {
+          el.removeAttribute(attr);
+        } else {
+          el.setAttribute(attr, text);
+        }
+        return;
+      }
+      el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved ?? "")));
+    };
     if (isRefObj(v)) {
-      effect(() => el.setAttribute(attr, String(resolveRef(v.$ref, state) ?? "")));
+      effect(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => el.setAttribute(attr, String(evaluateTemplate(v, state))));
+      effect(() => write(evaluateAttrTemplate(v, state)));
     } else {
-      el.setAttribute(attr, String(v));
+      write(v);
     }
   }
 }
@@ -4031,7 +4363,18 @@ function camelToKebab(s) {
   return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 }
 function toCSSText(rules) {
-  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${transposeCanvasUnits(String(v))}`).join("; ");
+  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${canvasStyleValue(String(v))}`).join("; ");
+}
+var MEDIA_TYPES = new Set(["all", "print", "screen", "speech"]);
+function resolveAtQuery(atKey, mediaQueries) {
+  if (atKey.startsWith("@--")) {
+    return mediaQueries[atKey.slice(1)] ?? atKey.slice(1);
+  }
+  if (atKey.startsWith("@(")) {
+    const inner = atKey.slice(2, -1).trim();
+    return MEDIA_TYPES.has(inner.toLowerCase()) ? inner : atKey.slice(1);
+  }
+  return null;
 }
 var COLOR_SCHEME_ATTR = "data-color-scheme";
 function pureSchemeOf(query) {
@@ -4179,6 +4522,9 @@ async function defineElement(source, baseUrl) {
       }
       applyStyle(this, def.style ?? {}, state["$media"] ?? {}, state);
       applyAttributes(this, def.attributes ?? {}, state);
+      if (!Array.isArray(def.children) && def.textContent !== undefined) {
+        bindProperty(this, "textContent", def.textContent, state);
+      }
       const children = Array.isArray(def.children) ? def.children : [];
       for (const childDef of children) {
         this.append(renderNode(childDef, state));
@@ -4225,19 +4571,21 @@ function renderCustomElementWithProps(def, state, options, path) {
     if (refusePrivateProp(key, "$props")) {
       continue;
     }
+    const write = (resolved) => {
+      el[key] = typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+    };
     if (isRefObj(val)) {
       const refVal = val;
-      const resolved = resolveRef(refVal.$ref, state);
-      el[key] = resolved;
+      write(resolveRef(refVal.$ref, state));
       effect(() => {
-        el[key] = resolveRef(refVal.$ref, state);
+        write(resolveRef(refVal.$ref, state));
       });
     } else if (isTemplateString(val)) {
       effect(() => {
-        el[key] = evaluateTemplate(val, state);
+        write(evaluateTemplate(val, state));
       });
     } else {
-      el[key] = val;
+      write(val);
     }
   }
   applyStyle(el, def.style ?? {}, state["$media"] ?? {}, state);
@@ -4980,101 +5328,94 @@ function substitutePreviewProps(renderDoc, props) {
   return { ...renderDoc, state };
 }
 
-// ../schema/src/asset-paths.ts
-function normalizeDir(value) {
-  const forward = value.replaceAll("\\", "/");
-  return forward.length > 1 && forward.endsWith("/") ? forward.slice(0, -1) : forward;
-}
-function normalizeAssetPrefix(prefix) {
-  const forward = normalizeDir(prefix);
-  return forward.startsWith("/") ? forward : `/${forward}`;
-}
-function bySpecificity(mounts, key) {
-  return [...mounts].toSorted((a, b) => b[key].length - a[key].length);
-}
-function isUnder(path, dir) {
-  return path === dir || path.startsWith(`${dir}/`);
-}
-function assetUrlFor(mounts, absolutePath) {
-  const path = normalizeDir(absolutePath);
-  for (const mount of bySpecificity(mounts, "dir")) {
-    const dir = normalizeDir(mount.dir);
-    if (!isUnder(path, dir) || path === dir) {
-      continue;
-    }
-    const rest = path.slice(dir.length + 1);
-    const encoded = rest.split("/").map((segment) => encodeURIComponent(segment)).join("/");
-    return `${normalizeAssetPrefix(mount.urlPrefix)}/${encoded}`;
-  }
-  return null;
-}
-var URL_TERMINATOR = String.raw`"'\s<>()\\`;
-
-// src/canvas/content-assets.ts
-var ASSET_KEYS = ["src", "poster"];
+// src/canvas/asset-resolve.ts
 var SAFE_TYPE_NAME = /^[\w.~-]+$/;
 var SECTION_KEY = "content";
-function isNonRelativeRef(value) {
-  return value === "" || value.startsWith("/") || value.startsWith("#") || value.includes("${") || /^[a-z][\w+.-]*:/i.test(value);
-}
-function normalizeSource(source) {
-  return source.replaceAll("\\", "/").replace(/^\.\//, "").replace(/\/+$/, "");
-}
-function resolveRelativePath(dir, ref3) {
-  const segments = dir === "" || dir === "." ? [] : dir.replaceAll("\\", "/").split("/");
-  const out = segments.filter((s) => s !== "" && s !== ".");
-  for (const segment of ref3.replaceAll("\\", "/").split("/")) {
-    if (segment === "" || segment === ".") {
-      continue;
-    }
-    if (segment === "..") {
-      if (out.length === 0) {
-        return null;
-      }
-      out.pop();
-      continue;
-    }
-    out.push(segment);
-  }
-  return out.join("/");
-}
-function dirOf(path) {
-  const normalized = path.replaceAll("\\", "/");
-  const slash = normalized.lastIndexOf("/");
-  return slash === -1 ? "" : normalized.slice(0, slash);
-}
-function contentMountFor(documentPath, content) {
+var LOCALE_PLACEHOLDER = "{locale}";
+function contentMountFor(documentPath, content, locales = []) {
   if (!documentPath || !content) {
     return null;
   }
   const path = documentPath.replaceAll("\\", "/").replace(/^\.\//, "");
   let best = null;
+  const consider = (dir, urlPrefix) => {
+    if (path.startsWith(`${dir}/`) && (!best || dir.length > best.dir.length)) {
+      best = { dir, urlPrefix };
+    }
+  };
   for (const [name, def] of Object.entries(content)) {
     if (!def?.source || !SAFE_TYPE_NAME.test(name)) {
       continue;
     }
     const dir = normalizeSource(def.source);
-    if (dir === "" || dir.startsWith("..") || /\.[a-z0-9]+$/i.test(dir)) {
+    if (dir === "" || dir.startsWith("..")) {
       continue;
     }
-    if (path.startsWith(`${dir}/`) && (!best || dir.length > best.dir.length)) {
-      best = { dir, urlPrefix: `/${SECTION_KEY}/${name}` };
+    if (dir.includes(LOCALE_PLACEHOLDER)) {
+      const mount = localeMountFor(path, dir, name, locales);
+      if (mount) {
+        consider(mount.dir, mount.urlPrefix);
+      }
+      continue;
+    }
+    if (/\.[a-z0-9]+$/i.test(dir)) {
+      continue;
     }
+    consider(dir, `/${SECTION_KEY}/${name}`);
   }
   return best;
 }
+function localeMountFor(path, source, name, locales) {
+  const cut = source.indexOf(LOCALE_PLACEHOLDER);
+  const head = source.slice(0, cut);
+  const tail = source.slice(cut + LOCALE_PLACEHOLDER.length);
+  if (!path.startsWith(head)) {
+    return null;
+  }
+  const segment = path.slice(head.length).split("/")[0] ?? "";
+  if (segment === "" || !SAFE_TYPE_NAME.test(segment)) {
+    return null;
+  }
+  const canonical = locales.find((tag) => tag.toLowerCase() === segment.toLowerCase());
+  if (canonical === undefined || !SAFE_TYPE_NAME.test(canonical)) {
+    return null;
+  }
+  const dir = `${head}${segment}${tail}`.replace(/\/+$/, "");
+  return { dir, urlPrefix: `/${SECTION_KEY}/${name}/${canonical}` };
+}
+function normalizeSource(source) {
+  return source.replaceAll("\\", "/").replace(/^\.\//, "").replace(/\/+$/, "");
+}
+function resolveAssetRef(value, ctx) {
+  if (!ctx || value === "") {
+    return null;
+  }
+  if (ctx.space === "repo") {
+    if (!ctx.fileBaseUrl) {
+      return null;
+    }
+    const path = projectPathForRef(value, ctx.documentDir, ctx.mounts, ctx.lanes);
+    if (path === null) {
+      return null;
+    }
+    const { suffix } = splitRefSuffix(value);
+    return `${ctx.fileBaseUrl}${encodeProjectPath(path)}${suffix}`;
+  }
+  const [mount] = ctx.mounts;
+  return mount ? mountedRefFor(value, ctx.documentDir, mount) : null;
+}
 function mountedRefFor(value, entryDir, mount) {
   if (isNonRelativeRef(value)) {
     return null;
   }
-  const bare = value.split("#")[0].split("?")[0];
+  const { path: bare, suffix } = splitRefSuffix(value);
   let decoded;
   try {
     decoded = decodeURIComponent(bare);
   } catch {
     return null;
   }
-  const target = resolveRelativePath(entryDir, decoded);
+  const target = joinProjectPath(entryDir, decoded);
   if (target === null) {
     return null;
   }
@@ -5082,76 +5423,39 @@ function mountedRefFor(value, entryDir, mount) {
   if (!url) {
     return null;
   }
-  return `${url}${value.slice(bare.length)}`;
-}
-function rewriteNode(node, entryDir, mount) {
-  const record = node;
-  let patch = null;
-  for (const key of ASSET_KEYS) {
-    const value = record[key];
-    if (typeof value === "string") {
-      const rewritten = mountedRefFor(value, entryDir, mount);
-      if (rewritten) {
-        patch ??= {};
-        patch[key] = rewritten;
-      }
-    }
-  }
-  const attributes = record.attributes;
-  if (attributes) {
-    let nextAttrs = null;
-    for (const key of ASSET_KEYS) {
-      const value = attributes[key];
-      if (typeof value === "string") {
-        const rewritten = mountedRefFor(value, entryDir, mount);
-        if (rewritten) {
-          nextAttrs ??= { ...attributes };
-          nextAttrs[key] = rewritten;
-        }
-      }
-    }
-    if (nextAttrs) {
-      patch ??= {};
-      patch.attributes = nextAttrs;
-    }
-  }
-  const children = record.children;
-  if (Array.isArray(children)) {
-    let nextChildren = null;
-    for (const [i, child] of children.entries()) {
-      if (!child || typeof child !== "object") {
-        continue;
-      }
-      const rewrittenChild = rewriteNode(child, entryDir, mount);
-      if (rewrittenChild !== child) {
-        nextChildren ??= [...children];
-        nextChildren[i] = rewrittenChild;
-      }
-    }
-    if (nextChildren) {
-      patch ??= {};
-      patch.children = nextChildren;
-    }
-  }
-  return patch ? { ...node, ...patch } : node;
+  return `${url}${suffix}`;
 }
-function rewriteContentAssets(doc, documentPath, content) {
-  const mount = contentMountFor(documentPath, content);
-  if (!mount) {
-    return doc;
+
+// src/canvas/asset-refs.ts
+function projectLocales() {
+  return resolveI18n(projectState?.projectConfig ?? {}).i18n?.locales ?? [];
+}
+function assetContextFor(documentPath, over) {
+  const space = over?.space ?? "site";
+  const mount = contentMountFor(documentPath, projectState?.projectConfig?.content, projectLocales());
+  if (space === "site" && !mount) {
+    return null;
   }
-  return rewriteNode(doc, dirOf(documentPath.replaceAll("\\", "/").replace(/^\.\//, "")), mount);
+  return {
+    documentDir: dirOfPath(documentPath ?? ""),
+    ...over?.fileBaseUrl === undefined ? {} : { fileBaseUrl: over.fileBaseUrl },
+    lanes: BUILD_LANES,
+    mounts: mount ? [mount] : [],
+    space
+  };
 }
 function previewAssetSrc(value) {
   if (!value) {
     return value;
   }
-  const documentPath = activeTab.value?.documentPath;
-  const mount = contentMountFor(documentPath, projectState?.projectConfig?.content);
-  if (!mount) {
-    return value;
-  }
-  return mountedRefFor(value, dirOf(documentPath), mount) ?? value;
+  const ctx = assetContextFor(activeTab.value?.documentPath, hostAssetDeclarations());
+  return loopbackAssetSrc(resolveAssetRef(value, ctx) ?? value);
+}
+function hostAssetDeclarations() {
+  return {
+    fileBaseUrl: documentBase(projectState?.projectRoot),
+    ...hasPlatform() ? { space: getPlatform().assetSpace } : {}
+  };
 }
 
 // src/canvas/canvas-live-render.ts
@@ -5221,7 +5525,12 @@ async function resolveCanvasDocument(doc, tab) {
       }
     }
   }
-  const docBase = S.documentPath ? new URL(S.documentPath, documentBase(projectState?.projectRoot)).href : undefined;
+  const fileBase = documentBase(projectState?.projectRoot);
+  const docBase = S.documentPath ? new URL(S.documentPath, fileBase).href : undefined;
+  const assets = assetContextFor(S.documentPath, {
+    fileBaseUrl: fileBase,
+    ...hasPlatform() ? { space: getPlatform().assetSpace } : {}
+  });
   if (isPage && tab) {
     const { previewParams } = tab.session.ui;
     if (previewParams && Object.keys(previewParams).length > 0) {
@@ -5236,7 +5545,6 @@ async function resolveCanvasDocument(doc, tab) {
       renderDoc = substitutePreviewProps(renderDoc, previewProps);
     }
   }
-  renderDoc = rewriteContentAssets(renderDoc, S.documentPath, projectState?.projectConfig?.content);
   const arrayPaths = new Set;
   if (canvasMode === "design" || canvasMode === "edit") {
     (function findArrayPaths(node, path) {
@@ -5320,6 +5628,7 @@ async function resolveCanvasDocument(doc, tab) {
     renderDoc.$head = head;
   }
   return {
+    assets,
     docBase,
     mapperCtx: {
       arrayPaths: [...arrayPaths],
@@ -7375,6 +7684,7 @@ function preparePassRender(gen, doc, tabId, viewTab, paneId) {
     const formatElements = formatByName(renderTab?.doc.sourceFormat)?.studio?.elements;
     const editableTags = formatElements ? formatEditableVerdicts(formatElements) : undefined;
     return {
+      assets: resolved.assets,
       doc: cloneableDoc,
       docBase: resolved.docBase ?? `${canvasBaseOrigin()}/`,
       mapperCtx: resolved.mapperCtx,
@@ -7421,6 +7731,7 @@ function mountStylebookCanvas(gen, generated, canvasEl, widthPx) {
   const cloneableDoc = JSON.parse(JSON.stringify(generated.doc));
   const cloneableShadow = JSON.parse(JSON.stringify(generated.doc));
   const message = {
+    assets: null,
     colorScheme: schemeWireFor(tabOfContainer(canvasEl)),
     doc: cloneableDoc,
     docBase: `${canvasBaseOrigin()}/`,
@@ -7613,7 +7924,7 @@ function openPageAction(label = "Open a page…") {
   return {
     label,
     run: () => {
-      import("./quick-search-9avyc4pc.js").then((m) => {
+      import("./quick-search-cgfmjwq5.js").then((m) => {
         m.openQuickSearch();
       });
     }
@@ -7677,6 +7988,7 @@ var PLACEMENTS = [
   "blockbar",
   "blockbar/format",
   "outline/row",
+  "settings/menu",
   "palette",
   "never"
 ];
@@ -7703,6 +8015,10 @@ var PLACEMENT_MATRIX = {
     note: "the bar's inline-format cluster — a range inside the selection is still the selection"
   },
   "outline/row": { admits: ["selection"], note: "row actions act on the row's node" },
+  "settings/menu": {
+    admits: ["application", "project"],
+    note: "the rail foot's gear menu — the settings family. It is a MENU, not a pinned slot, so it " + "may host two levels for the reason commandbar/overflow does: a menu prints each row's own " + "name, chord and gate, and draws a divider where the level changes. The rail's PINNED " + "groups stay single-level, in PANEL_PLACEMENT_MATRIX"
+  },
   palette: {
     admits: ["application", "project", "document", "selection"],
     note: "the level-agnostic surface; it groups rows by level"
@@ -7883,7 +8199,7 @@ function railPanelSet() {
   return RAIL_GROUP_LEVELS.flatMap(({ level }) => railable.filter((panel) => panel.level === level));
 }
 
-export { KEY_SCOPES, CATEGORIES, checkRecordPlacements, intlHelpersClause, PURE_METHOD_OPS, BLESSED_OPERATORS, BLESSED_GLOBALS, isMutating, evaluateExpression, rectOf, loopbackAssetSrc, getPreviewNavigateHandler, activeCanvasSurface, tabOfPane, derivationOfPane, surfacesShowingTab, canvasModeOfTab, canvasModeOfPane, activeMediaOfPane, paneOfContainer, tabOfContainer, dynamicRouteParams, documentUrlPattern, pagePathsDef, invalidateParamValues, loadParamValues, isComponentDoc, componentPropEntries, contentMountFor, previewAssetSrc, SPAN_FULL_RENDER, SPAN_MOUNT_CANVAS, SPAN_PATCH_BATCH, canvasPerf, recordEscalation, timeSpan, timeSpanAsync, mediaDisplayName, defaultDef, parentCursorToIframe, serializeJxPath, elements_meta_default, getInlineActions, isInlineElement, isEditing, bubbleInlinePath, stageZoom, canvasPanelTemplate, observeCenterUntilStable, applyTransform, applyEditZoom, setEditZoom, requestEditZoom, fitToScreen, getFit, setFit, markExplicitZoom, setUserZoom, fitOnCanvasEntry, resetZoom, panToElement, canvasBaseViewsFor, canvasBaseViewOf, previewStateOf, setCanvasView, registerCanvasViewCommands, updateActivePanelHeaders, setDragGhost, moveDragGhost, clearDragGhost, disableNativeDragPreview, attachInstruction, extractInstruction, hasElement, enableElement, disableElement, removePackageElements, removeElementRef, setSkipServerFunctions, runScoped, buildScope, renderNode, pureSchemeOf, renderComponentPreview, registerLayersDnD, registerComponentsDnD, registerElementsDnD, applyDropInstruction, sawIframeDragOver, allowAutoRequestsOnNextRender, requestCanvasEval, flushCanvasEdits, liveDragHostAt, beginDragSession, currentDragSession, hostDragGeometry, canvasIdleBlockers, canvasPointAt, revealCanvasPath, adoptCanvasPreviewMode, postDragMessage, endDragSession, clearDropIndicator, setNativeDragEnterHandler, setInsertZoneClickHandler, setFileDropHandler, setCanvasSlashHandler, setCanvasContextMenuHandler, setStylebookHitHandler, isCaretActive, setToolbarRefresh, setCanvasPointerDownHandler, setIframePatchEscalation, postPatchToHosts, dragHostTab, releaseCanvasHosts, mountIframeCanvas, mountStylebookCanvas, postColorSchemeToLiveHosts, postLocaleToLiveHosts, postSiteStyleToLiveHosts, postStyleUpdateToStylebookHosts, panToStylebookTag, getEditSnapshot, setKeymapSource, postApplyFormat, postOpenSlash, commitActiveEditSession, getEditBarAnchorRect, clickAnythingTo, staleSelectionMessage, openPageAction, renderEmptyState, panelContext, registerPanel, getPanel, listPanels, isPanelVisible, railGroups, railPanelSet };
+export { LEVELS, KEY_SCOPES, CATEGORIES, checkRecordPlacements, intlHelpersClause, PURE_METHOD_OPS, BLESSED_OPERATORS, BLESSED_GLOBALS, isMutating, evaluateExpression, rectOf, loopbackAssetSrc, getPreviewNavigateHandler, activeCanvasSurface, tabOfPane, derivationOfPane, surfacesShowingTab, canvasModeOfTab, canvasModeOfPane, activeMediaOfPane, paneOfContainer, tabOfContainer, documentUrlPattern, dynamicRouteParams, pagePathsDef, invalidateParamValues, loadParamValues, isComponentDoc, componentPropEntries, PUBLIC_DIR, normalizeProjectPath, encodeProjectPath, contentMountFor, resolveAssetRef, projectLocales, assetContextFor, previewAssetSrc, hostAssetDeclarations, SPAN_FULL_RENDER, SPAN_MOUNT_CANVAS, SPAN_PATCH_BATCH, canvasPerf, recordEscalation, timeSpan, timeSpanAsync, mediaDisplayName, defaultDef, parentCursorToIframe, serializeJxPath, elements_meta_default, getInlineActions, isInlineElement, isEditing, bubbleInlinePath, stageZoom, canvasPanelTemplate, observeCenterUntilStable, applyTransform, applyEditZoom, setEditZoom, requestEditZoom, fitToScreen, getFit, setFit, markExplicitZoom, setUserZoom, fitOnCanvasEntry, resetZoom, panToElement, canvasBaseViewsFor, canvasBaseViewOf, previewStateOf, setCanvasView, registerCanvasViewCommands, updateActivePanelHeaders, setDragGhost, moveDragGhost, clearDragGhost, disableNativeDragPreview, attachInstruction, extractInstruction, hasElement, enableElement, disableElement, removePackageElements, removeElementRef, setSkipServerFunctions, runScoped, setCanvasAssetResolver, buildScope, renderNode, pureSchemeOf, renderComponentPreview, registerLayersDnD, registerComponentsDnD, registerElementsDnD, applyDropInstruction, sawIframeDragOver, allowAutoRequestsOnNextRender, requestCanvasEval, flushCanvasEdits, liveDragHostAt, beginDragSession, currentDragSession, hostDragGeometry, canvasIdleBlockers, canvasPointAt, revealCanvasPath, adoptCanvasPreviewMode, postDragMessage, endDragSession, clearDropIndicator, setNativeDragEnterHandler, setInsertZoneClickHandler, setFileDropHandler, setCanvasSlashHandler, setCanvasContextMenuHandler, setStylebookHitHandler, isCaretActive, setToolbarRefresh, setCanvasPointerDownHandler, setIframePatchEscalation, postPatchToHosts, dragHostTab, releaseCanvasHosts, mountIframeCanvas, mountStylebookCanvas, postColorSchemeToLiveHosts, postLocaleToLiveHosts, postSiteStyleToLiveHosts, postStyleUpdateToStylebookHosts, panToStylebookTag, getEditSnapshot, setKeymapSource, postApplyFormat, postOpenSlash, commitActiveEditSession, getEditBarAnchorRect, clickAnythingTo, staleSelectionMessage, openPageAction, renderEmptyState, panelContext, registerPanel, getPanel, listPanels, isPanelVisible, railGroups, railPanelSet };
 
-//# debugId=CD43D5D53F29ABBB64756E2164756E21
-//# sourceMappingURL=studio-pyrw8h0w.js.map
+//# debugId=124567CCB82F091564756E2164756E21
+//# sourceMappingURL=studio-kjjsjak4.js.map