npm - @symbo.ls/brender - Versions diffs - 3.5.0 → 3.5.1 - Mend

@symbo.ls/brender 3.5.0 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/cjs/env.js CHANGED Viewed

@@ -48,6 +48,29 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
     window.scrollTo = () => {
     };
   }
+  const createStorage = () => {
+    const store = {};
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => {
+        store[k] = String(v);
+      },
+      removeItem: (k) => {
+        delete store[k];
+      },
+      clear: () => {
+        for (const k in store) delete store[k];
+      },
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: (i) => Object.keys(store)[i] ?? null
+    };
+  };
+  if (!window.localStorage) window.localStorage = createStorage();
+  if (!window.sessionStorage) window.sessionStorage = createStorage();
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
   globalThis.window = window;
   globalThis.document = document;
   globalThis.Node = window.Node || globalThis.Node;

package/dist/cjs/load.js CHANGED Viewed

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var load_exports = {};
 __export(load_exports, {
@@ -22,15 +32,51 @@ __export(load_exports, {
 });
 module.exports = __toCommonJS(load_exports);
 var import_path = require("path");
-const loadProject = async (projectPath) => {
-  const symbolsDir = (0, import_path.resolve)(projectPath, "symbols");
-  const tryImport = async (modulePath) => {
+var import_fs = require("fs");
+var import_os = require("os");
+var import_crypto = require("crypto");
+const bundleAndImport = async (entryPath) => {
+  if (!(0, import_fs.existsSync)(entryPath)) return null;
+  let esbuild;
+  try {
+    esbuild = await import("esbuild");
+  } catch {
     try {
-      return await import(modulePath);
+      return await import(entryPath);
     } catch {
       return null;
     }
-  };
+  }
+  const outFile = (0, import_path.join)((0, import_os.tmpdir)(), `brender_${(0, import_crypto.randomBytes)(8).toString("hex")}.mjs`);
+  try {
+    await esbuild.build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      outfile: outFile,
+      write: true,
+      logLevel: "silent",
+      // Mark node builtins as external
+      external: ["fs", "path", "os", "crypto", "url", "http", "https", "stream", "util", "events", "buffer", "child_process", "worker_threads", "net", "tls", "dns", "dgram", "zlib", "assert", "querystring", "string_decoder", "readline", "perf_hooks", "async_hooks", "v8", "vm", "cluster", "inspector", "module", "process", "tty"]
+    });
+    const mod = await import(`file://${outFile}`);
+    return mod;
+  } catch {
+    try {
+      return await import(entryPath);
+    } catch {
+      return null;
+    }
+  } finally {
+    try {
+      (0, import_fs.unlinkSync)(outFile);
+    } catch {
+    }
+  }
+};
+const loadProject = async (projectPath) => {
+  const symbolsDir = (0, import_path.resolve)(projectPath, "symbols");
   const [
     appModule,
     stateModule,
@@ -44,17 +90,17 @@ const loadProject = async (projectPath) => {
     designSystemModule,
     filesModule
   ] = await Promise.all([
-    tryImport((0, import_path.join)(symbolsDir, "app.js")),
-    tryImport((0, import_path.join)(symbolsDir, "state.js")),
-    tryImport((0, import_path.join)(symbolsDir, "config.js")),
-    tryImport((0, import_path.join)(symbolsDir, "dependencies.js")),
-    tryImport((0, import_path.join)(symbolsDir, "components", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "snippets", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "pages", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "functions", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "methods", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "designSystem", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "files", "index.js"))
+    bundleAndImport((0, import_path.join)(symbolsDir, "app.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "state.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "config.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "dependencies.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "components", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "snippets", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "pages", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "functions", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "methods", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "designSystem", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "files", "index.js"))
   ]);
   return {
     app: appModule?.default || {},

package/dist/cjs/render.js CHANGED Viewed

@@ -61,7 +61,13 @@ const UIKIT_STUBS = {
   Img: {
     tag: "img",
     attr: {
-      src: (el) => el.props?.src,
+      src: (el) => {
+        let src = el.props?.src;
+        if (typeof src === "string" && src.includes("{{")) {
+          src = el.call("replaceLiteralsWithObjectFields", src, el.state);
+        }
+        return src;
+      },
       alt: (el) => el.props?.alt,
       loading: (el) => el.props?.loading
     }
@@ -127,13 +133,23 @@ const renderElement = async (elementDef, options = {}) => {
   const { window, document } = (0, import_env.createEnv)();
   const body = document.body;
   const { create } = await import("@domql/element");
+  const domqlUtils = await import("@domql/utils");
   const components = { ...UIKIT_STUBS, ...context.components || {} };
+  const utils = {
+    ...domqlUtils,
+    ...context.utils || {},
+    ...context.functions || {}
+  };
   (0, import_keys.resetKeys)();
-  const element = create(elementDef, { node: body }, "root", {
-    context: { document, window, ...context, components }
-  });
+  let element;
+  try {
+    element = create(elementDef, { node: body }, "root", {
+      context: { document, window, ...context, components, utils }
+    });
+  } catch (err) {
+  }
   (0, import_keys.assignKeys)(body);
-  const registry = (0, import_keys.mapKeysToElements)(element);
+  const registry = element ? (0, import_keys.mapKeysToElements)(element) : {};
   const html = body.innerHTML;
   return { html, registry, element };
 };
@@ -198,6 +214,138 @@ ${result.html}
 </html>`;
   return { html, route, brKeyCount: result.brKeyCount };
 };
+const LETTER_TO_INDEX = {
+  U: -6,
+  V: -5,
+  W: -4,
+  X: -3,
+  Y: -2,
+  Z: -1,
+  A: 0,
+  B: 1,
+  C: 2,
+  D: 3,
+  E: 4,
+  F: 5,
+  G: 6,
+  H: 7,
+  I: 8,
+  J: 9,
+  K: 10,
+  L: 11,
+  M: 12,
+  N: 13,
+  O: 14,
+  P: 15
+};
+const SPACING_PROPS = /* @__PURE__ */ new Set([
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingBlock",
+  "paddingInline",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginBlock",
+  "marginInline",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "flexBasis",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "borderWidth",
+  "borderRadius",
+  "outlineWidth",
+  "outlineOffset",
+  "inset",
+  "insetBlock",
+  "insetInline",
+  "boxSize",
+  "round"
+]);
+const resolveSpacingToken = (token, spacingConfig) => {
+  if (!token || typeof token !== "string") return null;
+  if (!spacingConfig) return null;
+  const base = spacingConfig.base || 16;
+  const ratio = spacingConfig.ratio || 1.618;
+  const unit = spacingConfig.unit || "px";
+  const hasSubSequence = spacingConfig.subSequence !== false;
+  if (token.includes(" ")) {
+    const parts = token.split(" ").map((part) => {
+      if (part === "-" || part === "") return part;
+      return resolveSpacingToken(part, spacingConfig) || part;
+    });
+    return parts.join(" ");
+  }
+  if (/^(none|auto|inherit|initial|unset|0)$/i.test(token)) return null;
+  if (/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(token)) return null;
+  if (/^(#|rgb|hsl|var\()/i.test(token)) return null;
+  const isNegative = token.startsWith("-");
+  const abs = isNegative ? token.slice(1) : token;
+  const m = abs.match(/^([A-Z])(\d)?$/i);
+  if (!m) return null;
+  const letter = m[1].toUpperCase();
+  const subStep = m[2] ? parseInt(m[2]) : 0;
+  const idx = LETTER_TO_INDEX[letter];
+  if (idx === void 0) return null;
+  let value = base * Math.pow(ratio, idx);
+  if (subStep > 0 && hasSubSequence) {
+    const next = base * Math.pow(ratio, idx + 1);
+    const diff = next - value;
+    const subRatio = diff / ratio;
+    const first = next - subRatio;
+    const second = value + subRatio;
+    const middle = (first + second) / 2;
+    const subs = ~~next - ~~value > 16 ? [first, middle, second] : [first, second];
+    if (subStep <= subs.length) {
+      value = subs[subStep - 1];
+    }
+  }
+  const rounded = Math.round(value * 100) / 100;
+  const sign = isNegative ? "-" : "";
+  return `${sign}${rounded}${unit}`;
+};
+const SPACING_PROPS_KEBAB = new Set(
+  [...SPACING_PROPS].map((k) => k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()))
+);
+const resolveDSValue = (key, val, ds) => {
+  if (typeof val !== "string") return val;
+  if (CSS_COLOR_PROPS.has(key)) {
+    const colorMap = ds?.color || {};
+    if (colorMap[val]) return colorMap[val];
+  }
+  if (SPACING_PROPS.has(key) || SPACING_PROPS_KEBAB.has(key)) {
+    const spacing = ds?.spacing || {};
+    const resolved = resolveSpacingToken(val, spacing);
+    if (resolved) return resolved;
+  }
+  return val;
+};
 const CSS_COLOR_PROPS = /* @__PURE__ */ new Set([
   "color",
   "background",
@@ -237,7 +385,11 @@ const NON_CSS_PROPS = /* @__PURE__ */ new Set([
   "autofocus",
   "theme",
   "__element",
-  "update"
+  "update",
+  "childrenAs",
+  "childExtends",
+  "childProps",
+  "children"
 ]);
 const camelToKebab = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const resolveShorthand = (key, val) => {
@@ -253,11 +405,15 @@ const resolveShorthand = (key, val) => {
   }
   if ((key === "align" || key === "flexAlign") && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "flex", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "flex", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
   if (key === "gridAlign" && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "grid", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "grid", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
   if (key === "flexFlow" && typeof val === "string") {
     let [direction, wrap] = (val || "row").split(" ");
@@ -268,6 +424,9 @@ const resolveShorthand = (key, val) => {
   if (key === "flexWrap") {
     return { display: "flex", "flex-wrap": val };
   }
+  if (key === "backgroundImage" && typeof val === "string" && !val.startsWith("url(") && !val.startsWith("linear-gradient") && !val.startsWith("radial-gradient") && !val.startsWith("none")) {
+    return { "background-image": `url(${val})` };
+  }
   if (key === "round" || key === "borderRadius" && val) {
     return { "border-radius": typeof val === "number" ? val + "px" : val };
   }
@@ -299,21 +458,23 @@ const resolveShorthand = (key, val) => {
   if (key === "rowStart") return { "grid-row-start": val };
   return null;
 };
-const resolveInnerProps = (obj, colorMap) => {
+const resolveInnerProps = (obj, ds) => {
   const result = {};
   for (const k in obj) {
     const v = obj[k];
     const expanded = resolveShorthand(k, v);
     if (expanded) {
-      Object.assign(result, expanded);
+      for (const ek in expanded) {
+        result[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
     if (typeof v !== "string" && typeof v !== "number") continue;
-    result[camelToKebab(k)] = CSS_COLOR_PROPS.has(k) && colorMap[v] ? colorMap[v] : v;
+    result[camelToKebab(k)] = resolveDSValue(k, v, ds);
   }
   return result;
 };
-const buildCSSFromProps = (props, colorMap, mediaMap) => {
+const buildCSSFromProps = (props, ds, mediaMap) => {
   const base = {};
   const mediaRules = {};
   const pseudoRules = {};
@@ -322,13 +483,13 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (key.charCodeAt(0) === 64 && typeof val === "object") {
       const bp = mediaMap?.[key.slice(1)];
       if (bp) {
-        const inner = resolveInnerProps(val, colorMap);
+        const inner = resolveInnerProps(val, ds);
         if (Object.keys(inner).length) mediaRules[bp] = inner;
       }
       continue;
     }
     if (key.charCodeAt(0) === 58 && typeof val === "object") {
-      const inner = resolveInnerProps(val, colorMap);
+      const inner = resolveInnerProps(val, ds);
       if (Object.keys(inner).length) pseudoRules[key] = inner;
       continue;
     }
@@ -337,10 +498,12 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (NON_CSS_PROPS.has(key)) continue;
     const expanded = resolveShorthand(key, val);
     if (expanded) {
-      Object.assign(base, expanded);
+      for (const ek in expanded) {
+        base[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
-    base[camelToKebab(key)] = CSS_COLOR_PROPS.has(key) && colorMap[val] ? colorMap[val] : val;
+    base[camelToKebab(key)] = resolveDSValue(key, val, ds);
   }
   return { base, mediaRules, pseudoRules };
 };
@@ -376,7 +539,6 @@ const getExtendsCSS = (el) => {
   return null;
 };
 const extractCSS = (element, ds) => {
-  const colorMap = ds?.color || {};
   const mediaMap = ds?.media || {};
   const animations = ds?.animation || {};
   const rules = [];
@@ -389,7 +551,7 @@ const extractCSS = (element, ds) => {
       const cls = el.node.getAttribute?.("class");
       if (cls && !seen.has(cls)) {
         seen.add(cls);
-        const cssResult = buildCSSFromProps(props, colorMap, mediaMap);
+        const cssResult = buildCSSFromProps(props, ds, mediaMap);
         const extsCss = getExtendsCSS(el);
         if (extsCss) {
           for (const [k, v] of Object.entries(extsCss)) {
@@ -430,6 +592,7 @@ const generateResetCSS = (reset) => {
   if (!reset) return "";
   const rules = [];
   for (const [selector, props] of Object.entries(reset)) {
+    if (!props || typeof props !== "object") continue;
     const decls = Object.entries(props).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
     if (decls) rules.push(`${selector} { ${decls}; }`);
   }
@@ -440,6 +603,7 @@ const generateFontLinks = (ds) => {
   const families = ds.font_family || ds.fontFamily || {};
   const fontNames = /* @__PURE__ */ new Set();
   for (const val of Object.values(families)) {
+    if (typeof val !== "string") continue;
     const match = val.match(/'([^']+)'/);
     if (match) fontNames.add(match[1]);
   }

package/dist/esm/env.js CHANGED Viewed

@@ -26,6 +26,29 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
     window.scrollTo = () => {
     };
   }
+  const createStorage = () => {
+    const store = {};
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => {
+        store[k] = String(v);
+      },
+      removeItem: (k) => {
+        delete store[k];
+      },
+      clear: () => {
+        for (const k in store) delete store[k];
+      },
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: (i) => Object.keys(store)[i] ?? null
+    };
+  };
+  if (!window.localStorage) window.localStorage = createStorage();
+  if (!window.sessionStorage) window.sessionStorage = createStorage();
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
   globalThis.window = window;
   globalThis.document = document;
   globalThis.Node = window.Node || globalThis.Node;

package/dist/esm/load.js CHANGED Viewed

@@ -1,13 +1,49 @@
 import { resolve, join } from "path";
-const loadProject = async (projectPath) => {
-  const symbolsDir = resolve(projectPath, "symbols");
-  const tryImport = async (modulePath) => {
+import { existsSync, mkdirSync, writeFileSync, unlinkSync } from "fs";
+import { tmpdir } from "os";
+import { randomBytes } from "crypto";
+const bundleAndImport = async (entryPath) => {
+  if (!existsSync(entryPath)) return null;
+  let esbuild;
+  try {
+    esbuild = await import("esbuild");
+  } catch {
     try {
-      return await import(modulePath);
+      return await import(entryPath);
     } catch {
       return null;
     }
-  };
+  }
+  const outFile = join(tmpdir(), `brender_${randomBytes(8).toString("hex")}.mjs`);
+  try {
+    await esbuild.build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      outfile: outFile,
+      write: true,
+      logLevel: "silent",
+      // Mark node builtins as external
+      external: ["fs", "path", "os", "crypto", "url", "http", "https", "stream", "util", "events", "buffer", "child_process", "worker_threads", "net", "tls", "dns", "dgram", "zlib", "assert", "querystring", "string_decoder", "readline", "perf_hooks", "async_hooks", "v8", "vm", "cluster", "inspector", "module", "process", "tty"]
+    });
+    const mod = await import(`file://${outFile}`);
+    return mod;
+  } catch {
+    try {
+      return await import(entryPath);
+    } catch {
+      return null;
+    }
+  } finally {
+    try {
+      unlinkSync(outFile);
+    } catch {
+    }
+  }
+};
+const loadProject = async (projectPath) => {
+  const symbolsDir = resolve(projectPath, "symbols");
   const [
     appModule,
     stateModule,
@@ -21,17 +57,17 @@ const loadProject = async (projectPath) => {
     designSystemModule,
     filesModule
   ] = await Promise.all([
-    tryImport(join(symbolsDir, "app.js")),
-    tryImport(join(symbolsDir, "state.js")),
-    tryImport(join(symbolsDir, "config.js")),
-    tryImport(join(symbolsDir, "dependencies.js")),
-    tryImport(join(symbolsDir, "components", "index.js")),
-    tryImport(join(symbolsDir, "snippets", "index.js")),
-    tryImport(join(symbolsDir, "pages", "index.js")),
-    tryImport(join(symbolsDir, "functions", "index.js")),
-    tryImport(join(symbolsDir, "methods", "index.js")),
-    tryImport(join(symbolsDir, "designSystem", "index.js")),
-    tryImport(join(symbolsDir, "files", "index.js"))
+    bundleAndImport(join(symbolsDir, "app.js")),
+    bundleAndImport(join(symbolsDir, "state.js")),
+    bundleAndImport(join(symbolsDir, "config.js")),
+    bundleAndImport(join(symbolsDir, "dependencies.js")),
+    bundleAndImport(join(symbolsDir, "components", "index.js")),
+    bundleAndImport(join(symbolsDir, "snippets", "index.js")),
+    bundleAndImport(join(symbolsDir, "pages", "index.js")),
+    bundleAndImport(join(symbolsDir, "functions", "index.js")),
+    bundleAndImport(join(symbolsDir, "methods", "index.js")),
+    bundleAndImport(join(symbolsDir, "designSystem", "index.js")),
+    bundleAndImport(join(symbolsDir, "files", "index.js"))
   ]);
   return {
     app: appModule?.default || {},

package/dist/esm/render.js CHANGED Viewed

@@ -25,7 +25,13 @@ const UIKIT_STUBS = {
   Img: {
     tag: "img",
     attr: {
-      src: (el) => el.props?.src,
+      src: (el) => {
+        let src = el.props?.src;
+        if (typeof src === "string" && src.includes("{{")) {
+          src = el.call("replaceLiteralsWithObjectFields", src, el.state);
+        }
+        return src;
+      },
       alt: (el) => el.props?.alt,
       loading: (el) => el.props?.loading
     }
@@ -91,13 +97,23 @@ const renderElement = async (elementDef, options = {}) => {
   const { window, document } = createEnv();
   const body = document.body;
   const { create } = await import("@domql/element");
+  const domqlUtils = await import("@domql/utils");
   const components = { ...UIKIT_STUBS, ...context.components || {} };
+  const utils = {
+    ...domqlUtils,
+    ...context.utils || {},
+    ...context.functions || {}
+  };
   resetKeys();
-  const element = create(elementDef, { node: body }, "root", {
-    context: { document, window, ...context, components }
-  });
+  let element;
+  try {
+    element = create(elementDef, { node: body }, "root", {
+      context: { document, window, ...context, components, utils }
+    });
+  } catch (err) {
+  }
   assignKeys(body);
-  const registry = mapKeysToElements(element);
+  const registry = element ? mapKeysToElements(element) : {};
   const html = body.innerHTML;
   return { html, registry, element };
 };
@@ -162,6 +178,138 @@ ${result.html}
 </html>`;
   return { html, route, brKeyCount: result.brKeyCount };
 };
+const LETTER_TO_INDEX = {
+  U: -6,
+  V: -5,
+  W: -4,
+  X: -3,
+  Y: -2,
+  Z: -1,
+  A: 0,
+  B: 1,
+  C: 2,
+  D: 3,
+  E: 4,
+  F: 5,
+  G: 6,
+  H: 7,
+  I: 8,
+  J: 9,
+  K: 10,
+  L: 11,
+  M: 12,
+  N: 13,
+  O: 14,
+  P: 15
+};
+const SPACING_PROPS = /* @__PURE__ */ new Set([
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingBlock",
+  "paddingInline",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginBlock",
+  "marginInline",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "flexBasis",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "borderWidth",
+  "borderRadius",
+  "outlineWidth",
+  "outlineOffset",
+  "inset",
+  "insetBlock",
+  "insetInline",
+  "boxSize",
+  "round"
+]);
+const resolveSpacingToken = (token, spacingConfig) => {
+  if (!token || typeof token !== "string") return null;
+  if (!spacingConfig) return null;
+  const base = spacingConfig.base || 16;
+  const ratio = spacingConfig.ratio || 1.618;
+  const unit = spacingConfig.unit || "px";
+  const hasSubSequence = spacingConfig.subSequence !== false;
+  if (token.includes(" ")) {
+    const parts = token.split(" ").map((part) => {
+      if (part === "-" || part === "") return part;
+      return resolveSpacingToken(part, spacingConfig) || part;
+    });
+    return parts.join(" ");
+  }
+  if (/^(none|auto|inherit|initial|unset|0)$/i.test(token)) return null;
+  if (/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(token)) return null;
+  if (/^(#|rgb|hsl|var\()/i.test(token)) return null;
+  const isNegative = token.startsWith("-");
+  const abs = isNegative ? token.slice(1) : token;
+  const m = abs.match(/^([A-Z])(\d)?$/i);
+  if (!m) return null;
+  const letter = m[1].toUpperCase();
+  const subStep = m[2] ? parseInt(m[2]) : 0;
+  const idx = LETTER_TO_INDEX[letter];
+  if (idx === void 0) return null;
+  let value = base * Math.pow(ratio, idx);
+  if (subStep > 0 && hasSubSequence) {
+    const next = base * Math.pow(ratio, idx + 1);
+    const diff = next - value;
+    const subRatio = diff / ratio;
+    const first = next - subRatio;
+    const second = value + subRatio;
+    const middle = (first + second) / 2;
+    const subs = ~~next - ~~value > 16 ? [first, middle, second] : [first, second];
+    if (subStep <= subs.length) {
+      value = subs[subStep - 1];
+    }
+  }
+  const rounded = Math.round(value * 100) / 100;
+  const sign = isNegative ? "-" : "";
+  return `${sign}${rounded}${unit}`;
+};
+const SPACING_PROPS_KEBAB = new Set(
+  [...SPACING_PROPS].map((k) => k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()))
+);
+const resolveDSValue = (key, val, ds) => {
+  if (typeof val !== "string") return val;
+  if (CSS_COLOR_PROPS.has(key)) {
+    const colorMap = ds?.color || {};
+    if (colorMap[val]) return colorMap[val];
+  }
+  if (SPACING_PROPS.has(key) || SPACING_PROPS_KEBAB.has(key)) {
+    const spacing = ds?.spacing || {};
+    const resolved = resolveSpacingToken(val, spacing);
+    if (resolved) return resolved;
+  }
+  return val;
+};
 const CSS_COLOR_PROPS = /* @__PURE__ */ new Set([
   "color",
   "background",
@@ -201,7 +349,11 @@ const NON_CSS_PROPS = /* @__PURE__ */ new Set([
   "autofocus",
   "theme",
   "__element",
-  "update"
+  "update",
+  "childrenAs",
+  "childExtends",
+  "childProps",
+  "children"
 ]);
 const camelToKebab = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const resolveShorthand = (key, val) => {
@@ -217,11 +369,15 @@ const resolveShorthand = (key, val) => {
   }
   if ((key === "align" || key === "flexAlign") && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "flex", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "flex", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
   if (key === "gridAlign" && typeof val === "string") {
     const [alignItems, justifyContent] = val.split(" ");
-    return { display: "grid", "align-items": alignItems, "justify-content": justifyContent };
+    const result = { display: "grid", "align-items": alignItems };
+    if (justifyContent) result["justify-content"] = justifyContent;
+    return result;
   }
   if (key === "flexFlow" && typeof val === "string") {
     let [direction, wrap] = (val || "row").split(" ");
@@ -232,6 +388,9 @@ const resolveShorthand = (key, val) => {
   if (key === "flexWrap") {
     return { display: "flex", "flex-wrap": val };
   }
+  if (key === "backgroundImage" && typeof val === "string" && !val.startsWith("url(") && !val.startsWith("linear-gradient") && !val.startsWith("radial-gradient") && !val.startsWith("none")) {
+    return { "background-image": `url(${val})` };
+  }
   if (key === "round" || key === "borderRadius" && val) {
     return { "border-radius": typeof val === "number" ? val + "px" : val };
   }
@@ -263,21 +422,23 @@ const resolveShorthand = (key, val) => {
   if (key === "rowStart") return { "grid-row-start": val };
   return null;
 };
-const resolveInnerProps = (obj, colorMap) => {
+const resolveInnerProps = (obj, ds) => {
   const result = {};
   for (const k in obj) {
     const v = obj[k];
     const expanded = resolveShorthand(k, v);
     if (expanded) {
-      Object.assign(result, expanded);
+      for (const ek in expanded) {
+        result[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
     if (typeof v !== "string" && typeof v !== "number") continue;
-    result[camelToKebab(k)] = CSS_COLOR_PROPS.has(k) && colorMap[v] ? colorMap[v] : v;
+    result[camelToKebab(k)] = resolveDSValue(k, v, ds);
   }
   return result;
 };
-const buildCSSFromProps = (props, colorMap, mediaMap) => {
+const buildCSSFromProps = (props, ds, mediaMap) => {
   const base = {};
   const mediaRules = {};
   const pseudoRules = {};
@@ -286,13 +447,13 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (key.charCodeAt(0) === 64 && typeof val === "object") {
       const bp = mediaMap?.[key.slice(1)];
       if (bp) {
-        const inner = resolveInnerProps(val, colorMap);
+        const inner = resolveInnerProps(val, ds);
         if (Object.keys(inner).length) mediaRules[bp] = inner;
       }
       continue;
     }
     if (key.charCodeAt(0) === 58 && typeof val === "object") {
-      const inner = resolveInnerProps(val, colorMap);
+      const inner = resolveInnerProps(val, ds);
       if (Object.keys(inner).length) pseudoRules[key] = inner;
       continue;
     }
@@ -301,10 +462,12 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (NON_CSS_PROPS.has(key)) continue;
     const expanded = resolveShorthand(key, val);
     if (expanded) {
-      Object.assign(base, expanded);
+      for (const ek in expanded) {
+        base[ek] = resolveDSValue(ek, expanded[ek], ds);
+      }
       continue;
     }
-    base[camelToKebab(key)] = CSS_COLOR_PROPS.has(key) && colorMap[val] ? colorMap[val] : val;
+    base[camelToKebab(key)] = resolveDSValue(key, val, ds);
   }
   return { base, mediaRules, pseudoRules };
 };
@@ -340,7 +503,6 @@ const getExtendsCSS = (el) => {
   return null;
 };
 const extractCSS = (element, ds) => {
-  const colorMap = ds?.color || {};
   const mediaMap = ds?.media || {};
   const animations = ds?.animation || {};
   const rules = [];
@@ -353,7 +515,7 @@ const extractCSS = (element, ds) => {
       const cls = el.node.getAttribute?.("class");
       if (cls && !seen.has(cls)) {
         seen.add(cls);
-        const cssResult = buildCSSFromProps(props, colorMap, mediaMap);
+        const cssResult = buildCSSFromProps(props, ds, mediaMap);
         const extsCss = getExtendsCSS(el);
         if (extsCss) {
           for (const [k, v] of Object.entries(extsCss)) {
@@ -394,6 +556,7 @@ const generateResetCSS = (reset) => {
   if (!reset) return "";
   const rules = [];
   for (const [selector, props] of Object.entries(reset)) {
+    if (!props || typeof props !== "object") continue;
     const decls = Object.entries(props).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
     if (decls) rules.push(`${selector} { ${decls}; }`);
   }
@@ -404,6 +567,7 @@ const generateFontLinks = (ds) => {
   const families = ds.font_family || ds.fontFamily || {};
   const fontNames = /* @__PURE__ */ new Set();
   for (const val of Object.values(families)) {
+    if (typeof val !== "string") continue;
     const match = val.match(/'([^']+)'/);
     if (match) fontNames.add(match[1]);
   }

package/env.js CHANGED Viewed

@@ -31,6 +31,23 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
     window.scrollTo = () => {}
   }
+  // Storage stubs
+  const createStorage = () => {
+    const store = {}
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => { store[k] = String(v) },
+      removeItem: (k) => { delete store[k] },
+      clear: () => { for (const k in store) delete store[k] },
+      get length () { return Object.keys(store).length },
+      key: (i) => Object.keys(store)[i] ?? null
+    }
+  }
+  if (!window.localStorage) window.localStorage = createStorage()
+  if (!window.sessionStorage) window.sessionStorage = createStorage()
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage
   // Expose linkedom constructors on globalThis so @domql/utils isDOMNode
   // can use instanceof checks (it reads from globalThis.Node, etc.)
   globalThis.window = window

package/load.js CHANGED Viewed

@@ -1,9 +1,56 @@
 import { resolve, join } from 'path'
+import { existsSync, mkdirSync, writeFileSync, unlinkSync } from 'fs'
+import { tmpdir } from 'os'
+import { randomBytes } from 'crypto'
+/**
+ * Bundles a module entry point with esbuild so that extensionless imports,
+ * bare specifiers, and other bundler conventions resolve correctly.
+ * Returns the default + named exports of the bundled module, or null on failure.
+ */
+const bundleAndImport = async (entryPath) => {
+  if (!existsSync(entryPath)) return null
+  let esbuild
+  try {
+    esbuild = await import('esbuild')
+  } catch {
+    // Fallback: try raw import if esbuild is not available
+    try { return await import(entryPath) } catch { return null }
+  }
+  const outFile = join(tmpdir(), `brender_${randomBytes(8).toString('hex')}.mjs`)
+  try {
+    await esbuild.build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: 'esm',
+      platform: 'node',
+      outfile: outFile,
+      write: true,
+      logLevel: 'silent',
+      // Mark node builtins as external
+      external: ['fs', 'path', 'os', 'crypto', 'url', 'http', 'https', 'stream', 'util', 'events', 'buffer', 'child_process', 'worker_threads', 'net', 'tls', 'dns', 'dgram', 'zlib', 'assert', 'querystring', 'string_decoder', 'readline', 'perf_hooks', 'async_hooks', 'v8', 'vm', 'cluster', 'inspector', 'module', 'process', 'tty'],
+    })
+    const mod = await import(`file://${outFile}`)
+    return mod
+  } catch {
+    // Fallback: try raw import
+    try { return await import(entryPath) } catch { return null }
+  } finally {
+    try { unlinkSync(outFile) } catch {}
+  }
+}
 /**
  * Loads a Symbols project from a filesystem path.
  * Expects the standard symbols/ directory structure.
  *
+ * Uses esbuild to bundle each module so that extensionless imports
+ * and other bundler conventions work in Node.js.
+ *
  * Used for prebuild scenarios where brender runs locally
  * against a project directory (e.g. `smbls build --prerender`).
  *
@@ -13,14 +60,6 @@ import { resolve, join } from 'path'
 export const loadProject = async (projectPath) => {
   const symbolsDir = resolve(projectPath, 'symbols')
-  const tryImport = async (modulePath) => {
-    try {
-      return await import(modulePath)
-    } catch {
-      return null
-    }
-  }
   const [
     appModule,
     stateModule,
@@ -34,17 +73,17 @@ export const loadProject = async (projectPath) => {
     designSystemModule,
     filesModule
   ] = await Promise.all([
-    tryImport(join(symbolsDir, 'app.js')),
-    tryImport(join(symbolsDir, 'state.js')),
-    tryImport(join(symbolsDir, 'config.js')),
-    tryImport(join(symbolsDir, 'dependencies.js')),
-    tryImport(join(symbolsDir, 'components', 'index.js')),
-    tryImport(join(symbolsDir, 'snippets', 'index.js')),
-    tryImport(join(symbolsDir, 'pages', 'index.js')),
-    tryImport(join(symbolsDir, 'functions', 'index.js')),
-    tryImport(join(symbolsDir, 'methods', 'index.js')),
-    tryImport(join(symbolsDir, 'designSystem', 'index.js')),
-    tryImport(join(symbolsDir, 'files', 'index.js'))
+    bundleAndImport(join(symbolsDir, 'app.js')),
+    bundleAndImport(join(symbolsDir, 'state.js')),
+    bundleAndImport(join(symbolsDir, 'config.js')),
+    bundleAndImport(join(symbolsDir, 'dependencies.js')),
+    bundleAndImport(join(symbolsDir, 'components', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'snippets', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'pages', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'functions', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'methods', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'designSystem', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'files', 'index.js'))
   ])
   return {

package/package.json CHANGED Viewed

@@ -1,15 +1,15 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
+      "import": "./index.js",
       "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "default": "./index.js"
     },
     "./hydrate": {
       "import": "./hydrate.js",

package/render.js CHANGED Viewed

@@ -29,7 +29,13 @@ const UIKIT_STUBS = {
   Img: {
     tag: 'img',
     attr: {
-      src: (el) => el.props?.src,
+      src: (el) => {
+        let src = el.props?.src
+        if (typeof src === 'string' && src.includes('{{')) {
+          src = el.call('replaceLiteralsWithObjectFields', src, el.state)
+        }
+        return src
+      },
       alt: (el) => el.props?.alt,
       loading: (el) => el.props?.loading
     }
@@ -141,19 +147,35 @@ export const renderElement = async (elementDef, options = {}) => {
   const body = document.body
   const { create } = await import('@domql/element')
+  const domqlUtils = await import('@domql/utils')
   // Merge minimal uikit stubs so DOMQL resolves extends chains
   // (e.g. extends: 'Link' → tag: 'a', extends: 'Flex' → display: flex)
   const components = { ...UIKIT_STUBS, ...(context.components || {}) }
+  // Register utility functions so element.call() can resolve them
+  // (e.g. replaceLiteralsWithObjectFields for {{ }} templates)
+  const utils = {
+    ...domqlUtils,
+    ...(context.utils || {}),
+    ...(context.functions || {})
+  }
   resetKeys()
-  const element = create(elementDef, { node: body }, 'root', {
-    context: { document, window, ...context, components }
-  })
+  let element
+  try {
+    element = create(elementDef, { node: body }, 'root', {
+      context: { document, window, ...context, components, utils }
+    })
+  } catch (err) {
+    // Lifecycle events (onRender, onDone, etc.) may throw in SSR
+    // because they access browser-only APIs. The DOM tree is built
+    // before these fire, so we can still extract HTML.
+  }
   assignKeys(body)
-  const registry = mapKeysToElements(element)
+  const registry = element ? mapKeysToElements(element) : {}
   const html = body.innerHTML
   return { html, registry, element }
@@ -255,6 +277,120 @@ ${result.html}
   return { html, route, brKeyCount: result.brKeyCount }
 }
+// ── Design system token resolution ──────────────────────────────────────────
+const LETTER_TO_INDEX = {
+  U: -6, V: -5, W: -4, X: -3, Y: -2, Z: -1,
+  A: 0, B: 1, C: 2, D: 3, E: 4, F: 5, G: 6, H: 7, I: 8, J: 9,
+  K: 10, L: 11, M: 12, N: 13, O: 14, P: 15
+}
+const SPACING_PROPS = new Set([
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+  'paddingBlock', 'paddingInline', 'paddingBlockStart', 'paddingBlockEnd',
+  'paddingInlineStart', 'paddingInlineEnd',
+  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+  'marginBlock', 'marginInline', 'marginBlockStart', 'marginBlockEnd',
+  'marginInlineStart', 'marginInlineEnd',
+  'gap', 'rowGap', 'columnGap',
+  'top', 'right', 'bottom', 'left',
+  'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight',
+  'flexBasis', 'fontSize', 'lineHeight', 'letterSpacing',
+  'borderWidth', 'borderRadius', 'outlineWidth', 'outlineOffset',
+  'inset', 'insetBlock', 'insetInline',
+  'boxSize', 'round'
+])
+/**
+ * Resolves a spacing token like 'B2', 'A', 'E3' to a px/em value.
+ * Uses base * ratio^index for main steps (A=0, B=1, etc.)
+ * and sub-ratio interpolation for sub-steps (B1, B2, B3).
+ */
+const resolveSpacingToken = (token, spacingConfig) => {
+  if (!token || typeof token !== 'string') return null
+  if (!spacingConfig) return null
+  const base = spacingConfig.base || 16
+  const ratio = spacingConfig.ratio || 1.618
+  const unit = spacingConfig.unit || 'px'
+  const hasSubSequence = spacingConfig.subSequence !== false
+  // Handle compound values like 'B2 - -' or 'A1 B C1'
+  if (token.includes(' ')) {
+    const parts = token.split(' ').map(part => {
+      if (part === '-' || part === '') return part
+      return resolveSpacingToken(part, spacingConfig) || part
+    })
+    return parts.join(' ')
+  }
+  // Skip CSS keywords and values with units
+  if (/^(none|auto|inherit|initial|unset|0)$/i.test(token)) return null
+  if (/\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|fr|s|ms)$/i.test(token)) return null
+  // Skip hex colors, rgb(), etc.
+  if (/^(#|rgb|hsl|var\()/i.test(token)) return null
+  const isNegative = token.startsWith('-')
+  const abs = isNegative ? token.slice(1) : token
+  // Match letter + optional digit: A, B, B2, E3, etc.
+  const m = abs.match(/^([A-Z])(\d)?$/i)
+  if (!m) return null
+  const letter = m[1].toUpperCase()
+  const subStep = m[2] ? parseInt(m[2]) : 0
+  const idx = LETTER_TO_INDEX[letter]
+  if (idx === undefined) return null
+  let value = base * Math.pow(ratio, idx)
+  if (subStep > 0 && hasSubSequence) {
+    const next = base * Math.pow(ratio, idx + 1)
+    const diff = next - value
+    const subRatio = diff / ratio
+    // Sub-steps: 1 = value + (diff - subRatio), 2 = midpoint, 3 = value + subRatio
+    const first = next - subRatio
+    const second = value + subRatio
+    const middle = (first + second) / 2
+    const subs = (~~next - ~~value > 16) ? [first, middle, second] : [first, second]
+    if (subStep <= subs.length) {
+      value = subs[subStep - 1]
+    }
+  }
+  const rounded = Math.round(value * 100) / 100
+  const sign = isNegative ? '-' : ''
+  return `${sign}${rounded}${unit}`
+}
+// Kebab-case versions of spacing props for post-shorthand resolution
+const SPACING_PROPS_KEBAB = new Set(
+  [...SPACING_PROPS].map(k => k.replace(/[A-Z]/g, m => '-' + m.toLowerCase()))
+)
+/**
+ * Try to resolve a CSS value through the design system.
+ * Returns the resolved value or the original if not a token.
+ */
+const resolveDSValue = (key, val, ds) => {
+  if (typeof val !== 'string') return val
+  // Color resolution
+  if (CSS_COLOR_PROPS.has(key)) {
+    const colorMap = ds?.color || {}
+    if (colorMap[val]) return colorMap[val]
+  }
+  // Spacing resolution (check both camelCase and kebab-case keys)
+  if (SPACING_PROPS.has(key) || SPACING_PROPS_KEBAB.has(key)) {
+    const spacing = ds?.spacing || {}
+    const resolved = resolveSpacingToken(val, spacing)
+    if (resolved) return resolved
+  }
+  return val
+}
 // ── CSS helpers ─────────────────────────────────────────────────────────────
 const CSS_COLOR_PROPS = new Set([
@@ -267,7 +403,8 @@ const NON_CSS_PROPS = new Set([
   'href', 'src', 'alt', 'title', 'id', 'name', 'type', 'value', 'placeholder',
   'target', 'rel', 'loading', 'srcset', 'sizes', 'media', 'role', 'tabindex',
   'for', 'action', 'method', 'enctype', 'autocomplete', 'autofocus',
-  'theme', '__element', 'update'
+  'theme', '__element', 'update',
+  'childrenAs', 'childExtends', 'childProps', 'children'
 ])
 const camelToKebab = (str) => str.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
@@ -287,11 +424,15 @@ const resolveShorthand = (key, val) => {
   }
   if ((key === 'align' || key === 'flexAlign') && typeof val === 'string') {
     const [alignItems, justifyContent] = val.split(' ')
-    return { display: 'flex', 'align-items': alignItems, 'justify-content': justifyContent }
+    const result = { display: 'flex', 'align-items': alignItems }
+    if (justifyContent) result['justify-content'] = justifyContent
+    return result
   }
   if (key === 'gridAlign' && typeof val === 'string') {
     const [alignItems, justifyContent] = val.split(' ')
-    return { display: 'grid', 'align-items': alignItems, 'justify-content': justifyContent }
+    const result = { display: 'grid', 'align-items': alignItems }
+    if (justifyContent) result['justify-content'] = justifyContent
+    return result
   }
   if (key === 'flexFlow' && typeof val === 'string') {
     let [direction, wrap] = (val || 'row').split(' ')
@@ -303,6 +444,11 @@ const resolveShorthand = (key, val) => {
     return { display: 'flex', 'flex-wrap': val }
   }
+  // Background image shorthand
+  if (key === 'backgroundImage' && typeof val === 'string' && !val.startsWith('url(') && !val.startsWith('linear-gradient') && !val.startsWith('radial-gradient') && !val.startsWith('none')) {
+    return { 'background-image': `url(${val})` }
+  }
   // Box/size shorthands
   if (key === 'round' || (key === 'borderRadius' && val)) {
     return { 'border-radius': typeof val === 'number' ? val + 'px' : val }
@@ -339,19 +485,24 @@ const resolveShorthand = (key, val) => {
   return null
 }
-const resolveInnerProps = (obj, colorMap) => {
+const resolveInnerProps = (obj, ds) => {
   const result = {}
   for (const k in obj) {
     const v = obj[k]
     const expanded = resolveShorthand(k, v)
-    if (expanded) { Object.assign(result, expanded); continue }
+    if (expanded) {
+      for (const ek in expanded) {
+        result[ek] = resolveDSValue(ek, expanded[ek], ds)
+      }
+      continue
+    }
     if (typeof v !== 'string' && typeof v !== 'number') continue
-    result[camelToKebab(k)] = CSS_COLOR_PROPS.has(k) && colorMap[v] ? colorMap[v] : v
+    result[camelToKebab(k)] = resolveDSValue(k, v, ds)
   }
   return result
 }
-const buildCSSFromProps = (props, colorMap, mediaMap) => {
+const buildCSSFromProps = (props, ds, mediaMap) => {
   const base = {}
   const mediaRules = {}
   const pseudoRules = {}
@@ -362,14 +513,14 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (key.charCodeAt(0) === 64 && typeof val === 'object') {
       const bp = mediaMap?.[key.slice(1)]
       if (bp) {
-        const inner = resolveInnerProps(val, colorMap)
+        const inner = resolveInnerProps(val, ds)
         if (Object.keys(inner).length) mediaRules[bp] = inner
       }
       continue
     }
     if (key.charCodeAt(0) === 58 && typeof val === 'object') {
-      const inner = resolveInnerProps(val, colorMap)
+      const inner = resolveInnerProps(val, ds)
       if (Object.keys(inner).length) pseudoRules[key] = inner
       continue
     }
@@ -379,9 +530,14 @@ const buildCSSFromProps = (props, colorMap, mediaMap) => {
     if (NON_CSS_PROPS.has(key)) continue
     const expanded = resolveShorthand(key, val)
-    if (expanded) { Object.assign(base, expanded); continue }
+    if (expanded) {
+      for (const ek in expanded) {
+        base[ek] = resolveDSValue(ek, expanded[ek], ds)
+      }
+      continue
+    }
-    base[camelToKebab(key)] = CSS_COLOR_PROPS.has(key) && colorMap[val] ? colorMap[val] : val
+    base[camelToKebab(key)] = resolveDSValue(key, val, ds)
   }
   return { base, mediaRules, pseudoRules }
@@ -426,7 +582,6 @@ const getExtendsCSS = (el) => {
 }
 const extractCSS = (element, ds) => {
-  const colorMap = ds?.color || {}
   const mediaMap = ds?.media || {}
   const animations = ds?.animation || {}
   const rules = []
@@ -440,7 +595,7 @@ const extractCSS = (element, ds) => {
       const cls = el.node.getAttribute?.('class')
       if (cls && !seen.has(cls)) {
         seen.add(cls)
-        const cssResult = buildCSSFromProps(props, colorMap, mediaMap)
+        const cssResult = buildCSSFromProps(props, ds, mediaMap)
         // Inject CSS from extends chain (e.g. extends: 'Flex' → display: flex)
         const extsCss = getExtendsCSS(el)
@@ -486,6 +641,7 @@ const generateResetCSS = (reset) => {
   if (!reset) return ''
   const rules = []
   for (const [selector, props] of Object.entries(reset)) {
+    if (!props || typeof props !== 'object') continue
     const decls = Object.entries(props)
       .map(([k, v]) => `${camelToKebab(k)}: ${v}`)
       .join('; ')
@@ -501,6 +657,7 @@ const generateFontLinks = (ds) => {
   // Collect font family names from the design system
   for (const val of Object.values(families)) {
+    if (typeof val !== 'string') continue
     const match = val.match(/'([^']+)'/)
     if (match) fontNames.add(match[1])
   }