@wireweave/core 2.3.1 → 2.5.0-beta.0

package/dist/renderer.cjs

@@ -1322,6 +1322,106 @@ function generateAccessibilityStyles(prefix) {
 }`;
 }
 
+// src/renderer/styles/annotation.ts
+function generateAnnotationStyles(_theme, prefix) {
+  return `/* Annotation Components */
+
+/* Marker - Number marker for referencing */
+.${prefix}-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  border: 2px solid #2563eb;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  z-index: 10;
+}
+
+/* Annotations Panel - Documentation container */
+.${prefix}-annotations {
+  background: #fafafa;
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  padding: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.${prefix}-annotations-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.${prefix}-annotations-icon {
+  font-size: 16px;
+}
+
+.${prefix}-annotations-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Annotation Item - Individual entry */
+.${prefix}-annotation-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.${prefix}-annotation-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.${prefix}-annotation-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #3b82f6;
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.${prefix}-annotation-item-title {
+  font-weight: 500;
+  font-size: 13px;
+  color: #374151;
+}
+
+.${prefix}-annotation-item-content {
+  padding-left: 26px;
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.${prefix}-annotation-item-content p,
+.${prefix}-annotation-item-content .${prefix}-text {
+  margin: 0;
+  font-size: 12px;
+  color: #6b7280;
+}`;
+}
+
 // src/renderer/styles-components.ts
 function generateComponentStyles(_theme, prefix = "wf") {
   const parts = [
@@ -1335,7 +1435,8 @@ function generateComponentStyles(_theme, prefix = "wf") {
     generateOverlayStyles(_theme, prefix),
     generateNavigationStyles(_theme, prefix),
     generateSemanticMarkerStyles(_theme, prefix),
-    generateAccessibilityStyles(prefix)
+    generateAccessibilityStyles(prefix),
+    generateAnnotationStyles(_theme, prefix)
   ];
   return parts.join("\n\n");
 }
@@ -1446,11 +1547,36 @@ function generateGridClasses(_theme, prefix) {
 }
 
 /* When explicit width is set, don't flex-grow */
-.${prefix}-row[style*="width:"],
-.${prefix}-col[style*="width:"] {
+.${prefix}-row[style*="width"],
+.${prefix}-col[style*="width"] {
+  flex: 0 0 auto;
+}
+
+/* Stack - vertical content grouping (does not fill available space) */
+.${prefix}-stack {
+  display: flex;
+  flex-direction: column;
   flex: 0 0 auto;
+  box-sizing: border-box;
+}
+
+/* Relative - container for absolute positioning children */
+.${prefix}-relative {
+  position: relative;
+  display: inline-flex;
 }
 
+/* Anchor positioning for relative container children */
+.${prefix}-anchor-top-left { position: absolute; top: -4px; left: -4px; }
+.${prefix}-anchor-top-center { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-top-right { position: absolute; top: -4px; right: -4px; }
+.${prefix}-anchor-center-left { position: absolute; top: 50%; left: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.${prefix}-anchor-center-right { position: absolute; top: 50%; right: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-bottom-left { position: absolute; bottom: -4px; left: -4px; }
+.${prefix}-anchor-bottom-center { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-bottom-right { position: absolute; bottom: -4px; right: -4px; }
+
 `;
   for (let i = 1; i <= 12; i++) {
     css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
@@ -2044,6 +2170,30 @@ function renderCol(node, ctx) {
 ${children}
 </div>`;
 }
+function renderStack(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-stack`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
+function renderRelative(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-relative`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
 
 // src/renderer/html/renderers/container.ts
 function buildInteractiveAttrs(node) {
@@ -12879,6 +13029,28 @@ var lucideIcons = {
       }
     ]
   ],
+  "circle-help": [
+    [
+      "circle",
+      {
+        "cx": "12",
+        "cy": "12",
+        "r": "10"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M12 17h.01"
+      }
+    ]
+  ],
   "circle-minus": [
     [
       "circle",
@@ -48941,10 +49113,20 @@ function renderAvatar(node, ctx) {
   const sizeStyle = sizeResolved.style || "";
   const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
   const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
-  const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
+  let content;
+  if (node.name) {
+    content = node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  } else {
+    const iconData = getIconData("user");
+    if (iconData) {
+      content = renderIconSvg(iconData, 16, 2, `${ctx.prefix}-icon`);
+    } else {
+      content = "?";
+    }
+  }
   const interactiveAttrs = buildInteractiveAttrs2(node);
   const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
-  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${content}</div>`;
 }
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
@@ -48956,6 +49138,7 @@ function renderBadge(node, ctx) {
       `${ctx.prefix}-badge-icon`,
       sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
+      node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
     const baseStyles2 = ctx.buildCommonStyles(node);
@@ -48975,6 +49158,7 @@ function renderBadge(node, ctx) {
     sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
+    node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
   const baseStyles = ctx.buildCommonStyles(node);
@@ -49309,6 +49493,117 @@ function renderDivider(node, ctx) {
   return `<hr class="${ctx.prefix}-divider"${styleAttr} />`;
 }
 
+// src/renderer/html/renderers/annotation.ts
+var MARKER_COLORS = {
+  blue: { bg: "#3b82f6", border: "#2563eb" },
+  red: { bg: "#ef4444", border: "#dc2626" },
+  green: { bg: "#22c55e", border: "#16a34a" },
+  yellow: { bg: "#eab308", border: "#ca8a04" },
+  purple: { bg: "#a855f7", border: "#9333ea" },
+  orange: { bg: "#f97316", border: "#ea580c" }
+};
+function getAnchorStyles(anchor) {
+  if (!anchor) return "";
+  const styles = ["position: absolute"];
+  switch (anchor) {
+    case "top-left":
+      styles.push("top: -8px", "left: -8px");
+      break;
+    case "top-center":
+      styles.push("top: -8px", "left: 50%", "transform: translateX(-50%)");
+      break;
+    case "top-right":
+      styles.push("top: -8px", "right: -8px");
+      break;
+    case "center-left":
+      styles.push("top: 50%", "left: -8px", "transform: translateY(-50%)");
+      break;
+    case "center":
+      styles.push("top: 50%", "left: 50%", "transform: translate(-50%, -50%)");
+      break;
+    case "center-right":
+      styles.push("top: 50%", "right: -8px", "transform: translateY(-50%)");
+      break;
+    case "bottom-left":
+      styles.push("bottom: -8px", "left: -8px");
+      break;
+    case "bottom-center":
+      styles.push("bottom: -8px", "left: 50%", "transform: translateX(-50%)");
+      break;
+    case "bottom-right":
+      styles.push("bottom: -8px", "right: -8px");
+      break;
+  }
+  return styles.join("; ");
+}
+function renderMarker(node, ctx) {
+  const color = node.color || "blue";
+  const colorConfig = MARKER_COLORS[color] || MARKER_COLORS.blue;
+  const baseStyles = [
+    "display: inline-flex",
+    "align-items: center",
+    "justify-content: center",
+    "width: 20px",
+    "height: 20px",
+    "border-radius: 50%",
+    `background: ${colorConfig.bg}`,
+    `border: 2px solid ${colorConfig.border}`,
+    "color: white",
+    "font-size: 11px",
+    "font-weight: 600",
+    "line-height: 1",
+    "z-index: 10"
+  ];
+  const anchorStyles = getAnchorStyles(node.anchor);
+  const commonStyles = ctx.buildCommonStyles(node);
+  const allStyles = [
+    ...baseStyles,
+    ...anchorStyles ? [anchorStyles] : [],
+    ...commonStyles ? [commonStyles] : []
+  ].join("; ");
+  return `<span class="${ctx.prefix}-marker" style="${allStyles}" aria-label="Marker ${node.number}">${node.number}</span>`;
+}
+function renderAnnotations(node, ctx) {
+  const title = node.title || "\uD654\uBA74 \uC124\uBA85";
+  const commonStyles = ctx.buildCommonStyles(node);
+  const styleAttr = commonStyles ? ` style="${commonStyles}"` : "";
+  const items = (node.children || []).map((child) => renderAnnotationItem(child, ctx)).join("\n");
+  return `<aside class="${ctx.prefix}-annotations" data-role="documentation" aria-label="${ctx.escapeHtml(title)}"${styleAttr}>
+  <header class="${ctx.prefix}-annotations-header">
+    <span class="${ctx.prefix}-annotations-icon" aria-hidden="true">&#128203;</span>
+    <span>${ctx.escapeHtml(title)}</span>
+  </header>
+  <div class="${ctx.prefix}-annotations-content">
+    ${items}
+  </div>
+</aside>`;
+}
+function renderAnnotationItem(node, ctx) {
+  const color = MARKER_COLORS.blue;
+  const markerStyle = [
+    "display: inline-flex",
+    "align-items: center",
+    "justify-content: center",
+    "width: 18px",
+    "height: 18px",
+    "border-radius: 50%",
+    `background: ${color.bg}`,
+    "color: white",
+    "font-size: 10px",
+    "font-weight: 600",
+    "flex-shrink: 0"
+  ].join("; ");
+  const children = node.children || [];
+  const content = children.length > 0 ? ctx.renderChildren(children) : "";
+  return `<div class="${ctx.prefix}-annotation-item">
+  <div class="${ctx.prefix}-annotation-item-header">
+    <span class="${ctx.prefix}-annotation-marker" style="${markerStyle}">${node.number}</span>
+    <span class="${ctx.prefix}-annotation-item-title">${ctx.escapeHtml(node.title)}</span>
+  </div>
+  ${content ? `<div class="${ctx.prefix}-annotation-item-content">${content}</div>` : ""}
+</div>`;
+}
+
 // src/renderer/html/index.ts
 var SPACING_TOKENS = {
   0: "0px",
@@ -49395,6 +49690,8 @@ var HtmlRenderer = class extends BaseRenderer {
       // Grid nodes
       Row: (node) => this.renderRow(node),
       Col: (node) => this.renderCol(node),
+      Stack: (node) => this.renderStack(node),
+      Relative: (node) => this.renderRelative(node),
       // Container nodes
       Card: (node) => this.renderCard(node),
       Modal: (node) => this.renderModal(node),
@@ -49437,7 +49734,11 @@ var HtmlRenderer = class extends BaseRenderer {
       Tabs: (node) => this.renderTabs(node),
       Breadcrumb: (node) => this.renderBreadcrumb(node),
       // Other
-      Divider: (node) => this.renderDivider(node)
+      Divider: (node) => this.renderDivider(node),
+      // Annotation nodes
+      Marker: (node) => this.renderMarker(node),
+      Annotations: (node) => this.renderAnnotations(node),
+      AnnotationItem: (node) => this.renderAnnotationItem(node)
     };
   }
   /**
@@ -49554,6 +49855,12 @@ ${title}${children}
   renderCol(node) {
     return renderCol(node, this.getGridRenderContext());
   }
+  renderStack(node) {
+    return renderStack(node, this.getRenderContext());
+  }
+  renderRelative(node) {
+    return renderRelative(node, this.getRenderContext());
+  }
   /**
    * Build common inline styles for all values
    *
@@ -49716,6 +50023,9 @@ ${title}${children}
     if (commonStyles) {
       styles.push(commonStyles);
     }
+    if (node.w !== void 0 && node.flex === void 0) {
+      styles.push("flex: none");
+    }
     if (node.order !== void 0) {
       styles.push(`order: ${node.order}`);
     }
@@ -49850,6 +50160,18 @@ ${title}${children}
   renderDivider(node) {
     return renderDivider(node, this.getRenderContext());
   }
+  // ===========================================
+  // Annotation Renderers
+  // ===========================================
+  renderMarker(node) {
+    return renderMarker(node, this.getRenderContext());
+  }
+  renderAnnotations(node) {
+    return renderAnnotations(node, this.getRenderContext());
+  }
+  renderAnnotationItem(node) {
+    return renderAnnotationItem(node, this.getRenderContext());
+  }
 };
 function createHtmlRenderer(options) {
   return new HtmlRenderer(options);

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0t4JRY3.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-EbEsGNxL.cjs';
 
 /**
  * Renderer type definitions for wireweave
@@ -234,6 +234,8 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderSection;
     private renderRow;
     private renderCol;
+    private renderStack;
+    private renderRelative;
     /**
      * Build common inline styles for all values
      *
@@ -311,6 +313,9 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderTabs;
     private renderBreadcrumb;
     private renderDivider;
+    private renderMarker;
+    private renderAnnotations;
+    private renderAnnotationItem;
 }
 /**
  * Create a new HTML renderer instance

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0t4JRY3.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-EbEsGNxL.js';
 
 /**
  * Renderer type definitions for wireweave
@@ -234,6 +234,8 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderSection;
     private renderRow;
     private renderCol;
+    private renderStack;
+    private renderRelative;
     /**
      * Build common inline styles for all values
      *
@@ -311,6 +313,9 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderTabs;
     private renderBreadcrumb;
     private renderDivider;
+    private renderMarker;
+    private renderAnnotations;
+    private renderAnnotationItem;
 }
 /**
  * Create a new HTML renderer instance