@symbo.ls/brender 3.4.11 → 3.5.1

package/dist/esm/render.js

@@ -3,6 +3,61 @@ import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
 import { hydrate } from "./hydrate.js";
 import { parseHTML } from "linkedom";
+const UIKIT_STUBS = {
+  Box: {},
+  Focusable: {},
+  Block: { display: "block" },
+  Inline: { display: "inline" },
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Link: {
+    tag: "a",
+    attr: {
+      href: (el) => el.props?.href,
+      target: (el) => el.props?.target,
+      rel: (el) => el.props?.rel
+    }
+  },
+  A: { extends: "Link" },
+  RouteLink: { extends: "Link" },
+  Img: {
+    tag: "img",
+    attr: {
+      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
+    }
+  },
+  Image: { extends: "Img" },
+  Button: { tag: "button" },
+  FocusableComponent: { tag: "button" },
+  Form: { tag: "form" },
+  Input: { tag: "input" },
+  TextArea: { tag: "textarea" },
+  Textarea: { tag: "textarea" },
+  Select: { tag: "select" },
+  Label: { tag: "label" },
+  Iframe: { tag: "iframe" },
+  Video: { tag: "video" },
+  Audio: { tag: "audio" },
+  Canvas: { tag: "canvas" },
+  Span: { tag: "span" },
+  P: { tag: "p" },
+  H1: { tag: "h1" },
+  H2: { tag: "h2" },
+  H3: { tag: "h3" },
+  H4: { tag: "h4" },
+  H5: { tag: "h5" },
+  H6: { tag: "h6" }
+};
 const render = async (data, options = {}) => {
   const { route = "/", state: stateOverrides, context: contextOverrides } = options;
   const { window, document } = createEnv();
@@ -42,12 +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 }
-  });
+  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 };
 };
@@ -112,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",
@@ -151,41 +349,96 @@ 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) => {
-  if (key === "flexAlign" && typeof val === "string") {
+  if (typeof val === "undefined" || val === null) return null;
+  if (key === "flow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", "flex-flow": (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "wrap") {
+    return { display: "flex", "flex-wrap": 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 === "round" && val) {
+  if (key === "flexFlow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", "flex-flow": (direction || "") + " " + (wrap || "") };
+  }
+  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 };
   }
-  if (key === "boxSize" && val) {
-    return { width: val, height: val };
+  if (key === "boxSize" && typeof val === "string") {
+    const [height, width] = val.split(" ");
+    return { height, width: width || height };
+  }
+  if (key === "widthRange" && typeof val === "string") {
+    const [minWidth, maxWidth] = val.split(" ");
+    return { "min-width": minWidth, "max-width": maxWidth || minWidth };
   }
+  if (key === "heightRange" && typeof val === "string") {
+    const [minHeight, maxHeight] = val.split(" ");
+    return { "min-height": minHeight, "max-height": maxHeight || minHeight };
+  }
+  if (key === "column") return { "grid-column": val };
+  if (key === "columns") return { "grid-template-columns": val };
+  if (key === "templateColumns") return { "grid-template-columns": val };
+  if (key === "row") return { "grid-row": val };
+  if (key === "rows") return { "grid-template-rows": val };
+  if (key === "templateRows") return { "grid-template-rows": val };
+  if (key === "area") return { "grid-area": val };
+  if (key === "template") return { "grid-template": val };
+  if (key === "templateAreas") return { "grid-template-areas": val };
+  if (key === "autoColumns") return { "grid-auto-columns": val };
+  if (key === "autoRows") return { "grid-auto-rows": val };
+  if (key === "autoFlow") return { "grid-auto-flow": val };
+  if (key === "columnStart") return { "grid-column-start": 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 = {};
@@ -194,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;
     }
@@ -209,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 };
 };
@@ -231,8 +486,23 @@ const renderCSSRule = (selector, { base, mediaRules, pseudoRules }) => {
   }
   return lines.join("\n");
 };
+const EXTENDS_CSS = {
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Block: { display: "block" },
+  Inline: { display: "inline" }
+};
+const getExtendsCSS = (el) => {
+  const exts = el.__ref?.__extends;
+  if (!exts || !Array.isArray(exts)) return null;
+  for (const ext of exts) {
+    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext];
+  }
+  return null;
+};
 const extractCSS = (element, ds) => {
-  const colorMap = ds?.color || {};
   const mediaMap = ds?.media || {};
   const animations = ds?.animation || {};
   const rules = [];
@@ -245,7 +515,14 @@ 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)) {
+            const kebab = camelToKebab(k);
+            if (!cssResult.base[kebab]) cssResult.base[kebab] = v;
+          }
+        }
         const has = Object.keys(cssResult.base).length || Object.keys(cssResult.mediaRules).length || Object.keys(cssResult.pseudoRules).length;
         if (has) rules.push(renderCSSRule("." + cls.split(" ")[0], cssResult));
         const anim = props.animation || props.animationName;
@@ -279,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}; }`);
   }
@@ -289,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

@@ -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/hydrate.js

@@ -152,6 +152,14 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
     hasCss = true
   }
 
+  // Inject CSS from extends chain (e.g. extends: 'Flex' → display: flex)
+  const extsCss = getExtendsCSS(el)
+  if (extsCss) {
+    for (const [k, v] of Object.entries(extsCss)) {
+      if (!css[k]) { css[k] = v; hasCss = true }
+    }
+  }
+
   // Handle element.style object
   if (el.style && typeof el.style === 'object') {
     Object.assign(css, el.style)
@@ -236,9 +244,40 @@ const NON_CSS_PROPS = new Set([
   'theme', '__element', 'update'
 ])
 
+// Map of component names to their implicit CSS from extends
+const EXTENDS_CSS = {
+  Flex: { display: 'flex' },
+  InlineFlex: { display: 'inline-flex' },
+  Grid: { display: 'grid' },
+  InlineGrid: { display: 'inline-grid' },
+  Block: { display: 'block' },
+  Inline: { display: 'inline' }
+}
+
+const getExtendsCSS = (el) => {
+  const exts = el.__ref?.__extends
+  if (!exts || !Array.isArray(exts)) return null
+  for (const ext of exts) {
+    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext]
+  }
+  return null
+}
+
 // DomQL shorthand props that expand to multiple CSS properties
 const resolveShorthand = (key, val) => {
-  if (key === 'flexAlign' && typeof val === 'string') {
+  if (typeof val === 'undefined' || val === null) return null
+
+  // Flex shorthands
+  if (key === 'flow' && typeof val === 'string') {
+    let [direction, wrap] = (val || 'row').split(' ')
+    if (val.startsWith('x') || val === 'row') direction = 'row'
+    if (val.startsWith('y') || val === 'column') direction = 'column'
+    return { display: 'flex', flexFlow: (direction || '') + ' ' + (wrap || '') }
+  }
+  if (key === 'wrap') {
+    return { display: 'flex', flexWrap: val }
+  }
+  if ((key === 'align' || key === 'flexAlign') && typeof val === 'string') {
     const [alignItems, justifyContent] = val.split(' ')
     return { display: 'flex', alignItems, justifyContent }
   }
@@ -246,12 +285,49 @@ const resolveShorthand = (key, val) => {
     const [alignItems, justifyContent] = val.split(' ')
     return { display: 'grid', alignItems, justifyContent }
   }
-  if (key === 'round' && val) {
+  if (key === 'flexFlow' && typeof val === 'string') {
+    let [direction, wrap] = (val || 'row').split(' ')
+    if (val.startsWith('x') || val === 'row') direction = 'row'
+    if (val.startsWith('y') || val === 'column') direction = 'column'
+    return { display: 'flex', flexFlow: (direction || '') + ' ' + (wrap || '') }
+  }
+  if (key === 'flexWrap') {
+    return { display: 'flex', flexWrap: val }
+  }
+
+  // Box/size shorthands
+  if (key === 'round' || (key === 'borderRadius' && val)) {
     return { borderRadius: typeof val === 'number' ? val + 'px' : val }
   }
-  if (key === 'boxSize' && val) {
-    return { width: val, height: val }
+  if (key === 'boxSize' && typeof val === 'string') {
+    const [height, width] = val.split(' ')
+    return { height, width: width || height }
   }
+  if (key === 'widthRange' && typeof val === 'string') {
+    const [minWidth, maxWidth] = val.split(' ')
+    return { minWidth, maxWidth: maxWidth || minWidth }
+  }
+  if (key === 'heightRange' && typeof val === 'string') {
+    const [minHeight, maxHeight] = val.split(' ')
+    return { minHeight, maxHeight: maxHeight || minHeight }
+  }
+
+  // Grid aliases
+  if (key === 'column') return { gridColumn: val }
+  if (key === 'columns') return { gridTemplateColumns: val }
+  if (key === 'templateColumns') return { gridTemplateColumns: val }
+  if (key === 'row') return { gridRow: val }
+  if (key === 'rows') return { gridTemplateRows: val }
+  if (key === 'templateRows') return { gridTemplateRows: val }
+  if (key === 'area') return { gridArea: val }
+  if (key === 'template') return { gridTemplate: val }
+  if (key === 'templateAreas') return { gridTemplateAreas: val }
+  if (key === 'autoColumns') return { gridAutoColumns: val }
+  if (key === 'autoRows') return { gridAutoRows: val }
+  if (key === 'autoFlow') return { gridAutoFlow: val }
+  if (key === 'columnStart') return { gridColumnStart: val }
+  if (key === 'rowStart') return { gridRowStart: val }
+
   return null
 }
 
@@ -289,7 +365,15 @@ const CSS_PROPERTIES = new Set([
   'gap', 'rowGap', 'columnGap',
   'gridTemplateColumns', 'gridTemplateRows', 'gridColumn', 'gridRow',
   'gridArea', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows',
-  'transform', 'transformOrigin', 'transition', 'animation', 'animationDelay',
+  'inset',
+  'inlineSize', 'blockSize', 'minInlineSize', 'maxInlineSize', 'minBlockSize', 'maxBlockSize',
+  'paddingBlockStart', 'paddingBlockEnd', 'paddingInlineStart', 'paddingInlineEnd',
+  'marginBlockStart', 'marginBlockEnd', 'marginInlineStart', 'marginInlineEnd',
+  'transform', 'transformOrigin', 'transition',
+  'animation', 'animationName', 'animationDuration', 'animationDelay',
+  'animationTimingFunction', 'animationFillMode', 'animationIterationCount',
+  'animationPlayState', 'animationDirection',
+  'gridTemplate', 'gridTemplateAreas', 'gridColumnStart', 'gridRowStart',
   'boxShadow', 'outline', 'outlineColor', 'outlineWidth', 'outlineStyle', 'outlineOffset',
   'whiteSpace', 'wordBreak', 'wordWrap', 'overflowWrap',
   'visibility', 'boxSizing', 'objectFit', 'objectPosition',

package/load.js

@@ -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 {