@wireweave/core 1.0.0-beta.20260107133450 → 1.0.0-beta.20260110141318

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-DtovIYS6.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-lcJzPcR0.cjs';
 
 /**
  * Renderer type definitions for wireweave
@@ -214,6 +214,10 @@ declare class HtmlRenderer extends BaseRenderer {
     /**
      * Build common inline styles for all values
      *
+     * Position values (x, y) for absolute positioning:
+     * - When x or y is specified, element gets position: absolute
+     * - x → left, y → top
+     *
      * Spacing values (p, m, gap) use token system:
      * - number: spacing token (e.g., p=4 → padding: 16px from token table)
      * - ValueWithUnit: direct CSS value (e.g., p=16px → padding: 16px)
@@ -261,6 +265,9 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderPopover;
     private renderDropdown;
     private renderNav;
+    private renderNavChildren;
+    private renderNavItem;
+    private renderIconHtml;
     private renderTabs;
     private renderBreadcrumb;
     private renderDivider;
@@ -308,83 +315,126 @@ declare function createHtmlRenderer(options?: RenderOptions): HtmlRenderer;
 /**
  * SVG Renderer for wireweave
  *
- * Renders wireframe AST to SVG image format
+ * A proper layout engine that renders wireframe AST to SVG image format
+ * with correct flexbox-like layout calculations.
  */
 
-/**
- * SVG Renderer class
- *
- * Renders wireframe AST nodes to SVG elements
- */
 declare class SvgRenderer {
     private options;
     private theme;
-    private currentX;
-    private currentY;
-    private contentWidth;
+    private pageWidth;
+    private pageHeight;
+    private clipPathDefs;
+    private clipPathCounter;
+    private readonly DEFAULT_GAP;
     constructor(options?: SvgRenderOptions);
     /**
      * Render a wireframe document to SVG
      */
     render(doc: WireframeDocument): SvgRenderResult;
     /**
-     * Generate SVG defs (styles, patterns, etc.)
+     * Generate SVG defs (styles)
      */
     private generateDefs;
-    /**
-     * Render a page node
-     */
     private renderPage;
     /**
-     * Render page title
+     * Render page with fixed header/footer layout
+     * Header at top, Footer at bottom, Main fills remaining space
      */
-    private renderPageTitle;
-    /**
-     * Render any AST node
-     */
-    private renderNode;
-    private renderRow;
-    private renderCol;
-    private renderHeader;
-    private renderMain;
-    private renderFooter;
-    private renderSidebar;
-    private renderCard;
-    private renderModal;
-    private renderText;
-    private renderTitle;
-    private renderLink;
-    private renderInput;
-    private renderTextarea;
-    private renderSelect;
-    private renderCheckbox;
-    private renderRadio;
-    private renderSwitch;
-    private renderButton;
+    private renderPageWithFixedLayout;
+    private shouldCenterHorizontally;
+    private measureNode;
+    private measureRow;
+    private measureCol;
+    private measureHeader;
+    private measureFooter;
+    private measureMain;
+    private measureSidebar;
+    private measureCard;
+    private measureModal;
+    private measureTitle;
+    private measureText;
+    private measureButton;
+    private measureInput;
+    private measureTextarea;
+    private measureSelect;
+    private measureCheckbox;
+    private measureRadio;
+    private measureSwitch;
+    private measureLink;
+    private measureImage;
+    private measurePlaceholder;
+    private measureAvatar;
+    private measureBadge;
+    private measureTable;
+    private measureList;
+    private measureAlert;
+    private measureProgress;
+    private measureSpinner;
+    private measureNav;
+    private measureTabs;
+    private measureBreadcrumb;
+    private measureIcon;
+    private measureDivider;
+    private layoutNode;
+    private layoutRow;
+    private layoutCol;
+    private rowContainsSidebarOrMain;
+    private layoutHeader;
+    private adjustChildrenY;
     /**
-     * Render icon paths for SVG
+     * Check if a node should flex to fill available space in a Row
+     * Only layout containers without explicit width should flex
      */
+    private isFlexContainer;
+    private layoutFooter;
+    private layoutMain;
+    private layoutSidebar;
+    private layoutCard;
+    private renderBox;
+    private renderRowBox;
+    private renderColBox;
+    private renderHeaderBox;
+    private renderFooterBox;
+    private renderMainBox;
+    private renderSidebarBox;
+    private renderCardBox;
+    private renderModalBox;
+    private renderTitleBox;
+    private renderTextBox;
+    private renderButtonBox;
+    private renderInputBox;
+    private renderTextareaBox;
+    private renderSelectBox;
+    private renderCheckboxBox;
+    private renderRadioBox;
+    private renderSwitchBox;
+    private renderLinkBox;
+    private renderImageBox;
+    private renderPlaceholderBox;
+    private renderAvatarBox;
+    private renderBadgeBox;
+    private renderTableBox;
+    private renderListBox;
+    private renderAlertBox;
+    private renderProgressBox;
+    private renderSpinnerBox;
+    private renderNavBox;
+    private renderTabsBox;
+    private renderBreadcrumbBox;
+    private renderIconBox;
+    private renderDividerBox;
     private renderIconPaths;
-    private renderImage;
-    private renderPlaceholder;
-    private renderAvatar;
-    private renderBadge;
-    private renderTable;
-    private renderList;
-    private renderAlert;
-    private renderProgress;
-    private renderSpinner;
-    private renderNav;
-    private renderTabs;
-    private renderBreadcrumb;
-    private getFontSize;
+    private getPadding;
+    private getGap;
+    private resolveSpacing;
+    private resolveSize;
+    private isFullWidth;
+    private estimateTextWidth;
     private resolveFontSize;
     private getTitleFontSize;
     private escapeXml;
 }
-/**
- * Create a new SVG renderer instance
- */
 declare function createSvgRenderer(options?: SvgRenderOptions): SvgRenderer;
 
 /**
@@ -439,9 +489,6 @@ declare function generateComponentStyles(_theme: ThemeConfig, prefix?: string):
 type IconElement = [string, Record<string, string>];
 type IconData = IconElement[];
 declare const lucideIcons: Record<string, IconData>;
-/**
- * Get icon data by name
- */
 declare function getIconData(name: string): IconData | undefined;
 /**
  * Render icon data to SVG string

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-DtovIYS6.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-lcJzPcR0.js';
 
 /**
  * Renderer type definitions for wireweave
@@ -214,6 +214,10 @@ declare class HtmlRenderer extends BaseRenderer {
     /**
      * Build common inline styles for all values
      *
+     * Position values (x, y) for absolute positioning:
+     * - When x or y is specified, element gets position: absolute
+     * - x → left, y → top
+     *
      * Spacing values (p, m, gap) use token system:
      * - number: spacing token (e.g., p=4 → padding: 16px from token table)
      * - ValueWithUnit: direct CSS value (e.g., p=16px → padding: 16px)
@@ -261,6 +265,9 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderPopover;
     private renderDropdown;
     private renderNav;
+    private renderNavChildren;
+    private renderNavItem;
+    private renderIconHtml;
     private renderTabs;
     private renderBreadcrumb;
     private renderDivider;
@@ -308,83 +315,126 @@ declare function createHtmlRenderer(options?: RenderOptions): HtmlRenderer;
 /**
  * SVG Renderer for wireweave
  *
- * Renders wireframe AST to SVG image format
+ * A proper layout engine that renders wireframe AST to SVG image format
+ * with correct flexbox-like layout calculations.
  */
 
-/**
- * SVG Renderer class
- *
- * Renders wireframe AST nodes to SVG elements
- */
 declare class SvgRenderer {
     private options;
     private theme;
-    private currentX;
-    private currentY;
-    private contentWidth;
+    private pageWidth;
+    private pageHeight;
+    private clipPathDefs;
+    private clipPathCounter;
+    private readonly DEFAULT_GAP;
     constructor(options?: SvgRenderOptions);
     /**
      * Render a wireframe document to SVG
      */
     render(doc: WireframeDocument): SvgRenderResult;
     /**
-     * Generate SVG defs (styles, patterns, etc.)
+     * Generate SVG defs (styles)
      */
     private generateDefs;
-    /**
-     * Render a page node
-     */
     private renderPage;
     /**
-     * Render page title
+     * Render page with fixed header/footer layout
+     * Header at top, Footer at bottom, Main fills remaining space
      */
-    private renderPageTitle;
-    /**
-     * Render any AST node
-     */
-    private renderNode;
-    private renderRow;
-    private renderCol;
-    private renderHeader;
-    private renderMain;
-    private renderFooter;
-    private renderSidebar;
-    private renderCard;
-    private renderModal;
-    private renderText;
-    private renderTitle;
-    private renderLink;
-    private renderInput;
-    private renderTextarea;
-    private renderSelect;
-    private renderCheckbox;
-    private renderRadio;
-    private renderSwitch;
-    private renderButton;
+    private renderPageWithFixedLayout;
+    private shouldCenterHorizontally;
+    private measureNode;
+    private measureRow;
+    private measureCol;
+    private measureHeader;
+    private measureFooter;
+    private measureMain;
+    private measureSidebar;
+    private measureCard;
+    private measureModal;
+    private measureTitle;
+    private measureText;
+    private measureButton;
+    private measureInput;
+    private measureTextarea;
+    private measureSelect;
+    private measureCheckbox;
+    private measureRadio;
+    private measureSwitch;
+    private measureLink;
+    private measureImage;
+    private measurePlaceholder;
+    private measureAvatar;
+    private measureBadge;
+    private measureTable;
+    private measureList;
+    private measureAlert;
+    private measureProgress;
+    private measureSpinner;
+    private measureNav;
+    private measureTabs;
+    private measureBreadcrumb;
+    private measureIcon;
+    private measureDivider;
+    private layoutNode;
+    private layoutRow;
+    private layoutCol;
+    private rowContainsSidebarOrMain;
+    private layoutHeader;
+    private adjustChildrenY;
     /**
-     * Render icon paths for SVG
+     * Check if a node should flex to fill available space in a Row
+     * Only layout containers without explicit width should flex
      */
+    private isFlexContainer;
+    private layoutFooter;
+    private layoutMain;
+    private layoutSidebar;
+    private layoutCard;
+    private renderBox;
+    private renderRowBox;
+    private renderColBox;
+    private renderHeaderBox;
+    private renderFooterBox;
+    private renderMainBox;
+    private renderSidebarBox;
+    private renderCardBox;
+    private renderModalBox;
+    private renderTitleBox;
+    private renderTextBox;
+    private renderButtonBox;
+    private renderInputBox;
+    private renderTextareaBox;
+    private renderSelectBox;
+    private renderCheckboxBox;
+    private renderRadioBox;
+    private renderSwitchBox;
+    private renderLinkBox;
+    private renderImageBox;
+    private renderPlaceholderBox;
+    private renderAvatarBox;
+    private renderBadgeBox;
+    private renderTableBox;
+    private renderListBox;
+    private renderAlertBox;
+    private renderProgressBox;
+    private renderSpinnerBox;
+    private renderNavBox;
+    private renderTabsBox;
+    private renderBreadcrumbBox;
+    private renderIconBox;
+    private renderDividerBox;
     private renderIconPaths;
-    private renderImage;
-    private renderPlaceholder;
-    private renderAvatar;
-    private renderBadge;
-    private renderTable;
-    private renderList;
-    private renderAlert;
-    private renderProgress;
-    private renderSpinner;
-    private renderNav;
-    private renderTabs;
-    private renderBreadcrumb;
-    private getFontSize;
+    private getPadding;
+    private getGap;
+    private resolveSpacing;
+    private resolveSize;
+    private isFullWidth;
+    private estimateTextWidth;
     private resolveFontSize;
     private getTitleFontSize;
     private escapeXml;
 }
-/**
- * Create a new SVG renderer instance
- */
 declare function createSvgRenderer(options?: SvgRenderOptions): SvgRenderer;
 
 /**
@@ -439,9 +489,6 @@ declare function generateComponentStyles(_theme: ThemeConfig, prefix?: string):
 type IconElement = [string, Record<string, string>];
 type IconData = IconElement[];
 declare const lucideIcons: Record<string, IconData>;
-/**
- * Get icon data by name
- */
 declare function getIconData(name: string): IconData | undefined;
 /**
  * Render icon data to SVG string