@cube-drone/marquee-html-renderer 0.6.1 → 0.7.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Profile } from "./profile.ts";
-export { render, escapeText, escapeAttr, FONTS, usedFontTokens } from "./render.ts";
+export { render, escapeText, escapeAttr, FONTS, usedFontTokens, containerLook } from "./render.ts";
 export { bareWebProfile } from "./profile.ts";
 export type { EmojiResolution, Profile, MediaResolution, TurbolinkLevel } from "./profile.ts";
 /** Parse and render in one step. Throws UnsupportedVersionError for unknown

package/dist/index.js

@@ -6,7 +6,7 @@
 // tap-to-skip) belong to the interactive renderer.
 import { parse } from "@cube-drone/marquee-parser";
 import { render } from "./render.js";
-export { render, escapeText, escapeAttr, FONTS, usedFontTokens } from "./render.js";
+export { render, escapeText, escapeAttr, FONTS, usedFontTokens, containerLook } from "./render.js";
 export { bareWebProfile } from "./profile.js";
 /** Parse and render in one step. Throws UnsupportedVersionError for unknown
  * dialect versions, exactly as the parser does. */

package/dist/render.d.ts

@@ -1,4 +1,4 @@
-import type { Node } from "@cube-drone/marquee-parser";
+import type { Attrs, Node } from "@cube-drone/marquee-parser";
 import { type Profile } from "./profile.ts";
 export declare function render(node: Node, profile?: Profile): string;
 /** The font vocabulary (closed, two tiers): four standard stacks that need
@@ -12,5 +12,15 @@ export declare const FONTS: Record<string, string>;
  * @cube-drone/marquee-fonts (externalFontFaces / inlineFontFaces) to deliver
  * exactly those faces and not one byte more. */
 export declare function usedFontTokens(html: string): string[];
+/** The visual identity a layout container (:::page / :::section) wears -
+ * its scheme/font classes and validated style knobs - as bare class/style
+ * values. For surfaces that paint a container's look onto elements THEY
+ * own instead of rendering the container: the live editor washes it across
+ * the container's source lines. Same gates as rendering, so the two can't
+ * disagree. */
+export declare function containerLook(attrs: Attrs, profile?: Profile): {
+    classes: string;
+    style: string;
+};
 export declare function escapeText(s: string): string;
 export declare function escapeAttr(s: string): string;

package/dist/render.js

@@ -247,7 +247,7 @@ function cssUrl(url) {
  * color, or `tile:<target>` - a tiled background image, resolved through
  * the embedder's media policy exactly as an embed (a background fetch is a
  * fetch): out-of-policy or non-image targets degrade to no background. */
-function styleVars(attrs, profile) {
+function styleVarList(attrs, profile) {
     const vars = [];
     if (isColorValue(attrs["color"])) {
         vars.push(`--mq-color:${attrs["color"]}`);
@@ -264,7 +264,23 @@ function styleVars(attrs, profile) {
     else if (isColorValue(bg)) {
         vars.push(`--mq-bg:${bg}`);
     }
-    return vars.length === 0 ? "" : ` style="${vars.join(";")}"`;
+    return vars.join(";");
+}
+function styleVars(attrs, profile) {
+    const list = styleVarList(attrs, profile);
+    return list === "" ? "" : ` style="${list}"`;
+}
+/** The visual identity a layout container (:::page / :::section) wears -
+ * its scheme/font classes and validated style knobs - as bare class/style
+ * values. For surfaces that paint a container's look onto elements THEY
+ * own instead of rendering the container: the live editor washes it across
+ * the container's source lines. Same gates as rendering, so the two can't
+ * disagree. */
+export function containerLook(attrs, profile = bareWebProfile) {
+    return {
+        classes: `${schemeClass(attrs)}${fontClass(attrs)}`.trim(),
+        style: styleVarList(attrs, profile),
+    };
 }
 function schemeClass(attrs) {
     return isToken(attrs["scheme"]) ? ` mq-scheme-${attrs["scheme"]}` : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-drone/marquee-html-renderer",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Reference static HTML renderer for the Marquee markup language",
   "license": "MPL-2.0",
   "repository": {
@@ -35,12 +35,12 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@cube-drone/marquee-parser": "^0.6.1"
+    "@cube-drone/marquee-parser": "^0.7.0"
   },
   "devDependencies": {
-    "@cube-drone/marquee-css": "^0.6.1",
-    "@cube-drone/marquee-fonts": "^0.6.1",
-    "@cube-drone/marquee-turbolink": "^0.6.1",
+    "@cube-drone/marquee-css": "^0.7.0",
+    "@cube-drone/marquee-fonts": "^0.7.0",
+    "@cube-drone/marquee-turbolink": "^0.7.0",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.0"
   }

package/src/index.ts

@@ -9,7 +9,7 @@ import { parse } from "@cube-drone/marquee-parser";
 import { render } from "./render.ts";
 import type { Profile } from "./profile.ts";
 
-export { render, escapeText, escapeAttr, FONTS, usedFontTokens } from "./render.ts";
+export { render, escapeText, escapeAttr, FONTS, usedFontTokens, containerLook } from "./render.ts";
 export { bareWebProfile } from "./profile.ts";
 export type { EmojiResolution, Profile, MediaResolution, TurbolinkLevel } from "./profile.ts";
 

package/src/render.ts

@@ -279,7 +279,7 @@ function cssUrl(url: string): string {
  * color, or `tile:<target>` - a tiled background image, resolved through
  * the embedder's media policy exactly as an embed (a background fetch is a
  * fetch): out-of-policy or non-image targets degrade to no background. */
-function styleVars(attrs: Attrs, profile: Profile): string {
+function styleVarList(attrs: Attrs, profile: Profile): string {
   const vars: string[] = [];
   if (isColorValue(attrs["color"])) {
     vars.push(`--mq-color:${attrs["color"]}`);
@@ -295,7 +295,25 @@ function styleVars(attrs: Attrs, profile: Profile): string {
   } else if (isColorValue(bg)) {
     vars.push(`--mq-bg:${bg}`);
   }
-  return vars.length === 0 ? "" : ` style="${vars.join(";")}"`;
+  return vars.join(";");
+}
+
+function styleVars(attrs: Attrs, profile: Profile): string {
+  const list = styleVarList(attrs, profile);
+  return list === "" ? "" : ` style="${list}"`;
+}
+
+/** The visual identity a layout container (:::page / :::section) wears -
+ * its scheme/font classes and validated style knobs - as bare class/style
+ * values. For surfaces that paint a container's look onto elements THEY
+ * own instead of rendering the container: the live editor washes it across
+ * the container's source lines. Same gates as rendering, so the two can't
+ * disagree. */
+export function containerLook(attrs: Attrs, profile: Profile = bareWebProfile): { classes: string; style: string } {
+  return {
+    classes: `${schemeClass(attrs)}${fontClass(attrs)}`.trim(),
+    style: styleVarList(attrs, profile),
+  };
 }
 
 function schemeClass(attrs: Attrs): string {