boxwood 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/markdown/index.js

@@ -1,23 +1,18 @@
 const nodes = require("../..")
 const { component } = nodes
 
-const { extractHtmlParams } = require("./utilities/params")
+const { extractHtmlParams, mergeComponents } = require("./utilities/params")
 const { parseMarkdownLines } = require("./utilities/parseBlock")
 const { convertItemsToNodes } = require("./utilities/convertNodes")
 
-const COMPONENTS = {
+// Basic HTML components needed for markdown formatting (links, images, code, etc.)
+const BASIC_HTML_COMPONENTS = {
   h1: nodes.H1,
   h2: nodes.H2,
   h3: nodes.H3,
   h4: nodes.H4,
   h5: nodes.H5,
   h6: nodes.H6,
-  blockquote: nodes.Blockquote,
-  hr: nodes.Hr,
-}
-
-// Basic HTML components needed for markdown formatting (links, images, code, etc.)
-const BASIC_HTML_COMPONENTS = {
   a: nodes.A,
   img: nodes.Img,
   code: nodes.Code,
@@ -45,6 +40,9 @@ function Markdown(params, children) {
 
   const htmlParams = extractHtmlParams(params)
 
+  // Merge basic HTML components - all components are now in one place
+  const allComponents = mergeComponents(BASIC_HTML_COMPONENTS, null)
+
   // Parse all markdown lines into structured items (no custom components, no data)
   const items = parseMarkdownLines(children, null, null)
 
@@ -54,8 +52,7 @@ function Markdown(params, children) {
     params,
     htmlParams,
     null, // no data
-    BASIC_HTML_COMPONENTS, // basic HTML components for formatting
-    COMPONENTS,
+    allComponents,
     Markdown,
   )
 }

package/ui/markdown/utilities/convertNodes.js

@@ -121,7 +121,6 @@ function convertItemsToNodes(
   htmlParams,
   data,
   allComponents,
-  components,
   markdownRenderer,
 ) {
   const result = []
@@ -174,7 +173,7 @@ function convertItemsToNodes(
     } else {
       // Regular block elements (h1-h6, p, etc.)
       const { type, content } = item
-      const Component = components[type] || allComponents.p
+      const Component = allComponents[type] || allComponents.p
       const processedContent = replaceVariables(content, data)
       result.push(
         Component(htmlParams, format(processedContent, allComponents)),

package/ui/prose/index.js

@@ -1,23 +1,18 @@
 const nodes = require("../..")
 const { component } = nodes
 
+const Center = require("../center")
+const Container = require("../container")
+const Grid = require("../grid")
+const Group = require("../group")
+const Stack = require("../stack")
+
 const { extractHtmlParams, mergeComponents } = require("./utilities/params")
 const { parseMarkdownLines } = require("./utilities/parseBlock")
 const { convertItemsToNodes } = require("./utilities/convertNodes")
 const { processConditionals } = require("./utilities/processConditionals")
 const { processLoops } = require("./utilities/processLoops")
 
-const COMPONENTS = {
-  h1: nodes.H1,
-  h2: nodes.H2,
-  h3: nodes.H3,
-  h4: nodes.H4,
-  h5: nodes.H5,
-  h6: nodes.H6,
-  blockquote: nodes.Blockquote,
-  hr: nodes.Hr,
-}
-
 // Safe builtin HTML tags that can be used as custom components in markdown
 // These are always available and don't need to be explicitly passed in params.components
 const SAFE_TAG_NAMES = [
@@ -112,6 +107,18 @@ const BUILTIN_HTML_TAGS = SAFE_TAG_NAMES.reduce((acc, tagName) => {
   return acc
 }, {})
 
+// Add built-in UI components
+const BUILTIN_UI_COMPONENTS = {
+  Center,
+  Container,
+  Grid,
+  Group,
+  Stack,
+}
+
+// Merge HTML tags and UI components
+const BUILTIN_COMPONENTS = { ...BUILTIN_HTML_TAGS, ...BUILTIN_UI_COMPONENTS }
+
 function Prose(params, children) {
   // Handle array of children recursively
   if (Array.isArray(children)) {
@@ -125,7 +132,7 @@ function Prose(params, children) {
 
   const customComponents = params && params.components
   const data = params && params.data
-  const allComponents = mergeComponents(BUILTIN_HTML_TAGS, customComponents)
+  const allComponents = mergeComponents(BUILTIN_COMPONENTS, customComponents)
   const htmlParams = extractHtmlParams(params)
 
   // Process {#each}...{/each} loop blocks first
@@ -145,7 +152,6 @@ function Prose(params, children) {
     htmlParams,
     data,
     allComponents,
-    COMPONENTS,
     Prose,
   )
 }

package/ui/prose/utilities/convertNodes.js

@@ -121,7 +121,6 @@ function convertItemsToNodes(
   htmlParams,
   data,
   allComponents,
-  components,
   markdownRenderer,
 ) {
   const result = []
@@ -174,7 +173,7 @@ function convertItemsToNodes(
     } else {
       // Regular block elements (h1-h6, p, etc.)
       const { type, content } = item
-      const Component = components[type] || allComponents.p
+      const Component = allComponents[type] || allComponents.p
       const processedContent = replaceVariables(content, data)
       result.push(
         Component(htmlParams, format(processedContent, allComponents)),

package/ui/prose/utilities/parseCustomTag.js

@@ -1,3 +1,5 @@
+const { resolvePath } = require("./replaceVariables")
+
 /**
  * Parse a custom component tag from markdown
  * Supports both <Component attr="value"> and <Component attr={variable}>
@@ -157,7 +159,19 @@ function parseAttributes(attributesStr) {
           i++
         }
       }
-      attributes[name] = value
+      
+      // Check if the entire quoted value is a variable reference: "{variable}"
+      if (value.startsWith("{") && value.endsWith("}")) {
+        const variableName = value.substring(1, value.length - 1).trim()
+        if (variableName) {
+          attributes[name] = { __variable: variableName }
+        } else {
+          attributes[name] = value
+        }
+      } else {
+        attributes[name] = value
+      }
+      
       if (i < str.length) i++ // Skip closing quote
     } else if (str[i] === "{") {
       // Variable reference
@@ -197,12 +211,10 @@ function resolveAttributes(attributes, data) {
   const resolved = {}
   for (const [key, value] of Object.entries(attributes)) {
     if (value && typeof value === "object" && value.__variable) {
-      // Resolve variable
-      const variableName = value.__variable
-      resolved[key] =
-        data && data[variableName] !== undefined
-          ? data[variableName]
-          : undefined
+      // Resolve variable using resolvePath to support complex paths
+      const variablePath = value.__variable
+      const resolvedValue = resolvePath(data, variablePath)
+      resolved[key] = resolvedValue
     } else {
       resolved[key] = value
     }

package/ui/prose/utilities/replaceVariables.js

@@ -5,6 +5,11 @@
  * @returns {*} - The resolved value or undefined
  */
 function resolvePath(data, path) {
+  // Handle null or undefined data
+  if (data === null || data === undefined) {
+    return undefined
+  }
+
   // Handle simple variable names (backwards compatibility)
   if (!/[.\[]/.test(path)) {
     return data[path]