@jxsuite/studio 1.1.0 → 1.2.0

package/dist/iframe-entry.js

@@ -2626,11 +2626,21 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (key === "@--") {
       continue;
     }
-    const atRule = key.startsWith("@--") ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}` : key.startsWith("@(") ? `@media ${key.slice(1)}` : key;
+    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.startsWith("@(") ? key.slice(1) : null;
+    const atRule = query === null ? key : `@media ${query}`;
     const scope = `[data-jx="${uid}"]`;
-    css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
+    const scheme = query === null ? null : pureSchemeOf(query);
+    if (scheme) {
+      const { auto, forced } = schemeSelectors(scope, scheme);
+      css += `${atRule} { ${auto} { ${toCSSText(rules)} } }
 `;
-    emitMediaNested(atRule, scope, rules);
+      emitMediaNested(atRule, auto, rules);
+      emitNested(forced, rules);
+    } else {
+      css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
+`;
+      emitMediaNested(atRule, scope, rules);
+    }
   }
   const tag = document.createElement("style");
   tag.textContent = css;
@@ -3318,6 +3328,23 @@ function camelToKebab(s) {
 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("; ");
 }
+var COLOR_SCHEME_ATTR = "data-color-scheme";
+function pureSchemeOf(query) {
+  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
+  return m?.[1] ?? null;
+}
+function schemeSelectors(selector, scheme) {
+  if (selector === ":root" || selector === "html") {
+    return {
+      auto: `${selector}:where(:not([${COLOR_SCHEME_ATTR}]))`,
+      forced: `${selector}:where([${COLOR_SCHEME_ATTR}="${scheme}"])`
+    };
+  }
+  return {
+    auto: `:where(:root:not([${COLOR_SCHEME_ATTR}])) ${selector}`,
+    forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
+  };
+}
 var _rootMedia = {};
 var _elementDefs = new Map;
 function setRootMedia(map) {
@@ -3573,6 +3600,86 @@ function parseJxPath(serialized) {
   return JSON.parse(serialized);
 }
 
+// src/canvas/site-style-css.ts
+var SITE_STYLE_ID = "jx-site-style";
+function toDecls(props, transpose) {
+  return Object.entries(props).map(([key, value]) => `${camelToKebab(key)}: ${transpose(String(value))}`).join("; ");
+}
+function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
+  const rules = [];
+  const rootProps = {};
+  const bodyProps = {};
+  const condBlocks = [];
+  for (const [key, value] of Object.entries(siteStyle)) {
+    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+      if (key.startsWith("@")) {
+        condBlocks.push([key, value]);
+      }
+      continue;
+    }
+    if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[") || key.startsWith("@")) {
+      continue;
+    }
+    if (key.startsWith("--")) {
+      rootProps[key] = value;
+    } else {
+      bodyProps[key] = value;
+    }
+  }
+  const rootCSS = toDecls(rootProps, transpose);
+  if (rootCSS) {
+    rules.push(`:root { ${rootCSS} }`);
+  }
+  const bodyCSS = toDecls(bodyProps, transpose);
+  if (bodyCSS) {
+    rules.push(`body { ${bodyCSS} }`);
+  }
+  for (const [atKey, block] of condBlocks) {
+    const query = atKey.startsWith("@--") ? mediaQueries[atKey.slice(1)] ?? atKey.slice(1) : atKey.startsWith("@(") ? atKey.slice(1) : null;
+    if (query === null) {
+      continue;
+    }
+    const scheme = pureSchemeOf(query);
+    const emit = (selector, props) => {
+      if (!props) {
+        return;
+      }
+      if (scheme) {
+        const { auto, forced } = schemeSelectors(selector, scheme);
+        rules.push(`@media ${query} { ${auto} { ${props} } }`, `${forced} { ${props} }`);
+      } else {
+        rules.push(`@media ${query} { ${selector} { ${props} } }`);
+      }
+    };
+    const condRoot = {};
+    const condBody = {};
+    const condSubs = [];
+    for (const [k, v] of Object.entries(block)) {
+      if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+        if (!k.startsWith("@")) {
+          condSubs.push([k, v]);
+        }
+        continue;
+      }
+      if (k.startsWith("--")) {
+        condRoot[k] = v;
+      } else {
+        condBody[k] = v;
+      }
+    }
+    emit(":root", toDecls(condRoot, transpose));
+    emit("body", toDecls(condBody, transpose));
+    for (const [sel, sub] of condSubs) {
+      emit(sel, toDecls(sub, transpose));
+    }
+  }
+  if (Object.values(mediaQueries).some((q) => pureSchemeOf(q) !== null)) {
+    rules.push(":root { color-scheme: light dark }");
+  }
+  return rules.join(`
+`);
+}
+
 // src/canvas/iframe-render.ts
 async function registerElements2(doc, docBase) {
   const elements = doc.$elements;
@@ -3772,21 +3879,27 @@ function syncStylebookCss(doc, mode) {
   style.textContent = STYLEBOOK_CSS;
   doc.head.append(style);
 }
-function applySiteStyle(siteStyle) {
+function applySiteStyle(siteStyle, mediaQueries = {}) {
+  const existing = document.head.querySelector(`#${SITE_STYLE_ID}`);
   if (!siteStyle || typeof siteStyle !== "object") {
+    existing?.remove();
     return;
   }
-  const rootStyle = document.documentElement.style;
-  const bodyStyle = document.body.style;
-  for (const [key, value] of Object.entries(siteStyle)) {
-    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-      continue;
-    }
-    if (key.startsWith("--")) {
-      rootStyle.setProperty(key, transposeCanvasUnits(String(value)));
-    } else {
-      bodyStyle[key] = transposeCanvasUnits(String(value));
-    }
+  const css = buildSiteStyleCSS(siteStyle, mediaQueries, transposeCanvasUnits);
+  if (existing) {
+    existing.textContent = css;
+    return;
+  }
+  const tag = document.createElement("style");
+  tag.id = SITE_STYLE_ID;
+  tag.textContent = css;
+  document.head.append(tag);
+}
+function applyPreviewColorScheme(doc, scheme) {
+  if (scheme) {
+    doc.documentElement.dataset.colorScheme = scheme;
+  } else {
+    delete doc.documentElement.dataset.colorScheme;
   }
 }
 function injectHead(doc) {
@@ -3868,7 +3981,7 @@ async function renderResolvedDocument(opts) {
   setCanvasViewportTranspose(true);
   setCanvasDelinkAnchors(opts.mode !== "preview");
   setStampPropBindings(opts.mode === "design" || opts.mode === "edit");
-  applySiteStyle(opts.siteStyle);
+  applySiteStyle(opts.siteStyle, opts.doc.$media ?? {});
   injectHead(opts.doc);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
   syncStylebookCss(opts.container.ownerDocument, opts.mode);
@@ -6718,9 +6831,18 @@ function startCanvasIframe(opts) {
       clearIframeDrag();
       return;
     }
+    if (msg.kind === "setColorScheme") {
+      applyPreviewColorScheme(container.ownerDocument, msg.scheme);
+      return;
+    }
+    if (msg.kind === "siteStyleUpdate") {
+      applySiteStyle(msg.siteStyle, msg.media);
+      return;
+    }
     if (msg.kind !== "render" || msg.gen < latestGen) {
       return;
     }
+    applyPreviewColorScheme(container.ownerDocument, msg.colorScheme ?? null);
     if (isEditing()) {
       stopEditing();
     }
@@ -6816,5 +6938,5 @@ export {
   bootCanvasIframe
 };
 
-//# debugId=861006CEFE04044264756E2164756E21
+//# debugId=4938332B50832C2764756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map